Ce que j'ai appris sur le développement frontal de 12 à 22 ans

Photo de Teddy Kelley sur Unsplash

Parfois, mes amis me demandent comment je suis entré dans le développement frontal. Je dirais que je suis un peu tombé dessus. mais la vérité était que je ne savais pas vraiment. La semaine dernière, j'ai plongé dans les coins sombres d'Internet pour dénicher tous les projets frontaux sur lesquels je travaille depuis mes 12 ans.

Et mon garçon, c'était une plongée.

Les voici donc. Chaque décision terrible, chaque site Web embarrassant, chaque erreur et leçon apprises qui ont fait de moi le développeur front-end que je suis aujourd'hui. Les voici, dans leur pleine gloire non filtrée.

(Si vous débutez dans le développement front-end, j'ai inclus des pépites de connaissances que j'ai apprises en cours de route et qui, je l'espère, vous feront gagner du temps dans votre voyage. Si vous êtes un vieux… j'espère que cette histoire vous donne un rire ou deux )

12 ans

Permettez-moi de préparer le terrain. C'était en 2007. Steve Jobs venait de présenter l'iPhone. Tout le monde utilisait MSN Messenger. Personne n'a aimé Windows Vista. Ce sont des choses dont je me souviens, mais je ne me souviens pas exactement quand j'ai décidé de créer un site Web.

J'ai aimé l'idée que quelque chose mis sur le Web puisse être vu par n'importe qui dans le monde, comme la magie. Ça ne pouvait sûrement pas être si difficile. Pourrait-il?

Mon premier site Internet - un voyage de mille pas… commence par des chapiteaux et des widgets flash?

J'avais tort. C'était difficile. Je n'avais aucune idée de ce que je faisais.

À un moment donné, je ne pouvais même pas comprendre comment utiliser une balise
, ce qui crée un saut de ligne. J'étais confus pourquoi un saut de ligne régulier dans le code ne rendait pas un saut similaire sur la page Web. J'ai essayé d'utiliser des balises

qui créent des paragraphes, mais je ne comprenais pas le concept d'habillage. J'ai même essayé de mettre en place une table juste pour commencer une nouvelle ligne.

Pour aggraver les choses, malgré tout ce travail acharné, c'était toujours hideux (même pour les années 2000). Je me souviens que mes camarades de classe s'en moquaient lorsque je partageais le lien avec eux via MSN Messenger. Là encore, pourrais-je leur en vouloir? Il avait toutes les atrocités du Web 1.0: gif, chapiteaux, arrière-plans mal carrelés, widgets Flash… vous l'appelez. J'étais découragé. Et donc, j'ai appris ma première leçon.

Votre premier projet sera mauvais. Ma première page HTML a été terrible. Mon premier fichier CSS était tellement désordonné que Marie Kondo n'y toucherait pas. Ma première application mobile a été ignorée. Ma première application React s'est écrasée toutes les minutes. L'apprentissage frontal est difficile car il est le croisement de nombreuses idées issues du design et de l'informatique, et il est normal de ne pas l'obtenir la première fois.
Je vous promets que cela devient plus facile. Au fil du temps, vous vous rendrez compte que vous avez développé un ensemble de compétences transférables (HTML, par exemple, vous aidera à créer des composants React et des dispositions d'activité Android). Reconnaître que vous êtes mauvais dans quelque chose est la première étape pour être bon en front-end.

Je savais que c'était mauvais, mais je savais aussi que je pouvais faire mieux. Donc pour Halloween, avec l'aide de Gimp, j'ai pimenté le site avec une nouvelle couche de citrouilles et une typographie évanescente. Hé, il y avait même un jeu d'aventure original où les joueurs ont sauvé un monde fantastique avec de la magie

Pendant la refonte, j'ai également appris une astuce intéressante. J'ai réalisé qu'il n'y avait pas de cachette dans le monde du HTML et du CSS. Chaque technique, chaque secret n'était qu'à une seule source de vue. Même Apple ne pouvait pas cacher les secrets de leurs belles pages de produits, et je passais des heures sur leur site à percer leurs mystères.

Si quelqu'un d'autre pouvait le faire, moi aussi.

Quelque part en cours de route, mes camarades de classe ont cessé de se moquer de moi.

Affichez la source. Chaque fois que vous voyez quelque chose de cool sur un site Web, demandez-vous si vous pouvez le reproduire. Pourriez-vous le faire avec seulement CSS? JavaScript? Sinon, faites un clic droit dessus> cliquez sur «Inspecter» (Chrome) ou sur Outils> Développeur Web> Inspecteur (Firefox) et essayez de procéder à une rétro-ingénierie du code. Mettez en favoris ou conservez une liste des effets sympas que vous aimeriez essayer un jour.

14 ans

Avant Snapchat et Instagram, les enfants avaient des blogs. Tous mes amis en avaient un. Beaucoup d'entre eux étaient heureux de personnaliser leurs blogs avec des thèmes standard. Mais pas de père, pas moi. Oh non.

J'ai commencé par modifier moi-même les thèmes existants. Ensuite, je construisais des thèmes comme cadeaux pour les anniversaires de mes amis. Des enfants d'autres classes sont venus me demander des thèmes. Je suis devenu le blogueur.

Je suis vraiment dans les rayures

Et c'est ainsi qu'a commencé ma véritable incursion dans le HTML. Chaque thème était un document HTML d'une seule page avec CSS intégré. En utilisant des pseudo balises comme <$ BlogItemTitle $>, je pouvais contrôler comment et où chaque élément était placé. Les pseudo balises seraient ensuite remplacées par du contenu réel par le fournisseur de services. Enfin, j'étais libre des confins des éditeurs WYSIWYG!

Alors, tripod.com!

Je me souviens avoir passé des heures à déplacer des éléments avec CSS, à apprendre les différences entre les types d'affichage et de position, les marges et les rembourrages. Pour un thème particulier, j'ai utilisé des rayures quadrichromies comme arrière-plan statique derrière un premier plan blanc avec des motifs transparents. Chaque élément devait être parfaitement aligné, de sorte que le motif se révélait lorsque l'utilisateur faisait défiler:

Un site à défilement horizontal, tellement énervé!

J'ai adoré développer des thèmes. J'ai réalisé qu'une page Web n'était pas seulement 2D, mais répond aux gens avec des pseudo-sélecteurs JavaScript et CSS, comme: hover et: active. Ils ont grandi et rétréci, s'estompaient dans et hors.

C'était une surface vivante et interactive.

Une fois bien faites, ces interactions ont ravi les gens et j'ai adoré regarder les réactions de mes amis à leurs nouveaux thèmes. Je me suis poussé à essayer de nouvelles idées et techniques pour découvrir ce que les gens appréciaient.

️Développer pour les interactions. De bons éléments frontaux sont découvrables (fournissent des indices sur la façon de l'utiliser) et fournissent des commentaires (réagissent aux interactions de manière informative). Par exemple, un bouton peut changer les couleurs d'arrière-plan au survol et augmenter l'opacité lorsqu'il est cliqué. Voici une bonne vidéo et un bon livre sur le sujet.

16 ans

En juillet 2013, j'ai enregistré mon premier domaine avec un hébergeur approprié Cela ressemblait à un rite de passage, comme si je faisais enfin quelque chose de réel. J'ai mis en place mon portfolio et depuis lors il abrite mes projets et expériences. Au fur et à mesure que j'ai acquis de nouvelles compétences, elles ont grandi et évolué à côté de moi.

Ils grandissent si vite

Je ne saurais trop insister sur l'utilité d'avoir un domaine et un bon hôte de serveur pour moi. Je pourrais expérimenter de nouvelles idées front-end sur le web. J'ai exécuté des tâches cron qui m'ont facilité la vie. Chaque fois que j'avais besoin d'un nouvel espace pour un client ou un travail scolaire, je pouvais créer un nouveau sous-domaine.

Je me sentais comme un grand garçon lorsque j'ai déployé mon premier site Web. J'avais presque l'impression de pouvoir faire des trucs comme ça pour gagner ma vie. Ce serait plutôt cool, me suis-je dit.

Créez un portfolio. Il s'agit d'un excellent projet pour en savoir plus sur le déploiement sur le Web. Les options simples incluent FTP, qui vous permet de copier vos fichiers et de les servir à partir d'un serveur. Une fois que vous êtes à l'aise avec cela, je vous recommande de configurer l'intégration continue et Git. J'ai essayé plusieurs fournisseurs avant de me retrouver avec l'hébergement mutualisé sur Dreamhost (lien affilié) dont je suis extrêmement satisfait. Mais il existe certainement des alternatives gratuites.

18 ans

À Singapour, les jeunes de 18 ans doivent passer deux ans dans l'armée. Par chance, j'ai été affecté dans une unité de l'armée à la recherche d'un développeur mobile. Ils ont demandé si j'avais fait quelque chose comme ça avant. Je ne l'avais pas fait, mais en quoi cela pourrait-il être différent de développer un site Web? Alors j'ai dit oui.

Il s'avère que j'avais tort. Mais bon, à ce moment-là, je n'étais pas du genre à laisser le manque d'expérience ou de qualifications m'arrêter.

Préfaisons ceci en disant que même si j'avais déjà travaillé avec du JavaScript auparavant, je n'avais pas de concept de programmation orientée objet, ce qui était particulièrement important dans le développement d'applications. Ma première tâche a été de développer une application Android pour une API existante qui permet aux soldats d'appeler malades. Mon deuxième était de créer un jeu éducatif.

J'ai passé des jours sur Google et StackOverflow, posant des centaines de questions les plus élémentaires comme «Comment créer un champ de texte» ou «Comment faire en sorte qu'un bouton fasse des choses». J'ai passé des semaines à me taper la tête sur le clavier sur NullPointerExceptions. Par la peau de mes dents, j'ai réussi à produire quelque chose de décent à mi-chemin.

Bien que les applications semblaient attrayantes, le code derrière cela était tout sauf cela. Il y avait des lignes et des lignes de code spaghetti, pas de modèles architecturaux clairs, et la logique était plus étroitement couplée qu'une clôture à mailles de chaîne. Il était impossible de maintenir et pour cette raison, aucune des applications que j'ai créées ne pouvait être activement mise à jour.

Il faudrait plusieurs années avant de lire comment écrire du code frontal évolutif et propre. Mais quand je l'ai fait, j'ai compris pourquoi c'était important.

🧪 Rédiger des tests. L'écriture de tests est probablement l'habitude la plus efficace que j'ai prise pour écrire un meilleur code. Rappelez-vous que lorsque vous apprenez à coder, vous avez écrit des fonctions qui ont essayé de passer plusieurs cas de test? C'est comme ça, mais maintenant c'est toi qui écris les tests aussi! La rédaction de bons tests pour chaque fonctionnalité (tests unitaires) vous permet de vous assurer que votre code fonctionne même lorsque vous modifiez d'autres parties de la base de code.
Séparez vos responsabilités. Avez-vous une fonction qui fait plusieurs choses? Divisez-les en plusieurs fonctions. Avez-vous une classe avec plusieurs morceaux de méthodes implémentant différentes fonctionnalités? Divisez-les en plusieurs classes. La séparation des responsabilités est peut-être le plus important des principes SOLID. Il rend votre code lisible et évolutif. Clean Code: A Handbook of Agile Software Craftsmanship (lien affilié) par Robert Martin est une lecture incontournable pour tout développeur frontal.

20 ans

En juin 2016, j'ai publié une application sur le Google Play Store. Il aide les élèves à en apprendre davantage sur la physique, un sujet que j'ai toujours aimé. Le premier jour, il y avait 3 téléchargements. Le deuxième jour, il en avait 5. Le troisième jour, il en avait 1 000. Je ne l'avais pas remarqué au départ, mais les chiffres ne cessaient de croître. Au cours de son premier mois, il a reçu 7 000 téléchargements. En septembre, les installations mensuelles étaient passées à 15 000.

Comment? Je n'avais fait aucun marketing du tout.

Il s'avère que quelqu'un a partagé l'application sur Reddit (deux fois!) Et les gens semblaient l'aimer. Il a été repris par plusieurs sites de critiques et blogs. Les gens ont commencé à en faire des vidéos sur YouTube. À ce stade, j'étais tellement excité que je ressentais des palpitations. Je pense que j'ai pleuré à un moment donné. J'avais l'impression que tout mon dur labeur portait enfin ses fruits.

J'ai été ramené au moment où j'ai créé des thèmes pour les blogs de mes amis comme cadeaux pour leur anniversaire. Au lieu de cela, maintenant, je faisais des cadeaux à des milliers de personnes à travers le monde. J'ai soudain réalisé à quel point j'aimais développer des interfaces qui pourraient aider les gens. Ces gens ont adoré.

La meilleure partie de cette expérience a été de connaître les personnes qui utilisent mon application. J'ai répondu à tous les commentaires sur Reddit et j'ai accueilli les e-mails concernant les questions de physique que les gens pourraient avoir. Parfois, j'ai de beaux petits messages, comme celui-ci:

Ceci est mon e-mail préféré, à partir d'une application que j'ai faite avant
Choisissez un projet qui vous tient à cœur. Vous avez lu les livres. Vous avez suivi le cours Codecademy. Vous maîtrisez les mondes hello et les fonctions récursives. Maintenant quoi? Réfléchissez bien aux domaines dans lesquels vous êtes un expert relatif. Êtes-vous un fin gourmet? Un ornithologue amateur? Un maître des anecdotes? Pensez à quelque chose que vous utiliseriez. Réfléchissez à la façon dont vous pouvez aider les gens autour de vous ou un océan au loin. Faites défiler les applications sur votre téléphone - pouvez-vous améliorer l'une d'entre elles?
Si vous pensez que vous avez trouvé quelque chose, plongez-vous. N'attendez pas d'être prêt, n'attendez pas la permission. Jetez-vous dans le grand bain; surfer sur les hauts et les bas du développement frontal. C’est ainsi que vous créez quelque chose qui fait la différence.

22 ans

J'ai continué à explorer de nouvelles idées et techniques, en travaillant sur des projets qui me passionnaient. Certains d’entre eux étaient très difficiles, mais j’avais appris à tirer parti de mes connaissances. Le développement front-end regorge de compétences transférables.

React a été une révélation. Après des années à séparer les vues de la logique, c'était une bouffée d'air frais de trouver un cadre qui intègre élégamment le HTML, les données et la logique. C'était comme si j'avais coupé des arbres avec un couteau à beurre toutes ces années, et quelqu'un venait de me donner une tronçonneuse.

Android est désormais un plaisir de travailler avec. De nombreux points douloureux ont été résolus et Kotlin est un plaisir à écrire. Certains des meilleurs cerveaux du monde travaillent à améliorer le développement du front-end mobile, avec React Native, Flutter et bien d'autres.

C'est le moment idéal pour devenir développeur front-end.

Il y a quelques années, j'ai développé une page de destination avec le slogan: Vous êtes plus talentueux que vous ne l'imaginez. J'aimerais que quelqu'un me le dise quand j'avais 12 ans, car j'étais sur le point d'abandonner après mon premier échec.

Un professeur de théâtre m'a dit plus tard que le talent n'était que la somme d'un travail acharné. De cette façon, j'ai eu beaucoup de chance que les événements m'aient amené à commencer tôt mon voyage. Je suis reconnaissant pour les personnes que j'ai rencontrées en cours de route qui m'ont guidé et m'ont confié, un adolescent maladroit, leurs affaires et leurs idées. Cela a commencé comme un hobby solitaire pendant de nombreuses années, mais maintenant j'ai des amis qui partagent mes passions.

Cela fait 10 ans et je ne peux pas attendre la suite.

Trouvez votre communauté. Personne n'est une île, et aucun développeur frontal n'est un élément div flottant isolé. Rejoignez vos Meetups frontaux locaux. Allez aux conférences. Suivez les référentiels git que vous utilisez. Écrivez aux publications. Écoutez des podcasts. Glissez-vous dans certains DM Twitter. Trouvez des gens qui vous diront: vous êtes plus talentueux que vous ne l'imaginez.

Vous avez aimé cette histoire? J'adorerais entrer en contact!
Dites bonjour sur Twitter, LinkedIn ou consultez mon site Web.