teleren/devto huggingface dataset:
[PT-BR] Aprendendo ReactJS - Guia de Estudos
Tags: braziliandevs
Published: 2020-12-10 11:20:46

Este artigo tem como objetivo ser um pequeno guia para quem nunca estudou ReactJS. O objetivo é realmente um primeiro passo, uma visão geral sobre o framework. 

##Antes de tudo
É interessante que, antes de começar com ReactJS, você tenha, pelo menos, conhecimentos básicos sobre HTML, CSS e VanillaJS (o Javascript puro). Também é interessante que conheça as features do ES6+ antes de começar. Por último, é legal que se tenha alguma familiaridade com o NPM (ou Yarn).

##O começo
Você precisa preparar seu ambiente React. Considerando que já tem o [Node.JS](https://github.com/nodejs/node) configurado em sua máquina, pode começar com [create-react-app].(https://github.com/facebook/create-react-app). Se preferir, pode usar um ambiente online para começar (eu criei um aqui no [codepen](https://codepen.io/julianatechs/pen/QWKKXMO), basta forkar e usar!).

Com o ambiente criado, pode ser interessante dar uma lida na [documentação oficial do React](https://pt-br.reactjs.org/docs/getting-started.html). Também recomendo este [artigo do Thiago Reis](https://medium.com/rocketseat/um-guia-para-iniciantes-no-react-js-80e1ac357649) e o [tutorial oficial feito pelo time do Facebook](https://pt-br.reactjs.org/tutorial/tutorial.html). Caso consuma conteúdo em inglês, também tem [este artigo escrito pelo Kent Dodds](https://egghead.io/courses/the-beginner-s-guide-to-react).

Até aqui já temos uma idéia bem consistente sobre os fundamentos do React, certo? Então está na hora de tentar criar alguns pequenos projetos em React.

#### Sugestões de projetos até aqui:
1. Todo-list
2. Pomodoro Timer
3. Calculadora

Já criamos um app simples, então talvez seja a hora de aprender a consumir uma API com React. [Aqui tem um artigo excelente escrito pelo Alefe Souza](https://alefesouza.github.io/workshop-react/api/). Tente fazer um pequeno projeto consumindo uma API pública. 

#### Dicas de API públicas para estudo:
1. [Nasa Open API](https://api.nasa.gov/)
2. [Marvel API](https://developer.marvel.com/)
3. [Harry Potter API](https://public-apis.io/harry-potter-api)
4. [MakeUp API](https://makeup-api.herokuapp.com/)
5. [Star Wars API](https://public-apis.io/star-wars-api)

Agora que já somos incríveis em apps single pages, está na hora de aprender a usar o **React Router**. [Aqui tenho este artigo incrível do Mario Souto](https://medium.com/collabcode/roteamento-no-react-com-os-poderes-do-react-router-v4-fbc191b9937d). O [tipscode também tem um material incrível sobre isso](https://www.tipscode.com.br/react-router-versao-5-guia-completo/). O melhor material, infelizmente, está em inglês. Mas se for tranquilo para você, [está aqui o link para o guia completo do React Training](https://reactrouter.com/web/example/basic).

##E agora?

Bem, agora é hora de treinar bastante o que já foi estudado até aqui. Vou deixar mais algumas dicas de projetos para serem desenvolvidos:

1. Um blog simples
2. Um e-commerce
3. Uma aplicação simples envolvendo um CRUD

Em breve volto com a segunda parte, um pequeno guia para as features e livrarias do React.
All about Git
Tags: git
Published: 2020-12-10 11:15:35

*Let's Understand What is GIT?*

1. Git is a distributed version control system

2. Git is for tracking the changes in your source code during one particular development

3. It is designed to handles every project with speed and efficiency

4. Git also helps you synchronize the code between multiple people

There are six key terminologies

1. Repository
2. Branch
3. Commit
4. Clone
5. Fetch
6. Fork

## What is a Repository?

A repository is like a folder for your project. It contains the collection of the file as well as the history of the changes made to those files.

## What is a Branch?


It is contained within the repository but does not affect the primary or master branch allowing you to work freely without disrupting the "live" version. You can merge it back into the master branch when you are ready to publish your changes.

## What is a Commit?

Commits are easily one of the most frequented activities by a developer using GitHub. Simply put, a commit or revision is like 'saving' an updated file to its original folder.

Let's understand, it is very simple 

Repository: The location where your code history is stored.

Branch: "Folder" within the repository containing commits

Commits: Different stages of your code inside a branch.

## What is a Clone?

It is used to make a copy of the target repository or clone it, but you can't push changes to the original repo if you are not the project owner.

## What is a Fetch?

Fetching refers to getting the latest changes from a remote repository without merging them in. Once these changes are fetched you can now compare them to your local branches.

## What is a Fork?

A fork is a rough copy of another user's repo. Forking a repository allows you to freely test and debug with changes without affecting the original project.

Git Cheatsheet: https://education.github.com/git-cheat-sheet-education.pdf
Avoid magic strings and boost your development
Tags: node, react, javascript
Published: 2020-12-10 11:11:30

**The problem with magic strings**
1) Problem with API route because of magic strings

Our typical rest API route looks like 
```javascript
router.get(
  '/fetchProducts',
  controller
);
```

Now the problem is you are using the same route in your frontend for calling it

```javascript
fetch('/fetchProducts', {
        method: "get",
});
```

Now you decide to rename the route from '/fetchProducts' to '/getProducts', you will end up doing changes everywhere you used this api and ended up wasting time

2) Problem with navigation routes because of magic strings

Our typical navigation looks like this in react

```javascript
<Switch>
      <Route exact path="/home" component={Home} />
</Switch>
//Navigating with link like
<Link to="/home"> </Link>
```

Now again you decide to rename the route from '/home' to '/landingPage', you will end up doing changes everywhere you used this route in <Link /> to redirect.

__The big picture__
Instead of focusing on your project, you will end up wasting time on doing these changes because you didn't made single source of truth instead you used Magic strings.

__The solution__
Make your magic strings as constant
For API Routes

1) make one file to define constants

```javascript
export const getProductsRoute="/fetchProducts";
```

2) Import the constant from your file and your code will look like

```javascript
import {getProductsRoute} from './apiConstant'
router.get(
  getProductsRoute,
  controller
);
```

3) Copy the same file in your frontend and your code will look like

```javascript
import {getProductsRoute} from './apiConstant'
fetch(getProductsRoute, {
        method: "get",
});
```

For Navigation Routes

1) Make another file to define constants for your Routes

```javascript
export const RouteToHomeComponent="/Home"
```

2) Import constants and use them

```javascript
import {RouteToHomeComponent} from './routeConstant'

<Switch>
      <Route exact path={RouteToHomeComponent} component={Home} />
</Switch>
//Navigating with link like
<Link to={RouteToHomeComponent} > </Link>

```

__How it speeds up the development ?__
Now you don't need to waste your time to revisit 10 pages to edit the code, also there is more context in your code, when you will read after months you don't need to think what this route was doing as the naming would help us with the context, whenever there are changes required you can do them in one go.

__Conclusion__
When you are working on project separate your concerning part and make them constants, because that way it will be easy for you to make any changes and speed up your development by not wasting your time on editing besides this your code would be more easy to read and work with
Learn Python in 10 Weeks
Tags: python
Published: 2020-12-10 11:10:27

Here is a complete breakdown you might follow for learning Python: 

## Week 1: 
- Intro to Python (3.7): Syntax and ways of doing things
- Variables 
- Control Structures
- Comprehensions
 - Input, Output, and Slicing,

## Week 2: 
- Intro to Algorithms 
- Basic algorithms using python. 

By the end of the week, you should be doing some easy challenges on LeetCode/Hackerrank or other sites of that nature.

## Week 3: 
- Module system
- Standard library
- How to use pip
- How to import modules 
- How to structure a project

## Week 4: 
- Intro to Numpy and Pandas

Try to understand how they work. Why they're a bit different than the Python Syntax you've seen so far. Finally why you'd want to use them (not just for ML/Data Science) and how to modify algorithms you've worked on to use them.

## Week 5: 
- Intro to Networking
- How to make REST API calls
- What a Server is? 
- What Flask is? 
- Make a basic Web Application

## Week 6: 
- Advanced-Data Structures 
- Classes
- OOPs 
- Automated Testing 
- Git, and Github

## Week 7: 
- Integrating with your system. 
- Using the environment, using bash, ensuring you have permissions, virtual environments, setup.py, etc.

## Week 8-10: 

Think of a project you want to write and start writing it. Make sure to structure it sensibly, craft meaningful tests (do them first!), break the project into chunks, etc. All the things.
🔥 Trying 9 Frontend JavaScript Frameworks with their CLIs in 2021(React, Svelte, Angular, Vue+) (complete video 📹)
Tags: javascript, react, angular, svelte
Published: 2020-12-10 10:55:28

Web Application Development has grown to a skyscraper level at the end of 2020 and so in 2021. We have a lot of Libraries/Frameworks to choose from. Every library might have it's own pros and cons.

I tried to use <b>9 of the JavaScript Frameworks</b> such as - React, Svelte, Gatsby, Next.JS, Angular, Vue, Nuxt.Js, Sapper, Ember.

In the video, you can see how to create applications using those nine frameworks.

Enjoy the video 🌸

{% youtube wNjUn-bkrmw %}

This is an introductory video. But I plan to create more in-depth content.

<b>SUBSCRIBE</b> to the YouTube Channel -  https://www.youtube.com/channel/UCy5EgfydCQlVv_AM-FZyYcg?sub_confirmation=1
LIKE FB Page -  https://www.facebook.com/the.destro.dev.show/
Follow on Twitter -  https://twitter.com/destro_mas
Follow on DEV -  https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋
# Asynchronous vs Synchronous in javascript


Tags: javascript, beginners
Published: 2020-12-10 10:53:42

synchronous and asynchronous are very confusing concepts in javascript programming language especially for the beginners. for me it will took very long time to understand those two concepts. in this article i will share with you the difference between asynchronous and synchronous in javascript. is it one better than the other ? 

## what is synchronous ?

synchronous means that if you execute some code, it will be executed the code line by line. javascript uses single threaded and also uses synchronous execution model. single thread means that one statement is being executed at a time. so in javascript one thing is happening at a time. take a look of this code

```javascript
console.log("first statement")
console.log("second statement")
console.log("third statement")
```

The result will be :

```
first statement 
second statement 
third statement
```

as we can see, the statement was executed line by line. 

## what is asynchronous ? 

asynchronous is the opposite of synchronous. Each statement will not wait for the previous statement to finish before executing the next statement. there are many examples of asynchronous such as promises, async/await, setTimeout function, and setInterval function. but in this article i will stick to the basic example. just for the basic understanding. consider these lines of code

```javascript
setTimeout(function () { console.log("foo") }, 4000)
console.log("bar")
```

guess which console.log will be executed first... 

```
bar
//wait for 4 seconds
foo
```

as you can see the second statement was executed first. in this example setTimeout is non-blocking, because it didn't block the execution of the second statement.

now, which one is better ? does one of them is better compare to the other ? 

actually there is none of them is better compare to the other. each of them suited for specific use cases. generally in web development asynchronous is used when making a request to the api, when doing a task that will be finished later. synchronous is used when we need to execute the code sequently

that's all for this article. thank you for reading to my first article. leave a comment if i have wrong understanding about this concept. thank you
Top UI Design Trend of 2021 - Glassmorphism
Tags: javascript, html, css, webdev
Published: 2020-12-10 10:51:28

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/94efh5zudwax7hexrsnf.JPG)


Hey Devs,

This is CapsCode.
Without wasting much time lets start with the TOP UI DESIGN TREND OF 2021 (i.e Glassmorphism)
As we all are aware that Neumorphism was the most used/ loved design in 2020, with the starting is new year we are also entering into the new design trend in place of Neumorphism i.e Glassmorphism.
This UI design is really an amazing and more interesting than Neumorphism.

Lets start creating Glassmorphism designs.

**prerequisite:** basic html, css tags only 

Lets create **index.html** file as below:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>

<div class="wrap">
   <h1>< CapsCode /></h1>
   <p>Visit: www.capscode.in</p>
   <div class="drop drop1">
      <div class="drop drop2"></div>
      <div class="drop drop3"></div>
      <div class="drop drop4"></div>
   </div>
</div>

</body>
</html>
```

then we will add css to these elements:
so lets create **index.css** file,

```css
html,body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  min-height: 99vh;
}

body {
    background:#EA7773;
	display: flex;
    align-items: center;
    justify-content: center;
}

.wrap {
  position: relative;
}

h1 {
    font-family: Arial;
    color:  black;
    font-size: 9em;
    padding: 20px 30px;
}

p {
    font-family: Arial;
    color:  black;
    font-size: 2em;
}


.drop {
   background: rgba(255,255,255,0.4);
   border-radius: 10px;
   border: 1px solid rgba(255,255,255,0.2);
   position: absolute;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
   display: block;
   margin: 0 auto;
}

.drop1 {
   width: 57%;
   height: 250px;
   top: 56px;
   left: 0;
   right: 0;
   z-index: 2;
   backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.drop2 {
    width: 90px;
    height: 90px;
    top: -30px;
    left: -80%;
    right: 0;
    z-index: 4;
}

.drop3 {
    width: 100px;
    height: 60px;
    top: 220px;
    right: 30px;
    z-index: 3;
}

.drop4 {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   top: -90px;
   right: -80px;
}
```


that's it my dear devs :)

we are done with how to create Glassmorphism designs, now you can customize it as much as you want.


If you like it please give a 👍

Thank you,
CapsCode
www.capscode.in
www.myemoji.ml
Jetbrains Spaces Automation
Tags: discuss
Published: 2020-12-10 10:45:10

Jetbrains spaces is from yesterday GA. I'am long time user of Gitlab and its CI which i really like but wanted to try another product so i tried Github and don't like their implementation of CI (github actions). So yesterday i tried Spaces automation and IMO it is easy to rewrite configuration from gitlab to spaces.

Here is as example my script which i use to deploy my webpage:

```yml
stages:
  - build
  - deploy

# Build site with hugo and upload cache and artifacts
pages:
  stage: build
  image: pkg.cloud.themaymeow.com/ci/hugo:extended-v0.75.1
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: push
  script:
    - hugo --config ./production.config.toml --enableGitInfo
  artifacts:
    expire_in: 1 week
    paths:
      - public
  only:
    - master
  tags:
    - docker
    - digitalocean

deploy to azure:
  stage: deploy
  image: maymeow/minio-cli
  cache:
    key: themaymeow-com-build
    paths:
      - public
    policy: pull
  dependencies:
    - pages
  script:
    - mc config host add cdn https://storage.googleapis.com $ACCESS $SECRET --api s3v4
    - cd public
    - mc cp -r . cdn/www.themaymeow.com
    - mc ls cdn/www.themaymeow.com
  only:
    - master
  tags:
    - docker
    - digitalocean
```

and following is rewritten to spaces automation

```kotlin
/**
* JetBrains Space Automation
* This Kotlin-script file lets you automate build activities
* For more info, see https://www.jetbrains.com/help/space/automation.html
*/

job("Build page and deploy") {
    startOn {
    	gitPush { enabled = true }
    }
    
    // compile page
    container("compiled.registry.jetbrains.space/p/blog/containers/hugo:0.0.1") {
        shellScript {
            content = """
            	hugo --config ./production.config.toml --enableGitInfo
                mv ./public /mnt/space/share
            """
        }
    }
    
    // publish page to cloud
    container("maymeow/minio-cli") {
        env["KEY"] = Secrets("key")
        env["SECRET"] = Secrets("secret")
        shellScript {
            content = """
            	mc config host add cdn https://storage.googleapis.com ${'$'}KEY ${'$'}SECRET --api s3v4
                cd /mnt/space/share/public
                mc cp -r . cdn/www.themaymeow.com
                mc ls cdn/www.themaymeow.com
            """
        }
    }
    
    // clean
    container("alpine") {
        shellScript {
            content = "rm -r ./public /mnt/space/share/public"
        }
    }
}
```

So what do you think?
Metrics for help developer relationship in a community, why not?
Tags: devrel, motivation
Published: 2020-12-10 10:42:07

I joined a opensource project which started by my company. I've made some dashboards to know how many contributors and users in the community. More and More data comes in, I try to figure out how to find the things behind the data, for example, why there are 10 users visited our homepage, but only one wanna leave us a reply or a issue.
So I wanna start a project to measure developer relationship in a community, to help community members to find out why people love or hate your project, does anyone also like this topic, you can leave me a message!
Pydev Eclipse plugin contribution: Please help
Tags: python, pydev, eclipse, help
Published: 2020-12-10 10:39:51

I have been tasked with making a contribution to the PyDev Eclipse plugin through bug fixing or adding more functionalities. I do not have an idea of how to go about it and I cannot find bugs to at least try and fix. If anyone can help or offer any advice or guidelines I would really appreciate it.
Hacktoberfest 2020 badge!
Tags: hacktoberfest, opensource, firstpost
Published: 2020-12-10 10:33:01

Just got my Hacktoberfest 2020 badge!...

I am happy to share my Hacktoberfest 2020 Challenge Badge with you all. This is my first ever hacktoberfest participation, and it helped me to explore and contribute to open source projects.

Hacktoberfest is a really good platform for all of us to explore and contribute to open source projects, It helped me to improve my skills, gain confidence.

Thankyou Digitalocean and Dev community.
How to Handle Missing Fields From A Struct in Go?
Tags: go
Published: 2020-12-10 10:20:14


Suppose you have a variable of the type of the struct mentioned below which you wanted to `Unmarshal`.

```go
type Building struct {
	WindowCount int `json:"window_count"`
	Doors       int `json:"doors"`
}
```

In case the data is coming from an unreliable source, you can never be sure that the value you will receive will always have the correct format. You have to be cautious when working around data like this. If you are new in Go you might be wondering what will happen you `Unmarshal` and incorrect value?

## Compiler Loves Zero Values

If you unmarshal the code into a variable you will get the [zero value](https://dave.cheney.net/2013/01/19/what-is-the-zero-value-and-why-is-it-useful) for the fields `WindowCount`, and `Doors`. Which in some case can lead to bug because you might have different logic for missing case.

```go
var b Building
json.Unmarshal([]byte(""), &b)
fmt.Printf("%+v\n", b)
// Output:
// {WindowCount:0 Doors:0}
```

## Pointer To Rescue 🦸

If you have worked with pointers in languages like C, C++ you might have some opinion. You either like it or you hate it. Most people fall into the latter group. Working with pointers in Golang is fun because things are declarative comparatively.

_If you set the field type to a pointer of that type it will be `nil` in case the field is missing_

```go
type Building struct {
	WindowCount *int `json:"window_count"`
	Doors       *int `json:"doors"`
}
```

Unmarshalling it has the following effect:

```go
var b Building
json.Unmarshal([]byte(`{"window_count": 2}`), &b)
fmt.Printf("%+v\n", b)
// Output:
// {WindowCount:0xc000016170 Doors:<nil>}
```

The `WindowCount` holds the pointer to an integer which holds the value 2. Whereas since `doors` is missing from the JSON string it will set to `nil` thanks to the zero value of pointers. You can now write your logic in case of the absence of that value.

## Conclusion

Since the field of a struct is part of the contract of the struct it can't go missing entirely instead you need to handle it little differently. The most preferable way is to convert the type to a pointer of the same type and when in some case the value is missing it will be set to the zero value, which is `nil`.
Open Source needs to change.
Tags: opensource
Published: 2020-12-10 10:09:40

The problem with development in general is the shear amount and need for division ➗ not that division!

You know the meme,
> There are n competing standards we must fix this, there are now n+1 competing standards.

The problem I see is that similar projects hardly work together, I feel thier should be a licence or a set of licences which state that on the eve of each yearly quarter, all sources from similar projects signed up to such a licence should benchmarks units of code and the best implimentations are taken and distributed... But hang on that would mean that the two projects (or more) should then end up with the same code? Yeah that's right so maybe they should just merge together, yes...

Okay my silly idea is just that, silly, however who is monitoring the similarity index, who will put an end to the meme, there must be a tool or way to systematically stop the repetition and madnesses? Can we create a..  *sigh* standard way of describing features which can be accountable?