Movimiento lento

Hubo un momento en el que me sentí abrumado por la rapidez con la que se desarrollaba la web. Parecía que no pasaba un solo día sin que se lanzara un nuevo complemento, marco, técnica o característica de lenguaje. Creía que para sobrevivir como autónomo y competir con otros tenía que aprender todo en lo que todos los demás eran tan buenos : webpack, React, Angular, SVGs, Houdini, CSS Grid Layout, ES6, lo que sea. Estar activo en Twitter y asistir a conferencias no ayudó porque estaba constantemente expuesto a todas las cosas nuevas .

Rendirse

En algún momento me rendí. Decidí por mí mismo que no puedo seguir el ritmo. Profesionalmente no cambió nada para mí porque, en realidad, nadie esperaba que yo lo supiera todo y esta impresión que tenía de todos modos solo estaba ocurriendo en mi burbuja. Disminuir el ritmo fue una decisión brillante porque no fue sólo un alivio mental, sino que también me ayudó a concentrarme en las cosas que realmente quería aprender. Todavía leo boletines, blogs y Twitter, y todavía me tomo un tiempo para probar algo nuevo de vez en cuando, pero lo hago sin presión. Intento mantenerme actualizado pero no siento la necesidad de saberlo todo.

Así es como he estado lidiando con los desarrollos en la web durante los últimos años, pero recientemente, especialmente este año, aprendí algo nuevo. No fue un marco o lenguaje, fue la idea de que, en nuestra aspiración de innovación y progreso, estamos descuidando aprovechar las muchas características que ofrecen HTML, CSS y JavaScript en la actualidad. En otras palabras: hay mucho que podemos aprender si miramos hacia atrás en lugar de hacia adelante.

No vayas persiguiendo cascadas

Hablo de negligencia porque creo que existe una división significativa entre las cosas que creemos saber sobre los lenguajes front-end y lo que realmente deberíamos saber.

HTML

Es parte de mi trabajo y un pasatiempo inspeccionar sitios web y evaluar la calidad de su interfaz. He mirado debajo del capó de muchos sitios web y sólo puedo confirmar lo que los expertos en accesibilidad web predican todos los días: la mayoría de los documentos HTML están en pésimas condiciones. Si no me crees, sólo mira los datos:

• El 98,1% de las 1.000.000 de páginas de inicio principales tienen fallos WCAG 2 detectables .
• Miles de sitios web contienen elementos y . h7h8
• Después del título y meta, div es el elemento más popular .
• En promedio, solo utilizamos alrededor de 30 de los más de 110 elementos disponibles .

Existe una gran diferencia entre conocer la sintaxis HTML y saber cómo utilizarla correctamente. Cuando se trata de escribir documentos HTML semánticos y bien estructurados, a todos nos vendría bien un pequeño repaso. En 2020, dediqué gran parte de mi tiempo a aprender HTML y espero que los usuarios de los sitios web que construyo puedan beneficiarse de mis conocimientos.

Dos de mis cosas favoritas que aprendí sobre HTML en 2020:

Puede cambiar el nombre de un archivo descargable definiendo un valor en el downloadatributo.

a href="files/yxcvc27.pdf" download="report.pdf"Download (2MB)/a

Puede utilizar el valueatributo para cambiar la numeración en una lista ordenada.

ol  li value="3"C/li  li value="2"B/li  li value="1"A/li/ol

CSS

Casi cada vez que busco una propiedad CSS en MDN o CSS-Tricks , descubro algo nuevo. Inténtalo tú mismo. Busque margin, list-style-typeo color. Estoy seguro de que aprenderás algo.

La lista de cosas que aprendí sobre CSS en 2020 es bastante larga, aquí están dos de mis favoritas.

Puede utilizar la url()función como (parte de) el valor de la contentpropiedad.

div::before {  content: url('marker-icon.png');}

Puede implementar un desplazamiento fluido nativo en CSS.

// Animate scrolling only if users don’t prefer reduced motion@media (prefers-reduced-motion: no-preference) {  html {    scroll-behavior: smooth;  }    // Add some spacing between the target and the top of the viewport  :target {    scroll-margin-top: 0.8em;  }}

javascript

Escribo JavaScript con regularidad, pero no es uno de mis principales puntos fuertes, por lo que aprendo cosas nuevas al respecto todo el tiempo. Aquí están dos de mis favoritos de este año:

Puede utilizar el nomoduleatributo para ejecutar código JavaScript solo en navegadores que no admitan módulos JavaScript.

script nomodule  console.log('This browser doesn’t support JS Modules.');/scriptscript type="module"  console.log('This browser supports JS Modules.');/script

Conclusión

HTML es la columna vertebral de todo sitio web; saber cómo escribir documentos semánticos debería ser la principal prioridad de todo desarrollador web. CSS es, en su propia medida, tan complejo que para aprender nuevos conceptos debemos entender qué problemas resuelven en comparación con técnicas más antiguas. Los marcos y bibliotecas de JavaScript van y vienen, pero lo que todos tienen en común es que están escritos en JavaScript básico.

En 2020, reaprendí cosas que ya había olvidado y descubrí cosas nuevas sobre elementos y propiedades establecidos. Hay tanto conocimiento oculto que puedes encontrar si sólo lo buscas. Ampliaré esto en 2021 porque hay muchas cosas increíbles por descubrir.