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!

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
Web · Blog · Edu · Legal © Ibidem Group Ltd. 2024