Tag
O mais recente
Há uma linha no CSS deste site que resume o que mudou no CSS da última década: --cor-tag: oklch(0.45 0.13 var(--tom-tag, 144)); Uma propriedade personalizada a servir de argumento a uma função de cor. Não é um valor com nome — é uma entrada num cálculo que o browser faz. 1. O que aquela linha resolv…
Ler o artigoEntre o pedido da página e a letra chegar há um intervalo, e o browser tem de decidir o que mostrar nesse intervalo. Há duas respostas possíveis, as duas feias, e os nomes delas são a primeira coisa que convém saber para escolher. 1. FOIT e FOUT FOIT — flash of invisible text . O browser esconde o t…
Ler o artigoO browser já sabe validar um formulário. Faz isso sem uma linha de JavaScript, na língua de quem visita, com mensagens que um leitor de ecrã anuncia e com o foco a ir para o campo errado. É de graça, e metade da web reescreve isso à mão por cima. Vale a pena saber exactamente até onde isso chega — e…
Ler o artigoEscapar à saída é a primeira linha de defesa contra o XSS, e é a que resolve o problema. O Content-Security-Policy é a segunda: serve para o dia em que uma coisa escapou, e o script injetado já está na página a tentar correr. Não impede o furo — impede que o furo sirva para alguma coisa. É também o …
Ler o artigoUma imagem mal servida custa duas coisas diferentes, e só uma delas se mede em quilobytes. A outra é o salto que a página dá quando ela finalmente chega — e essa quem a sofre é quem já estava a ler. 1. Os formatos, em três linhas AVIF para fotografia, quando se pode gerar: poupa à volta de metade do…
Ler o artigoAs Core Web Vitals são três números que tentam responder a três perguntas de quem visita: já apareceu? , parou quieto? , responde quando toco? 1. LCP — já apareceu? Mede quanto tempo demora a desenhar o maior elemento visível: quase sempre a imagem de topo ou o título. O bom é 2,5 segundos . O que o…
Ler o artigo"Quero que a página se atualize sozinha" tem três respostas possíveis, e escolher a mais poderosa por defeito é a forma mais comum de complicar um problema simples. 1. Polling: perguntar de vez em quando setInterval(async () => { const resposta = await fetch('/api/notificacoes'); mostrar(await respo…
Ler o artigoHá duas formas de uma página ser rápida: servir depressa, ou não ter de servir de todo. A segunda é sempre melhor, e mora num cabeçalho. 1. Cache-Control, em três casos # Ficheiro com hash no nome (app.9f3c2a.js): nunca muda de conteúdo Cache-Control: public, max-age=31536000, immutable # Uma página…
Ler o artigoAcessibilidade tem fama de ser um assunto enorme, com uma norma de centenas de páginas. É verdade — e também é verdade que uma mão-cheia de hábitos apanha a maior parte dos problemas reais de um site normal. 1. HTML com significado É o mais importante, e o mais barato: um <button> já é focável, já r…
Ler o artigoQuem vem do Webpack e experimenta o Vite pela primeira vez faz sempre a mesma pergunta: como é que o servidor de desenvolvimento está pronto em menos de um segundo, num projeto onde o outro demorava trinta? A resposta não é "é mais rápido a fazer o mesmo". É que faz outra coisa . 1. O Webpack constr…
Ler o artigoA ligação está lenta, a pessoa carrega em "Pagar", não acontece nada visível, e carrega outra vez. Ou o telemóvel perde a rede a meio e a aplicação repete o pedido sozinha. Em qualquer dos casos, o servidor recebe dois pedidos iguais — e a pergunta é se isso faz duas encomendas. 1. O que a palavra q…
Ler o artigoO CSS sempre soube descer: escolher os filhos de um elemento, os irmãos a seguir, os descendentes. Nunca soube subir — não havia forma de dizer "o cartão que tem uma imagem lá dentro". O :has() resolve isso, e está em todos os browsers atuais. 1. Ler ao contrário /* Um cartão que tenha imagem fica c…
Ler o artigoÉ provavelmente a mensagem mais copiada para o Google em toda a história do desenvolvimento web: Access to fetch at 'https://api.exemplo.pt/dados' from origin 'https://meusite.pt' has been blocked by CORS policy E a reação mais comum é a errada: procurar como "desligar o CORS" no browser. 1. Quem bl…
Ler o artigoGostávamos de saber quantas pessoas visitam o site, com o Google Analytics. Sem a sua autorização não corre nada. Política de Privacidade.