Démo MDX : tous les composants
Inline
On peut souligner en pointillés, en points, en vague, en bleu, ou surligner voire en violet. Un terme : ΔEDelta E : distance perceptuelle entre deux couleurs. Statuts : résolu à revoir à surveiller. Grammaire : [#N] [$C$D#P] {[COND]?a:b} |expr|. Quiz : . Lien externe auto : le projet timelife, ou forcé : ninhache.fr. Un aparté en marge1 illustre le style Tufte.
- Détail appris en marchant dedans. ↩
Callouts
Note
Note standard.Info
Information utile.Astuce
Astuce pratique.Attention
Avertissement.Danger
Erreur à éviter.Le piège
Le piège aurait été de lire le buffer côté client.À retenir
Toujours vérifier une hypothèse contre le cas qui l'a fait naître.Astuce
Les directives historiques marchent toujours.
Structure : Takeaways, Specs, Card + Grid
Points clés
- Le format binaire est positionnel : un octet mal lu décale tout.
- La couleur perçue n'est pas la couleur numérique.
- Rejouer byte-exact tranche entre deux candidats.
- Version
- 4.2.1
- Taille du dump
- 341 Ko
- Entrées décodées
175901 / 175901
Serveur
Lecture du buffer côté back, format binaire brut.
Client
Rendu des tooltips à partir de la grammaire résolue.
Steps
- 1
Détecter la dérive
On repère que le format a changé. - 2
Rejouer les candidats
On teste chaque hypothèse byte-exact. - 3
Épingler le gagnant
Le candidat qui décode tout est retenu.
Compare
Code annoté
function decode(buf: Buffer) {
const header = buf.readUInt16LE(0);
const version = buf.readUInt8(2);
return { header, version };
}const dmg = base + level;
const dmg = base + level * ratio;
render(dmg); HexDump
Couleur : Swatch + DeltaE
Tables
| and | T | F | U |
|---|---|---|---|
| T | T | F | U |
| F | F | F | F |
| U | U | F | U |
and (logique ternaire T/F/U)| or | T | F | U |
|---|---|---|---|
| T | T | T | T |
| F | T | F | U |
| U | T | U | U |
or (logique ternaire T/F/U)| Tier | Risque | Action |
|---|---|---|
| Vert | faible | ok |
| Rouge | élevé | bloquer |
Graphes
Figure, Details, Timeline
Voir la preuve (gros bloc)
Le JSON de schéma faisait 341 Ko ; on le replie ici pour garder la page respirable.
2019
Jeu live
Le format binaire est observé en production.2022
Rétro-ingénierie
On reconstruit la grammaire des tooltips.2026
Web-app
L'écosystème devient une application web.
Fin de la démo.
Mise en page
Chapitre
Une grande partie
Un en-tête de section centré façon DA, avec sur-titre et sous-titre.
Le texte se place à droite de l'image. On peut mettre plusieurs paragraphes et des listes :
- premier point
- deuxième point
Ici l'image passe à droite via side="right", le texte à gauche. En mobile, tout s'empile proprement.
Une ligne centrée, façon respiration.
Partie II
Un bandeau d'ouverture
Pour ouvrir une grande section avec du souffle.