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 de segurança pede triagem imediata: confira os pacotes instalados, a exposição do projeto e a orientação do comunicado oficial. Aplique a correção indicada. Se isso não for possível de imediato, use apenas uma mitigação documentada para aquela falha ou suspenda o recurso exposto. Congelar uma versão vulnerável mantém a vulnerabilidade.

Atualizações sem risco urgente podem entrar numa janela de manutenção. Uma ferramenta nova merece avaliação antes da adoção. Num portal de contabilidade, por exemplo, uma falha em pacotes de React Server Components só entra como incidente confirmado após verificar a versão instalada e o uso desses componentes no servidor; o nome React, sozinho, não comprova exposição.

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.

Use como alvo de acessibilidade 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.

Duas ferramentas gratuitas fazem o levantamento

O painel de rede do navegador mostra o que a página baixa, e desde 27/07/2026 o Lighthouse, a auditoria que já vem no Chrome, tem uma verificação que lista os recursos da web que a página usa e se todos os navegadores atuais os aceitam. As duas leituras viram o radar do capítulo com os três rótulos.

Aplicar os recursos ao projeto