Edição #01 da Newsletter

Edição #01 da Newsletter!

Duas coisas boas lançando nesse final de semana: Stranger Things 4 e a primeira edição da minha newsletter!

O que me fez rir essa semana

O desespero dos recrutadores parece não encontrar limites. E a Janaina que fez um Pull Request no repositório do Laravel (maior framework php) para anunciar vagas? E claro, ideia original brasileira!

Não chame fetch no useEffect?

Um dos grandes burburinhos da semana no front é a nova documentação beta do React que (finalmente) está para sair. Principalmente agora que a nova seção do useEffect está sendo finalizada pelo Dan Abramov.

Mas nada disso chamou mais a atenção do que ele sugerir que praticamente 100% de nós mortais fazemos errado: chamar o fetch() dentro do useEffect().

Mas vamos lá, para não correr o perigo de ser sensacionalista, o que na verdade ele quis dizer não foi nada muito diferente do que o hype frontend (ou #bolhaDev, como preferir) parece apontar ultimamente: ou você usa algum framework SSR (como Next ou Remix), ou usa uma biblioteca como React Query, SWR ou RTK Query.

Amigos amigos, negócios a parte

O ditado é verdadeiro especialmente quando você tem muito dinheiro como a Vercel (empresa por trás do NextJS) que já levantou mais de 1,5 bilhões de reais de investimento. E torna-se mais verdade ainda quando a turma do React Router (Ryan Florence e Michael Jackson) é quem está nos holofotes com o recente lançamento do framework Remix.

E eu digo isso porque na segunda-feira o NextJS anunciou sua maior atualização até agora, Layouts RFC, e logo foi acusada de roubar "pegar emprestado” a ideia de nested routes do Remix. O Ryan Florence fez um tweet com boa dose de ódio acusando a Vercel de roubar sua ideia e não dar créditos. No fim, ele apagou o tweet (infelizmente eu não printei, sorry), a Vercel deu os devidos créditos e parece que está tudo bem (apesar de todos nós termos sérias dúvidas quanto a isso).

Mas de fato, trabalhar com diferentes layouts e não poder colocar código relacionado dentro da pasta pages no NextJS não parecia ser a melhor forma de fazer as coisas. Agora, teremos uma nova pasta, app , que vai fazer do roteamento algo um pouco mais agradável para se trabalhar. Além de vários outros quick-wins de performance.

Que momento para o Frontend!

O Google I/O aconteceu nesse mês. E pra mim o mais empolgante foi ver o "que há de novo na web". Desde que os diferentes "fabricantes" de navegadores começaram a trabalhar em conjunto para deixar o desenvolvimento web um pouco menos "burocrático" e desde que matamos de vez o Internet Explorer várias novidades interessantes surgiram - e compatíveis em todos os browsers:

Por exemplo,

• accent-color para (finalmente) estilizarmos checkboxes e radios;

• o elemento <dialog>

• image lazy loading ;

• Propriedade aspect-ratio do CSS

• structuredClone() para nunca mais precisar usar JSON.stringify() para fazer cópias profundas de objetos.

… e tem muito mais coisa evoluindo no mundo web - e de forma bastante acelerada. Graças a uma iniciativa dos maiores browsers (chrome, firefox, edge, safari e outros), surgiu um projeto chamado Interop 2022, que visa fazer com que as novidades cheguem (de fato) a todos os browsers de forma similar.

Atualizações e Novidades

• Anota aí, que em alguns dias, em junho já será vigente o ES2022, as novas especificações do javascript. Ok, eu te ajudo com as principais novidades:

  • Array.at() . Até então a gente consegue acessar itens do array do começo ao fim, por exemplo array[2] acessa o terceiro item do array. Com array at, você também pode usar números negativos: array.at(-1) acessa o último item do array.

  • top level await . Até que enfim a gente não precisa mais criar aquela inútil função async só para eu poder usar um await

  • Public e Private Class Fields . Com um #, agora podemos dizer que uma propriedade é privada dentro de uma classe. E também não precisamos mais declarar propriedades dentro do construtor.

• Google atualizou seu algoritmo de busca. Isso deve endereçar a relevância dos resultados das buscas. E tem sido um tema cada vez mais importante, especialmente depois que esse artigo foi lançado. De fato, a impressão é que os primeiros resultados são sempre "feitos por robôs".

• Eslint v.8.16

• Redux v.4.2 - essa atualização foi em abril, mas praticamente "insiste" que você use o Redux Toolkit, que é uma forma mais moderna de encarar o assustador Redux.

• Node 18.2

• Playwright agora pode testar componentes React, Vue ou Svelte. Playwright é basicamente o concorrente do Cypress da Microsoft para testes e2e. E agora também será concorrente da Testing Library.

Dicas, Bibliotecas e Tutoriais

Aplicações Web 101 - um bom resumo das diferentes formas de construir a web.

A verdade sobre pixels e acessibilidade - O Josh Comeau é fera em frontend e CSS e dá uma aula de acessibilidade com pixels, rems e ems.

Guia para lidar com cores na web - HSL, RGB, RGBA, HWB e amigos.