Tema: javascript
-
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.
-
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.
-
Builds de módulos ES com efeitos colaterais declarados reduzem mais o bundle do consumidor do que builds CommonJS
Hipótese: numa biblioteca com muitas funções independentes, o consumidor que importa só algumas obtém um bundle menor quando ela é distribuída como módulos ES com declaração sideEffects do que como CommonJS, pois o tree shaking depende da estrutura estática de import/export; propõe-se uma comparação baseada em fixtures.
-
Web components: custom elements, shadow DOM e onde termina o encapsulamento
Custom elements registram uma classe sob um nome de tag com hífen e callbacks de ciclo de vida; o shadow DOM lhe dá uma subárvore isolada, cujos estilos não vazam em nenhuma direção; templates e shadow roots declarativos fornecem a marcação. Tudo o que atravessa a fronteira, de estilização (com parts e custom properties) a participação em formulários via ElementInternals e associação de labels, precisa ser aberto de forma deliberada.
-
Quando o roteamento no cliente ainda compensa, agora que os navegadores oferecem bfcache, prerendering e view transitions entre documentos?
Pergunta em aberto: os roteadores in-page foram adotados para evitar carregamentos completos de página, ao custo de servir o shell, tratar 404, restaurar scroll e foco e depender de um bundle que precisa chegar primeiro; o back/forward cache, a Speculation Rules API e as view transitions entre documentos já atendem às motivações originais em sites multipágina. Em quais sites e padrões de interação um roteador in-page ainda leva vantagem mensurável?
-
Interfaces sensíveis à localidade: regras de plural do Intl, datas e layout da direita para a esquerda
Formate números, datas e tempos relativos com os objetos Intl do navegador em vez de manipular strings, escolha as formas de plural pelas categorias de Intl.PluralRules e não por n == 1, monte o layout com propriedades lógicas de CSS para que um documento com dir=rtl se espelhe sozinho e reserve espaço para textos que crescem na tradução.
-
Módulos ES versus CommonJS no Node.js
O CommonJS usa require síncrono e module.exports; os módulos ES usam import/export estáticos, await de nível superior e import.meta. O Node decide por arquivo, pela extensão e pelo campo type do package.json mais próximo; os módulos ES exigem extensões de arquivo completas e não têm __dirname nem require, mas há substitutos documentados.
-
Offsets de texto em JavaScript: distinga unidades UTF-16, pontos de código e caracteres visíveis
Indique a unidade do offset em cada fronteira de editor ou de API e converta de forma deliberada antes de cortar o texto.
-
Como publicar um service worker com segurança: escopo, caches versionados, worker em espera e kill switch
Um service worker que guarda HTML em cache pode prender os usuários a código antigo depois de um deploy. Registre-o com escopo explícito, busque o script sempre da rede nas verificações de atualização, versione os caches por build e apague os antigos no activate, escolha estratégias por recurso, defina como o worker em espera assume o controle e entregue um kill switch testado antes da primeira versão.
-
Navegação por teclado em widgets compostos: roving tabindex, setas e Escape
Tab e Shift+Tab movem o foco entre componentes; as setas movem-no dentro de um componente como lista de abas, barra de ferramentas, menu ou grupo de rádio. Implemente isso com roving tabindex (um item com tabindex=0 e os demais com -1) ou aria-activedescendant, feche superfícies transitórias com Escape e nunca prenda o foco sem oferecer uma saída documentada.
-
Gerenciamento de foco em interações de página única: diálogos, mudanças de rota e elementos removidos
Quando a página muda sem um carregamento completo, o foco do teclado precisa ser movido de propósito: para dentro do diálogo ao abri-lo e de volta ao seu acionador ao fechá-lo, para o título da nova visualização após uma mudança de rota no cliente e para um elemento vizinho adequado quando o elemento focado é excluído. Caso contrário, o foco cai no body do documento e os usuários de leitores de tela voltam ao topo da página.
-
Tratamento de erros em Promises e async/await
Uma função async transforma um throw em rejeição e o await a relança; toda rejeição precisa de um responsável. Envolva apenas o que você consegue recuperar, nunca deixe uma promise solta, use allSettled quando falha parcial for aceitável e registre um handler de último recurso para rejeições não tratadas.
-
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.
-
BigInt em JSON: defina um contrato de campo sem perdas antes de adicionar um replacer
Codifique inteiros grandes com um esquema explícito e restaure-os sem passar silenciosamente por Number.
-
Noções básicas de manipulação de bits: flags, máscaras e deslocamentos sem surpresas
Flags são potências de dois combinadas com OR, testadas com AND e limpas com AND NOT; máscaras e deslocamentos extraem campos. As armadilhas são a precedência de operadores, o deslocamento à direita com sinal, a conversão fixa para 32 bits no JavaScript e os inteiros ilimitados do Python; dê nome a cada flag e coloque cada teste entre parênteses.
Legível por máquina: JSON