Ma boîte à outils de développeuse web front-end

Je suis déve­lop­peuse front-end depuis plus de dix ans. J’ai pro­gres­si­ve­ment consti­tué une boîte à outils qui répond à mes besoins quo­ti­diens, que je tra­vaille seule ou en équipe. Les outils que j’u­ti­lise aujourd’­hui ne sont pas for­cé­ment ceux que j’ai tou­jours uti­li­sés. La liste peut même évo­luer après la rédac­tion de cet article. Je cherche sans cesse à opti­mi­ser ma façon de tra­vailler, gagner du temps, amé­lio­rer la qua­li­té de mon code, faci­li­ter la col­la­bo­ra­tion, déployer ou encore struc­tu­rer ses idées. Ain­si, je vous pré­sente ici les outils que j’utilise le plus régu­liè­re­ment, clas­sés par type de tâches. Ils m’aident à res­ter pro­duc­tive et organisée. 

Prototypage : réalisation des mockups du site

Au début de tout pro­jet, je com­mence par créer le pro­to­type du site que je vais déve­lop­per. Cela me per­met de réflé­chir notam­ment à l’er­go­no­mie des pages web que je vais réa­li­ser. Pour cela, j’u­ti­lise depuis un cer­tain temps Bal­sa­miq. J’aime par­ti­cu­liè­re­ment l’as­pect simple des maquettes que je crée avec cet outil, le style est volon­tai­re­ment très sobre. Je livre ain­si une maquette repré­sen­tant l’in­ter­face uti­li­sa­teur repré­sen­tée par le sque­lette du site, sans aspect esthé­tique. Cela per­met ain­si de posi­tion­ner sur un sché­ma les dif­fé­rents élé­ments de l’in­ter­face. On se concentre sur le conte­nu et l’organisation du site, sans se lais­ser dis­traire 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 conte­nu, j’ai par­fois besoin de textes de sub­sti­tu­tion. C’est pour­quoi j’u­ti­lise du faux conte­nu, aus­si connu sous le nom de Lorem ipsum, pour visua­li­ser l’emplacement des textes, ce qui aide à se pro­je­ter dans le ren­du final.

Si vous êtes sous un envi­ron­ne­ment Mac, il existe des appli­ca­tions sur l’App Store, vous per­met­tant d’a­voir du faux texte sous la main en quelques secondes. 

Sinon, il existe des sites, facile à uti­li­ser, qui per­mettent de géné­rer ce faux texte.

• Lip­sum : pour un texte géné­ré clas­sique (en latin).
• Cup­cake Ipsum : pour un texte un peu ori­gi­nal. Les mots latins sont rem­pla­cés par des sucre­ries (bon­bons, gâteaux…)

Accessibilité et contraste des couleurs

Je prends très au sérieux l’acces­si­bi­li­té dans mes pro­jets. Je m’efforce de rendre les inter­faces lisibles pour tout le monde, notam­ment pour les per­sonnes mal­voyantes ou dal­to­niennes. Donc, je tra­vaille sur le contraste des inter­faces que je crée. Pour tes­ter le contraste entre les textes et les arrière-plans, j’u­ti­lise soit l’ou­til Colour Contrast Ana­ly­ser (qui est une appli­ca­tion que l’on peut télé­char­ger) et qui indique si le contraste res­pecte les normes WCAG (Web Content Acces­si­bi­li­té Gui­de­lines, pro­non­cez Wé Cag). J’u­ti­lise éga­le­ment le Contrast Fin­der de Tana­gu­ru qui a l’a­van­tage de pro­po­ser des contrastes valides cor­res­pon­dant aux cou­leurs ini­tiales que vous avez saisies. 

Un bon contraste amé­liore non seule­ment l’acces­si­bi­li­té, mais aus­si le confort de lec­ture en géné­ral. Cela vous per­met­tra d’é­vi­ter de créer des bou­tons jaunes avec du texte blanc 🙂

Gérer l’environnement de travail local

Comme je tra­vaille avec Word­Press, mon outil de pré­di­lec­tion est Local (by Flyw­heel). L’u­ti­li­sa­tion de cet outil est un vrai gain de temps. Son inter­face per­met de créer un site Word­Press en quelques clics. L’outil gère auto­ma­ti­que­ment les bases de don­nées, les cer­ti­fi­cats SSL et même les accès SSH. Vous pou­vez, entre autre, choi­sir quel type de ser­veur web vous vou­lez uti­li­ser (Apache ou nginx), chan­ger à la volée la ver­sion PHP (c’est d’ailleurs pour cela que je suis pas­sée à Local, sur MAMP, c’é­tait plus com­pli­qué…). Il vous pro­pose éga­le­ment un outil vous per­met­tant d’en­voyer des emails et d’ou­vrir votre dos­sier dans VS Code.

Éditeurs de code

J’ai long­temps uti­li­sé Sublime Text. C’est l’é­di­teur avec lequel j’ai appris à coder. Et il est tou­jours ins­tal­lé sur mon ordi­na­teur. Il m’ar­rive encore de l’u­ti­li­ser. J’ai chan­gé pour VS Code (Visual Stu­dio Code) quand j’ai com­men­cé à écrire mon code CSS avec Sass, ce qui n’est pas pris en charge (notam­ment visuel­le­ment) avec Sublime Text et qui est pris en compte par défaut avec VS Code. 

Pour les deux, on peut ajou­ter des exten­sions qui per­mettent d’a­mé­lio­rer leur uti­li­sa­tion.

(En pas­sant, j’ai appris Sass sur le site de Gra­fi­kart. Mais vous pou­vez aus­si vous for­mer à Sass sur le site Open­Class­room. Voire faire les deux for­ma­tions, qui peuvent se compléter).

Outil de préprocessing

Comme je viens de le dire, j’é­cris mon CSS avec Sass. Sass per­met de pous­ser plus loin le CSS, nous per­met­tant effec­ti­ve­ment d’u­ti­li­ser des variables, de sépa­rer votre code dans dif­fé­rents fichiers, de le mini­fier, etc.

Pour pou­voir reti­rer de vos fichiers Sass (.scss) un fichier .css et le mini­fier, vous devrez uti­li­ser un logi­ciel qui va com­pi­ler votre code. Et c’est là que vous aurez besoin d’u­ti­li­ser Pre­pros, indis­pen­sable pour com­pi­ler mes fichiers.

Le versionning avec Git

Depuis quelques années, même si je tra­vaille seule la plu­part du temps, je ver­sionne mon code avec Git. Cela me per­met de suivre l’évolution de mes pro­jets, de col­la­bo­rer avec d’autres dev quand l’oc­ca­sion se pré­sente et sur­tout de gar­der un his­to­rique de mes modi­fi­ca­tions. Ain­si pour le ver­sion­ning, j’u­ti­lise Bit­bu­cket qui pro­pose des dépôts pri­vés gratuits. 

J’u­ti­lise Git en ligne de com­mandes et Bit­bu­cket me per­met de suivre l’his­to­rique de mes com­mits grâce à son inter­face visuelle simple.

Le design

Lorsque je dois ajus­ter un visuel, créer une ban­nière ou opti­mi­ser une image pour le web, j’utilise Affi­ni­ty Pho­to. C’est une excel­lente alter­na­tive à Pho­to­shop, avec un coût bien plus acces­sible et sans abon­ne­ment. Il me per­met notam­ment d’ex­por­ter mes images au for­mat WebP qui est conseillé pour la per­for­mance des sites web.

Analyser la performance d’un site web

Une fois le site déve­lop­pé, il est essen­tiel de tes­ter sa per­for­mance. Un site rapide amé­liore non seule­ment l’expérience uti­li­sa­teur, mais influence éga­le­ment le réfé­ren­ce­ment natu­rel (SEO). Pour cela, j’utilise l’outil offi­ciel de Google PageS­peed Insights.

Il per­met d’analyser une page web en pro­fon­deur, aus­si bien sur mobile que sur desk­top, en attri­buant un score de per­for­mance basé sur des cri­tères comme le temps de char­ge­ment. Au-delà des chiffres, l’outil four­nit des recom­man­da­tions concrètes pour amé­lio­rer la vitesse de la page : com­pres­sion des images, réduc­tion du JavaS­cript, mise en cache, etc.

Ma boîte à outil a évo­lué et évo­lue­ra. Par exemple, l’ou­til que je tes­te­rai pour mon pro­chain pro­jet est Res­pon­si­ve­ly App qui est un outil open source très pra­tique pour les déve­lop­peuses et déve­lop­peurs front-end. Il per­met de pré­vi­sua­li­ser un site web sur plu­sieurs tailles d’écran simul­ta­né­ment : smart­phone, tablette, ordi­na­teur por­table, écran large, etc. 

Ma boîte à outil évo­lue donc au fil du temps et des pro­jets, des ten­dances et de mes besoins. Entre les édi­teurs de code, les outils de pro­to­ty­page, les logi­ciels de trans­fert, les tests d’accessibilité ou encore les envi­ron­ne­ments de déve­lop­pe­ment local, chaque outil joue un rôle dans la réus­site d’un pro­jet web. 

Je suis ouverte à toutes nou­velles solu­tions et suis aus­si pre­neuse de vos recom­man­da­tions ! À vos commentaires 🙂 👇🏻