Domine completamente a manipulação do DOM com JavaScript vanilla

• O texto discute como dominar a manipulação do Document Object Model (DOM) usando JavaScript vanilla.
• Mesmo com o uso de ferramentas modernas como Angular, VueJS, React, Solid e Svelte, ele enfatiza a importância de entender a API do DOM do navegador para o desenvolvimento web.
• O autor oferece uma coleção de materiais que inclui APIs básicas do navegador, exemplos fáceis de entender, demos em tempo real, dicas e boas práticas, casos de uso reais e compatibilidade com navegadores modernos e Internet Explorer.
• Esses materiais são divididos em três níveis: básico, intermediário e avançado.
• O nível básico inclui tarefas como alterar dinamicamente o favicon de acordo com a preferência de esquema de cores do usuário, calcular o tempo de leitura de uma página web e atualizar dinamicamente variáveis CSS raiz.
• O nível intermediário inclui tarefas como remover a indentação em uma área de texto usando a combinação de teclas Shift+Tab, entrar no modo de tela cheia e criar um campo de entrada do tipo spin.
• O nível avançado inclui tarefas como criar um cursor personalizado, sanitizar strings HTML e criar uma barra de rolagem personalizada.
• O autor também oferece dicas como evitar que o layout se desloque ao abrir um modal e obter o retângulo delimitador de nós de texto.
• O texto termina com um convite para assinar a newsletter do autor sobre conteúdo técnico de front-end.

[GN⁺]

Opiniões no Hacker News

• Este artigo oferece vários exemplos para dominar completamente a manipulação do DOM.
• Os exemplos foram elogiados por serem detalhados e por abordarem tarefas funcionais de UI.
• Alguns usuários acharam o trabalho com a API básica do DOM entediante e propenso a erros, o que os levou a usar frameworks como o Svelte.
• Há uma discussão sobre possíveis vulnerabilidades de segurança relacionadas a um trecho específico de código, com a sugestão de usar uma whitelist.
• Alguns usuários apontaram repetições desnecessárias no código e sugeriram alternativas mais eficientes.
• Alguns exemplos usam APIs antigas mesmo quando já existem versões mais modernas e convenientes.
• A técnica de "expansão automática da área de texto" é considerada ultrapassada por alguns, que sugerem novas propriedades de CSS ou o uso de um elemento espelho oculto.
• O artigo gerou discussões sobre a utilidade de entender a manipulação básica do DOM.
• Alguns usuários relembraram os primeiros tempos do desenvolvimento web, quando tudo era escrito em JS "vanilla".
• Há a sugestão de que empacotar esses exemplos para facilitar atualizações e uso seria melhor do que simplesmente copiar e colar.