In English

Hubert Sablonnière 6 min de lecture

Une horloge en chiffres cisterciens

Laisse-moi te raconter l’histoire de ma première fois sur Twitch, où j’ai codé en direct un web component qui affiche des nombres en chiffres cisterciens, pour en faire une horloge comme celle-ci :

Horloge affichant l’heure 23:38:51 avec des chiffres cisterciens colorés

Encore une idée de side project

En janvier 2021, je suis tombé sur un tweet à propos des chiffres cisterciens. Ça m’a tout de suite intrigué. Si tu ne connais pas, voici l’introduction de la page Wikipédia :

Le système cistercien de notation numérique, ou « Notae Elegantissimae » d’Agrippa, est un système de numération qui aurait été utilisé couramment par les moines européens du Moyen Âge. Il permet de coder les nombres de 1 à 9 999 sur un seul symbole.

Ça ressemble à ça :

Quelques nombres écrits en chiffres cisterciens : 1, 20, 400, 4000, 5555, 6789, 9394

J’adore le côté compact et élégant d’afficher un si grand nombre avec un seul symbole, surtout quand il y a un peu de symétrie.

Quelques jours plus tard, j’ai vu un tweet d’Andrew Aquino qui annonçait un composant React pour afficher n’importe quel nombre en chiffres cisterciens. Ma première réaction a été de tweeter :

sudo make web-component

J’espérais que quelqu’un allait en faire un web component, pour qu’on puisse tous afficher des chiffres cisterciens sur nos sites de façon standard, même sans React. Au lieu de ça, par dégoût du sudo, mon génial collègue Marc-Antoine Perennou a créé sudo-ng. Il ne s’est rien passé d’autre, donc je me suis retrouvé avec une idée de side project de plus sur les bras. Sauf que cette fois, j’ai décidé de la coder en public.

Mes premiers pas sur Twitch

Dans le monde d’avant la pandémie, je donnais des conférences pour partager mes connaissances et ma passion du développement web. Quand tu codes devant des centaines de personnes dans une salle, tout est préparé et répété plein de fois. Ça donne une sorte d’illusion de simplicité, mais c’est le meilleur moyen d’aller droit au but et de se concentrer sur ce que le public est venu apprendre. Le petit inconvénient, c’est qu’on rate tout ce qui se passe pour de vrai quand on écrit du code. Tu lis de la doc, tu te plantes, tu essaies un truc, tu reviens en arrière, tu bloques sur un bug débile…

Regarder quelqu’un réfléchir à voix haute et coder sans filet, c’est une super façon d’apprendre. Tu découvres des raccourcis clavier dans l’IDE. Tu tombes sur un pattern ou une fonctionnalité du langage que tu ne connaissais pas. Ça ressemble un peu à du pair-programming avec un mentor.

Comme je suivais quelques copains speakers qui s’étaient mis à Twitch pendant le premier confinement, j’ai créé ma chaîne et j’ai testé la plateforme avec cette idée de side project.

Mon objectif principal, c’était de créer un web component pour afficher un nombre en chiffres cisterciens, puis de le réutiliser dans un composant horloge qui affiche trois nombres en chiffres cisterciens : les heures, les minutes et les secondes. Points bonus si j’arrivais à animer les traits des symboles.

La session de live coding

Capture de la session Twitch avec l’IDE à gauche, le navigateur à droite et ma webcam en bas à droite

Si ça t’intéresse, j’ai publié l’enregistrement de la session sur YouTube, mais attention :

  • ⌛ Ça dure 2 heures (120 minutes)
  • 💬 Le chat n’est PAS affiché.
  • 😱 J’ai passé beaucoup trop de temps sur Inkscape à essayer de dessiner le SVG de départ.
  • 🚧 J’aurais dû finir les deux composants avant de penser à les animer.

Malgré tout ça, j’ai vraiment kiffé cette session. Il y a eu des ratés, mais on est arrivés à quelque chose. Le design de l’horloge était un peu bancal, mais ça marchait. Ça donnait ça :

Si c’était à refaire, je prioriserais mieux les différentes étapes, pour que la progression soit plus linéaire pour le public. J’améliorerais aussi ma façon de découper le temps, histoire d’arrêter de m’acharner sur certains détails. Cette petite rétro reprend les retours constructifs que des spectateurs m’ont faits après coup.

Côté animateur, cette session a été un vrai plaisir à donner, et elle n’a quasiment demandé aucune préparation. Entre 60 et 70 personnes ont suivi le stream, et certaines m’ont vraiment aidé dans le chat quand j’étais bloqué. Au-delà du code et des astuces, je crois avoir réussi à partager le plaisir que j’ai eu à bidouiller ce petit side project.

J’ai très envie de recommencer avec d’autres idées. Je pourrais pousser l’interactivité avec le public dans le chat (et pourquoi pas ajouter des sons ou de la musique). C’est très différent de ce dont j’ai l’habitude en conférence. La quantité d’informations intéressantes par minute n’a clairement rien à voir, mais je ne crois pas que ce soit un problème en soi. C’est juste une autre façon de partager avec les autres. Plus lente, plus interactive, moins magique, mais nettement plus authentique.

Les finitions d’après-stream

Une fois le stream terminé, j’ai décidé d’améliorer le projet :

  • Implémenter les nombres au-delà de 99
  • Corriger le positionnement des différents traits
  • Ajouter des animations avec la technique animated line drawing SVG

Quelques semaines après, j’ai ajouté d’autres trucs :

  • Des custom properties CSS pour choisir la couleur de chaque trait
  • Des custom properties CSS pour choisir l’épaisseur des traits
  • Un mode date sur l’horloge, pour afficher l’année, le mois et le jour avant les heures, les minutes et les secondes
  • Un mode no-seconds sur l’horloge, pour enlever les secondes
  • Un mode inline sur le nombre, pour pouvoir en glisser un au milieu d’un paragraphe (comme dans cet article)
  • Une tentative d’amélioration de l’accessibilité (tous les retours sont les bienvenus)

J’ai publié les sources sur GitHub, dans hsablonniere/cistercian-numerals, si tu es curieux.

Les web components, c’est quand même la classe

Comme ce sont des web components, tu peux les utiliser dans n’importe quel projet web, quelle que soit la stack ou le framework. Tu peux les installer depuis npm, mais ce n’est pas obligatoire du tout.

Comme c’est expliqué dans le README, tu peux les utiliser dans ton HTML sans npm install, sans build et sans bundler. Il te suffit d’une balise <script> qui pointe vers un CDN moderne et malin comme jspm :

<!-- put this in <head> -->
<script type="module" src="https://jspm.dev/cistercian-numerals"> </script>

Ensuite, tu peux utiliser le composant nombre dans ton HTML comme ça :

<cistercian-number inline value="12"></cistercian-number>

Et le composant horloge comme ça :

<cistercian-clock></cistercian-clock>

Comme c’est juste du HTML, c’est aussi très facile à intégrer dans un document Markdown. C’est exactement ce que je suis en train de faire dans cet article. Voici l’exemple date + heure (sans les secondes) :

Horloge affichant la date 2021-3-16 et l’heure 23:39 avec des chiffres cisterciens colorés

Jette un œil au README pour les détails sur l’utilisation et la personnalisation des composants.

Références et liens

Merci

😍 Merci à toutes les personnes formidables qui ont suivi le stream, et merci au relecteur pour le temps qu’il m’a accordé : Alexandre Berthaud.