teleren/devto huggingface dataset:
🔥 3 Coisinhas Legais  do ES12 (JavaScript 2021) 🌟
Tags: javascript, webdev, beginners, braziliandevs
Published: 2021-12-01 17:24:23

Foram trazidas a vida no JavaScript (**ECMAScript**) em 2021 várias novas opções de sintaxe e outros (**ES12**), separei **3** aqui à nível **iniciante** para você usar em ambiente NodeJs ou similar.

**⚠️ Antes de sair usando, por favor meu anjo 😇 lembre-se que nem todo navegador vai suportar isso, e não é para ser exportado por questões de compatibilidade. Por favor. 😮‍💨**

## 🔢 Separador entre dígitos Numéricos: 
👉 Permite usar "_" para separar os números facilitando a leitura:
```javascript 
let bilhao = 1000000000; 
```
É um bilhão? É. Mas tá meio difícil de visualizar de primeira. Apenas o presidenciável **Ciro Gomes** iria ver de primeira...

> Quero ver onde vamos achar, "1 Bilhão"? - Gomes, Ciro

Já com o **ES12** podemos fazer o seguinte: 

```javascript
let bilhao = 1_000_000_000; 
```
<small> Leitura de casas decimais facilitada :) </small>

## 💬 replaceAll() - Substituir todas as ocorrências de uma string em outra.

👉 Vamos imaginar 🪄 que temos a seguinte string:
```javascript 
let strExemplo1 =
  "Javascript é alguma coisa, provavelmente Javascript é uma Linguagem de programação. Javascript não tem nada a ver com Java";

``` 

Se nós usarmos o método "replace" para trocar todas as ocorrências da palavra **Javascript** por Typescript, ele só trocaria a primeira.

```javascript 
console.log(strExemplo1.replace("Javascript", "Typescript")); // Remove apenas a primeira ocurrência
// Output: Typescript é alguma coisa, provavelmente Javascript é uma Linguagem de programação. Javascript não tem nada a ver com Java
```
Para fazermos isso precisaríamos usar uma Expressão regular dentro do método, isto é: **REGEX**.

```javascript
console.log(strExemplo1.replace(/Javascript/g, "Typescript")); // Remove todas as ocorrências.
```
Mas com o ES 12...

```javascript
console.log(strExemplo1.replaceAll("Javascript", "Typescript"));
```

👀 Saída da execução (comparativo entre as 3 maneiras)... 👉
![Output das 3 execuções supracitadas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3n9l8kas2ui066c0og0.png)

## 🤩 Atribuição em Nulo - **Nullish Coalescing Assignment Operator**
👉 Vamos imaginar 🪄 que temos o seguinte código:

```javascript
let algumaCoisa = 1;
let nada = null;
```

Agora, vamos verificar se "nada" é nulo, e caso for, vamos atribuir o valor de "algumaCoisa" à ele. 

```javascript
nothing ??= something; // Tá nulo, recebe 1.
console.log(something === something); // Retona true.
```

Ou seja, caso alguma coisa seja nula, recebe um valor informado.

-------------
**Bom, por hoje é: só (◡‿◡✿)**

Vem pro meu Twitter & muito mais: https://allmylinks.com/luisvonmuller

> <small> "Meu estômago acha que todas as batatas são purê de batatas.". </small>
Beijão (っ˘з(˘⌣˘ )
1 line of code: How to shuffle an array
Tags: javascript, webdev, programming, codequality
Published: 2021-12-01 17:20:24


```javascript
const shuffle = arr => [...arr].sort(() => 0.5 - Math.random());
```
Returns a new array with shuffled items. 

Be aware, that the shuffled items are not truly random because `Math.random` will return a pseudo-random number.  


---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
Best UI LIbrary for your next React Native App
Tags: reactnative, mobile, beginners, programming
Published: 2021-12-01 17:12:16

I had built multiple apps in React Native for my personal as well as Freelancing projects. I had also tried many UI libraries for React native, to get started fast and for consistent UI.

I had checked UI Kitten after some time but after I had used
UI kitten, I became a fan of this library. It has most of the components you will need, for example, Input, Card, Button, etc. It also supports the Light and Dark theme. It is the library that has its Icon Module and all the Icons are awesome. The app looks good in both the light theme and dark theme.

To create a new React Native app using Kitten UI, you just need to run the below command, it will create a new React Native app with the UI kitten as the template

```
npx react-native init MyApp --template @ui-kitten/template-js
```
In the next post, I will try to explain, how to add UI-kitten to an already created project.

[UI kitten offical page](https://akveo.github.io/react-native-ui-kitten/)
But is remote work equitable?
Tags: watercooler, discuss
Published: 2021-12-01 17:10:19

---
title: But is remote work equitable?
published: true
description: Remote work is great...but does it put some at a disadvantage?
tags: watercooler,discuss
//cover_image: https://direct_url_to_image.jpg
---

Remote work is supposed to be "the future of work," but it has me wondering, _Is remote work equitable?_

Not everyone has the same working conditions. Internet connection? Heat? Noise? Ergonomics? Videoconferencing quality?

I think remote work is great but I'd like to see us discuss how to even the playing field of remote work a bit more.

Thoughts?
Create a table | SQL
Tags: sql, createtable, mssql, statement
Published: 2022-02-02 19:25:57

---
title: Create a table | SQL
published: true
date: 2021-12-01 17:07:17 UTC
tags: SQL,CreateTable,MSSQL,Statement
canonical_url: 
---

 **Version:** SQL Server 2019

Here I’ll quickly overview the syntax of how to create a simple table on an MSSQL server database.

It’s quite straightforward the table creation, for it, we only have the necessity of using **[Create Table](https://docs.microsoft.com/en-us/sql/t-sql/statements/create-table-transact-sql?view=sql-server-ver15)** statement. Afterward, set the columns we aim for and their related types. We may consider, as well, if we want that the columns allow null values or not and establish which column(s) will be part of the primary key.

Please check this example:

```sql
CREATE TABLE customer
(
	CustomerNo INTEGER NOT NULL CONSTRAINT prim_cust PRIMARY KEY,
	CustomerFirstName NVARCHAR(20) NOT NULL,
	CustomerLastName NVARCHAR(20) NOT NULL,
	CountryCode NVARCHAR(20)
)
```

The execution of the above code should result in a table structure as the following one…

![](https://toolgbrmaker.files.wordpress.com/2021/11/image-1.png?w=442)

This is a simple sample of how you can create a table… So, put it into action… Go ahead and try it by yourself and check the results.

With these simple samples, we’ll start to build a model database that I intend to use and share some useful concepts, tips and tricks. Stay tuned!
Things you need to know when getting started to learn how to code
Published: 2021-12-01 16:59:46

I quit the school of engineering in 2018 and decided to learn how to code.

It was pretty scary because I got out of my comfort zone to learn something I didn't know about and was unfamiliar with.

I felt overwhelmed and intimidated but below are some things I learned in the process that can help you in your coding journey.

## 1. Know what you want

It is important to know what you want to do or achieve with your coding skills when learning how to code.

There are three things you can choose to do with your coding skills:

1. Get a job.
2. Freelance.
3. Work on your projects.

Knowing what you want from the start will make your coding journey easy, and it will direct you to things you need to learn.

## 2. Focus on learning one thing first

In web development, there are a lot of programming languages, frameworks, and tools that you can choose to learn or master.

Trying to learn everything at the same time is not a good idea.

Don't be a victim of shiny object syndrome where you want to learn any technology that looks amazing and has many opportunities.

When getting started to learn how to code, I advise you to start with HTML and CSS. Then learn Javascript.

After that, you can choose to learn any other language or technology as long as it provides you with the skills to get what you want.

## 3. Build projects

It is easy to get stuck in the tutorial hell when getting started with learning how to code.

Tutorial hell is where you continuously ﻿watch tutorials one after another without building something on your own.

After learning the basics, start building your projects with the knowledge that you have.

My advice would be that you don't watch a tutorial unless you want to learn something that you want to apply to a project or something you are working on.

## 4. Join a community

Being a part of a community when learning how to code is very important to your coding journey.

Developer communities serve as a knowledge base because they give you access to resources, tools, coding tips, and more.

These communities give you a chance to make meaningful connections with people who have different backgrounds and expertise.

This can help you to expand your level of knowledge and experience.

## 5. Build a personal brand

Building a personal brand as a developer will lead you to opportunities you didn't even know existed.

You can build your brand by joining a social media platform like Twitter and start documenting your journey.

Share things you are learning and show the world what you can do by sharing your work.

This will lead you to get discovered by employers, potential clients, or collaboration partners.
Two common ways to destruct modules is Node.js
Tags: node, modules
Published: 2021-12-01 16:57:15

**Destructuring in CJS**

```javascript
const {stdin: input, stdout: output} = require('process');

// Example exploiting Readline
const rl_cjs = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});
```

**Destructuring in ESM**

```javascript
import { stdin as input, stdout as output } from 'process';

// Example exploiting Readline
const rl_esm = readline.createInterface({ input, output });
```

---

If any typos found and (or) suggestions could be made, please leave it in the comment section below . Thank you and see you in the next one !
How to resize your Instagram post design to Facebook post size in Figma
Tags: socialmedia, figma, instagram, figmaplugin
Published: 2021-12-01 16:55:09

---
title: How to resize your Instagram post design to Facebook post size in Figma
published: true
date: 2021-12-01 16:51:39 UTC
tags: socialmedia,figma,instagram,figmaplugin
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*vKTQDEJ57ZEwDjES.jpg)

Today, we’ll look at how to quickly resize our Instagram post design to Facebook post size using a Figma plugin called Thumblisher.

### What You Will Need

You’ll need the following resources to follow along with this Figma tutorial:

**Install Thumblisher Figma Plugin**

Before getting started, make sure to install Thumblisher Figma Plugin to your Figma editor to resize your social media graphics easily.

[Figma - Thumblisher | The easiest way to resize and scale your frames for different social media platforms. Plugin Dem...](https://www.figma.com/community/plugin/1037826586645134259/Thumblisher)

**Download Exercise File**

To access the social media templates we’ll use in this tutorial, duplicate the Social Media Exercice File:

[https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File](https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File)

Find more resources on [https://www.captain-design.com/](https://www.captain-design.com/)

### Watch Video Tutorial

{% youtube nWJbSw_9Pq8 %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-resize-your-instagram-post-design-to-facebook-post-size-in-figma/) _on December 1, 2021._
How to resize your Instagram post design to Twitter post size in Figma
Tags: socialmedia, figma, figmatutorial, figmaplugin
Published: 2021-12-05 18:53:21

---
title: How to resize your Instagram post design to Twitter post size in Figma
published: true
date: 2021-12-01 16:50:07 UTC
tags: socialmedia,figma,figmatutorial,figmaplugin
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*PJXldj5drvBk8RJu.jpg)

Today, we’ll look at how to quickly resize our Instagram post design to twitter post size using a Figma plugin called Thumblisher.

### What You Will Need

You’ll need the following resources to follow along with this Figma tutorial:

**Install Thumblisher Figma Plugin**

Before getting started, make sure to install Thumblisher Figma Plugin to your Figma editor to resize your social media graphics easily.

[Figma - Thumblisher | The easiest way to resize and scale your frames for different social media platforms. Plugin Dem...](https://www.figma.com/community/plugin/1037826586645134259/Thumblisher)

**Download Exercise File**

To access the social media templates we’ll use in this tutorial, duplicate the Social Media Exercice File:

[https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File](https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File)

Find more resources on [https://www.captain-design.com/](https://www.captain-design.com/)

### Watch Video Tutorial

{% youtube 39pjbOLEFSk %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-resize-your-instagram-post-design-to-twitter-post-size-in-figma/) _on December 1, 2021._
Scrimba's 2021 #JavaScriptmas
Tags: javascript, scrimba
Published: 2021-12-01 16:43:18

Creating this post to keep track of my [#JavaScriptmas](https://scrimba.com/learn/javascriptmas2021) submissions!

## My Solutions
* Day 1: [Countdown to Christmas](https://scrimba.com/scrim/co1cc45b588e1dc32d2542491)
* Day 2: [Toggle Christmas Theme](https://scrimba.com/scrim/co395432d9f77e06b02cc7f12)
* Day 3: [Don't Scare Your Relatives](https://scrimba.com/scrim/co1de46cfa1aba11cfc56a807)
* Day 4: Shopping Checklist
* Day 5: [Christmas Card Writer](https://scrimba.com/scrim/coe2b4ae4a478c5e5390343be)
* Day 6: [Text Christmassifier](https://scrimba.com/scrim/cofb446d898ec632d2de6c6bc)
* Day 7: [Play a Christmas Song](https://scrimba.com/scrim/co08d4564b2b6f4f15835e6ab)
* Day 8: [Bell Animator](https://scrimba.com/scrim/co4f94b8a8286efd1b4a41b09)
* Day 9: [Turn on the Decorations](https://scrimba.com/scrim/co5c2460c9ce9229fd638249c)
* Day 10: 
* Day 11: 
* Day 12: 
* Day 13: 
* Day 14: 
* Day 15: 
* Day 16: 
* Day 17: 
* Day 18: 
* Day 19: 
* Day 20: 
* Day 21: 
* Day 22: 
* Day 23: 
* Day 24:
How to get experience to get your first job as a dev
Tags: beginners, webdev, tooling, programming
Published: 2021-12-01 16:20:49

Ahhhhhh...the age old question of the chicken and the egg.

One of the most frustrating things you're told when getting a job is you need experience.

But how do you get experience when NO ONE WILL GIVE YOU EXPERIENCE?!

Well, in most industries youre SOL.

But in software development there are a few really good options.

Because you are getting better at a skill that allows you to build things, you can do exactly that.

However...

Building a todo list or portfolio will only get you so far.

So how do we get experience?

With open source....

Contributing to open source is the CLOSEST thing to getting actual work experience that will impress your hiring managers and fellow engineers.

Contributing to open source was the main thing that propelled my success after i graduated from a bootcamp.

So GO CONTRIBUTE!

***If you want more:***

Come join our Facebook group to help you get your first job as a software engineer, career development, and so much more!

https://www.facebook.com/groups/gettek

Here is a [link](https://engjobresources.carrd.co/) to get my top 10 interview resources for FREE.
Rest and Spread operator
Tags: webdev, javascript, beginners, productivity
Published: 2021-12-01 16:12:11

Hello programmers,

The ES6 `Rest` and the `Spread` parameters are still very unclear to some people, and it seems to have so many people confused because they are identical. The `Rest` and `Spread` operators are represented with `...` .

I still don't have any idea on why the both of them are represented with `...` , honestly I feel like they should have come up with something else. So now let's dive in to what they are and what they are used for.

## REST OPERATOR
If we have a function and we don't know how many arguments that will be passed in, we use the `Rest` operator. 


![Rest operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7om2ygn8n8onrd2ml03.png)
In the image above the `...` was used to handle what was passed into the function, if more values are passed into the function the `Rest` operator will take care of them.

## SPREAD OPERATOR
The `Spread` operator can be used in different situations, it can also work with a function. I'll show you the different scenarios were it can be used.


![Spread operator example 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7axm2qhm939ejfsypvwg.png)
In the picture above the `Spread` operator was used to expand the array so it could be passed into the function.


![spread operator example 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oafgbtbe5830lojukcmu.png)
In this image, the spread operator was used to neutralize an array so an operation could be carried out on each of the values in the array.

> Basically, the `Spread` operator is used to neutralize an array.

Alright, this is all I have on the `Rest` and `Spread` operator. I hope you guys apply it in your new projects.
Get someone else to do your assignments!
Published: 2021-12-01 16:01:58

You read the title!. Simply get someone else to do your assignments. 

If you are very familiar with this "Getting your assignment work done via outsourcing", perhaps you would need to rethink. 

This is just my side.. I have come across many Students/Undergraduates who follow all these IT/SE courses. When they are given assignments, especially coding assignments; they tend to outsource people to do it for them. What this group of people do have resulted in passing all the exams with flying colours, but when they get real work; most of them breakdown. 

People who are keen in their work tend to not outsource people. Instead, they do it themselves by researching and exploring. Due to this fact many people end up getting failed in other modules while they have flying colours for the assignments. 

The group of people who outsourced to do their assignments later join firms to continue their work. Some people learn work from the firms while some people just hang around and degrade other's work if they find other's work is superior to theirs. 

If you don't have a passion, work for it! don't just sit there. If you don't know a subject, ask a superior! Do not outsource to do your assignments.
Construye una bóveda en el Blockchain
Published: 2021-12-01 16:01:53

---
title: Construye una bóveda en el Blockchain
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Solidity es un lenguaje de programación que fue creado para desarrollar aplicaciónes en el blockchain. A continuación mostramos un ejemplo que representa un contrato inteligente que maneja una bóveda en el blockchain. Elegí este ejemplo porque muestra diferentes aspectos que diferencian a Solidity de otros lenguajes muy similares como C++ y Javascript.

{% youtube PebL9RuWwTg %}

## Antes de empezar

Para realizar este tutorial ocupas la billetera [Metamask](https://metamask.io/) que la puedes conseguir como una extensión de tu navegador. Adicionalmente necesitaras fondos de Rinkeby Testnet que puedes conseguir desde el [Faucet](https://faucet.rinkeby.io/).

## El contrato inteligente

```solidity
// SPDX-License-Identifier: MIT
pragma solidity 0.8.10;

contract Vault {
    mapping(address => uint) public balances;
    
    function deposit() public payable
    {
        balances[msg.sender] += msg.value;
    }
    
    function withdrawAll() public
    {
        address beneficiary = msg.sender;
        uint amount = balances[msg.sender];
        //payable(beneficiary).transfer(amount);
        (bool success, ) = address(beneficiary).call{value: amount}("");
        require(success, "Transfer failed.");
        balances[msg.sender] = 0;
    }
}
```

**¡Gracias por ver este tutorial!**

Sígueme en dev.to y en [Youtube](https://www.youtube.com/channel/UCNRB4tgwp09z4391JRjEsRA) para todo lo relacionado al desarrollo en Blockchain en Español. Y también a [kjchints](https://www.youtube.com/channel/UCk40O4UTzWzYX7PTK7nPsYw) que nos comparte un mundo de conocimiento.
Responsive Footer Using HTML & CSS
Tags: html, webdev, beginners, css
Published: 2021-12-01 15:32:19

Hello,

How are you guys today I writing this post after to much request from you. In this post I created simple responsive  footer using HTML & CSS.

You can also create a good and responsive footer after using this I use flex and grid so its responsive for all the media query you can be use any of this to create a footer but I code this footer for beginners. if you are good in frontend then you don't need to write this much of code. I use 2 media query for this post. 

I hope you like this also comments about your thoughts. **Please Follow on Instagram For More Content**.  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you 🙂!

{% codepen https://codepen.io/NikhilBobade/pen/YzrPvrP %}