La gazette qu’on voit : accueil réversible, atelier d’essais, revue en cinq angles

La gazette qu’on voit

TL;DR — Trois idées, une nuit, et la discipline qui va avec.

1. Un accueil réversible. La « Gazette calme » devient l’accueil de blog.vfg.lol, mais elle n’écrase rien : un interrupteur (VFG_BLOG_HOME) la met en place ou la retire, /?pile=1 garde la liste chronologique à un clic.
2. Un atelier d’essais. /essais/ propose chaque variante de l’accueil avec ses paramètres — entrée, style, sections, densité — sur le contenu réel, et « Appliquer » l’ouvre vraiment sur l’accueil.
3. Une revue à cinq angles. Cinq relectures indépendantes (navigation, accessibilité, mobile, design, clarté) ont convergé : quatre bugs, tous invisibles depuis la surface.

Ce n’est pas l’histoire d’un beau design. C’est l’histoire de ce qu’il faut pour qu’un design ne mente pas : un interrupteur, une mesure, et des angles adverses.

1. Le point de départ : un verdict, « c’est horrible »

La veille, quatre prototypes d’entrée avaient été produits (A Îles, B Zine, C Crieur, puis D « Gazette calme », en réponse à un premier verdict). Le retour de FG sur A/B/C était net : « c’est horrible ». Diagnostic repris dans les notes de design — les trois échouaient de la même façon : le contenant criait plus fort que le contenu.

D, lui, tenait une ligne simple : du papier, pas du décor. Une une, trois statuts « en ce moment », les séries en liste pliable, une chronologie nue. Rien qui demande de lire deux fois pour savoir où cliquer.

Mais un prototype HTML statique ne vaut que ce qu’il vaut : il fallait le brancher sur le vrai corpus, sans casser l’existant.

2. Faire entrer un essai sans casser la maison

Le dépôt porte déjà une structure éprouvée — la pile chronologique (filtres, facettes, pagination, « deux façons de lire ») — que les tests et la recette statique protègent. Réécrire son rendu pour un essai aurait fait bouger un contrat éprouvé.

La décision a été de faire de D un gabarit isolé (gazette-home.cjs) et de l’activer par un interrupteur à deux étages :

flowchart LR
  Q["Requête GET /"] --> H{"VFG_BLOG_HOME<br/>ou home-layout.json ?"}
  H -->|gazette| G["Gazette calme<br/>(une, séries, en ce moment)"]
  H -->|pile| P["Pile chronologique"]
  Q -->|"?pile=1 / ?page=N / un filtre"| P
  G -->|lien « l'ancien accueil »| P

Le point qui rend l’essai honnête : /?pile=1, ?page=N ou n’importe quel filtre reviennent d’eux-mêmes à la pile. L’essai change la porte d’entrée ; il ne retire jamais les outils.

Le contenu affiché est réel : la une est le premier article publié, « en ce moment » vient de config/en-ce-moment.json, les séries sont résolues par seriesIndex() sur config/series.json, les derniers sont les six premiers du corpus. Aucune donnée inventée.

3. L’atelier : des paramètres, pas une démo figée

Un essai qu’on ne peut pas régler n’est qu’une image. /essais/ ouvre la gazette avec un panneau de cinq axes :

Trois choix de conception, tous mesurables :

• Le panneau est ouvert par défaut. C’est la première chose qu’on a cassée : un premier jet le repliait pour ne pas manger l’écran mobile — résultat, on croyait qu’il n’y avait aucun paramètre. Un panneau de réglages doit être visible ; on le borne en hauteur (max-height) plutôt que de le cacher.
• « Appliquer » dit la vérité. Il ne se contente pas de faire semblant : l’accueil réel lit ?essai-style/-densite/-mixage et applique les mêmes classes que l’aperçu. Un bouton « voir en vrai » qui n’applique pas trois axes sur cinq est un mensonge de plus.
• Chaque valeur est bornée. Un paramètre hors liste est ignoré — pas d’injection de classe CSS par l’URL.

4. La revue à cinq angles

Un design ne se juge pas d’un seul point de vue. Cinq relectures indépendantes et en lecture seule ont été menées en parallèle, chacune avec sa lunette :

La force de la méthode : les cinq rapports convergent. Le mode sombre est signalé par l’accessibilité et le design ; les libellés par la clarté et la navigation. Ce qui revient par deux angles n’est pas un détail.

5. Les quatre bugs qu’on ne voyait pas

Aucun n’était visible depuis la surface. Tous venaient d’un contrôle incapable d’échouer.

1. Le panneau de paramètres, replié. « Aucun paramètre » alors que dix radios existaient. Corrigé : <details … open>.
2. Le JavaScript décochait les défauts. Au chargement, mon script comparait les valeurs à 'defaut' alors que le serveur rend gazette/confort → aucun bouton coché au repos. Corrigé : une sentinelle de défaut par axe, identique côté serveur et JS. Leçon : serveur et JS doivent partager la même notion de « défaut ».
3. Un relais VFGate mort depuis des mois. Le relais d’annotations postait sur http://127.0.0.1:5191/events/publish → 404 ; la route réelle est POST /api/vfgate/v1/events/publish. Comme le relais était enveloppé dans un try/catch fail-open, personne ne voyait rien. Leçon : un relais fail-open sans test est un relais qui n’existe pas — il faut vérifier qu’une requête atteint le bon chemin. Corrigé, et gardé par test/annotation-relay.test.mjs (serveur de fixture).
4. Des liens « pile » trompeurs. Sous l’accueil gazette, « vous êtes ici : la pile » et « pile de lecture » pointaient / — qui servait la gazette. Corrigés vers /?pile=1. Leçon : quand une URL change de sens, tous ses auto-liens mentent.

6. VFGate, validé au passage

Le dépôt cite VFGate partout ; encore faut-il qu’il soit vivant. Mesuré, pas supposé :

Le blog ne lie pas gate.vfg.lol dans son interface : le seul point de contact est ce relais serveur — celui qui était cassé.

7. Ce qui reste ouvert

Un essai qui dure devient un contrat silencieux. Donc, explicitement :

• Valider D (ou ajuster) avant de l’industrialiser et de retirer l’interrupteur.
• Réutiliser les contrôles du site (.chip, .page-btn) à la place du vocabulaire dédié de l’atelier — sinon on a deux façons de faire des boutons.
• Réécrire config/en-ce-moment.json : la gazette affiche sa date (« · 22 sept. »), et le fichier se décrit lui-même comme un premier jet à relire.

8. Pour la base de connaissance

Quatre règles réutilisables, extraites de cette nuit.

• Un essai de design doit être réversible par construction, pas par discipline. Un interrupteur (VFG_BLOG_HOME) et une porte de sortie (?pile=1) valent mieux qu’une note « penser à revenir en arrière ».
• Un paramètre doit être visible d’abord. Un réglage caché n’est pas un réglage. On borne la hauteur, on ne replie pas.
• « Voir en vrai » doit être vrai. Si le bouton applique trois axes sur cinq, il ment ; brancher l’aperçu et l’accueil sur les mêmes classes.
• Mesurer, puis déduire — et faire relire sous plusieurs angles. Cinq relectures adverses ont trouvé, en une passe, ce que la surface cachait : un panneau vide, des cases décochées, un relais 404, des liens qui pointaient au mauvais endroit.

Une règle écrite se perd ; une mesure affichée se voit. Ici, la mesure est la page.