segunda-feira, 10 de novembro de 2025

ESLint

O ESLint é aquele colega chato que reclama de tudo, mas que no fundo só quer que o seu código seja perfeito.

CDN

Entendendo de verdade como a internet entrega conteúdo em milissegundos!

DOM e Virtual DOM

Toda página web, por trás de cada clique, botão e animação, é sustentada por uma estrutura invisível L uma árvore.

Essa árvore é o DOM, e sua versão otimizada é o Virtual DOM.

Mas afinal:
👉 O que é exatamente essa “árvore”?
👉 Por que ela existe?
👉 Como React, Vue e outros frameworks lidam com ela?
👉 E o que realmente acontece dentro do navegador quando você altera algo na tela?

Prepare-se: este post vai abrir o DOM por dentro, com profundidade e clareza.

A mágica do LIS (Longest Increasing Subsequence) - Como o framework “descobre” o que pode reaproveitar

Imagine que você tem uma lista de elementos na tela, por exemplo, uma lista de amigos, produtos ou tarefas.

Você muda a ordem desses itens, e... o navegador atualiza tudo em milissegundos.
Mas já se perguntou como o framework sabe o que realmente mudou?

💡 É aí que entra o algoritmo de diffing, e dentro dele, uma joia da computação chamada LIS (Longest Increasing Subsequence).

Entendendo o algoritmo de Diffing

“Diffing” vem de diff, que significa “diferença”.
É o processo de comparar duas versões de algo para descobrir o que mudou.

Nos frameworks modernos como React e Vue, esse “algo” é o Virtual DOM, uma cópia leve do DOM real, guardada na memória.

Como o processo funciona:

  1. O estado muda, por exemplo, um contador vai de 1 para 2.

  2. O framework cria uma nova versão do Virtual DOM com esse novo valor.

  3. Ele compara (faz o diffing) entre o novo e o antigo Virtual DOM.

  4. Descobre o que mudou, ou seja, só o número 1 → 2.

  5. Atualiza apenas esse pedacinho no DOM real, sem recarregar tudo.

Você não precisa mexer direto no DOM.
O framework faz isso automaticamente, de forma rápida e eficiente, atualizando só o que realmente mudou.

sexta-feira, 7 de novembro de 2025

SSR - A Arte (e a Engenharia) de renderizar no servidor

Imagine que você entra em https://minhaloja.com/produtos e, em menos de um segundo, a página inteira já aparece renderizada, lista de produtos, imagens, preços... tudo visível, mesmo que o JavaScript ainda nem tenha terminado de carregar.

✨ Isso é SSR, Server-Side Rendering em ação.

Mas o que realmente acontece nos bastidores?
Como o servidor consegue "montar" uma interface antes mesmo do navegador?
E por que isso muda completamente SEO, performance e arquitetura de uma aplicação moderna?

Neste artigo, vamos mergulhar fundo:
➡️ Entender como o SSR funciona internamente;
➡️ Comparar React (Next.js) e Vue (Nuxt);
➡️ Explorar hidratação, caching, edge runtimes e arquitetura moderna.

Tudo isso de forma técnica, acessível e visual

O que é o Apache Airflow

Se você é dev frontend (como eu) e já ouviu alguém do backend ou de dados falar “isso aqui roda no Airflow”, e ficou tipo:

“Air o quê???”

Calma. Vamos entender do zero!!

O que é o Apache Airflow

O Airflow é uma ferramenta que serve pra automatizar tarefas que precisam acontecer em uma certa ordem, em certos horários, com controle, logs e alertas.

Pensa nele como um gerente de tarefas automáticas.
Ele não é backend, não é API, não é banco, é quem orquestra o que precisa acontecer, quando e como.