DEV Community: Marco Bruno 🤡

Métodos HTTP da visão de FrontEnd

Marco Bruno 🤡 — Thu, 07 Apr 2022 12:47:01 +0000

Nesse post vou apresentar os métodos HTTP do ponto de vista de pessoas que trabalham com FrontEnd utilizando o Fetch API do JavaScript para consumir uma API.

➡️ Introdução

Imagine que você precisa criar uma apliacação com 4 funcionalidades, de criar, ler, atualizar e deletar os dados de um usuário. Essas 4 funcionalidades também são conhecidas como CRUD (Create, Read, Update e Delete).

Esse é um exemplo de como é a estrutura do nosso usuário na aplicação:

const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

Felizmente você tem uma API (Application Programming Interface) e poderá enviar os dados do usuário para a rota (recurso) a seguir: /user.

Outra coisa feliz é que você tem 5 métodos HTTP que estão disponíveis nessa rota /user, sendo eles:

1️⃣ Get (Consumir/Pegar)
2️⃣ Post (Publicar/enviar)
3️⃣ Put (Colocar/guardar)
4️⃣ Patch (Correção/remendo)
5️⃣ Delete (Deletar/remover)

Pra que servem esses métodos? 🤨

1️⃣ Get (Consumir/Pegar)

No momento que você consumir a API na rota /user utilizando o método Get ela retornará para você a lista de usuários cadastrados na plataforma, portanto esse método é utilizando para leitura dos dados.

A seguir um exemplo de como consumir a API utilizando o Fetch API com JavaScript:

fetch(`https://marcobruno.dev/user`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você precisar apenas dos dados de um usuário, é necessário passar um UUID (Universally unique identifier) na rota /user/{uuid}, mas o método utilizado continua sendo o Get.

A seguir um exemplo de como você pode usar o Fetch API do JavaScript para consumir uma API passando o UUID na rota:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,)
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos ver que o Get é utilizado para leitura dos dados em diferentes situações!

2️⃣ Post (Publicar/enviar)

O método Post utilizamos quando precisamos salvar um novo usuário na aplicação, portanto é necessário passar todos os dados do usuário no body (corpo) da requisição para a rota /user.

Esse é um exemplo de código de como salvar um dado em uma API utilizando a Fetch API com o método Post:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'POST',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Toda vez que precisar salvar algo utilizando uma API o correto é utilizar o método Post.

3️⃣ Put (Colocar/guardar)

Se precisamos atualizar os dados de um usuário utilizamos o método Put e precisamos enviar todos os dados dele no body da requisição e o *️⃣ UUID (Universally unique identifier) é algo que não pode faltar.

A seguir um exemplo de como usar o método Put passando o UUID no body da requisição com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Mesmo que você esteja atualizando apenas 1 campo de 3 campos que o usuário possui, ainda sim é necessário enviar todos os campos no body da requisição, gostando ou não esse é um padrão adotado quando estamos usando o método Put.

Agora um exemplo de como fica o código quando você está passando o UUID na rota da requisição utilizando o método Put com Fetch API:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  email: 'new_email_marco@gmail.com',
  nickname: 'marcobrunodev',
  streamer: true
}

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'PUT',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Podemos concluir que utilizamos o método Put para atualizar dados de um recurso que no nosso exemplo foi o do usuário de aplicação.

4️⃣ Patch (Correção/remendo)

Esse método também utilizamos para atualizar o usuário, portanto segue as mesmas regras do método Put, a diferença é que não precisamos passar todos os campos no body da requisição.

Usando o Patch podemos informar apenas o campo que estamos atualizando e o UUID para informar qual usuário tem que ser atualizado, como podemos ver no exemplo a seguir:

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'
const user = {
  uuid,
  email: 'new_email_marco@gmail.com',
}

fetch(`https://marcobruno.dev/user/`,{
  method: 'PATCH',
  body: JSON.stringify(user),
  headers: {
    'Content-Type': 'application/json; charset=UFT-8'
  }
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

Se você estava triste com o método Put agora ficou feliz com o método Patch. A pergunta de você se deve fazer é: Porque existe o Put se o Patch parece mais simples de usar?

Detalhe essa perguntar não vou responder, deixe nos comentários a sua resposta!

5️⃣ Delete (Deletar/remover)

Quando precisamos remover um usuário da aplicação utilizamos o metódo Delete e precisamos informar o UUID na rota: /user/{uuid}

const uuid = 'dhyu87jk25pd9ol27d9nbvpl97yhdghwedm0'

fetch(`https://marcobruno.dev/user/${uuid}`,{
  method: 'DELETE',
})
  .then((res) => res.json())
  .then((user) => {
    console.log('User', user)
  })
  .catch((error) => {
    console.log('Error', error)
  })

*️⃣ UUID (Universally unique identifier - Identificador universalmente único)

O padrão é ser uma string alfanumérica de 36 caracteres que pode ser usada para identificar informações.

‼️IMPORTANTE‼️

Existem mais outros 4 métodos HTTP que utilizamos menos no nosso dia a dia, mas que vale você estudar também 😍

➡️ Head
➡️ Connect
➡️ Options
➡️ Trace

Links para saber mais!

Pré-requisitos do curso de HTML e CSS feliz #00 #02

Marco Bruno 🤡 — Thu, 27 May 2021 14:13:20 +0000

Para acompanhar o curso de HTML e CSS feliz você precisará de 4 ferramentas. Todas elas são gratuitas e funcionam nos três sistemas operacionais mais usados no mercado de trabalho: o Windows, Linux e MacOS.

As ferramentas são:

Firefox;
Visual Studio Code;
Figma;
Discord.

Firefox

O Firefox é um navegador, assim como o Chrome, Edge, Safari, Brave, Opera e outros, e a Mozilla é a empresa por trás dele. Pessoalmente gosto mais de trabalhar no Firefox, por ser um navegador completo e muito mais leve que o famoso Chrome.

Durante o curso usaremos muito a ferramenta chamada Developer Tools (ferramentas de desenvolvimento). Em cada navegador existem particularidades e, como usarei o Firefox, sugiro que use o mesmo, pois isso facilitará o acompanhamento das aulas.

Caso não tenha o Firefox instalado, segue o link para instalação: https://www.mozilla.org/pt-BR/firefox/all

Visual Studio Code

O Visual Studio Code foi criado pela Microsoft e o chamamos carinhosamente de VSCode (é possível que você já tenha escutado esse nome navegando em assuntos dev). O VSCode é um editor de texto que, diferente do Word e Notepad, é focado para desenvolvedores(as) escreverem seus códigos.

Ele possui muitos recursos e durante o curso explicarei alguns deles.

Ah! E CUIDADO!!! O Visual Studio Code é diferente do Visual Studio. O que você precisa instalar é o VSCode. Segue o link para instalação: https://code.visualstudio.com

Figma

Para acessar e/ou editar o layout do projeto do curso você precisará usar uma ferramenta chamada Figma. Como o curso não é focado em design ou no planejamento do layout, não aprofundarei sobre a mesma.

Nosso foco, neste curso, é pegar o layout que foi planejado e criá-lo em código HTML e CSS, mas para isso precisamos conhecer o básico dessa ferramenta feliz (muito usada pelas pessoas que trabalham com UI e Design).

Se você é como eu e já quer sair fuçando tudo, deixo aqui um vídeo onde mostro detalhes interessantes sobre o Figma, para quem está começando e quer saber mais sobre como usá-la (mas ó, não esquece de terminar o post, ok? Tenho mais informações importantes para compartilhar :))

Abaixo deixo dois links para você: no primeiro você consegue acessar o layout do projeto do curso no Figma (mas sem poder alterá-lo) e no segundo você terá acesso ao arquivo Curso_de_HTML_e_CSS_feliz.fig para baixar, colocar na sua conta e poder alterar tudo do seu jeito!

E, por último, mas não menos importante, temos o Discord.

Discord

Uma ferramenta para trocar mensagens por texto, áudio e vídeo. Nela temos uma comunidade onde você pode tirar suas dúvidas, comigo ou com outras pessoas da comunidade (que já fizeram ou estão fazendo o curso ou estão lá para trocar conhecimento e ajudar outros devs a serem mais felizes, rs).

A funcionalidade mais feliz no Discord é o compartilhamento de tela nas salas de áudio, onde você consegue mostrar qual exatamente é o problema que esta enfrentando no código. Lá você pode pedir ajuda, tirar dúvidas e, quando estiver pronto, ajudar outras pessoas também. Uma das coisas mais incríveis na comunidade dev é essa: tem muita informação, muita troca e sempre vai ter gente disposta a ajudar e contribuir na sua jornada.

Nosso servidor no Discord possui salas de dúvidas e cada uma tem um tema central. Fizemos isso para deixar a comunicação mais clara e feliz. Para entrar nessa comunidade bonita, com mais de 8 mil devs chavosos, "é só correr para o abraço": https://discord.gg/FP5UaAG

Nosso acordo feliz

Todo o curso e informações que compartilho são de graça. A única coisa que peço é, assim que tiver a oportunidade, ajude outras pessoas.
Se você começou a estudar agora, não se sinta pressionado a ajudar - apenas foque em aprender!!! - mas quando estiver pronto, contribua como puder para a comunidade :)

Curso de HTML e CSS feliz (Projeto Portfólio) #00 #01

Marco Bruno 🤡 — Wed, 26 May 2021 15:00:43 +0000

Vem cá e bora conhecer o projeto no qual trabalharemos durante todo o Curso de HTML e CSS feliz. Estudar sem praticar é chato, né?! E é praticando que a gente fixa nosso conhecimento teórico, por isso todo curso que elaboro tem um projeto para direcionar os estudos, assim todo mundo pode "por a mão na massa".

No Curso de HTML e CSS feliz criaremos um portfólio juntos, passo a passo. Eu farei o meu durante as aulas e convido você a mudar as cores e outros elementos relacionadas ao layout (para você ter seu projeto com a sua elegância e chavosidade).

A parte de design e planejamento do layout não é o foco do curso, e para facilitar o desenvolvimento do projeto darei acesso ao layout que fiz com carinho, tudo procê! Os links para acesso estão no final do post, mas antes de ir lá correndo, CALMA! Leia todo o conteúdo, porque tenho informações importantes para passar (ou não, rs 😜).

Sobre o layout e as aulas

O layout tem 7 seções e faremos todas elas com calma, para aprendermos juntos HTML e CSS de forma feliz. Se você quer "aprender" rápido e/ou acha que trabalhar com programação é algo fácil, tenho uma notícia triste: não é fácil e não existem atalhos! Minha dica de "ouro" é: vai, mas vai com calma e se dedique.

Pronto! Agora estou mais leve por mandar a real 😍

Ainda está comigo? Ótimo! Sinal de que realmente quer aprender, então vamos lá, se liga no layout que você fará no final do curso, com as seções: Cabeçalho, Banner, Skills, Projetos, Sobre, Contatos e Rodapé.

Bonito, né?!

Acesso ao layout no Figma

A seguir você encontrará dois links: no primeiro você acessa o layout no Figma (mas sem poder alterá-lo) e no segundo você terá acesso ao arquivo Curso_de_HTML_e_CSS_feliz.fig para baixar, colocar no seu Figma e poder alterar tudo do seu jeito!

Se você não sabe como pegar o arquivo do Curso_de_HTML_e_CSS_feliz.fig e colocar no Figma, fica tranquilo(a), pois mostrarei isso no curso mais pra frente!

Onde tirar suas dúvidas

Primeiro, boas vindas ao Curso de HTML e CSS Feliz, se você tiver qualquer dúvida, tanto sobre o projeto, quanto sobre programação, entra lá no Discord que a gente dá todo o suporte que puder dar. Nossa comunidade dev já conta mais de 8 mil pessoas felizes, se apoiando e compartilhando conhecimento: https://discord.gg/FP5UaAG

Dicas aleatórias de Docker e terminal que aprendi com a comunidade

Marco Bruno 🤡 — Sat, 29 Feb 2020 14:52:58 +0000

Desculpa, talvez esse não seja o post que você gostaria ou deveria ler sobre docker, ele foi criado enquanto eu fazia uma live pela twitch.tv/collabdode onde trocamos conhecimento sobre a querida baleia. O resultado é esse aí!

Para buildar uma imagem que você criou usando o Dockerfile, ensinado pelo st0rmrid3r (pesssoa feliz da twitch):

docker build . -t nome-da-imagem

O . é o caminho do arquivo Dockerfile, quando você usa só ponto você está dizendo que já está dentro da pasta onde está o arquivo Dockerfile;
O nome-da-image aparecerá quando você rodar o comando docker images -a, aí fica mais fácil para saber do se trata as imagens que você tem.

Para subir (rodar) uma imagem:

docker run -d nome-da-imagem

É bem comum usarmos o -d para não deixar o terminal travado.

Para remover as layers (containers) intermediárias que não estão sendo mais usadas, comando ensinado pelo raizenNNTV (pessoa do rolê de docker da twitch):

docker rmi $(docker images -f dangling=true -q)

Quando você quer entrar dentro de um container que já está buildado para verificar se tudo que fez está funcionando de forma feliz, dica do felipef0ntana (mano no chat da twitch) deu meio errado mas o davidfaria89 mandou a real:

docker exec -i -t nome-do-container bash

Quando você quer parar todos os containers:

docker stop $(docker ps -a -q)

Quando você quer deletar todos os containers:

docker rm $(docker ps -a -q)

É bem comum você querer parar e deletar todos os containers, então você pode rodar tudo em uma linha só, dica do davidfaria89 (chegou atrasado mas já mandou a dica na twitch):

docker stop $(docker ps -a -q) && docker rm $(docker ps -a -q)

Quando você quer deletar todas as imagens:

docker rmi $(docker images -a -q)

Para expor uma porta do container no momento que você for subir (rodar) ele, dica do st0rmrid3r:

docker run . nome-da-imagem -p 8080:3000

A porta 8080 é a da sua máquina e a 3000 do container.

Para expor uma porta pelo arquivo Dockerfile:

EXPOSE 3000

Se você precisar expor mais de uma porta de um container pelo arquivo Dockerfile, dica do davidfaria89:

EXPOSE 80 443

Se você precisa expor uma porta do container, mas não usar o mesmo número de porta na sua márquina, você não consegue fazer isso usando o Dockerfile. Por exemplo, você tem uma app com React rodando dentro de um container na porta 3000, mas você quer que ela rode na porta 8080 da sua máquina, você precisa adicionar no service do seu app React a configuração a seguir (arquivo docker-compose.yaml), dica do pwng (pessoa feliz que colou na twitch):

...
ports:
- "8080:3000"
...

Dica topezera do raizenNNTV, criar um .dockerignore e adiciona nele o node_modules para o copy (copiar) do projeto ficar mais rápido e feliz.

"Lugar no node_modules é no lixo mesmo xd" - palavras do raizenNNTV

node_modules

O pwng pessoa colante na twitch, mandou essa dica. Quando for rodar o npm i dentro do Dockerfile e o foco for o ambiente de produção, não esquece de adicionar o --production para não instalar os pacotes do ambiente de desenvolvimento:

...
RUN npm i --production
...

O raizen não para. Se você não gosta de ver um monte de info do npm i quando vai fazer o build da imagem, adiciona o --silent:

...
npm i --silent
...

Mais uma do pwng. Quando você subir (rodar) o container, poderá dar um nome para ele, isso te ajudará futuro:

docker run --name frontend nome-da-imagem

Eita! Outra do pwng. Toda vez que estiver com uma dúvida sobre como foi o andamento do container, você poderá ver o log dele:

docker logs nome-do-container

É mano o pwng não para mesmo. Se você quer ver o log em real time:

docker logs -f nome-do-container

Subir os containers pelo docker-compose sem travar o terminal:

docker-compose up -d

Para desligar dar um stop nos containers que você subiu com o docker-compose:

docker-compose down

Para fazer o build novamente dos services, dado que você você tem o build deles:

docker-compose build

Para forçar o build dos services no momento que você for dar o up no docker-compose, deixarei o -d porque ele é feliz:

docker-compose up -d --build

Quando você precisa saber se tem algo rodando em uma porta TCP:

lsof -i TCP:3002

Arrow function do JavaScript, feliz e simples?

Marco Bruno 🤡 — Thu, 20 Feb 2020 17:18:04 +0000

Quando vi a primeira vez a arrow function não fiquei muito feliz, principamente porque eu achava ela muito mais complicada de ler, quero te mostrar que o Marco do passado estava errado e que você pode ser muito feliz com a arrow function.

Ah! Estou considerando que você já sabe o que é uma function expression. Se não sabe, recomendo você dar uma lida sobre ela na MDN (Mozilla Developer Network): Function Expression na MDN

Como funciona a Arrow function?

A arrow function tem uma forma mais simples de escrita do que a function expression, por exemplo, se pegarmos a função a seguir que está com function expression.

function sum(number1, number2) {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4

E transformar ela em uma arrow function, fica assim:

const sum = (number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2)); // saída: 4

O que conseguimos aprender observando os dois códigos, anteriores? Que a arrow function é por padrão uma função anônima, mas conseguimos definir um nome para ela, usando a const sum que recebeu a nossa arrow function. Isso é realmente importante, você não consegue definir um nome para uma arrow function como fazemos na function expression, onde informamos o nome da função usando sum antes dos parênteses.

Não tente isso, não funciona!!! Arrow functions são anônimas

sum(number1, number2) => {
  return number1 + number2;
}

console.log(sum(2, 2));

/* Erro que você receberá:
SyntaxError: invalid arrow-function arguments (parentheses around the arrow-function may help)
*/

Outras variações da Arrow Function

A sintaxe que acabamos de ver da arrow function (a que funciona 😉), não é a única forma de usar ela, vamos ver outras variações a seguir.

Sem return mas retorna

Mesmo sem usar return dentro de uma arrow function conseguimos retorna a soma, para isso nós precisaremos retirar as duas chaves e return da nossa arrow function, deixando o código assim:

const sum = (number1, number2) => number1 + number2;

console.log(sum(2, 2)); // saída: 4

É mais simples! Mas será que é mais legível? Para mim não foi no começo, mas agora que já me acostumei com a arrow function está realmente simples e feliz.

Sem parâmetros

Quando você não tem parâmetro na arrow function os parênteses permanecem:

() => "CollabCode";

Se você quer dar um nome para uma arrow function é só criar a const como fizemos anteriormente:

const comunidade = () => "CollabCode";

Só um parâmetro

Quando você tem apenas um parâmetro os parênteses se tornam opcionais:

const double = number => number * 2;

Se você gosta muito dos parênteses não tem problema pode usar eles também:

const double = (number) => number * 2;

Dois ou mais parâmetros

Quando temos dois ou mais parâmetros em uma arrow function o uso dos parênteses se tornam obrigatório:

const sum = (number1, number2) => number1 + number2;

console.log(sum(20, 20)); // saída: 40

Arrow function com chaves

Toda vez que você usa as chaves em uma arrow function ela perde o poder de retornar algo sem a necessidade de escrever return:

const sum = (number1, number2) => { number1 + number2 };

console.log(sum(20, 20)); // saída: undefined

Então, caso você tenha que usar as chaves na arrow function e também retornar algo, é necessário usar return, como no código a seguir:

const sum = (number1, number2) => { 
  return number1 + number2;
};

console.log(sum(20, 20)); // saída: 40

Retornando um JSON sem return

Quando você quer retornar um JSON (JavaScript Object Notation) mas sem usar return é necessário você envolver o JSON por parênteses:

const getPessoa = () => ({name: 'Gabe', eye: 'blue'});

console.log(getPessoa()); // saída: Object { name: "Gabe", eye: "blue" }

IIFE com arrow function

Quando queremos fechar o escopo de um arquivo, em alguns casos usamos uma função anônima que ela mesmo se executa apenas uma vez, chamamos isso de IIFE (Immediately-invoked function expression). Com a function expression podemos criar a IIFE de duas maneiras:

(function (){
// Seu código que não vazará o arquivo!!!
}());

A segunda forma de gerar a IIFE é bem similar a primeira o que muda são os parênteses () no final.

(function (){
// Seu código que não vazará o arquivo!!!
})();

Você também pode fazer isso usando arrow function, mas só tem uma forma de fazer isso:

(() => {
// Seu código que não vazará o arquivo!!!
})();

A forma a seguir não funciona

(() => {
// Seu código que não vazará o arquivo!!!
}());

/* Erro que você recebe:
SyntaxError: missing ) in parenthetical
*/

O this é muito mas muito mais simples

O this da arrow function é muito mais previsível do que o da function expression, acredito que essa é a coisa mais feliz dela.

A seguir tem uma function expression chamada Person (Pessoa) e dentro dela temos this.age (age é idade) que começa com 0, a cada 1 segundo ela ficará mais velha. Usamos o método setInterval que nós permite executar uma função a cada 1000 milesegundos (você pode mudar os milesegundos), o primeiro parâmentro da setInterval é a função que será executada e o segundo parâmetro é o tempo do intervalo.

function Person() {
  this.age = 0;

  setInterval(function () {
    this.age = this.age + 1; 
    console.log(this) // O this perde o escopo e referência Window
  }, 1000);
}

const person = new Person();

Executando o código acima você receberá uma saída similar no seu console:

Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
Window about:privatebrowsing
...

Se você vem de outras linguagens você achará estranho esse comportamento do this no JavaScript, antes de existir a arrow function nós resolvimos esse tipo de problema criando uma variável chamada that e atribuímos a ela o this:

function Person() {
  const that = this;
  that.age = 0;

  setInterval(function () {
    that.age = that.age + 1; 
    console.log(that) // O this perde o escopo e referência Window
  }, 1000)
}

const person = new Person();

Executando o código com o that você terá a seguinte saída no terminal:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...

Aqui vem o momento feliz da sua vida, com a arrow function o comportamento do this fica mais previsível e o código muito mais simples, ela tem um this léxico, isso significa que o this não é alterado de forma dinâmica respeitando o escopo de onde ele foi criado:

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age = this.age + 1;
    console.log(this)
  }, 1000)
}

const person = new Person();

Execute o código e você terá a seguinte saída:

Object { age: 1 }
Object { age: 2 }
Object { age: 3 }
Object { age: 4 }
...

Se você sentiu falta de algum assunto no post ou discorda de algo que escrevi, não deixe de falar nos comentários, eu gosto muito de feedback, principalmente os negativos que nos fazem evoluir.

Ah! Caso você queira tirar dúvidas de JavaScript cola aí na comunidade CollabCode no Discord: Link do Discord da CollabCode

Referências de estudo:

Como funciona o var, let e const do JavaScript?

Marco Bruno 🤡 — Thu, 20 Feb 2020 12:31:25 +0000

A primeira forma que eu aprendi a declarar uma variável foi utilizando a var, mas faz algum tempo que temos outras duas formas para declararmos as nossas variáveis com JavaScript que são utilizando as palavras const e let. Bora entender no código como funcionam essas três formas de escrever uma variável com JavaScript!

O problema que temos com a variável var é que ela tem um pequeno problema de escopo. Vamos entender isso melhor com um exemplo prático:

var idade = 30;
console.log('Minha idade é:', idade);

Se você executar esse código tanto em cima da plataforma NodeJS ou abrindo no seu browser(navegador) favorito. Você terá a seguinte saída:

Minha idade é: 30

Agora onde está o problema de escopo que eu comentei? Para entendermos isso, colocaremos estas duas linhas que escrevemos, dentro de uma função chamada imprimeIdade e depois executaremos ela:

function imprimeIdade() {
  var idade = 30;
  console.log('Minha idade é:', idade);
}

imprimeIdade();

Mesmo com esse código não temos problema de escopo. Se você executar o código acima no seu browser ou no NodeJS você terá a seguinte saída:

Minha idade é: 30

Agora o que deverá acontecer se colocarmos o console.log fora da nossa função imprimeIdade:

function imprimeIdade() {
  var idade = 30;
}

imprimeIdade();

console.log('Minha idade é:', idade);

Se você está esperando receber um erro na execução desse código, você está certo. Executando o código você receberá um erro similar a este:

/Users/marcobruno/Desktop/index.js:7
console.log('Minha idade é:', idade);
                              ^
ReferenceError: idade is not defined

Mas pera lá, eu disse que o var tem um problema de escopo. Sim ele tem, mas esse problema de escopo não acontece dentro de uma função. Dentro dela o escopo funciona como o esperado que é a variável só existir dentro das chaves da função. Agora quando criamos uma variável utilizando o var dentro de um if, for ou while essa variável irá vazar o escopo:

function imprimeIdade() {
  for (var idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

Pelo que aprendemos em lógica de programação nós deveriamos receber um erro na linha que utilizamos o console.log porque a variável idade foi criada dentro do escopo do for, mas ao invés disso não temos nenhum erro e nosso console.log executa sem problema nenhum após a execução do nosso loop for:

Idade dentro do for: 30
Idade dentro do for: 31
Idade dentro do for: 32
Idade dentro do for: 33
Idade dentro do for: 34
Idade dentro do for: 35
Idade dentro do for: 36
Idade dentro do for: 37
Idade dentro do for: 38
Idade dentro do for: 39
Idade dentro do for: 40
Idade fora do for: 41

Se você precisar que a variável idade se comporte como o esperado, você pode trocar o var por let:

function imprimeIdade() {
  for (let idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

Agora com esse código nós recebemos uma mensagem de erro, como é o esperado dado o que estudamos em lógica de programação:

/Users/marcobruno/Desktop/index.js:6
  console.log('Idade fora do for:', idade);
                                    ^
  ReferenceError: idade is not defined

Por a let ter um comportamento mais previsível, nós evitamos ao máximo o uso da var. Portanto podemos concluir que a let é uma variável que podemos atribuir um novo valor para ela e a mesma não tem o problema de escopo como apresentado em variáveis que são criadas com a var.

E a const como ela funciona? Ela também não tem o problema de escopo mas você também não pode atribuir um novo valor para uma variável criada com const. Bora ver na prática o que acontece quando tentamos alterar o valor de uma variável que foi criada com const:

function imprimeIdade() {
  for (const idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade);
  }  

  console.log('Idade fora do for:', idade);
}

imprimeIdade();

No momento que você tentar executar o código acima receberá o seguinte erro:

Idade dentro do for: 30
/Users/marcobruno/Desktop/index.js:2
  for (const idade = 30; idade <= 40; idade++) {
                                           ^
TypeError: Assignment to constant variable.

O erro que estamos recebendo diz que não podemos atribuir um novo valor para uma variável que foi criada com a const o que torna o comportamento dela muito mais previsível, já que o valor atribuído à ela não pode mudar. Por estes motivos procuramos sempre utilizar a const para criarmos as nossas variáveis e uma vez que recebemos o erro acima verificamos se realmente temos a necessidade de atribuir um novo valor à varíavel. Se isso for verdade, trocamos o const para let.

Vamos ver mais um exemplo com a const. No código a seguir vamos criar um variável chamada pessoa que receberá como valor um JSON com duas propriedades: nome e idade. Depois vamos tentar mudar o valor que setamos inicialmente:

const pessoa = {
  nome: 'Henri',
  idade: 20
};

pessoa = {
  nome: 'Luna',
  idade: 19
};

Executando esse código iremos receber o seguinte erro:

/Users/marcobruno/Desktop/medium/index.js:6
pessoa = {
       ^
TypeError: Assignment to constant variable.

Como vimos anteriormente não podemos atribuir um novo valor para uma const. Por outro lado conseguimos alterar o valor das propriedades do objeto da seguinte forma:

const pessoa = {
  nome: 'Henri',
  idade: 20
};

pessoa.nome = 'Luna';
pessoa.idade = 19;

console.log('Nome:', pessoa.nome);
console.log('Idade:', pessoa.idade);

Portanto não podemos passar uma nova atribuição para uma const, mas podemos alterar as propriedades do objeto que definimos na const pessoa.

Espero que tenha ficado claro como funciona as três formas de variáveis do JavaScript. Se quer estudar ainda mais sobre JavaScript, recomendo você entrar na comunidade CollabCode no Discord: http://bit.ly/discord-collabcode

Pare de chutar e aprenda como funciona o display: block

Marco Bruno 🤡 — Mon, 20 Jan 2020 09:24:32 +0000

Neste post nós vamos entender como funciona o display: block. Para facilitar a explicação, vamos utilizar o código final do post sobre display: inline como base. Se você quiser ir fazendo o código junto com o post, você pode copiar o HTML e os CSSs abaixo, ou acessar os códigos pelo GitHub ou CodePen.

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
    <ul class="example">
        <li class="example-item example-item_first">Primeiro</li>
        <li class="example-item example-item_second">Segundo</li>
        <li class="example-item example-item_third">Terceiro</li>
    </ul>
</body>
</html>

CSS (reset.css)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
ul, ol, li {
    list-style: none;
}

CSS (displayInlineBlock.css)

example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: inline;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Abrindo no navegador o HTML que acabamos de fazer, ele vai ter o seguinte layout:

Na tentativa de deixar o post um pouco mais dinâmico, vou colocar um desafio para implementarmos utilizando a propriedade display com o valor block.
Vamos tentar chegar no seguinte layout até o final do post:

A primeira coisa que faremos é definir a largura (width) e altura (height) para todas as tags <li>. Vamos abrir o nosso CSS (displayInlineBlock.css) e definir a largura (width) com 33.333% e a altura (height) de 150px:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: inline;
    width: 33.333%; // Adicionamos essa linha
    height: 150px;  // E essa aqui, também adicionamos
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Salve seu CSS, em seguida atualize seu navegador, o resultado vai ser:

Estranho, não mudou nada, parece que nem a largura (width) nem a altura (height) funcionaram. Por que isso aconteceu? Se sua resposta é não sei ou o CSS não funciona direito, vale a pena você dar uma olhada no post anterior a esse. Nele aprendemos como funciona a display: inline. Lá vimos que todo elemento HTML com display: inline, não aceita as propriedades width e height.

Para que o elemento HTML aceite as propriedades width e height, precisamos definir o valor do display como block. Vamos ver se isso que acabei de falar é verdade. Por favor, abra o nosso CSS (displayInlineBlock.css) e altere para block a propriedade display que está no seletor .example-item:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block; // Trocamos inline por block
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Vai lá no seu navegador e atualize a página, você verá que eu não estou mentindo para você. Espero que você esteja com o resultado igual a imagem que está logo abaixo, isso não acontece, não tem problema, me manda uma mensagem que eu te ajudo, ou entre no Discord da CollabCode no link a seguir: Discord da CollabCode

Boa. Agora conseguimos definir a largura (width) e altura (height) para os nossos elementos. Ou seja, todos os elementos definidos com display: block, aceitam as propriedades width e height.

Lembra que definimos uma largura de 33.333% para as três <li>?
Teoricamente as <li> deveriam ficar uma do lado da outra. Isso não acontece porque todo elemento definido como block ocupa a linha inteira, ou seja, não deixa outro elemento ocupar a mesma linha que ele. Por esse motivo os elementos HTML (<li>) ficaram um abaixo do outro.

Falta pouco para implementarmos o código do nosso desafio. Agora só precisamos mover a nossa segunda <li> para direita e centralizar a terceira <li>. A forma mais simples de implementar isso é utilizando a propriedade margin (respiro externo) do CSS.

Só para começarmos a aprender como funciona a margin, vamos colocar 40px de margem do lado esquerdo da nossa segunda <li>. Para fazer isso precisamos adicionar a propriedade margin-left: 40px, no seletor .example-item_second que está no arquivo CSS (displayInlineBlock.css).

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: 40px; // Adicionamos 40px do lado esquerdo
}
.example-item_third {
    background-color: #3B97D3;
}

Atualizando a nossa página no browser o resultado vai ficar assim:

Estamos caminhando para deixar o segundo elemento deslocado para o lado direito da página, conforme foi proposto no nosso desafio. Para conseguirmos implementar essa parte do desafio, qual é o valor que devemos colocar na propriedade margin-left? Dica: lembre-se que a <li> tem 33.333% de largura.

É isso. Só fazermos a conta, 100% - 33.333%, teremos como resultado 66.667%. Para deixarmos o layout mais próximo do desafio, basta que a segunda <li> tenha no margin-left o valor de 66.667%. Bora fazer isso no nosso CSS (displayInlineBlock.css).

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: 66.667%; // Alteramos o 40px para 66.667%
}
.example-item_third {
    background-color: #3B97D3;
}

Se precisarmos mudar a largura (width) de todas as <li> para 20%, o que vai acontecer com o nosso layout? O segundo elemento vai ficar no lado direito, bem encostadinho?

Infelizmente toda vez que mudarmos a largura (width) da <li> vamos ter que refazer a conta e mudarmos o valor da propriedade margin-left. Esta forma que acabamos de implementar funciona mas a manutenção não é muito feliz.

Felizmente temos um valor da propriedade margin-left que faz o cálculo para gente de forma automática, é só definirmos o margin-left como auto. Vai lá abra seu CSS (displayInlineBlock.css) e troque o 66.667% por auto:

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: block;
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: auto; // Só trocamos 66.667% por auto
}
.example-item_third {
    background-color: #3B97D3;
}

Assim que você atualizar o navegador vai ver que o layout não mudou nada do código anterior:

Mas, volte no seu código (displayInlineBlock.css) e altere a largura (width) dos seu <li> para 20%.

Se você ir até o navegador e atualizar a página vai ver o seguinte resultado:

Bacana né. Utilizando o margin-left: auto; não precisamos mais ficar fazendo a conta para definir o valor de margin-left. Desta forma a manutenção do código fica muito mais feliz.

Para finalizar o nosso desafio, só está faltando centralizar a terceira <li>. Agora nossas <li> estão com 20% de largura (width). Ou seja, quanto nós precisamos definir de margem à esquerda e à direita para ela ficar centralizada?

Basta colocar 40% de margem à esquerda e à direita. Mas, se a largura das <li> forem alteradas novamente? Vamos ter que ficar mudando a propriedade margin-left e margin-right. Triste! Novamente temos o problema para mantermos o nosso código.

Ainda bem que temos uma solução para esse problema. :-)
Da mesma forma que nós definimos margin-left: auto; para deixar que o navegador calculasse a quantidade de margem necessária para colocar no lado esquerdo do segundo elemento, com o objetivo de deixar ele posicionado no lado direito, podemos pedir para o navegador calcular de forma automática a quantidade de margem do lado esquerdo e direito para que a terceira <li> fique centralizada.

Precisamos portanto adicionar o margin-left: auto; e margin-right: auto; no seletor da terceira <li> (.example-item_third). Abra o nosso CSS (displayInlineBlock.css) e implemente o margin-left e margin-right. Ah! Vamos aproveitar e voltar a largura de 33.333% nas <li> para o layout ficar igual ao do nosso desafio.

.example {
    color: #FFF;
    text-align: center;
}
.example-item {
    display: block;
    width: 33.333%; // Voltamos o valor de 33.333%
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
    margin-left: auto;
}
.example-item_third {
    background-color: #3B97D3;
    margin-right: auto; // Adicionamos essa linha
    margin-left: auto; // Adicionamos essa linha também
}

Beleza. Agora vai até o navegador e atualize a sua página:

Espero que você tenha gostado do post. É dessa forma que explicava nas turmas de FrontEnd da Caelum. Se ficou qualquer dúvida, não concorda com alguma coisa, tem alguma dica para melhorar os próximos posts. Por favor, fale! Eu realmente ouço e sempre estou tentando melhorar. Até o próximo post que vai ser sobre, display: inline-block!!!

Se quiser trocar conhecimento fique a vontade para entrar e um dos canais da comunidade CollabCode:

Como configurar ESLint e Prettier no Node?

Marco Bruno 🤡 — Tue, 29 Oct 2019 16:29:04 +0000

Post in english available at SourceLevel: https://sourcelevel.io/blog/how-to-setup-eslint-and-prettier-on-node

Se você não sabe o que é o ESLint e Prettier eu recomendo você dar uma olhada no primeiro post onde expliquei o que são eles. O objetivo desse post é mais prático.

Como vamos precisar de um projeto base para mostrar como configurar o ESLint e Prettier na sua aplicação Node, logo após os pré-requisitos montarei um hello world (olá mundo) de API com Restify que é o framework usado pela Netflix e outras empresas a mesma altura.

Se você já tem um projeto criado, por favor só dê uma olhada nos pré-requisitos que estão logo a seguir e depois pode pular para a seção: Como configurar o ESLint em uma aplicação Node?

Pré-requisitos

Ter um terminal instalado com o bash, zsh ou fish. Se estiver no windows e não tiver com o bash instalado, por favor use o powershell porque ele terá mais compatibilidade com os comandos que vou mostrar a seguir. Caso tiver qualquer erro fique à vontade para pedir ajuda nos comentários.

Node (10.16.3 ou superior) e npm (6.12.0 ou superior) instalados e por último o Visual Studio Code (VSCode) instalado.

Criando projeto base?

Por favor, abra o terminal e crie uma pasta com o nome de api-happy. A seguir eu uso o comando mkdir para criar a pasta e à frente do comando coloco o nome da pasta:



mkdir api-happy

Agora precisamos entrar na pasta que acabamos de criar usando o comando cd e, logo à frente, o nome da pasta que queremos entrar:



cd api-happy

Show! Agora que estamos dentro da pasta já podemos iniciar o nosso projeto com node usando o npm (Node Package Manager). No terminal usaremos o comando npm init -y, esse comando criará um arquivo chamado package.json com algumas informações básicas de projeto como:

name (nome);
version (versão);
description (descrição);
main (arquivo que inicia o projeto);
scripts (scripts de test e outros);
keywords (palavras chaves para acharem seu projeto);
author (autor);
license (licença).

Agora que já sabemos o que o comando faz, execute ele no terminal, por favor (lembre-se que você tem que estar na pasta do projeto):



npm init -y

Só para certificarmos que deu tudo certo, abra o seu projeto no VSCode e verifique se o arquivo package.json foi criado com sucesso.

O próximo passo, ainda dentro da pasta do projeto, é instalarmos uma dependência (restify) no nosso projeto. Para isso precisamos usar o npm usando o comando install:



npm install restify

Caso você goste de escrever menos, você pode usar o npm i restify no lugar do npm install restify. Se você está acostumado a escrever o --save à frente do nome do pacote (restify no nosso caso) para garantir que o pacote vire uma dependência do nosso projeto e o mesmo vá para o package.json, isso não é mais necessário. Falando no package.json, por favor abra ele no seu VSCode e verifique se foi adicionado a chave a seguir:



...
"dependencies": {
    "restify": "^8.4.0"
  }
...

Ainda no seu VSCode com o seu projeto aberto e crie um arquivo chamado index.js e cole dentro dele o código a seguir:



const restify = require("restify");
const PORT = 5000
const app = restify.createServer()

app.get('/', (req, res) => 
  res.send({ hello: "World" }));

app.listen(PORT)

Nesse código que acabamos de ver, de forma bem resumida, estamos criando um servidor com o restify na porta 5000 que saberá responder apenas a rota / com um simples json de {hello: "World"}. A parte mais interessante do código é que não estou seguindo qualquer padrão e de certa forma estamos mesmo a ridicularizar o código, mas estou fazendo isso para te mostrar o poder que teremos após configurarmos o ESLint e Prettier.

Por último só precisamos pedir para o node subir o nosso servidor com o comando a seguir no terminal:



node index.js

Para esse comando funcionar é necessário executá-lo na pasta do projeto.

Como configurar o ESLint em uma aplicação Node?

Agora chegou a hora de deixar o código amador e subirmos de nível, pensando em qualidade de código e automatização de processos.

Volte ao terminal e derrube o seu servidor apertando as teclas ctrl e c juntas. Agora sim, temos o terminal livre para iniciar a configuração do ESLint. Para configurar o ESLint é necessário criar um arquivo de configuração chamado .eslintrc.json (esse arquivo pode ter outras extensões como: js e yaml). Criar esse arquivo manualmente é um tanto chato, felizmente não precisamos fazê-lo, podemos criá-lo de forma assistida usando o comando a seguir:



npx eslint --init

O que o npx?

npx instala o pacote para você de forma global e temporária, depois que você o utiliza ele é removido. Dessa forma não ficamos mantendo pacotes globais desatualizados e também mantendo eles ocupando um espaço desnecessário. O npx surgiu na versão 5.2 do npm.

Após a execução do comando, o terminal fará perguntas sobre a configuração do ESLint. Vamos às perguntas. Vou tomar a liberdade de fazer uma tradução das perguntas e respostas que recomendo. Não vou explicar todas as possíveis respostas para cada pergunta, mas caso você tenha qualquer dúvida não deixe de perguntar nos comentários:

Pergunta 1:

How would you like to use ESLint? (Use arrow keys)

Como gostaria de usar o ESLint? (Use as teclas direcionais)

Resposta 1

To check syntax, find problems, and enforce code style

Checar sintaxe, buscar problemas e forçar os padrão de código

Pergunta 2:

What type of modules does your project use?

Que tipo de módulos seu projeto usa?

Respostas 2:

JavaScript modules (import/export)

CommonJS (require/exports) Selecione essa opção

None of these Nenhum desses

A resposta que vamos deixar selecionada aqui é o CommnsJS (require/exports), mas é muito comum nos projetos backend com JavaScript a galera usar o sucrase, se esse for o seu caso você deve selecionar a opção JavaScript modules (import/export)

Pergunta 3:

Which framework does your project use?

Qual framework seu projeto usa?

Resposta 3:

None of these

Nenhum desses

Pergunta 4:

Does your project use TypeScript?

Seu projeto usa TypeScript?

Resposta 4:
Escreva N e em seguida aperte a tecla ENTER

Pergunta 5:

Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)

Onde seu projeto é executado? (Aperte <space> para selecionar, <a> para selecionar tudo, <i> para inverter a seleção)

Resposta 5:

Deixe apenas a opção Node selecionada.

Pergunta 6:

How would you like to define a style for your project?

Como você gostaria de definir um padrão de código para o seu projeto?

Resposta 6:

Use a popular style guide

Usar um padrão de código popular

Pergunta 7:

Which style guide do you want to follow?
_Qual padrão de código você quer seguir?_

Resposta 7:

Airbnb (https://github.com/airbnb/javascript)

Pergunta 8:

What format do you want your config file to be in?

Qual formato você deseja o seu arquivo de configuração?

Resposta 8:

JSON

Pergunta 9:

Would you like to install them now with npm?

Você gostaria de instalá-los agora com npm?

Resposta 9:

Y

Pronto! Agora temos o nosso arquivo de configuração do ESLint criado. Os pacotes para que ele funcione de forma feliz foram instalados como dependência para o ambiente de desenvolvimento em nosso projeto. Para certificar que tudo está certo, volte em seu VSCode e verifique se foi criado um arquivo .eslintrc.json na raiz do seu projeto, depois abra o arquivo package.json, ambos devem estar similar ao conteúdo a seguir:

.eslintrc.json



{
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
    }
}

package.json



{
  "name": "api-happy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "restify": "^8.4.0"
  },
  "devDependencies": { 
    "eslint": "^6.5.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-plugin-import": "^2.18.2"
  }
}

Agora abra o arquivo index.js. Infelizmente mesmo após toda a configuração que fizemos não temos nenhum tipo de alerta do nosso editor avisando que o nosso código não está seguindo o style guide do AirBnB. Isso acontece porque não instalamos o plugin do ESLint para que ele leia as configurações que acabamos de criar e nos informe os erros do nosso código. Clique no link a seguir e faça a instalação do plugin do ESLint em seu VSCode:
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Vixi! Agora se você abrir o seu arquivo index.js vai se deparar com algo não muito agradável, um código cheio de sublinhados vermelhos, como na imagem a seguir:

Se parar o mouse sobre a const que está na linha 1, aparecerá uma breve descrição do erro que o ESLint achou em seu código, conforme a imagem a seguir:

Esse erro é simples de arrumar, só precisamos adicionar uma linha em branco após o require do restify. Lembrar de fazer isso vai ser chato, muito chato, mas não se preocupe! É aqui que entra a magia do Prettier. Agora vamos partir para a configuração do Prettier que terá a responsabilidade de ler todas as configurações que colocarmos para o ESLint e realizar as alterações necessárias uma vez que salvamos os arquivos que estamos editando.

Por favor, não faça essas correções manualmente, isso só fará você sofrer e em algum momento desligará o ESLint por raiva a ele. Eu já fiz isso...kkk

Como configurar o Prettier com o ESLint?

Primeiro precisamos instalar o plugin do Prettier no nosso VSCode, faça isso usando o link a seguir: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Agora que já temos o Prettier instalado no VSCode podemos instalar o plugin do ESLint para o Prettier se comunicar com o mesmo. Abra seu terminal e, estando dentro da pasta do projeto, execute o comando a seguir. Este comando instalará todos os pacotes necessários para nossa configuração:



npm i prettier eslint-config-prettier eslint-plugin-prettier

Não vou entrar no detalhe de cada pacote que instalamos, mas caso tenha dúvidas não deixe de perguntar.
Após a instalação dos pacotes, abra o arquivo .eslintrc.json no VSCode e adicione no array que esta atribuído a chave extends a string "prettier", conforme código a seguir:



...
"extends": [
  "airbnb-base",
  "prettier"
],
...

A seguir da chave extends crie a chave plugins (caso ela não exista), atribua um array para chave com a string, "prettier", conforme o código a seguir:



...
"extends": [
  "airbnb-base",
  "prettier"
],
"plugins": [
  "prettier"
]
...

A última coisa que precisamos configurar no arquivo .eslintrc.json para o prettier e o ESLint funcionar de forma feliz é adicionar rules conforme o código a seguir:



...
  "rules": {
    "prettier/prettier": "error"
  }
...

Esse é o resultado final do .eslintrc.json:



{
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

Abra seu arquivo index.js, faça uma pequena alteração nele e depois disso salve o arquivo. Era para o prettier ter formatado seguindo os padrões e regras (style guide do AirBnB) que definimos no nosso ESLint. Isso não acontece porque precisamos avisar o VSCode que ele deve formatar os nossos arquivos toda vez que salvarmos eles. Para garantir que essa configuração funcionará no VSCode de outro desenvolvedor que venha programar no seu projeto, você tem que criar um arquivo chamado settings.json que ficará dentro de uma pasta chamada .vscode e ela tem que ficar na pasta raiz do seu projeto, por favor crie esse arquivo e essa pasta e dentro do arquivo adicione o código a seguir:



{
  "editor.formatOnSave": true,
}

Se voltar ao arquivo index.js e salvá-lo novamente verá que seu arquivo será formatado automaticamente seguindo os padrões configurados. Mas pera lá, você pode reparar que o seu ESLint está reclamando das aspas duplas, e foi o prettier que colou elas como padrão. É se você chegou a conclusão que o AirBnB gosta mais de aspas simples, é isso mesmo. Então por que o prettier não seguiu essa regra? Isso acontece porque o prettier segue todas as regras que o ESLint definiu, mas ele não sobreescreve as próprias regras, se você for até a página do plugin prettier verá que ele prefere usar por padrão as aspas duplas:

Para mudarmos isso e pedir para ele seguir a regra de aspas simples, precisamos criar um arquivo na raiz do projeto com o nome de prettier.config.js e dentro dele terá um código que tem como objetivo sobreescrever o comportamento padrão do prettier.singleQuote que hoje é false para true:



module.exports = {
  singleQuote: true
}

Agora se você voltar ao seu arquivo index.js e salvá-lo, verá que ele será formatado para ficar com aspas simples.

Só mais um detalhe. Se abrir o arquivo prettier.config.js verá que ele tem alguns problemas de compatibilidade com o style guide do AirBnB que pedirmos para o ESLint utilizar. Mais uma vez temos um padrão do prettier que vai contra os padrões do style guide que escolhemos. Recomendo você sobreescrever algumas regras do prettier para nem você nem outros devs terem problemas no futuro. Por favor, volte ao arquivo prettier.config.js e deixe ele com as seguintes configurações:



module.exports = {
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
};

Pronto! Isso é o necessário para o prettier funcionar bem com o ESLint uma vez que você está usando o style guide do AirBnB. O importante aqui é você entender que uma vez que você escolher outro style guide é necessário verificar se o prettier não estã entrando em conflito com o seu style guide e caso estiver você precisará mudar as configurações padrões do seu prettier.

Fico muito feliz em poder trocar conhecimento com você, obrigado por ter lido o post. Se tiver qualquer dúvida não deixe de perguntar. Abraço bons estudos!

Como melhorar a qualidade de código com ESLint e Prettier?

Marco Bruno 🤡 — Tue, 29 Oct 2019 16:17:06 +0000

Se você é a pessoa que gosta que o seu código esteja todo indentado da mesma forma, gosta de usar as mesmas aspas no seu código entre outros padrões mais complexos com objetivo de ter uma qualidade de código mais feliz, este post é para você. Ele também é para você que não gosta de seguir esses padrões chatos, provavelmente porque lhe dá muito trabalho e você considera isso uma perda de tempo.

Nesse post mostrarei como automatizar todo esse processo de padrões e qualidade de código enquanto você está programando no seu VSCode.

Então vamos para leitura entender qual é a magia por trás do ESLint e Prettier. Se você já sabe o que eles são, recomendo você pular para parte prática e ir direto para a seção: Como configurar ESLint e Prettier?

O que é ESLint?

É um lint ou linter para JavaScript e TypeScript, sim ele também é usado no mundo TypeScript! A um tempo atrás tinhamos o TSLint mas hoje ele se tornou um plugin do ESlint e a comunidade e mercado de trabalho passaram a utilizar o ESLint para ambas as linguagens.

O que é lint ou linter?

O termo lint ou linter não é algo só do mundo JavaScript, esse termo surgiu faz bastante tempo no mundo Unix para a linguagem C. A responsabilidade dos lints ou linters não mudaram, eles fazem para nós uma análise no nosso código antes mesmo do nosso software ser executado, portanto enquanto você escreve o seu código o linter acusará possíveis erros de programação, bugs, construções suspeitas, além de solicitar alterações para você seguir os padrões de indentações, aspas e qualquer outras regras que você tenha informado previamente para ele.

O que é Prettier?

Prettier além de ter um logo maravilhoso é um plugin que não pode faltar no seu VSCode. Ele formata seu código de forma automática no momento que você salva seu arquivo, você pode configurar de forma bem simples os padrões que ele deve seguir nessa formatação automática que ele realiza, e na parte prática desse post eu vou mostrar como você pode falar para o prettier seguir as regras de formatação que definiremos no ESLint e dessa forma não vamos duplicar essas regras em dois lugares diferentes.

Como configurar ESLint e Prettier?

O JavaScript está cada vez mais poderoso, hoje podemos usá-lo no FrontEnd com frameworks modernos como: React, Vue e Angular (TypeScript). Além do movimento de compiladores de JavaScript para FrontEnd que vem crescendo com a adoção do Svelte.

Também podemos usar o JavaScript no Backend com o NodeJS e frameworks como: Express e Restify. Temos também os frameworks que já adotaram TypeScript como linguagem padrão como o NestJS. Você pode usar JavaScript até no mundo Mobile com React Native!

Como o JavaScript está em muitos lugares, mostrarei como você pode configurar o seu ESLint e Prettier em alguns deles. Agora só escolher o mundo que quer trabalhar e clicar em um dos links a seguir para absorver todo conhecimento que você precisa:

Como configurar ESLint e Prettier no Node?
Como configurar ESLint e Prettier no React? Escrevendo
Como configurar ESLint e Prettier no Svelte? Escrevendo

Pare de chutar e aprenda como funciona o display: inline

Marco Bruno 🤡 — Tue, 29 Oct 2019 15:35:09 +0000

Nas minhas últimas turmas do curso de FrontEnd da Caelum, acabei mudando a explicação das propriedades display: inline; display: block; e display: inline-block;. Nesse post, e nos que vou fazer em sequência, tentarei transformar essa nova explicação em texto. Bora lá para este desafio :-)

Para deixar a explicação mais simples e feliz, vamos pensar que temos 3 tags <li> dentro de uma <ul>. Todas <li> vão ter 150px de altura (height: 150px) e a largura vai ser de 33.333% (width: 33.333%). Ah! A primeira <li> será da cor laranja (background-color: #FAA116), a segunda da cor verde (background-color: #57C7C3) e a terceira, e última, da cor azul (background-color: #3B97D3).

Se quiser ir acompanhando passo a passo as explicações, você pode copiar o HTML e os CSSs abaixo, ou acessar os códigos pelo *GitHub ou CodePen.

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
    <ul class="example">
        <li class="example-item example-item_first">Primeiro</li>
        <li class="example-item example-item_second">Segundo</li>
        <li class="example-item example-item_third">Terceiro</li>
    </ul>
</body>
</html>

CSS (reset.css)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
ul, ol, li {
    list-style: none;
}

CSS (displayInlineBlock.css)

.example {
    color: #FFF;
}    
.example-item {
    width: 33.333%;
    height: 150px;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

O resultado desse código no navegador deve ficar parecido com:

Agora que temos um código de exemplo, vamos estudar os 3 valores (inline, block e inline-block) da propriedade display. Para tentar não deixar uma explicação chata, colocarei alguns desafios de como posicionar os elementos na tela e a ideia é discutirmos sobre quais dos 3 valores podemos utilizar.

Nosso primeiro desafio é colocar um elemento do lado do outro, dessa maneira:

Quando estava começando como Desenvolvedor FrontEnd, meu primeiro chute era colocar nas 3 <li> a propriedade display com o valor inline. Depois era só rezar para que os elementos ficassem um do lado do outro conforme a imagem acima.

Vamos implementar o display: inline; para todas as tags <li> no nosso arquivo CSS (displayInlineBlock.css), ele ficará assim:

.example {
    color: #FFF;
}    
.example-item {
    width: 33.333%;
    height: 150px;
    display: inline; /* Só adicionamos essa linha. */
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Após alterar o CSS, dê uma atualizada no seu navegador. Você verá que o resultado não foi muito feliz:

Mas tudo bem, esse é um comportamento esperado quando utilizamos o display: inline;. Agora vamos dar uma pausa nos chutes e entender como funciona essa propriedade.

Como funciona o display: inline; ?

O valor inline permite que os elementos fiquem um do lado do outro -- essa é a parte simples de perceber.

Nós temos definido uma largura e uma altura para todas as <li> em nosso código, mas as propriedades width e height não funcionaram. Esse também é um comportamento do inline. Os elementos com inline não aceitam largura (width), nem altura (height), o tamanho do elemento é definido pelo conteúdo que ele contém.

Os dois pontos acima do comportamento que comentei, juntos são o básico que precisamos saber sobre o inline. Mas temos mais um ponto que precisamos dar uma olhada…

…Nós não definimos nenhum respiro entre os elementos, mas tem algum tipo de margin entre eles. Poderia ser uma margin que o navegador colocou por conta própria mas, dado que nós temos um reset.css que está zerando e tirando a margin, padding e border de todos as tags, isso também não é possível.

Por que tem esses espaços entre tags que possuem a propriedade display: inline?

Esses espaços existem porque o elemento com display: inline, ganha o comportamento de uma palavra. Além dos outros dois pontos que citamos acima.
O que estou querendo dizer com "comportamento de uma palavra"?
Para explicar um pouco melhor o comportamento de uma palavra, vamos adicionar um <h1> com os mesmo conteúdo das nossas tags <li> no nosso HTML:

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
    <ul class="example">
        <li class="example-item example-item_first">Primeiro</li>
        <li class="example-item example-item_second">Segundo</li>
        <li class="example-item example-item_third">Terceiro</li>
    </ul>

    <h1 class="title">
        Primeiro
        Segundo
        Terceiro
    </h1>
</body>
</html>

Repare que as palavras dentro do <h1> estão separadas por um [ENTER], da mesma forma que cada tag <li> também está separada por um [ENTER]. Depois de fazer a alteração na index.html, atualize o navegador e você terá esse resultado:

No nosso código, quando damos um [ENTER] para separar as palavras dentro do <h1>, essa quebra de linha não acontece no navegador pois ele troca o [ENTER] que está no código por um [SPACE]. Lembra que cada <li> ganhou o comportamento de uma palavra após colocarmos o display: inline para eles? Sacou? O espaço entre as tags <li> existe pelo mesmo motivo que temos os espaços entre as palavras que o <h1> contém.

Você deve estar se perguntando como faz para tirar os espaços entre as tags <li>. Agora que entendemos o comportamento é muito simples, é só tirar o [ENTER] que está separando os elementos. Desta forma, nós transformaremos as três tags em uma palavra. Nosso código ficará assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
    <ul class="example">
        <li class="example-item example-item_first">Primeiro</li><li class="example-item example-item_second">Segundo</li><li class="example-item example-item_third">Terceiro</li>
    </ul>    <h1 class="title">
        Primeiro
        Segundo
        Terceiro
    </h1>
</body>
</html>

Quando você atualizar o navegador o layout deve ficar assim:

Agora estamos sem os espaços entre os elementos, mas infelizmente, o nosso código não ficou nada elegante, e quanto mais tags <li> tivermos mais difícil ficará a leitura do código. Uma outra maneira que a galera utiliza para remover os espaços tentando deixar o código um pouco mais elegante e mais fácil de ler, é utilizando comentários em vez de deixar as tags na mesma linha. Veja como o código deve ficar com os comentários:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
  <ul class="example">
    <li class="example-item example-item_first">Primeiro</li><!--
 --><li class="example-item example-item_second">Segundo</li><!--
 --><li class="example-item example-item_third">Terceiro</li>
  </ul> <h1 class="title">
    Primeiro
    Segundo
    TerceiroVá até o navegador e atualize a página, você terá esse resultado:
  </h1>
</body>
</html>

O resultado desse código no navegador vai ser o mesmo de quando deixamos as tags <li> na mesma linha. Essas são duas formas de tirar o espaçamento entre as tags.

Por nossas tags <li> estarem funcionando como palavras, nós conseguimos mexer com o posicionamento delas com a propriedade text-align. Ela tem que ser usada no pai das tags <li>, por exemplo se nós quisermos que elas fiquem centralizadas, basta colocarmos na <ul> a propriedade text-align: center. Vamos implementar o text-align: center para a <ul> no nosso CSS (displayInlineBlock.css):

.example {
    color: #FFF;
    text-align: center; /* Só adicionamos essa linha */
}
.example-item {
    width: 33.333%;
    height: 150px;
    display: inline;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Vá até o navegador e atualize a página, você terá esse resultado:

Também podemos deixar nossas tags <li> posicionadas no lado direito. Para fazer isso é só mudar o text-align para right.

Agora você não precisa mais chutar quando for usar o valor inline da propriedade display. Lembre-se de tirar o width e height do CSS já que essas propriedades não funcionam com display: inline. Nossos códigos finais tem que ficar assim:

HTML (index.html)

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">    <title>
        Exemplo dos valores inline, block e inline-block
        da propriedade display;
    </title>    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/displayInlineBlock.css">
</head>
<body>
  <ul class="example">
    <li class="example-item example-item_first">Primeiro</li><!--
 --><li class="example-item example-item_second">Segundo</li><!--
 --><li class="example-item example-item_third">Terceiro</li>
  </ul>  <h1 class="title">
    Primeiro
    Segundo
    Terceiro
  </h1>
</body>
</html>

CSS (reset.css)

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    font-family: "Open Sans", sans-serif;
}
ul, ol, li {
    list-style: none;
}

CSS (displayInlineBlock.css)

.example {
    color: #FFF;
    text-align: center;
}    
.example-item {
    display: inline;
}
.example-item_first {
    background-color: #FAA116;
}
.example-item_second {
    background-color: #57C7C3;
}
.example-item_third {
    background-color: #3B97D3;
}

Esse código também está disponível no GitHub e CodePen.

Infelizmente não temos uma forma decente de implementar o layout do nosso desafio usando o display: inline. Nos próximos posts explicarei como funciona o diplay: block e display: inline-block. Até lá.