Cómo convertirse en un desarrollador web Full Stack en 2020

Los desarrolladores web de pila completa son la navaja suiza del mundo del código. Tener esa designación significa que puede producir soluciones de extremo a extremo, que es un conjunto de habilidades ágil y altamente comercializable. Pero, ¿qué se necesita realmente para alcanzar ese estatus?

Ya sea que sea nuevo, experimentado o especializado en un extremo de la pila, hay mucho que digerir aquí. Siéntete libre de sumergirte desde arriba o saltar hacia donde necesites más apoyo.

  • En primer lugar, ¿qué es lo que realmente hace que un desarrollador tenga una pila completa?
  • Antes de sumergirnos, hablemos de ese enfoque
  • Así que ¿por dónde empezamos?
  • Interfaz
  • Back end
  • DevOps y la nube
  • ¿Y el diseño?
  • Otras cosas si recién está comenzando
  • Otras cosas si buscas más

En primer lugar, ¿qué es lo que realmente hace que un desarrollador tenga una pila completa?

Es divertido y animado decir que cualquier desarrollador de front-end es un desarrollador de pila completa, pero poder implementar un sitio web en Netlify no lo convierte en una pila completa.

Esto no pretende ser desalentador, solo de manera realista, solo tener esa experiencia no se mantendrá bien para ese puesto de trabajo en su próxima entrevista. Mientras técnicamente crea e implementa su trabajo de principio a fin, Netlify, Zeit y otros proveedores le brindan el poder de hacer esto con sus herramientas mágicas que eliminan la mayoría de las operaciones de pila de la ecuación.

Eso no quita lo que todos podemos lograr ahora como desarrolladores frontales. El creciente movimiento para compilar e implementar sitios web estáticos acaba de simplificar este proceso en la mitad posterior de la pila con beneficios en todos los ámbitos.

Además, con la flexibilidad de las opciones de herramientas, como poder ejecutar JS en un servidor, nuestros conjuntos de habilidades pueden transferirse a más casos de uso que nunca.

De donde venimos

El panorama del desarrollo web ha cambiado rápidamente. Wordpress ha sido el rey CMS desde hace un tiempo, representando más de un tercio de los sitios web que usan un CMS y ayudando a PHP a ganar popularidad. Pero otros trabajaron con soluciones de cosecha propia.

Estos representaban una pila web más tradicional como LAMP. En estos casos, tenía servidores web que generalmente ejecutaban algún tipo de sistema de administración de contenido y un lenguaje del lado del servidor (como PHP) que interactuaría con las bases de datos y produciría el código que finalmente se entregaría al navegador.

Además de eso, es posible que Javascript haga algunas funciones interactivas con CSS administrando la visualización de la página. Ahora, en algunos casos, tener un servidor Wordpress administrado es todo lo que necesita para ciertos servidores web. Pero otros sitios más grandes requerirían otro equipo para administrar esos servicios y la canalización de implementación para llevar el código a producción.

Donde estamos y hacia donde vamos

Si bien Wordpress no va a ninguna parte, las arquitecturas sin servidor y JAMstack están ganando impulso. Para aquellos que no están familiarizados, la idea no es que literalmente no haya servidores, sino que se trata más de usar servidores que se administran en la nube.

Los servicios como AWS Lambda le permiten crear una "función" que procesa entradas y salidas simples. Adjunte eso a API Gateway e inmediatamente tendrá un punto final con el que puede interactuar sin tener que administrar un servidor.

Otros como S3 le permiten volcar HTML, CSS, JS, imágenes y cualquier otro activo estático en el almacenamiento y servir el sitio directamente desde él. Nada se procesa en el servidor, simplemente está sirviendo los archivos estáticos al cliente.

La parte brillante de esto es que hay muchos menos gastos generales y, por lo general, es mucho más barato. En muchos casos, también obtendrá un gran aumento de rendimiento, donde servir un sitio desde s3 requerirá menos procesamiento para obtener esa primera respuesta en el navegador, lo que puede equivaler directamente a una mejor experiencia del usuario.

Esto no es para empujarlo al JAMstack, sino para mostrar que el paradigma de la pila completa está cambiando y es algo que vale la pena considerar. Todavía hay un sentido tradicional de la diferencia en el trabajo, pero se está volviendo un poco diferente.

Los equipos de DevOps ahora administran los recursos y las implementaciones de la nube. Los desarrolladores de backend ahora crean API y código que interactúa con servicios utilizando herramientas como funciones lambda. Y los desarrolladores de front-end trabajan principalmente en la creación de Javascript de aplicaciones React o Vue que llegan a los servicios que crearon sus desarrolladores de back-end. Podría decirse que esto podría incluir o no cosas como CSS, pero esa es otra lata de gusanos sobre el título al que pertenece ese trabajo "oficialmente" (spoiler: depende del equipo).

Si bien todavía hay un sentido dividido de los deberes, la línea se está difuminando y hace que sea más manejable extender su enfoque.

Antes de sumergirnos, hablemos de ese enfoque

Puede ser bastante tentador querer sumergirse y cubrir el espectro completo de un desarrollador de pila completa, pero hay algo que decir sobre el enfoque. Ésta es la base de la expresión "jugador de todos los oficios, maestro de ninguno", donde se intenta aprender un poco de cada parte de la pila completa y nunca realmente dominar nada.

Esto puede ser peligroso al comenzar a intentar desarrollar sus fortalezas como nuevo desarrollador. Así que trate de evaluar qué tipo de alumno es y preste su enfoque donde más importa. Si está luchando con un plan de estudios extendido, es posible que eso no necesariamente lo ayude a obtener la experiencia que necesita para conseguir ese primer trabajo o el trabajo de sus sueños que está buscando.

Un enfoque novedoso, por ejemplo, podría ser tener un enfoque individual, pero desarrollar las habilidades completas en torno a esa fortaleza. Este podría ser un desarrollador de front-end que puede implementar sus propias aplicaciones web y continuar construyendo sobre ese conocimiento fundamental.

Además de eso, parte de ser un desarrollador de pila completa no es necesariamente poder decir que conoces los idiomas x, y, z. Comprender los conceptos de diseño de código y software, así como ser capaz de abordar cualquier desafío, es lo que hace a un gran desarrollador.

En resumen, intente descubrir qué es lo mejor para usted y no permita que su gran ambición se interponga en el camino de dominar su viaje.

Así que ¿por dónde empezamos?

Para los propósitos de este artículo, nos mantendremos con los puntos de interrupción tradicionales de lo que divide la pila (front end, back end, etc.). Aunque algunas personas dicen que ya no es una cosa, de manera realista, hay toneladas de trabajos para desarrolladores de pila completa y, día a día, se refieren a los puntos de interrupción tradicionales. El "desarrollador de pila completa" definitivamente no va a ninguna parte.

En lo que respecta a la pila, nos apoyaremos en las arquitecturas sin servidor / JAMstack, ya que seguirá creciendo. Y si los aprende, solo lo hará más comercializable con la cantidad de trabajos que surgen a su alrededor.

Como notará a continuación, esto no está destinado a abarcar todo tipo de base de datos y cada tipo de solución de renderizado. Un desarrollador fuerte debería ser capaz de ser flexible con sus herramientas, llegando a comprender los conceptos de su trabajo en lugar de ser un solo objetivo y solo ser capaz de ser productivo en un marco.

Si bien es posible que esté trabajando en React y se sienta cómodo con él en su trabajo actual (¡está bien!), Su próximo trabajo podría ser pesado para Vue o "¡sorpresa!" el líder de su equipo quiere reescribir la aplicación en Svelte. Intente comprender por qué está utilizando un marco de interfaz de usuario en primer lugar y cómo lo está ayudando a resolver el problema en cuestión.

Ahora entremos en ello ...

Interfaz

La interfaz de un sitio web o una aplicación suele ser la interfaz de usuario con la que interactúa la persona que usa su servicio. El mayor jugador del lenguaje en el juego es Javascript, donde normalmente se apoyará en bibliotecas de interfaz de usuario como React o Vue para administrar los componentes de su proyecto.

El uso de estos marcos de interfaz de usuario le permitirá crear "componentes", esencialmente bloques de código, que terminarán produciendo HTML con la capacidad de crear interacciones y estados dinámicos junto con su código. Esto se vuelve realmente poderoso, y aunque puede haber una pequeña curva para comenzar, se vuelve bastante agradable trabajar con él una vez que lo dominas.

Ya sea nuevo en el campo o con mucha experiencia, eventualmente puede encontrarse con jQuery. Si bien tiene sus méritos y ha servido bien a la comunidad, las características nativas de Javascript realmente han crecido y han creado menos demanda de la funcionalidad que jQuery pudo proporcionar. Ahora los desarrolladores se apoyan en los marcos de interfaz de usuario y en Javascript nativo.

Así que es bueno entender qué es jQuery, pero no recomiendo tomarse el tiempo para aprenderlo en este momento. Lo bueno es que, si consigue un trabajo que lo use, puede escribir Javascript nativo junto con jQuery, por lo que aprender Javascript vanilla en sí es la respuesta correcta.

Entonces, ¿qué debo aprender?

Si realmente es un principiante, tómese el tiempo para aprender HTML y CSS básicos. Puede que no sea tan divertido y atractivo como profundizar en Javascript, pero construir sobre los fundamentos de lo que hace la web será clave para comenzar con el pie derecho.

A continuación, aprenda Javascript. Seguirá siendo el rey en el futuro previsible. Javascript proporcionará la base de cualquier marco o biblioteca sobre la que construya, por lo que comprender cómo funcionan las partes y partes del lenguaje en sí lo ayudará a impulsarlo en su viaje de aprendizaje del lado frontal de las cosas.

También le facilitará la vida cuando intente comprender algunas de las complejidades de los diferentes patrones y los conceptos detrás de los marcos que utilizará.

Hablando de frameworks, React y Vue son probablemente los mejores candidatos dada su popularidad. React es el más popular del grupo y seguirá creciendo. Su equipo trabaja constantemente para madurar el marco y producir API que ayudarán a crear aplicaciones web modernas y rápidas.

Comenzar con la aplicación Create React o Gatsby incluso lo ayudará a activar fácilmente una aplicación React e inmediatamente llegar a una posición en la que pueda jugar en el código.

Si bien sería beneficioso llamar a los preprocesadores y herramientas de CSS como Sass, ahora hay un montón de soluciones para CSS, incluido CSS-in-JS.

Si bien poner CSS dentro de JS tiene algunos pros y contras, no necesariamente vale la pena señalar qué usar como una dirección particular, ya que realmente dependerá del equipo.

Comprender los conceptos básicos y el poder de CSS y cómo usarlo en su forma básica lo ayudará a prepararse para utilizarlo sin importar el marco.

Recursos

  • freecodecamp.org Certificación de diseño web receptivo //www.freecodecamp.org/learn
  • "Ponga Javascript: aprenda HTML y CSS primero" //www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/
  • Introducción de MDN a Javascript //developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • Solo curso de correo electrónico de Javascript //justjavascript.com/
  • Juego de aprendizaje JSRobot //lab.reaal.me/jsrobot/
  • Reactjs.org Introducción a React //reactjs.org/tutorial/tutorial.html
  • Tutoriales de gatsbyjs.org //www.gatsbyjs.org/tutorial/

Back end

En el mundo JAMstack, el back-end generalmente se referirá a las API que utilizan nuestros front-end para crear experiencias dinámicas al interactuar con los endpoints del cliente (como los de las API de CRUD). Ser capaz de realizar esas solicitudes desde el cliente eliminará la necesidad de realizar cualquier procesamiento antes de que la página se envíe al navegador.

Aunque no debería sentir que solo puede codificar en un idioma, poder escribir en Javascript le brinda una gran ventaja aquí, ya que puede desarrollar los fundamentos de trabajar con la parte posterior de las cosas con un lenguaje familiar (o viceversa con la parte delantera).

NodeJS es un tiempo de ejecución común que encontrará en la mayoría de los entornos de nube como una opción y le brindará una experiencia similar a la que esperaría en un navegador. La principal diferencia es que no tendrá acceso a ciertas API del navegador ni habrá un windowobjeto y las API asociadas a él.

Dicho esto, Python es también otro lenguaje popular y está creciendo, especialmente dada su popularidad en la comunidad de ingeniería y ciencia de datos. PHP y Ruby, si bien ambos son válidos y le brindarán opciones en el mercado laboral, no parecen ser tan populares y no estar tan en una tendencia general ascendente como Javascript y Python.

Con el idioma que elija, su mejor opción será aprender a crear servicios en la nube con los que sus aplicaciones puedan interactuar.

La creación de una lambda simple con la que pueda jugar, ya sea en AWS, Netlify o cualquier otro proveedor de la nube, le brindará una buena experiencia en cuanto a lo que puede esperar al trabajar en el campo.

E incluso si es posible que no se desarrolle directamente en una lambda en el trabajo que encuentre, podrá comenzar a familiarizarse con los conceptos que son fundamentales para trabajar con el back-end. Y, en última instancia, utilizará esas funciones para conectarse con otros servicios y bases de datos para crear sus propios servicios dinámicos.

Entonces, ¿qué debo aprender?

Si ya está trabajando en aprender Javascript desde el lado frontal de las cosas, continúe usando Javascript para su backend. Encienda una lambda usando las funciones de Netlify, donde solo necesita enfocarse en el código y Netlify se encarga del resto (como hacer que su función se construya e implemente).

Con el idioma que elija y la primera función, intente comenzar a trabajar con otros servicios dentro de su código para obtener experiencia trabajando con API de terceros.

Tal vez cree un punto final que pueda enviar un tweet utilizando la API de Twitter (pero no abuse de ella). Aprenda a crear una base de datos y configurar su función para interactuar con ella en un patrón CRUD, lo que le brindará un caso de uso más realista de cómo una aplicación típica podría interactuar con un backend.

Su objetivo aquí debe ser crear servicios con los que su interfaz interactúe a través de un punto final para realizar operaciones para la persona que usa su aplicación. La buena noticia es el impulso de la nube, tendrá un montón de opciones y opciones o niveles gratuitos para comenzar a jugar.

Recursos

  • “Comienzo súper simple a sin servidor” //kentcdodds.com/blog/super-simple-start-to-serverless
  • "Creación de aplicaciones CRUD sin servidor con Netlify Functions y FaunaDB" //www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/

DevOps y la nube

DevOps surge de la necesidad de poder crear soluciones que faciliten y aceleren el proceso de obtener el código de las personas que lo escriben en un estado implementado.

Este trabajo puede variar desde muchas responsabilidades hasta unas pocas, ya sea escribiendo scripts bash para una solución personalizada o escribiendo una plantilla de CloudFormation que crea todos los recursos necesarios para que se ejecute una aplicación.

Por lo general, encontrará esto incluido como parte de una orquestación más grande de flujos de trabajo de CI / CD que automatizan el proceso de construcción e implementación.

¡Y esto cambia constantemente! Dado el auge de la tecnología sin servidor, apareció el marco sin servidor que administra mucho de esto de una manera más fácil, lo que incluso llevó a AWS a crear su propia solución SAM. Las herramientas como Jenkins han existido durante un tiempo para la parte de CI / CD, pero ahora está viendo que Github, Gitlab y otros proveedores de control de fuente brindan sus propias soluciones y herramientas como CircleCI que se conectan directamente a su proyecto.

Tampoco es perfecto todavía: escribir plantillas de CloudFormation es abrumador. Escribir scripts de automatización tampoco es lo más divertido, ¡aunque es muy gratificante cuando funciona!

Pero esto está mejorando, que es donde encajan productos como Netlify y Zeit. Si bien se arraigan más desde el lado del alojamiento estático, donde compilas tu aplicación y la guardas en el almacenamiento, sus ofertas están creciendo, como las funciones de Netlify que son realmente solo AWS Lambdas que son más fáciles de configurar e implementar en un punto final completamente funcional (es realmente muy fácil).

Entonces, ¿qué debo aprender?

Si es la primera vez que configura este tipo de cosas, comience con Netlify. Configure una aplicación React o incluso un simple archivo HTML en un repositorio de Github, conéctelo a una nueva cuenta de Netlify y observe cómo se implementa.

A partir de ahí, o si ya tiene un poco de experiencia, comience a sentir curiosidad por lo que sucede detrás de escena. Es probable que Netlify tome su código, ejecute los comandos que configure (como yarn build) en un entorno virtual, descargue los archivos integrados en el almacenamiento como S3 y coloque una CDN frente a él, como CloudFront, para servir desde un punto final.

Primero intente hacerlo manualmente desde su computadora usando la consola de AWS y su CLI, luego escriba un script para automatizar todo el proceso de integración con Circle CI en su proyecto de Github en lugar de Netlify para implementarlo realmente en AWS.

Llevar eso a un nivel superior incluirá la puesta en marcha de servicios con los que su back-end podría interactuar. ¿Tiene una base de datos que utilizan sus servicios? Puede automatizar la activación de esa base de datos mediante CloudFormation o scripts bash.

Tratar su infraestructura como un código con recursos desechables y fácilmente recreables le ayudará a usted y a sus proyectos a ser más flexibles y a tener una mejor capacidad para volver a funcionar en caso de falla.

Y todo esto se aplica a cualquier proveedor de nube o CI / CD, no solo a AWS y Circle CI. Elija su herramienta de flujo de trabajo y nube favorita y ejecútela. El punto es que empiece a analizar las necesidades de su proyecto y analice lo que realmente está sucediendo en las partes automatizadas de la pila. Esto le ayudará a aprender más y ser más ingenioso para las necesidades de su proyecto.

Recursos

  • “Una guía paso a paso: implementación en Netlify” //www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
  • "Configuración de un sitio web estático" //docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
  • "Capacitación para profesionales en la nube con certificación AWS 2019: un curso de video gratuito de 4 horas" //www.freecodecamp.org/news/aws-certified-cloud-practitioner-training-2019-free-video-course/
  • Consulte los recursos de Javascript en Front End arriba

¿Y el diseño?

Sí, debe comprender los conceptos básicos del diseño. No, no necesitas ser diseñador.

Hay muchos aspectos sobre el diseño que acelerarán sus habilidades como desarrollador. Si bien todos sabemos que los diseñadores visuales y de UX producen magia, tener un conocimiento básico puede evitar que su aplicación se convierta en una gran decepción.

Todos en el proceso de desarrollo están trabajando hacia un objetivo que impacta al usuario final de una forma u otra. Ser capaz de comprender qué necesidades está tratando de resolver su trabajo y cómo eso afecta a los usuarios ayudará al equipo en su conjunto a desarrollar una solución final más completa.

Considere la posibilidad de que un desarrollador back-end cree una API para permitir que alguien administre usuarios en una aplicación. Los requisitos de la API son bastante reducidos y solo incluyen el nombre del usuario. Proporcionarlo como un solo campo de "nombre" en lugar de "primero" y "último" podría no ser la solución más intuitiva para la mayoría. Pero podría ser un descuido que complica la forma en que el desarrollador de front-end expone eso en la interfaz de usuario, lo que haría que al desarrollador le resultara complicado mostrarlo o que al usuario final le resultara confuso consumirlo.

Además de todo eso, el diseño puede afectar directamente la conversión. Si está construyendo en el espacio de comercio electrónico, tener un botón que no parece un botón puede evitar que las personas agreguen un producto a su carrito. Esto, por supuesto, evitará una compra, que es una pérdida de ingresos. Comprender cómo humanizar la interfaz de usuario incluso en un sentido básico puede literalmente hacer que su proyecto genere más dinero o simplemente ayudar a alguien a usarlo más fácilmente.

Y lo que es más importante, desea que su sitio sea accesible. Muchas personas tienen diferentes necesidades, ya sea que no puedan ver los colores de la misma manera o que no puedan escuchar los sonidos que produce su aplicación, desea reconocer las necesidades de los demás e intentar diseñar de una manera que haga que todos puedan utilizar su aplicación.

Entonces, ¿qué debo aprender?

Aunque no espero que hagas un curso completo, trata de ser consciente y curioso. Y tal vez la próxima vez no se salte ese artículo de diseño que vio aparecer en el twitter de freeCodeCamp.

Al crear soluciones, intente imaginar cómo se utilizará su trabajo. ¿Qué necesitarán los otros desarrolladores de su equipo de su API? ¿Qué necesitarán las personas que utilizan su aplicación de su interfaz?

También puede intentar inspirarse en lo que otros están haciendo en su espacio. ¿Cómo esperaría que se vea una aplicación si proporciona una funcionalidad similar? Esto no es una licencia para copiar o robar, pero debe comprender las necesidades que está resolviendo su solución. Considere por qué su botón Agregar al carrito es tan grande, por qué les brinda a los usuarios la capacidad de acercar la foto de un producto o cómo puede hacer que el diseño de una mesa sea un poco más útil.

En cuanto a accesibilidad, intenta aprender los conceptos básicos. Hay una cantidad creciente de recursos disponibles para ayudarlo a comprender las necesidades de los demás. Intente comprender qué discapacidades existen y cómo pueden afectar el uso de su aplicación. Tal vez observe algunos patrones comunes sobre cómo abordar esas preocupaciones.

La mayoría de las veces, no es demasiado difícil de incorporar, y si adquiere el hábito de hacerlo desde el principio, ni siquiera lo pensará la próxima vez que cree una aplicación.

Recursos

  • Diseño para desarrolladores //thoughtbot.com/upcase/design-for-developers
  • Hack Design //hackdesign.org
  • Diseño para hackers //designforhackers.com/
  • Introducción a la accesibilidad web //webaim.org/intro/

Otras cosas si recién está comenzando

Gran parte de este artículo asume que tiene algunos de los conceptos básicos, como comprender qué es git y el control de código fuente o simplemente tener configurado su editor de código. Si realmente está comenzando, querrá al menos tener una comprensión simple de estos conceptos, ya que rápidamente se volverá más desafiante sin ellos.

También hay algo que decir sobre cómo aprender a usar su terminal. Puede ser abrumador no usar una GUI si eres nuevo, pero una vez que te pongas en movimiento, descubrirás rápidamente que serás más productivo usando una terminal y muchos proyectos requieren el uso de una terminal de todos modos.

Entonces, ¿qué debo aprender?

Lo primero es lo primero, configure su editor de código. Visual Studio Code está de moda en este momento, pero hay otros que le servirán bien según sus preferencias, como Atom o Sublime Text. Incluso encontrará IDE basados ​​en la nube como Repl.it o simplemente puede comenzar con una barrera de entrada más baja jugando en CodePen o JSFiddle.

De cualquier manera, una vez que esté listo para comenzar a codificar, querrá comprender qué es el control de fuente, dónde git es el jugador más importante en este momento. Git es una herramienta poderosa que le permite realizar un seguimiento de los cambios en el código y ser más productivo colaborando con otros desarrolladores.

Querrá familiarizarse con algunos de los comandos básicos de git, como agregar nuevos cambios, así como qué son las ramas y cómo usarlas. Git es un mundo enorme, no necesita dominarlo de inmediato, aprenderá rápidamente que hay una cantidad infinita de cosas nuevas que aprender en su viaje para dominar su git fu.

Para muchas de las herramientas que usará, hay GUI disponibles como GitKraken, pero aún estará un poco limitado con lo que puede hacer. Aprender a manejar los terminales predeterminados en su máquina o descargar otras opciones como iterm2 (mi preferencia) o Xterm.js será su mejor opción. Bono: te sentirás como un hacker de películas cada vez que lo uses (¿o solo soy yo?).

Recursos

  • Introducción a Visual Studio Code //www.codecademy.com/articles/visual-studio-code
  • Recursos de Git de Github //try.github.io/
  • Aprende git ramificando el juego //learngitbranching.js.org/
  • Introducción a la línea de comandos de Mac //blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line

Otras cosas si buscas más

Hay mucho más con lo que puedes bajar rápidamente por una madriguera de conejo. Recuerde no extender su enfoque y trate de no abrumarse. Pero si se siente bastante bien acerca de dónde se encuentra, hay algunos otros conceptos que solo le ayudarán a afrontar los desafíos del mundo real.

Testing y las diferentes metodologías

Escribir código es una cosa, pero poder configurar pruebas efectivas ayudará a fortalecer su código y evitará que salgan errores. No querrá perder su tiempo futuro o incluso costarle dinero a su producto cuando el sitio se caiga. Aprender a escribir pruebas y los diferentes enfoques es importante para solidificar su código.

Herramientas del navegador como Chrome DevTools

Una de las herramientas más poderosas que puedes tener al depurar, en mi opinión, es poder depurar tu aplicación en el navegador.

Ya sea para ver cómo se representa el DOM, jugar con el CSS o depurar sus solicitudes de red, aprenderá rápidamente cómo ahorrar tiempo e identificar más fácilmente de dónde proviene el error.

HTTP y cómo depurar solicitudes en el panel de red

Dado que la web está basada en Internet, su aplicación finalmente realizará solicitudes a otros servidores. Cuando esto sucede, comprender los puntos de estrangulamiento de la solicitud o simplemente cómo se realiza una solicitud puede ayudarlo a comprender por qué su aplicación parece retrasada o por qué su botón de guardar no funciona.

Tener una comprensión básica de cómo funcionan las solicitudes y cómo visualizarlas para la depuración será de gran ayuda en su viaje.

Software de código abierto y administradores de paquetes

Esta no es tanto una habilidad o herramienta para aprender como una forma en que se distribuye el software. A medida que comience a crear soluciones de código, descubrirá que muchos de nosotros nos apoyamos en paquetes de código abierto. La mayoría de las veces es a través de npm si está escribiendo Javascript, lo que nos ayuda a ser más productivos sin tener que reinventar la rueda cada vez.

Dedique algún tiempo a comprender el concepto de código abierto e incluso considere retribuir contribuyendo a su proyecto favorito. Por lo general, echar una mano es muy apreciado, lo ayudará a ganar experiencia, ¡e incluso podría obtener un botín gratis en su primera solicitud de extracción aprobada! Solo sé respetuoso, también hay una persona real al otro lado de la solicitud.

¿Qué más?

Esta lista puede durar para siempre, ya que hay mucho en el mundo de la codificación. ¿Qué más crees que es importante en el viaje de uno para convertirse en un maestro del desarrollo? ¡Envíame un tweet o un DM si crees que me estoy perdiendo algo importante!

¡Estás que ardes! Tirando de todo junto

Dada toda la experiencia que habrá acumulado con lo anterior, debería estar en condiciones de poder crear una aplicación completa de principio a fin por sí mismo. ¿Entiendes el poder que tienes?

Aquí es donde comienza la diversión. Intente crear una nueva aplicación, no importa cuál sea, simplemente cree algo. Lo mejor que puede hacer para aprender es ganar experiencia haciendo. No importa si es uno de los millones de tutoriales de tareas pendientes que encontrarás o si te enseñas a codificar construyendo una de las redes sociales más grandes como el creador de Instagram.

Desde aquí, debería poder crear:

  • La interfaz de una aplicación web que se ejecuta en el navegador
  • Servicios de backend a los que su aplicación web puede realizar solicitudes a través de puntos finales
  • Escriba un script para conectarlo a una herramienta CI / CD para automatizar su proceso de construcción e implementación
  • Bono: tomar buenas decisiones sobre cómo se ve su interfaz para que la gente realmente pueda usarla.

¡Ve y construye! Comparta con nosotros su viaje de desarrollo en Twitter usando el hashtag #codejourney. Nos encantaría saber más sobre dónde ha estado y qué ha construido o adónde va y qué quiere construir.

¡Sígueme para obtener más Javascript, UX y otras cosas interesantes!

  • ? Sigueme en Twitter
  • ? ️ Suscríbete a mi Youtube
  • ✉️ Suscríbete a mi boletín