¿Qué pasa con HTML en la interfaz? Recientemente, hablé con muchos desarrolladores. Parece que algunos ni siquiera entienden HTML. Quiero decir, entienden algo. Entienden qué es un
div y qué es un
span , y cuando todo se ve bien y funciona con un clic, eso es suficiente para ellos. Hasta tal punto que muchas personas responden la pregunta sobre HTML: "Oh, sí, estoy haciendo todo en React o Vue ahora". Pero realmente no importa que solo escribas Javascript. Si está desarrollando sitios web, entonces HTML es lo más importante para usted. Esta
es la web.
Se trata de lo que consume el usuario. Estos son UI y UX. Aquí está el paquete completo. En orden descendente de importancia: HTML, CSS y comportamiento (que puede ser proporcionado por Javascript, o tal vez no).
Veo un problema en la parte inferior de esta pirámide tecnológica. El mínimo común denominador de la web. La base Banda de ritmo Saboya de todos los postres de la web. Esto es HTML. Y me parece cada vez más que toda una capa de ingenieros de front-end no conoce o no entiende la tecnología principal del front-end.
Una página web es un documento. Cualquier componente, ya sea una plantilla de blog, un sitio de noticias, un panel de estadísticas de marketing o un formulario de registro, forma parte del documento. Los documentos tienen una estructura. En Internet, no se trata solo de los elementos visuales o la arquitectura que proporciona su plataforma. Se trata de elegir los elementos semánticamente correctos para que su página web, componente, lo que sea, tenga el formato estructural correcto. Los encabezados deben ser encabezados, las listas deben ser listas, los botones deben ser botones y las tablas deben ser tablas. Puede diseñarlos (más o menos) como desee: el título no tiene que ser grande y en negrita con la sangría a continuación. Depende de usted, pero definitivamente debería ser un titular, y puedo luchar contra usted si lo hace como un
div .
HTML no es tan difícil de aprender, especialmente si ya conoce los marcos de JavaScript. No lo consideré, pero estoy bastante seguro de que solo hay alrededor de 116 elementos allí, y la mayoría de ustedes nunca serán necesarios. ¿Por qué no aprenderlos?
Soy uno de esos tipos que trabajan en el límite de la parte delantera. Hago HTML y CSS, por lo que es fácil para mí alentar a todos a aprender lo que ya sé (para el registro, no lo sé todo; todavía tenemos mucho debate en nuestra oficina sobre la mejor manera de marcar un componente en particular). No es que mi trabajo sea más importante que el tuyo. Si escribe código que muestra algo en el navegador, entonces este es definitivamente su trabajo.
Se trata de usabilidad y accesibilidad. Si no considera importante la estructura semántica de su página web o aplicación, en esencia, dice: "Bueno, todo funciona para mí, puede liberarlo". No creo que Javascript sea suficiente aquí, como lo es CSS. Los motores de búsqueda deben leer su contenido, no disfrutar de animaciones rápidas o gradientes elegantes. El lector de pantalla debe leer su contenido. Los usuarios sin mouse deben trabajar con su sitio. Quién sabe qué tecnología será la próxima y cómo percibirá su aplicación, pero apuesto por el último bitcoin, que probablemente será ayudado por la capacidad de leer, analizar y navegar fácilmente por el contenido. Todas estas tecnologías deberían percibir el contenido como contenido integral, y no solo líneas de texto envueltas en etiquetas sin sentido. Deberían ver qué es una tabla y cómo presentarla, qué es una lista y cómo presentarla, qué es un botón y qué es una bandera. Haga que todo sea div, y tienen que hacer mucho trabajo para reconocer tales cosas.
“Pero mi marco se encarga de todo. Solo estoy escribiendo plantillas .jsx »
No Escriba el HTML correcto en su JSX. Puedes hacerlo Solo porque usas React o Vue u otra cosa, no tienes que escribir todo con divs. No requerido
"Esta biblioteca en todas partes agrega atributos WAI-Aria, por lo que todo está bien con la accesibilidad".
Genial Si escribió el HTML correcto, la mayoría de estos atributos no serían necesarios en absoluto. Obtiene un montón de funciones de accesibilidad de forma gratuita, simplemente usando un
button real en lugar de un
div con un
onClick eventos
onClick . GRATIS Es accesibilidad, rendimiento y facilidad de uso, de forma gratuita. GRATIS!
Estas son cosas realmente importantes. Si no se sigue, se rompe lentamente (en realidad no tan lentamente). Por lo menos, lo hace menos accesible para las personas que usarán su producto. Si se hace llamar ingeniero front-end, su responsabilidad es descubrir y utilizar los conceptos básicos de la web, comunes a todos los navegadores, plataformas, dispositivos o electrodomésticos que pueden acceder a Internet.
Por favor hazlo. Mejore Internet, aborde de manera responsable el desarrollo. Hay suficientes recursos en la Web que pueden ayudar, aquí hay algunos para comenzar:
- Aprenda a diseñar un documento en HTML. Pruebe simples ejercicios mentales cuando mire un póster de concierto o la página de un periódico, e imagine cómo se estructurará en HTML. Si tienes tiempo, escribe este HTML. Usa este conocimiento en el trabajo diario.
- MDN es un gran recurso con blogs, tutoriales y enlaces útiles.
- Llegar a las personas en la comunidad. Lea los blogs (por ejemplo, la publicación reciente de Andy Bell sobre el uso de HTML semántico) y mire el video .
- Cuando estudiaba, mirar la fuente seguía siendo útil. Rompimos colectivamente esto para las generaciones actuales y futuras, pero puedo impresionarlo con el poder de las "Herramientas para desarrolladores" en el navegador
- Aprenda cómo funciona la tecnología de asistencia en la web
- Mire las especificaciones HTML o incluso una lista de elementos HTML y ejemplos de su uso.
- Si trabaja en equipo, discuta el marcado. Realmente discuta, será correcto insertar algún elemento en forma de
table o dl ( Elemento de lista de descripción , MDN). Será muy divertido, lo prometo.
- Descubra quién es el mejor experto en HTML de su equipo y pídales que revisen su código. Si soy yo, siempre feliz de hablar.