Une méthode pour créer des pages web plus vite que son ombre

source

Je m'appelle Cybil et je suis développeuse chez LiveMentor, l'école en mieux. Aujourd'hui, nous sommes en plein projet pour faire évoluer nos interfaces, mode connecté, public, etc…

Vous l'aurez deviner, il y a beaucoup de Front à développer, et il faut aller vite !

Je suis persuadée que la vélocité d'un développeur pour implémenter des interface Front-end est très fortement liée à son degré de concentration et sa capacité à atteindre le Flow.

Le Flow, quésaco ?

Pour les plus curieux, voici la définition selon wikipédia.

En quelques mots, le Flow, c'est l'état psychologique dans lequel on est lorsqu'on est très très concentré. Au point par exemple de ne pas entendre une personne qui nous parle à quelques centimètres.

Le cerveau a, à ce moment là, parcouru un chemin de réflexion complexe qui permet d'être en symbiose avec son activité (ici, le code).

Comment je peux "Flowter" ?

Pardon pour le jeu de mot ! Il n'y a pas de recette miracle, mais je vous partage ma technique pour arriver dans cet état presque magique :)

• couper son téléphone (mode avion ou à minima sans wifi/4G)
• mettre slack en pause (par ici !)
• se mettre dans sa bulle : on peut écouter de la musique (vous savez, cette chanson qui passe sans que vous ne l'écoutiez vraiment, mais que vous aimez comme fond sonore). Souvent, les titres sans parole sont plus utilisés pour aider à la concentration, mais une petite playlist rock/métal passe très bien 🤟. Si vous aimez la nature, Noisli propose une simulation de sons "naturels".
• faire attention à ses yeux ! le regard est attiré par le contraste, je code personnellement sur des écrans à fond sombre avec les écritures en blanc/couleurs claires. Pour éviter d'avoir le regard attiré par une intrusion dans la pièce, un mouvement proche ou autre.
• se mettre à l'aise : mettez vous dans une position qui vous détend, où vous pouvez rester sans bouger un bon moment (car vous n'y penserez même plus), ayez de l'eau à porter de main, ou tout ce qu'il vous faut !
• prévenez les collègues ! une fois dans le Flow il est hors de question que quelqu'un vienne vous interrompre et casse votre magnifique château de cartes intellectuel ! (une petite pancarte 'Do not disturb' peut faire l'affaire)

Attention, la durée dans le Flow n'est pas infinie, il y a un moment où vous allez décrocher, et c'est normal :)

Partez avec un plan de route

L'autre point qui, je pense, est important pour apporter une bonne vélocité à un développeur est de définir des étapes avant de commencer à coder.

Voici ma recette personnelle pour avancer rapidement dans un développement Front-end.

La TodoList

Je dresse donc la liste des différentes étapes à accomplir pour la feature en question (ici, une page front avec quelques animations en JS). Par exemple:

• [ ] bloc next_class
• [ ] bloc next_class responsive
• [ ] bloc ask_question
• [ ] bloc ask_question responsive
• [ ] add JS

Aussi détaillée que possible pour deux principales raisons:

• on ne perd pas de temps quand on regarde cette liste à réfléchir à ce que les étapes impliquent : "bloc next_class", c'est le bloc next_class et rien d'autre !
• on prépare son cerveau au travail à accomplir, scoper le travail à accomplir permet de se poser les questions dès le début pour ne pas perdre le focus au milieu de l'implémentation (et tiens.. après ça, je fais quoi déjà ?)

Les outils nécessaires

Dual screen c’est la vie

Pour développer ma page, je vais avoir besoin de plusieurs outils, je m'arrange pour les avoirs tous sous la main avant de commencer :

• l'éditeur de texte avec TOUS les fichiers nécessaires ouverts (le HTML, le CSS, le JS, etc..), si les fichiers ne sont pas crées, je les créer tranquillement sans trop réfléchir.
• Le template du design: le template, si il est sur un outil informatique, est ouvert (sur un deuxième écran chez moi). Il doit si possible être visible en même temps que le code, ou accessible extrêmement rapidement ! Je ne cache pas qu'un dual screen est ici la meilleure des solutions.
• l'outil du template: petite parenthèse ici, mais l'outil choisi pour le template est assez important pour limiter l'apport intellectuel nécessaire. Nous utilisons Figma, ou Zeplin auparavant, qui nous permet d'avoir accès au CSS du design en un petit clic)
• la page à implémenter ouverte en staging dans un onglet (sur le même écran que le template ! oui oui on ne le voit pas)

La technique d'implémentation

Pour éviter de se disperser, il faut regrouper les tâches similaires et les faires d'un coup, puis passer à un autre type de tâche, etc..

Je découpe alors l'implémentation de mes pages Front en plusieurs phases:

• La structure
• Le contenu
• Le style
• L'animation
• Les ajustements

La Structure c’est plus ou moins rien que les <div> et quelques links.

Aucun texte.

Aucune classe CSS (ou presque).

Des placeholders pour les liens (ici le path pour la home page).

On demande ici une analyse du design avant de code, pour voir comment fonctionnent les différents éléments entre eux, notamment en passant en responsive, qui est lié avec qui, etc…

La copy

il s'agit du contenu de la page. Chez LiveMentor, on utilise I18n pour gérer nos locales et afficher le contenu dans la bonne langue.
Le process consiste ici à :

• simplement copier coller le contenu du design dans le fichier YML de la page
• à écrire les clefs YML dans le HTML
• et si vous avez des variables, à les insérer également, en allant les mettre dans le controller ou bien simplement en haut de page (à refactor plus tard).

Notez qu'à aucun moment je ne parle d'aller voir la page en local et d'actualiser pour voir le résultat ! Un peu de patience, on verra ce que ça donne à la fin 😲

Le style

Chez, LiveMentor, nous avons notre propre Framework graphique LiveStyle, qui nous permet de ne (presque) jamais avoir à écrire du CSS. J'ai dans mon éditeur de code le fichier de notre LiveStyle ouvert avec les classes CSS dont je ne connais pas le nom par coeur.
Et là.. c'est le remplissage ! des classes partout ! Sur Figma, on peut voir les styles utilisés par notre Designer, et appliquer la classe CSS de LiveStyle correspondante.

Si vous n'avez pas de framework CSS, ouvrez simplement un fichier CSS et collez vos nouvelles classes dedans :) L'étape du refactoring se fera quand vous serez sortis du Flow.

C'est le moment de vérité ! Il est temps, si vous le souhaitez, d'aller voir ce que ça donne et d'actualiser votre page en local. Après peut-être quelques erreurs, vous aurez votre résultat.

À partir de maintenant il va falloir résister à la tentation d'aller regarder cette belle page toutes les 5 secondes, à chaque petite update.

L'animation, c'est le JavaScript. Ici pas de réèlle recette magique, rien qu'une règle d'or : ne pas actualiser sa page chaque petite modification !
Mettez un debugger et allez coder directement dans la console du navigateur, et seulement une fois que vous pensez avoir la totalité de la feature, là, vous pouvez actualiser :) Nous sommes bien ici dans un cas de JS très simple !

Les ajustements

Comme personne n'est parfait, c'est très rare de sortir la page parfaite du premier coup, on peut mal jauger une margin, une color ou autre. Il y a donc une phase d'ajustement qui est ici très importante aussi !

Si vous n'êtes plus dans le Flow, c'est plutôt normal :) Vous pouvez faire la suite sans soucis, mais en restant concentrer !

Un petit changement d'outil est nécessaire ici, si vous travaillez en dual-screen : mettez sur un écran le template du design, et sur l'autre, votre page en local. Et c'est parti pour le jeu des 7 différences \o/
Un petit cycle se lance :

• trouver une différence
• aller dans le code pour la fixer
• ne pas actualiser la page !

Une fois que vous pensez avoir tout fini, vous pouvez actualiser, puis recommencer si il manque encore des choses.

Pourquoi tant de haine pour F5 ?

Vous l'aurez remarqué, je recommande de n'actualiser que très peu sa page en local. Pourquoi ?
Recharger la page prend du temps. C'est un temps inutile (un peu comme quand on spam son ls en console sans trop savoir pourquoi…)

• le temps de chargement de la page
• le temps de retourner sur son code, il faut retrouver la ligne et l'endroit exact où on était
• c'est une interruption
• ça ne change rien au code que vous allez écrire

Des élèves ravis

On a la chance de pouvoir voir la communauté réagir dès les heures qui suivent la sortie.

Mieux que de la dopamine

Ceci est un exemple de la dernière feature sortie “Salle de classe”. Elle permet aux élèves de pouvoir voir les questions d’un cours, avant que celui ci ait lieu.

Nos élèves ont l’air ravis de voir le site de LiveMentor évoluer à la vitesse du Flash 🚀