bundlers Português 2024

Bundlers

Em resumo um bundler é uma ferramenta que permite a você escrever código modular e depois empacotá-lo em um único arquivo para ser entregue ao navegador.

Isso é útil porque em projetos grandes você não tem um único index.js e fim, você tem dezenas de components, bibliotecas e etc.

O bundler vai pegar todos esses arquivos, resolver as dependências entre eles e gerar um único arquivo que você pode incluir no seu HTML. Pelo menos era assim que funcionava antigamente.

Os bundlers mais populares que a gente tem são o Webpack, Parcel e Rollup. O Webpack é usado pelo NextJS e Create React App, o Parcel é mais simples e o Rollup é mais performático e é usado pelo Vite em conjunco com o esbuild.

Configurando o seu bundler você também consegue fazer coisas como minificar o código, otimizar imagens, resolver imports de CSS e etc. Por isso que a gente pode importar um arquivo de imagem no NextJS e ele vai funcionar, o Webpack vai resolver isso pra gente.

Eu falei “pelo menos era assim que funcionava antigamente” porque agora a gente não precisa mais colocar tudo em um só arquivo, a gente pode usar ESModules e manter o código modular mesmo sem um bundler.

Mesmo com ESModules a gente ainda precisa de um bundler para fazer coisas como minificar o código, resolver imports de coisas que não são suportadas pelo navegador (como CSS), fazer tree shaking, lazy loading e common chunk splitting.

tree shaking = remover código que não é usado
lazy loading = carregar o código só quando ele for necessário
common chunk splitting = separar o código que é comum entre várias páginas em um arquivo separado para ter um cache melhor

Hoje em dia tree shaking é um dos pontos mais importantes, já que usamos muitas dependências e muitas vezes elas exportam mais do que a gente precisa.

Dá uma olhada no que tem na documentação do ESBUILD sobre tree shaking e code splitting para entender melhor com os gráficos deles sobre como tudo isso funciona:

https://github.com/evanw/esbuild/blob/main/docs/architecture.md#tree-shaking https://github.com/evanw/esbuild/blob/main/docs/architecture.md#code-splitting

Aqui você encontra um texto do Vite sobre usar bundlers hoje em dia: https://vitejs.dev/guide/why.html#why-bundle-for-production

E aqui um texto sobre bundlers no geral e prós e contras de cada: https://snipcart.com/blog/javascript-module-bundler

css custom properties for easy themes Português 2024

Propriedades CSS para temas fáceis de fazer e usar

CSS custom properties, ou variáveis CSS, são uma maneira de definir valores que podem ser reutilizados em um documento CSS. Elas são definidas usando a notação --nome-da-variavel e podem ser usadas em qualquer lugar em que você usaria um valor normal. Além disso, elas podem ser definidas em diferentes escopos, alteradas dinamicamente com JavaScript e como CSS é declarativo trocar o tema de um site é rápido e fácil.

:root {
  --cor-primaria: #007bff; /* azul */
  --cor-secundaria: #6c757d; /* cinza */
}

:root.vampiresco {
  --cor-primaria: #ff0000; /* vermelho */
  --cor-secundaria: #000000; /* preto */
}

Dá para trocar o tema de um site com um botão e um pouco de CSS:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button onclick="document.documentElement.classList.toggle('vampiresco')">
      Mudar tema
    </button>
  </body>
</html>

body {
  background-color: var(--cor-secundaria);
  color: var(--cor-primaria);
}

Sem depender de JavaScript para trocar os valores das variáveis :)

Outras ideias:

Adicionar um atributo no html para trocar o tema baseado em um cookie ou preferência do usuário para evitar o “flash” de conteúdo não estilizado.
Usar variáveis CSS para deixar que o usuário escolha as cores do tema.
Usar variáveis CSS para definir tamanhos de fontes, espaçamentos e outras propriedades que podem ser alteradas facilmente.
Usar variáveis CSS com valores hsl para deixar seus estilos com Tailwind mais consistentes.
Aproveitar o seletor :has para mudar o tema com base no estado de um input[type="checkbox"] ou input[type="radio"] — sem precisar de JavaScript.

Enfim, muitas possibilidades! 🎨

ruby html element Português 2024

HTML RUBY

O elemento ruby é usado para representar a anotação de ruby, que é uma forma de anotação de texto em scripts asiáticos, como chinês ou japonês, para mostrar a pronúncia de um caractere ou para fornecer uma anotação curta.

Eu já conhecia o elemento <ruby>, mas nunca prestei muita atenção nele. Aprendi que ele é usado em conjunto com os elementos <rt> e <rp>. O elemento <rt> é usado para fornecer a pronúncia do caractere, enquanto o elemento <rp> é usado para fornecer uma alternativa de exibição para navegadores que não suportam a anotação de ruby.

Você usa assim:

<ruby> こんにちは！ <rt>Olá</rt> </ruby>

e a exibição fica assim:

こんにちは！ Olá

skip to content Português 2024

“Skip to content” ou “Pular para o conteúdo” é um link que permite que usuários pulem diretamente para o conteúdo principal de uma página web. Essa é uma daquelas coisas que a maioria de nós nem percebe, mas fazem bastante diferença para quem precisa.

Para adicionar um desses no seu site você precisa de pouca coisa. Primeiro, adicione um link no topo da sua página com o texto “Skip to content” e um id que aponte para o conteúdo principal da página. Algo assim:

<a href="#main-content" class="skip-to-content">Skip to content</a>

<main id="main-content">
  <!-- Conteúdo principal da página -->
</main>

Agora você precisa de um pouco de CSS para esconder o link até que ele seja focado. Isso é importante para não poluir a sua interface, lembre se de não usar display: none ou visibility: hidden para isso, pois essas propriedades vão fazer com que o link não seja acessível para leitores de tela.

.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 10px;
  z-index: 1000;
}

.skip-to-content:focus {
  top: 0;
}

E pronto! Agora você tem um link “Skip to content” no seu site. Quando o usuário focar nele (usando a tecla Tab), ele vai pular direto para o conteúdo principal da página.

tsup Português 2024

TSUP

Agora que eu já falei sobre bundlers no geral eu acho legal falar do TSUP, que é uma ferramenta de bundling bem simplista.

O TSUP é uma abstração em cima do esbuild, que é um bundler que tem um tempo de build bem rápido. Ele traz uma configuração bem simples e permite que você gere como output tanto arquivos Javascript usando ESModules (import e export) quanto arquivos CommonJS (require e module.exports) para serem usados em projetos que ainda não suportam ESModules (que são muitos quando a gente fala de backend com Javascript, já que o NodeJS só começou a suportar ESModules depois de se tornar mais popular).

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  entryPoints: ['src/index.ts'],
  format: ['cjs', 'esm'],
  outDir: 'dist',
});

Com essa configuração o TSUP vai pegar o arquivo src/index.ts e gerar dois arquivos na pasta dist: um com o código CommonJS e outro com o código ESModules.

Ele vai resolver as dependências do seu código e gerar um arquivo só com o que você precisa, sem nada a mais.

Eu usei ele nessa demo do fastify rodando na vercel: fastify-typescript-vercel-demo

Nesse mini projeto de websockets que não funciona como deveria: tiny-chat

Nessa biblioteca para adicionar coisas a mais no markdown do meu blogzinho: dvl-md

TSUP é show para libs e códigos backend TypeScript, mas para projetos frontend eu ainda prefiro o Vite com o esbuild.