Investigar uma stack e priorizar atualizações

Um radar de tecnologia só serve quando cada item vem com rótulo de ação, e são três rótulos. Alerta se resolve nesta semana, atualização espera a janela de manutenção e novo se avalia no próximo projeto. Sem esse rótulo a lista vira notícia, e ninguém faz nada com notícia.

Alerta pede ação nesta semana: aplique a correção ou congele a versão atual até conseguir aplicar. Atualização espera a janela de manutenção, a hora marcada em que o site pode oscilar sem prejudicar cliente. Novo você avalia no próximo projeto, porque mexer no que já funciona custa e não devolve nada.

Um portal de contabilidade parado há um ano separa a fila em três num quarto de hora. O React na faixa da falha CVE-2025-55182 e o gerador de balancete que recebe arquivo do cliente entram em alerta, porque ali existe porta aberta. O mapa fica onde está, e a versão em beta sugerida pelo agente é recusada.

Dois itens mudam a base do próximo projeto, e só eles valem a conversa. O Vite 8 juntou o empacotador numa peça só, escrita em Rust, e um build de 19 mil módulos caiu de 40,10 segundos para 1,61 segundo. Build é o momento em que o seu código vira o site que o visitante recebe.

Esse ganho vira dinheiro porque cada espera de build é gente parada, e num projeto pequeno a melhora fica entre duas e cinco vezes. O Astro chegou à linha 7, e as coleções de conteúdo ao vivo e a API de fontes fazem dele a escolha para relatório estático e microsite.

Os demais itens novos valem uma linha cada. O MapLibre v6 exige o desenho mais moderno do navegador, então quem depende do formato antigo congela na v5. O Lucide chegou à 1.0, a primeira versão estável do conjunto de ícones usado aqui, e é o que você fixa no projeto novo.

No relatório em PDF, dois itens pedem atenção. O Typst 0.15 gera um arquivo que atende às normas de acessibilidade e de arquivamento ao mesmo tempo. E avisa com erro quando o documento não está conforme, em vez de entregar um PDF errado em silêncio.

O WeasyPrint 69 corrige a falha CVE-2026-49452 e é obrigatório para quem gera PDF a partir de arquivo que veio de fora. Esse é o caso da contabilidade, da clínica e de qualquer sistema que aceite envio do cliente.

No estilo, a função contrast-color() escolhe entre preto e branco pelo maior contraste que o navegador calcula. Ela poupa trabalho, mas não substitui a medição do contraste do texto, e navegador antigo simplesmente ignora a declaração. Escreva a cor de reserva junto.

Peça o arquivo de design tokens no formato aberto que o mercado adotou, ainda que ele seja rascunho, e cite a data em que você o leu. Token é o valor de cor ou de tipografia guardado com nome. Formato aberto evita que a sua identidade visual fique presa a uma ferramenta que você talvez troque.

O alvo de acessibilidade adotado neste curso é o WCAG 2.2 no nível AA, a norma que define o que uma pessoa com deficiência consegue usar num site. A obrigação legal varia por país e por setor, então trate esse nível como cláusula de contrato com quem constrói a sua página.

A camada semântica virou pré-requisito de IA. É o lugar onde a definição de cada métrica fica escrita uma vez só, em vez de dentro de cada tela. Sem ela, duas telas respondem números diferentes para a mesma pergunta, e um assistente de IA repete a divergência para quem perguntar.

Já a esteira de build segue a base que você escolheu, e não o contrário. O Vite serve Astro, SvelteKit e projeto novo. O Turbopack já é o padrão do Next.js. Quem mantém uma configuração antiga e complicada fica onde está, porque trocar de esteira no meio do projeto não devolve nada ao cliente.

Qualidade entra na mesma esteira, e é ela que impede o código escrito por IA de apodrecer sem ninguém ver. O Biome confere o estilo do código e aponta erro antes de subir. O Storybook guarda cada componente isolado num catálogo, o que deixa a mudança visual aparecer antes de chegar ao site no ar.

Os testes rodam sozinhos a cada envio de código. O Vitest confere as peças pequenas. O Playwright abre o site de verdade e repete o caminho do visitante. O axe-core vira portão de acessibilidade no CI, a esteira automática que roda a cada envio e barra o que não passa.

Esse portão pega parte dos problemas, e dois números circulam por aí. Um fala em 57%, contando volume de itens encontrados. O outro fica entre 30% e 40%, contando critérios da norma. Eles medem coisas diferentes, então somar um ao outro é o erro mais comum em relatório de conformidade.

O resto continua sendo revisão humana, com teclado e com leitor de tela. Vale saber que o mesmo axe-core é o motor do relatório de acessibilidade do navegador, o que explica ferramentas aparentemente independentes concordarem tanto entre si.

Abra o package.json, a lista de pacotes do projeto, e marque cada linha com um dos três rótulos antes de aprovar qualquer atualização. Aplique nesta semana o que ficou em alerta e agende o resto para a janela de manutenção. Os itens novos vão para um arquivo de decisões. Deu certo quando nenhuma linha ficou sem rótulo.

Descubra a tecnologia de qualquer site e escolha a sua

O radar diz o que adotar e o que adiar, e ler o painel de rede de um site mostra o que ele prova sobre a própria tecnologia.

A tecnologia de um site aparece em quatro lugares do painel de rede do navegador, e ler esses sinais evita contratar a infraestrutura errada. Stack é a lista de tecnologias de um site, como a lista de materiais de uma obra.

Ler a stack de quem já resolveu o mesmo problema custa quinze minutos e poupa uma reunião inteira de suposição. Com ela na mão você separa o que viu do que deduziu, escolhe a família certa e fecha as sete decisões antes de pedir a primeira tela.

Só conta como prova um sinal técnico direto: cabeçalho de resposta, caminho de arquivo, marca deixada no HTML ou cookie. Cabeçalho é o recado que o servidor manda junto com a página, invisível para quem visita. Tudo o mais é dedução, e entra no laudo marcado como tal.

Esses sinais são confiáveis porque cada camada precisa se identificar para funcionar, e escondê-la quebraria o próprio site. Os cabeçalhos entregam o servidor e a rede que distribui a página. Os caminhos carregam a marca de quem os gerou, como /_next/ para Next.js, e os cookies denunciam o serviço de publicação.

A tecla F12 abre o painel. Recarregue com o cache desligado, ou seja, sem a cópia que o navegador guardou da visita anterior, e leia o peso total no rodapé. Esse peso é o teto da sua página: pesar o dobro da referência já é sair perdendo antes de qualquer desenho.

Uma vaga de emprego publicada por uma empresa grande prova que uma equipe usa determinada tecnologia, e para de provar aí. Ela não diz em qual tela, nem se a decisão continua valendo, nem se aquilo serve ao seu tamanho de negócio.

Amazon, Mercado Livre, Apple e Duolingo ocupam pontos diferentes entre montar a tela no servidor e montar no navegador. O ponto muda de tela para tela dentro da mesma empresa. A Apple divide o próprio site entre aplicativo de música e páginas de marca em HTML com pouco JavaScript.

A direção de 2026 empurra as quatro para o mesmo lado, com menos código no navegador e mais decisão pronta no servidor. O que se transfere para você é esse princípio, porque ele continua verdadeiro na sua escala. A infraestrutura delas fica lá.

Um conjunto de 26 sites de alto padrão se divide em três famílias, e quem vai mexer no site daqui a seis meses decide qual é a sua. O construtor de sites, Webflow ou Framer, em cerca de 11 deles, serve a quem entrega o site e vai embora, com o cliente publicando sozinho depois.

O código próprio com o texto guardado à parte, em cerca de oito, serve a quem tem programador em casa. O artesanal, HTML e CSS escritos à mão, em cerca de quatro, serve ao site mantido por uma pessoa só. O construtor cobra caro na saída, porque deixá-lo exige refazer o site inteiro.

Ler a família antes de contratar economiza reunião. A imobiliária que ia pagar uma agência para copiar o site de um concorrente abriu o painel de rede e viu um construtor pronto. Não havia código a copiar, e sim uma assinatura a contratar.

Sete decisões cobrem o começo de qualquer projeto, uma por camada, e elas cabem num parágrafo. Linguagem: TypeScript, que avisa o erro antes de o site subir. É ele que pega a besteira que o agente, o assistente de IA que escreve código, produz com toda a confiança do mundo.

Framework: React com Next.js para aplicação e Astro para conteúdo. Build: ferramenta moderna, Vite ou Turbopack, no lugar das antigas. Renderização: página pronta por padrão, montada na hora só para o dado que precisa estar fresco, como saldo e estoque.

Estilo: aparência resolvida no build, sem cálculo de estilo dentro do navegador, que pesa a página. Estado: a cópia do dado do servidor separada do estado que só existe na tela.

A sétima decisão é a medição, e ela tem regra escrita. As três medidas de página valem sobre visitas reais, no 75º percentil, com celular e computador contados em separado. Pelo menos 75 de cada 100 visitas válidas do segmento precisam atingir o limiar.

O limiar de bom é 2,5 segundos ou menos para a maior pintura, que é o tempo até o maior elemento da tela aparecer. São 200 milissegundos ou menos para a resposta ao toque e 0,1 ou menos de deslocamento de layout, o pulo do conteúdo que faz a pessoa clicar errado.

Repare no operador "ou menos", porque escrever "menor que" exclui a página que ficou exatamente no limiar. A janela de 28 dias que aparece em toda conversa pertence ao relatório do Search Console, e colá-la na definição do limiar é erro de atribuição.

Dez perguntas de triagem fecham a stack numa folha, e a matriz abaixo cruza 12 cenários com a stack recomendada. Aparecer no Google por mérito pede Next.js ou Astro, porque o robô de busca precisa receber a página já escrita, e não montá-la sozinho.

Poucos elementos ricos pedem desenho em SVG; milhares de redesenhos por segundo pedem Canvas. Editor com conectores pede ferramenta própria de diagrama, e gráfico que muda ao vivo começa no ECharts. Cálculo pesado na tela é WebAssembly, que roda perto da velocidade de um programa instalado.

Pouco código de cola é Zustand, e auditoria de cada mudança é Redux Toolkit. Orçamento de desempenho e medição entram já no primeiro sprint, porque produto visual sem esse controle piora em silêncio e ninguém percebe até o cliente reclamar.

Escreva as sete decisões, linguagem, framework, build, renderização, estilo, estado e medição, numa folha só, uma linha cada, para colar no início de todo pedido ao agente. Junte a linha da matriz do seu cenário antes de pedir a primeira tela, e marque no laudo cada campo como visto ou deduzido.

Guia prático: vídeo, gravação de tela e transcrição no radar de quem faz frontend

O curso de edição de vídeo estudado em 07/10/2026 mostra que a edição inteira pode ser uma página web: um script escreve HTML com uma timeline de animação, e uma ferramenta abre essa página no navegador e grava quadro a quadro. Quem sabe fazer página já sabe metade do trabalho. Quatro ferramentas aparecem no estudo:

Os números do material: 85 segundos de fala transcritos em 3 segundos; gravação de tela em 1600 por 1000 com escala 2 e 30 quadros por segundo; e uma dica que vale para demo de produto. Gravar a rolagem de uma página pesada dá pulos quando a máquina está ocupada; o print da página inteira em alta resolução, com a rolagem animada depois, sai liso.

O material também mostra o limite. Os scripts de controle de memória são de Mac, o teste completo não rodou no Windows e o processo pede 30 GB livres em disco. Ferramenta nova entra no radar como as outras do capítulo: investigada, testada num caso pequeno e só então adotada.

Aplicar os recursos ao projeto