À propos de WebDev Tools

Oui, je sais. La dix millième collection d'outils sur Internet. Qui en a besoin ? Mais je peux vous rassurer : ce projet n'a jamais été prévu. C'est un accident, le fruit d'une pure procrastination, mais aussi une leçon sur l'utilisation de l'intelligence artificielle.

Tout a commencé tout simplement sur mon bureau.

Au commencement était le script

Comme beaucoup de développeurs, j'avais moi aussi stocké divers outils maison sur mon localhost. De petits scripts pour les tracas quotidiens : une conversion em/px par-ci, une petite aide par-là. Des choses pour lesquelles j'étais trop paresseux pour rechercher les mêmes sites web à chaque fois. Car je suis en guerre totale contre les signets.

Ces petits outils faisaient bien leur travail. Mais j'en ai ajouté deux autres et mon instinct de développeur web a frappé sans pitié : j'ai commencé à les relier entre eux. Il fallait un menu. Un peu de mise en forme. Et soudain, je me suis retrouvé plongé dans tout ce qui vient à l'esprit quand on veut réussir à se distraire de son travail. La simple collection s'est transformée en un projet à part entière. Il fallait que je le "pimp" jusqu'à ce que j'aie devant moi un vrai petit site web avec tout ce qu'il faut.

« IA, à toi de jouer ! » - était-ce une idée farfelue ?

À un moment donné, une pensée m'est venue : ce ne sont que de simples scripts. Laisse l'IA s'en occuper ! En tant qu'utilisateur fidèle de VS Code, j'ai directement lancé le projet avec Claude Code (Sonnet).

Mais avant de laisser carte blanche à l'IA, il fallait établir des lignes directrices claires. J'ai donc tout d'abord défini une pile technologique fixe. À partir de celle-ci, j'ai dérivé un fichier CLAUDE.md (strictement limité à 60 lignes maximum - les chaînes de commande courtes sont essentielles avec les IA) ainsi qu'un fichier .claude/comments/review.md. Tout aussi essentiels pour votre portefeuille, un fichier .claudeignore cohérent et un fichier .claude/settings.local.json adapté de manière ciblée permettent d'économiser massivement des jetons lors du codage.

Le résultat fut surprenant : une application web étonnamment performante et extensible de manière modulaire. Mais bien sûr, tout ne s'est pas déroulé sans accroc. Il faut constamment empêcher une IA d'en faire trop. Ma commande principale est rapidement devenue : « Non, on n'a pas besoin d'un gestionnaire de paquets ! Et maintenant, arrête de vouloir me proposer encore un framework ! » Au final, on a tout de même abouti à une structure de base utilisable.

Les pièges du « vibe coding »

Le projet a pris de l'ampleur et j'ai rapidement appris quelques leçons difficiles sur la collaboration avec mes collègues numériques.

• La question du framework : les IA adorent Tailwind. Après quelques ajustements manuels qui ont mis ma patience à rude épreuve, celle-ci a fini par s'épuiser. Je suis alors passé à Bootstrap pour mener le projet à bien de manière pragmatique. Parfois, « fini » vaut tout simplement mieux que « parfait » (ou Tailwind).


• Sans Git ? Sans moi ! Par habitude, j'ai directement créé un dépôt. Heureusement ! Je me suis vite rendu compte que ce « vibe coding » sans plan et sans contrôle de version se solde par une énorme perte de temps.


• Logique IA vs réalité : les IA se facilitent parfois trop la vie - ou se la compliquent trop. Certes, Claude s'est considérablement amélioré sur ce point et analyse désormais le code de manière nettement plus approfondie au lieu de spéculer à l'aveuglette. Cependant, si l'on ne précise pas exactement où l'on veut aller, les IA ont toujours tendance à proposer des solutions de script fantaisistes qui mènent à une impasse. Sans un « git reset --hard » bien décidé, j'aurais sans doute dû redémarrer le projet à zéro plus d'une fois.


• Ping-pong IA lors de la révision du code : pour l'assurance qualité, j'ai misé sur un système de « freins et contrepoids ». La commande /review déclenche la vérification interne de Claude, qui fonctionne strictement selon les spécifications de mon fichier review.md. En complément, j'ai fait réaliser des revues externes par ChatGPT et Gemini, puis j'ai discuté des résultats avec Claude Opus. Cette « revue IA pour la revue IA » est certes assez méta, mais extrêmement utile pour recouper différentes façons de penser et combler les lacunes logiques.

Bonus : l'IA comme traductrice ?

Une fois la fonctionnalité en place, c'était au tour des traductions. C'est là que l'IA a montré son côté philosophique : Claude Sonnet 4.5 m'a fait remarquer de lui-même que les langues comme l'hindi, le chinois ou le japonais ne se résument pas seulement à du vocabulaire, mais qu'elles impliquent aussi des particularités culturelles et des formes de politesse. C'était un niveau de réflexion sur soi-même rafraîchissant.

Dans la pratique, cependant, j'ai dû faire preuve de pragmatisme : pour la traduction par lots du contenu statique, Claude m'a semblé trop « intellectuel » et trop compliqué. Avec Gemini et ChatGPT, la qualité d'exécution était trop variable. Au final, j'ai tout fait traduire par DeepL. Là encore, il faut choisir le bon outil pour le bon travail !

De l'intranet au grand public

Une fois la collection d'outils terminée et capable de prendre en charge plusieurs langues, elle a rendu de bons services pendant un bon moment sur notre réseau d'entreprise. À un moment donné, je me suis dit : pourquoi ne pas la partager ?

J'ai donc fait un peu de ménage et rendu le site public. Et comme tout cela est né d'un « accident », le code est entièrement ouvert. Si vous souhaitez y contribuer ou si vous trouvez une erreur, vous trouverez le dépôt Git ici : https://github.com/RamonKaes/WebDev-Tools.

Oui, désolé. La 10 000e collection d'outils est donc désormais disponible. La 10 000e collection d'outils. Mais bon, au moins, elle a une belle histoire derrière elle !

Amusez-vous bien avec !

Ramon