Image composée par Aphinya Dechalert. Intitulé «Un développeur Web novice arrosant les graines de la croissance professionnelle»

Comment sortir de noobville et aller au-delà des tutoriels de débutant en tant que développeur?

un guide pour améliorer les compétences à partir d'une piste autodidacte

Les développeurs Web ont tendance à être autodidacte et à entrer sur le terrain avec juste assez de connaissances pour démarrer, mais pas assez dangereux pour détrôner ceux qui possèdent un diplôme en informatique.

De nombreux développeurs autodidactes se retrouvent coincés dans un espace appelé noobville, non pas parce qu’ils codent mal, mais parce qu’ils ont simplement besoin de conseils. Je me souviens d’être à Noobville, il était une fois, il y a environ 7 ans, et je souhaitais un guide décrivant ce dont j'avais besoin pour améliorer mes compétences.

Il y a eu beaucoup d'essais et d'erreurs, de révélations liées à l'industrie et de gestion des nouvelles technologies au fur et à mesure de leur apparition. Après avoir vu mes juniors traverser les mêmes difficultés, j'ai décidé d'écrire le guide que je souhaiterais avoir quand j'étais leur chef d'équipe.

Alors, sans plus tarder, je vous présente un guide pour améliorer vos compétences en développement web.

La trinité technique

J'aime souvent appeler le noyau avant pile la trinité technique. Il se compose de HTML, CSS et JavaScript.

Commençons par CSS

Il n’ya rien d’extraordinaire à apprendre en HTML, mais CSS peut devenir un peu compliqué avec le temps.

Cela commence par une classe ici et une classe là-bas. La prochaine chose que vous savez, vous avez saupoudré une douzaine de doublons qui sont éparpillés tout au long de votre candidature. Les gens parlent d’odeur de code, mais cela concerne principalement JavaScript et d’autres langages de programmation «appropriés». CSS est mis de côté parce que cela semble facile.

Mais ce n’est pas le cas, surtout une fois que la taille est atteinte.

Comment aller mieux:

Regardez dans l'architecture modulaire CSS. Il existe également un concept qui existe depuis longtemps et qui s'appelle CSS orienté objet. Oui. C’est un problème qui peut vous aider à protéger votre code de la folie à long terme.

Les préprocesseurs tels que SCSS constituent de bons outils pour résumer votre CSS dans un format beaucoup plus convivial. On peut dire que c’est juste du sucre syntaxe, mais parfois, après une longue journée de sensation salée envers le code de spaghetti d’une autre personne, vous aimeriez avoir un peu de douceur.

Quoi à Google:

OOCSS, BEM, SMACSS, SCSS

Nous devons également discuter de JavaScript.

Beaucoup de gens choisissent la Trinité en pensant qu’ils ne doivent pas l’apprendre correctement. Ça marche, pourquoi jouer avec?

Mais c’est comme cela que l’on navigue dans les icebergs et coule le navire dans le style le plus épique. Les applications plantent et brûlent par manque de connaissances. React et Angular ne pourront pas vous sauver car ce ne sont que des outils.

C’est une chose d’utiliser JavaScript. C’est une autre de parler JavaScript.

Comment aller mieux:

Apprenez comment fonctionnent les prototypes. C’est une caractéristique essentielle de JavaScript que les débutants oublient souvent, car ils pensent à tort qu’il n’est pas nécessaire.

Explorez les paradigmes de programmation JavaScript et les structures architecturales. La cohésion du code et différentes idées sur le sujet peuvent vous éclairer sur l'inefficacité de vos schémas de codage et de vos préférences.

Quoi à Google:

Prototypes JavaScript, cohésion du code JavaScript, responsabilité unique, expressions régulières JavaScript, POOP JavaScript, JavaScript FP, JavaScript procédural, Script d'algorithme JavaScript

Liste de contrôle des paradigmes

Les deux paradigmes de programmation les plus populaires sont la POO (orientée objet) et la FP (programmation fonctionnelle). Cependant, ils ne sont pas les deux seules théories et méthodes de structuration de code existantes.

Suivre de près la programmation procédurale, déclarative et impérative.

Vous devez maîtriser l'art des paradigmes de programmation afin d'élargir votre esprit. Cela vous donnera la possibilité de prendre du recul et de voir le code comme une série de pièces pouvant être utilisées de manière spécifique.

Une fois que vous avez compris les paradigmes de programmation, vous ne verrez plus le code en tant que code. Il y a un certain sentiment d'illumination qui vient avec la conscience de cette connaissance.

Votre relation avec le code changera et il ne s'agira plus que de créer des déclarations dans des fonctions pour que les choses fonctionnent.

Comment aller mieux:

Commencez par la programmation orientée objet, car JavaScript est basé sur des prototypes, qui constituent un paradigme de programmation orienté objet. Une fois que vous avez compris, commencez à vous pencher sur la PF, car elle convient assez bien aux prototypes.

En fait, maîtrisez le concept de prototypes car il s’agit du fondement de la création de code propre en JavaScript. Les deux méthodologies de réflexion peuvent également être transférées vers des frameworks et des bibliothèques comme Angular, React et Vue.

Une fois que vous avez assimilé les deux théories, assurez-vous de poursuivre votre chemin et explorez la programmation procédurale, déclarative et impérative. Ils ne sont pas aussi populaires mais peuvent vous donner un aperçu des différents modes de pensée qui ont été créés pour résoudre un ensemble de problèmes spécifiques. Une méthodologie convient mieux que d'autres dans certaines situations. Apprendre à reconnaître ces scénarios nécessite de connaître et de comprendre les solutions créées pour les résoudre.

Quoi à Google:

POO Fonctions angulaires, prototypes en action, modèles de POO et de PF, principes SOLID avec POO et de PF

Conventions de code

Les conventions de code permettent aux développeurs de rester sur la même page les uns avec les autres. C'est aussi un moyen éprouvé par l'homme et par le temps de garder votre code structuré, en uniforme et lisible.

Lorsque nous commençons, nous avons souvent nos propres idées sur la façon de nommer nos classes, fichiers, tabulations ou espaces, indenter notre code. Parfois, nous n’avons même pas de structure claire pour nommer les choses, rejetant tout ce qui nous semblait logique à l’époque - pour regarder en arrière et nous demander ce que vous pensiez.

Ne pas connaître les conventions de code, c’est comme regarder un enfant porter son assiette: il ne s’y connaît pas mieux et pense que c’est la plus belle chose au monde, ce qui laisse un désordre énorme à quelqu'un de le ranger.

C’est une chose d’être la seule personne à travailler sur une base de code. Les choses se compliquent une fois que vous faites partie d'une équipe.

Comment aller mieux:

L'un des moyens les plus simples de comprendre les principales conventions de formatage consiste à utiliser un IDE prenant en charge le formatage automatique. Dans Visual Studio Code, il existe une extension appelée Prettier - Formateur de code de Esben Petersen qui formate automatiquement votre code de manière normalisée lorsque vous cliquez sur Enregistrer.

La beauté de Prettier réside dans le fait qu’il importe peu de savoir comment formater votre code, car cela résoudra les problèmes pour vous à la fin. Si vous ne vous conformez pas déjà aux conventions en matière d'indentations, de placement de crochets et d'alignement de votre code, les résultats générés par Prettier peuvent être un choc pour votre système - mais c'est un bon choc qui devrait commencer à vous toucher. la bonne direction pour écrire un code correctement formaté.

Mais Prettier ne traite pas de tout en matière de conventions. Vous devrez apprendre les conventions de dénomination, quand utiliser __ et dans quel contexte. Structures de dossiers pour votre type de projet et quels types de groupes de fichiers pour la bibliothèque ou la structure choisie.

Quoi à Google:

Conventions de code JavaScript, conventions de nommage en JavaScript, conventions de nommage Angular / React / Vue, Angular / React / Vue / tout ce que vous utilisez par-dessus les conventions de structure de dossiers JavaScript, comment installer des extensions de code VS

Principes visuels de conception numérique

En tant que développeur Web, la création de conceptions numériques époustouflantes peut déjà être pavée de maquettes et de PDF de concepteurs. Cependant, la vie en tant que développeur n’est pas toujours aussi simple et connaître les principes de conception visuelle peut vous aider à comprendre sa relation et sa structure avec votre code.

Lorsque vous êtes capable de comprendre les principes de conception numérique, vous êtes en mesure de penser à l’architecture de votre code. La connaissance des principes de conception numérique fait de vous un développeur beaucoup plus polyvalent, capable de prédire les exceptions à la conception et de lever le drapeau. Cela améliore également votre relation avec la création d'un code fluide capable de répondre à la multitude de besoins en taille d'écran.

Comment aller mieux:

Google a publié Material Design comme guide pour la création de produits intuitifs. Les six principes classiques du design sont également pertinents pour les rendus numériques. Il serait donc utile de vérifier cela également.

Le design est une forme d'art et si vous n'êtes pas assez sûr de vous pour créer vos propres interfaces attrayantes, vous pouvez alors regarder les dessins des autres personnes et les copier. Travaillez à recréer des clones visuels à partir de vos sites Web et interfaces mobiles préférés. Cela vous aidera à comprendre les modèles utilisés, leur interaction et leur mise en œuvre.

Quoi à Google:

principes de conception visuelle, conception matérielle, awwwards, Smashing Magazine, conception fluide, conception adaptative, première conception mobile

Vous devez apprendre Git

Il n'y a pas d'idiot qui s'échappe, même si tu le voulais. C’est l’enfant le plus important et le plus populaire du moment en ce qui concerne le contrôle de version, le partage de code et la révision des modifications.

Si vous ne savez pas utiliser git, vous êtes désavantagé, en particulier lorsque vous travaillez en équipe. La plupart du temps, la connaissance git est l’un des principaux indicateurs du développeur débutant par rapport au développeur débutant.

Comment aller mieux:

Ne t'inquiète pas. Git est facile. Tout ce dont vous avez besoin au minimum est de savoir comment créer une branche, mettre en scène, pousser et revenir en arrière. La fusion de branches git peut être effectuée via des requêtes d'extraction, mais si vous devez le faire dans la console, quelques requêtes dans Google devraient vous fournir la commande dont vous avez besoin.

Vous pouvez vous entraîner en créant un compte GitHub, si vous n'en avez pas déjà un. Jouez avec les commandes et apprenez à vous connecter à votre compte via la console. Vous pouvez, en théorie, utiliser le client GitHub qui vous donnera une version visuelle, mais qui va à l'encontre de l'objectif d'apprendre à utiliser git. L'apprentissage des commandes de terminal peut également s'avérer utile et accélérer votre flux de travail dans certains cas.

Quoi à Google:

git, commandes de workflow git, apprendre git

Tests unitaires 101

Les tests unitaires nécessitent une méthode de réflexion complètement différente en ce qui concerne la création de code. Cela commence par le résultat escompté et garantit que les exceptions sont détectées et traitées.

La façon habituelle d’apprendre à coder se fait de manière ad hoc avec des fonctions expérimentales ici et là, traitant les mutations de code au fur et à mesure. Une approche basée sur les tests commence à la fin et fonctionne en arrière vers le début. Il garantit que vous architecturez votre code avant de vous enfoncer dans le bois.

Apprenez l'art de la conception et de l'architecture pilotées par les tests pour vous assurer que vous obtenez un produit robuste qui détecte les entrées et les sorties. Il réduit les erreurs humaines par erreur et attrape les insectes avant qu'ils ne se faufilent dans les fentes et n'entraînent sa tête agaçante dans les endroits les plus insoupçonnés.

Il vous oblige à diviser votre code en plusieurs parties et vous aide à vérifier qu'une unité de code spécifique fonctionne comme prévu. Si quelque chose change dans votre base de code, toutes les ruptures dont les causes sont modifiées doivent être capturées par les tests, ce qui réduit le temps requis pour rechercher l'erreur et son origine.

Comment aller mieux:

Il existe de nombreux frameworks et bibliothèques de tests unitaires, tels que Jasmine, Mocha et Jest. Il y a de fortes chances que vous utilisiez un framework tel que Angular ou une bibliothèque telle que React pour construire le côté JavaScript de votre code. Vous devrez rechercher quel framework de test ou quelle bibliothèque est utilisé en association.

Quoi à Google:

principes de tests unitaires, ce que les tests unitaires ne sont pas (pour aider à écarter les idées fausses communes), Jasmine, Mocha, Jest, différences entre les frameworks et les bibliothèques de tests unitaires, modèles de tests unitaires

Entièrement empiler avec Node et une base de données

Si vous ne vous occupez que du Web, cela fait de vous un développeur Web frontal. Cependant, connaître la manière dont les API sont créées et la manière dont les éléments interagissent avec une base de données peut vous aider à vous différencier d'un développeur purement front-end.

Bien que ce ne soit pas une condition préalable pour devenir un développeur Web fantastique, cela peut diversifier vos compétences et renforcer votre compréhension avec une perspective de bout en bout. De plus, vos compétences sont plus commercialisables pour les employeurs potentiels.

La plupart des entreprises traditionnelles utilisent des bases de données relationnelles basées sur mySQL. Il est donc utile de connaître et de comprendre le fonctionnement des tables et des relations. Beaucoup de startups optent pour des bases de données sans tableaux comme MongoDB en raison de leurs coûts à long terme, de la flexibilité qu’elle offre pour leur potentiel de croissance et de la facilité de mise en œuvre.

Node.js vous permet de créer une interface dorsale entre votre base de données et de la traduire en une API consommable pour votre front-end.

Comment aller mieux:

Créez un ensemble d’API CRUD qui se connecte à une base de données si vous n’avez jamais rencontré Node.js auparavant. Créer, lire, mettre à jour et supprimer est le Saint Graal de presque toutes les actions possibles pouvant se produire. Tout finalement pointe vers la base de données et si vous êtes en mesure de créer un ensemble d’API qui interagit avec celle-ci, vous êtes prêt à effectuer un grand nombre de tâches d’arrière-plan.

Comme Node.js est en JavaScript, la vie est beaucoup plus facile pour vous que ce qu’il aurait été il ya une dizaine d’années, où vous aurez besoin d’apprendre un autre langage comme Java ou C ++ pour créer une telle chose.

Quoi à Google:

Node.js CRUD, connexion de noeud à la base de données, modèles d'API de noeud, MongoDB, conception et architecture mySQL

Possibilités d'infrastructure

AWS, Google Cloud, Azure et Heroku sont autant d’espaces potentiels que vous pouvez explorer en matière d’infrastructure. C’est une chose de pouvoir créer une application de bout en bout, c’est une autre de pouvoir la placer quelque part et de la rendre publique.

En ce qui concerne AWS, tirer parti de S3 pour l'hébergement statique ne vous coûtera que très cher. Il convient également de noter qu'AWS est le plus grand acteur dans les solutions cloud et propose plus de 90 services, couvrant tout ce que vous pouvez imaginer.

Gloogle Cloud et Azure suivent le même concept, offrant des services équivalents à des prix compétitifs.

Heroku ressemble plus à une boîte dans laquelle vous pouvez insérer tout ce que vous voulez, ce qui peut constituer une solution polyvalente si vous souhaitez mettre votre application sur le Web.

Comment aller mieux:

Choisissez l'un des services ci-dessus, créez le compte gratuit et déployez une application que vous avez créée sur le Web. Découvrez comment différents services fonctionnent ensemble et comment diviser votre application de pile complète en composants à adapter.

L'utilisation de Heroku vous familiarisera avec Docker et les outils de ligne de commande. L'utilisation d'AWS vous aidera à vous habituer à leur combinaison principale pour les solutions Web. Il en va de même pour Google Cloud et Azure.

L'infrastructure est l'une de ces choses dont vous avez juste besoin pour vous salir les mains afin de voir comment tout cela s'harmonise.

Quoi à Google:

Pile / déploiement Web AWS / Azure / Google Cloud, Heroku et Docker, déploiements Docker, pipeline de distribution continue pour AWS / Azure / Google Cloud / Heroku

Mots finaux

Parfois, il est difficile d’acquérir des compétences lorsque vous ne savez pas ce que vous êtes censé apprendre. J'espère que ce guide vous a permis de mieux connaître l'éventail de sujets nécessaires pour passer d'un niveau débutant à un niveau débutant.

Dans le monde de la programmation, la véritable ancienneté n'est pas déterminée par le nombre de semaines, de mois ou d'années qu'une personne a à son actif. Cela dépend de la profondeur et de l'étendue de leurs connaissances, de la souplesse et de la fluidité de leur esprit, de leur capacité à appliquer et à adapter ces connaissances aux problèmes, ainsi que de leur capacité à élaborer du code de manière créative de la manière la plus efficace, lisible et succincte.

Restons en contact et rejoignez ma liste hebdomadaire de bulletins d’informations Web. Merci d'avoir lu.❤

Aphinya