Je suis développeuse front-end depuis plus de dix ans. J’ai progressivement constitué une boîte à outils qui répond à mes besoins quotidiens, que je travaille seule ou en équipe. Les outils que j’utilise aujourd’hui ne sont pas forcément ceux que j’ai toujours utilisés. La liste peut même évoluer après la rédaction de cet article. Je cherche sans cesse à optimiser ma façon de travailler, gagner du temps, améliorer la qualité de mon code, faciliter la collaboration, déployer ou encore structurer ses idées. Ainsi, je vous présente ici les outils que j’utilise le plus régulièrement, classés par type de tâches. Ils m’aident à rester productive et organisée.
Prototypage : réalisation des mockups du site
Au début de tout projet, je commence par créer le prototype du site que je vais développer. Cela me permet de réfléchir notamment à l’ergonomie des pages web que je vais réaliser. Pour cela, j’utilise depuis un certain temps Balsamiq. J’aime particulièrement l’aspect simple des maquettes que je crée avec cet outil, le style est volontairement très sobre. Je livre ainsi une maquette représentant l’interface utilisateur représentée par le squelette du site, sans aspect esthétique. Cela permet ainsi de positionner sur un schéma les différents éléments de l’interface. On se concentre sur le contenu et l’organisation du site, sans se laisser distraire par les choix graphiques.
Les générateurs de contenu fictif
Même si je préfère créer des maquettes avec du vrai contenu, j’ai parfois besoin de textes de substitution. C’est pourquoi j’utilise du faux contenu, aussi connu sous le nom de Lorem ipsum, pour visualiser l’emplacement des textes, ce qui aide à se projeter dans le rendu final.
Si vous êtes sous un environnement Mac, il existe des applications sur l’App Store, vous permettant d’avoir du faux texte sous la main en quelques secondes.
Sinon, il existe des sites, facile à utiliser, qui permettent de générer ce faux texte.
- Lipsum : pour un texte généré classique (en latin).
- Cupcake Ipsum : pour un texte un peu original. Les mots latins sont remplacés par des sucreries (bonbons, gâteaux…)
Accessibilité et contraste des couleurs
Je prends très au sérieux l’accessibilité dans mes projets. Je m’efforce de rendre les interfaces lisibles pour tout le monde, notamment pour les personnes malvoyantes ou daltoniennes. Donc, je travaille sur le contraste des interfaces que je crée. Pour tester le contraste entre les textes et les arrière-plans, j’utilise soit l’outil Colour Contrast Analyser (qui est une application que l’on peut télécharger) et qui indique si le contraste respecte les normes WCAG (Web Content Accessibilité Guidelines, prononcez Wé Cag). J’utilise également le Contrast Finder de Tanaguru qui a l’avantage de proposer des contrastes valides correspondant aux couleurs initiales que vous avez saisies.
Un bon contraste améliore non seulement l’accessibilité, mais aussi le confort de lecture en général. Cela vous permettra d’éviter de créer des boutons jaunes avec du texte blanc 🙂
Gérer l’environnement de travail local
Comme je travaille avec WordPress, mon outil de prédilection est Local (by Flywheel). L’utilisation de cet outil est un vrai gain de temps. Son interface permet de créer un site WordPress en quelques clics. L’outil gère automatiquement les bases de données, les certificats SSL et même les accès SSH. Vous pouvez, entre autre, choisir quel type de serveur web vous voulez utiliser (Apache ou nginx), changer à la volée la version PHP (c’est d’ailleurs pour cela que je suis passée à Local, sur MAMP, c’était plus compliqué…). Il vous propose également un outil vous permettant d’envoyer des emails et d’ouvrir votre dossier dans VS Code.
Éditeurs de code
J’ai longtemps utilisé Sublime Text. C’est l’éditeur avec lequel j’ai appris à coder. Et il est toujours installé sur mon ordinateur. Il m’arrive encore de l’utiliser. J’ai changé pour VS Code (Visual Studio Code) quand j’ai commencé à écrire mon code CSS avec Sass, ce qui n’est pas pris en charge (notamment visuellement) avec Sublime Text et qui est pris en compte par défaut avec VS Code.
Pour les deux, on peut ajouter des extensions qui permettent d’améliorer leur utilisation.
(En passant, j’ai appris Sass sur le site de Grafikart. Mais vous pouvez aussi vous former à Sass sur le site OpenClassroom. Voire faire les deux formations, qui peuvent se compléter).
Outil de préprocessing
Comme je viens de le dire, j’écris mon CSS avec Sass. Sass permet de pousser plus loin le CSS, nous permettant effectivement d’utiliser des variables, de séparer votre code dans différents fichiers, de le minifier, etc.
Pour pouvoir retirer de vos fichiers Sass (.scss) un fichier .css et le minifier, vous devrez utiliser un logiciel qui va compiler votre code. Et c’est là que vous aurez besoin d’utiliser Prepros, indispensable pour compiler mes fichiers.
Le versionning avec Git
Depuis quelques années, même si je travaille seule la plupart du temps, je versionne mon code avec Git. Cela me permet de suivre l’évolution de mes projets, de collaborer avec d’autres dev quand l’occasion se présente et surtout de garder un historique de mes modifications. Ainsi pour le versionning, j’utilise Bitbucket qui propose des dépôts privés gratuits.
J’utilise Git en ligne de commandes et Bitbucket me permet de suivre l’historique de mes commits grâce à son interface visuelle simple.
Le design
Lorsque je dois ajuster un visuel, créer une bannière ou optimiser une image pour le web, j’utilise Affinity Photo. C’est une excellente alternative à Photoshop, avec un coût bien plus accessible et sans abonnement. Il me permet notamment d’exporter mes images au format WebP qui est conseillé pour la performance des sites web.
Analyser la performance d’un site web
Une fois le site développé, il est essentiel de tester sa performance. Un site rapide améliore non seulement l’expérience utilisateur, mais influence également le référencement naturel (SEO). Pour cela, j’utilise l’outil officiel de Google PageSpeed Insights.
Il permet d’analyser une page web en profondeur, aussi bien sur mobile que sur desktop, en attribuant un score de performance basé sur des critères comme le temps de chargement. Au-delà des chiffres, l’outil fournit des recommandations concrètes pour améliorer la vitesse de la page : compression des images, réduction du JavaScript, mise en cache, etc.
Ma boîte à outil a évolué et évoluera. Par exemple, l’outil que je testerai pour mon prochain projet est Responsively App qui est un outil open source très pratique pour les développeuses et développeurs front-end. Il permet de prévisualiser un site web sur plusieurs tailles d’écran simultanément : smartphone, tablette, ordinateur portable, écran large, etc.
Ma boîte à outil évolue donc au fil du temps et des projets, des tendances et de mes besoins. Entre les éditeurs de code, les outils de prototypage, les logiciels de transfert, les tests d’accessibilité ou encore les environnements de développement local, chaque outil joue un rôle dans la réussite d’un projet web.
Je suis ouverte à toutes nouvelles solutions et suis aussi preneuse de vos recommandations ! À vos commentaires 🙂 👇🏻
