Alan Pilloud
Alan Pilloud
Publié le 03 janvier 2020

Une partie de mon travail consiste à simplifier le développement de nos produits. Je me suis récemment chargé d’améliorer nos projets WordPress.

Pour la plupart des points abordés, il s’agit de changements relativement simples à mettre en place. L’intérêt pour moi est de le faire régulièrement.
Habituellement, je fais cet exercice avant de commencer un nouveau projet.

Voici un survol de ce qui a été récemment fait. Le but étant d’attirer votre curiosité sur ces points sans toutefois entrer dans les détails.

1. Harmoniser la manipulation des projets grâce à Make

L’outil make nous permet de décrire un ensemble d’actions commun à tous nos types de projets. Ainsi, utiliser make dev démarre notre environnement de développement, make install installe les dépendances, etc. et ce pour nos projets WordPress, Laravel, React Native et autres.

Je trouve très bénéfique de pouvoir fournir à chaque projet des commandes harmonisées, auto-documentées et faciles à partager au sein de notre équipe.

2. Analyse statique du code Sass

Nous utilisons déjà Prettier pour le Sass et JS, ce qui nous permet d’avoir beaucoup de régularité dans notre style de code. Pour aller plus loin, j’ai configuré stylelint qui permet de vérifier l’entier des fichiers .scss de notre projet en regard d’une liste de règles.

Cela nous permet d’être averti lorsque l’une de ces règles est enfreinte.

CSS étant un langage extrêmement permissif, il est vite arrivé d’intégrer de la confusion dans le code. Pour renforcer la solidité de notre code, nous utilisons la convention BEM.

Ceci a été inscrit dans notre Makefile, nous utilisons make lint pour exécuter cette tâche.

3. Incrément automatique de la version des fichiers JS & CSS

Les fichiers CSS et JS servis à l’internaute sont mis en cache par son navigateur. Lorsque nos mettons à jour ces fichiers, nous devons donc invalider le cache pour que l’utilisateur puisse constater le changement.
Pour cela, il suffit d’ajouter un numéro de version en paramètre d’url du fichier (https://monsite.ch/styles.css?v=1.0.3 par exemple). En mettant à jour ce numéro, le navigateur va rafraîchir cette ressource.

Nous le faisions à la main, il n’y avait qu’une variable à changer pour ce faire. C’est une tâche qu’il ne faut cependant pas oublier de faire et l’intérêt de la manipulation est très faible donc, on automatise !

Ceci à été inscrit dans notre Makefile, nous utilisons make build pour exécuter cette tâche.

4. Automatisation via les git-hooks

Git permet d’effectuer diverses actions (git-hooks) survenant lors de manipulation du projet.

Nous nous intéressons à ces deux-ci :

  • pre-commit : avant d’ajouter du code au projet, nous effectuons automatiquement l’analyse statique du code Sass. Si le résultat de l’analyse n’est pas bon, le code ne peut pas être ajouté au projet et doit être corrigé. C’est make lint qui est exécuté à ce moment précis.
  • pre-push : avant d’envoyer le code dans notre dépôt, nous mettons à jour automatiquement la version des fichiers JS & CSS. Ici, c’est make build qui est exécuté.

Le problème étant que les hooks ne sont pas propres à un projet, mais à chaque machine. Pour pouvoir harmoniser l’utilisation de ces hooks pour tous les développeurs, nous avons fait l’emploi de Husky.

5. Mailcatcher

Ajout du service Mailcatcher pour tester les emails localement avec plus de facilite en les interceptant sans les envoyer plus loin.

Cela nous permet de travailler avec des emails configurés pour la production sans se soucier de polluer les boîtes mails de nos clients avec nos tests.

6. Configuration Apache

Nous utilisons toujours la réécriture d’URL. Cela demande d’activer la réécriture d’url dans WordPress, puis de créer un fichier .htaccess.

Afin d’éviter de devoir créer le fichier .htaccess pour activer la réécriture d’URL a chaque démarrage de projet, la configuration est directement inscrite dans la config Apache.

Puis, notre script de création de site active la réécriture d’url.

7. Images d’exemple

Des images d’exemple sont directement disponible dans la galerie de médias. Ceci nous permet de tester les composants utilisant des images plus rapidement sans avoir à choisir des images.

On n’est pas bien là ?

Plus de rapidité, plus de régularité, plus de facilité à transmettre les connaissances, tout cela apporte beaucoup de confort à notre équipe. Bien sûr, ce n’est rien d’extravagant, mais c’est un travail à ne pas négliger.

Apporter régulièrement ce type d’amélioration est une excellente stratégie pour rester au top et cela impliquer relativement peu d’efforts.

Vous avez aimé ?
Partagez cet article :