Colophon

Vous êtes sur ma page personnelle et son objectif est de me permettre d'avoir un espace de publication libre. Où je peux choisir les thématiques que je veux traiter et où il est possible de structurer mes documents à ma guise. Les grandes sections présentent sur l'index décrivent des thématiques, qui elles-même sont regroupées en sections. L'application possède aussi un journal, me permettant de rédiger à la manière d'un blog. Les documents peuvent être des articles, des guides ou des galeries.

Mon tout premier site personnel date de 2001, et avait été construit avec l'éditeur en ligne du site voila.fr, au fil des années, j'ai eu beaucoup de sites différents (et j'ai utilisé beaucoup de platformes différentes) dont la première archive, encore accessible, date de 2004 (attention, c'est cringe). Depuis quelques années, j'utilise des générateurs de sites statiques et mon contenu est versionné sur un dépôt Git, rendant l'archivage plus aisé (il est possible de retrouver des archives en cherchant nukifw.github.io et xvw.github.io).

Thématiques et navigation

Alors que pendant très longtemps, je tâchais de dupliquer mes espaces de rédactions pour garantir que chacun de mes sites possédaient une thématique clair, j'ai, vers 2014, commencé à être amusé par certaines pages de chercheurs qui exploitaient leurs espaces numériques pour discuter de sujets variés. Par exemple, je me souviens d'une page de Joe Armstrong, le créateur de Erlang qui, au milieu d'une liste de projets très sérieux, décrivait comment il avait construit des fusées propulsées à l'eau. Ou encore certains chercheurs de INRIA profitant de leurs pages pour partager leurs photos de vacances.

Plus tard, en fréquentant l'instance Mastodon Merveilles, j'ai découvert une collection de sites dans lesquels il était possible de se perdre pendant plusieurs heures. Le site de Devine Lu Linvega en est, de mon point de vue, un excellent exemple. On clique sur un lien, et, quelques heures plus tard, on s'est perdu au détour d'une section, appartenant elle-même à une rubrique. L'auteur décrit d'ailleurs son site, dans la conférence The Frameworks for Mystics, comme une ville labyrinthique dans lequel il est possible de se perdre.

Cette approche du web, que l'on appelle maintenant Le Web Indie est un retour aux fondamentaux, à l'époque Geocities où les internautes étaient très créatifs et rigolos. La popularité des platforme de publications à la Medium a normalisé le contenu en ligne, et certains, dont je fais partie, trouvent ça dommage. C'est pour cette raison que j'ai pris, à la refonte de mon site personnel, la décision de ne pas figer sa thématique, et de m'offrir la liberté d'écrire sur tout ce dont j'ai envie. N'étant pas très productif, il est possible que mon site ne ressemble jamais à une ville dans laquelle il est possible de se perdre, mais la navigation structurée, mais pas trop, sert cette ambition.

Technologies

Pour être parfaitement libre dans la manière dont je structure mes documents, il était très important que j'utilise un outil libre, extensible et que je puisse facilement maitriser. L'itération précédente de mon site personnel approchait cette idée. J'avais construit une collection de petits logiciels (en OCaml, évidemment) me permettant de structurer de la données et, potentiellement, de générer des pages. N'étant pas emballé à l'idée de créer un moteur de gabarits, je m'étais tourné vers Hakyll, un excellent générateur, de générateurs de sites statiques, écrit en Haskell. Cependant, le mélange OCaml/Haskell rendait la maintenance de l'application et j'ai décidé, en 2022, de repartir de zéro.

Le code source du générateur, et le contenu brut se trouvent sur le dépôt Github xvw/capsule et le résultat du site généré se trouve sur le dépôt Github xvw/xvw.github.io.

Génération statique: YOCaml

YOCaml a été conçu par mon ami Antoine pour donner un exemple d'utilisation de la bibliothèque Preface, sur laquelle j'avais, avec Didier et Pierre, travaillé (depuis, comme YOCaml a été utilisé, contrairement à Preface, la version 2 du logiciel ne l'utilise plus, snif). Comme Hakyll, YOCaml est un générateur très versatile, qui laisse beaucoup de liberté sur les documents à construire. On peut le voir comme un tout petit framework pour construire des build-systems minimalistes. Son fonctionnement est, dans les grandes lignes, décrit dans un article du créateur, et, j'ai eu l'honneur de le présenter au OCaml usergroup Parisien.

Le binaire principale est orchestré via un logiciel en ligne de commandes, implémenté grâce à la très riche bibliothèque Cmdliner.

L'utilisation de YOCaml, dans un contexte un peu moins orthodoxe que les exemples présentés, permet d'utililiser mon site comme incubateur et de débroussailler des améliorations potentielles pour la prochaine version de la bibliothèque (mais aussi de trouver des bogues).

Greffons utilisés

YOCaml est un framework qui vient avec plusieurs greffons (des moteurs de gabarits, des description de langages de markups etc.) me permettant de construire une véritable application web, avec beaucoup de contrôle sur la manière dont les pages statiques sont produites. En général, un greffon est une sur-couche à une bibliothèque OCaml existante, servant à faire la glue entre cette dernière et YOCaml. Pour ce site, j'utilise ces différents greffons :

• Yocaml_eio : comme YOCaml est très versatile, il peut générer un site depuis et vers un système de fichier Unix (via la bibliothèque Eio) (mais aussi dans un répertoire Git permettant au site généré d'être servi par un MirageOS). Je l'utilise en développement (ce qui me permet d'avoir un serveur de développement) mais aussi en déployement.
• Yocaml_yaml : qui repose sur la bibliothèque yaml pour décrire les métadonnées des articles avec le langage de description Yaml. Le Yaml est assez controversé mais pour décrire des petites structures de données servant à donner du contexte à des articles, je le trouve largement suffisant.
• Yocaml_toml : qui repose sur la bibliothèque otoml pour décrire la configuration du site
• Yocaml_jingoo : qui repose sur la bibliothèque jingoo, un moteur de gabarits conceptuellement très proche de Jinja et qui est, de mon point de vue, incroyablement versatile.
• Yocaml_syndication : me servant à décrire le flux Atom du site. Historiquement développé développé par l'équipe Psi-Prod, qui réalise beaucoup de projets en rapport avec MirageOS, Gemini et YOCaml, la version 2 l'a complètement réimplémenté
• Yocaml_cmarkit : pour la transformation de Markdown à HTML.

Infrastructure

L'avantage d'un site généré statiquement est qu'il est incroyablement facile à déployer ! N'étant pas un très bon devOps, j'ai décidé d'utiliser Github Pages comme serveur de fichiers. J'utilise une Github Action (dont le nom est un peu nul) pour déployer une nouvelle version à chaque nouvelle version de la branche main.

Client et technologies front-end

Le site web est assez sobre concernant les technologies front-end mise en œuvre, essentiellement parce que je ne suis pas très aux faits des nouvelles technologies web. Par contre, pour garantir une certaine forme d'interactivité (par exemple pour le développement des applications embarquées ou pour la gestion des commentaires), j'utilise un peu de JavaScript, cependant, la désactivation de ce dernier permet tout de même la navigation.

CSS et intégration

Concernant le CSS, je n'utilise aucun framework. La feuille de style a été conçue à la main (et très maladroitement). Mon expérience avec Tailwind a été très laborieuse donc j'ai décidé de tout écrire from-scratch. Actuellement, je suis satisfait de bien comprendre mes feuilles de styles, cependant, comme évoqué dans ma rétrospective 2023, je devrais réecrire toute la feuille pour construire un design-system dédié à mon site web pour éviter les répétitions (actuellement, les règles ont été écrites à la nécéssité).

Je profite aussi de ce site web pour en apprendre un peu plus sur l'intégration, le HTML et le CSS. Par exemple, après des années sans m'y être intéressé, j'ai enfin utilisé des grilles, via le gabarit de grilles qui, logiquement, pour décrire des grilles, est largement plus confortable que Flexbox.

Coloration syntaxique

J'utilise la bibliothèque Highlight.js avec le thème Grayscale (très légèrement modifé pour s'adapter au visuel global de l'application).

Le choix d'une bibliothèque JavaScript pour assurer la coloration syntaxique est de la pure fainéantise. Même s'il y a des priorités plus importantes, je garde en tête le projet Hilite pour colorer les blocs de codes à la construction du site, et réduire la nécéssité d'une bibliothèque tiers aussi grande.

Nightmare

Nightmare est une collection d'embryon de bibliothèques permettant de construire des applications client/serveur et développé à The Funkyworkers (dont je suis co-fondateur). Mon site utilise la partie cliente, qui est compilée en JavaScript grâce à l'excellent Js_of_ocaml, me permettant d'écrire le moins de JavaScript possible, et spécifiquement ces différentes bibliothèques :

• Nightmare : qui offre des abstractions génériques (pour le client et le serveur) comme, par exemple, l'abstraction sur la définition d'URL.

• Nightmare_js : qui fourni des outils et des liaisons pour interagir facilement avec JavaScript (par exemple une liaison avec l'API Fetch, qui repose sur la description d'URL de Nightmare).

• nightmare_vdom : qui fournit une glue entre Tyxml, une bibliothèque pour décrire des noeuds HTML avec une vérification statique des types, et vdom, qui est une implémentation d'un DOM virtual, en OCaml, offrant la capacité de structurer une application par le biais de Machine de Moore (que l'on appelle, depuis quelques années, La Elm Architecture).

Ces différentes bibliothèques me permettent d'embarquer des _applications riches. Et, comme le site fait office d'incubateur pour YOCaml, c'est aussi le cas pour les différentes bibliothèques qui constituent Nightmare.

Commentaires

Cette fonctionnalité n'est pas encore développée dans la nouvelle version du site.

Une des difficultés quand on construit un site statique, c'est que l'on perd des fonctionnalités d'interactivité. Par exemple, les commentaires sur les articles. Une solution acceptée dans le monde des sites statiques est d'utiliser un service tiers pour palier ces manque d'interactivité. On appelle ça la JamStack et il existe beaucoup de services permettant de résoudre le problème des commentaires.

Comme je l'avais expliqué dans une entrée de journal, je ne voulais pas dépendre d'un service pouvant, potentiellement faire du tracking sans mon accord, j'ai donc décidé de construire le support des commentaires sur base de réponses à des fils de conversations Mastodon. La solution est limitée car elle ne me permet pas de faire de modérations, mais pour le moment, elle me suffit largement. Je pourrais imaginer une modération statique (en invalidant certains identifiants de messages au niveau d'une page), mais, pour le moment, n'ayant pas eu à déplorer des commentaires déplacés, je ne pense pas que ça soit nécéssaire.

L'application utilise nightmare_vdom, ce qui est un peu overkill car il n y a pas d'interactivité et un seul composant, mais ça me permet de bénéficier de combinateurs pour décrire une UI.

Conclusion sur la pile technologique

Même s'il reste des points d'améliorations, un des éléments qui me semblait essentiel dans la maintenance d'un site personnel était le plaisir que j'avais à le faire évoluer. L'utilisation de OCaml qui est, pour concrétiser des projets, mon langage favori, à presque toutes les couches du site web me donne, en permanence, envie de l'améliorer ! De plus, l'utilisation de bibliothèques expérimentales, développées par des partenaires/amis/collègues, me permet de dresser des retours d'utilisations pertinents et potentiellement de faire remonter des bogues.

Donc même s'il est probable que dans les mois à venir, j'apporte certains changements, je resterai probablement sur cette base, qui m'amuse et me permet d'implémenter à peu près ce dont j'ai envie.

Développement et production de contenu

En plus de la génération concrète du site, j'utilise des bibliothèques et des logiciels pour faciliter le développement de l'application et la production de contenu. Le code source et les différentes pages sont écrites avec Doom-Emacs (une configuration moderne pour l'éditeur Emacs, que j'utilise depuis près d'une quinzaine d'années).

Développement

Comme le générateur du site est un projet OCaml, j'utilise un ensemble d'outils relatifs au développement de projets OCaml :

• OPAM : le gestionnaire de paquet de OCaml.
• Dune : le build-system (presque standard) de OCaml.
• Merlin, via Doom-Emacs comme support IDE.
• OCamlformat : comme formatteur de code.
• Utop : comme REPL (qui se marie très bien avec Dune).
• ocp-indent : comme outil d'indentation, qui compose très bien avec OCamlformat.
• Odoc : comme générateur de documentation.
• mdx : pour écrire des tests dans un style literate (dans de la documentation ou des documents Markown),

Npm et Webpack pour gérer les dépendances JavaScript (en l'occurence, uniquement Highlight.js).

Éléments visuels

Les différents éléments visuels du site sont réalisés avec ces trois outils :

• Krita : comme logiciel de peinture numérique. Quand j'ai pris la décision de supprimer ma partition Windows pour utiliser exclusivement GNU/Linux, j'ai dû arrêter d'utiliser Adobe Photoshop, je l'ai remplacé par Krita pour le dessin numérique. Aujourd'hui, j'en suis pleinement satisfait (bien que je ne sois absolument plus au courant des nouveautés de Photoshop).

• Inkscape : comme logiciel de dessin vectoriel. Je n'ai pas encore retrouvé l'agilité que j'avais avec Adobe Illustrator mais je compte bien continuer à utiliser à me former à Inkscape qui semble être capable de largement rivaliser avec son concurrent non-libre.

• D2 : comme outil pour décrire des diagrammes. C'est un langage déclaratif permettant de décrire plusieurs types de schémas. Historiquement, j'utilisais Dot, de la suite Graphviz (que je serai peut-être amené à réutiliser), mais je trouve D2 plus facile à utiliser et à personnaliser. J'utilise le thème 301 et le moteur d'organisation Elk.

Dans un futur proche, j'utiliserai Penpot pour construire le design-system.

L'ensemble des illustrations, pixels ou vectorielles sont réalisées avec une bien vieille (2008) tablettes graphique Bamboo de chez Wacom qui, malgré son âge avancé... fonctionne toujours !

Typographies

Le site web utilise trois polices de caractères différentes :

• Inria Serif : comme police principale pour les paragraphes. Une police avec serifs que je trouve très agréable à lire.

• Libre Franklin : comme police principale pour les titres. Une police sans serif que je trouve lisible (et dont les titres en gras me font penser à la typographie de Burger King).

• Fira Code : comme police principale pour les blocs de code. Une police monospace très populaire et très lisible (pour du code).

J'ai longuement hésité à utiliser la police Inter comme police sans serif, que je trouve aussi très jolie et lisible. Mais, même si mon avis en tant que designer a peu de valeur, je suis assez satisfait de la composition de ces trois polices.

Iconographies

Dans la première version du site (avec YOCaml), j'évitais l'utilisation d'icones, parce que je n'y connais rien en SVG. Cependant, dans une volonté de modernité sauvage, j'ai décidé, d'enfin, en utiliser !

• Creative Commons, pour les icones concernant les attributions de la Creative Commons
• Simple Icons, pour les autres icones.

Conclusion

C'était, dans les grandes lignes, les socles sur lesquels repose ce site web. Je n'ai malheureusement pas cité toutes les dépendances transitives des projets que j'utilise mais comme j'utilise presque essentiellement des logiciels libres, elles sont découvrables par le biais des liens que j'ai référencés.

De mon point de vue, la pile technologique basée sur YOCaml et Nightmare est très amusante à utiliser et me motive à faire évoluer mon site. Ce qui me permet de conclure sur, selon moi, l'importance de contrôler son espace personnel sur le net. En effet, il m'arrive souvent de voir des articles publiés sur Medium ou encore Dev.to. Même si je comprend parfaitement que le gros avantage de ces médiums de publication est la communauté (et donc la promotion de ses rédactions), je trouve que garder le contrôle de son contenu, d'être capable de construire une expérience de lecture adapté à ses articles et d'offrir des rédactions sans publicités (le fameux Pardon the Interruption que je trouve infernal) est un gain énorme. De plus, maintenir son espace sur le web, comme un jardin numérique est un exercice très amusant, formateur et qui, selon moi, stimule sa créativité ! Et de manière un peu technocratique, ça permet d'expérimenter des langages plus compliqués à proposer professionnellement !

Pour ma part, même si je pense qu'au vue de mes choix technologiques, je suis assez indépendant concernant l'évolution de mon site et du code de son générateur, je trouve que je dépend encore trop fortemment de Github et qu'un jour, je pourrai passer à une version auto-hébergée, le fait que je contrôle mon contenu, qu'il est facilement backupable ne m'inquiète pas quand je voudrai migrer. Et oui, une site généré statiquement, c'est très facile à déployer !

Si vous avez envie de vous lancer dans la construction de votre espace sur le web, l'anneau de la communauté Merveilles est une collection de jardins numériques pouvant être une très bonne source d'inspiration et je suis, évidemment, ouvert à tout échange à ce propos, via les différents canaux de contact qu'il est possible de trouver sur ce site !