Mi viaje para convertirme en desarrollador web desde cero sin un título en informática (y lo que aprendí de ...

Programación

Primero, déjame presentarme. Mi nombre es Sergei García y soy un desarrollador front-end a tiempo completo con 2 años de experiencia. En ese tiempo, trabajé como desarrollador front-end tanto para una firma consultora Forbes 500 como para una pequeña empresa.

Puede que esto no parezca mucha experiencia, pero terminar mi segundo año como desarrollador ha sido un gran hito para mí. Esto se debe a que no tenía experiencia real en desarrollo web, y no tenía mucha experiencia en programación en general más allá de la capacitación básica en C # y Java que obtuve en algunos cursos en línea. Tampoco tenía un título en informática desde que me gradué con un título en gestión de proyectos de TI.

Nunca había escrito sobre mi experiencia a pesar de toda la ayuda que recibí de recursos maravillosos como Medium, Stack Overflow y los subreddits de programación de Reddit. Así que hoy decidí cambiar eso. Hoy te voy a contar lo que salió bien y lo que no, para que si te embarcas en este viaje, tengas mejor suerte que yo.

Sé que hay muchos artículos como este, pero no muchos de ellos discuten el proceso con el beneficio de dos años más de retrospectiva.

Comenzaré con mi viaje, incluyendo lo que salió mal en el camino. Si solo le interesan mis sugerencias sobre la ruta más corta posible para convertirse en desarrollador web desde cero, no dude en pasar a la última sección: La ruta más corta .

Entonces, sin más preámbulos, ¡comencemos!

Obtener lo básico

Después de decidir que quería dedicarme al desarrollo web, la primera pregunta en mi mente fue "¿Qué aprendo?" Después de investigar un poco, terminé haciendo mi ruta de aprendizaje en función de lo que pedían la mayoría de los puestos de desarrollador web de nivel de entrada, que era:

  • JavaScript
  • HTML y CSS
  • Preprocesadores CSS (Less & Sass)
  • Diseño de respuesta
  • AngularJS
  • Patrones de diseño
  • Git
  • NodeJS
  • Corredores de tareas

Así fue como fue.

Javascript

Comencé mi viaje aprendiendo JavaScript a través de CodeSchool(pagado) y Codecademy(gratis). Si no los conoce, son excelentes sitios web que le permiten aprender a codificar codificando dentro del navegador.

Descubrí que los recursos de aprendizaje como este eran los mejores cuando recién comenzaba. Solo tenga en cuenta que este método de aprendizaje se cansa rápidamente una vez que ingresa a cosas más avanzadas, ya que sus algoritmos para verificar si resolvió el ejemplo de código correctamente tienen algunos problemas de precisión. Ambos cursos de introducción a JavaScript fueron excepcionales y los recomiendo encarecidamente.

Una vez que obtuve los conceptos básicos, procedí a obtener una base de JavaScript más sólida leyendo el libro Eloquent Javascript: Una introducción moderna a la programación de Haverbeke (gratis).

Mucha gente me recomendó este libro en los foros de JavaScript como una lectura obligada, y por una buena razón. Ese libro fue difícil, especialmente si estás aprendiendo programación como yo en ese entonces. Pero me alegro de no haberme rendido y seguir así. Fue fenomenal debido a la amplia gama de conceptos de programación que cubre, aunque a veces fue un poco despiadado. Hagas lo que hagas, no te saltes los desafíos del código. Una vez que termine este libro, finalmente podrá decir con confianza que tiene un buen conocimiento de JavaScript.

Opcionalmente, también puede aprender jQuery (aunque realmente no recomiendo aprenderlo todavía, más sobre esto más adelante). Puede aprenderlo a través del curso Try jQuery de CodeSchool.

HTML y CSS

Después de aprender JavaScript, procedí a aprender los fundamentos de HTML y CSS y el diseño web a través de la ruta de aprendizaje de HTML y CSS de CodeSchool. Estos cursos siguen siendo mis favoritos hoy en día, ya que el ritmo es excelente y el alcance general de lo que cubren me permitió adquirir una base más sólida para esto.

También puede cambiar esto fácilmente por algo como el curso HTML y CSS de Codecademy y aún obtener resultados similares. O si está preparado para un desafío, el curso Introducción a HTML y CSS de Udacity es mucho más completo y un poco más desafiante.

Bonificación : si puede conseguir HTML y CSS de Jon Duckett : diseñe y cree sitios weblibro, también es un punto de partida sólido como una roca para aprender HTML y CSS (con una pizca de diseño web). Tiene una alta calificación (4.7 / 5 en Amazon), ofrece una sólida introducción al mundo del desarrollo web. Es un libro hermoso gracias a su diseño limpio con letras grandes y páginas coloridas. A menudo vuelvo a él solo para admirarlo.

Menos / Sass

Para aquellos que no estén familiarizados, Less & Sass son transpiladores de CSS que le permiten escribir CSS de una manera más elegante. Esto le permite hacer cosas que normalmente no son compatibles, como anidar reglas CSS. Una vez terminado, estos transpiladores de CSS "compilan" su código y lo convierten a CSS normal.

Hay 2 transpiladores de CSS principales en este momento: Less y Sass . Sass es el más popular, pero descubrí que aprender Less primero es más fácil, principalmente porque usar Sass en tu computadora requiere también instalar Ruby, que no me gustaba.

Puede obtener una descripción general rápida pero completa de Less utilizando el compilador de Less en línea de WinLess y sus ejemplos de código para ver cómo su código de Less se convertiría en CSS. También puede probar Sass en línea usando SassMeister (aunque esto no incluye ejemplos de código).

No importa si primero aprendes Less o Sass. Son extremadamente similares, por lo que una vez que conoces a uno, prácticamente conoces al otro. Puede encontrar una excelente comparación rápida entre Less y Sass en el artículo de Shelby Moulden Comparación entre LESS y SASS.

Diseño de respuesta

Originalmente aprendí sobre diseño receptivo y Bootstrap usando la ruta HTML y CSS de Codeschool, pero recientemente descubrí que el curso de Udacity de Google sobre Fundamentos del diseño web receptivo es fantástico para cubrir los conceptos básicos y más allá de una manera mucho más completa que Codeschool.

Puede hacer un diseño receptivo sin ningún marco adicional, pero es mucho más fácil con la ayuda de un marco receptivo como Bootstrap. La documentación oficial de Bootstrap está muy bien hecha, por lo que no debería tener problemas para comenzar con ella.

Si tiene problemas para comprender sus principios básicos, lea la publicación del blog de Froont sobre 9 principios básicos del diseño web receptivo. Tiene hermosas animaciones limpias y simples que ayudan a ilustrar visualmente los principios del diseño web receptivo.

AngularJS

Realmente no sabía qué era exactamente AngularJS en ese entonces, pero sabía que todos estaban hablando de eso, y que si quería convertirme en desarrollador web necesitaba aprenderlo. Encontré las decisiones de diseño de Google Developer en AngularJS para proporcionar la mejor descripción general de lo que era AngularJS y cómo mejoró la creación de aplicaciones web.

Primero pensé en aprender AngularJS a través de su documentación oficial, pero resultó ser una idea terrible. La documentación no era muy fácil para los principiantes y el formato desordenado dificultaba su lectura y comprensión.

Luego procedí a aprender AngularJS a través de Codeschool. Con mi experiencia positiva en los cursos de JavaScript y CSS también de allí, esperaba nada menos que un gran curso. Estaba equivocado. El curso fue un desastre desde el principio, ya que el algoritmo utilizado para verificar si acertó el ejemplo de código a veces no funcionó bien y marcó su solución claramente correcta como incorrecta. Incluso hubo ocasiones en las que todo lo que se necesitó para arreglar el sistema de validación roto fue actualizar la página. En cuanto al contenido del curso, tampoco fue genial. Hizo un buen trabajo al explicar los componentes básicos de una aplicación AngularJS, pero hizo un trabajo terrible al integrarlos en una aplicación real, dejándome con muchas más preguntas de las que comencé.

Después de buscar en foros, me encontré con Egghead.io(gratis / pagado) donde tuve mucha mejor suerte. El material del curso fue mucho más limpio, más conciso y más completo, lo que hizo que la experiencia fuera mucho mejor. Sin mencionar que, además de sus cursos, tienen lecciones breves de 2 a 5 minutos que cubren temas importantes. (Por ejemplo: ¿Qué es un controlador? ¿Qué es un filtro? ¿Qué es $ scope?) Esto hace que sea realmente fácil comprender los conceptos básicos. También tienen algunos videos que requieren pago, pero generalmente son los que cubren temas angulares más avanzados que no necesitarás hasta más adelante. Tomé su curso de Fundamentos de AngularJS y quedé completamente satisfecho con los resultados (y también me convertí en un gran fanático de los cursos de Egghead.io en el proceso).

Patrones de diseño

Los patrones de diseño son básicamente soluciones de código reutilizables que se pueden usar repetidamente para resolver problemas comunes de software. Tener una base en esto lo convertirá en un desarrollador de software mucho más competitivo en cualquier lenguaje de programación. Esto también le facilitará la comprensión del código de otras personas, ya que identificará rápidamente qué patrón de diseño usaron en su código para comprenderlo mejor.

Encontré las 2 mejores fuentes para aprender esto son los patrones de diseño de JavaScript de doFactory y los patrones de diseño de JavaScript de aprendizaje de Addy Osmani. DoFactory me pareció mucho más fácil de entender, mientras que el libro de Addy Osmani era mucho más completo.

DevTools de Chrome

Chrome es una de las herramientas más poderosas para un desarrollador web. Cuanto antes lo domines, más tiempo podrás ahorrar más adelante. El curso gratuito Explore y Master Chrome DevTools de Codeschool hace un gran trabajo al presentarlos.

Git (control de versiones)

Ah, Git, la herramienta que nunca supe que necesitaba hasta que descubrí lo que podía hacer. Básicamente, Git te permite realizar un seguimiento de los cambios que realizas en tu código para que, si algo sale mal, puedas retroceder a un punto anterior en el tiempo. También te permite ver el historial de tu código.

Descubrí que el curso gratuito Try Github de CodeSchool es una forma amigable de comenzar. El entrenamiento de Git de Atlassian fue excelente para cubrir los comandos más avanzados disponibles. Git Learning Path de Codeschool también es excelente para cubrir los fundamentos de Git.

NodeJS

No pasó mucho tiempo antes de que aprendiera que tener un conocimiento básico de NodeJS me ayudaría mucho en mi búsqueda de convertirme en desarrollador web (más sobre esto pronto).

Probé los cursos de Codeschool en Node, pero encontré que realmente carecían de contenido. Descubrí que NodeSchool.io es un maestro mucho mejor para entender bien los conceptos básicos, ¡y fue divertido! Me encantó el enfoque práctico que ofrecía, que era similar a Codeschool y Codecademy, con la mejora adicional de que realmente estaba ejecutando NodeJS.

Corredores de tareas (Grunt & Gulp)

Grunt y Gulp fueron una gran sorpresa para mí porque no tenía ni idea de que existieran herramientas como esa, ¡pero estoy muy contento de que sí! Básicamente, estos corredores de tareas le permiten automatizar tareas comunes. Por ejemplo, ¿recuerdas Less / Sass? Normalmente, tendría que ejecutar manualmente el compilador de CSS cada vez que realiza una edición para que compile el CSS y luego actualizar el navegador. Con un programa de ejecución de tareas, puede configurarlo para que observe cambios en sus archivos Less / Sass y, cuando detecte un cambio, compile su CSS y actualice automáticamente el navegador. Esto es inmensamente útil para reducir el tiempo de desarrollo.

Hay dos corredores de tareas principales en este momento: Grunt y Gulp. Si bien hacen exactamente lo mismo, funcionan de maneras muy diferentes, siendo Grunt mucho más detallado y orientado a la configuración, y Gulp es más corto para escribir y prefiere el código sobre la configuración.

Conocer NodeJS lo ayudará a escribir mejores archivos Grunt y Gulp, ya que ambos se ejecutan en NodeJS . Puedes elegir lo que quieras, pero descubrí que Gulp es mucho más fácil de aprender y escribir. Todavía hoy lo prefiero debido a su enfoque minimalista, pero poderoso, basado en tuberías.

Encontré que los cursos de Scotch.io sobre Grunt y Gulp están entre los mejores que existen.

Desafíos que enfrenté en mi primer trabajo

Una vez que cubrí los fundamentos del desarrollo web, estaba listo para mi primera entrevista de desarrollo web para un puesto de nivel de entrada. No entraré en detalles sobre la entrevista ya que este no es el enfoque principal de este artículo. Pero diré que me dijeron que mis conocimientos de JavaScript relativamente sólidos me ayudaron a asegurar el puesto. (¡Gracias, Eloquent JavaScript!)

Tengo que decir que estaba bastante nervioso en mi primer proyecto. Implicaba la creación de componentes web reutilizables con HTML, CSS y JavaScript, junto con Bootstrap, Sass, Grunt como herramientas. T

Los dos errores más grandes que encontré al principio fueron:

  1. Miedo al fracaso. Debido a que yo era el chico nuevo, temía constantemente que mi código fuera incorrecto o mal hecho, por lo que pasé mucho tiempo revisando todo y cumpliendo con las mejores prácticas de codificación. Debido a esto, rara vez intenté soluciones de formas nuevas y creativas debido a mi temor de que al final no funcionaran correctamente. Esto efectivamente apagó mi impulso para aprender cosas nuevas.
  2. Haciendo las cosas porque la persona "X" que sabe mejor que yo lo dijo. Hice esto mucho al principio. Si bien no es completamente incorrecto, hacer las cosas de cierta manera solo porque "X" el experto en el tema lo dijo, sin saber por qué, me lleva a no saber realmente cuándo y por qué las cosas se hicieron como se hicieron. Pronto aprendí que había excepciones para todo y que siempre debe saber la razón detrás de las mejores prácticas.

Afortunadamente, tuve un líder de equipo comprensivo durante mi primer proyecto que me ayudó a superar estos problemas. Constantemente me motivaba a probar cosas nuevas, incluso si las cosas salían mal a veces. También me dijo que cuestionara todo, incluso sus enseñanzas.

Con el tiempo, aprendí mi lección. Desde entonces, siempre he sido una persona con ganas de probar cosas nuevas. Siempre trato de entender por qué existen las mejores prácticas, cuándo son correctas y cuándo no se aplican a una situación.

Usar AngularJS en un proyecto real también supuso un gran desafío para mí. Esto se debió principalmente a que muchas de las cosas que hice con él, las hice sin comprender completamente por qué sucedieron. Pensé en ello como "magia angular".

Hubo muchas ocasiones en las que me hubiera gustado saber cómo funcionaba Angular, pero daba miedo mirar la documentación.

Finalmente me encontré con un libro increíble llamado Build Your Own AngularJS. No lo leí todo, pero leer la sección sobre alcances y vigías y cómo funcionaban realmente reveló cómo la magia detrás de angular no era realmente mágica. Era solo una forma inteligente de mantener la vinculación de datos mediante comprobaciones sucias y ámbitos anidados. Recomiendo encarecidamente este libro a cualquiera que busque comprender completamente AngularJS.

El otro desafío al que me enfrenté un año después fue qué tan rápido progresaba el desarrollo web. Acababa de dominar AngularJS y Grunt, y me sentía orgulloso y poderoso, solo para descubrir pronto que Gulp y ReactJS estaban en el horizonte. Y un año después, después de aprenderlos, Webpack comenzó a ganar terreno, y yo también tuve que aprender eso. Como puedes imaginar, una gran parte de mí estaba bastante decepcionada con la rapidez con la que algunos de mis conocimientos se volvieron obsoletos. Pero un compañero de trabajo pronto me iluminó al decirme algo que cambió la forma en que veía las bibliotecas y los marcos para siempre:

"Las bibliotecas y los marcos pueden volverse obsoletos, pero los conceptos y las soluciones que proponen a menudo sobreviven al paso del tiempo".

Él estaba en lo correcto. AngularJS puede haberse vuelto obsoleto, pero comprender completamente la magia detrás de él me ayudó a comprender mejor la arquitectura de componentes web de React, que mejoró el concepto de Directivas de Angular. También me ayudó a comprender cómo ReactJS ganó tanta popularidad, así como qué tipo de futuro me esperaba.

No recuerdo haber enfrentado ningún otro desafío importante en mis proyectos posteriores. Pero lo que diré es que en el transcurso de los 2 años que he estado haciendo desarrollo web, lo # 1 que me ayudó a tener éxito (según mis propios compañeros de trabajo) fue mi entusiasmo y mi poderoso impulso para estar siempre alerta. para aprender cosas nuevas. Pronto descubrí que esta era una combinación ganadora con el desarrollo web, ya que las cosas aquí cambian muy, muy rápido, con nuevos marcos y bibliotecas que surgen constantemente.

En la otra cara de la moneda, la otra cosa que me ayudó muchísimo, y algo que descubrí recientemente, fue comprender qué no aprender. Esto se volvió fundamental para mi proceso de convertirme en un mejor desarrollador web.

No es raro ver gente criticando el ritmo anormalmente rápido de evolución de las tecnologías web, o cómo aparece una nueva biblioteca o marco de JavaScript casi todos los días. Pero con el tiempo vi la luz y finalmente entendí:

No es necesario que aprenda todas las bibliotecas o marcos nuevos que aparecen.

A menudo, es una gran idea hacer una aplicación de ejemplo de hola mundo simple para que pueda ver lo que ofrece un marco. Entonces puedes seguir adelante. Pero, por lo general, debe intentar concentrarse en lo que mejor se adapte a las necesidades de su proyecto. Esto puede ser difícil al principio, pero afortunadamente existen grandes lugares como Stack Overflow, Medium y Reddit donde puede encontrar discusiones útiles entre marcos y descubrir cuáles se ajustan mejor a sus casos de uso específicos.

Ir más lejos

En los próximos años, procedí a mejorar continuamente de las siguientes maneras

JavaScript

Una vez que termine Eloquent JavaScript, es bastante fácil decirlo y sentir que ha dominado JavaScript, pero luego aparece You Don't Know JS y lo destruye por completo (o al menos a mí). Esta serie de libros (gratis por cierto) me fue mencionada varias veces por algunos desarrolladores web senior en la oficina como el libro para leer, y solo hasta que lo haya leído puedo decir que sé completamente JavaScript. Tenían razón, ya que página tras página me dejaba alucinado continuamente en cuanto a lo realmente complejo que era JavaScript, así como muchas, muchas trampas comunes que pueden tener personas sin experiencia y con experiencia sin una comprensión adecuada de JavaScript.

Leer esa serie de libros realmente me abrió la mente, y también se la recomiendo a cualquiera que quiera llamarse un desarrollador experto en JavaScript. Una vez que lo haya sacado del camino, hay 2 recursos adicionales que recomiendo encarecidamente para obtener un conocimiento de JavaScript aún más avanzado;

  • JavaScript, las mejores partes: una charla increíble de D. Crockford que habla sobre las mayores debilidades de JavaScript, es "Foot Guns" y cómo utilizarlas como sus fortalezas.
  • Los dos pilares de JavaScript: un artículo sólido del reconocido escritor de JavaScript Medium Eric Elliott que habla sobre los 2 grandes pilares de JavaScript: herencia prototípica y programación funcional

Una vez que tenga un conocimiento profundo de JavaScript, continúe con ECMASCript 2015 (también conocido como ES6), el estándar JavaScript más reciente y actual. El artículo ECMAScript 6 (ES6) de Smashing Magazine: Novedades de la próxima versión de JavaScript es una breve reseña de las novedades de ES6. Puede probar ES6 en el navegador utilizando el transpilador en línea de Babel.

CSS

CSS puede volverse complicado y desorganizado muy, muy rápidamente. Se han propuesto bastantes metodologías diferentes para escribir CSS más limpio, pero se destacan 2, que le recomiendo que lea sobre lo antes posible para mantenerse competitivo:

  • SMACSS: Arquitectura escalable y modular para CSS. Una guía flexible para desarrollar sitios pequeños y grandes.
  • BEM: una metodología que le ayuda a lograr componentes reutilizables y compartir código en el front-end.

Personalmente, prefiero SMACSS por su apariencia más limpia, pero algunas empresas y CSS Frameworks todavía usan BEM, por lo que vale la pena conocer ambos.

También debería empezar a centrarse en el rendimiento de su CSS. El artículo de Smashing Magazine Gestión de la optimización del rendimiento móvil y el artículo de HTML5 Rocks High Performance Animation hicieron un trabajo sólido al proporcionar una ventaja en esto. Una lectura rápida de ambos artículos debería darle una base sólida.

Paquetes de JavaScript

A estas alturas deberías tener un gran conocimiento de Grunt o Gulp. El siguiente paso es agregar un paquete de JavaScript a su ejecutor de tareas, lo que permitirá una organización más modular de su aplicación JavaScript.

Los dos jugadores más importantes en este momento son:

  • Browserify: le permite solicitar módulos en el navegador agrupando todas sus dependencias.
  • Webpack: básicamente Browserify con esteroides. Más difícil de configurar y configurar.

El minicurso de Scotch.io Getting Started with Browserify puede proporcionarle un impulso con browserify, mientras que el artículo de David Fox Powell ¿Por qué nadie puede escribir un tutorial simple de Webpack? es una excelente y divertida introducción al paquete web.

Personalmente no he pasado mucho tiempo usando webpack, pero en mi tiempo con él, tengo que decir que ha sido increíble, incluso si es un poco más difícil de configurar. Si recién está comenzando, optaría por Browserify, ya que es mucho más simple de configurar. Solo tenga en cuenta que el paquete web es el futuro y qué proyectos más grandes están comenzando a usar.

ReactJS

ReactJS está ganando popularidad rápidamente, y no parece estar desacelerándose, hasta el punto de que la gente pregunta "¿React está matando a Angular?"

Learning React.js: Getting Started and Concepts de Scotch.io proporciona una descripción general sólida de React. Una vez que lo haya sacado del camino, continúe con el curso de Egghead.io sobre React Fundamentals, donde creará una aplicación ReactJS completamente funcional y luego la migrará a la sintaxis ES6. Puede seguir con la documentación oficial de ReactJS que está muy bien hecha y le permitirá dominarla por completo.

Dado que React es solo la vista, es muy recomendable que aprenda Redux. La mayoría de los cursos en Redux son un poco complejos en mi opinión, pero CSS Tricks Leveling Up with React: Redux logra un gran equilibrio entre la simplicidad y la información al comenzar con Redux.

Es posible que también haya oído hablar de Flux en este momento, pero si se pregunta por qué debería usar Redux en lugar de Flux, consulte la pregunta en Stack Overflow ¿Por qué usar Redux en Facebook Flux? que fue respondido por el creador de Redux!

Mirando hacia atrás en mis errores y lo que aprendí

Cometí muchos errores en mis 2 años de aprendizaje sobre desarrollo web. En general, creo que mi mayor error fue no dominar los conceptos básicos antes de pasar a bibliotecas y marcos. Supongo que esto se aplica a casi todos los lenguajes de programación que existen, pero en mi opinión se aplica aún más a JavaScript. Esto se debe a que, en muchos sentidos, JavaScript es un lenguaje roto y contiene muchos "Foot Guns" (debería haber oído hablar de esto si vio la charla de D. Crockford sobre "JavaScript, las mejores partes" que mencioné anteriormente). Estos pueden hacer la vida insoportablemente difícil si no los comprende completamente.

Recuerdo que una vez me quedé atascado en un problema de AngularJS con $ scope que me llevó 3 días depurar, solo para descubrir que ni siquiera era un problema de AngularJS, sino un problema de JavaScript que me causé a mí mismo por no entender cómo funciona esto .

Código limpio

Es extraño que no vea que se hable de esto con tanta frecuencia. No siempre me gustó escribir código limpio, pero, sinceramente, es una de las cosas de las que estoy más orgulloso de haber aprendido. Esto se debe a que a todos les encanta quejarse de que su último lugar tenía una de las peores y más feas bases de código del mundo. Entonces, ¿por qué nadie puede hablar de lo genial que fue el último? ¿Cómo su código terminó tan limpio y bien hecho que se sintieron orgullosos de él?

Esta es una tendencia que me gustaría cambiar, y creo que se puede hacer una diferencia si suficientes personas la presionan. Esfuércese por hacer que los nombres de variables y funciones sean comprensibles en inglés, incluso si tiene que escribir un poco más. Si no lo hace, solo tendrá que documentarlo manualmente en el futuro para que quede más claro. Esto también hará que su código base general sea más difícil de entender para los nuevos desarrolladores y para usted mismo. Si, tu mismo. ¿Por qué a ti mismo? Porque si no aplica un código limpio, ¿qué le hace pensar que sus compañeros de trabajo deberían aplicarlo y escribir código limpio para que usted lo entienda fácilmente? Prediquemos con el ejemplo.

Y si ese no es un incentivo suficientemente bueno, la gente a menudo reconoce y valora a los escritores de código limpio. Descubrirá que al escribir un código limpio, sus compañeros de trabajo y amigos disfrutarán aún más trabajando con usted y, a su vez, usted vivirá una vida más feliz.

jQuery

Algunos de ustedes pueden notar que tampoco hice mucho énfasis en jQuery. Esto se debe a que, en mi experiencia, descubrí que jQuery me hizo más daño que bien al principio. Algunos de ustedes pueden no estar de acuerdo, pero permítanme explicarles: cuando lo aprendí por primera vez, la idea general que entendí era que jQuery estaba en todas partes y que se podía usar para casi todo. Debido a esto, me acostumbré a usar jQuery para casi cualquier cosa, y para cualquier problema que encontré, busqué una solución que usara jQuery.

No me malinterpretes, jQuery fue increíble cuando lo usé, tan increíble de hecho, que ignoré ciegamente que el 90% de lo que hice con jQuery se podía hacer de forma nativa en los navegadores modernos con una sintaxis igualmente fácil.

Ahora puede estar pensando: “Entonces, ¿qué hay de malo en eso? jQuery no pesa mucho de todos modos y usándolo terminas escribiendo menos código que si hicieras las cosas de forma nativa ". Pero usar jQuery sobre API nativas no fue el problema. El problema era que toda mi forma de pensar y todas las soluciones a problemas comunes que conocía hasta ese momento requerían que jQuery funcionara. Y esto se convirtió en un gran problema cuando obtuve mi primer proyecto y me dijeron que jQuery no era una dependencia.

Usar jQuery me hizo inútil sin él y me hizo ignorar por completo los métodos y soluciones nativos que siempre han existido. También hizo que todas mis soluciones fueran menos portátiles, ya que su uso requería jQuery.

Desde entonces, me he esforzado por no usar jQuery a menos que sea absolutamente necesario y realmente brinde una gran mejora en la eficiencia y legibilidad de nuestro código base (por ejemplo, manipulación de DOM pesado).

Una vez más, no me malinterpretes, jQuery es genial, pero si pudiera retroceder en el tiempo y encontrarme con mi yo anterior que estaba aprendiendo desarrollo web, me recomendaría encarecidamente no aprender jQuery por completo hasta que sepa cómo hacer cosas sin él. Si tiene problemas para hacer el cambio como lo hice yo, consulte Es posible que no necesite jQuery.

Cursos

En cuanto al material del curso; mientras que muchos de los cursos de CodeSchool fueron sobresalientes (la rama de HTML y CSS fue especialmente fantástica), incluso si algunos de sus cursos sobre frameworks fracasaron un poco (AngularJS, BackboneJS, etc.).

También tomé muchos cursos de Pluralsight, que no mencioné porque después de todo este tiempo, llegué a la conclusión de que elegir su ruta de aprendizaje es en general una mala idea y poco confiable . Dado que sus cursos están hechos por profesores que no siempre (en mi opinión) son muy buenos en la enseñanza, descubrí que la calidad de sus cursos fluctúa enormemente ya que los estándares de calidad de sus cursos no existen. He tenido cursos en los que incluso la persona que imparte el curso sonaba como si se estuviera quedando dormido. Y, sinceramente, no tengo la capacidad de atención para seguir prestando atención en un curso de 6 a 10 horas, y muchos de ellos duran tanto tiempo, si no más.

Pasé unas buenas 80-100 horas de entrenamiento en Pluralsight y, sinceramente, quiero recuperar una buena parte. No me malinterpretes, tuve algunos cursos increíbles sobre Pluralsight, pero su enfoque en la cantidad sobre la calidad realmente me hizo perder el tiempo. Podría haber aprendido mucho más si hubiera tomado cursos de mejores fuentes como Egghead.io y CodeSchool, donde valoran más la calidad de la cantidad.

La única razón por la que podría pensar en alguien que use Pluralsight es para tomar un curso que ningún otro sitio web tiene en una tecnología más oscura (como Installshield o Xamarin), o tomar algunos cursos muy específicos que saben que fueron muy bien recibidos y revisado (Por ejemplo, Fundamentos angulares de John Papa).

En general, si desea utilizar Pluralsight, asegúrese de que está tomando cursos seleccionados por alguien que los tomó primero y que son reconocidos como de alta calidad y útiles.

También probé recientemente el entrenamiento de Team Treehouse y tengo que decir que estoy asombrado por la calidad de sus cursos, incluso rivalizando con la de CodeSchool, y su material de curso es muy extenso.

Después de hojear las rutas de aprendizaje de HTML, CSS y JavaScript allí, veo que fácilmente podría adquirir la base de casi todo. ¿No me crees? Solo mira sus pistas de aprendizaje y dime que no es sorprendente. Claro, es un poco caro a $ 30 USD al mes, pero en mi opinión, vale la pena. (Lo estoy pagando ahora mismo para aprender WordPress, ya que lo necesito para un proyecto independiente y el material es excelente).

Unas palabras sobre los cursos pagos

Sentí la necesidad de hablar sobre esto porque he notado el consenso general de que puedes aprender a programar sin pagar un centavo y ser tan competitivo como alguien que paga por un curso. Si bien es cierto, no puedo enfatizar lo suficiente el valor que tiene pagar por el curso correcto. Por supuesto, gran parte del material de curso más valioso sobre el que he escrito es gratuito, pero también se paga mucho. Principalmente porque a veces es inmejorable que alguien te explique cuidadosamente las cosas de forma visual.

Sí, hay cursos pagados de aprendizaje terrible que desaconsejaría ya que su propuesta de valor es cuestionable (ver Pluralsight), pero otros como Egghead.io, CodeSchool y Team Treehouse ofrecen una excelente relación calidad-precio, a pesar de su costo relativamente alto. suscripción mensual ($ 25- $ 30 al mes). Además, todos tienen pruebas gratuitas de 7 a 15 días para que pueda ver cuál funciona mejor para usted.

Si juega bien sus cartas, pagar de 1 a 2 meses de cualquiera de ellos puede fácilmente proporcionarle el conocimiento que de otro modo solo obtendría después de tropezar con innumerables artículos y publicaciones de blog durante un año. Honestamente, son tan buenos.

Entonces, sí, no son necesarios, pero si puede pagar al menos un mes, puede estar seguro de que le dará una ventaja sólida.

La salsa secreta del éxito

He conocido a muchos desarrolladores durante los últimos 2 años que he sido desarrollador web. A lo largo de mi viaje, conocí a algunos desarrolladores que realmente se destacaron: desarrolladores que claramente estaban en una liga propia, y a quienes yo y todos los demás admiramos. Descubrí que estas personas compartían bastantes características, que me gustaría compartir con ustedes ahora mismo. En mi opinión, estos son la salsa secreta para ser un desarrollador web exitoso:

  • Amas lo que haces. Esta es simplemente la característica más importante de todas. Si no amas lo que haces (ya sea CSS Styling o JavaScript), realmente se verá en lo que haces. Los apasionados por lo que hacen a menudo se destacan claramente entre la multitud.
  • Sea generoso y comparta sus conocimientos . Es muy fácil querer mantener en secreto ese nuevo truco CSS / JavaScript que encontró que resuelve los problemas del proyecto, pero no lo haga. Las personas que más comparten sus conocimientos suelen ser las más valiosas, ya que pueden ubicarse en cualquier tipo de equipo y mejorar su calidad por un gran margen.
  • Esté siempre atento a las novedades . La mayoría de los desarrolladores de éxito que he conocido comparten este rasgo común. Ya sea leyendo blogs, pasando mucho tiempo en discusiones relacionadas con la programación o incluso hablando sobre las novedades en el desarrollo web durante las pausas para el almuerzo. Estar atento a las novedades todo el tiempo permite a los mejores desarrolladores estar siempre a la vanguardia.

La ruta mas corta

Vaya, este artículo tardó un poco en terminar (6 horas y contando). ¡Ya casi hemos terminado! Quizás se esté preguntando: "Ok, buena historia, pero ¿cuál es la ruta más rápida?" Y así, aquí está.

He organizado esto de la forma en que lo tomaría si pudiera volver atrás y hacer las cosas bien. También agregué algunas bonificaciones, que me hubiera encantado tener en ese entonces. ¡Disfrutar!

Javascript

  1. Ruta de aprendizaje de JavaScript de CodeSchool o Treehouse (pago) O el curso de JavaScript de Codecademy
  2. JavaScript elocuente
  3. No conoces JS
  4. JS: el camino correcto
  5. Aprende ES6 por Egghead.io

HTML y CSS

  1. Ruta de aprendizaje de HTML y CSS de CodeSchool o Treehouse (pago) O HTML y CSS: Diseño y construcción de sitios web por John Ducket O el curso HTML y CSS de Codecademy.
  2. Detalles sobre la especificidad de CSS mediante trucos de CSS
  3. Aprenda el diseño CSS
  4. SMACSS
  5. 9 principios básicos del diseño web receptivo de Front
  6. Fundamentos de diseño web receptivo de Google en Udacity (tome si no usó CodeSchool o la ruta de aprendizaje de Treehouse)
  7. Gestión de la optimización del rendimiento móvil mediante Smashing Magazine O Optimización de la representación del navegador y Optimización del rendimiento del sitio web de Google en Udacity
  8. Fundamentos web de Google

Herramientas de desarrollo

  1. Explore y domine DevTools de CodeSchool
  2. Aprenda Git por Codecademy y pruebe Github por Codeschool
  3. Introducción a los comandos de Linux por Smashing Magazine
  4. Automatice sus tareas fácilmente con Gulp.js de Scotch.io

AngularJS

  1. Decisiones de diseño en AngularJS por desarrolladores de Google (Introducción a AngularJS)
  2. Fundamentos de AngularJS por Egghead.io
  3. Guía de estilo angular de John Papa
  4. Creación de una aplicación Todo de una sola página con Node y Angular (MEAN) por Scotch.io
  5. Estructura de la aplicación AngularJS por Egghead.io (Pagado) O Cursos angulares de Scotch.io

ReactJS

  1. Learning React.js: Introducción y conceptos de Scotch.io
  2. Introducción al paquete web de Egghead.io
  3. React Fundamentals por Egghead.io
  4. Subiendo de nivel con React: Redux por CSS Tricks

Back end

  1. Tutoriales de NodeJS por NodeSchool.io
  2. Cómo le expliqué DESCANSO a mi esposa
  3. Creación de una aplicación Todo de una sola página con Node y Angular de Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bono: Recursos

Completamente opcional, pero algunos de mis artículos y recursos favoritos que he encontrado a lo largo de los años y que probablemente te encantarán si estás interesado en sus respectivos temas.

  • Diseño Web en 4 minutos. Un tutorial interactivo muy creativo y original que te enseña los fundamentos del diseño web.
  • Awwards. ¿Busca inspiración para el diseño web? No busque más.
  • Por qué contratar es tan difícil en tecnología por Eric Elliott. Aquí Eric hace un trabajo increíble al resumir lo sorprendentemente difícil que es encontrar grandes desarrolladores y cómo convertirse en uno.
  • Mega comparación de sistemas de bases de datos NoSQL por Kristof Kovacs. Esta es una excelente comparación entre los sistemas de bases de datos NoSQL más populares que existen. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, todos ellos y más están aquí.
  • Juego XSS. Los errores de cross-site scripting (XSS) son uno de los tipos de vulnerabilidades más comunes y peligrosos en las aplicaciones web. Con este increíble recurso, puede aprender cómo encontrar y explotar errores XSS y cómo evitar que sucedan en su aplicación web.
  • Cómo escribir código que no se puede mantener. Divertido artículo sobre cómo noaescribir código limpio y mantenible.

Bono: mis herramientas

Pensé que también sería bueno compartir algunas de las herramientas que descubrí (algunas conocidas, otras no tanto) que me han facilitado la vida como desarrollador web, así que aquí están.

  • Jetbrains Webstorm: IDE de desarrollo web con todas las funciones. (Mi editor preferido) Pagado, pero ofrece una licencia gratuita de 1 año para estudiantes.
  • Atom.io: editor de texto altamente extensible con características similares a IDE que rivalizan con Webstorm. Gratis.
  • Sublime Text: editor de texto ultrarrápido con compatibilidad con complementos y un aspecto estéticamente agradable. (Normalmente mantengo Webstorm / Atom instalado como IDE para trabajos serios y Sublime Text instalado para ediciones rápidas de archivos).
  • caniuse.com: la compatibilidad con el navegador es fundamental para los sitios web, y este es el recurso n. ° 1 para determinar qué funciones son compatibles con qué versión del navegador y cuáles.
  • Cloud 9: entorno de desarrollo basado en la nube e IDE con soporte Git que se ejecuta en Linux. Excelente para programar de forma remota y probar NodeJS u otras cosas del lado del servidor sin necesidad de instalar nada en su máquina
  • CodePen, Plunker y JSFiddle: excelentes áreas de juego frontales basadas en la nube que le permiten hacer demostraciones rápidas de HTML / CSS / JS que puede compartir o trabajar más adelante si crea una cuenta gratuita. CodePen a menudo es mejor para cosas relacionadas con CSS debido a su interfaz minimalista y gran cantidad de funciones relacionadas con CSS, Plunker para demostraciones de JavaScript debido a sus potentes funciones de JS y JSFiddle para demostraciones en las que desea colaborar con otros en tiempo real gracias a su editor en vivo compartir función de colaboración.
  • Vanilla List: un repositorio de complementos y bibliotecas de JavaScript que utilizan solo JavaScript vanilla (lo que significa que no requieren bibliotecas para funcionar, como jQuery)
  • YouMightNotNeedjQuery: Probablemente no lo haga. Ver por ti mismo.
  • PublicAPIs: ¿Alguna vez se preguntó qué API públicas existen? ¡No busque más!
  • Gravit.io: aplicación de diseño basada en la nube que rivaliza con adobe illustrator. (¡Gratis!) Útil para maquetas rápidas y diseño web.
  • Adobe Kuler: Webapp para ayudarlo a crear combinaciones de colores armoniosas para cualquier sitio web. También tiene un escaparate "Explore" de paletas de colores creadas por otros diseñadores, así como un sistema de clasificación para ayudarlo a inspirarse.
  • Nombra ese color: deja de pasar mucho tiempo averiguando cómo nombrar tus variables de color en menos / sass y usa el nombre que les corresponde con esta aplicación web.

Conclusión

Solo me gustaría decir que disfruté mucho escribiendo esto, y me hace muy feliz haber podido finalmente devolver algo a la comunidad de programación increíblemente solidaria en todas partes.

Como algunos de ustedes ya notaron, esta es mi primera publicación de blog, pero pueden estar seguros de que planeo escribir más. Simplemente no espere uno cada semana. Recuerde: ¡calidad sobre cantidad!

Si alguno de ustedes tiene alguna pregunta, no dude en dejar un comentario y haré todo lo posible para responderle lo antes posible.

Espero que les haya resultado útil hasta la próxima, ¡Lo mejor!

Actualización de marzo de 2018 : para aquellos que tengan curiosidad sobre lo que he estado haciendo, ¡aquí hay una actualización de estado rápida!

//medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca