Tableau périodique

J’ai donné une seconde chance à Bolt. Il m’a donné exactement ce que j’avais demandé.

L’idée

Je rattrapais mon retard en chimie sur Khan Academy. Il s’avère que la matière que je détestais à l’école est passionnante quand personne ne vous note. Je préfère quand même construire des choses plutôt que les étudier ; j’ai donc voulu construire quelque chose. Un tableau périodique interactif : 118 éléments, catégories en couleur, clic pour les détails, survol pour un aperçu rapide. Un problème bien défini, des données bien documentées.

J’avais déjà essayé Bolt une première fois, en décembre 2024. Mon prompt demandait React 19 et Tailwind 4. Premier geste de Bolt : me corriger. « I apologize, but I should point out that React 19 is not yet available. Also, Tailwind 4 is not released yet. » Il avait raison. React 19 est sorti quelques jours plus tard, Tailwind 4 le mois suivant, mais à ce moment-là, ni l’un ni l’autre n’existait. Le premier réflexe de l’outil a été de me dire ce que je ne pouvais pas avoir. Cette première tentative était prudente, et rien de mémorable n’en est sorti.

Six mois plus tard, Apple poussait le glassmorphisme à fond, et je voulais voir si Bolt pouvait livrer cette esthétique. Cartes en verre dépoli, calques translucides, flou d’arrière-plan. J’ai ouvert bolt.new et tapé un nouveau prompt. Vous pouvez voir le résultat vous-même.

Ce que j’ai obtenu

Quarante-quatre commits sur deux jours et demi. Vingt-cinq fichiers. Environ 7 000 lignes de TypeScript. React, Vite, Tailwind, icônes Lucide. Le tableau périodique complet avec code couleur par catégorie, un filtre de recherche, des infobulles au survol qui se repositionnent près des bords de l’écran, des dialogues de détail avec images et configurations électroniques. Huit thèmes glassmorphiques. Un Property Playground permettant de filtrer les éléments par point de fusion, point d’ébullition, électronégativité, densité, rayon atomique, énergie d’ionisation. Des curseurs à double poignée construits de zéro.

Les 118 éléments avec 36 propriétés chacun, correctement structurés. La précision des données compte ici, car un tableau périodique avec des masses atomiques fausses est pire que pas de tableau du tout. Chaque configuration électronique, chaque catégorie, chaque désignation de phase s’est vérifiée. Quand le domaine est bien documenté, quand il existe une seule bonne réponse pour chaque champ, Bolt excelle à collecter et structurer l’information.

Le code, en revanche, a une qualité particulière. Fonctionnel mais mécanique. Voici comment App.tsx et PropertyPlayground.tsx décident tous deux s’il faut afficher le calque glassmorphique :

{(currentTheme.id === 'glassmorphic' ||
  currentTheme.id === 'dark-glass' ||
  currentTheme.id === 'vibrant-glass' ||
  currentTheme.id === 'aurora-glass' ||
  currentTheme.id === 'sunset-glass' ||
  currentTheme.id === 'forest-glass') && (
  <div className="absolute inset-0 backdrop-blur bg-white/20"></div>
)}

Ce bloc identique apparaît deux fois, mot pour mot, dans deux fichiers distincts. Un humain ajouterait un booléen hasOverlay sur l’objet thème. Bolt a produit du code qui fonctionne. Pas du code qu’un développeur écrirait.

Ce qu’il a fallu corriger

Pas de catastrophe. Pas de saga de débogage sur neuf jours. Juste une accumulation régulière de petites frictions.

L’espacement de la grille a nécessité six commits :

// Commit 1 : trop d'espace
<div className="grid grid-cols-18 gap-4 min-w-max mx-auto">

// Commit 6 : grille sur mesure, contrôle précis
<div className="grid grid-cols-periodic-table-cols
     grid-rows-periodic-table-rows gap-1 min-w-max mx-auto">

Bolt ajustait des chiffres sans pouvoir voir à quoi ressemblait le tableau à l’écran. Chaque modification était du CSS valide. Aucune n’était juste avant la sixième tentative.

La fermeture du dialogue a pris trois commits. Le premier correctif gérait le clic sur l’arrière-plan, mais pas le bouton de fermeture. Le deuxième corrigeait le bouton, mais pas la touche Échap. Le troisième ajoutait l’écouteur clavier. Un développeur gère ces trois chemins de fermeture en une seule passe. Bolt les traitait une plainte à la fois.

Le positionnement des infobulles a demandé deux allers-retours. La première tentative estimait les dimensions des éléments. La seconde les mesurait avec getBoundingClientRect(). Le RangeSlider personnalisé avait besoin que ses valeurs de z-index soient inversées parce que Bolt avait superposé les curseurs à l’envers. Une erreur de référence s’est glissée là où une variable était utilisée avant sa déclaration.

Chaque correctif était petit. Aucun n’était difficile. C’est le schéma qui posait problème : chaque correction était réactive. Bolt n’anticipait jamais qu’un dialogue pourrait nécessiter une fermeture au clavier, ni que des dimensions estimées échoueraient aux bords de l’écran. Il résolvait ce qu’on lui signalait, pas ce dont on avait besoin.

Ce qui m’a surpris

Le Property Playground. Je m’attendais à ce que la grille du tableau périodique soit la pièce maîtresse et le panneau de filtrage un accessoire. C’est l’inverse qui s’est produit. Le système de filtres avec ses huit critères, les curseurs à double poignée avec une gestion propre des événements souris, la barre latérale responsive qui se replie en tiroir sur mobile. Pas seulement fonctionnel ; réfléchi. La fonctionnalité la plus ambitieuse était celle que Bolt a le mieux réussie.

Qu’est-ce que cela signifie quand le meilleur travail d’un outil porte sur la fonctionnalité dont on attendait le moins ? Est-ce parce que le Property Playground est un problème de pure logique : filtrer des tableaux, comparer des plages, afficher des résultats ? Pas de jugement visuel. Pas de bizarreries d’API cross-navigateurs. Juste des données en entrée, des données en sortie. Ou y a-t-il autre chose dans la façon dont ces outils gèrent la complexité quand les règles sont claires ? Je n’ai pas encore la réponse.

La leçon

J’ai construit deux applications complètes avec Lovable. Des applications complexes, avec de vrais utilisateurs. Avec Bolt, après plusieurs tentatives, dont une sur des crédits de hackathon, j’ai livré un tableau périodique. La conclusion honnête : ce n’est pas Bolt. C’est moi. Certains outils s’accordent avec certains développeurs.

La conversation autour du vibe coding tient rarement compte de cela. Les comparatifs mesurent les fonctionnalités, les benchmarks, la qualité du résultat. Ils ne mesurent pas ce que l’on ressent lorsqu’on passe des heures avec un outil, à le guider vers quelque chose qu’on devine sans le voir encore. Le nombre de prompts qu’il faut pour arriver quelque part, si la conversation coule ou bégaie, si on sort de la session avec de l’énergie ou vidé. Cette friction invisible détermine ce qu’on livre réellement.

Chaque élément est à sa place. La mise en page est correcte. Mais la chimie, ce n’est pas placer des éléments sur une grille. C’est ce qui se passe entre eux.