rikiki passe en 0.3 : journal des dernières versions

Dans la fiche de rikiki, je laissais le projet en version 0.2.0, avec une petite liste de « la suite » : des transitions dignes de ce nom, une coloration syntaxique partout, davantage de recettes. Trois semaines et trois versions plus tard, une bonne partie de cette liste a fondu.

Voici le journal de bord. Cailloux compris.

Rappel en une phrase, pour qui débarque : rikiki, c’est mon moteur de slides en Web Components (des éléments HTML maison), assez léger pour tenir dans un seul fichier, sans build à lancer côté présentateur. Le détail, la genèse et les premiers déboires sont dans la fiche ; ici, je ne raconte que ce qui a bougé depuis.

0.3.0 : le talk prend vie

Vous avez déjà subi un diaporama où les puces s’empilent toutes d’un coup, figées, pendant que l’orateur lit par-dessus ? La 0.3.0, sortie le 8 juin, c’est la grosse de la série : elle donne aux slides le souffle qui leur manque dès qu’on parle debout, devant du monde.

La 0.3.0, en clair7 gates

Naviguer à la sourisenfin

• Clic pour avancer, molette qui cède au contenu scrollable et navigue au bord
• Chevrons en bas, boutons précédent/suivant de la sourisréglable par l'attribut mouse-nav

Révéler élément par élémentclick-stages

• Un point de liste après l'autre, au clic
• Et le morph : un élément glisse de sa place vers sa nouvelle placeMagic Move, via les transitions natives du navigateur

Voir tout le deck d'un couptouche O

• Des miniatures fidèles, une recherche au clavier, un clic pour sauter
• Même les schémas mermaid s'affichent dans les vignettesce qui n'allait pas de soi

Des rappels qui cliquent← → O P ?

• Les pastilles de touches en bas deviennent des boutonselles déclenchent l'action, plus seulement la suggèrent

La version qui fait passer rikiki de « ça affiche des slides » à « ça tient un vrai talk ». Sortie le 8 juin.

La pièce dont je suis le plus content, c’est le morph. Dans la fiche, je me plaignais qu’une slide en remplaçait une autre « sans façon ». Désormais, un même élément peut glisser de sa position sur une slide jusqu’à sa place sur la suivante, au lieu de disparaître d’un côté et réapparaître de l’autre. La machinerie repose sur les transitions natives du navigateur (avec un repli maison pour Firefox, qui boude encore la fonctionnalité). Un titre qui descend se loger en coin, un bout de code qui se réorganise sous vos yeux : c’est le genre de geste qui fait qu’on suit un raisonnement plutôt qu’un diaporama.

Plutôt que de vous le décrire, je vous le mets sous le nez. Le deck ci-dessous tourne pour de vrai, monté dans cette page depuis le bundle 0.3.1 publié sur npm. Laissez-le défiler, ou survolez pour reprendre la main : le mot « rikiki » ne saute pas d’un état à l’autre, il s’y rend.

Un vrai deck rikiki-deck@0.3.1 (le bundle publié sur npm), en autoplay. Survolez pour reprendre la main. Plein écran Ouvrir ↗

La vue d’ensemble, elle, savait déjà s’ouvrir à la touche O. Elle sait maintenant se chercher : vous tapez quelques lettres, les vignettes se filtrent, vous cliquez, vous y êtes. Sur un deck d’une heure, retrouver « la slide avec le schéma de la base » sans tout faire défiler, ça change la vie en répétition.

La navigation que j’ai simplifiée

Au départ, rikiki rangeait les slides comme reveal.js : une grille à deux dimensions. Les flèches gauche et droite sautaient d’un chapitre à l’autre, haut et bas circulaient à l’intérieur d’un chapitre. Très pratique quand on a reveal.js dans les doigts. Déroutant pour tous les autres, c’est-à-dire la plupart des gens à qui je tendais un deck.

Pire : ça s’activait tout seul. Dès qu’un deck passait à deux chapitres, les flèches changeaient de sens dans mon dos. J’ajoutais une section, et la navigation se remappait sans rien dire.

J’ai donc retourné le défaut. Les flèches avancent slide par slide, comme tout le monde s’y attend, et qui veut la grille à la reveal.js la réclame désormais explicitement, par un nav="2d" posé à la main. Par défaut, le comportement le plus attendu, pas le plus malin.

0.3.1 : le présentateur fantôme, deuxième couche

La fiche racontait déjà un « présentateur fantôme » : le mode présentateur qui s’ouvrait sur des slides vides. Je le croyais réglé. Le 9 juin, il est revenu, mais seulement dans un cas précis, et celui-là m’a demandé de me retrousser les manches.

C’est typiquement le bug qui ne se voit jamais en développement (où tout est servi par un vrai serveur) et qui ne sort qu’une fois le deck exporté pour de bon, prêt à être envoyé par mail. Le pire endroit pour le découvrir.

Ce qu’il reste sur l’établi

La liste n’est pas vide pour autant. La doc manque encore de recettes pour les cas tordus, à commencer par celui qui m’a déjà rattrapé deux fois : embarquer rikiki sous une politique de sécurité (la CSP) qui interdit de tirer le moindre script d’un CDN tiers. La parade, je la tiens maintenant : un bundler qui empaquette le deck et toutes ses dépendances dans un seul fichier, servi depuis ma propre origine, plus rien à aller chercher dehors. Reste à l’outiller proprement et à l’écrire noir sur blanc dans la notice.

Mais l’essentiel tient : je dicte mes decks à un agent qui connaît la notice, je les présente avec le morph et la navigation souris, et quand je veux montrer trois slides à quelqu’un, je lui envoie un fichier. Un seul.

La 0.2 affichait des slides. La 0.3 tient un talk. La suite, ce sera de les rendre belles sans que j’y pense.