teleren/devto huggingface dataset:
My First Step into JavaScript Beginner Projects
Tags: javascript, codenewbie, beginners, womenintech
Published: 2020-09-08 23:06:18

Quick question . . . *Does anyone dream in JavaScript syntax?* I had a dream that I was inside of my computer, pushing around letters and numbers and trying to organize code. I woke up and the first thing I thought to myself wasn't that it was weird, but questioning if I did it correctly because I woke up before I got to **console.log()** it. Tell me I'm not the only one dreaming of code. 

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

Learning all this stuff on my own is pretty tough. Especially with my kitchen within reach. I really had to discipline myself to not open my pantry door for the billionth time. I had to have a serious talk with myself and ask *who needs the attention more? That chip? Or JavaScript?*

That talk must have pushed me because guess what? I closed the chip bag and I finally finished the JavaScript book I’ve been working on for the past couple of weeks and I feel pretty good! I’m looking forward to building some projects to get some sense of everything I’ve learned. Along with the book, I've been reviewing with [Mimo](https://getmimo.com/) on the side. If I'm on my phone, I might as well review some JavaScript things. I really like the multiple ways the app reviews JavaScript terms. But I only have the free version. So I actually really take the time to review if my solution is correct because once I lose all my hearts (I only get three), I have to wait a couple of hours until I can play again. 

Today, my first step is to sign up with [#JavaScript30](https://javascript30.com/). I don't know why I'm nervous, but I am. Let's get to building! 

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

**Last Week’s Accomplishments:**
- Finally finished *Head First JavaScript Programming A Brain-Friendly Guide* by Eric Freeman & Elisabeth Robson

**On My Mind:**
- I need JavaScript projects. What’s a cool project that you’ve done? 

Until next week,
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h4as8ppg0u73on7y8677.png)

######Vector Images by: <a href="https://lovepik.com/images/book.html">Png vectors created by LovePik User(ID:42824061) - lovepik.com</a>, <a href="https://lovepik.com/images/cartoon.html">Png vectors created by LovePik User(ID:23579800) - lovepik.com</a>
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-09-08 22:52:11

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

---

### Lay your DSA groundwork _right_

With this guide, @iuliagroza has rounded up some helpful pointers and resources for anyone looking to lay a solid Data Structures & Algorithms (DSA) foundation for themselves.
{% link https://dev.to/iuliagroza/complete-introduction-to-the-30-most-essential-data-structures-algorithms-43kd %}

### Spoiler: Communication is key

Thanks for these fantastic tips for remote workers, @wilsonrc! With DEV being a fully remote organization for years now, I can never get enough of these guides!

{% link https://dev.to/wilsonrc/over-a-year-of-working-remotely-these-are-the-top-things-that-i-have-learned-about-thriving-as-a-remote-worker-1a76 %}

### The cup half full(stack)

These fundamental lessons from @niharrs for emerging fullstack devs will help you have a solid grasp on your role and a better outlook on the field all around!

{% link https://dev.to/niharrs/10-things-to-know-as-a-fullstack-developer-2kip %}

### Your map to GeoJSON

@ashiqsultan put together a great resource for GeoJSON: the standard data format used to store location data and geographical features.

{% link https://dev.to/ashiqsultan/do-you-know-geojson-4gld %}


### Cutting through the DevOps noise

@saramiteva's list of DevOps myths is a great article to review if your team is considering implementing more DevOps methodologies — but is unsure what information to trust.

{% link https://dev.to/microtica/7-devops-myths-busted-4a7a %}

### Which option would you choose?

@maggiecodes_ had the option to apply for a role via a traditional form or through an API request! In this post, they explain how they approached the latter using Insomnia, an open-source API client application.

{% link https://dev.to/maggiecodes_/how-i-applied-to-a-tech-job-using-a-post-request-193d %}

### Good Old Friend

@soupaul shows us how to create the classic snake game with our good old friend, Vanilla JS.

{% link https://dev.to/nitdgplug/learn-javascript-through-a-game-1beh %}

_That's it for our weekly wrap up! Keep an eye on DEV this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
How many open source project logos do you know? Only 1% of people get all the logos correct! (Fun Quiz)
Tags: opensource, showdev
Published: 2020-09-08 22:38:10

Check out a fun quiz we put together to test your knowledge of open source software project logos!

[Link to quiz](https://openteams.com/landing/logos-quiz?utm_source=dev-to&utm_medium=post&utm_campaign=logo-quiz)

Let us know what you think!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eegik2a20th7c3bu168o.png)
My #100DOC - Day 13
Tags: challenge, 100daysofcode, log
Published: 2020-09-08 22:19:38

1. **[Continued with The Complete JavaScript Course](https://github.com/pablohs1986/javaScriptCompleteCourse2020_Schmedtmann)** (1h 18min):<br>I started challenge 6 of the course, where I'm reviewing the ways to handle DOM & Events.
    
#### **What I learned**: 
* Review of DOM & Events handling.

#### **Total time**:
1h 18min.
Day 212 : Better Than I Imagined
Tags: hiphop, code, coding, lifelongdev
Published: 2020-09-08 22:02:05

_liner notes_:
- Saturday : Had a really good day. Don't remember much about it haha But I do know I had a radio show and that makes it a good day. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image with logos from Discogs and Bandcamp with the words Sep 5th 2020 and Dew Doo Ice Cream Man](https://dev-to-uploads.s3.amazonaws.com/i/pjfjvfzxrd3qpe2jbk86.jpg)

- Sunday : Camped out in my van outside my parents' place because I was getting some packages delivered there. Spent the day, cleaning up my van and doing laundry. Did some coding. Pretty chill day.

- Monday : Was Labor Day so of course I did some labor. haha Basically working on my side project. Started working on the front end. Learned about using Structured Queries with the Firestore REST API! Blew my mind when I got it working the way I wanted. It was super quick as well. My side project should load quickly on almost any connection. Since I'm using Sapper/Svelte for the front end, I played around with some animations that happen between navigating some pages. Came out pretty cool. Actually better than I imagined.

- Professional : Had some meetings today. Got to see a presentation on GitHub Actions. Had a co-worker look over some React code I wrote for a blog post just to make sure it made sense. Been a minute since I wrote some real React, especially using Hooks. He said it looked good. Awesome. Basically spent the rest of the day working on this blog post. The more I do, it seems like there's more I need to explain. haha.

- Personal : Yesterday helped my folks unload some stuff from a trailer so that they could move some stuff out of the old house's garage. But yeah, again, the Structured Query stuff is pretty cool. Before learning about it, I would have to create a function that did the query on the database and then use that as my endpoint I would call from the front end. Now, I can just query directly! I don't have to wait (even though, it has been pretty quick) for the function to fire up, query Firestore and then return the results. I think this new front end is going to be a lot faster than what I made previously.

![The face of a mountain in Val Gardena, Italy at sunset](https://dev-to-uploads.s3.amazonaws.com/i/snf0dv1573kwh8hu5naw.png)

Going to work on the blog post I've been slacking on. haha I just need to sit down and focus for a couple of hours and fill out the outline and compile my notes. Before that though, I want to get a link on the front end of the side project to change depending on if the user navigated to the page directly or came from another page on the site.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 8yQE8v-5GTU %}
react-datepicker
Published: 2020-09-08 21:48:58

Hello!
How do I load react-datepicker.css into an ejected project?


thank you.
I solved the problem by replacing: 
import 'react-datepicker/dist/react-datepicker.css';
with: import 'react-datepicker/dist/react-datepicker-cssmodules.css';
Functional Programming - Pure Functions
Tags: javascript, react, functional
Published: 2020-09-08 21:47:42

Today we are gonna talk about pure functions, which is one of the core concepts of functional programming.No doubt pure functions make your life easier without affecting your application's state.
Rules for pure functions:
1. The function should take in at least one argument.
2. The function should return a value or another function.
3. The function should not change or mutate any of its arguments.
Impure functions example: 
```
function Header(text) {
let h1 = document.createElement('h1');
h1.innerText = text;
document.body.appendChild(h1);
}
Header("Header() caused side effects");
```
In React, the UI is expressed with pure functions. In the following example, you can see the function doesn't mutate DOM. This function
will create a heading-one element, and it is up to some other part of the application to use that element to change the DOM:
```
const Header = (props) => <h1>{props.title}</h1>
```
Hence pure functions do not cause side effects, set global variables, or change anything about the application state.
What Happens When You Type in a URL
Tags: beginners, webdev
Published: 2020-09-08 21:41:39

"What happens when you type in a URL" is a deceptive question commonly asked in tech interviews. If you look online, there are many [very detailed](https://github.com/alex/what-happens-when) resources but few concise explanations of how a web browser, a server, and the general internet work together.

This is how I would explain it:

1. You enter a URL into a web browser
2. The browser looks up the IP address for the domain name via DNS
3. The browser sends a HTTP *request* to the server
4. The server sends back a HTTP *response*
5. The browser begins rendering the HTML
6. The browser sends requests for additional objects embedded in HTML (images, css, JavaScript) and repeats steps 3-5.
7. Once the page is loaded, the browser sends further async requests as needed.

That's really it. Here's a description in words for this site.

When you type "https://wsvincent.com" into your browser the first thing that happens is a Domain Name Server (DNS) matches "wsvincent.com" to an IP address. Then the browser sends an HTTP request to the server and the server sends back an HTTP response. The browser begins rendering the HTML on the page while also requesting any additional resources such as CSS, JavaScript, images, etc. Each subsequent request completes a request/response cycle and is rendered in turn by the browser. Then once the page is loaded some sites (though not mine) will make further asynchronous requests.

If I were asked to explain further I might start talking about *how* the server and browser connect via [TCP](https://en.wikipedia.org/wiki/Internet_protocol_suite). And we could discuss encryption via https, too.

But fundamentally, it's only 7 steps. I hope this clears up any confusion for readers.
The React "Named Children" Pattern
Tags: react, javascript
Published: 2020-09-08 21:20:22

_(Originally published on [ncphi.dev](https://ncphi.dev/blog/react-named-children))_

React Components for wrapping content often use the `children` pattern. For example, this `<Card>` wraps the text "Hello World":

```tsx
<Card>Hello World</Card>
```

The size of the `<Card>` could be set with a prop:

```tsx
<Card size="large">Hello World</Card>
```

This pattern works if `<Card>` has just one content section but not if it has multiple. In that case the content might be provided by `props` instead of `children`:

```tsx
<Card
  size="large"
  title="Hello World"
  subtitle="This is a basic example"
  body="Here is where a lot more text would go."
/>
```

Unfortunately this makes unfamiliar components hard to understand since prop might configure the appearance of the `<Card>` or defines its content. It also becomes messy when the content is not plain text:

```tsx
<Card
  size="large"
  title="Hello World"
  subtitle={
    <>
      This is a basic <strong>example</strong>
    </>
  }
  body="Here is where a lot more text would go."
/>
```

The _Named Children_ pattern helps with the mixing of concerns. Instead of setting `children` as content it's set as an object that maps section names to content. This approach separates content from config making it easier to guess each prop's purpose.

```tsx
<Card size="large">
{{
  title: "Hello World"
  subtitle: <>This is a basic <strong>example</strong></>
  body: "Here is where a lot more text would go."
}}
</Card>
```

The `children` can then be used inside `<Card>` as any other object:

```tsx
function Card({ size = "medium", children }) {
  return (
    <div className={size}>
      <h2>{children.title}</h2>
      <h3>{children.subtitle}</h3>
      <p>{children.body</p>
    </div>
  )
}
```

The _Named Children_ pattern is a promising approach to [separating concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) in React Components making them easier to read and easier to change.

_(Originally published on [ncphi.dev](https://ncphi.dev/blog/react-named-children))_
Treating a JSON object as an array for iterations
Tags: javascript, json
Published: 2020-09-08 21:18:24

## Hello there!

I came across a problem where an API was returning data filtered by date. Each JSON entry had a couple fields (activeUsers: 300, emailsSent: 500.. stuff like that). 

I wanted to create a bar graph that showed the lifetime totals. Since you can't grab a JSON object and just go `jsonThing[0]` I had to find a way to index through it properly so I could sum up the values.

### `yourJsonObject[Object.keys(yourJsonObject)[index]]`

Thats it! Now you can treat your JSON object as an array. 


I'm mainly making this post so I can collect ideas/problems I've had previously in case they come up again. If you're reading this, I hope you may find some value. Have a nice day!
Unable to create a React App
Tags: react, npm, vscode, node
Published: 2020-09-08 21:02:07

Hi,
I am new to this world. I install Node JS, from cmd when i type node -v i get v12.18.3 and npm -v i get 6.14.6

When i type npx create-react-app test

it starts loading but it stops in the middle as shown below but i am not getting happy hacking
Best way to be able to spend more time on an Open Source project?
Tags: discuss, help, opensource
Published: 2020-09-08 21:01:50

Hi all,

I wonder what's the best way to get to spend more time on an Open Source project you love. In my case, I'd love to work less for the company I'm currently employed and spend more time on ideas around an Open Source project of mine.

I think a dual license approach, for instance, doesn't make much sense for providing custom solutions on top of the Open Source version. In my opinion, it would be best to spend all the time on the Open Source project itself and make it a better experience for everyone. Meaning, I guess it's all about being "lucky" or more of a genius to work on something that big companies need, and it would not make sense for them to build their solution from scratch, but rather sponsor your project.

Kind regards
Johannes
How to use Geocoder
Published: 2020-09-08 20:45:33

You're working on your Rails project and you've saved all the addresses. Great!
What do you do now? If you're using the Google API and need to generate markers, you'll need latitude and longitude coordinates.

Geocoder is an amazing gem that takes an address and finds its latitude/longitude coordinates! It can also do it the opposite way as well. Saving the info in the backend can also reduce the API requests you've done in total.

How do you install it?

First, my original model looked like this:

```ruby
class Activity < ApplicationRecord
  has_many :user_activities
  has_many :users, through: :user_activities
  has_many :comments
end

```
Now, we want to do two things:

`gem install geocoder` 

then run
`bundle install`

We've now installed the gemfile and can start using the geocoder.

`rails g migration AddLatitudeAndLongitudeToModel latitude:float longitude:float`

It will create a migration file within your db/migrate folder

Run `db:migrate` and make sure it migrates successfully!

Now we're going to make a few additions to our `Activity` Model.

```Ruby
class Activity < ApplicationRecord
  geocoded_by :complete_address
  def complete_address
    [address, city, state, zipcode].compact.join(', ')
  end

  has_many :user_activities
  has_many :users, through: :user_activities
  has_many :comments
end

```
We've added `geocoded_by :complete_address` and also have defined what the `complete_address` is.

```Ruby
def complete_address
    [address, city, state, zipcode].compact.join(', ')
end
```

To verify if this is working, we can call 
`Activity.first.complete_address` and if everything worked successfully, you'll be returned your new, complete address. This takes the data from the model and creates a full address.

From here we can call something like this:
`Activity.last.geocode`
and it will query geocode along with an API and return the coordinates.

Now, to limit requests we make every time our activities are queried we can do an `after_validation` like this:

```Ruby
class Activity < ApplicationRecord
  geocoded_by :complete_address
  after_validation :geocode, if: ->(obj) { obj.address.present? and obj.address_changed? }
  def complete_address
    [address, city, state, zipcode].compact.join(', ')
  end

  has_many :user_activities
  has_many :users, through: :user_activities
  has_many :comments
end

```

There you go. I hope you _find_ what you're looking for. ;)
Day 19 of 100DaysOfCode
Tags: 100daysofcode, freecodecamp, debugging, javascript
Published: 2020-09-08 20:25:03

Had to do some work today so there wasn't that much time for coding. Decided to do the FCC Debugging challenges. They were short and simple. Nothing really challenging so learning wasn't the highest on that task. 

![Debugging Gru meme](https://dev-to-uploads.s3.amazonaws.com/i/7o9lewdk5wydlesfote1.jpeg)

I also read the start of the CH7 of Eloquent JavaScript. The chapter is a project chapter and seems interesting! In the chapter, the reader builds a program together with the book's instructions. 

#####Study plan
I decided to make a more robust schedule for coding. My base plan right now is:
1. Read a chapter of EJS in two days. Then do the exercises on the third day. 
2. Do at least ten challenges at FCC every day.

This is just the base plan and I'm adding some "spice" to the mix. The spice can be anything that I want to do on that particular day. 

I'll keep this at the beginning of my writings and change it as I see fit. 

I encourage everyone to make a plan. Without a plan, it's impossible to improve. 

###What I did today:

#### 1. Did the debugging challenges at FreeCodeCamp
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/

####What I learned from it:
* Why debugging is an important skill
* When to utilize typeof
* Error types: syntax, semantic, logical

#### 2. Started reading chapter seven of Eloquent JavaScript
https://eloquentjavascript.net/07_robot.html

####What I learned from it:
* Reading and understanding other people's code
* Working with objects

####Time spent learning:
Task 'FCC'. Elapsed time: 25 min 38 s
Task 'Reading EJS'. Elapsed time: 15 min 21 s

#### Total time: 40 min 59 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).

### Further reading

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

#### [FreeCodeCamp](https://www.freecodecamp.org/learn)
Check out FCC for the best interactive exercises! I have now finished the Basic JavaScript, ES6, Regex, and Debugging lessons and can recommend them for a beginner!

#### [Exercism coding challenges](https://exercism.io/)

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

See you tomorrow!
A GitHub Action to Validate GraphQL Operations
Tags: actionshackathon, github, graphql
Published: 2020-09-08 20:11:31

### My Workflow

The [GraphQL Operation Validation Action](https://github.com/mandiwise/graphql-operation-validation-action) allows you to validate the operations used in a client application against a GraphQL schema. The action uses static analysis and checks all of the operation documents in a specified directory in your project to ensure that the queries/mutations and their field selections can be safely executed against a given GraphQL schema.

You can see it in action (😉) in a workflow in [this repository](https://github.com/mandiwise/graphql-operation-validation-demo).

### Submission Category: 

- DIY Deployments

### Yaml File or Link to Code

The repository for this custom action may be found here:

{% github https://github.com/mandiwise/graphql-operation-validation-action %}

A demo workflow file using this action in conjunction with [actions/checkout](https://github.com/actions/checkout) could look like this:

```yaml
name: Validate GraphQL Operations
on:
  pull_request:
  push:
    branches:
      - main
      - "releases/*"

jobs:
  operations:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repo
        uses: actions/checkout@v2

      - name: Validate SWAPI operations
        uses: mandiwise/graphql-operation-validation-action@v1
        with:
          schema_location: ${{ github.workspace }}/swapi/schema.graphql
          base_dir: ${{ github.workspace }}/swapi
          excluded_paths: schema.graphql

      - name: Validate GitHub operations
        uses: mandiwise/graphql-operation-validation-action@v1
        with:
          schema_location: https://api.github.com/graphql
          base_dir: ${{ github.workspace }}/github
          token: ${{ secrets.ACCESS_TOKEN }}
``` 

The job in the workflow has three steps. In the first step, it checks out the repository. In the second step, it uses the custom action to check the GraphQL operations in the `swapi` directory of the repository against a local `schema.graphql` file (and excludes that `schema.graphql` file when searching for operation documents because an error would be thrown). In the final step, it uses the custom action again to check the operations in the repo's `github` directory against a remote schema and sends a token in an `Authorization` header with the request to the GitHub GraphQL API.

### Additional Resources / Info

Be sure to check out the [reference implementation](https://github.com/mandiwise/graphql-operation-validation-demo) for a working demo as well as [my previous post](https://dev.to/mandiwise/validating-graphql-operations-with-a-github-action-3jkg) that provides an in-depth explanation of what open-source tools I used to create the action.