À propos de WebDev Tools

Oui, je sais. La 10 000e 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 de la procrastination et une leçon sur l'utilisation de l'intelligence artificielle.

Tout a commencé de manière tout à fait anodine sur mon bureau.

Au commencement était le script.

Comme beaucoup de développeurs, j'avais moi aussi enregistré quelques outils personnels sur mon hôte local. De petits scripts pour les tracas quotidiens : une conversion Em/Px ici, une petite aide là. Des choses pour lesquelles j'étais trop paresseux pour rechercher et consulter sans cesse les mêmes sites web. Je suis en effet en guerre ouverte avec les signets .

Ces petits outils m'étaient utiles. Mais j'en ai ajouté deux autres. Et c'est là que mon instinct de développeur web s'est réveillé.

J'ai instinctivement commencé à relier ces outils entre eux. Il fallait un menu. Et un peu de style. Et tout ce qui peut venir à l'esprit quand on veut se détourner avec succès de son travail. C'est ainsi qu' une simple collection de scripts s'est transformée en un projet à part entière. Je devais simplement « l'améliorer » jusqu'à obtenir un véritable petit site web avec tout ce qu'il faut.

« IA, prends le relais ! » – Une idée farfelue ?

À un moment donné, je me suis dit : ce ne sont que des scripts simples. Pourquoi ne pas laisser l'IA s'en charger ? En tant qu'utilisateur fidèle de VS Code, j'ai immédiatement lancé le projet avec Claude Sonnet 4.5 (dans GitHub CoPilot).

J'ai été surpris, car le résultat était une application web étonnamment bonne et modulable.

Bien sûr, cela n'a pas été si simple. Il faut constamment empêcher l'IA d' en faire trop. Ma commande la plus importante est rapidement devenue : « Non, nous n'avons pas besoin d'un gestionnaire de paquets ! Et maintenant, arrête d'essayer de me proposer un autre framework ! »

Mais au final, nous avons obtenu une structure de base réellement utilisable.

Les pièges du « vibe coding » avec l'IA

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

La question du framework : les IA préfèrent travailler avec Tailwind. C'est ce qu'elles ont fait ici aussi. Après quelques ajustements manuels qui ont mis ma patience à rude épreuve, j'ai fini par craquer. Je suis rapidement passé à Bootstrap afin de mener à bien la collection de manière rapide et pragmatique. Parfois, « fini » vaut mieux que « parfait » (ou « Tailwind »).

2. Sans Git ? Sans moi ! Par pure habitude, j'ai directement créé un dépôt Git. Heureusement ! J'ai rapidement réalisé que ce que je faisais – ce « vibe coding » sans plan précis avec l'IA – sans Git entraînait une perte de temps considérable.

3. Les pièges de la logique IA : le plus gros problème est que les IA aiment se faciliter la vie, mais de la mauvaise manière.

• Elles spéculent : au lieu d'analyser ce que l'on veut réellement faire, elles font souvent des suppositions hasardeuses. Il faut très vite mettre fin à ces spéculations et leur donner des instructions précises à chaque étape, sinon cela finit dans le chaos.
• Elles aiment leurs propres scripts. Elles ont tendance à proposer leurs propres scripts ou solutions, qui conduisent souvent à des résultats désastreux. Dans de nombreux cas, cela aurait nécessité un redémarrage complet du projet, si un « git reset --hard » courageux n'avait pas été possible.

4. Ping-pong IA lors des revues de code J'ai également misé sur les IA pour l'assurance qualité, mais de manière systématique : j'ai d'abord fait effectuer les révisions de code par GPT-5 Codex, puis j'ai demandé l'avis de Claude Sonnet 4.5 à ce sujet. Une révision IA pour la révision IA, en quelque sorte. C'est assez méta, mais extrêmement utile pour vérifier différentes « façons de penser ».

Bonus : l'IA comme traductrice ?

Une fois la fonctionnalité mise en place, j'ai pensé aux traductions. J'ai d'abord essayé Claude Sonnet 4.5. Selon ses propres déclarations, l'IA maîtrise l'anglais et l'allemand à un niveau natif et offre une fiabilité de 98 % en espagnol, français, italien et portugais.

Les choses sont devenues intéressantes lorsque j'ai demandé l'hindi, le chinois ou le japonais. L'IA a alors admis qu'elle avait besoin d'une aide externe, telle que DeepL. Plus important encore, elle a souligné de sa propre initiative qu'il ne s'agissait pas seulement d'une traduction grossière, mais qu'il fallait également tenir compte des particularités culturelles et des formes de politesse.

Une dose rafraîchissante d'introspection. Pour la traduction par lots proprement dite de la partie statique et codée en dur des langues romanes, Claude m'a toutefois semblé trop intellectuel. J'ai donc préféré confier cette tâche à GPT-5-Codex. Là encore, il s'agit de choisir le bon outil pour le bon travail !

De l'intranet au web sauvage

Une fois que la collection d'outils a atteint un certain niveau de maturité (et qu'elle était même disponible en plusieurs langues), elle est restée longtemps accessible uniquement sur le réseau de notre entreprise et nous a rendu de grands services.

À un moment donné, je me suis dit : pourquoi pas ? Je l'ai donc mise en ordre et rendue publique.

Et parce que tout cela est né d'un « accident », le code est entièrement ouvert. Si vous voulez bricoler vous-même ou trouver un bug : vous pouvez trouver le dépôt Git ici : https://github.com/RamonKaes/WebDev-Tools.

Oui, désolé. Elle est maintenant ici. La 10 000e collection d'outils. Mais bon, après tout, elle a une histoire ! :D

Amusez-vous bien !

Ramon