Tema: browser
-
Armazenamento no navegador: comparação entre cookies, Web Storage e IndexedDB
Os cookies viajam em cada requisição e têm tamanho reduzido por especificação; localStorage e sessionStorage são armazenamentos síncronos de strings com poucos MiB por origem; o IndexedDB é assíncrono, transacional e usa a cota ampla da origem. Todo armazenamento no navegador é best-effort, a menos que a persistência seja concedida, e é delimitado por origem.
-
A Same-Origin Policy: o que é uma origem e o que ela isola
Uma origem é o conjunto formado por esquema, host e porta de uma URL. Scripts podem ler e modificar documentos, armazenamento e respostas da mesma origem; leituras entre origens são bloqueadas por padrão, enquanto escritas (como envio de formulários) e incorporações (como imagens e scripts) costumam ser permitidas. O CORS flexibiliza as leituras; as defesas contra CSRF continuam necessárias.
-
Usando fetch com timeouts e AbortController
A promise de fetch só é rejeitada em caso de falha de rede, não por status de erro HTTP, e não tem timeout próprio. Passe um AbortSignal combinado a partir de AbortSignal.timeout e do controller do chamador, verifique response.ok e distinga no catch entre TimeoutError, AbortError, erros de rede e erros HTTP.
-
Web Vitals: o que LCP, INP e CLS medem
Os Core Web Vitals são três métricas de campo: Largest Contentful Paint (tempo de renderização do maior elemento visível, meta de 2,5 s), Interaction to Next Paint (maior latência de interação, meta de 200 ms) e Cumulative Layout Shift (deslocamento inesperado de conteúdo, meta de 0,1), cada uma avaliada no percentil 75 dos carregamentos de página.
-
Noções básicas de Web Push: inscrições, chaves VAPID e o serviço de push
O navegador se inscreve no serviço de push do seu fabricante e entrega à página um endpoint e chaves; o servidor da aplicação envia por POST mensagens criptografadas para esse endpoint, com o cabeçalho TTL e um JWT VAPID (ES256, aud = origem do serviço de push, exp de no máximo 24 horas), cuja chave pública foi passada a PushManager.subscribe como applicationServerKey. Um 201 significa aceito, não entregue.
-
Seletores estáveis e espera automática em testes end-to-end de navegador
Duas causas dominam os testes de navegador instáveis: seletores que quebram ou apontam para o elemento errado, e pausas fixas que pressupõem um tempo de resposta. Localize os elementos por papel (role), rótulo ou test id, garanta que cada localizador corresponda a um único elemento e sincronize com asserções que repetem a verificação e com checagens de acionabilidade, não com o tempo.
-
Layout CSS: quando usar flexbox e quando usar grid
Flexbox é um modelo unidimensional que distribui o espaço ao longo de uma linha ou coluna; grid é bidimensional e define linhas e colunas em conjunto. Use flexbox para grupos guiados pelo conteúdo e grid para a estrutura de páginas e formulários; combine os dois, use gap e permita que os itens encolham para o texto não transbordar.
-
Quando o aprimoramento progressivo compensa em uma aplicação que de todo modo precisa de JavaScript?
Pergunta em aberto: em aplicações cujas funcionalidades centrais não funcionam sem script, quais partes ainda merecem um caminho funcional sem script ou com script reduzido, com que frequência o script deixa de executar para um público real e como uma equipe deve decidir com dados, e não por princípio?
-
O event loop do JavaScript: tasks, microtasks e renderização
O JavaScript executa um job de cada vez; o event loop do HTML pega uma task e depois esvazia por completo a fila de microtasks (reações de promises, queueMicrotask) antes da próxima task ou de uma oportunidade de renderização. Trabalho síncrono longo e cadeias infinitas de microtasks bloqueiam a entrada do usuário e a pintura da tela.
Legível por máquina: JSON