No necesitas JavaScript para eso

Principio clave del desarrollo web: la ley del menor privilegio

• Uno de los principios clave del desarrollo web, la “ley del menor privilegio”, significa elegir el lenguaje de menor nivel que sea adecuado para el propósito dado.
• Entre HTML, CSS y JS, se prefiere primero HTML, luego CSS y por último JS.
• JS es el más versátil, pero conlleva riesgos como fallas de carga, consumo adicional de recursos y problemas de accesibilidad.

Interruptor personalizado

• Cuando, por requisitos de diseño, se implementa un interruptor personalizado en lugar de una casilla de verificación común, es posible hacerlo con HTML y CSS usando la pseudoclase :checked en vez de JS.
• El navegador conecta automáticamente los elementos input dentro de una etiqueta label y los hace clicables, lo que permite la función de alternar sin manejadores adicionales de JS.

Autocompletado nativo: Datalist

• En lugar de JavaScript, se puede usar datalist, una función integrada del navegador, para implementar una característica que filtre y muestre automáticamente las opciones conforme el usuario escribe.
• El usuario puede ingresar el valor que quiera o hacer clic en el ícono desplegable agregado por el navegador para ver todas las opciones.

Selector de color nativo

• En lugar de un selector de color complejo hecho con JS, se puede usar un selector de color nativo implementado con una sola línea de HTML.
• En los navegadores basados en Chrome, además se ofrece una función extra para elegir colores desde cualquier parte de la pantalla.

Acordeón

• Con los elementos details y summary, se puede ocultar contenido hasta que el usuario lo necesite y así mejorar la estructura de la página.
• Con el atributo open, uno de los elementos del acordeón puede quedar abierto de forma predeterminada.

Modal interactivo

• Con el elemento dialog, se puede implementar un modal para mostrar información al usuario o solicitarle datos.
• Se usa JS para abrir el modal, pero todo lo demás puede manejarse con HTML y CSS nativos.

Conclusión

• Este artículo muestra que se puede usar menos JS y aprovechar las capacidades de CSS y HTML para crear mejores sitios web.
• Es importante probar nuevas formas de implementación teniendo en cuenta la accesibilidad.

Opinión de GN⁺

• El punto más importante de este texto es que, al desarrollar para la web, se puede mejorar el rendimiento y la accesibilidad aprovechando al máximo HTML y CSS sin depender de JS.
• Resulta interesante para desarrolladores web porque presenta nuevas formas de implementar, de manera más simple y eficiente, funciones que antes se pensaba que solo eran posibles con JS.

[GN⁺]

Comentarios de Hacker News

• Se señala que faltó mencionar que JavaScript tiene mejor compatibilidad para usarse en ciertas áreas

  • Se puede usar JavaScript nuevo mediante transpiling, pero hacer polyfill de funciones faltantes de CSS y HTML es mucho más difícil y a veces imposible
  • Al usar la propiedad appearance, MDN presenta muchas advertencias y recomienda pruebas exhaustivas, especialmente para el uso de appearance: none
  • datalist no funciona en Firefox para Android y solo aparece como una caja de entrada simple
  • El selector de color es tan poco estandarizado que es difícil usarlo en la mayoría de los negocios
  • El propio artículo reconoce la falta de consistencia de details y dialog
  • Esperan que llegue una época en la que los navegadores den soporte consistente a estas funciones, pero hasta entonces las usarían principalmente solo en proyectos personales

• Expresan sorpresa de que incluso en 2023 todavía sigamos teniendo problemas generales de experiencia de usuario (UX) con formularios y entrada de datos por parte del usuario

  • No entienden por qué este problema no se ha resuelto
  • Hubo un intento de resolverlo de una vez con XForms, pero los navegadores no lo implementaron, y en su lugar los frameworks de componentes con CSS/JS ofrecen un conjunto limitado de elementos de formulario

• No conocían datalist, pero parece no funcionar correctamente en Chrome para Android

  • Se pueden ver las opciones en el teclado, pero es la primera vez que ven esta función en la UI web móvil y no confían en que un usuario común descubra cómo usarla
  • En Firefox para Android no tiene ningún soporte

• Mención de desplazamiento suave nativo con scroll-behavior: smooth, carruseles nativos con scroll-snap y animaciones basadas en scroll

  • Recomiendan limitar el uso de estas funciones y utilizarlas con cuidado, ya que a menudo tienen efectos secundarios negativos

• Con <details> existe la ventaja de que el contenido se puede buscar con Ctrl+F y, mientras que no se puede abrir un acordeón en JavaScript, <details> sí se puede abrir

• Opinión de que datalist no es una opción adecuada salvo que sea para herramientas internas

  • Los valores predeterminados no son buenos, no se puede cambiar el estilo y, cuando hay limitaciones para el estilo o para modificar el comportamiento, usar JavaScript suele ser la única opción

• Opinión de que, si se sigue el estándar de HTML, todo es consistente y se puede aplicar fácilmente a cosas como accesibilidad o traducción

  • Señalan el problema de que, como los sitios modernos cargan páginas dinámicamente, ni siquiera el botón de retroceder funciona

• Se señala que CSS puede usarse como una herramienta para dificultar la lectura de páginas web

  • Opinan que debería volver a navegadores donde el usuario pueda controlar todos los aspectos del diseño y la tipografía

• Mención de la "Regla del Menor Poder (Rule of Least Power)" como uno de los principios clave del desarrollo web

  • Opinión de un desarrollador de que nunca había oído hablar de este principio, y expresa curiosidad sobre si hay desarrolladores frontend que quieran hacer las cosas lo más simple posible