Mon parcours pour devenir développeur Web à partir de zéro sans diplôme CS (et ce que j'ai appris de…

Tout d'abord, permettez-moi de me présenter. Je m'appelle Sergei Garcia et je suis un développeur front-end à plein temps avec 2 ans d'expérience. Pendant ce temps, j'ai travaillé en tant que développeur front-end pour un cabinet de conseil Forbes 500 et une petite entreprise.

Cela peut ne pas sembler une grande expérience, mais terminer ma deuxième année en tant que développeur a été une étape importante pour moi. C'est parce que je n'avais aucune expérience réelle du développement Web - et pas beaucoup d'expérience en programmation en général au-delà d'une formation de base sur C # et Java que j'ai reçue de quelques cours en ligne. Je n'avais pas non plus de diplôme en informatique depuis que j'ai obtenu un diplôme en gestion de projets informatiques.

Je n'avais jamais écrit sur mon expérience malgré toute l'aide que j'ai reçue de merveilleuses ressources comme Medium, Stack Overflow et les subreddits de programmation de Reddit. Alors aujourd'hui, j'ai décidé de changer cela. Aujourd'hui, je vais vous expliquer ce qui s'est bien passé et ce qui n'a pas fonctionné, de sorte que si vous vous lancez dans ce voyage, vous aurez plus de chance que moi.

Je sais qu'il y a beaucoup d'articles comme celui-ci, mais peu d'entre eux discutent du processus avec le bénéfice de deux années supplémentaires de recul.

Je vais commencer par mon voyage, y compris ce qui n'a pas fonctionné en cours de route. Si vous vous souciez simplement de mes suggestions pour le chemin le plus court possible pour devenir développeur Web à partir de zéro, n'hésitez pas à passer à la dernière section: Le chemin le plus court .

Alors, sans plus tarder, commençons!

Obtenir les bases

Après avoir décidé que je voulais me lancer dans le développement Web, la première question à laquelle je pensais était "Qu'est-ce que j'apprends?" Après avoir fait quelques recherches, j'ai fini par créer mon parcours d'apprentissage en fonction de ce que la plupart des postes de développeur Web débutants demandaient, à savoir:

  • JavaScript
  • HTML et CSS
  • Préprocesseurs CSS (Less & Sass)
  • Conception réactive
  • AngularJS
  • Modèles de conception
  • Git
  • NodeJS
  • Coureurs de tâches

Voici comment ça s'est passé.

Javascript

J'ai commencé mon voyage en apprenant JavaScript via CodeSchool(payant) et Codecademy(libre). Si vous ne les connaissez pas, ce sont d'excellents sites Web qui vous permettent d'apprendre à coder en codant dans le navigateur.

J'ai trouvé que les ressources d'apprentissage comme celle-ci étaient les meilleures au début. Sachez simplement que cette méthode d'apprentissage devient rapidement fatigante une fois que vous entrez dans des choses plus avancées, car leurs algorithmes pour vérifier si vous avez correctement résolu l'exemple de code ont des problèmes de précision. Leurs deux cours d'introduction à JavaScript étaient exceptionnels et je les recommande vivement.

Une fois les bases éliminées, j'ai procédé à une meilleure base de JavaScript en lisant le livre Eloquent Javascript: A Modern Introduction to Programming de Haverbeke (gratuit).

Ce livre m'a été recommandé par de nombreuses personnes dans les forums JavaScript comme une lecture incontournable, et pour une bonne raison. Ce livre était difficile - surtout si vous apprenez simplement la programmation comme je l'étais à l'époque. Mais je suis content de ne pas avoir abandonné et de continuer. C'était phénoménal en raison de la vaste portée des concepts de programmation qu'il couvre, même si c'était parfois un peu impitoyable. Quoi que vous fassiez, ne sautez pas les défis du code. Une fois que vous avez terminé ce livre, vous pouvez enfin dire avec confiance que vous avez une bonne maîtrise de JavaScript.

Vous pouvez également éventuellement apprendre jQuery (bien que je ne recommande vraiment pas encore de l'apprendre - plus à ce sujet plus tard). Vous pouvez l'apprendre grâce au cours Try jQuery de CodeSchool.

HTML et CSS

Après avoir appris JavaScript, j'ai commencé à apprendre les bases du HTML et du CSS et de la conception Web grâce au parcours d'apprentissage HTML et CSS de CodeSchool. Ces cours sont toujours mes préférés aujourd'hui, car le rythme est excellent et la portée générale de ce qu'ils couvrent m'a permis d'acquérir une base plus solide à cet égard.

Vous pouvez également changer cela facilement pour quelque chose comme le cours HTML et CSS de Codecademy et obtenir toujours des résultats similaires. Ou si vous êtes prêt à relever un défi, le cours d'introduction au HTML et au CSS d'Udacity est beaucoup plus complet et légèrement plus difficile.

Bonus : si vous pouvez mettre la main sur le HTML et le CSS de Jon Duckett : concevoir et créer des sites Weblivre, c'est aussi un point de départ solide pour apprendre le HTML et le CSS (avec une pincée de conception Web). Il est très bien noté (4,7 / 5 sur Amazon), offre une solide introduction au monde du développement Web. C'est un beau livre grâce à son design épuré avec de grandes lettres et des pages colorées. J'y reviens souvent juste pour l'admirer.

Moins / Sass

Pour ceux qui ne sont pas familiers, Less & Sass sont des transpileurs CSS qui vous permettent d'écrire du CSS de manière plus élégante. Cela vous permet de faire des choses qui ne sont normalement pas prises en charge, comme l'imbrication de règles CSS. Une fois terminé, ces transpilateurs CSS «compilent» votre code et le convertissent en CSS normal.

Il existe actuellement 2 transpileurs CSS majeurs: Less et Sass . Sass est le plus populaire, mais j'ai trouvé qu'apprendre Less d'abord était plus facile, principalement parce que l'utilisation de Sass sur votre ordinateur nécessite également l'installation de Ruby, ce que je n'aimais pas.

Vous pouvez obtenir un aperçu rapide mais complet de Less en utilisant le compilateur Less en ligne de WinLess et ses exemples de code pour voir comment votre code Less se transformerait en CSS. Vous pouvez également essayer Sass en ligne en utilisant SassMeister (bien que cela n'inclut pas d'exemples de code).

Peu importe que vous appreniez d'abord Less ou Sass. Ils sont extrêmement similaires, donc une fois que vous en connaissez un, vous connaissez à peu près l'autre. Vous pouvez trouver une excellente comparaison rapide entre Less et Sass dans l'article de Shelby Moulden Comparison between LESS & SASS.

Conception réactive

J'ai initialement appris le design réactif et le Bootstrap en utilisant le chemin HTML et CSS de Codeschool, mais j'ai récemment trouvé que le cours d'Udacity de Google sur les principes de base de la conception Web responsive était fantastique pour couvrir les bases et au-delà d'une manière beaucoup plus complète que Codeschool ne l'a fait.

Vous pouvez faire de la conception réactive sans aucun cadre supplémentaire, mais c'est beaucoup plus facile avec l'aide d'un cadre réactif comme Bootstrap. La documentation officielle de Bootstrap est très bien faite, vous ne devriez donc pas avoir de problème pour commencer.

Si vous avez du mal à comprendre ses principes de base, lisez l'article de blog de Froont sur les 9 principes de base de la conception Web réactive. Il a de belles animations propres et simples qui aident à illustrer visuellement les principes de la conception Web réactive.

AngularJS

Je ne savais pas vraiment ce qu'était exactement AngularJS à l'époque, mais je savais que tout le monde en parlait, et que si je voulais devenir développeur Web, je devais l'apprendre. J'ai trouvé les décisions de conception de Google Developers dans AngularJS pour fournir le meilleur aperçu général de ce qu'était AngularJS et de la manière dont il a amélioré la création d'applications Web.

J'ai d'abord pensé à apprendre AngularJS à travers leur documentation officielle, mais cela s'est avéré être une idée terrible. La documentation n'était pas très facile pour les débutants, et le formatage encombré la rendait difficile à lire et à comprendre.

J'ai ensuite commencé à apprendre AngularJS via Codeschool. Avec mon expérience positive sur les cours JavaScript et CSS également à partir de là, je n'attendais rien de moins qu'un excellent cours. J'avais tort. Le cours a été un désastre dès le départ, car l'algorithme utilisé pour vérifier si vous aviez le bon exemple de code ne fonctionnait parfois pas correctement et marquait clairement votre solution comme incorrecte. Il y avait même des moments où tout ce qu'il fallait pour réparer le système de validation cassé était une actualisation de la page. Quant au contenu du cours, ce n'était pas génial non plus. Il a bien expliqué les composants de base d'une application AngularJS, mais il a fait un travail terrible en les intégrant dans une application réelle, me laissant avec beaucoup plus de questions qu'au départ.

Après quelques recherches dans les forums, je suis tombé sur Egghead.io(gratuit / payant) où j'ai eu beaucoup plus de chance. Leur matériel de cours était beaucoup plus propre, plus concis et plus complet, ce qui en faisait une bien meilleure expérience. Sans oublier qu'en dehors de leurs cours, ils ont des leçons de 2 à 5 minutes qui couvrent des sujets importants. (Par exemple: Qu'est-ce qu'un contrôleur? Qu'est-ce qu'un filtre? Qu'est-ce que $ scope?) Ceux-ci facilitent la compréhension des bases. Ils ont également des vidéos qui nécessitent un paiement, mais ce sont généralement celles qui couvrent des sujets angulaires plus avancés dont vous n'aurez besoin que plus tard. J'ai suivi leur cours AngularJS Fundamentals et j'étais pleinement satisfait des résultats (et suis également devenu un grand fan des cours d'Egghead.io dans le processus).

Modèles de conception

Les modèles de conception sont essentiellement des solutions de code réutilisables qui peuvent être utilisées à plusieurs reprises pour résoudre des problèmes logiciels courants. Avoir une base sur cela vous rendra développeur de logiciels beaucoup plus compétitif dans n'importe quel langage de programmation. Cela vous permettra également de comprendre plus facilement le code des autres, car vous identifierez rapidement le modèle de conception qu'ils ont utilisé sur leur code pour mieux le comprendre.

J'ai trouvé les 2 meilleures sources pour apprendre cela sont les modèles de conception JavaScript de doFactory et les modèles de conception JavaScript d'apprentissage d'Addy Osmani. J'ai trouvé doFactory beaucoup plus facile à comprendre, tandis que le livre d'Addy Osmani était beaucoup plus complet.

Chrome DevTools

Chrome est l'un des outils les plus puissants pour un développeur Web. Plus tôt vous le maîtriserez, plus vous pourrez gagner du temps plus tard. Le cours gratuit Explore et Master Chrome DevTools de Codeschool fait un excellent travail pour les présenter.

Git (contrôle de version)

Ah, Git - l'outil dont je ne savais pas avoir besoin avant de découvrir ce qu'il pouvait faire. En gros, Git vous permet de garder une trace des modifications que vous apportez à votre code afin que, si les choses tournent mal, vous puissiez revenir à un moment antérieur. Il vous permet également de voir l'historique de votre code.

J'ai trouvé que le cours gratuit Try Github de CodeSchool était un moyen convivial de commencer. La formation Git d'Atlassian était excellente pour couvrir les commandes les plus avancées disponibles. Le parcours d'apprentissage Git de Codeschool est également excellent pour couvrir les principes fondamentaux de Git.

NodeJS

Il n'a pas fallu longtemps avant que j'apprenne qu'avoir une compréhension de base de NodeJS m'aiderait grandement dans ma quête de devenir développeur Web (plus d'informations à ce sujet bientôt).

J'ai essayé les cours de Codeschool sur Node, mais je les ai trouvés vraiment manquants de contenu. J'ai trouvé que NodeSchool.io était un bien meilleur professeur pour bien comprendre les bases, et c'était amusant! J'ai adoré l'approche pratique qu'elle offrait, qui était similaire à Codeschool et Codecademy - avec l'amélioration supplémentaire que je exécutais vraiment NodeJS.

Coureurs de tâches (Grunt & Gulp)

Grunt et Gulp m'ont été une grande surprise en ce sens que je n'avais aucune idée que des outils comme celui-là existaient même - mais je suis extrêmement heureux qu'ils le fassent! Fondamentalement, ces exécuteurs de tâches vous permettent d'automatiser les tâches courantes. Par exemple, vous vous souvenez de Less / Sass? Normalement, vous devrez exécuter manuellement le compilateur CSS chaque fois que vous apportez une modification pour qu'il compile le CSS, puis mettre à jour le navigateur. À l'aide d'un exécuteur de tâches, vous pouvez le configurer pour surveiller vos fichiers Less / Sass pour les changements, et lorsqu'il détecte un changement, compilez votre CSS et actualisez automatiquement le navigateur. Ceci est extrêmement utile pour réduire votre temps de développement.

Il y a actuellement 2 coureurs de tâches principaux: Grunt et Gulp. Bien qu'ils fassent exactement la même chose, ils fonctionnent de manière très différente, Grunt étant beaucoup plus verbeux et orienté configuration, et Gulp étant plus court à écrire et préférant le code à la configuration.

Connaître NodeJS vous aidera à écrire de meilleurs fichiers Grunt et Gulp car les deux fonctionnent sur NodeJS . Vous pouvez choisir celui que vous voulez, mais j'ai trouvé que Gulp était beaucoup plus facile à apprendre et à écrire. Je le préfère encore aujourd'hui en raison de son approche minimaliste - mais puissante - basée sur les tuyaux.

J'ai trouvé les cours de Scotch.io sur Grunt et Gulp parmi les meilleurs du marché.

Les défis auxquels j'ai été confronté lors de mon premier emploi

Une fois que j'ai couvert les principes fondamentaux du développement Web, j'étais prêt pour mon premier entretien de développement Web pour un poste de niveau d'entrée. Je n'entrerai pas dans les détails de l'interview car ce n'est pas l'objet principal de cet article. Mais je dirai qu'on m'a dit que mes connaissances relativement solides en JavaScript m'ont aidé à sécuriser le poste. (Merci, JavaScript éloquent!)

Je dois dire que j'étais assez nerveux sur mon premier projet. Il s'agissait de créer des composants Web réutilisables avec HTML, CSS et JavaScript, ainsi que Bootstrap, Sass, Grunt en tant qu'outillage. T

Les deux plus grosses erreurs que j'ai trouvées au début étaient:

  1. Peur de l'échec. Parce que j'étais le nouveau venu, j'avais constamment peur que mon code soit erroné ou mal conçu, alors j'ai passé beaucoup de temps à tout vérifier et j'ai adhéré aux meilleures pratiques de codage. Pour cette raison, j'ai rarement tenté de trouver des solutions de manière créative à cause de ma peur que cela ne fonctionne pas correctement à la fin. Cela a effectivement arrêté ma volonté d'apprendre de nouvelles choses.
  2. Faire des choses parce que "X" personne qui sait mieux que moi l'a dit. J'ai beaucoup fait ça au début. Bien que ce ne soit pas complètement faux, faire les choses d'une certaine manière uniquement parce que l'expert «X» en la matière l'a dit - sans savoir pourquoi - me conduit à ne pas vraiment savoir quand et pourquoi les choses ont été faites comme elles étaient. J'ai vite appris qu'il y avait des exceptions à tout et que vous devriez toujours connaître la raison des meilleures pratiques.

Heureusement, j'ai eu un chef d'équipe compréhensif lors de mon premier projet qui m'a aidé à surmonter ces problèmes. Il m'a constamment motivé à essayer de nouvelles choses, même si parfois les choses tournaient mal. Il m'a également dit de tout remettre en question - même ses enseignements.

Avec le temps, j'ai appris ma leçon. Depuis lors, j'ai toujours été une personne qui a hâte d'essayer de nouvelles choses. J'essaie toujours de comprendre pourquoi les meilleures pratiques existent, quand elles sont justes et quand elles ne s'appliquent pas à une situation.

Utiliser AngularJS dans un projet réel a également posé un défi de taille pour moi. C'était principalement parce que beaucoup de choses que j'ai faites avec, je les ai faites sans vraiment comprendre pourquoi elles se sont produites. J'y ai pensé comme de la «magie angulaire».

Il y a eu de nombreuses fois où j'aurais souhaité savoir comment Angular fonctionnait réellement, mais c'était effrayant de regarder la documentation.

Je suis finalement tombé sur un livre étonnant appelé Build Your Own AngularJS. Je n'ai pas tout lu, mais la lecture de la section sur Scopes and Watchers et comment ils ont fonctionné a vraiment révélé à quel point la magie derrière angular n'était pas vraiment magique. C'était juste un moyen intelligent de maintenir la liaison de données à l'aide de vérifications sales et d'étendues imbriquées. Je recommande vivement ce livre à tous ceux qui cherchent à comprendre pleinement AngularJS.

L'autre défi auquel j'ai été confronté un an plus tard était la vitesse à laquelle le développement Web progressait. Je venais de maîtriser AngularJS et Grunt, et je me sentais tout fier et puissant - pour découvrir bientôt que Gulp et ReactJS étaient à l'horizon. Et un an plus tard, après les avoir appris, Webpack a commencé à gagner du terrain, et j'ai dû l'apprendre aussi. Comme vous pouvez l'imaginer, une grande partie de moi a été assez déçue de la rapidité avec laquelle certaines de mes connaissances sont devenues obsolètes. Mais un collègue m'a vite éclairé en me disant quelque chose qui a changé à jamais la façon dont je voyais les bibliothèques et les frameworks:

«Les bibliothèques et les cadres peuvent devenir obsolètes, mais les concepts et les solutions qu’ils proposent survivent souvent à l’épreuve du temps.»

Il avait raison. AngularJS est peut-être devenu obsolète, mais comprendre pleinement la magie derrière cela m'a aidé à mieux comprendre l'architecture des composants Web de React, qui a amélioré le concept des directives d'Angular. Cela m'a également aidé à comprendre comment ReactJS a gagné en popularité, ainsi que le genre d'avenir qui l'attendait.

Je ne me souviens pas avoir été confronté à d'autres défis majeurs sur mes projets ultérieurs. Mais ce que je dirai, c'est qu'au cours des 2 années que j'ai consacrées au développement Web, la chose n ° 1 qui a aidé à réussir (selon mes propres collègues) a été mon enthousiasme et ma puissante volonté d'être toujours à l'affût. pour de nouvelles choses à apprendre. J'ai vite découvert que c'était une combinaison gagnante avec le développement Web, car les choses ici changent vraiment, très rapidement, avec de nouveaux frameworks et bibliothèques qui émergent constamment.

Sur le revers de la médaille, l'autre chose qui m'a beaucoup aidé - et quelque chose que j'ai découvert assez récemment en fait - était de comprendre ce qu'il ne fallait pas apprendre. Cela est devenu essentiel pour mon processus de devenir un meilleur développeur Web.

Il n'est pas rare de voir des gens critiquer le rythme anormalement rapide de l'évolution des technologies Web, ou comment une nouvelle bibliothèque ou un nouveau framework JavaScript sort presque tous les jours. Mais avec le temps, j'ai vu la lumière et j'ai finalement compris:

Vous n'avez pas besoin d'apprendre toutes les nouvelles bibliothèques ou frameworks qui sortent.

C'est souvent une bonne idée de faire un simple exemple d'application Hello World afin que vous puissiez voir ce que propose un framework. Ensuite, vous pouvez passer à autre chose. Mais généralement, vous devriez essayer de vous concentrer sur ce qui convient le mieux aux besoins de votre projet. Cela peut être difficile au début, mais heureusement, il existe de bons endroits comme Stack Overflow, Medium et Reddit où vous pouvez trouver des discussions utiles entre les frameworks et déterminer lesquels correspondent le mieux à vos cas d'utilisation spécifiques.

Aller plus loin

Dans les années à venir, j'ai continué à m'améliorer continuellement des manières suivantes

JavaScript

Une fois que vous avez terminé Eloquent JavaScript, il est assez facile de dire et d'avoir l'impression de maîtriser JavaScript, mais vient ensuite You Don't Know JS et cela vous détruit absolument (ou du moins cela m'a fait). Cette série de livres (gratuite d'ailleurs) m'a été mentionnée à plusieurs reprises par quelques développeurs web seniors du bureau comme le livre à lire, et ce n'est que jusqu'à ce que je l'ai lu que je peux dire que je connais parfaitement JavaScript. Ils avaient raison, car page après page, je me suis constamment demandé à quel point JavaScript était vraiment complexe, ainsi que de nombreux pièges courants que peuvent avoir des personnes non expérimentées et expérimentées sans une bonne compréhension de JavaScript.

La lecture de cette série de livres m'a vraiment ouvert l'esprit, et je la recommande également vivement à tous ceux qui souhaitent se qualifier de développeur JavaScript expert. Une fois que vous avez éliminé cela, il y a 2 ressources supplémentaires que je recommande vivement pour obtenir une connaissance JavaScript encore plus approfondie et plus avancée;

  • JavaScript, The Better Parts: Un discours étonnant de D. Crockford qui parle des plus grandes faiblesses de JavaScript, c'est «Foot Guns», et comment les utiliser comme ses forces.
  • Les deux piliers de JavaScript: un article solide de l'écrivain reconnu de JavaScript Medium Eric Elliott qui parle des 2 grands piliers de JavaScript: l'héritage prototypique et la programmation fonctionnelle

Une fois que vous avez une compréhension approfondie de JavaScript, continuez avec ECMASCript 2015 (également connu sous le nom d'ES6), la dernière norme JavaScript actuelle. L'article de Smashing Magazine ECMAScript 6 (ES6): Quoi de neuf dans la prochaine version de JavaScript est un excellent bref examen des nouveautés d'ES6. Vous pouvez essayer ES6 dans le navigateur en utilisant le transpilateur en ligne de Babel.

CSS

Le CSS peut devenir très rapidement désordonné et désorganisé. Il y a eu pas mal de méthodologies différentes proposées pour écrire des CSS plus propres, mais 2 se démarquent que je vous recommande vivement de lire à propos de ASAP pour rester compétitif:

  • SMACSS: architecture évolutive et modulaire pour CSS. Un guide flexible pour développer des sites petits et grands.
  • BEM: une méthodologie qui vous aide à réaliser des composants réutilisables et un partage de code dans le front-end.

Personnellement, je préfère SMACSS en raison de son aspect plus propre, mais certaines entreprises et CSS Frameworks utilisent toujours BEM, il vaut donc la peine de connaître les deux.

Vous devriez également commencer à vous concentrer sur les performances de votre CSS. L'article de Smashing Magazine intitulé Managing Mobile Performance Optimization et l'article de HTML5 Rocks High Performance Animation ont fait un travail solide pour donner une longueur d'avance à ce sujet. Une lecture rapide des deux articles devrait vous donner une base solide.

Bundlers JavaScript

À présent, vous devriez avoir une bonne compréhension de Grunt ou Gulp. L'étape suivante consiste à ajouter un bundler JavaScript à votre exécuteur de tâches, ce qui permettra une organisation plus modulaire de votre application JavaScript.

Les deux plus grands acteurs actuellement sont:

  • Browserify: vous permet d'exiger des modules dans le navigateur en regroupant toutes vos dépendances.
  • Webpack: essentiellement Browserify sur les stéroïdes. Plus difficile à configurer et à installer.

Le mini-cours de Scotch.io Getting Started with Browserify peut vous fournir un coup de pouce avec browserify, tandis que l'article de David Fox Powell Pourquoi personne ne peut-il écrire un tutoriel Webpack simple? est une excellente et amusante introduction à Webpack.

Personnellement, je n'ai pas passé beaucoup de temps à utiliser Webpack, mais pendant le temps que je l'ai utilisé, je dois dire que cela a été incroyable - même si c'est un peu plus difficile à configurer. Si vous ne faites que commencer, je choisirais Browserify car il est beaucoup plus simple à configurer. Sachez simplement que le Webpack est l'avenir et quels projets plus importants commencent à être utilisés.

ReactJS

ReactJS gagne rapidement en popularité et ne semble pas ralentir - au point que les gens se demandent "React tue-t-il Angular?"

Learning React.js: Getting Started and Concepts de Scotch.io offre une vue d'ensemble solide de React. Une fois que vous avez résolu cela, continuez avec le cours d'Egghead.io sur React Fundamentals où vous allez créer une application ReactJS entièrement fonctionnelle, puis la migrer vers la syntaxe ES6. Vous pouvez faire un suivi avec la documentation officielle ReactJS qui est très bien faite et vous permettra de la maîtriser pleinement.

Puisque React n'est que la vue, il est fortement recommandé d'apprendre Redux. La plupart des cours sur Redux sont un peu complexes à mon avis, mais CSS Tricks Leveling Up with React: Redux marque un excellent équilibre entre la simplicité et le fait d'être informatif pour démarrer avec Redux.

Vous avez peut-être également entendu parler de Flux à ce stade, mais si vous vous demandez pourquoi vous devriez utiliser Redux sur Flux, consultez la question sur Stack Overflow Pourquoi utiliser Redux sur Facebook Flux? qui a été répondu par le créateur de Redux!

Je repense à mes erreurs et à ce que j'ai appris

J'ai fait beaucoup d'erreurs au cours de mes 2 années d'apprentissage du développement web. Dans l'ensemble, je pense que ma plus grosse erreur a été de ne pas maîtriser les bases avant de passer aux bibliothèques et aux frameworks. Je suppose que cela s'applique à presque tous les langages de programmation, mais à mon avis, cela s'applique encore plus à JavaScript. En effet, à bien des égards, JavaScript est un langage cassé et contient beaucoup de "Foot Guns" (vous devriez avoir entendu parler de cela si vous avez regardé le discours de D. Crockford sur "JavaScript, les meilleures parties" que j'ai mentionné plus tôt). Ceux-ci peuvent rendre la vie insupportablement difficile si vous ne les comprenez pas complètement.

Je me souviens avoir une fois été coincé dans un problème AngularJS avec $ scope qui m'a pris 3 jours pour déboguer, seulement pour constater que ce n'était même pas un problème AngularJS, mais un problème JavaScript que je me suis causé parce que je ne comprenais pas comment cela fonctionne.

Code propre

C'est étrange que je ne vois pas cela aussi souvent. Je n'ai pas toujours aimé écrire du code propre, mais honnêtement, c'est l'une des choses que je suis le plus fier d'avoir apprise. C'est parce que tout le monde aime se plaindre du fait que sa dernière place avait l'une des bases de code les pires et les plus laides au monde. Alors pourquoi personne ne peut-il dire à quel point leur dernier était génial? Comment leur code est-il devenu si propre et bien fait qu'ils en étaient fiers?

C'est une tendance que j'aimerais changer, et je pense qu'une différence peut être faite si suffisamment de personnes y font pression. Efforcez-vous de rendre les noms de variables et de fonctions compréhensibles en anglais, même si vous devez en écrire un peu plus. Si vous ne le faites pas, vous devrez simplement le documenter manuellement à l'avenir pour le rendre plus clair. Cela rendra également votre base de code globale plus difficile à comprendre par les nouveaux développeurs et par vous-même. Oui, toi-même. Pourquoi toi? Parce que si vous n'appliquez pas de code propre, qu'est-ce qui vous fait penser que vos collègues devraient l'appliquer et écrire du code propre pour que vous le compreniez facilement? Prenons l'exemple.

Et si ce n'est pas une incitation suffisante, les gens reconnaissent et apprécient très souvent les rédacteurs de code propre. Vous constaterez qu'en écrivant un code propre, vos collègues et amis apprécieront encore plus de travailler avec vous et, par conséquent, vous vivrez une vie plus heureuse.

jQuery

Certains d'entre vous remarqueront peut-être que je n'ai pas non plus mis l'accent sur jQuery. En effet, d'après mon expérience, j'ai trouvé que jQuery me faisait plus de mal que de bien au début. Certains d'entre vous ne sont peut-être pas d'accord, mais laissez-moi vous expliquer: quand je l'ai appris pour la première fois, l'idée générale que j'ai comprise était que jQuery était partout et que vous pouviez l'utiliser pour à peu près tout. Pour cette raison, je me suis habitué à utiliser jQuery pour à peu près tout, et pour tout problème que je rencontrais, j'ai cherché une solution qui utilisait jQuery.

Ne vous méprenez pas, jQuery était génial à l'époque où je l'utilisais, tellement génial en fait, que j'ai aveuglément ignoré que 90% de ce que j'ai fait avec jQuery pouvait être fait nativement dans les navigateurs modernes dans une syntaxe tout aussi simple.

Vous pensez peut-être maintenant: «Alors qu'est-ce qui ne va pas avec ça? De toute façon, jQuery ne pèse pas beaucoup et en l'utilisant, vous finissez toujours par écrire moins de code que si vous faisiez les choses en natif. » Mais utiliser jQuery sur les API natives n'était pas le problème. Le problème était que toute ma façon de penser et toutes les solutions aux problèmes courants que je connaissais jusque-là nécessitaient que jQuery fonctionne. Et cela est devenu un énorme problème lorsque j'ai eu mon premier projet et qu'on m'a dit que jQuery n'était pas une dépendance.

L'utilisation de jQuery m'a rendu inutile sans lui et m'a fait ignorer complètement les méthodes et solutions natives qui ont toujours existé. Cela a également rendu toutes mes solutions moins portables, car leur utilisation nécessitait jQuery.

Depuis lors, je me suis efforcé de ne pas utiliser jQuery à moins que cela ne soit absolument nécessaire et n'apporte vraiment une grande amélioration de l'efficacité et de la lisibilité de notre base de code (par exemple, une lourde manipulation DOM).

Encore une fois, ne vous méprenez pas, jQuery est génial, mais si je pouvais remonter le temps et rencontrer mon ancien moi qui apprenait simplement le développement Web, je me déconseillerais fortement d'apprendre jQuery jusqu'à ce que j'aie appris comment faire les choses sans elle. Si vous rencontrez des difficultés pour effectuer le changement comme je l'ai fait, consultez You Might Not Need jQuery.

Cours

Quant au matériel de cours; alors que beaucoup de cours de CodeSchool étaient exceptionnels (la branche HTML & CSS était particulièrement fantastique), même si certains de leurs cours sur les frameworks tombaient un peu à plat (AngularJS, BackboneJS, etc.).

J'ai également suivi pas mal de cours Pluralsight, que je n'ai pas mentionnés car après tout ce temps, je suis arrivé à la conclusion que choisir leur parcours d'apprentissage est globalement une mauvaise idée et peu fiable . Comme leurs cours sont dispensés par des enseignants qui ne sont pas toujours (à mon avis) très bons en enseignement, j'ai trouvé que la qualité de leurs cours fluctue énormément car les normes de qualité de leurs cours sont inexistantes. J'ai eu des cours où même la personne qui donnait le cours avait l'air de s'endormir. Et honnêtement, je n'ai pas la capacité d'attention pour continuer à prêter attention à un cours de 6 à 10 heures - et beaucoup d'entre eux durent aussi longtemps, sinon plus.

J'ai passé 80 à 100 bonnes heures de formation à Pluralsight, et je veux honnêtement en récupérer une bonne partie. Ne vous méprenez pas, j'ai eu quelques cours incroyables sur Pluralsight, mais leur concentration sur la quantité plutôt que sur la qualité m'a vraiment fait perdre mon temps. J'aurais pu en apprendre tellement plus si j'avais suivi des cours auprès de meilleures sources comme Egghead.io et CodeSchool, où ils valorisent plus de qualité de quantité.

La seule raison pour laquelle je pourrais jamais penser à quelqu'un qui utilise Pluralsight est de suivre un cours qu'aucun autre site Web ne propose sur une technologie plus obscure (comme Installshield ou Xamarin), ou de suivre quelques cours très spécifiques dont ils savent qu'ils ont été très bien reçus et examiné (par exemple, Angular Fundamentals de John Papa).

Dans l'ensemble, si vous souhaitez utiliser Pluralsight, assurez-vous de suivre des cours choisis par quelqu'un qui les a suivis en premier et qui sont reconnus comme étant de grande qualité et utiles.

J'ai aussi récemment essayé la formation Team Treehouse et je dois dire que je suis étonné de la qualité de leurs cours, rivalisant même avec celle de CodeSchool, et leur matériel de cours est très complet.

Après avoir parcouru les chemins d'apprentissage HTML, CSS et JavaScript, je vois que vous pourriez facilement acquérir les bases de presque tout. Tu ne me crois pas? Regardez leurs pistes d'apprentissage et dites-moi que ce n'est pas incroyable. Bien sûr, c'est un peu cher à 30 USD par mois, mais à mon avis, cela en vaut vraiment la peine. (Je paie maintenant pour apprendre WordPress car j'en ai besoin pour un projet indépendant et le matériel est excellent).

Un mot sur les cours payants

J'ai ressenti le besoin d'en parler car j'ai remarqué le consensus général selon lequel vous pouvez apprendre la programmation sans payer un centime et être aussi compétitif que celui qui a payé pour un cours. Bien que cela soit vrai, je ne saurais trop insister sur la valeur de payer pour le bon cours. Bien sûr, la plupart des supports de cours les plus précieux sur lesquels j'ai écrit sont gratuits, mais une grande partie est également payante. Principalement parce que parfois, vous ne pouvez pas battre que quelqu'un vous explique soigneusement les choses de manière visuelle.

Oui, il existe de terribles cours d'apprentissage payants que je déconseillerais car leur proposition de valeur est discutable (voir Pluralsight), mais d'autres comme Egghead.io, CodeSchool et Team Treehouse offrent un excellent rapport qualité-prix, malgré leur coût relativement élevé. abonnement mensuel (25 $ - 30 $ par mois). De plus, ils ont tous des essais gratuits de 7 à 15 jours afin que vous puissiez voir celui qui vous convient le mieux.

Si vous jouez bien vos cartes, payer 1 à 2 mois pour l'un ou l'autre peut facilement vous apporter des connaissances que vous n'auriez autrement qu'après avoir trébuché sur d'innombrables articles et articles de blog sur un an. Ils sont honnêtement aussi bons.

Alors oui, ils ne sont pas nécessaires, mais si vous pouvez vous permettre au moins un mois, vous pouvez être sûr que cela vous donnera un avantage certain.

La sauce secrète du succès

J'ai rencontré beaucoup de développeurs au cours des 2 dernières années, j'ai été développeur web. Tout au long de mon parcours, j'ai rencontré quelques développeurs qui se sont vraiment démarqués - des développeurs qui étaient clairement dans une ligue à part, et que moi et tout le monde admirions. J'ai trouvé que ces personnes partageaient pas mal de caractéristiques, que j'aimerais partager avec vous maintenant. Ce sont à mon avis la sauce secrète pour être un développeur Web réussi:

  • Aime ce que tu fais. C'est simplement la caractéristique la plus importante de toutes. Si vous n'aimez pas ce que vous faites (que ce soit le style CSS ou JavaScript), cela se verra vraiment dans ce que vous faites. Ceux qui sont passionnés par ce qu'ils font se démarquent souvent clairement de la foule.
  • Soyez généreux et partagez vos connaissances . Il est très facile de vouloir garder secret le nouveau hack CSS / JavaScript que vous avez trouvé et qui résout les problèmes du projet, mais ne le faites pas. Les personnes qui partagent le plus leurs connaissances sont souvent les plus précieuses, car elles peuvent être placées dans n'importe quel type d'équipe et améliorer sa qualité de manière considérable.
  • Soyez toujours à l'affût de nouveautés . La plupart des développeurs à succès que j'ai rencontrés partagent ce trait commun. Que ce soit en lisant des blogs, en passant beaucoup de temps à programmer des discussions liées à la programmation, ou même en parlant des nouveautés du développement Web pendant les pauses déjeuner. Être constamment à l'affût de nouveautés permet aux meilleurs développeurs de toujours garder une longueur d'avance.

Le parcours le plus court

Ouf, cet article a mis du temps à se terminer (6 heures et plus). Nous avons presque fini! Vous vous demandez peut-être: "Ok, histoire sympa, mais quel est le chemin le plus rapide?" Et donc, la voici.

J'ai organisé cela de la manière que je prendrais si je pouvais revenir en arrière et faire les choses correctement. J'ai également ajouté quelques bonus, que j'aurais aimé avoir à l'époque. Prendre plaisir!

Javascript

  1. Parcours d'apprentissage Javascript de CodeSchool ou Treehouse (payant) OU Cours Javascript de Codecademy
  2. JavaScript éloquent
  3. Vous ne connaissez pas JS
  4. JS: la bonne manière
  5. Apprenez ES6 par Egghead.io

HTML et CSS

  1. Parcours d'apprentissage HTML et CSS de CodeSchool ou Treehouse (payant) OU HTML et CSS: conception et création de sites Web par John Ducket OU cours HTML et CSS de Codecademy.
  2. Spécificités sur la spécification CSS par CSS Tricks
  3. Apprendre la mise en page CSS
  4. SMACSS
  5. 9 principes de base de la conception Web réactive par Front
  6. Responsive Web Design Fundamentals by Google sur Udacity (à prendre si vous n'avez pas utilisé le parcours d'apprentissage CodeSchool ou Treehouse)
  7. Gestion de l'optimisation des performances mobiles par Smashing Magazine OU Optimisation du rendu du navigateur et optimisation des performances du site Web par Google sur Udacity
  8. Fondamentaux du Web par Google

Outils de développement

  1. Explorer et maîtriser DevTools par CodeSchool
  2. Apprenez Git par Codecademy et essayez Github par Codeschool
  3. Introduction aux commandes Linux par Smashing Magazine
  4. Automatisez vos tâches facilement avec Gulp.js de Scotch.io

AngularJS

  1. Décisions de conception dans AngularJS par les développeurs Google (introduction à AngularJS)
  2. Fondamentaux AngularJS par Egghead.io
  3. Guide de style angulaire de John Papa
  4. Création d'une application Todo à page unique avec nœud et angulaire (MEAN) par Scotch.io
  5. Structure de l'application AngularJS par Egghead.io (payant) OU Cours angulaires de Scotch.io

ReactJS

  1. Apprendre React.js: Prise en main et concepts par Scotch.io
  2. Introduction au webpack par Egghead.io
  3. React Fundamentals par Egghead.io
  4. Mise à niveau avec React: Redux par CSS Tricks

Fin arrière

  1. Tutoriels NodeJS par NodeSchool.io
  2. Comment j'ai expliqué REST à ma femme
  3. Création d'une application Todo à page unique avec Node et Angular par Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Bonus: ressources

Complètement facultatif, mais certains de mes articles et ressources préférés que j'ai trouvés au fil des ans que vous aimerez probablement si vous êtes intéressé par leur sujet respectif.

  • Conception Web en 4 minutes. Un tutoriel interactif très créatif et original qui vous apprend les bases de la conception Web.
  • Awwards. Vous cherchez de l'inspiration pour la conception Web? Cherchez pas plus loin.
  • Pourquoi l'embauche est si difficile dans la technologie par Eric Elliott. Ici, Eric fait un travail incroyable en résumant à quel point il est étonnamment difficile de trouver de grands développeurs et comment le devenir.
  • Méga comparaison des systèmes de base de données NoSQL par Kristof Kovacs. Il s'agit d'une superbe comparaison entre les systèmes de base de données NoSQL les plus populaires. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, ils sont tous ici.
  • Jeu XSS. Les bogues de script intersite (XSS) sont l'un des types de vulnérabilités les plus courants et les plus dangereux dans les applications Web. En utilisant cette ressource géniale, vous pouvez apprendre comment trouver et exploiter les bogues XSS et comment les empêcher de se produire dans votre application Web.
  • Comment écrire du code non maintenable. Article hilarant sur comment nonàécrire du code propre et maintenable.

Bonus: Mes outils

J'ai pensé que ce serait aussi bien de partager certains des outils que j'ai découverts (certains bien connus, d'autres pas tellement) qui m'ont facilité la vie en tant que développeur Web, alors les voici.

  • Jetbrains Webstorm: IDE de développement Web complet. (Mon éditeur de choix) Payé, mais offre une licence gratuite d'un an pour les étudiants.
  • Atom. Libre.
  • Sublime Text: éditeur de texte ultra-rapide avec prise en charge des plugins et un look esthétique. (Je garde normalement Webstorm / Atom installé en tant qu'IDE pour un travail sérieux et Sublime Text installé pour des modifications rapides des fichiers.)
  • caniuse.com: la prise en charge des navigateurs est essentielle pour les sites Web, et c'est la ressource n ° 1 pour déterminer quelles fonctionnalités sont prises en charge par quelle version de navigateur et lesquelles le sont.
  • Cloud 9: environnement de développement basé sur le cloud et IDE avec prise en charge de Git qui s'exécute sous Linux. Idéal pour programmer à distance et tester NodeJS ou d'autres éléments côté serveur sans avoir à installer quoi que ce soit sur votre machine
  • CodePen, Plunker et JSFiddle: De superbes terrains de jeux frontaux basés sur le cloud qui vous permettent de faire des démos HTML / CSS / JS rapides que vous pouvez partager ou travailler plus tard si vous créez un compte gratuit. CodePen est souvent le meilleur pour les choses liées au CSS en raison de son interface minimaliste et de sa pléthore de fonctionnalités liées au CSS, Plunker pour les démos JavaScript en raison de ses puissantes fonctionnalités JS et JSFiddle pour les démos que vous souhaitez collaborer avec d'autres en temps réel grâce à son éditeur en direct. partage de la fonctionnalité de collaboration.
  • Vanilla List: un référentiel de plugins et de bibliothèques JavaScript utilisant uniquement du JavaScript vanilla (ce qui signifie qu'ils ne nécessitent aucune bibliothèque pour fonctionner, comme jQuery)
  • YouMightNotNeedjQuery: Vous n'avez probablement pas. Voir par vous-même.
  • PublicAPIs: Vous êtes-vous déjà demandé quelles API publiques existent? Cherchez pas plus loin!
  • Gravit.io: application de conception basée sur le cloud rivalisant avec Adobe Illustrator. (Gratuit!) Utile pour les maquettes rapides et la conception Web.
  • Adobe Kuler: Webapp pour vous aider à créer des combinaisons de couleurs harmonieuses pour n'importe quel site Web. Dispose également d'une vitrine «Explorez» de palettes de couleurs construites par d'autres designers ainsi que d'un système de classement pour vous inspirer.
  • Nommez cette couleur: arrêtez de passer beaucoup de temps à déterminer comment nommer vos variables de couleur en less / sass et utilisez simplement leur nom légitime avec cette application Web

Conclusion

Je voudrais juste dire que j'ai vraiment aimé écrire ceci, et cela me rend vraiment heureux d'avoir enfin pu redonner quelque chose à la communauté de programmation incroyablement solidaire du monde entier.

Comme certains d'entre vous l'ont déjà remarqué, c'est mon premier article de blog, mais vous pouvez être sûr que j'ai l'intention d'en écrire davantage. Ne vous attendez pas à un chaque semaine. N'oubliez pas: la qualité plutôt que la quantité!

S'il vous reste des questions, n'hésitez pas à laisser un commentaire et je ferai de mon mieux pour vous répondre dès que possible.

J'espère que cela vous a été utile, jusqu'à la prochaine fois, mieux!

Mise à jour de mars 2018 : pour ceux qui sont curieux de savoir ce que j'ai fait, voici une mise à jour rapide de mon statut!

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