teleren/devto huggingface dataset:
My Time at Lambda So Far
Tags: react, webdev, javascript, css
Published: 2020-06-06 17:52:33

I’ve been enrolled at Lambda School for over a year now, starting back at the end of May in their WEBPT8 cohort. My growth as a developer and engineer has exploded since this decision. I wanted to write this post detailing my journey since then, documenting fully what Lambda has helped me learn and the amazing range of skills I’ve gained because of that knowledge.

Lambda School is divided up into 4 units —


The first a foray into HTML, CSS, and the beginnings of JavaScript.

Web Fundamentals
– User Interface and Git
User Interface
Git for Web Development
CSS Layouts
Responsive Design
-Advanced CSS and Intro to JavaScript
Preprocessing I
Preprocessing II
Intro to JavaScript
Arrays and Objects
– JavaScript Fundamentals
Scope and Closure
Advanced Array Methods
Prototypes and Inheritance
Classes
-WEB Unit I Build
The second includes advanced JavaScript and the beginnings of React.

Web Applications I
-Applied JavaScript
DOM I
DOM II
Components I
Components II

-Intro to React
React Components and Component State
Composing React Components and Passing Data Via Props
Component Side Effects
Advanced Styling Techniques

-Single Page Applications
React Router
Form Management
Advanced Form Management
cypress.io
-WEB Unit 2 Build
The third details advanced React.

Web Applications II
-Advanced react
Class Components
The React Lifecycle
Composing and Sharing Non-Visual Behavior
Testing Web Applications
-Advanced State Management
The Reducer Pattern
Redux
Async Redux
Context API
-Advanced Web Applications
Testing React
Client-Side Authentication
HTTP/AJAX II
Deploying Web Apps
-WEB Unit 3 Build
The fourth covers the backend, with an optional choice between Node.js and Java (there will a future post on why I did both)

Web API: Node
-Build a Web API
Introduction to Node.js and Express
Server-Side Routing with Express
Express Middleware
Web Deployment and Best Practices
-Adding Data Persistence
Introduction to Relational Databases
Database Schema Design
Multi-Table Queries
Data Modeling
-Authentication and Testing
Introduction to Authentication
Using JSON Web Tokens (JWT)
WEB Unit Testing
Testing the Back End
-WEB Unit 4 Node Build
Now I am currently a Team Lead by day and at night I am in Labs working on a project with a cross functional team for the next few months. I am excited to see what the future holds for me with everything I’ve learned 🙂

Originally posted here: https://leachcoding.wordpress.com/2020/05/27/my-time-at-lambda-so-far/
My First Blog Post – What to Expect?
Tags: react, webdev, javascript, css
Published: 2020-06-06 17:51:36

Hey, I’m Jay. I’m a full stack developer with many other interests/facets outside of my career (and side hobby). This is a place where I hope to start placing the many thoughts that are constantly going through my head, share my experiences in code and other life lessons, as well as hopefully create a space for future growth and development.

Fair warning, I am not a professional writer, and I am from the mountains of Kentucky, so my vernacular may be unfamiliar to most. Excuse that and please enjoy my content for what it is. 🙂

Originally posted here: https://leachcoding.wordpress.com/2020/05/26/my-first-blog-post-what-to-expect/
Why I am Learning Hooks React
Published: 2020-05-31 00:39:19

I learned React by passing down props and state to components. There are a lot of things you could do with React in this form. However, things can get repetitive and harder to read as the list of props and state grows. Even more if you are passing all the way down to the very bottom layer of components. 

This is where hooks can come in handy. It makes things less repetitive and easier to pass down and pull information between components.

Let's take a look at a simple React component without hooks.

```react
import React, { Component } from 'react';
import ExampleButton from '..components/ExampleButton'

export default function App() {
  state = {
   text: "Hello World",
   toggleOn: true
  }

  return (
    <div>
      <ExampleButton text={this.state.text} 
       toggleOn={this.state.toggleOn}/>
    </div>
  );
}
```

In this component, we see that we declared some state attributes and we are passing it down to the ExampleButton component. 

```react
import React, { Component } from 'react';

export default function ExampleButton(props) {

  return (
    <div>
     <Button onClick={!props.toggleOn}>{props.text}</Button>
    </div>
  );
}
```
In this component, we grabbed the state attributes by using props. However, what if we had more components to use the text "Hello World"? Or more buttons to have a toggle feature? Each time, we have to pass down the state properties and call them using props.

With hooks, you will be able to declare state and just call on specific state properties without having to pass down the props. This is done through the use of useState. It works in a similar fashion as setState. With that, you will also be able to change state into something else. 


```react
import React, { useState } from 'react';
import ExampleButton from '..components/ExampleButton'

export default function App() {
  state = {
   text: "Hello World",
   toggleOn: true
  }

  return (
    <div>
      <ExampleButton />
    </div>
  );
}
```
See the difference? No props are getting passed down to the ExampleButton component. So how will we call these state properties now?

```react
import React, { useState } from 'react';

export default function ExampleButton() {
const [toggleOn, setToggleOn] = useState(!toggleOn)
const [text, setText] = useState('Hello!');
  return (
    <div>
     <Button onClick={toggleOn}>{text}</Button>
    </div>
  );
}
```
Here we are using useState to call on any properties of state. This looks much cleaner and easier to read. Also we don't have to worry about properties getting passed down correctly through many different components. We can call directly on any state property by using useState. We can also reset state as demonstrated in the last code block.
🛑 Cypress Tutorial For Beginners (Running Your First TestCase)
Tags: testing, javascript, beginners, cypress
Published: 2020-06-06 17:43:20

✅ Learn Advance Cypress - https://cypresstutorial.com

In this video, We are going to Explore a new UI Testing Tool. - Cypress, This is video of Cypress Tutorial For Beginners we are learning

[![Cypress Tutorial For Beginners ](https://i.imgur.com/8auOWrF.png)](https://youtu.be/8V8Ci2bYvZ8 "Cypress Tutorial For Beginners")


🚀 Day 5 Task :  Explore a new UI Testing Tool. - Cypress  (What is Cypress and Its Architecture)

🚀 Thread :  https://scrolltest.com/automation/day5

🚀 All Task List : https://scrolltest.com/automation/task

🚀 Watch Full Playlist : https://scrolltest.com/automation/playlist

### ✅ What is Cypress?

Cypress is a JavaScript test automation solution for web applications.

It enables teams to create web test automation scripts.
This solution aims to enable frontend developers and test automation engineers to write web tests in the de-facto web language that is JavaScript.

Cypress also supports the Mocha test framework so the core technologies in which you would develop your web test automation are Java Script on top of Mocha.

### ✅ Why to use Cypress and its Features?
 1. Cypress is Flake Resistant : Since Test-cases are running in Browser, they have smart wait for commands and assertions.  - Automatic Waiting
 2. Cypress is fast and more reliable as it directly communicates with Browser - Consistent Results
 3. It can emulate XHR or network requests(mocking) - Network Traffic Control
 4. Recording Videos for debugging and Dashboard 
 5. Now supports multiple browsers
 6. Easy to debug test cases, Dom Snapshots ,  move back and forward in Test-cases - Time Travel
 7. Screenshots and Videos:
 8. Dashboard service, which displays the results of all test runs.

### ✅ Architecture of Cypress
 Most testing tools (like Selenium) operate by running outside of the browser and executing remote commands across the network
 Diagram of the Cypress  
 Source - https://github.com/cypress-io/cypress-documentation/issues/872

![](https://user-images.githubusercontent.com/17179877/74605728-8e547a80-50c2-11ea-8549-b804ef9b4996.png)

### ✅ DisAdvantages of Cypress
- Very limited community support 
- Only supports Javascript as of now.
- Multiple tabs and popups are not supported.
- No shadow DOM support.
   DOM within a DOM.
   Notes : https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
- It does not support mobile browsers even as of now,Yet You can emulate it.

### ✅ Running Your First Cypress TestCase.
1. Install Node - nodejs.org
2. npm install --save-dev cypress@4.7.0 -g
3. npx cypress open
4. cypress run --spec cypress/integration/examples/hello.spec.js --browser=chrome

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Day 3 of #100DayOfCode
Tags: 100daysofcode, react
Published: 2020-06-06 17:37:16

Today's Progress: I have completed All challenges in the Applied Accessibility and Responsive Web Design principles Coding challenge at https://www.freecodecamp.org/ and finished react-router project.

Link to work: https://github.com/Kyawkhaing444/reactrouterproject
Custom git command
Tags: git, bash, productivity
Published: 2020-06-06 17:28:26

There is an 'alias' section in gitconfig to create custom command.
```
[alias]
    ck = checkout
```
You can type `git ck` instead of `git checkout`.

But the most powerful of alias is it also accept shell script.
```
test = "! echo git-test"
```
Now we can have a lot of fun.
You can just write a tiny script in gitconfig like this
```
test = "! \
    f() { \
        echo git-test-start; \
        echo $1; \
        echo git-test-end; \
    }; f"
```
Bascally I create a function and call it immediatly. Wrap in a function so that we can use `$@, $1...` to access arguments.

But since alias needs to be a single line, you need `; \` at each end of line. It's fine for simple script but painful for complex one. So I came out with another approach
```
test = "! ~/bin/git.sh do_test"
```
And create `~/bin/git.sh`
```
#!/usr/bin/env bash

do_test() {
    echo git-test-start
    echo $1
    echo git-test-end
}

"$@"
```
Then don't forget `chmod +x ~/bin/git.sh`.

That's it. It's very useful for those complex and hard to remember tricks of git.
Go - Considering package name.
Tags: go, naming
Published: 2020-06-06 17:21:17

---
title: Go - Considering package name.
published: true
description: 
tags: go, golang, naming
//cover_image: https://direct_url_to_image.jpg
---

I was considering the package name of golang today.
This package provides utility functions of operating HTTP.

At first, `mypackage/utils`
This is not good because "Avoid meaningless package names." is given as a bad [here](https://blog.golang.org/package-names).

Next, `mypackage/http` or `mypackage/httputil`
These naming are also bad because "Avoid unnecessary package name collisions" is given as a bad too.

Finally, `mypackage/apphttputils`
I chose this.

If I use packages only in my application, do I not need to think?

## Reference
https://blog.golang.org/package-names
What is the Minimum Skillset for Junior Frontend Devs?
Tags: frontend, javascript, react, discuss
Published: 2020-06-06 17:15:47

---
title: What is the Minimum Skillset for Junior Frontend Devs?
published: true
description: The web development ecosystem is downright daunting for newcomers. I’ve been thinking a lot about what a minimum curriculum for frontend devs might be.
tags: Frontend, JavaScript, react, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/c93n5u5br4xtbsajqlj4.jpeg
---

The web development ecosystem is downright daunting for newcomers. I’ve been thinking a lot about what a minimum curriculum for frontend devs might be. In other words—what’s the minimum path from nothing to applying for your first FE job?

I think it’d go something like this:

1) How the web works (e.g., client v server, HTTP)
2) HTML
3) CSS
4) JavaScript
5) Git
6) Choose a framework (React, Vue, etc)
7) Security (e.g., HTTPS, XSS, CSRF)
8) Accessibility
9) Projects (~1 vanilla, 2 framework)

Thoughts? Obviously, there’s so much more to the ecosystem, but again I’m trying to distill down to the minimum for a first FE job.

<hr />

## If you enjoy this discussion, please give it a 💓, 🦄, or 🔖 and consider:

- signing up for [my free weekly dev newsletter](https://buttondown.email/devtuts)
- subscribing to [my free YouTube dev channel](https://www.youtube.com/c/devtutsco?sub_confirmation=1)
Doing Stupid Stuff with GitHub Actions! (FIVE Actions Implemented and Explained) 
Tags: github, devops, tutorial
Published: 2020-06-06 16:58:12

I decided to have some fun and implement a variety of ridiculous GitHub Actions as a way to learn more about and highlight various features of GitHub Actions.

Here are the actions with timestamp links:

1) [Holiday Reminder](https://www.youtube.com/watch?v=w7-ugGAYVCo&t=80s) -- Sending myself a holiday reminder email
2) [Recursive Action](https://www.youtube.com/watch?v=w7-ugGAYVCo&t=120s) -- An action that calls itself
3) [Exponential Action](https://www.youtube.com/watch?v=w7-ugGAYVCo&t=224s) -- Like the recursive action, but the action calls itself multiple times
4) [Smart Lights](https://www.youtube.com/watch?v=w7-ugGAYVCo&t=325s) -- Turning on/off smart home lights with each commit
5) [Tic-Tac-Toe](https://www.youtube.com/watch?v=w7-ugGAYVCo&t=380s) -- A game of tic-tac-toe where the compute player plays within an action

Also, the GitHub repo can be found here: https://github.com/sidpalas/stupid-actions

Enjoy!

{% youtube w7-ugGAYVCo %}
[Tutorial Git] git revert: Desfazendo commits
Tags: git, revert, hash, braziliandevs
Published: 2020-06-06 16:39:38

O que esse comando faz é basicamente desfazer tudo aquilo que foi feito dentro de um determinado **commit** (ou dentro de um intervalo de commits). O que acontece aqui, na verdade, é que o Git cria um novo commit que registra o que foi desfeito.

Por exemplo: se em um commit você adicionou um arquivo, o **revert** remove; se o commit editou algumas linhas, o **revert** volta essas linhas ao que eram antes da edição e assim por diante.

Vamos supor que temos a seguinte situação:

Abaixo temos um log dos commits feitos até o momento num repositório. Foram 4 até agora.

![commits feitos até então](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmjgx0izetq8r3vdo7ri.png)

E temos o seguinte arquivo HTML.

![arquivo index antes do commando revert](https://thepracticaldev.s3.amazonaws.com/i/juutdltmncdbe59lolki.png)

Se queremos reverter para a situação de antes de adicionar os meta dados (voltar a situação do commit 3), basta usar o seguinte comando:

```
$ git revert c2f6c649
```

- o símbolo **$** indica que você deve usar o **usuário comum** para fazer essa operação.
- **c2f6c649** é a chave do nosso último commit. No seu projeto ela será diferente da mostrada aqui.

Note que devemos apontar exatamente para o **commit** que desejamos reverter e não um anterior a ele.

Em seguida o **Git** abrirá o editor que foi selecionado como padrão para editar o **commit** de reversão.

Aqui você grava a mensagem sobre a sua reversão.

![editando a reversão do commit](https://thepracticaldev.s3.amazonaws.com/i/cjx1x6u5or4k0x7ftnxn.png)

Teremos como retorno a seguinte mensagem:

```
[main 0967249] Revert "adicionando meta dados"
 1 file changed, 1 deletion(-)
```

Caso seja necessário realizar ajustes e correções nos arquivos durante o processo de reversão, será necessário utilizar o comando [git add](https://dev.to/womakerscode/tutorial-git-adicionando-arquivos-no-git-3a0o) após a edição desses arquivos e em seguida o comando

```
$ git revert --continue
```

Para que o processo de reversão seja finalizado.

## Usando o HEAD para reverter commits

Também é possível utilizar o **revert** assim:

```
$ git revert HEAD~<número_a_partir_de_1>
```

- substitua o **número_a_partir_de_1** por um número, sendo o número 1 o último **commit**, o 2 o penúltimo, o 3 o antepenúltimo e assim por diante; sem os sinais de **< e >**.

## Cancelando a reversão

Caso haja algum erro durante a reversão, é possível cancelar a operação com o comando:

```
$ git revert --abort
```

A falha da reversão ocorre quanto a operação afeta um outro commit posterior ao ponto da reversão.

## Atenção!

- O comando de reversão deve ser executado com o index limpo, ou seja, após os commits terem sido feitos. 
- Reverta commits apenas se for extremamente necessário.
Inspiration and Resilience with Scratch
Tags: beginners
Published: 2020-06-06 16:36:49

This has been a very tragic week for the United States.

The senseless loss of Black lives due to police brutality is unfathomable. Black Americans have had to endure racism and prejudice for far too long. Things need to change, and they need to change now. Here are a few resources that were shared with me on how you can help educate yourself:

- [An Essential Reading Guide for Fighting Racism](https://www.buzzfeednews.com/article/ariannarebolini/george-floyd-amy-cooper-antiracist-books-reading-resources?fbclid=IwAR2CrE4Cny0SmIaNPEtwn_ILOgei-QhaUDSHhwreEF5mn-Z3vNZhjAwFNuw)
- [How You Can Help](https://kayladanielleblog.com/how-can-i-help/)
- [Talking About Race](https://www.netimpact.org/blog/talking-about-race?action)

Undoubtedly, this is a tough time for many people. But I came across this great article on FairyGodBoss filled with [resiliency quotes](https://fairygodboss.com/articles/these-17-resilience-quotes-will-remind-you-that-well-get-through-this) to inspire everyone to work hard for the change that we so desperately need. 

The post really helped me, so I thought I would share some quotes with you by putting them into an interactive [Scratch project](https://scratch.mit.edu/projects/402556712/).

I've been having a lot of fun learning Scratch to prepare for a teaching position that I've taken part time. It is such an amazing platform (even for adults!) and I think it teaches great fundamentals for anyone.

Overall, Scratch is very simple to learn, which is why it is understandably marketed towards children, but there are a few basic rules that the platform follows. I've shared below a few pointers if you'd like to start a Scratch project of your own or just play around with the platform:

- Always start with the green flag
 - This seems obvious, but I often times get so excited about adding new blocks to a component I completely miss the first step.
- Check out each of the sections for blocks before you begin
 - It's helpful to first familiarize yourself with the different types of blocks so you can get started quickly and not spend too much time looking around for the right functionality.
- Use variables for keeping track of anything you want to change
 - Just like a regular variable in any language, Scratch allows for manipulation of variables, which is awesome!
- Cloning can be very useful
 - Being able to create multiple instances of a single sprite is very helpful especially when it comes to making games, but play around for yourself and see.

I wanted to give a little information about Scratch but I didn't want to take away from the fact that the events happening all around America are serious. And that systemic racism and inequality cannot be overlooked any longer. I made this project in hopes of inspiring others, the way that these quotes did for me. "Until we all experience justice and equality in our daily lives, none of us can."
Rest Parameter in ES6 - Supporting an arbitrary number of arguments
Tags: javascript, codenewbie, todayilearned, webdev
Published: 2020-06-06 16:34:34

In javascript, you can call a function with an arbitrary number of arguments. A function can be defined with any number of arguments. If extra arguments are present, it does not matter and will be simply ignored. 

```javascript
function greetings(name){
console.log(`Hello ${name}!`);
}

greetings("John Doe", "Harry Potter", "Dr. Strange");
// Hello John Doe!
```

The above function will not give any error. But it will only use the first parameter **"John Doe"** and ignore the remaining ones.  

Many built-in functions also support an arbitrary number of arguments. For example, **Math.max()** and **Math.min()** accepts an arbitrary number of arguments and returns the maximum and minimum of the values passed to it.

```javascript
Math.max(1, 2, 4, 9, 100, 6);
// 100

Math.min(1, 2, 4, 9, 6);
// 1
```

## The ...rest parameter

To support an arbitrary number of arguments in our function like Math.min() and Math.max() instead of ignoring them as our **greetings function** did in the previous example, we can use the rest parameter(...rest) to collect some or all the arguments in an array. 

```javascript
function greetings(...names){
  for(let name of names){ 
    console.log(`Hello ${name}!`);
  }
}

greetings("John Doe", "Harry Potter", "Dr. Strange");
// Output: 
// Hello John Doe!
// Hello Harry Potter!
// Hello Dr. Strange!
```

In the above example, "names" is the name of the array in which all the parameters are collected.

As the **rest** returns a pure array, you can do all the array related operations on the names array. For example,

```javascript
names.length;
// 3

names.join(', ');
// John Doe, Harry Potter, Dr. Strange
```

## Supporting fixed and variable arguments
Using the rest parameter, we can also create a function that supports fixed and variable arguments. 

```javascript
function greetings(greeting, ...names){
  for(let name of names){ 
    console.log(`${greeting}, ${name}!`);
  }
}

greetings("How are you!", "John Doe", "Harry Potter", "Dr. Strange");
// Output:
// How are you!, John Doe!
// How are you!, Harry Potter!
// How are you!, Dr. Strange!
```
## Rest parameter must be last
As the rest parameter collects all the remaining arguments, it must be the last argument in the list. 

**Correct:**
```javascript
function func(arg1, arg2, ...rest){};
```

**Wrong:**
```javascript
function func(arg1, ...rest, arg2){};
```

---

***This article was first published on [hackinbits.com](https://hackinbits.com/articles)***
My first personal website
Tags: showdev, webdev, gatsby, netlify
Published: 2020-06-06 16:34:00

Hi all,

Having a personal website was a long wanted project of mine but I always postponed it for different reasons. Today, I am extremely excited to share it with all of you - [https://belev.dev/](https://belev.dev/). I am going to use it as a blog and mainly share things around software development from my experience.

The site is built using [Gatsby](https://www.gatsbyjs.org/) and [LekoArts minimal blog theme](https://github.com/LekoArts/gatsby-themes/tree/master/themes/gatsby-theme-minimal-blog). It is deployed using [Netlify](https://www.netlify.com/). I bought the domain name from [Namecheap](https://www.namecheap.com/) and afterwards configure the DNS through [Netlify DNS](https://docs.netlify.com/domains-https/netlify-dns/).

Most probably I am going to write a blog post about my experience building my first personal website and my impressions about Gatsby and Netlify because it was my first touch with them.

Thank you for reading this and I would really appreciate it if you give the website a try. Any feedback is welcome.
Keystone V5. Easy question. Help!!!!
Tags: javascript, keystone
Published: 2020-06-06 16:10:26

Hello, I am looking for how to create a field to select 2/3 options and that one of them remains in the same mongodb collection (only one list). I don't want to do it with external lists but inside the code write the options. This should be very easy, but I don't condone it working for me. Who can help me ?? Thank you in advance.