El desarrollo web es un campo en constante cambio: La forma en que creamos sitios web hoy en día es completamente diferente de cómo solíamos hacerlo hace un par de años.
Con la gran cantidad de herramientas disponibles y las nuevas herramientas que aparecen cada día, la mayoría de las veces los desarrolladores se sienten confundidos sobre qué camino elegir.
A continuación, vas a encontrar una hoja de ruta o guía de aprendizaje completa para poder convertirte en un auténtico desarrollador web frontend.
↪ Infografía Camino a Ser un Desarrollador Back End 2021
En esta publicación, vamos a recapitular, unas posible pautas a seguir con las que poder convertirte en un desarrollador frontend de cara a 2021.
Antes de nada, si decides seguir la siguiente hoja de ruta, debes de tener en cuenta algunos puntos:
- El propósito de esta hoja de ruta es ofrecer una idea sobre el paisaje general y guiarte si estás confundido acerca de qué ir aprendiendo más lejos de la última tecnología de moda.
- Debes comprender por qué, cada herramienta, es más adecuada para ser usada en uno u otro caso y recordar que no siempre, lo más moderno, es la opción más adecuada para encontrar un trabajo.
- Investiga tu futuro mercado laboral, no ignores el hecho de que los lenguajes y las herramientas pueden depender mucho del mercado; así que, investiga un poco sobre al mercado al que consideras dirigirte.
- No necesitas saber todo lo que se enumera a continuación para lograr tu primer trabajo. Las hojas de ruta pueden ser infinitas, de hecho en el mundo de la tecnología, lo son. Pero no debes dejar que eso te asuste, si recién estás comenzando a entrar en el mundo del desarrollo web.
A lo largo de la siguiente hoja de ruta, se trata de cubrir todo lo que eventualmente aprenderás o usarás; eso no quiere decir, que no puedas aprender un mínimo y seguir aprendiendo todo lo demás, mientras comienzas a construir tus aplicaciones, webs o servicios.
Fase 1: Listo para el trabajo
Si eres un principiante y acabas de comenzar en el desarrollo web, aquí tienes la hoja de ruta definitiva. Echa un vistazo a la hoja de ruta que vas a encontrar a continuación y deja de leer en otros lugares.
Completa los elementos enumerados en esta hoja de ruta y vuelve una vez que hayas realizado algunos proyectos aplicando todo lo que vayas aprendiendo.
Aprendiendo a utilizar con la suficiente soltura, todos los elementos enumerados a continuación, deberías poder llamarte desarrollador web y estar preparado para encontrar un trabajo en el mercado laboral.
La mayoría de gente que se ha centrado en estos aspectos, ha ganado un dinero decente con un trabajo independiente / freelance o bien, encontrado un puesto en alguna gran empresa.
Dedica algo de tiempo a todos los elementos enumerados en este lugar, centrate en controlar al máximo todos los diferentes puntos y procura practicar mucho en su uso y aplicación. Haz muchos pequeños proyectos, en los que apliques todo lo aprendido.
¿Qué debo aprender en la Fase 1?
- HTML, CSS, Javascript, el manejo del DOM, el uso de Git; y el funcionamiento básico de Internet, la red y la WWW.
- Aprende y busca las mejores fórmulas para sacarle todo el partido a tu editor de texto o IDE favorito.
- Comienza a conocer Markdown, lo que te va a facilitar el uso de Github o la redacción de documentación, de aquí en adelante.
Aquí tienes una lista de algunas posibles ideas de proyectos que puedes realizar.
Posibles Proyectos
- Crea una aplicación de tipo Pomodoro. Puede clonar y hacer la versión web de esta aplicación.
- Cree una página web que utilice la API de repositorios de GitHub para buscar y mostrar los 10 repositorios principales de la semana actual en un formato de respuesta agradable.
- Cree una aplicación de lista de tareas simple que le permita agregar tareas, marcarlas como completas, editarlas y eliminarlas.
- Cree un cronómetro simple donde el usuario pueda iniciar, detener, pausar y reiniciar.
Una vez que hayas terminado con esto, es importante que aprendas sobre los sistemas de control de versiones, aprender el uso básico de Git, sus conceptos más básicos y crea tu perfil en GitHub.
Fase 2: Explota al máximo CSS
Una vez que haya cubierto los conceptos básicos, continua con el siguiente paso y aprende a escribir CSS avanzado y a usar algunos frameworks CSS, como Bootstrap.
En este punto, es interesante ampliar los conocimientos sobre el funcionamiento y la seguridad de la web, aprender a implementar el HTTPS e investigar un poco sobre la ideología de OWASP.
Una vez que haya terminado con este paso, continua y realiza las siguientes tareas en los proyectos que realizaste anteriormente en la fase 1.
Tareas
- Agrega Bootstrap a los proyectos anteriores usando npm o yarn.
- Convierta los proyectos que realizaste en la Fase 1 aplicando la metodología BEM
- Escribe el CSS en SASS u otro pre procesador de CSS: por ejemplo, Stylus o Less.
- Automatiza la conversión de SASS a CSS usando scripts de NPM u otro tipo de contenedores.
- Implementa HTTPS / certificados SSL, como por ejemplo Let´s Encrypt.
?♂️ El contenido a continuación, se encuentra publicado exclusivamente como borrador ?♂️
Fase 3 – Acelerando
La fase 3, te tomará algún tiempo y el paso más importante hacia el desarrollo front end moderno. Es el momento, de introducirte en el amplio mundo de JavaScript. Aprenda qué es Webpack, comprenda los diferentes conceptos y por qué alguna vez fue necesario. Comprenda qué es babel, por qué lo usamos y aprenda cómo integrarlo con webpack y, por último, aprenda cómo lint su código usando ESLint. Todos los elementos enumerados en esta fase giran en torno al paquete web.
Comenzará a probar el desarrollo de frontend moderno a fines de esta semana. Una vez que haya terminado con esta fase, siga adelante y siga los pasos a continuación para tener un buen control de las herramientas de construcción.
Tareas
- Cree un paquete npm que tome un nombre de usuario y devuelva la lista de enlaces que se encuentran en las redes sociales (si existen). Debe ser utilizable en el navegador, empaquetarlo con webpack, usar babel para transpilarlo y usar ESLint para linting.
- Cree una aplicación simple de lista de tareas pendientes, use SASS para CSS, agregue bootstrap para estilos, use BEM, transpile JavaScript usando babel, empaquételo con webpack, cree una compilación de producción optimizada e impleméntelo en las páginas de Github.
Fase 4: aplicaciones frontend modernas
El siguiente paso es aprender sobre algún marco de interfaz. Hay varias opciones, pero las que se utilizan con más frecuencia en estos días son React, Angular y Vue. Te recomendaría que vayas con React.
En primer lugar, aprenda React, luego eche un vistazo a redux y luego aprenda sobre CSS en JS; que no es obligatorio, pero eche un vistazo a los componentes con estilo y los módulos CSS si lo desea.
Una vez que haya aprendido a reaccionar, continúe y lea sobre las aplicaciones web progresivas. Ahora que conoce los frameworks frontend, no debería ser tan difícil para usted. Eche un vistazo a la lista de verificación de PWA , lea acerca de los trabajadores del servicio, la medición del rendimiento, el uso de Lighthouse y observe las diferentes API de navegador que puede usar para su ventaja, por ejemplo, almacenamiento, ubicación, notificaciones, orientación del dispositivo y pagos. Lea también sobre el modelo RAIL y el patrón PRPL.
Una vez que haya terminado con esto, debería poder llamarse un desarrollador frontend moderno. Asegúrese de practicar lo que aprenda. Aquí está la lista de tareas que puede elegir si está buscando ideas.
Tareas
- Cree una aplicación simple que le permita elegir algunos hashtags y use la API de búsqueda de Twitter para buscar y mostrarle los tweets más recientes para esos hashtags en una cuadrícula de diseño similar a trello. Intente fijar los hashtags para que cuando el usuario actualice la página, recuerde los hashtags que eligió. Utilice react-router y agregue acerca de las páginas.
- Crea una aplicación Pomodoro similar a esta que permite a los usuarios configurar la duración del trabajo y los descansos, muestra notificaciones y reproduce un sonido cada vez que el trabajo o el descanso ha terminado / comenzado.
- Vuelva a crear la página de tendencias de GitHub usando React y permita el filtrado usando el idioma y las fechas como GitHub. Puede agregar bibliotecas para las fechas.
Fase 5: pruebas automatizadas
Aprender a escribir pruebas automatizadas para sus aplicaciones le ahorrará muchos dolores de cabeza en el futuro y lo colocará en una mejor posición a la hora de buscar trabajo. Primero que nada, sigue adelante y aprende cuáles son los diferentes tipos de pruebas, diferentes conceptos como burlarse, talones, etc. Después de eso, sigue adelante y aprende Jest, Enzyme y Cypress de una manera respectiva. Además, aprenda a calcular la cobertura de la prueba.
Tareas
Para las tareas, siga adelante y escriba pruebas de unidad, integración y funcionalidad para las aplicaciones que creó en la Fase 4 anterior.
Fase 6 – Comprobadores de tipo estático
Los verificadores de tipo le permiten hacer que su código sea más fácil de mantener a medida que crece, aumenta su agilidad al hacer la refactorización, brindan un mejor soporte en los IDE y son la mejor forma de documentación que puede tener. Hay principalmente Flow y TypeScript en este dominio. Sin embargo, hay más impulso hacia TypeScript y te recomendaría que lo hagas.
Una vez que haya terminado de aprender TypeScript, continúe y convierta cualquiera de sus aplicaciones JavaScript existentes para usar TypeScript.
Fase 7: representación del lado del servidor
Las aplicaciones renderizadas por el servidor permiten lograr un mejor rendimiento y un SEO mejorado en comparación con las aplicaciones renderizadas por el cliente. Aunque no es un requisito, definitivamente lo ayudaría a crear mejores aplicaciones frontend. Hay diferentes opciones disponibles, basadas en el marco de interfaz de su elección; pero si eligió React.js, entonces debería ir con Next.js, lo que hace que SSR sea muy sencillo.
Para las tareas, convierta las aplicaciones que creó anteriormente para que se procesen en el lado del servidor usando Next.js
Fase 8 – Ve más allá
Todo lo que se muestra en esta fase es opcional y no es realmente necesario para usted, pero si desea probarlos, siga adelante y eche un vistazo.
Tenga en cuenta que en aras de la brevedad, no he entrado en el meollo de la cuestión y he tratado de darle una imagen más amplia; ve y averigua mientras aprendes.
Conclusión
Es posible que aún falten cosas en la hoja de ruta, pero esto es todo lo que necesita para cualquier puesto de “Ingeniería Frontend”. Y recuerde que la clave es practicar tanto como pueda. Puede parecer más aterrador al principio y sentirá que no está comprendiendo mucho, pero eso es normal y, con el tiempo, sentirá que está mejorando cada vez más. Y no olvides pedir ayuda si estás estancado, te sorprenderá la cantidad de personas dispuestas a ayudar.
Infografía Hoja de Ruta Front End
https://drive.google.com/file/d/103YZEjdNWolN0UgDUainWNPRc6gUJvdU/view
Relacionado
Como una de las estructuras de control básicas en la programación, los bucles son casi una adición diaria al código que escribimos. El bucle forEach clásico es uno de los primeros fragmentos de código que aprendemos a escribir como programadores. Si fueras un desarrollador de Javascript, sabrías que Javascript no es ajeno a la iteración a través de los elementos de una matriz o un mapa ¡SEGUIR LEYENDO!
Como sabemos, Sci-hub es un sitio web increíble con millones de artículos de investigación para todos los estudiantes universitarios y académicos. El sitio web de Sci-Hub se encarga de obtener los artículos de investigación y artículos de pago utilizando las credenciales que se filtran. La fuente de credenciales utilizada por este sitio web no está clara. Sin embargo, se supone que muchas de ellas son donadas, ¡SEGUIR LEYENDO!
Aunque haya sido usuario de Windows durante décadas, el sistema operativo es tan amplio y complejo que siempre existen características útiles, pero menos conocidas, que podrían sorprenderte. En este sentido, he identificado diez funciones poco conocidas de Windows que pueden potenciar su eficiencia, comodidad e incluso su experiencia de uso lúdico en su PC.
- Procesador Dual-Core Intel Pentium Gold 4425Y (2...
- Memoria RAM de 8 GB LPDDR3
- Disco SSD de 128 GB
El rumor en torno a las criptomonedas no se desvanece por mucho que existan grandes pesimistas alrededor de los malos rumores. Entonces, si consideras invertir en el mundo de las criptomonedas, deberías estar atento a las criptomonedas que se espera que tengan un buen desempeño para el resto de 2021. En los últimos tiempos, los tokens DeFi están recibiendo toda la atención y es más que ¡SEGUIR LEYENDO!
Los cambios de paradigma revolucionarios debido a los desarrollos de la robótica en todo el mundo están generando nuevos puntos de vista en muchos sectores, entre ellos en los de la industria y la tecnología. Con la ayuda de la Inteligencia Artificial, la tecnología produce resultados innovadores cada segundo y el campo de la robótica define y reconfigura su uso a cada instante. Cada día que ¡SEGUIR LEYENDO!
Bienvenidos desarrolladores web y de software, estamos en los inicios de 2023 y es posible que muchos se esten planteado sus objetivos para lo largo del año. Con anterioridad ya he compartidos las rutas de aprendizaje para un desarrollador front-end, un desarrollador full-stack o un desarrollador back-end entre otros muchos contenidos más. En este artículo, me gustaría compartir algunos de los mejores frameworks y bibliotecas para ¡SEGUIR LEYENDO!
GitHub es el lugar que debes buscar cuando intentas mejorar como desarrollador, toda la información que necesitas está disponible en algún repositorio que alguien ya se ha molestado en indexar. Sin embargo, la parte complicado es encontrar el repositorio más adecuado. Es fácil sentirse perdido en todos los repositorios disponibles dentro de GitHub. Para ayudarte, he elaborado una lista de 10 repositorios de GitHub que pueden ¡SEGUIR LEYENDO!