teleren/devto huggingface dataset:
Two ways to convert a string to an array in Ruby
Tags: beginners, ruby, webdev, codenewbie
Published: 2020-08-28 20:56:22

---
title: Two ways to convert a string to an array in Ruby
published: true
description: 
tags: #beginners #ruby #webdev #codenewbie
//cover_image: https://direct_url_to_image.jpg
---

Hello everyone.
This week, I will be sharing 2 ways I have learnt how to convert a string to an array of characters. A little backstory, I was solving an algorithm on Codewars and it required me converting the string to an array. I solved it with the method I know and after submitting, I scrolled through other answers to learn how others did theirs and possible pick up one or two new knowledge.

The two methods are `chars` and `split`. They both return an array of characters but one is better than the other.

### Using Chars
Let's use the string 'programming'

```ruby
word = 'programming'
word.chars

# => ["p", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g"]
```

On a sentence, we showcase how to do this with the example below
```ruby
sentence = 'Ruby is great'
sentence.chars

# => ["R", "u", "b", "y", " ", "i", "s", " ", "g", "r", "e", "a", "t"]

As you can see, it returns all the characters even the `space`
```
### Using Split
To use split, we need to pass a parameter that tells it how to split the string.
 
```ruby
word = 'programming'
word.split('') # '' tells it to return each characters

# => ["p", "r", "o", "g", "r", "a", "m", "m", "i", "n", "g"]
```

For a sentence, we might want to only return each words in it.

```ruby
sentence = 'Ruby is great'
sentence.split(' ') # tells it to split anywhere there is a space

# => ["Ruby", "is", "great"]
```

We can also split at a character. 
```ruby
'kolloioll'.split('o')
# => ["k", "ll", "i", "ll"]
```

You can also pass regex to the split method

```ruby
# split at every `fullstop` before a `comma`
"sha.,ger.,ffd.,uio.".split(/.(,)/)

# => => ["sha", ",", "ger", ",", "ffd", ",", "uio."]
```

### Difference between them
Given that split works on string using regex, it fails on strings that contains invalid characters.

```ruby
"love\x80light".chars

#=> ["l", "o", "v", "e", "\x80", "l", "i", "g", "h", "t"]
```

```ruby
"love\x80light".split('')

#=> ArgumentError (invalid byte sequence in UTF-8)
```

Another difference is that unlike `split` where you can specify where to split from, you can't do that for `chars`. You can only use it when you need to return all the characters in a string as an array

### Resources
[Stackoverflow answer to difference between char and split](https://stackoverflow.com/questions/46436825/ruby-split-vs-chars-on-a-string)
[API dock - String split](https://apidock.com/ruby/String/split)

Let me know if you have an comments below.

Until next week
If you had a time machine, what would you tell your younger self?
Tags: fun, discuss, career, watercooler
Published: 2020-08-28 20:53:46

---
title: If you had a time machine, what would you tell your younger self?
published: true
description: What key learnings would you train into your early development career?
tags: fun, discuss, career, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/4q8u4asljzkz39tst8v0.jpg
---

In many ways, I love the path I've taken in the tech industry. It wasn't a straight line but it worked for me. And the place I ended up was beautiful. But if I had the option I'd go back and tell myself a few things. What advice do you wish you'd had earlier?
3...2...1... Liftoff
Tags: beginners, security, database, sql
Published: 2020-08-28 20:36:01

What's up everyone, my name is Andrew Maier and I'm a freshman at Penn State University studying Cybersecurity Analytics and Operations. This fall I'm beginning my journey to become an Information Security professional. 

In high school, I learned through my extra- curricular interests that I loved problem solving and I craved efficiency. Not too much later, I found myself in an air gap lab observing a cybersecurity club. Thats when I knew that I wanted to work in InfoSec.

In my eyes, cybersecurity brings together the perfect marriage of hardware and software knowledge to serve the public through risk mitigation strategies. I'm a bit of a tech gear head, so the infrastructure and networking background that I will have as an IT professional is exciting. 

At the moment, I'm looking toward a career either cyber defense or penetration testing. I have a lot of work to do to get there, so follow along with me as I gain more skills that I will seed as an InfoSec professional.

Take a look at what I'm doing to build my online presence as an InfoSec professional in the 21st century.


This video will contain many resources for up and coming IT students who are looking to start their own journeys to becoming a professional. Additionally, it discusses my first topic: the differences between SQL and NoSQL and their ideal use cases. 

{% youtube W4TmOl8KSxg %}

In Summary:
- SQL databased are relational, while NoSQL databases are non relational.
- SQL Databases have a predefined dataset schema, while NoSQL databases have a dynamic schema. This provides structure,  organization, and quick deployment times to datasets in a SQL 
database, while NoSQL databases allow for flexible organization. 
- SQL Databases are primarily table based while NoSQL databases can have many formats that are dependent on the use case (Table, Document, Graph, etc.)
- SQL Databases allow for flexible queries due to their relational nature, while NoSQL databases 
- SQL Databases typically have one node and no partitions, and are managed by one machine that is 'vertically scalable' to manage traffic. NoSQL databases usually have a number of nodes and a hashing formula that determines what node a particular dataset exists on. So, NoSQL databases are 'horizontally scalable, meaning that they can be expanded by adding more machines (nodes) to the system.


I plan to utilize this space to write about different projects that I'm working on to sharpen my skills and I also plan to use GitHub to manage the large projects that I work on, and also as a backup for my work. 

As I begin to learn more about the InfoSec space, I will document my findings and failures as I grow into this new and complex space.
Optimizing Images with Gatsby Image
Tags: gatsby, react, graphql
Published: 2020-08-28 20:30:44

Gatsby Image is a react component designed to optimize image loading times for static sites. It lazy-loads the images with a blur-up effect, which speeds up initial page loading times and holds the image position.

1) Install the gatsby default boilerplate using the Gatsby Cli, containing all the main configuration files to get you up and running quickly and install the following packages which allow you to process the images and use GraphQL queries to access images.

```
npm install --save gatsby-cli
gatsby new my-default-starter https://github.com/gatsbyjs
/gatsby-starter default
npm install --save gatsby-image
npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem
```

2) The starter will have generated a gatsby config file. Here you must add the plugins if they are not there already. The gatsby source filesystem will by default contain a path to the images folder which can be changed if you move the images locally. 

```
plugins: [ 
{
resolve: `gatsby-source-filesystem`,
options: { name: `images`,    
path: `${__dirname}/src/images`,
},    
},    
`gatsby-transformer-sharp`,    
`gatsby-plugin-sharp`
, ...additionalplugins 
]
```

3) Add some images to the /src/images folder to test. Fire up the development server http://localhost:8000/ and the GraphiQL playground http://localhost:8000/___graphql to write your query. 
```
gatsby develop
```
Example query:

```
query MyQuery {
 file(relativePath: {eq: "blossoms1.jpg"}
 childImageSharp {
 fluid {
   src
   }
  }
 }
}
```

4) Copy the query and for this example we'll use it in the src/pages/index.js homepage. Replace fluid/src with the query fragment ...GatsbyImageSharpFluid. 

```
export const data = graphql`  
query MyQuery {    
file(relativePath: { eq: "flora.jpg" }) {      
childImageSharp {        
fluid(maxWidth: 1000) {          
...GatsbyImageSharpFluid       
}}}}` 
```

5) Import img from gatsby-image and add the img tag as below. You can destructure the query from props.

```
<Img fluid={props.data.file.childImageSharp.fluid} />
```

Full Component:

```
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"
import "./index.css"

const IndexPage = props => (  
<Layout>    
<SEO title="Home" />   
<Img fluid={props.data.file.childImageSharp.fluid} />    
<article>      
<h1>Fleurs De Majorelle</h1>      
<p>Designers of high quality, bespoke floral creations, traditional or        contemporary in design, arranged to suit your budget.</p>    
</article>  
</Layout>
)
export default IndexPage

export const data = graphql`  
query MyQuery {    
file(relativePath: { eq: "flora.jpg" }) {      
childImageSharp {        
fluid(maxWidth: 1000) {          
...GatsbyImageSharpFluid        
}}}}` 
```
Using Tippy.js with StimulusReflex and CableReady
Tags: rails, javascript, stimulusreflex, cableready
Published: 2020-08-28 20:24:47

So you've got a killer [StimulusReflex](https://docs.stimulusreflex.com)-based Rails app going, and you're using [CableReady](https://cableready.stimulusreflex.com) all over the place, and the DOM is morphing, and everything is going great! Now, you're ready to start adding in some tooltips here and there to polish up your user experience. Enter [Tippy.js](https://atomiks.github.io/tippyjs/) for much success.

At first, you just add an event handler listening to turbolinks reloads and have it initialize all the tippy elements on the page. And that works great...

...until you use a Reflex to morph the DOM. Ack! Elements that were morphed that were supposed to have Tippy(s) now... don't.

Of course, this makes sense. StimulusReflex, via CableReady, is morphing the DOM; it's not a Turbolinks load. So we'll need to change that.

First, get rid of the turbolinks event handler. We're just going to do this with Stimulus and a `cable-ready:after-morph` event handler:

```javascript
// tippy_controller.js

import { Controller } from "stimulus";
import tippy from "tippy.js";

export default class extends Controller {
  initialize() {
    document.addEventListener(
      "cable-ready:after-morph",
      this.initializeTippys.bind(this),
      true
    );
  }

  connect() {
    this.initializeTippys();
  }

  disconnect() {
    this.destroyTippys();
  }

  initializeTippys() {
    this.destroyTippys();
    tippy(document.querySelectorAll("[data-tippy-content]"));
  }

  destroyTippys() {
    let tips = document.querySelectorAll("[data-tippy-content]");
    tips.forEach((e) => {
      if (e._tippy) e._tippy.destroy();
    });
  }
}
```

Cool. Now that that's out of the way, you just need to add `data-controller="tippy"` to the right element(s) in your HTML. Personally, I just add it to the BODY tag so I can always make tooltips anywhere, any time.

Enjoy!

(let me know in the comments if there's an issue with this approach, or you have a better way, but it worked for me!)
Day 89 : #100DaysofCode - JS Objects & Fizzbuzz
Published: 2020-08-28 20:17:02

Today I began to review Javascript objects and constructors via my bootcamp and FreeCodeCamp. I am almost halfway through the FreeCodeCamp lessons and hope to finish by tonight or tomorrow morning. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/flg4dbkznc9xhh8folak.png)

Some notes that I took are:

<i>Constructors are functions that create new objects. They help us to define properties and behaviors that will belong to a new object. </i>

A sample constructor:

```

function Person(firstName, lastName) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.age = 23

}

let sally = new Person()
```

The ``sally`` object is now an instance of the Person constructor. You can check this by running:

```
karen instanceof Person; // => false
sally instanceof Person; // => true
john instanceof Person; // => false
```

<i> All objects have properties. ``Own``properties are defined directly on the object instance itself. And ``prototype`` properties are defined on the prototype.</i>

```
function Person(firstName, lastName) {
  this.firstName = firstName;  //own property
  this.lastName = lastName;  //own property
}

Person.prototype.age = 25; // prototype property

let will = new Person("Will, Smith");
```

I learned a lot about javascript objects and constructors and cant wait to learn more. 

In addition, I was able to complete the FizzBuzz problem using Javascript. I plan to start to do more challenges and algorithms as I learn more. 

{% replit @SincerelyBritta/Fizzbuzz %}

As always, thanks for reading!

Sincerely, 
Brittany
CI/CD for your Resume!
Tags: actionshackathon, career, devops, resume
Published: 2020-08-28 20:08:44

After ending up with countless PDFs of my resume and never being sure of which one is the final version. I decided to start versioning it with the tool I already knew, Git. After finding a good enough LaTeX template, a `git init`, and some commits later, I had a good enough resume template with a working Github Action that would publish the generated PDF as a release artifact on every tag. I also added generated PDFs as build artifacts for every commit to preview changes without having access to a working LaTeX env, so that one may be able to make edits from their phone.

### My Workflow

I simply edit the `tex` file using the Web Editor and commit my changes. The "Preview" workflow will build and generate a pdf that I can preview using the build artifact. 

#### ![Preview Workflow](https://dev-to-uploads.s3.amazonaws.com/i/vn4gw2ao2lizjrv104g1.png)

Once I'm satisfied with the edits, I will create a new release, this will trigger the "Release" pipeline. It will build and publish the pdf as a release artifact.

![Release Workflow](https://dev-to-uploads.s3.amazonaws.com/i/2gtgdln4ler0yoqitu74.png)

The release is what allows me to always have access to the latest version of my resume at the `/releases/latest/download/Preview.pdf` path of my repository. 

#### [Download latest version](https://github.com/rohit-gohri/resume-template/releases/latest/download/Preview.pdf)

More than that, I can preview it directly in my browser using Google Docs by using `https://docs.google.com/viewer?url=https://github.com/<username>/<repo>/releases/latest/download/Preview.pdf`. I can create a short url of this that I can give to anyone knowing it'll always point to the latest resume without having to worry about updating it.

#### [Preview latest version using Google Docs](https://docs.google.com/viewer?url=https://github.com/rohit-gohri/resume-template/releases/latest/download/Preview.pdf)

### Submission Category: Wacky Wildcards

When I first realized I could basically code my resume in LaTeX, it finally stopped becoming something I dreaded doing and became something I actively wanted to improve. Adding CI/CD to it was the next natural step.

### Yaml File or Link to Code

This is a Github Template Project with a LaTeX resume template and Github Workflows. You may use this template or add your own LaTeX files to build those.

{% github https://github.com/rohit-gohri/resume-template %}

### Additional Resources / Info

- My Resume that is using a similar workflow, but with some added integrations to sync my blog with the latest version of my resume: [resume](https://github.com/rohit-gohri/resume)
3 tips for working with dates using vanilla JS
Tags: javascript, vanillajs, beginners
Published: 2020-08-28 20:08:19

Ok, first off, I know that moment.js exists and I do use it. This article outlines a few tricks I learned by creating a calendar using the Date object [(MDN web docs)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) in (vanilla) Javascript. These tips might be handy if you need to do one-off things with dates

###Vanilla JS Calendar
{% codepen https://codepen.io/nhuynh1/pen/xxZXpBY %}

## First day of the month

Create a new date object with the current date, then set the day to 1 with `setDate()`

```jsx
const startDate = new Date();
startDate.setDate(1);
console.log(startDate); // Date object representing first day of current month
```

## Last day of the month

Since the last day of the month can be different (28, 29, 30, 31 — ugh February!) this one isn't as straightforward. We first have to set the month to the next month and then call `setDate()` with `0`

```jsx
const endDate = new Date();
endDate.setMonth(endDate.getMonth() + 1);
endDate.setDate(0);
console.log(endDate); // Date object representing last day of current month
```

## Formatting dates

With the `Intl.DateTimeFormat` ([MDN web docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)) object it is really easy to format dates—and you can also format them for different languages too

```jsx
const today = new Date();
const monthYearOpts = {
	month: 'long', 
	year: 'numeric'
}

const monthYearString = (new Intl.DateTimeFormat('en-US', monthYearOpts)).format(today);
const monthYearStringFrench = (new Intl.DateTimeFormat('fr-FR', monthYearOpts)).format(startDate);

const dayDateMonthOpts = {
	weekday: 'short', 
	day: 'numeric', 
	month: 'long', 
	year: 'numeric'
}
const dayDateMonth = (new Intl.DateTimeFormat('en-US', dayDateMonthOpts)).format(startDate);

console.log(monthYearString); // August 2020, for example
console.log(monthYearStringFrench); // août 2020, for example
console.log(dayDateMonth); // Sat, August 1, 2020, for example
```

It's worth noting that the level of customizing is not as granular as something like moment.js. For example `Intl.DateTimeFormat` automatically places in punctuation automatically based on the language and region.

## Conclusion: Built-in Javascript objects work in a pinch for date manipulation and formatting

It's not as handy for more complex date manipulations but it works in a pinch of you need to do something simple. Even creating the Vanilla JS calendar was fairly straightforward

**References**

- [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)
- [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
NEO released its new open-source Python SDK for blockchain smart contracts
Tags: python, blockchain, showdev, to
Published: 2020-08-28 19:56:37

The open-source developer community City of Zion has just released their new blockchain SDK and smart contracts repository for the NEO blockchain, which allows Python developers to build blockchain projects on NEO.

Further information under:
- Website: Coz.io
- Blockchain SDK: mamba.coz.io
- Smart contracts: boa.coz.io

Hope this might be interesting for some of you.
Configuring Emmet to include JSX
Tags: productivity, vscode, todayilearned, react
Published: 2020-08-28 19:47:54

Today in productivity minutia: I'm taking a React class and since I'm accustomed to Emmet shortcuts, I was getting really frustrated with the extra typing for JSX. A google search and 2 minutes later I got [my answer + a bonus tip on images] 
(https://www.smashingmagazine.com/2018/01/visual-studio-code/) from Burke Holland via Smashing Magazine. :star2: :raised_hands: (<-- and then I searched "markdown emoji cheatsheet" :joy:)

![Smashing Magazine article about VS Code](https://dev-to-uploads.s3.amazonaws.com/i/ryq59ijhyrg0ymr9jcz2.png)
How to run your flutter app on multiple emulator devices using vscode
Tags: ios, android, dart, vscode
Published: 2020-08-28 19:39:46

## How to run your flutter app on multiple emulator devices using vscode

Flutter is a cross-platform mobile framework i.e it support for both Android and iOS, developing flutter is so fascinating that you get to write once and run on both platform. in this post I will be showing how to run more than one emulator concurrently using Visual studio code, by default you can only run a single emulator at a time on a project. Thanks to super-fast hot reload and restart feature of flutter which makes development experience faster and better. But it would have been better if you can be testing/debugging your application as you are developing on both platforms devices without you have to wait for one device.

## Steps
- Create different emulator devices you want to run your application on. e.g iOS devices, Android device
NB: I won't be showing how to create emulator devices


 [How to create Android and iOS emulator device](https://grinchik.com/blog/how-to-install-ios-simulator-and-android-emulator-on-mac/) .


-  Make sure all the devices are launched.i.e all devices for iOS and Android.

-  Get ID for all your devices, to get the device id run ```flutter devices``` on your terminal to get your device id. [screenshot below]

![Screenshot 2020-05-10 at 7.18.03 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1589134834356/POTEo31RS.png)

-  Create a launch configuration setting for your flutter project. [screenshot below]

![Screenshot 2020-05-10 at 6.53.34 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1589137863580/x-TAbnlk_.png)

- Create a device profile for each of the devices in the launch.json

```
{
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"

}

```

NB:
name is the profile name i.e device name although it can be any name. 
below is the sample configuration setting for my flutter app


```
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart"
    },
    {
      "name": "Android",
      "request": "launch",
      "type": "dart",
      "deviceId": "emulator-5554"
    },
    {
      "name": "iPhone",
      "request": "launch",
      "type": "dart",
      "deviceId": "iPhone"
    },
    {
      "name": "iPad Pro",
      "request": "launch",
      "type": "dart",
      "deviceId": "CE96E50B-A047-40D9-9921-1359CA2CF231"
    }
  ],
  "compounds": [
    {
      "name": "All Devices",
      "configurations": ["Android", "iPhone", "iPad Pro"]
    }
  ]
}

```
- 
![Screenshot 2020-05-10 at 7.36.17 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1589135855993/Rhtru9sq2.png)
Day 9 of 100DaysOfCode
Tags: 100daysofcode, javascript, eloquentjs, codenewbie
Published: 2020-08-28 19:18:37

Today I didn't have much time to code because of school work that had to be done. Decided to at least read a little from the Eloquent JavaScript book to get the tiny JS part of my brain working. 

## What I did today:

### Started reading chapter 6 of Eloquent JavaScript
https://eloquentjavascript.net/06_object.html

#### What I learned from it:
* Introduction to encapsulation
* Difference with methods and functions

####Time spent learning:
Task 'Reading EJS'. Elapsed time: 28 min 3 s

#### Total time: 28 min
Tracked by using my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about)

### Further reading

#### [FreeCodeCamp](https://www.freecodecamp.org/learn)
Check out FCC for the best interactive exercises! I just finished the Basic JavaScript lessons and can recommend them for a beginner! You can read more from yesterday's post. 

#### [Eloquent JavaScript book](https://eloquentjavascript.net/)

###Psst
You can check my answers to the exercises of Eloquent JavaScript. You'll find them [here](https://www.arttupyykonen.com/ejs-solutions/).

Hope you are enjoying my updates! I love the feedback I have been getting!

See you all tomorrow!