teleren/devto huggingface dataset:
Arrow Function Vs Normal Function
Tags: javascript, node, ptbr
Published: 2019-04-07 22:15:31

# O que é Arrow Function ?
Uma alternativa mais simples para criar funções, com algumas características diferente da função regular.
```js
// Syntax
const soma = (a, b) => a + b
const mult = (a, b) => {
    return a * b
}
```

## This (Contexto)
Seu contexto por padrão é o contexto global. Veja um exemplo de comparação:
```js
const a = () => this === object
const b = function() {
	return this === object
}

const object = {
	a,
	b
}

console.log(object.a()) //false
console.log(object.b()) //true

```

No Chrome o contexto padrão é o `window`, logo:
```js
const a = () => this === window
...
console.log(object.a()) //true

```

## Arguments (Argumentos)
Não há `Arguments`, em alguns casos como no Node.Js ele pode recebe os argumentos globais.
```js
const a = () => arguments //Uncaught ReferenceError: arguments is not defined
console.log(a(true))
```
Em uma regular função teríamos uma saída: `{ '0': true }`

## Constructor (Construtor)
Sem `Constructor`.
```js
const a = () => true
console.log(new a()) //TypeError: a is not a constructor
```

## Nome da Função
Em Arrow, o nome é o identificado que está recebendo a função. Numa regular podemos define o nome de uma função, como no exemplo abaixo, eu coloquei o nome sendo `d`.
```js
const a = () => true
const b = function () { return true }
const c = function d () { return true}

console.log(a.name) //a
console.log(b.name) //b
console.log(c.name) //d
```

## Retorno de Objeto
```js
const casaA = () => {cozinha: true}
const casaB = () => ({cozinha: true})
const casaC = function () {
	return {cozinha: true}
}


console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }
console.log(casaC()) //{ cozinha: true }
```

**Note:** A `casaA` retorna `undefined` pois não há retorno na função. Não viu isso ? Vou rescrever `casaA` e `casaB` no modo normal:

```js
const casaA = function () {
	{cozinha: true}
}
const casaB = function () {
	return {cozinha: true}
}

console.log(casaA()) //undefined
console.log(casaB()) //{ cozinha: true }

```

Sacou? Por isso usamos o parênteses no primeiro exemplo, `casaB`.

Veja mais em MDN: [developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
I'm preparing my first workshop, any suggestion as an attendee or organizer?
Tags: help, discuss
Published: 2019-04-07 20:56:10

---
title: I'm preparing my first workshop, any suggestion as an attendee or organizer?
published: true
description: I'm preparing my first workshop, any suggestion as an attendee or organizer?
tags: [help, discuss]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lytvvwnnn9si3s1h3xlk.jpg
---

Hi, 


I'm preparing my first workshop (Full Stack), it is about Angular + Express.js + Firebase + Google Cloud Functions. Basically, the backend is going to be Serverless. 

Do you have any suggestions? as attendee or organizer, what has been your experience, good/bad points about any previous workshop you had assisted. 


The workshop is on site, but I have created a small tutorial regarding the backend, feel free to check it out.
[Beginner's Guide for Creating a Serverless REST API using NodeJS over Google Cloud Functions](https://dev.to/levivm/creating-a-serverless-rest-api-using-google-cloud-functions-firebasefirestore-in-10-min-37km)
Getting into Software Sales after a decade of Engineering roles?
Tags: career, sales, business, discuss
Published: 2019-04-07 20:54:10

---
title: Getting into Software Sales after a decade of Engineering roles?
published: true
description: Has anyone made the transition? What was it like for you?
tags: career, sales, business, discuss
---

After 12 years as a software developer, I find myself considering new roles that would reduce or even eliminate my time spent writing code. One of those roles is Sales.

I've spent most of my career working for SF and Valley based startups. I've been successful and have recently made my way into the upper ranks for individual contributors at some great companies.

I've never worked closely with a Sales team and I know very little about what actually goes on in that world. I suspect I could be good at it based on my communication and interpersonal skills.

What I would love to hear from someone who really knows that world is:

1. Can I make similar money in Sales as I do as a Senior/Principal/Staff engineer in the SF Market?
2. What does it take to be good at sales in the software industry?
3. How much would I need to travel?
4. Is it best done as a full time employee of a company, or as a contractor?
Getting started with Flask - "Hello World Wide Web!"
Tags: python, webdev, webapp, flask
Published: 2019-04-07 20:24:32

---
title: Getting started with Flask - "Hello World Wide Web!"
published: true
description: Getting started with Flask and create awesome web apps!
tags: Python, webdev, WebApp, Flask
---

Creating web apps is possibly one of the coolest things you could do in your lifetime. ;)
The reasons are obvious.
You can create something meaningful, everyone can use.

With some work, you may be creating something like this:
![Picture of ServerMonitor project](https://thepracticaldev.s3.amazonaws.com/i/x6hflc63am2q50lj1lll.png)

Follow me to get more information about the [ServerMonitor](https://github.com/ChristianLutzCL/Website-Monitoring) in the near future.

Let's get started!

***

# Introduction

Flask is a lightweight Python web framework based on Werkzeug and Jinja2.
Lightweight means, Flask only has the most basic features to create your web application on your own.
Everything other like admin panels, for example, have to be built from scratch, unlike in Django.

For starting out in web development with Python, this makes a lot of sense.
You don't have to learn a lot of framework stuff before you can build a web app.

# Create your project
Make a folder where your Flask project should be located.
You can do this in CMD on Windows.


```
mkdir flask_project
```

Then, open your created folder with:

```
cd flask_project
```

# Installation

Installing flask via PIP is quite easy.
Simply type...

```python
pip install Flask
```
...to install the Flask module.

# Setting up the application

After installing Flask, we have to make a Python file.
I will call it 'main.py'

This file will contain all of the basic code for Flask to run.

```python
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello_www():
    return "Hello World Wide Web!"
```

### Code explanation

First of all, we import our installed Flask module from Flask with:
```python
from flask import Flask
```

Then, we define the variable 'app' and assign "Flask(_ _name_ _)" to it:
```python
app = Flask(__name__)
```

After that, we can create our first route with:
```python
@app.route("/")
```


To make it work, we need some return value, that will be displayed on our web page.

For that, we type:
```python
def hello_www():
    return "Hello World Wide Web!"
```

Last but not least, we will return a String with "Hello World Wide Web!".


# Run your application

After we have created and saved our code, we want to see the result.
For that, you first need to define your Python file for Flask in this way:
```
set FLASK_APP=main.py
```

If this is done, you can start your web app with:
```
flask run
```
![Flask running in CMD](https://thepracticaldev.s3.amazonaws.com/i/zst1ov6ur9gw19gvqr91.png)

Go to http://localhost:5000 or http://127.0.0.1:5000, to see your result:

![Your result!](https://thepracticaldev.s3.amazonaws.com/i/mcyx6yg1b2ty1tzaz7wg.png)

Congratulations!
You have created your first web app.


If you want to dive deeper into the Flask-World, visit [http://flask.pocoo.org/](http://flask.pocoo.org/).


### Thank you for reading!
App-ideas Github Repository Update - Achievements, New Feature and More Apps
Tags: coding, projects, beginners, opensource
Published: 2019-04-07 19:30:38

---
title: App-ideas Github Repository Update - Achievements, New Feature and More Apps
published: true
description: A collection of application and project ideas
tags: coding, projects, beginners, open-source
cover_image: https://github.com/florinpop17/app-ideas/raw/master/app-ideas.png
series: App-ideas repository
---

## New Achievements

Last week we took 15 projects from the [app-ideas](https://github.com/florinpop17/app-ideas) repository and we wrote an article that was published in the FreeCodeCamp Medium publication: [Here are some app ideas you can build to level up your coding skills](https://medium.freecodecamp.org/here-are-some-app-ideas-you-can-build-to-level-up-your-coding-skills-39618291f672)

This article was a huge success and as of now, over 20.000 people viewed it. This led to a great achievement: the project reached over 1000 stars today and it was in top 7 trending repositories on GitHub - HUGE milestone!! 

Thank you all for your support! :pray:

## Feature

Because we are adding more and more projects, we decided to add a **new** flag to the projects that were created in the past few weeks (the recent ones). This small flag/feature will allow users to see what projects are new in the collection and also to see that we are constantly working on adding more projects.

## New projects were added

- [Drawing App](https://github.com/florinpop17/app-ideas/blob/master/Projects/Drawing-App.md)
- [Emoji Translator](https://github.com/florinpop17/app-ideas/blob/master/Projects/Emoji-Translator-App.md)
- [Meme Generator](https://github.com/florinpop17/app-ideas/blob/master/Projects/Meme-Generator-App.md)
- [Elevator](https://github.com/florinpop17/app-ideas/blob/master/Projects/Elevator-App.md)
- [Fast Food Simulator](https://github.com/florinpop17/app-ideas/blob/master/Projects/FastFood-App.md)

Let us know which one do you like the most! :smiley:

You can check out the project repository below:

 {% github florinpop17/app-ideas %}


As always, your feedback and contribution is welcomed and highly appreciated! 

If you like this project, make sure you give it a star :star: on GitHub and share it with your friends on social media!

Thank you! :pray:
Building My First Alexa Skill with Node.js
Tags: alexa, node, javascript, iot
Published: 2019-04-07 18:35:29

---
title: Building My First Alexa Skill with Node.js
published: true
description: On the next lines, I would explain shortly what are the concepts that you need to understand before to start developing skills for your own Amazon Alexa device. The idea here is to have enough information to get started.
tags: Alexa, Node, Javascript, IoT
cover_image: https://images.unsplash.com/photo-1508160552827-195c99fc90b7
---

## Requirements

- Amazon Developer Account
- Experience with Node.js

## What's Alexa?
This is Amazon’s voice-control system. With that, you can control music, create shopping lists or reminders, get instant weather reports, and control popular smart-home products using nothing else that the sound of your voice.

## What's an Alexa skill?
These are apps that give to Alexa devices more abilities that the mentioned before. Absolutely of all kinds. Through the Alexa application, you can incorporate or disable these skills.

## What's AWS Lambda?
AWS Lambda is a compute service that lets you run code without provisioning or managing servers. You pay only for the compute time you consume - there is no charge when your code is not running. This would be our backend that processes the request and returns the data back as a JSON.

## Entities involved in the flow
- The user who speaks a command
- The Echo device, which receives the initial voice input
- The Amazon Alexa service, which receives the data from the devices
- The backend service which contains the business logic for the skill itself

{% youtube Rsm7XnTQIiQ %}

Well, now that you have all the material needed to start with the development, I invite you to [install my latest skill](https://www.amazon.com/dp/B07PSBHYJ8/) called "Dollar Price". That was an experiment with a public API to obtain the official price of exchange between the dollar and Argentine peso.
use-async-call - A React hook to manage the state and lifecycle of async data loading
Tags: react, reacthooks, opensource
Published: 2019-04-07 18:29:22

---
title: use-async-call - A React hook to manage the state and lifecycle of async data loading
published: true
description: 
tags: react, react-hooks, open source
---

Since hooks officially landed in React, I’ve been working on creating abstractions to manage the common task of loading and updating data from an API.

Today I’m releasing use-async-call, freely available under MIT license

This hook is has been battle tested at d1g1t Inc., and has lead to a reduction in boilerplate and fixed some difficult corner-case bugs around lifecycle management.

https://github.com/azmenak/use-async-call
React architecture series, Render props, Hooks and Context API
Tags: react, webdev, tutorial, beginners
Published: 2019-04-07 18:22:10

Trying to learn React?

There are some patterns you should know about that will make it easier to organize your code. 

- [**Render props**](https://dev.to/itnext/the-amazing-render-props-pattern-for-react-js-lifecycle-begone-433m), this pattern gives you a great way to organize your code in Provider, Consumer way. This article shows how you can create component for fetching data so all you need to think about is creating presentation components and how the data should be rendered. This and more examples inside of the article.
- [**Hooks**](https://dev.to/softchris/hooks-for-react-js-the-new-ketchup-38p), Hooks is this new paradigm. In short it allows for creating state in functional components, which is a massive change. Most of all it is a very different way of thinking about component creation as you will see throughout the article
- [**Context API**](https://dev.to/softchris/leveraging-the-context-api-in-react-js-28bg), ever wondered how you can broadcast a change to all components, i.e do Pub-Sub? That's what the Context API offers. Maybe you don't need a full Redux implementation. Maybe the Context API is enough?
How to create a global .gitignore file
Tags: git, beginners, tutorial, webdev
Published: 2019-04-07 17:23:31

---
title: How to create a global .gitignore file
canonical_url: https://anthonygharvey.com/productivity/how_to_create_a_global_gitignore_file
cover_image: https://thepracticaldev.s3.amazonaws.com/i/88ymddo7pd7cg6rk1bxc.png
published: true
description: A quick tutorial of how to add a global .gitignore file to ignore temporary files created by Visual Studio Code (VSCode) and other IDEs.
tags: git, beginners, tutorial, webdev
---

1. Open the Terminal
2. Run `touch ~/.gitignore_global` to create a global .gitignore file in the home directory
3. Run `open ~/.gitignore_global`
4. Add `.vscode/` and any other files or directories that you want to ignore and not include in project-specific `.gitignore` files (don't forget to save!)
5. Run `git config --global core.excludesfile ~/.gitignore_global`

That's it! Using `.gitignore_global` will let you customize your editor without having to edit and commit changes to the `.gitignore` file for every single project.


## Editor Specific Example

Visual Studio Code (and other editors) have the ability to make customizations to fit your needs; especially through <a href='https://marketplace.visualstudio.com/' target='_blank'>extensions</a>. I recently started using the <a href='https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock' target='_blank'>Peacock extension</a> to quickly distinguish between multiple VS Code instances that I may have open at one time. You can customize Peacock to change the color of your Activity Bar, Status Bar and/or the Title Bar.

![VS Code Peacock extension windows](https://thepracticaldev.s3.amazonaws.com/i/n3z7gz4nppkrfkv0xq6r.png)<figcaption>image credit: <a href='https://github.com/johnpapa/vscode-peacock' target='_blank'>johnpapa</a></figcaption>

![I like the subtlety of only changing the Title Bar color](https://thepracticaldev.s3.amazonaws.com/i/gxyo4cdqlfigt2p2prl8.png)<figcaption>I like the subtlety of only changing the Title Bar color</figcaption>

This will create a `settings.json` inside of a `.vscode` folder. While this is applicable to your local editor, it may not be appropriate to commit to the repository (after all, your teammates may be using Atom, Sublime or Vim). Instead of adding these editor specific files to `.gitignore` for every project, you can create a `global .gitignore`.

## Resources

1. <a href='https://help.github.com/en/articles/ignoring-files' target='_blank'>Github - Ignoring Files</a>

_This article was originally published on <a href='https://anthonygharvey.com/productivity/how_to_create_a_global_gitignore_file' target='_blank'>anthonygharvey.com</a> on April7th, 2019._
How to gain experience building large scale apps?
Tags: discuss, career
Published: 2019-04-07 17:15:45

---
title: How to gain experience building large scale apps?
published: true
tags: discuss, career
---

My resume was recently rejected because I do not have experience building "large scale apps" that serve millions of users.

I have over two decades of experience, but mostly in startups/small-ish companies. Thus most of the times I got to work on "new" projects.

Startups always want MVP that can be shipped/released early, so the "growth" is always iterative. Most of the times, the product was discontinued and/or startup closed shop.

While I (believe I) have "theoretical" knowledge about dos and don'ts of building large scale apps, it is not same as having "real" experience from the trenches.

They won't hire me because of lack of "relevant" experience, plus the fact that I am senior engineer. If I were junior experience I assume they would not have this "requirement". I did offer to accept "junior" position (I really liked the company I applied for and their product) but I was told they don't have time for "babysitting" and thus aren't hiring for junior positions at all.

So what do you guys suggest I do to gain "real" experience building large scale app ? (In my case, it is chicken and egg situation)

-----

P.S: I am NOT looking for links to posts like "How to build large scale apps using ...."

P.P.S: If you would like to offer me intership (to gain experience building Large scale app) I'm game. Relevant details available in my profile.
Lista - Analisadores de Perfil no GitHub
Tags: github, git, lista, ptbr
Published: 2019-04-07 16:21:43

Abaixo os links para alguns analisadores de perfil no GitHub:

- [Gitstar Ranking](https://gitstar-ranking.com/TiagoDanin)
- [GHUser.io](https://ghuser.io/TiagoDanin)
- [Gitstalk](https://gitstalk.netlify.com/tiagodanin)
- [Sourcerer.io](https://sourcerer.io/tiagodanin)
- [Commits Top](http://Commits.top/brazil.html)
Usando PulseAudio no HDMI
Tags: ptbr, linux, hdmi, audio
Published: 2019-04-07 16:07:37

# Usando PulseAudio no HDMI

Depois que migre para o PulseAudio tive um problema ao tenta usar o HDMI do notebook. Jogos, videos e musicas não estavam reproduzindo na saída do HDMI.

## SOLUÇÃO

Instalar o pavucontrol.

```bash
$ pacman -S pavucontrol
```

Depois podemos abrir o pavucontrol, navegue até onde tem seu dispositivo HDMI e clique no botão `✅`.

![](https://thepracticaldev.s3.amazonaws.com/i/4u3hu20aaa0iwg8rzq3j.png)

Agora ele é o dispositivo padrão de saída de audio. :)
Lista de apps — Automatizando fluxo de trabalho no GitHub
Tags: github, git, ptbr, lista
Published: 2019-04-07 16:02:41

Uma das melhores coisa de usar o GitHub é a quantidade de integrações disponíveis, hoje eu separei alguma das que eu mais uso:

- Travis CI: Testes & Build
- Crowdin: Tradução
- ImgBot: Otimização de Imagens
- Codacy: Analise de Código
- GitHub (Telegram): Notificação de Issues/PR’s & Commits
- Renovate: Atualização de Dependências
- PR Triage: Organização de Issues/PR’s
- Snyk: Verificação de Vulnerabilidade
- CuboHub: Gerado de Página Estáticas
- WIP: Proteção de Branch & Organização de PR’s
O melhor plugin de Auto Complete para ZSH
Tags: zsh, linux, terminal, ptbr
Published: 2019-04-07 15:58:23

Uma das maiores maravilhas de usar o ZSH, é sua flexibilidade de customização, tendo uma grande quantidade de plugins desenvolvido por usuários.

Em torno de um ano atrás (em 2017) eu achei o melhor plugin, o zsh-autosuggestions, sua principal característica é a exibição de comandos digitados anteriormente em forma de uma cor “cinzenta silenciada”.

![](https://thepracticaldev.s3.amazonaws.com/i/vjm9rzvnwe1ea5dtdfik.png)

Assim como os editores de código como Atom e Sublime, usando a tecla “tab” você consegue completa a sequencia de caracteres, já existente no histórico do arquivo, em nosso caso séria do “zhistory”. O aumento de produtividade é perceptivo nos primeiros dias.
Using file-test to test your generated file
Tags: javascript, testing, test, jest
Published: 2019-04-07 15:54:18

---
title: Using file-test to test your generated file
published: true
description: 
tags: 
    - javascript
    - testing
    - test
    - jest
---

When we write a program that will generate some files, how do we test this kind of program? I always use the `fs` module, test if the directories or files are existed. But I need to write many boring codes for this.

So I write [file-test](https://github.com/djyde/file-test), for the test cases that care about the generated.

Suppose I wrote a program that should generate this directory structure:

```
- root
  - readme.md
  - A
    - a.js
    - b.js
  - B
    - a.ts 
    - b.ts
```

With `file-test`, I can simply test it like:

```js
const FileTest = require('file-test')

const ft = new FileTest(path.resolve(__dirname, './root'))

ft.includeFile('readme.md') // => true
ft.includeFile('blabla.md') // => false
ft.includeFile('A/a.js') // => true
ft.includeFile('A/b.js') // => true

ft.readFile('A/a.js') // => console.log('hello js')

ft.includeDirectory('A') // => true
ft.includeDirectory('B') // => true
ft.includeDirectory('A/a.js') // => false

ft.include([
  'readme.md',
  'A/a.js',
  'B/a.ts',
]) // => true

ft.include([
  'readme.md',
  'A/a.ts',
  'B/a.ts',
]) // => false
```

It is easy to use with Jest too:

```js
test('directory structure', () => {
  expect(ft.includeDirectory('B')).toBe(true)
  expect(ft.includeDirectory('A/a.js')).toBe(false)
  expect(ft.readFile('A/a.js')).toEqual(`console.log('hello js')`)
  expect(ft.include([
    'readme.md',
    'A/a.js',
    'B/a.ts',
  ])).toBe(true)
})
```

- Github Repo: https://github.com/djyde/file-test