Recursos para desarrolladores web frontend 2022

Translation into Spanish of an interesting article by Nick Taylor, a Canadian staff software engineer at Netlify, opensource coder, web developer, content creator, streamer and speaker.

frontend developersspanish translationweb
19 May, 2022 Resources for frontend web developers 2022
19 May, 2022 Resources for frontend web developers 2022

A Spanish translation reviewed & postedited by Jose, a Spain-based translation student specializing in web translations into Spanish.

An original text written by Nick Taylor, originally published in
https://www.iamdeveloper.com/posts/frontend-developer-resources-2022-4cp2/

* * *

No s√© si seguir√© haciendo esto todos los a√Īos, pero publiqu√© en la web un art√≠culo como este en 2020, y tuvo mucho √©xito, as√≠ que lo actualic√© y publiqu√© bajo el t√≠tulo “Recursos para desarrolladores frontend 2020”, lo que nos lleva ahora a “Recursos para desarrolladores frontend 2022” (ups, me salt√© 2021). T√©cnicamente todav√≠a estamos en 2021, pero t√ļ s√≠gueme la corriente. Por cierto, aprovech√© para a√Īadir unas chispas de mi toque personal. ūüėé

1 Recursos para desarrolladores frontend 2020
2 Recursos para desarrolladores frontend 2022

Esta publicación web no pretende ser una lista exhaustiva, sino más bien un listado de cosas que me parecieron atractivas en 2021 y que lo siguen siendo en 2022. Es posible quese repitan algunas cosas con respecto a mi publicación de 2020, pero siguen siendo actuales.

La mayoría de los recursos web son gratuitos, pero algunos son de pago. Recomiendo encarecidamente que te suscribas a la webegghead.io. Yo estoy suscrito desde hace bastante tiempo y estoy encantado.

Si te lo puedes permitir, hazlo. Adem√°s, muchas bibliotecas p√ļblicas te dan acceso gratuito a webs de pago como LinkedIn Learning. P√°sate por tu biblioteca local antes de comprar nada. Aprovecho para enviar un gran saludo a todas las bibliotecas p√ļblicas. ūüėé

Trabajo con Preact y con React a diario. Existen otras bibliotecas y frameworks web, pero no hablaré de eso en esta publicación. Lo haré en la sección de extensiones del navegador.

Esta publicaci√≥n est√° a√ļn en desarrollo; ir√© actualizando la lista a lo largo de 2022.

JavaScript

Independientemente de si comienzas o no con una biblioteca o un framework, como desarrollador frontend, en alg√ļn momento deber√°s aprender a manejar JavaScript, un lenguaje de programaci√≥n que `permite hacer webs interactivas. Aqu√≠ van algunos excelente recursos excelentes conseguirlo:

  • JavaScript 30 ‚Äď Un cl√°sico de Wes Bos. Son proyectos divertidos para ayudar a consolidar las bases de JS.
  • JavaScript Katas : encontr√© este recurso hace mucho tiempo, pero se actualiz√≥ en los √ļltimos a√Īos. ¬°Incluso hice un streaming de algunos de los Katas!
  • Charla de Philip Roberts en JSConf EU “¬ŅQu√© diablos es el event loop?” una excelente explicaci√≥n del event loop.

Descubre y reconstruye tus modelos mentales de JavaScript.

  • No profundizo mucho en este tema, pero doy algunos consejos sobre c√≥mo comenzar a depurar JavaScript.

TypeScript

TypeScript es un lenguaje de programaci√≥n web de c√≥digo abierto, un superconjunto de JavaScript que a√Īade tipos est√°ticos y objetos basados en clases.¬† Es cada vez m√°s popular en el mundo del dise√Īo web. Aunque no seas fan, es bueno tenerlo en mente.

CSS

CSS es un lenguaje de dise√Īo gr√°fico que permite definir los estilos de una p√°gina web. Profundiza y mejora tus conocimientos de CSS.

HTML

Si est√°s haciendo desarrollo web a largo plazo, debes familiarizarte con el marcado sem√°ntico para sitios web. Estos recursos te ayudar√°n;

  • MDN: no pod√≠a faltar
  • HTMHell : un gran sitio con horribles ejemplos de HTML y c√≥mo solucionarlos
  • Tabla peri√≥dica de elementos HTML : un giro divertido en la tabla peri√≥dica cl√°sica
  • Este no es solo HTML, por lo tanto, probablemente deber√≠a crear otra secci√≥n. ūüôÉ Visita buildexcellentwebsit.es para conocer los fundamentos y principios clave en la creaci√≥n de grandes sitios.

Accesibilidad

La accesibilidad es muy importante a nivel web y, sinceramente, si quieres destacar como desarrollador frontend, dominar este tema es fundamental.

Animaciones web

Las animaciones web son una excelente manera de mejorar la experiencia del usuario, pero recuerda, no a√Īadas animaciones por a√Īadir. Aqu√≠ hay algunas webs de grandes creadores para que puedas echarles un vistazo.

Jamstack

Jamstack es una arquitectura de desarrollo web que aglutina JavaScript, API y Markup o Marcado.

Extensiones del navegador

  • WAVE : “eval√ļa el contenido web en busca de problemas de accesibilidad directamente en tu navegador”
  • axe ‚Äď “prueba tus aplicaciones web para ayudar a identificar y resolver problemas comunes de accesibilidad”
  • Accesibility Insights for Web : “ayuda a los desarrolladores a encontrar y solucionar problemas de accesibilidad en aplicaciones y sitios web”
  • Si est√°s trabajando con React: React DevTools ( navegadores basados ‚Äč‚Äčen Chromium | Firefox )
  • Si est√°s trabajando con Preact: Preact DevTools
  • VisBug : herramientas de depuraci√≥n de dise√Īo web de c√≥digo abierto

Testing

El testing es un tema importante, y ‚Äčlo mencionar√© de manera superficial aqu√≠, pero saber qu√© probar es muy importante. Al final del d√≠a, cuando env√≠es algo, preg√ļntate: “¬ŅMe siento segur@ enviando esto?”.

  • Soy fan√°tico de Cypress y lo usamos en Forem (el software que impulsa a dev.to). Con el tiempo, hemos estado desarrollando nuestra documentaci√≥n y creo que es un gran recurso si te sumerges en las pruebas de extremo a extremo. Echa un vistazo a escribir pruebas Cypress.
  • Probar el conjunto de herramientas de la biblioteca. Independientemente de que se trate de pruebas de componentes en React, Svelte, HTML/CSS/JS sencillo o de extremo a extremo, Testing Library te protege.

IDE en la nube/entornos de desarrollo completos

Viviendo al límite

Un montón de cosas interesantes están sucediendo en The Edge. No he escrito mucho aquí, pero ampliaré el contenido en 2022.

Herramientas web

A todos nos encantan las herramientas. Hay para todos los gustos, aunque mencionaré solo algunas.

  • Libro de cuentos ‚Äď learnstorybook.com
  • Si tienes instalado Node.js y necesitas configurar el archivo gitignore de un proyecto basado en JavaScript desde la ra√≠z del proyecto, ejec√ļtalo npx gitgnore node(tambi√©n funciona para otros idiomas, o si omites el idioma, te dar√° una lista de todos los gitignores compatibles)
  • Parcel
  • Vite
  • Turborepo

Libros

Estas son algunas lecturas geniales.

Streams en Twitch

Soy un gran fan de Twitch. Hago streaming por mi cuenta en livecoding.ca, as√≠ como en DEV Twitch stream . Estos son algunos streamers geniales a los que deber√≠as seguir para todo lo relacionado con la interfaz.

Estoy seguro de que me he dejado algunas cosas, pero este es el volcado de datos inicial. Como ya coment√© antes, actualizar√© esta publicaci√≥n durante el pr√≥ximo a√Īo.

Si te ha gustado esto, ¬° suscr√≠bete a mi newsletter !

Valora este artículo