Domina por completo la manipulación del DOM con JavaScript vanilla

• El artículo trata sobre cómo dominar la manipulación del Document Object Model (DOM) usando JavaScript vanilla.
• Enfatiza la importancia de entender la API del DOM del navegador para el desarrollo web, a pesar del uso de herramientas modernas como Angular, VueJS, React, Solid y Svelte.
• El autor ofrece una colección de recursos que incluye APIs básicas del navegador, ejemplos fáciles de entender, demostraciones en tiempo real, consejos y buenas prácticas, casos de uso reales y compatibilidad con navegadores modernos e Internet Explorer.
• Estos recursos están divididos en tres niveles: básico, intermedio y avanzado.
• El nivel básico incluye tareas como cambiar dinámicamente el favicon según la preferencia de esquema de color del usuario, calcular el tiempo de lectura de una página web y actualizar dinámicamente variables raíz de CSS.
• El nivel intermedio incluye tareas como quitar sangría en un área de texto usando la combinación de teclas Shift+Tab, entrar en modo de pantalla completa y construir un campo numérico con controles.
• El nivel avanzado incluye tareas como crear un cursor personalizado, sanear cadenas HTML y crear una barra de desplazamiento personalizada.
• El autor también ofrece consejos como evitar que el diseño se desplace al abrir un modal y obtener el rectángulo delimitador de nodos de texto.
• El artículo termina con una invitación a suscribirse al boletín del autor sobre contenido técnico de frontend.

[GN⁺]

Comentarios de Hacker News

• Este artículo ofrece varios ejemplos para dominar por completo la manipulación del DOM.
• Los ejemplos fueron elogiados por ser detallados y por su trabajo funcional de UI.
• Algunos usuarios sintieron que trabajar con la API básica del DOM es aburrido y propenso a errores, por lo que terminaron usando frameworks como Svelte.
• Hay una discusión sobre posibles vulnerabilidades de seguridad relacionadas con cierto código, y se propone usar una lista blanca.
• Algunos usuarios señalaron repeticiones innecesarias en el código y sugirieron alternativas más eficientes.
• Algunos ejemplos usan APIs antiguas en situaciones donde ya existen versiones modernas más convenientes.
• La técnica de "autoexpandir el área de texto" es considerada anticuada por algunos, y se sugieren una nueva propiedad de CSS o el uso de un elemento espejo oculto.
• El artículo provocó una discusión sobre la utilidad de entender la manipulación básica del DOM.
• Algunos usuarios recordaron los primeros días del desarrollo web, cuando todo se escribía en JS "vanilla".
• Se sugiere que empaquetar estos ejemplos para poder actualizarlos y usarlos fácilmente sería mejor que copiarlos y pegarlos.