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é. 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_unix : comme YOCaml est très versatile, il peut générer un site depuis et vers un système de fichier Unix (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. Le paquet repose essentiellement sur Cryptokit, pour le hachage des documents, Logs, pour l'affichage des logs, Conduit et Cohttp pour le serveur de développement local.

• 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. Cependant, il est possible que dans un futur proche, je me penche sur TOML.

• 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 : qui repose sur la bibliothèque syndic me servant à décrire le flux Atom du site. Ce greffon a été développé par l'équipe Psi-Prod, qui réalise beaucoup de projets en rapport avec MirageOS, Gemini et YOCaml.

Greffons implémentés

Alors que, historiquement, j'utilisais Org comme langage Markup, j'ai décidé de passer vers du Markdown, essentiellement parce qu'il y avait une bibliothèque complète, et que YOCaml possédait, déjà, un greffon Yocaml_markdown, basé sur omd. Cependant, je voulais pouvoir automatiser la génération de table des matières, donc j'ai implémenté mon propre greffon, lui aussi, basé sur omd.

Entre temps, la bibliothèque Cmarkit, qui respecte la spécification CommonMark a été publiée et Dinosaure (contributeur et utilisateur de YOCaml, mais aussi le mainteneur/créateur de pléthore de bibliothèques incroyablement utile pour l'écosystème OCaml) a construit un greffon Yocaml_cmark. Quand le temps me le permettra, je passerai probablement sur cette bibliothèque.

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. (Actuellement, c'est laissé de coté car ça implique de migrer vers Cmarkit et d'intégrer d'autres syntaxes, mon site ne parlant pas que de OCaml).

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, par exemple, les Dapps ou encore l'affichage des commentaires. 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

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 te 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.

Web3 et Tezos

Dans certains espaces de conversations que je fréquente, il arrive souvent que les blockchains aient une mauvaise réputation, cependant, à titre personnel, et comme je l'avais expansivement évoqué dans ce podcast, j'y vois une collection d'opportunités de création de projets amusants. Et comme un des objectifs de mon site est d'être un petit bac à sable pour construire de petites expérimentations, je voulais être capable d'embarquer des petites applications décentralisées utilisant Tezos comme back-end (j'avais d'ailleurs éventualisé l'idée d'utiliser cette dernière pour la gestion des commentaires mais je trouvais ça laborieux d'imposer à mes lecteurs potentiels le fait de devoir payer pour publier un commentaire).

Pour l'interaction avec la chaine, j'utilise yourbones qui est, comme nightmare, une collection d'embryon de bibliothèques pour interagir avec la chaine Tezos. Dans Yourbones, il existe une bibliothèque yourbones_js-beacon qui fait la liaison avec Beacon, une implémentation de la TZIP-10 permettant l'abstraction de la connexion d'un Wallet. Exactement comme pour YOCaml et Nightmare, mon site fait office d'incubateur pour Yourbones en détectant les fonctionnalités intéressantes à implémenter et en faisant remonter des bogues potentiels, notamment pour Js_of_OCaml ou beaucoup d'améliorations d'inlining ont été remonté par l'utilisation de Yourbones. En complément, j'utilise la bibliothèque data-encoding pour les échanges de données entre mes applications embrarquées et les noeuds RPC de Tezos.

En complément, certaines galeries pointent vers des collections Objkt (ou certaines illustrations pointent directement vers une page Objkt) permettant à des utilisateurs d'acheter certaines éditions sous formes de NFT.

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),

Comme YOCaml a été conçu par au dessus de Preface, cette bibliothèque est aussi grandement utilisée dans les différents modules du générateur et des parties clientes.

En plus, j'utilise, par habitude Make comme orchestrateur de tâches génériques (un peu par habitude car Dune pourrait largement le remplacer) et 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.

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).

• Inconsolata : 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.

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 !