GIF89a; Emerson Broga https://emersonbroga.com Mon, 28 Feb 2022 13:00:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.1 https://emersonbroga.com/wp-content/uploads/2023/08/cropped-logo-b-pink-512x512-1-32x32.png Emerson Broga https://emersonbroga.com 32 32 Criando avatar Hexagonal com CSS! https://emersonbroga.com/criando-avatar-hexagonal-com-css/ https://emersonbroga.com/criando-avatar-hexagonal-com-css/#respond Mon, 28 Feb 2022 13:00:00 +0000 https://emersonbroga.com/?p=1868 No post de hoje, vou dar uma dica de CSS, hoje vou mostrar como criar um avatar hexagonal no CSS.
E você deve estar se perguntando, porque isso?

Recentemente o Twitter implementou o uso de NFTs como avatar na plataforma e isso marcou a internet como a nova era da Web 3.0.

Quem tem um avatar de NFT verificado pelo twitter, o avatar será exibido em um formato hexagonal, como por exemplo o https://twitter.com/alexisohanian, que na data que eu escrevo esse post, tem um nft como seu avatar de twitter.

Então vamos lá, fazer um avatar hexagonal, não é algo tão trivial como parece, mas provavelmente será a tendencia de agora pra frente, principalmente em projetos da Web 3.0.

Estrutura inicial

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hexagonal Avatar</title>
</head>
<body>
  <div class="container">
    <div class="title">
      <h1>Our Team</h1>
      <p>The most talented people in <strong>Web3</strong>.</p>
    </div>
    <div class="team">
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
    </div>
  </div>
</body>
</html>

Como vocês podem ver, temos apenas um HTML normal, com umas imagens do unsplash.

Agora vamos adicionar um css e deixar esses HTML mais bonitinho. Em um projeto real o css seria adicionado em um arquivo separado, mas pra agilizar aqui, vamos deixar no mesmo arquivo.

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1e1e1e;
      color: #e1e1e1;
    }
    .title {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .title h1 {
      color: rgb(202, 138, 4);
    }

    .title p strong {
      color: rgb(202, 138, 4);
    }

    .team {
      margin: 32px 0;
      display: flex;
      gap: 10px;
    }

    .team .avatar {
      display: block;
      width: 200px;
      height: 200px;
      filter: grayscale(1);
      cursor: pointer;
    }

    .team .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      transition: transform 0.5s ease;
    }

    .team .avatar:hover {
      filter: grayscale(0);
    }

    .team .avatar:hover img {
      transform: scale(1.1);
    }
  </style>

Nesse ponto, se você abrir o arquivo no browser você vai ver algo como:

Avatar Hexagonal e o clip-path do CSS

Agora que vem o grande pulo do gato

via GIPHY

Primeiramente você vai precisar de um SVG no formato e tamanho que você precisa. Eu recomendo abrir o figma e criar o seu hexágono, no tamanho que você precisa e copiar o código SVG dele. Aqui nesse exemplo, eu fiz um SVG quadrado que tem como tamanho 200px. O código dele é esse aqui:

<svg width="0" height="0">
    <clipPath id="twitter-avatar">
      <path d="M187.34 72C192.699 81.282 192.699 92.718 187.34 102L154.66 158.603C149.301 167.885 139.397 173.603 128.679 173.603H63.3205C52.6026 173.603 42.6987 167.885 37.3397 158.603L4.66026 102C-0.698722 92.718 -0.698726 81.282 4.66026 72L37.3397 15.3975C42.6987 6.11543 52.6025 0.397461 63.3205 0.397461H128.679C139.397 0.397461 149.301 6.11543 154.66 15.3975L187.34 72Z" fill="#C4C4C4"/>
    </clipPath>
  </svg>

Perceba que eu peguei o path do SVG e coloquei dentro de um clipPath e dei o id de “twitter-avatar”. Veja tambem que o SVG tem largura e altura 0.

Agora vamos colocar esse SVG, depois da nossa div “container” no nosso HTML.

<body>
  <div class="container">
    <div class="title">
      <h1>Our Team</h1>
      <p>The most talented people in <strong>Web3</strong>.</p>
    </div>
    <div class="team">
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTZ8fGF2YXRhcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
      <div class="avatar">
        <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
      </div>
    </div>
  </div>

  <svg width="0" height="0">
    <clipPath id="twitter-avatar">
      <path d="M187.34 72C192.699 81.282 192.699 92.718 187.34 102L154.66 158.603C149.301 167.885 139.397 173.603 128.679 173.603H63.3205C52.6026 173.603 42.6987 167.885 37.3397 158.603L4.66026 102C-0.698722 92.718 -0.698726 81.282 4.66026 72L37.3397 15.3975C42.6987 6.11543 52.6025 0.397461 63.3205 0.397461H128.679C139.397 0.397461 149.301 6.11543 154.66 15.3975L187.34 72Z" fill="#C4C4C4"/>
    </clipPath>
  </svg>
</body>

Agora vamos aplicar o pulo do gato no nosso CSS. Vá até a classe “avatar” e adicione o clip-path, com a url para a ancora do nosso clipPath no SVG, ficando assim:

 .team .avatar {
      display: block;
      width: 200px;
      height: 200px;
      filter: grayscale(1);
      cursor: pointer;
      clip-path: url("#twitter-avatar");
    }

Agora no browser, você verá algo como:

Código completo aqui no meu gist!

Obrigado pela leitura. Compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores
  2. Veja as dicas no Instagram
  3. Se inscreva em nosso canal do Youtube
  4. Curta nossa página no Facebook
  5. Não perca as atualizações no Twitter
  6. Siga nossos repositórios no Github

]]> https://emersonbroga.com/criando-avatar-hexagonal-com-css/feed/ 0 React Memo, useMemo, useCallback e memoization https://emersonbroga.com/memo-usememo-usecallback-e-memoization/ https://emersonbroga.com/memo-usememo-usecallback-e-memoization/#comments Mon, 21 Feb 2022 18:07:36 +0000 https://emersonbroga.com/?p=1855 Uma das dúvidas que a galera mais tem em relação ao React e seus hooks são o useMemo e o useCallback, e ninguém sabe muito bem por que e quando utilizar esses hooks.

Então hoje eu resolvi explicar de forma bem detalhada como que funciona cada um desses conceitos, o React memo, o conceito de memoization, e também os hooks useMemo e useCallback.

Então vamo lá porque tem muita coisa pra explicar.

Um conteúdo desse, deveria até ser cobrado, mas trouxe tudo aqui pra você, de graça.

Setup

Primeiramente o que eu vou mostrar aqui eu fiz usando um projeto do create-react-app que eu chamei de project.

Ao abrir o projeto em seu editor ou IDE de preferencia (eu particularmente uso o VSCode), exclua todos os arquivos da pasta src.

Dentro da pasta src nós vamos criar alguns arquivos, o index.js , index.css e App.js.

No index.js você vai colocar o seguinte conteúdo:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

No index.css vamos definir alguns padrões e colocar um “Dark Mode”

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1e1e1e;
  color: #e1e1e1;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Já no App.js vamos colocar o seguinte:

function App() {
  return <h1>React Memo com Emerson Brôga</h1>;
}

export default App;

Pronto, se você rodar o projeto agora, com npm start você verá algo como a imagem abaixo em seu navegador.

Setup inicial

Agora vamos implementar um botão que altera um state para que possamos fazer a aplicação renderizar novamente quando precisarmos e assim entender os conceitos.

No arquivo App.js vamos alterar para o seguinte código abaixo, importando o hook useState, inicializando um contador com o useState com o valor 0 e um console.log que mostre o valor do contador. Vamos também colocar uma função changeCounter que fará o incremento do nosso contador. E por fim um botão que chama a nossa função changeCounter . Veja o exemplo abaixo como vai ficar o App.js.

import { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);
  console.log(`App re-render, ${counter}`);

  const changeCounter = () => {
    setCounter(counter + 1);
  };

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>
      </div>
    </div>
  );
}

export default App;

Agora vamos também adicionar mais um CSS para deixar tudo mais bonitinho.

h1 {
  text-align: center;
}

.value {
  font-size: 10vw;
  font-weight: bolder;
  text-align: center;
  display: block;
  line-height: 1;
  color: #ffdb81;
}

.actions {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.items {
  display: flex;
  gap: 12px;
}

.btn {
  cursor: pointer;
  margin: 0 auto;
  border-radius: 8px;
  padding: 6px 12px;
}

.btn-teal {
  color: #1e1e1e;
  background-color: #5eead4;
  border: solid 1px #134e4a;
}

.btn-teal:hover {
  background-color: #2dd4bf;
}

Agora você terá algo assim e ao clicar no botão “Re-render” você verá no console o contador sendo incrementado.

Agora com botão de Re-render

Criando o problema

Agora vamos adicionar mais um componente no nosso projeto. Em um projeto real, esse novo componente seria feito em um novo arquivo, mas aqui vamos fazer no mesmo arquivo.

Então vamos lá, logo abaixo do import do useState crie um novo componente funcional chamado ShowValue que recebe como prop um value e retorna esse value em uma div.

function ShowValue({ value }) {
  console.log(`ShowValue render, ${value}`);

  return <div className="value">{value}</div>;
}

Agora vamos adicionar um novo state chamado de “value” no nosso App, uma função que muda nosso novo state e por fim o nosso novo componente. Nesse ponto o nosso src/App.js vai ficar assim.

import { useState } from 'react';

function ShowValue({ value }) {
  console.log(`ShowValue render, ${value}`);

  return <div className="value">{value}</div>;
}

function App() {
  const [counter, setCounter] = useState(0);
  const [value, setValue] = useState('ON');

  console.log(`App re-render, ${counter}`);

  const changeCounter = () => {
    setCounter(counter + 1);
  };

  const changeValue = () => {
    setValue(value === 'ON' ? 'OFF' : 'ON');
  };

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <ShowValue value={value} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Agora vamos colocar um css pro nosso novo botão btn-sky.

.btn-sky {
  color: #1e1e1e;
  background-color: #7dd3fc;
  border: solid 1px #0c4a6e;
}
.btn-sky:hover {
  background-color: #38bdf8;
}

Agora nos temos 2 botões, um que atualiza o state no App e outro que atualiza o state no ShowValue. O problema que temos aqui é que ao atualizar o state no App, o ShowValue também é renderizado novamente, mesmo que nada lá mude. Clique nos botões e observe o console.log.

ON-OFF

Para evitar esse “re-render” desnecessário do componente ShowValue, precisamos de usar o React memo. Mas antes, vamos entender o que é o conceito de Memoization na computação.

Entendendo sobre Memoization

Memoization é uma técnica de otimização computacional, usada principalmente para aumentar a velocidade das aplicações computacionais, guardando os resultados de operações custosas e retornado resultados de cache quando dado o mesmo input em uma chamada futura.

Em resumo, o memoization faz o processamento que tem que fazer, adiciona o resultado a um cache e retorna esse cache nas chamadas futuras se o input for o mesmo.

Num exemplo prático, sabe quando você vai na padaria, pastelaria etc e tem uma tabela do tipo:

Memoization no mundo real

Essa tabela, seria o cache, a quantidade de pasteis seria o input e o valor total seria o retorno da função, ou seja, eu ja tenho em cache alguns resultados para alguns inputs, se uma nova quantidade (input) chegar, eu vou ter que calcular o resultado, e adicionar ao cache. Agora entra a pegadinha, você não vai querer colocar tudo em cache, pois isso seria como entupir a pastelaria de tabelas dessas, então use somente quando forem processamentos custosos e não para multiplicações simples.

Posso mostrar como criar uma função de memoization no JavaScript futuramente, deixe aí nos comentários se você tem interesse nisso.

Agora vamos para o React Memo.

Usando o React memo

Primeiramente vamos esclarecer duas coisas, a primeira delas é que o React memo e o useMemo são coisas diferentes e a segunda é que o React memo funciona de uma forma um pouco diferente do Memoization da computação tradicional.

O método memo é um higher order component, que recebe um componente e retorna um componente, e internamente ele faz o que se propõe a fazer, o memoization.

Então vamos importar o memo do react e criar uma versão “memoized” do componente ShowValue

import { useState, memo } from 'react';

function ShowValue({ value }) {
  // ... code
}

const MemoShowValue = memo(ShowValue);

function App() {
  // ... code
  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue value={value} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Agora com o componente MemoShowValue ele só vai renderizar novamente se o value mudar.

Clique nos botões e veja o console.log.

ON OFF

Agora, vamos entender por que eu disse que o memo do react é diferente do memo da computação tradicional. Na computação tradicional, o memo vai “salvando” em cache os resultados diferentes para cada input. No React memo, ele apenas verifica se o valor atual é diferente do anterior.

Então vamos adicionar um novo MemoShowValue no nosso App.js e assim vamos conseguir visualizar o que eu acabei de dizer.

// .. code

function App() {
  // ... code
  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue value={value} />
        <MemoShowValue value={value === 'ON' ? 'OFF' : 'ON'} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Agora que temos os dois MemoShowValue observe que mesmo depois de enviar os inputs “ON” e “OFF” os componentes sempre são renderizados quando os valores mudam, pois o React memo apenas verifica se o valor atual é diferente do anterior, enquanto um “memoization” tradicional teria em cache os resultados finais para inputs “ON” e “OFF”.

ON OFF duas vezes

Agora vamos entender o hook useMemo

Até aqui o nosso React memo, funcionou como esperado, pois as propriedades que enviamos para MemoShowValue são de valores primitivos como null, undefined, boolean, number, string, symbol, bigint, no nosso caso foi uma string.

Agora vamos remover o segundo MemoShowValue e trocar a propriedade value que é uma string para um objeto que vamos chamar de params

Agora vai ficar assim:

import { useState, memo } from 'react';

function ShowValue({ params }) {
  console.log(`ShowValue render, ${params.value}`);

  return <div className="value">{params.value}</div>;
}

const MemoShowValue = memo(ShowValue);

function App() {
  const [counter, setCounter] = useState(0);
  const [value, setValue] = useState('ON');

  console.log(`App re-render, ${counter}`);

  const changeCounter = () => {
    setCounter(counter + 1);
  };

  const changeValue = () => {
    setValue(value === 'ON' ? 'OFF' : 'ON');
  };

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue params={{ value }} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Nesse ponto, se a gente clicar em “Re-render” você vai ver que quebramos o nosso memoization. Pois apesar de params ser um objeto com os mesmos valores em cada renderização, a cada ciclo ele é um novo objeto. Nesse caso, precisamos do useMemo para solucionar isso, pois não se trata mais de um tipo primário. Rode o projeto e clique no botão “Re-render” e veja os resultados no console.

ON OFF memoization quebrada

Agora vamos usar o useMemo para solucionar o problema.

A primeira coisa é importar o useMemo do react e criar o nosso objeto params com ele, colocando o value como dependência. E lembrando que os hooks do react devem sempre ser chamados no inicio do componente funcional.

import { useState, useMemo, memo } from 'react';

// ... code

function App() {
  const [counter, setCounter] = useState(0);
  const [value, setValue] = useState('ON');
  const params = useMemo(() => ({ value }), [value]);

  console.log(`App re-render, ${counter}`);

  const changeCounter = () => {
    setCounter(counter + 1);
  };

  const changeValue = () => {
    setValue(value === 'ON' ? 'OFF' : 'ON');
  };

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue params={params} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Pronto, agora o nosso MemoShowValue volta a funcionar como esperado. Devemos usar o use memo em objetos e arrays. Clique nos botões e verifique que os re-renders acontecem como esperado.

Memoization funcionando novamente.

Vamos entender o hook useCallback do React

Agora que ja vimos o memo, o useMemo, vamos entender o useCallback, que funciona como o useMemo, porem para funções. Vamos mais uma vez quebrar nosso memoization, adicionando uma propriedade que é uma função ao nosso componente. Vamos apenas receber um onClick no nosso ShowValue e passar uma função vazia do nosso App.js.

import { useState, useMemo, memo } from 'react';

function ShowValue({ params, onClick }) {
  console.log(`ShowValue render, ${params.value}`);

  return (
    <div className="value" onClick={onClick}>
      {params.value}
    </div>
  );
}

const MemoShowValue = memo(ShowValue);

function App() {
	// ...code

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue params={params} onClick={() => {}} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Como você pode ver, mais uma vez quebramos o nosso “memoization”.

Memoization quebrado novamente.

Vamos corrigir esse problema, com o useCallback! Primeiramente vamos importá-lo do react e vamos criar nosso onClick do useCallback , que vai continuar sendo uma função vazia e sem nenhuma dependência. E vamos pegar essa função retornada para o nosso componente.

import { useState, useMemo, useCallback, memo } from 'react';

// ...code

function App() {
  const [counter, setCounter] = useState(0);
  const [value, setValue] = useState('ON');
  const params = useMemo(() => ({ value }), [value]);
  const onClick = useCallback(() => {}, []);

	// ...code

  return (
    <div className="container">
      <h1>React Memo com Emerson Brôga</h1>
      <div className="items">
        <MemoShowValue params={params} onClick={onClick} />
      </div>
      <div className="actions">
        <button onClick={changeCounter} className="btn btn-teal">
          Re-render
        </button>

        <button onClick={changeValue} className="btn btn-sky">
          Change Value
        </button>
      </div>
    </div>
  );
}

export default App;

Pronto agora o nosso memoization volta a funcionar como esperado.

Aplicando isso no mundo real

Primeiramente vamos lembrar que “otimização precoce é um dos males do desenvolvimento de software”. Apesar de termos essas “ferramentas” a nossa disposição devemos usá-las somente quando a gente perceber que é realmente necessário, que certas renderizações desnecessárias estão deixando a aplicação lenta. Você vai precisar do memo, useMemo e useCallback em situações bem raras, pois o react ja cuida de todas as otimizações de forma bem eficiente.

E lembrando que não há nada de errado em um componente renderizar varias vezes durante o ciclo de vida de um componente. O forma que o react trabalha internamente já é bem eficiente.

Obrigado pela leitura. Compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores
  2. Veja as dicas no Instagram
  3. Se inscreva em nosso canal do Youtube
  4. Curta nossa página no Facebook
  5. Não perca as atualizações no Twitter
  6. Siga nossos repositórios no Github
]]> https://emersonbroga.com/memo-usememo-usecallback-e-memoization/feed/ 4 Loader Middleware para o Redux https://emersonbroga.com/loader-middleware-para-o-redux/ https://emersonbroga.com/loader-middleware-para-o-redux/#respond Tue, 20 Oct 2020 13:17:37 +0000 http://emersonbroga.com/?p=1774 Opa!

Se você programa em React e usa o Redux, você provavelmente já tentou imaginar uma forma fácil para exibir um feedback para o usuário enquanto uma requisição esta acontecendo. Seja na hora de submeter um formulário, seja na hora de buscar dados para popular a página.
E sim, existem várias formas de fazer isso umas mais simples outras mais complexas e hoje eu quero te mostrar uma forma bem interessante de alcançar esse objetivo.

Vamos lá!

Primeiramente eu estou assumindo que você já tem um conhecimento sobre React e Redux (se não tiver ainda, eu posso te mostrar o caminho), e que você ja configurou todos os actions e reducers no seu projeto e por fim que você use a estrutura de action “padrão” com type e payload.

A ideia aqui é você fazer com que cada action que você disparar que tiver uma promise não resolvida em seu payload, gere automaticamente uma outra action que terá o mesmo type com o sufixo “_LOADING” para que dessa forma sua aplicação entenda como tratar isso e retornar um feedback para o usuário.

Agora que você ja entendeu a ideia, o conceito por trás de tudo isso, você vai precisar de fazer os seguintes passos:

Criar um middleware do redux, chamado Loader.js

Depois vá até o seu store, e use o apply middlewares para agregar o Loader.js

Exemplo do Loader em ação

]]> https://emersonbroga.com/loader-middleware-para-o-redux/feed/ 0 Desmistificando o array.map(); do JavaScript. https://emersonbroga.com/desmistificando-o-array-map-do-javascript/ https://emersonbroga.com/desmistificando-o-array-map-do-javascript/#comments Wed, 04 Mar 2020 14:40:57 +0000 http://emersonbroga.com/?p=1720 Fala dev, tudo joia?

Hoje eu quero desmistificar alguns dos métodos mais utilizados nos Arrays do JavaScript, o Map.

No JavaScript os arrays possuem vários métodos que facilitam a sua manipulação. Esses métodos servem para resolver problemas comuns e têm uma aplicação bem abstrata, de forma que você consegue utilizar o método nativo injetando o seu código que atende a sua demanda.

Essa é uma forma que o JavaScript trata muito bem os seus arrays e com isso você tem uma sintaxe simples mas que atende a diversos casos diferentes.
Na maioria dos métodos dos arrays do JavaScript funcionam da seguinte forma.

const result = myArray.arrayMethod(myIteratorFunction);

Onde myArray é o seu array de dados, arrayMethod é o método nativo do array (hoje vamos ver o map) e myIteratorFunction é uma função que você passa para o método e essa função será executada para cada um dos items do array.

.map();

Vamos agora ver especificamente o .map(); que certamente é um dos mais utilizados. O map simplesmente itera entre todos os items do array e o retorno da sua função será atribuído ao resultado.
Vamos ver alguns exemplos:

No exemplo acima, temos um array numbers com os valores 1,2,3,4.
Temos a função duplicate que recebe um valor e multiplica esse valor por 2.
Em seguida temos a linha 5, onde a mágica acontece. Executamos o método map do array numbers passando como iterator a arrow function duplicate. Com isso temos o resultado [2, 4, 6, 8].

Uma outra forma de escrever esse mesmo trecho de código seria:

esse possivelmente é a forma como você vai encontrar em códigos antigos do JavaScript, pois a gente gostava de adicionar funções diretamente ao invés de passá-las como parâmetros. Os dois resultados são exatamente os mesmos, porem eu recomendo seguir o primeiro exemplo, pois o código fica mais claro e mais organizado.

Agora vamos ver mais um exemplo usando o .map();

Nesse outro exemplo, temos um array age e a função generateText e por fim executamos a função map do array age passando o método generateText. Esse exemplo serve para mostrar que usando a função map em um array, a gente pode ter como resultado um array completamente diferente, pois tínhamos um array de números e agora no resultado (result) temos um array de strings.

Agora vamos entender o que é passado para a função de iteração dos items do map.

Agora vamos ver um exemplo, pra entender os parâmetros que são passados a nossa função:

Quando chamamos o map(); ele passa para a função 3 parâmetros, que no exemplo acima eu chamei de value, index, arr.

value: é o valor de cada item do array iterado
index: é o índice daquele valor no array iterado
arr: é o array que está sendo iterado

Sabendo disso no exemplo acima o resultado daquele console log na primeira iteração seria:

value    primeiro
index    0
arr      ["primeiro", "segundo", "terceiro"]

como value temos o valor primeiro, como index temos o índice 0 e como arr temos o array completo [“primeiro”, “segundo”, “terceiro”]

Agora execute esse código em seu computador e veja qual o resultado da segunda de terceira iteração.

Conclusão

Com apenas esses exemplos, eu consigo mostrar a versatilidade do método map, uma vez que você pode iterar em qualquer array e performar qualquer operação, criando um novo array com o resultado.

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores
  2. Veja as dicas no Instagram
  3. Se inscreva em nosso canal do Youtube
  4. Curta nossa página no Facebook
  5. Não perca as atualizações no Twitter
  6. Siga nossos repositórios no Github
]]> https://emersonbroga.com/desmistificando-o-array-map-do-javascript/feed/ 1 [passo-a-passo] Criando uma API com Node JS, os conceitos básicos para iniciantes https://emersonbroga.com/passo-a-passo-criando-uma-api-com-node-js-os-conceitos-basicos-para-iniciantes/ https://emersonbroga.com/passo-a-passo-criando-uma-api-com-node-js-os-conceitos-basicos-para-iniciantes/#comments Wed, 19 Feb 2020 10:52:26 +0000 http://emersonbroga.com/?p=1662 No projeto de hoje, vamos fazer uma API simples usando NodeJS.
Essa api vai ser bem simples mas já nos dará uma base bem sólida para alguns conceitos de construção de APIs como rotas, requisições e verbos HTTP.
E vamos criar tudo passo-a-passo, do absoluto zero!

Pré-Requisitos

Para esse projeto, você precisa do NodeJS instalado em sua máquina, você pode fazer o download e seguir as instruções para o seu sistema operacional diretamente do site deles.

Após fazer a instalação do NodeJS, você deve criar a pasta onde ficará seu projeto. Pelo terminal vá até essa pasta.

Agora vamos criar o arquivo package.json utilizando o seguinte comando:
npm init -y

Pronto! Os pré-requisitos foram cumpridos.

Instalando Express

Agora vamos instalar o Express, que é um framework do NodeJS para criação de aplicações web. Essa instalação é bem simples, basta usar o seguinte comando do NPM:
npm install --save express

Agora que temos o Express instalado, vamos criar um arquivo chamado index.js que será a porta de entrada da nossa aplicação.

No index.js coloque o seguinte conteúdo:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => res.send('Minha API'));

app.listen(port, () => console.log(`Listening on port ${port}!`));

Agora vamos rodar esse arquivo, utilizando o comando:
node index.js

Ao executar esse comando, você vai ver um log no terminal dizendo “Listening on port 3000!”, isso significa que o nosso servidor foi inicializado com sucesso e que está pronto para responder requisições no endereço http://localhost:3000 (url localhost, porta 3000).
Agora você pode abrir o seu browser em http://localhost:3000 que o servidor irá responder com o texto “Minha API”

Métodos HTTP

Agora vamos analizar a fundo a linha
app.get('/', (req, res) => res.send('Minha API'));.
Lembra quando a gente inicializou o Express atribuindo ele à constante app ? Esse objeto app, contém vários métodos do servidor Express e dentro desses métodos temos os verbos HTTP como funções que irão responder a requisições.

Se você não conhece os verbos HTTP, aqui vai uma pequena explicação:
Existem vários verbos referentes a tipos diferentes de requisições HTTP, entre eles os mais comuns são GET, POST, PUT e DELETE.
Esses verbos ajudam a identificar tipos diferentes de requisições em uma determinada rota. Por exemplo, usamos o GET para pegar informações, o POST para enviar informações, o PUT para atualizar informações e o DELETE para remover informações.
Esses verbos HTTP também se referem às operações CRUD, Create, Read, Update e Delete, que vamos ver mais pra frente.

Sabendo o que você já sabe agora, vamos voltar ao nosso objeto app. Ele tem os métodos referentes aos verbos HTTP, então podemos criar as nossas rotas da seguinte forma
app.METODO(CAMINHO, FUNÇÃO);

O método GET

Então agora quando você vê o método
app.get('/', (req, res) => res.send('Minha API"));
você já consegue entender que estamos chamando o “GET” no caminho “/” (raiz da nossa url) e temos depois como callback uma arrow function.

Essa arrow function, poderia ser substituída por uma função normal, como por exemplo:

app.get('/', function(req, res) { 
    return res.send('Minha API'));
});

ou até mesmo

function index(req, res) {
  return res.send('Minha API');
}
app.get('/', index);

Tudo isso fica a critério do desenvolvedor e do time.
O mais comum atualmente é usar um JavaScript moderno, ou seja com arrow functions, então vamos deixar assim mesmo:
app.get('/', (req, res) => res.send('Minha API'));

Agora que você entendeu o app.get();, você já sabe que existem os métodos app.post();, app.put();, app.delete(); e também alguns outros que não iremos cobrir nesse momento.

Agora vamos falar do req e do res e mais pra frente voltamos no post, put e delete.

Entendendo o req e o res

Vocês devem ter percebido esse tal de req e res e devem estar confusos. Mas vou explicar detalhadamente como funciona.

Internamente o método app.get();, recebe dois parâmetros, o caminho (também conhecido como path) e no segundo parâmetro uma função de callback.
O callback é uma função que o método get irá executar depois que ele terminar de executar o que ele tem pra executar.

Vou exemplificar o callback pra vocês.

Vou criar uma função chamada fazOperacaoMatematicaSecretaComplexa(numero1, numero2, callback);
Como vocês perceberam essa função recebe 3 parâmetros, numero1, numero2 e callback, e como vocês podem imaginar o numero1 e o numero2 devem ser números e o callback deve ser uma função.
Sim o JavaScript permite que você envie funções como parâmetros.

Essa nossa função fazOperacaoMatematicaSecretaComplexa não irá retornar nada e ao invés de retornar, elta irá enviar o resultado pelo callback, então vamos colocar a mão na massa e criar nossa função:
Eu adicionei uns comentários ao código, para que você consiga acompanhar.

function fazOperacaoMatematicaSecretaComplexa(numero1, numero2, callback) {
    // vamos verificar se numero1 é um numero.
    if (isNaN(numero1)) return;
    if (isNaN(numero2)) return;

    // agora que temos os 2 números, podemos fazer nossa operação  matemática secreta complexa 
    // e atribuir o resultado a constante result.

    // nossa operação matemática secreta complexa (multiplicação)
    const resultado = numero1 * numero2;

    // agora com o resultado em mãos vamos retorná-lo usando o callback

    // vamos verificar se o callback é uma função
    if (typeof callback === "function") {
        callback(resultado);
    }
    
}

Agora vamos fazer uma chamada a essa função, passando como numero1 e numero2 o valor 2, e como callback a função console.log.

fazOperacaoMatematicaSecretaComplexa(2, 2, console.log);

Se você rodar esse arquivo no terminal você irá ver o numero 4 como resultado no console.

Nesse momento, você deve estar coçando a cabeça e falando assim, mas pra quê esse tal de callback se eu poderia simplesmente retornar o resultado. Sim, você poderia simplesmente retornar o resultado, pois nossa função não executa nada de forma assíncrona. Tenho muito mais pra falar sobre callback mas poderemos nos aprofundar nisso futuramente.

Agora sabendo o que você já sabe sobre callbacks, vamos voltar pro app.get, internamente ele irá chamar o callback, enviando alguns parâmetros, e os dois primeiros são os objetos req e res que por sua vez contém vários métodos.
O primeiro parâmetro o req, é uma abreviação para request, ou seja, um objeto responsável pela informações e funções referentes a requisição.
O segundo parâmetro é o res, que é uma abreviação para response, ou seja, um objeto responsável pelas informações e métodos de resposta.
Nesse nosso exemplo, simplesmente usamos o res.send() para enviar a string “Minha API” como resposta a nossa requisição.

Retornando JSON

Agora que já sabemos um pouco mais sobre como funcionam as requisições dentro do Express, vamos alterar a nossa resposta para enviar um JSON ao invés de uma string.

Vamos criar um objeto simples e vamos enviá-lo como resposta, vou chamar esse objeto de result.
const result = {name: 'emerson', instagram: 'emersonbrogadev'};
Agora vamos voltar ao nosso app.get e retornar essa resposta. Ele vai ficar assim:

app.get('/', (req, res) => {
   const result = { name: 'emerson', instagram: 'emersonbrogadev' };
   return res.json(result);
 });

Agora você deve parar o serviço do NodeJS que está rodando (utilize o comando CTRL + C no terminal) e vamos iniciar o serviço novamente:
node index.js.

Ao acessar http://localhost:3000 no browser, você verá algo como:

{ "name": "emerson", "instagram": "emersonbrogadev" }

Pronto, retornamos o nosso primeiro JSON. Isso será a base para todas as nossas APIs REST que a gente criar.
Pode abrir o champagne e comemorar.

POST

Agora vamos fazer uma requisição do tipo POST. Como eu disse anteriormente, nas requisições post a gente envia dados ao servidor.
Então voltando ao nosso servidor Express, vamos criar uma rota post, seguindo o mesmo padrão.
app.METODO(CAMINHO, FUNÇÃO);

app.post('/', (req, res) => {
  return res.json([]);
});

A primeira coisa que eu quero apontar aqui, é que o caminho é o mesmo, “/” (raiz da nossa url) o que deixa claro pra gente que podemos usar o mesmo caminho para requisições HTTP diferentes.

Se você reiniciar o serviço do NodeJS que está rodando (CTRL + C) e iniciá-lo novamente com node index.js e acessar pelo browser http://localhost:3000, você terá como resposta o JSON do nosso método GET, pois quando executamos uma requisição pelo browser, por padrão ela é do tipo GET. Ainda bem que para facilitar a nossa vida, existem ferramentas como o Postman.

A história do POSTMAN

Olha que massa essa historia, alguém foi no StackOverflow, e perguntou “Como que faz pra fazer uma requisição POST pelo browser?” e dentre as respostas mais votadas, o usuário do StackOverflow com o username “Abhinav”, escreveu o seguinte:

Estou trabalhando em um app do Chrome chamado Postman para fazer esse tipo de coisa.

Abhinav (tradução livre)

Isso aconteceu em 2012, e atualmente o Postman é utilizado por mais de 10 milhões de desenvolvedores ao redor do mundo e eu sou um deles e espero que você seja também. = )

O fundadores do Postman e entre eles o Abhinav!
O fundadores do Postman e entre eles o Abhinav!

Você pode fazer o download gratuitamente em https://www.postman.com/downloads/.

E sim, atualmente existem outras alternativas, mas vamos continuar com o Postman.

Voltando para requisição POST

Feito o download, abra o Postman, clique no botão “+” e selecione o método POST.

Digite a url http:localhost:3000 e clique no botão “Send“, na resposta você verá o array vazio que retornamos como JSON.

Se você teve uma resposta diferente, pode ser que você esqueceu de reiniciar o serviço do NodeJS.

Agora que você já viu como fazer uma requisição GET e uma requisição POST, você deve estar se perguntando, qual a diferença, pois parece que nada mudou, tudo que você teve que fazer foi abrir o Postman para fazer essa requisição. E sim eu entendo essa sua percepção, só que a grande diferença virá agora, como disse anteriormente o método POST serve para enviarmos dados, então vamos utilizar o Postman novamente só que dessa vez enviando dados.

Vá até a aba “body” e com a opção “x-www-form-urlencoded” selecionada, coloque as seguintes chaves e valores (key e value).

name    emerson
site    emersonbroga.com

conforme a imagem abaixo:

E antes de clicar no botão “Send” vamos fazer uma pequena modificação no método de callback do app.post();

Lembra que o req, ou seja, request, contém os dados da requisição? Então vamos usar o req, para pegar os dados que enviaremos em nossa requisição pelo Postman. Porem por padrão o Express, não tem um parser do body (corpo) da requisição, então antes precisamos instalar um middleware chamado “body-parser“, sendo assim, volte ao terminal e execute o seguinte comando:

npm install --save body-parser

Agora vamos adicionar o body-parser em nossa aplicação, primeiro importando o body-parser e em seguida aplicando ele ao nosso servidor Express, com o app.use();. Juntamente a isso, vamos passar ao body-parser o extended: true para o método urlencoded, para que possamos também fazer o parser de dados aninhados.

Depois disso tudo seu index.js ficará da seguinte forma:

 const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 const port = 3000;

 app.use(bodyParser.urlencoded({ extended: true }));

 app.get('/', (req, res) => {
   const result = { name: 'emerson', instagram: 'emersonbrogadev' };
   return res.json(result);
 });

 app.post('/', (req, res) => {
   return res.json([]);
 });

 app.listen(port, () => console.log(Listening on port ${port}!));

Agora sim, vamos utilizar o req, para pegar os dados da nossa requisição, então no seu método app.post() faça da seguinte forma:

app.post('/', (req, res) => {
   const name = req.body.name;
   const site = req.body.site;
   return res.json([site, name]);
 });

Reinicie o serviço do NodeJS e execute a chamada no Postman, você verá algo como:

[ "emerson", "emersonbroga.com" ]

Agora você já sabe como funcionam as requisições POST e entendeu até a história do Postman!

O método PUT

Agora que já está mais claro como funciona o GET e o POST, vou falar sobre o PUT. Eu não sei se você já percebeu o potencial do GET e do POST, pois até agora só falamos de dados estáticos.

Em nosso método GET, retornamos de forma estática o JSON "{ name: 'emerson', instagram: 'emersonbrogadev' }", mas em uma aplicação real, essas informações não seriam estáticas, elas viriam de alguma outra fonte, como por exemplo um banco de dados, uma API externa, um arquivo em disco, etc, viria de alguma outra fonte. A mesma coisa se aplica para o método POST, estamos apenas recebendo os dados e retornando de modo estático, mas em uma aplicação real, iríamos persistir esses dados de alguma forma, seja um banco de dados, uma api externa, arquivo em disco, etc.

Com tudo isso em mente, eu já posso te dizer que não há muito segredo no método PUT.

No PUT por exemplo, como disse anteriormente, serve para atualizar informações, e no caso de uma API REST, teríamos que passar um identificador para o qual essa atualização seja aplicada. Para isso a rota que iremos utilizar ser á um pouco diferente, pois ela irá conter esse identificador.

No Express, definimos rotas com parâmetros, utilizando o “:” para indicar que é uma variável, então para criar o nosso identificador, vamos usar o :identificador, que ao aplicar a nossa rota ficará app.put('/:identificador', () => {});
Esse identificador será utilizado para buscar o item a ser alterado.
Agora vamos colocar a mão na massa e fazer o seguinte:

app.put('/:identificador', (req, res) => {
   const identificador = req.params.identificador;
   return res.json([identificador]);
 });

Ou seja, estamos pegando esse identificador da url, utilizando o objeto req.params, que contém os parâmetros da url da rota, nesse caso o identificador.

Vamos voltar ao Postman e vamos fazer a seguinte chamada PUT para a url http://localhost:3000/emerson onde emerson será o nosso identificador.

Antes de apertar o botão “Send“, lembre-se de reiniciar o servido do node e você verá o identificador sendo exibido em nossa resposta JSON.

Agora vamos fazer algumas mudanças, para tornar o nosso código um pouco mais interessante. Lembra que agora a pouco eu disse que poderíamos usar um banco de dados, uma api, ou arquivo em disco, etc, como nossa fonte de dados? Pra deixar as coisas simples, nesse exemplo, vou utilizar um simples array do JavaScript como nossa fonte de dados.

Eu deixei esse array pronto aqui com alguns dados fictícios, incluindo id, name, age e company (identificador, nome, idade e empresa).

const data = [
     { id: 1, name: "Mike", age: 22, company: "Nascetur Mus Company" },
     { id: 2, name: "Eleanor", age: 42, company: "Hendrerit Donec LLP" },
     { id: 3, name: "Dylan", age: 51, company: "Nisi Incorporated" },
     { id: 4, name: "Leila", age: 30, company: "Eros Non Limited" },
     { id: 5, name: "Jason", age: 31, company: "Accumsan Interdum Associates" },
 ];

Vamos colocar esses dados em nosso index.js, logo depois da constante port, deixando o arquivo completo assim:

const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 const port = 3000;
 const data = [
   { id: 1, name: 'Mike', age: 22, company: 'Nascetur Mus Company' },
   { id: 2, name: 'Eleanor', age: 42, company: 'Hendrerit Donec LLP' },
   { id: 3, name: 'Dylan', age: 51, company: 'Nisi Incorporated' },
   { id: 4, name: 'Leila', age: 30, company: 'Eros Non Limited' },
   { id: 5, name: 'Jason', age: 31, company: 'Accumsan Interdum Associates' },
 ];
 app.use(express.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.get('/', (req, res) => {
   const result = { name: 'emerson', instagram: 'emersonbrogadev' };
   return res.json(result);
 });
 app.post('/', (req, res) => {
   const name = req.body.name;
   const site = req.body.site;
   return res.json([site, name]);
 });
 app.put('/:identificador', (req, res) => {
   const identificador = req.params.identificador;
   return res.json([identificador]);
 });
 app.listen(port, () => console.log(Listening on port ${port}!));

Agora vamos mudar um pouco o nosso método PUT.

Primeiramente vamos simplificar as coisas e ao invés de chamarmos de identificador, vamos deixar só como id.

Agora que temos os nossos dados, podemos definir que a chave id que é um número inteiro, que não se repete, será usado como nosso identificador. Ponto importante de um identificador é ele ser único, para que possa identificar apenas um item. Essa é uma definição que você ao criar a sua API faz, decidindo qual será o identificador dos seus dados, nesse exemplo, ficaremos com o id, mas existem diversas outras formas (email, uuid, etc).

Dito isso, após pegarmos o identificador da nossa requisição, vamos procurar esse item em nossos dados, nesse caso vamos usar o método find dos arrays do JavaScript:

app.put('/:id', (req, res) => {
   const id = req.params.id;
   const item = data.find(item => item.id == id);
   return res.json(item);
});

Agora mais uma vez, reinicie seu serviço do node, e faça uma requisição PUT (usando Postman) para a url http://localhost:3000/1

O número 1 é o nosso identificador (id) que corresponde ao item que tem o nome “Mike” em nossos dados, então você terá o seguinte resultado.

Agora nós já conseguimos pegar o item a ser alterado em nossa requisição PUT, mas antes vamos dar uma pausa e analisar um pouco esse código.

O que temos aqui serve perfeitamente para ser o método GET que retorna apenas um elemento. Então vamos duplicar esse nosso código e gerar uma rota GET que retorna um elemento.

app.get('/:id', (req, res) => {
   const id = req.params.id;
   const item = data.find(item => item.id == id);
   return res.json(item);
 });

Pronto, temos um método GET que retorna apenas um elemento! Reinicie o serviço do NodeJS e vá no Browser ou no Postman e acesse a url http://localhost:3000/1

Pelo Browser
Pelo Postman

Altere o id de 1 para outro número e veja se está retornando como esperado.

Só que agora eu tenho 2 notícias pra você, existe um problema nesse código!

Repetição de código é algo que deve ser evitado, então vamos abstrair esse nosso “find” para um método externo, para que possamos usar na rota GET e na rota PUT (e futuramente também na DELETE).

O seu index.js ficará assim:

 const express = require('express');
 const bodyParser = require('body-parser');
 const app = express();
 const port = 3000;

 const data = [
   { id: 1, name: 'Mike', age: 22, company: 'Nascetur Mus Company' },
   { id: 2, name: 'Eleanor', age: 42, company: 'Hendrerit Donec LLP' },
   { id: 3, name: 'Dylan', age: 51, company: 'Nisi Incorporated' },
   { id: 4, name: 'Leila', age: 30, company: 'Eros Non Limited' },
   { id: 5, name: 'Jason', age: 31, company: 'Accumsan Interdum Associates' },
 ];

 const findItem = id => {
   return data.find(item => item.id == id);
 };

 app.use(express.json());
 app.use(bodyParser.urlencoded({ extended: false }));

 app.get('/', (req, res) => {
   const result = { name: 'emerson', instagram: 'emersonbrogadev' };
   return res.json(result);
 });

 app.get('/:id', (req, res) => {
   const item = findItem(req.params.id);
   return res.json(item);
 });

 app.post('/', (req, res) => {
   const name = req.body.name;
   const site = req.body.site;
   return res.json([site, name]);
 });

 app.put('/:id', (req, res) => {
   const item = findItem(req.params.id);
   return res.json(item);
 });

 app.listen(port, () => console.log(Listening on port ${port}!));

Ficou bem melhor não é mesmo?

Agora vamos continuar com nosso método PUT, fazendo a alteração do nosso item.

Depois de usar o id para buscar o item, vamos usar o body para pegar o dado a ser modificado, que nesse caso será o nome, em seguida vamos utilizar o spread para atualizar o item da seguinte forma.

app.put('/:id', (req, res) => {
   const name = req.body.name;
   let item = findItem(req.params.id);
   item = { …item, name: name };
   return res.json(item);
 });

Perceba que primeiramente, eu pego o novo nome do body da requisição, da mesma forma que fizemos em nosso método POST, e depois eu mudei o item de const para let, pois um novo valor será atribuído e em seguida atribuí esse novo valor usando o spread e sobrepondo o name como novo name que veio do body.
Existem diversas formas de alcançar o mesmo resultado, eu escolhi utilizar o descrito acima.

Agora você pode reiniciar o serviço e executar a seguinte requisição PUT no Postman:

Uma informação importante para apontar aqui, é que não estamos atualizando de verdade o nosso array de dados, Para isso precisamos de uma fonte que persista a escrita, como um banco de dados, arquivo em disco, api, etc.

O método DELETE

Agora vamos finalmente para o DELETE.

Como vocês já perceberam, o delete será algo em simples de escrever, pois utilizaremos os mesmos princípios do PUT.

app.delete('/:id', (req, res) => {
   const item = findItem(req.params.id);
   // deletar o item
   return res.json({});
 });

Esse comentário que eu adicionei escrito “deletar o item” é porque, como não estamos utilizando uma fonte que persista escrita, não estamos de verdade deletando o item do nosso array de dados.

Conclusão

Esse foi um post bem simples, dedicado inteiramente aos iniciantes e tem o intuito de mostrar como as coisas funcionam. Acredito que esse post tenha te dado um entendimento de como funcionam as APIs REST, porém ainda tem muito pra aprofundar, existe ainda uma infinidade de coisas que não falei, como por exemplo, tratamento de erros, validação, response codes, autenticação, autorização, rotas, versionamento de api, etc.

Uma verdadeira infinidade de coisas a serem ditas.

Se o pessoal realmente gostar desse tipo de post e quiser que eu continue com esse projeto exemplo, eu posso fazer a parte 2, implementando mais um pouco das coisas que mencionei.
Se você leu até aqui, deixe um comentário com a hashtag #curtidemais se você gostou #naocurti se você não gostou.

Dever de casa

Se você leu todo o post, significa que você está mesmo interessado em aprender NodeJS. Então vou deixar aqui o dever de casa para você.

1 – Na função findItem, dentro do método find, eu estou usando == e quero que você faça funcionar com ===.
(dica: isso vai requerer que você altere o tipo de dado).

2 – No método app.get('/', () => {} ) eu estou retornando os dados estáticos com um objeto que contém name e instagram, altere esse método para retornar o nosso array de dados.

3 – Opcional: Coloque esse projeto no seu Github e poste uma foto nos stories do seu Instagram e me marque lá @emersonbrogadev.
(dica: se não souber usar Git ou Github, assista os seguintes vídeos Tutorial Git em 20 minutos e Tutorial Github em 20 minutos)

Obrigado pela leitura. Compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores
  2. Veja as dicas no Instagram
  3. Se inscreva em nosso canal do Youtube
  4. Curta nossa página no Facebook
  5. Não perca as atualizações no Twitter
  6. Siga nossos repositórios no Github

]]> https://emersonbroga.com/passo-a-passo-criando-uma-api-com-node-js-os-conceitos-basicos-para-iniciantes/feed/ 9 Capturando os erros de um async/await sem try catch https://emersonbroga.com/capturando-os-erros-de-um-async-await-sem-try-catch/ https://emersonbroga.com/capturando-os-erros-de-um-async-await-sem-try-catch/#comments Wed, 29 Jan 2020 12:00:06 +0000 https://emersonbroga.com/?p=1262 Olá, pessoal!

Hoje quero mostrar pra vocês uma forma de capturar os erros de um async await sem usar o try catch.
Mas primeiro vamos recaptular, o que é mesmo um async await?

async/await

Vou tentar contar a historia aqui de forma rápida, vamo lá:
Ao trabalhar-mos com funções assíncronas no JavaScript temos alguns recursos bem comuns como utilizando callbacks, porem os callbacks podem causar o famoso callback hell.
Aí começamos a usar promises para resolver o problema do callback hell, porém se tivermos muitas promises temos que ficar aninhando funções com o .then().
Então surgiu o async/await que faz com que o JavaScript espere que a promise seja resolvida antes de continuar executando o código.

Uma função com async/await pode ser escrita da seguinte forma:

Exemplo Async/Await

Exemplo Async/Await

Perceba que temos a palavra async logo antes da declaração da arrow function que é atribuída a const “doSomething” e no corpo da função temos o await, que irá esperar a execução da promise “doSomethingElse”.

Nesse exemplo temos apenas o caminho perfeito, caso a promise “doSomethingElse” execute e seja resolvida (resolve). Caso algum erro ocorra e ela seja rejeitada (reject), não será tratado nessa função.

Tratando erros com Try/Catch

Agora vamos pegar o exemplo acima e tratar os erros com usando try/catch.

Async/Await com Try/Catch

Async/Await com Try/Catch

Agora teremos o console.log caso tudo ocorra bem e um console.error caso a promise “doSomethingElse” seja rejeitada. Mas escrever dessa forma torna o nosso código muito verboso, imagina ter que fazer um try/catch pra cada função assíncrona que a gente faz? Ai que entra o pulo do gato de capturar os erros de um async/await sem try/catch!

Destructuring salvando vidas

Ai que entra a mágica do destructuring. Se você não lembra o que é destructuring, ele nada mais é do que uma sintaxe nova do JavaScript para atribuir valores de arrays ou propriedades de objetos em variáveis destintas! Veja o exemplo abaixo:

Exemplo de destructuring

Exemplo de destructuring

Espero que o exemplo acima tenha esclarecido as coisas.Na linha 3, pegamos o array numbers e atribuimos às constantes a e b, recebendo respectivamente os valores 10 e 20.

Sabendo disso, podemos finalmente utilizar dessa técnica para tratar os erros do nosso async/await sem usar o try/catch.

Tchau Try/Catch

Agora podemos dar tchau para o try/catch. Não me entenda mau, não quero eliminar o try/catch de todo o meu código em todos os meus projetos, estou apenas apresentando uma abordagem, onde podemos tratar os erros de uma chamada async/await sem usar o try/catch.

Para isso vamos criar uma função helper que irá englobar nossa promise. Vamos chamar essa função apenas de “to()”. Ela irá receber a promise a ser executada como parâmetro e sempre retornará um array de 2 posições, onde a primeira posição é o erro e a segunda posição o resultado.

Ela ficará dessa forma:

to

to

A função “to”, que você vai entender o motivo desse nome mais a frente, serve apenas para englobar a nossa promise. é uma função bem simples que você pode reutilizar sempre que necessário.

Agora vamos aplicar a função “to” em nosso exemplo inicial.

Async/Await sem try/catch

Async/Await sem try/catch

No exemplo o nome “to” começa a fazer mais sentido, deixando a leitura do código de forma clara, “await to doSomething”.
E caso tenha o erro, chamamos a console.log e em seguida retornando. Vale lembrar que geralmente teríamos apenas o “if(error) return;”

Esse é uma forma bem criativa de tratar essa situação. Discutivelmente pode ser algo que muitos acharão ótimo e outros acharão horrível, mas tudo é uma questão de preferencia de “code style” de cada um. Lembrando que se você trabalha com os hooks do React, você está acostumado com esse tipo de método que sempre retorna um array de duas posições. Tipo os callbacks que por convenção sempre recebem o erro no primeiro parâmetro e o resultado no segundo.

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨

Photo por Wil Stewart no Unsplash

]]> https://emersonbroga.com/capturando-os-erros-de-um-async-await-sem-try-catch/feed/ 3 REACT – Como utilizar o React Async https://emersonbroga.com/como-utilizar-o-react-async/ https://emersonbroga.com/como-utilizar-o-react-async/#comments Wed, 22 Jan 2020 12:00:51 +0000 http://emersonbroga.com/?p=1478 Olá, pessoal!

Hoje eu quero mostrar como deixar o seu componente em react mais limpo e mais legível usando o react-async.

Vou ensinar uma das formas de utilização da biblioteca react-async, que apresenta uma forma declarativa para resoluções de promises e requisição de dados.

Existem várias formas diferentes para a utilização da react-async e eu quero começar mostrando usando o useAsync que pelo próprio nome do método já da para perceber que se trata de um react hook.

Setup do projeto

Mais uma vez, para facilitar as coisas vamos usar o create-react-app. Para isso, use o comando:

“npx create-react-app example”

React Async - Criando o projeto

React Async – Criando o projeto

Aguarde a instalação e criação do projeto em sua máquina local. Apos concluído entre na pasta “example”

Fazendo requisição na API

Vamos mais uma vez usar a swapi.co e dessa vez, vamos fazer uma requisição no endpoint de filmes.

Abra o projeto em seu editor de texto preferido e dentro da pasta “src” crie uma pasta chamada “helpers” e dentro dessa pasta crie um helper chamado “api.js”.

React Async - Criando o helper api

React Async – Criando o helper api

Agora no arquivo “api.js” vamos começar definindo uma constante referente a URL da nossa api que nesse caso é a “https://swapi.co/api/”, vamos chamar a constante de “API_URL”.

React Async - Criando a url da api

React Async – Criando a url da api

Agora vamos criar uma arrow function chamada getMovie que recebe um objeto como parâmetro e dentro desse objeto a chave “movieId”, porém vamos fazer a desestruturação desse objeto, deixando a função mais legível.

Essa função por sua vez, vai retornar uma promise e dentro do callback da promise, vamos usar a “fetch” api para fazer a requisição, e depois de pegar a resposta, vamos converter os dados para JSON e resolver a promise, caso tenha algum erro, chamamos a função eject.

O resultado final ficará assim:

React Async – Criando função getMovie

React Async – Criando função getMovie

Instalando a React-Async

Agora precisamos de instalar em nosso projeto a biblioteca react-async. Para isso volte ao terminal e use o npm (ou yarn) para adicionar a biblioteca. Nesse caso vou usar o npm, com o seguinte comando “npm install –save react-async”.

Aguarde a instalação ser concluída.

React Async – Instalando ReactAsync

React Async – Instalando ReactAsync

Limpando o projeto e importando o useAsync()

Agora que temos a react-async instalada em nosso projeto, vamos abrir o arquivo “App.js” e importar o método “useAsync” da biblioteca react-async.

Vamos também importar o método “getMovie” do nosso helper “api”.

Feito isso, vamos dar uma limpada em nosso componente funcional App, e dentro dele vamos utilizar o useAsync.
Não se esqueça de remover o import do “logo.svg”, já que não é mais necessário.

Nesse momento o “App.js” deve estar assim:

React Async – useAsync

React Async – useAsync

Utilizando o useAsync

Vou explicar como funciona o useAsync. Se você ja utilizou algum react hook, você sabe que os hooks são apenas funções são executadas cada vez que o componente funcional é chamado e que eles sempre retornam uma estrutura de dados pre-definidas e que os dados são populados de acordo com as iterações e eventos que vão ocorrendo no projeto.

Dito isso, o hook useAsync recebe um objecto como parâmetro, nesse objeto se espera pelo menos a chave “promiseFn” que como o próprio nome indica, é a promise que será executada. Essa forma, deixa o hook useAsync bem flexível, pois você pode usar qualquer função ou biblioteca para fazer suas requisições, desde que ela retorne uma promise.

Agora vamos falar do retorno da função useAsync que é composta de um objeto com 3 chaves: “data”, “error”, “isPending”, e a gente pode desestruturar esse objeto e assim ter essas 3 chaves como variáveis disponíveis em nosso código.

Como os nomes das variáveis são bem claros, sabemos que o “isPending” será um booleano (true|false) informando que a requisição está pendente ou não. Sabemos que “error” será a variavel que irá conter o nosso erro caso ele ocorra, ou seja, caso a promise seja rejeitada (reject) e por fim o “data” que irá retornar de fato os dados da requisição.

Agora que ja expliquei tudo, faça a chamada à função “getMovie” usando o hook useAsync, seu código ficará assim:

React Async – useAsync

React Async – useAsync

Nesse momento você deve estar se perguntando sobre o movieId que é esperado em nossa função “getMovie”. A gente pode passar esse parâmetro juntamente com a nossa “promiseFn”.

Para deixar o código mais limpo, eu vou criar um objeto chamado “requestParams”, que irá conter as chaves “promiseFn” com a função “getMovie” e também a chave “movieId” onde eu vou passar o valor 2 (que eu sei que o id do filme “Empire Strikes Back).

Nesse ponto seu código ficará assim:

React Async – useAsync

React Async – useAsync

Agora precisamos utilizar as nossa 3 variáveis retornadas pela “useAsync”, o “data”, “error” e o “isPending”.

Vamos começar pelo “isPending”, caso ele seja verdadeiro, iremos retornar um JSX “h1” com a mensagem de “Loading…”.

Em seguida, vamos utilizar a “error” que caso tem alguma coisa, vamos retornar um JSX “h1” com a mensagem de erro.

E por fim o “data” que caso esteja populado, iremos exibir o título do filme, retornando um JSX h1 com o título do filme que está em “data.title”.

E pronto, seu código deve estar assim:

React Async – Código Final

React Async – Código Final

Rodando o projeto

Agora que você ja fez tudo, volte no terminal e execute o comando “npm start” e o seu browser irá abrir e você verá o resultado final, com uma requisição sendo feita à swapi.co e o nome do filme sendo exibido após a mensagem de loading =)

React Async – Projeto rodando

React Async – Projeto rodando

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, porque você não pode ficar de fora!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨
]]> https://emersonbroga.com/como-utilizar-o-react-async/feed/ 1 Como configurar Webpack para projeto React https://emersonbroga.com/como-configurar-webpack-para-projeto-react/ https://emersonbroga.com/como-configurar-webpack-para-projeto-react/#comments Wed, 15 Jan 2020 12:00:26 +0000 http://emersonbroga.com/?p=1496 Olá, pessoal!

Hoje eu quero mostrar pra vocês o passo-a-passo de como configurar o Webpack para um projeto React!

Muitas pessoas se assuntam quando a gente fala de Webpack, pois parece que vão ser inúmeras configurações complicadas e que parecem impossíveis de fazer.

Nesse tutorial eu vou explicar cada um dos passos que você configurar o Webpack.

O que é Webpack?

Webpack

Webpack

De acordo com a documentação:

Webpack is a static module bundler for modern JavaScript applications.

Que seria algo como um empacotador de módulos estáticos para aplicações modernas de javascript.

Ou seja, ele vai pegar o seu arquivo de entrada e a partir dele, vai buscar todas as dependências e ao final gerar um arquivo contendo tudo em um único pacote, que geralmente salvamos na pasta dist (de distribuition).

Criando a pasta do projeto

Para começar esse projeto vamos criar uma pasta, que nesse caso eu vou chamar de “webpack-for-react”.
Dentro dessa pasta, vamos começar criando nosso arquivo “package.json” com o comando “npm init -y”.

Criando a pasta do projeto

Criando a pasta do projeto

Agora vamos usar o npm para instalar nossas primeiras dependências, começando pelo próprio webpack e também o webpack-cli (cli significa command line interface) e vamos passar também a flag –save-dev.

O comando final é “npm install –save-dev webpack webpack-cli”

Instalando Webpack e Webpack-cli

Instalando Webpack e Webpack-cli

Instalando o BABEL

O Babel é uma biblioteca que basicamente converte o javascript moderno para javascript antigo aumentando as chances de que a sua aplicação compatível com os browsers antigos.

Para isso precisamos de instalar o babel usando o npm com o seguinte comando:

“npm install –save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react”

Agora que temos o Babel instalado, vamos criar um arquivo chamado “.babelrc” com o seguinte conteúdo.

.babelrc

.babelrc

Criando o webpack.config.js

Agora que temos o webpack instalado, vamos criar o arquivo de configurações “webpack.config.js”.

Nesse arquivo que a gente faz todas as configurações e customizações necessárias para o projeto.

Por enquanto vamos falar com o webpack para usar o Babel nos arquivos com extensão “.js” ou “.jsx”.

webpack.config.js

webpack.config.js

Criando a aplicação em react

Agora podemos começar a estruturar nossa aplicação React.

Vamos instalar o react e o react-dom usando o npm com o seguinte comando:

“npm install –save react react-dom”

Para organização, vou criar uma pasta chamada “src” e dentro dela vou criar um arquivo “index.js”

Nesse arquivo “index.js” irei primeiramente importar o “react” e em seguida o “react-dom”. Depois vou criar um component funcional chamado “App” que retorna um h1 com o texto “Emerson Broga”.

E por fim, vou informar ao react-dom que se existir no html uma div com id “root” para renderizar o nosso componente “App”.

O resultado final ficará assim:

index.js

index.js

Criando o index.html

Agora precisamos de criar o nosso “index.html” que será a SPA (single page application) do nosso projeto.

Vou criar apenas um html simples com a nossa div “root”. Para manter o projeto organizado, vou criar uma pasta “public” e colocar o “index.html” dentro dela.

index.html

index.html

Agora vou voltar no nosso “webpack.config.js” para informar a ele o que fazer com arquivos html.
Primeiramente vamos instalar o “html-webpack-plugin” e o “html-loader” com o seguinte comando:

“npm install –save-dev html-webpack-plugin html-loader”

Agora vamos voltar ao arquivo “webpack.config.js” e importar o “html-webpack-plugin” e configurá-lo.

O resultado final ficará assim:

html webpack plugin

html webpack plugin

Adicionamos mais uma regra dentro de “modules.rules” falando que no arquivos que terminarem com “.html” ele deve usar o “html-loader”.
Depois adicionamos o “HtmlWebPackPlugin” passando o template, que se encontra em “./public/index.html” e que o nome de destino (filename) será o “index.html”.

Nesse ponto, podemos também abrir o “package.json” e adicionar o nosso comando de build dentro da chave “scripts”:

“build”: “webpack –mode production”

Comando de Build

Comando de Build

Se você voltar ao terminal e executar o comando “npm build”, ele vai gerar um bundle para você na pasta “dist” com os arquivos “index.html” e o arquivo “main.js”.

index.html e main.js na pasta dist

index.html e main.js na pasta dist

Você pode abrir o “index.html” no browser e você vai ver o projeto rodando!

Repare que o “main.js” foi automaticamente adicionado no “index.html” =)

Configurando o Webpack Dev Server

Até agora você viu o que precisa fazer para configurar o seu projeto para produção, mas precisamos também de configurar o ambiente de desenvolvimento.

Vamos usar o seguinte comando npm para instalar o “webpack-dev-server”:

“npm install –save-dev webpack-dev-server”

Agora basta adicionar o comando ao nosso “package.json” dentro dos :

“start”: “webpack-dev-server –open –mode development”

webpack dev server

webpack dev server

Agora basta rodar o comando “npm run start” (ou apenas “npm start”) e você terá o browser aberto rodando o projeto.

Perceba que está incluso também o hot-reload, então se você fizer alteração nos arquivos e salvar, o browser irá recarregar suas alterações automaticamente. =)

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, por que você não pode ficar de fora!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨
]]> https://emersonbroga.com/como-configurar-webpack-para-projeto-react/feed/ 1 5 extensões VSCode para desenvolvedores JavaScript/Node/React em 2020 https://emersonbroga.com/5-extensoes-vscode-para-desenvolvedores-javascript-node-react-em-2020/ https://emersonbroga.com/5-extensoes-vscode-para-desenvolvedores-javascript-node-react-em-2020/#respond Wed, 08 Jan 2020 12:00:38 +0000 http://emersonbroga.com/?p=1518 Olá, pessoal!

Recentemente estava instalando meus programas no mac depois que ele voltou do conserto e ao instalar as extensões do VSCode e sempre aparece alguém perguntando quais extensões eu uso e hoje resolvi fazer um post pra deixar claro pra vocês quais uso atualmente (Janeiro/2020).

ESLint

ESLint by Dirk Baeumer

ESLint by Dirk Baeumer

ESLint do Dirk Baeumer é uma exetensão que irá checar se o seu código está escrito de acordo com as regras do seu arquivo .eslintrc.
Com esse plugin você irá ser “lembrado” de escrever um código seguindo os padrões definido por você ou seu time. Um bom estilo de código a se seguir em projetos JavaScript é o coding style do AirBnB.
Lembrando que você precisa ter a biblioteca eslint em seu projeto ou de forma global em sua máguina

Prettier – Code formatter

Prettier - Code formatter

Prettier – Code formatter

Prettier do Esben Petersen como o próprio nome ja diz é uma extensão que formata seu código. Bem similar ao ESLint ele também define como seu código será formatado e também formata o código pra você (quando o Format on Save tá habilitado). Para isso você precisa configurar o .prettierrc e ter biblioteca “prettier” instalada.

GitLens

GitLens

GitLens

GitLens do Eric Amodio é uma outra biblioteca que eu acho essencial quando se trabalha em equipe, pois ela mostra em qual commit cada linha foi alterada. É uma espécie de gitblame disponível em seu código em tempo real.

Import Cost

Import Cost

Import Cost

Import Cost do Wix é uma outra que eu acho muito interessante, pois quando você faz um import ou require ele te mostra o tamanho da biblioteca que você está importando e caso ela seja muito grande irá aparecer em vermelho, te lembrando que é uma biblioteca que pode pesar o seu bundle.

Live Server

Live Server

Live Server

Live Server do Ritwick Dey é uma mão na roda. Vamos supor que você esteja testando alguma coisa rapidinha em html/css/js estático e não quer criar um server pra ver o projeto rodando, o LiveServer cria um server pra você e traz de bonus um “live reload” que recarrega a página automaticamente quando você altera/salva o arquivo.

Bonus

Gostaria de falar também sobre algumas outras extensões que eu uso.

Filesize mostra o tamanho do arquivo atual

Filesize mostra o tamanho do arquivo atual

styled-components deixa a syntax dos styled components de forma mais legível.

styled-components

styled-components deixa a syntax dos styled components de forma mais legível.

vscode-icons coloca ícones nos arquivos de acordo com os seus tipos, facilitando a visualização.

vscode-icons

vscode-icons coloca ícones nos arquivos de acordo com os seus tipos, facilitando a visualização.

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, por que você não pode ficar de fora!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨
]]> https://emersonbroga.com/5-extensoes-vscode-para-desenvolvedores-javascript-node-react-em-2020/feed/ 0 TOP 10 – Retrospectiva posts 2019! https://emersonbroga.com/top-10-retrospectiva-posts-2019/ https://emersonbroga.com/top-10-retrospectiva-posts-2019/#respond Tue, 31 Dec 2019 13:10:53 +0000 http://emersonbroga.com/?p=1533 Olá, pessoal!

Chegamos ao final de 2019 e hoje quero fazer uma retrospectiva e mostrar quais foram os posts que vocês mais curtiram/visitaram durante todo o ano. Se você não quiser perder nenhum post de 2020, faça parte da nossa lista de desenvolvedores.

Vale lembrar mais uma vez que se você ainda não faz parte da nossa lista de desenvolvedores, não perca mais tempo a hora é agora! 2020 já está ai e você não pode ficar parado no tempo.

Esse ano de 2019 tivemos 20 posts publicados no blog e 13 videos no youtube, números que pretendo no mínimo dobrar em 2020. Minha idéia é compartilhar ao máximo do que aprendi em anos de profissão e ajudar a galera com dicas, tutoriais e até cursos. Esse blog nasceu em 2010 então ta na hora de tomar proporções maiores.

Agora vamos lá ao nosso top 10!

10 – Top 5 Ferramentas Grátis de design para programadores

Top 5 Ferramentas Grátis de design para programadores

Top 5 Ferramentas Grátis de design para programadores

Vamos começar esse top 10 com um top 5! em 1º de Janeiro de 2019, eu comecei o ano mostrando algumas ferramentas de design gratuitas, que são uma mão na roda para os programadores!

Se você quer conhecer essas ferramentas e agilizar sua vida, leia mais aqui.

9 – Entendendo o setTimeout e o setInterval do Javascript

Entendendo o setTimeout e o setInterval do Javascript

Entendendo o setTimeout e o setInterval do Javascript

Eu percebi que muita gente não sabia como usar as funções de tempo no JavaScript, então eu resolvi fazer um post que explicasse claramente quando usar o setTimeout e quando usar o setInterval, mostrando as diferentes formas de chamar a função e passar o parâmetros.
Leia o post completo aprenda o setTimeout e o setInterval.

8 – Criando um botão de Copiar (CTRL + C) com JavaScript

CTRL + C / CTRL + V com JavaScript

CTRL + C / CTRL + V com JavaScript

Com um título auto explicativo, nesse post eu ensinei como que você pode usando JavaScript fazer um botão em seu site que copia os conteúdo para o “clipboard” deixando pronto para colar. O famoso CTRL + C / CTRL V. Corre lá e da uma olhada!

7 – Pegar Coordenadas Geográficas à partir de um endereço com PHP

Pegar Coordenadas Geográficas à partir de um endereço com PHP

Pegar Coordenadas Geográficas à partir de um endereço com PHP

PHP?!? Você deve estar se perguntando, mas ele fala de só de JavaScript! Na verdade eu trabalhei por muitos anos com PHP e esse post, datado de maio de 2012 é um post que sempre trouxe muitas visitas ao site, é uma dúvida muito recorrente da galera.
Dá uma olhada lá e não fique perdido geograficamente.

6 – Como usar o Git, comandos básicos para iniciantes

Como usar o Git, comandos básicos para iniciantes

Como usar o Git, comandos básicos para iniciantes

Muita gente não versiona os projetos, muita gente nem sabe o que é versionar projetos, então criei esse post que também acabou virando um vídeo no canal ensinando os comandos básicos ou comandos mais utilizados no git.
Leia o tutoria e veja o video, aprenda git e use em seus projetos.

5 – jQuery Validate – Validando Formulários

Validando Formulários com jQuery Validate

Validando Formulários com jQuery Validate

jQuery em pleno 2020? Sim, ainda tem muita gente que utiliza o jQuery! E esse post datado de Maio de 2010 já chegou a ser o terceiro resultado do google, perdendo apenas para o prórpio jQuery, o site do jQueryValidate e em seguida meu post.
Se você quer aprender como validar seus formulários, leia o post aqui.

4 – Pegar Coordenadas Geográficas à partir de um endereço usando Javascript (2019)

Pegar coordenadas a partir de um endereço com JS

Pegar coordenadas a partir de um endereço com JS

Mais um post relacionado a mapas! Dessa vez dedicado ao front-end, usando a api do google maps para pegar as coordenadas geográficas à partir de um endereço.

Leia mais sobre google maps e coordenadas geográficas aqui.

3 – Como usar Promises no Javascript

Como usar Promises no JavaScript

Como usar Promises no JavaScript

A medalha de bronze para os posts mais visitados de 2019, vai pra esse post que também virou um video no canal, onde eu ensino como usar Promises no JavaScript!
Se você ainda não sabe como organizar seu callback hell, aprenda promises agora mesmo.

2 – Manipulando DOM com textContent, innerText e innerHTML

Manipulando DOM com textContent, innerText e innerHTML

Manipulando DOM com textContent, innerText e innerHTML

Em segundo lugar um post que eu fiz sem muita pretensão, pois eu achava que isso era algo que a galera já dominava. Escrevi esse post na correria, mas o resultado foi muito bom e a galera gostou bastante.
Se você ainda não sabe manipular o dom com essas três funções, corre lá.

Criando uma aplicação com NodeJS, usando Express, Mongo, Docker e Babel

Criando uma aplicação com NodeJS, usando Express, Mongo, Docker e Babel

Criando uma aplicação com NodeJS, usando Express, Mongo, Docker e Babel

Esse post foi massa mesmo! Não é atoa que ele é o mais visitado do ano! Nele eu expliquei passo a passo como criar uma aplicação com nodejs, usando express, mongo, docker e babel.
Leia mais sobre o setup completo para seu desenvolvimento node e mongo.

Obrigado pela leitura, compartilhe!

Um ótimo 2020 a todos nós! Espero poder compartilhar cada vez mais com vocês e transformar você em um programador melhor!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!

  1. Faça parte da nossa lista de Desenvolvedores ?
  2. Se inscreva em nosso canal do Youtube ?
  3. Curta nossa página no Facebook ?
  4. Não perca as atualizações no Twitter ?
  5. Veja as dicas no Instagram ?
  6. Siga nossos repositórios no Github ⌨

Photo by Pineapple Supply Co. on Unsplash

]]> https://emersonbroga.com/top-10-retrospectiva-posts-2019/feed/ 0