Deja de usar Javascript: Mejora tus habilidades con los fundamentos del desarrollo web

♪♪ Hola a todos, detengan lo que están haciendo y dejen de lado el JavaScript. Vamos a hablar sobre cómo mejorar tus habilidades con los fundamentos del desarrollo web.

Entonces, ¿quién soy yo? Soy Kolby Fayak. Soy el que está abrazando a BB8 y Kylo Ren allí. Trabajo con la comunidad de desarrolladores como defensor del desarrollador para Applitools. Puedes encontrarme en todas partes en la web buscando mi nombre, ya que soy el único en el mundo.

Así que vamos a comenzar con una historia. Aquí tenemos a nuestros dos amigos, Mark y Luke. Ambos amigos están cambiando de carrera y deciden probar la programación. Ambos están tratando de encontrar un bootcamp para sumergirse de lleno. Mark encontró un bootcamp de un mes que te convertirá en un ninja de JavaScript. Se aseguran de enseñarte los frameworks más populares disponibles en este momento que te harán muy comercializable.

Luke tomó un camino un poco diferente. Encontró un curso que lleva un poco más de tiempo, pero aprenderá a construir un sitio web completo solo con HTML y CSS. También aprenderá algo de JavaScript, pero no prometieron ningún framework específico de JavaScript.

Ambos amigos decidieron enviar su currículum para un trabajo en 1Up Inc. Es un puesto de desarrollador front-end junior. Ambos reciben una llamada para un desafío de código. Descubrirán que su tarea es tomar este diseño y convertirlo en un sitio web. Tendrán aproximadamente 45 minutos para hacer esto, y luego hablarán sobre su trabajo posteriormente.

Primero está Mark. Esto es fácil para Mark. Acaba de salir de un bootcamp donde aprendió a usar React, y el anuncio de trabajo dice que quieren React. Así que eso es perfecto. Es bastante fácil de configurar para una victoria rápida.

Luego tenemos a Luke. Él decide tomar un camino un poco diferente nuevamente. El sitio web parece bastante simple, ¿verdad? Así que él piensa que puede hacerlo con un simple HTML y CSS.

Entonces comparemos las soluciones. Mark no llegó muy lejos.

Solo obtuvo el título. Luke parecía haber llegado bastante lejos, y aunque no es perfecto, es un buen comienzo. Entonces, ¿qué pasó con Mark? Digamos simplemente que Mark no tuvo una gran entrevista. Primero, Mark intentó configurar una aplicación de React pero olvidó que necesita configurar un administrador de paquetes para instalar React localmente. Afortunadamente, pudo buscar rápidamente un ejemplo en la documentación de React para seguir adelante. Sin embargo, paso a paso, se encontró con problemas, como hacer que React funcione dentro del navegador. Pero una vez que lo logró, se dio cuenta de que podía agregar algunos estilos para que se vea bien. Pero cuando finalmente comenzó a aplicar estilos, se quedó sin tiempo. Pasó tanto tiempo depurando esa configuración inicial que nunca tuvo mucho tiempo para construir el sitio. Por otro lado, Luke abrió su editor favorito, al igual que Mark, pero en lugar de lidiar con paquetes, simplemente comenzó con HTML básico. Utilizó algunas etiquetas semánticas como encabezado y navegación, agregó una etiqueta principal, una imagen y algo de texto, aplicó algunos estilos para que se vea bien, y listo. Luke logró mucho más progreso que Mark, por lo que, por supuesto, Luke consigue el trabajo. Tenía algo de qué hablar en esos últimos 15 minutos. Mark no tenía mucho de qué hablar. Estaba atascado lidiando con el inicio del proyecto con React.

La verdad es que la historia está ligeramente exagerada. No utilicé nombres reales ni semejanzas, pero esta situación exacta ocurre con bastante frecuencia. Personalmente, he presenciado entrevistas en las que los candidatos luchan con estos mismos tipos de desafíos. Los solicitantes de empleo acuden a una entrevista queriendo impresionar a todos usando las herramientas más geniales, pero a menudo se preparan para el fracaso. Es fácil querer aprender herramientas emocionantes y sumergirse de lleno, y eso está totalmente bien. Eso es lo que me ayuda a mantenerme motivado para aprender. Pero en el camino, podemos prepararnos con una buena base.

Entonces, veamos por qué estas cosas pueden marcar la diferencia y aprendamos algunos trucos interesantes para mejorar en el camino. Comenzaremos con HTML. Imagino que la mayoría de nosotros probablemente haya escuchado al menos hablar de HTML. Entonces, ¿qué es exactamente? HTML es el bloque de construcción esencial de todos los sitios web, y lo ha sido probablemente antes de que siquiera hayas oído hablar de HTML. Muchos de nosotros probablemente no tengamos que escribir esto a mano con tanta frecuencia, dado que React y otras bibliotecas de UI lo hacen por nosotros, pero este es el esqueleto básico de una página web. Tenemos nuestro tipo de documento, etiqueta HTML, encabezado y un cuerpo con un simple h1. Sin embargo, es probable que estemos más familiarizados con esto, el esqueleto real de nuestra página se abstrae.

Definimos nuestra página solo con el contenido. Entonces, en lugar de nuestro HTML y nuestro encabezado, es posible que solo veamos nuestro h1. En última instancia, este JSX se compila a HTML. El mismo HTML que podemos escribir a mano, pero ahora tenemos herramientas que nos permiten generarlo de manera más eficiente. Entonces, esa aplicación de NextJS que iniciaste, sí, solo está creando un montón de HTML. A continuación, hablaremos de CSS. Muchos de nosotros lo conocemos como la magia que crea el equipo de diseño web. De hecho, he escuchado a desarrolladores de backend decir que tienen miedo de tocarlo. Entonces, ¿qué es exactamente CSS? CSS significa Hojas de Estilo en Cascada. Tenemos un ejemplo simple aquí, pero nos brinda la capacidad de cambiar nuestros estilos y nuestro diseño. Y al llevar esto a React, tenemos algunas opciones. Personalmente, todavía me gusta escribir mi CSS fuera de mi JavaScript. Me gusta potenciarlo con Sass. Pero sé que a mucha gente le gusta escribir su CSS dentro de su JavaScript, y afortunadamente hay muchas bibliotecas disponibles para hacer precisamente eso. Pero al igual que el HTML que vimos antes, todo esto se compila en nuestro CSS básico. La única diferencia es cómo se sirve, ya sea como un enlace externo, incrustado o en línea.

Aunque esto puede no ser nuevo para muchas personas, aparte del suspiro que escuché cuando dije que escribo mi CSS fuera de mi JavaScript, es importante comprender los fundamentos y cómo funcionan estas cosas básicas. Entonces, ¿cómo podemos hacerlo? La primera cosa a la que podemos aplicar esto es el SEO. Muchos de nosotros probablemente hayamos oído hablar de esto de una forma u otra, pero tal vez no entendamos exactamente qué es. SEO significa Optimización para Motores de Búsqueda. Puede ser muy complejo con la investigación de palabras clave y estrategia, pero nos vamos a centrar en las cosas que podemos controlar como desarrolladores.

Nuestro objetivo final con el SEO es presentar nuestro contenido de una manera que sea fácil de entender para los motores de búsqueda como Google. Lo más importante aquí es el contenido. Pero también incluye las etiquetas que utilizas para presentarlo y los metadatos que utilizas para asegurarte de que se vea bien en el motor de búsqueda. Una cosa que puedes intentar hacer es mantener un esquema lógico de páginas para tu sitio web. No todos los títulos deben ser h1. En su lugar, utiliza h1 a h6 para organizar tu contenido, similar a lo que verías en un libro. Esto le indicará a los motores de búsqueda la jerarquía de tu página. Ayuda a responder qué información pertenece a cada título. Aquí tenemos dos ejemplos de etiquetas de imagen. La de arriba no tiene ningún valor alt, pero la de abajo tiene una descripción de lo que está sucediendo dentro de la imagen. ¿Qué crees que es más probable que aparezca en una búsqueda de imágenes de Google? Al proporcionar nuestra etiqueta alt, estamos ayudando a Google a comprender qué es esa imagen. Añade más valor de contenido a la página y, en última instancia, nos ayuda en nuestras búsquedas. Si vas a tu sitio web y haces clic en diferentes páginas, y miras las palabras dentro de la pestaña del navegador, ¿dicen lo mismo en todas las páginas? La etiqueta que controla esto es la etiqueta de título. Esto también controla el texto que se muestra en Google. Google está mejorando al agregar más contexto sobre las páginas. Es probable que no considere cada una de esas páginas como valiosas si todas muestran el mismo nombre de tu blog.

A continuación, hablaremos de la accesibilidad. La accesibilidad es uno de los puntos más importantes aquí. Un resumen general de lo que es la accesibilidad es lo fácil de usar que es tu sitio web o aplicación para diferentes tipos de personas, independientemente de cualquier tipo de discapacidad. Entonces, eso significa, ¿puede alguien con discapacidad visual seguir utilizando tu sitio web? Cada uno de nosotros como desarrolladores somos responsables de cómo se utilizan nuestras creaciones. ¿Recuerdas el esquema de página que mencionamos antes? Al optimizar nuestro SEO utilizando HTML semántico adecuado, también estás ayudando a los lectores de pantalla a comprender la jerarquía de tu contenido. A medida que un lector de pantalla se desplaza por una página, puede saltar las secciones que la persona puede no estar interesada en. Imagina que esto sería muy difícil si cada uno de esos encabezados fuera un h1.

Y recuerda nuestro ejemplo de imagen. ¿Estás empezando a ver un patrón aquí? Muchas veces, cuando escribimos nuestro HTML correctamente, terminamos proporcionando valor de múltiples formas. Aquí, si un lector de pantalla se encuentra con nuestra imagen, la persona realmente podrá escuchar lo que muestra la imagen. Es otra forma sencilla de ayudar a que todos experimenten el sitio web.

Las listas también son un uso práctico de HTML que se utiliza en toda la web. Pero con demasiada frecuencia veo código que lógicamente es una lista pero no utiliza elementos de lista de HTML. La próxima vez que crees una navegación para tu aplicación, no uses un montón de divs. Utiliza los elementos de lista de HTML. Esto ayudará a la tecnología de asistencia a las personas que la utilizan. Y no es mucho más difícil de estilizar. Simplemente establece el estilo de lista de tu UL en none y prácticamente estarás en el mismo punto en el que comenzaste con un div.

Y por último, hablaremos de la simplicidad. ¿Y qué quiero decir con simplicidad? No siempre necesitamos soluciones extravagantes para que nuestro código funcione como queremos. A veces hay una forma más sencilla de hacer las cosas que estamos luchando por hacer en JavaScript. No necesitas reescribir la especificación de HTML cada vez que agregas un nuevo componente. Más a menudo, cuanto más JavaScript escribas, más JavaScript enviarás, lo que puede afectar el rendimiento de tu aplicación. Usa lo que ya tenemos, también es menos trabajo. Como aquí, el elemento de lista de datos, podemos crear una función básica de autocompletado para un input. Tampoco necesitas escribir JavaScript para crear una animación de carga simple que puedas ver en algunos de tus sitios web favoritos. Usando algo de CSS, podemos usar un degradado y una animación para crear este efecto. Es solo un pequeño fragmento aquí. Mejor aún, al tenerlo como una clase, podemos extenderlo a prácticamente cualquier elemento que queramos. Y si te preguntara cómo harías que este texto sea responsive antes de ver esto, ¿cuántos de ustedes se lanzarían directamente a JavaScript? En realidad, podemos hacer esto muy bien con algo de CSS simple. Aquí, estoy estableciendo el tamaño de fuente de nuestro H1 en 10 viewport width. Puede verse un poco irregular en las diapositivas al tener que mostrarlo como un GIF y presentarlo en Internet. Pero te prometo que es suave como la mantequilla. De esa manera, se escala de manera uniforme con nuestro navegador. Y como bonificación, si se vuelve demasiado pequeño, podemos usar puntos de interrupción de media query y mantenerlo todo en CSS.

Entonces, ¿cómo te sientes después de todo esto? Espero que inspirado. Hay mucho que puedes aprender sin sumergirte de lleno en JavaScript. Si tienes en cuenta todas estas cosas, serás un mejor desarrollador. No solo te ayudarás a ti mismo evitando sobreingenierar soluciones, lo que generalmente puede generar más estrés, sino que también ayudarás a atraer más tráfico a tus proyectos y ayudarás a otros a utilizarlos. Si quieres aprender cómo ir desde el diseño hasta una aplicación completa de Next.js, incluyendo la construcción de esos componentes con los fundamentos en el camino, echa un vistazo a mi curso gratuito en YouTube. Puedes encontrarlo en from.design. Y eso es todo. Si quieres más, puedes encontrarme en todas partes como ColbyFayok. También enviaré un enlace con parte de la información que has visto aquí hoy. Gracias a todos.