Mejora progresiva como principio
Construye primero con HTML y CSS. Luego mejora con JS. Si el script falla o se retrasa, el contenido debe seguir siendo útil. Este enfoque reduce el riesgo y mejora la accesibilidad, especialmente en dispositivos con hardware limitado o conexiones lentas. Es una mentalidad que repetimos en Web design courses: el usuario debería poder leer, navegar y completar tareas básicas incluso si el JS no está disponible.
Módulos ES y organización del código
Usa type="module" para cargar scripts de forma diferida y con alcance propio. Divide funcionalidades por dominio: ui/modal.js, forms/validate.js, analytics/consent.js. Evita “utilidades gigantes”: si una función solo se usa en un componente, mantén su proximidad. Aprovecha imports relativos y nombra con intención. Esta modularidad acelera el aprendizaje y baja la barrera de entrada al proyecto.
Patrones de eventos y estado mínimo
La delegación de eventos reduce listeners y mejora el rendimiento. En lugar de registrar un click por botón, escucha en el contenedor y filtra por data-atributos. Cuando debas reaccionar a scroll o resize, usa throttling/debouncing. Mantén el estado UI en el DOM cuando sea posible (atributos aria-expanded, data-open), para que herramientas de accesibilidad y CSS reaccionen en armonía.
Accesibilidad: foco, anuncios y teclado
Gestiona el foco en diálogos y menús: al abrir un modal, mueve el foco al título o al primer elemento interactivo; al cerrar, devuélvelo al trigger. Anuncia cambios relevantes con aria-live para que el lector comunique resultados (por ejemplo, “3 resultados filtrados”). Asegura que todos los controles sean accesibles por teclado y que el orden de tabulación siga la lógica visual. Recuerda que la interactividad no debe romper patrones nativos del navegador.
Rendimiento real: del código al timeline
Evita reflows innecesarios agrupando cambios al DOM (document fragments, requestAnimationFrame). Prefiere classList.toggle para cambiar estados visuales. Mide INP con herramientas del navegador y elimina trabajo costoso en handlers frecuentes. Carga condicional: si un acordeón no se usa en la página, no lo cargues. Los Web design courses efectivos enseñan a presupuestar bytes y CPU igual que se presupuestan horas.
Fetch, reintentos y UX de red
Un fetch robusto contempla timeouts, reintentos exponenciales y cancelación con AbortController. Muestra estados: cargando, éxito, error y vacíos. Cachea respuestas que no cambian a menudo con Cache Storage o con un simple Map temporal. Piensa en la accesibilidad: avisa de resultados con aria-live, y no bloquees el foco con spinners interminables.
Web Components ligeros (cuando tiene sentido)
Los Custom Elements pueden encapsular comportamiento sin dependencias externas. Úsalos para widgets verdaderamente reusables (tabs, tooltip, rating). Mantén el componente agnóstico del framework y ofrece API a través de atributos y eventos personalizados. No conviertas todo en un componente: empieza por patrones con alto ROI.
Testing manual mínimo viable
- Navegación por teclado en flujos críticos.
- Desactivar JS: el contenido sigue siendo útil.
- Throttle de red: la UI informa estados y no se “rompe”.
- Lectores de pantalla básicos: foco y anuncios correctos.
JS es poderoso, pero su mejor truco es saber cuándo no usarlo. Enfócate en entregar valor, medir impacto y respetar la plataforma. Así es como enseñamos y practicamos en nuestros Web design courses.
¿Ideas o preguntas?
Déjanos una reseña y propón nuevos temas.