Aller au contenu
/

Colophon

Last modified

Comment ce site est fabriqué, ce qu’il représente, et pourquoi posséder son propre coin de web n’a jamais été aussi important.

Pourquoi

J’ai commencé à bidouiller du web au début des années 2000. L’âge d’or des applets Java, des blogrolls et des flux RSS soigneusement curatés. Ensuite, j’ai connu l’explosion de MySpace, puis Facebook, et le web ouvert a cédé le pas aux jardins clos. Vers 2010, j’ai peu à peu délaissé ma collection de flux RSS pour m’informer quasi exclusivement via des podcasts (The B&B Podcast, ATP, The Prompt, The Talk Show…) et via Twitter, consommé depuis des apps comme Twitterrific, Tweetbot, puis Spring. Ces clients tiers avaient tiré tout l’écosystème de Twitter et de l’App Store vers le haut, en inventant des patterns comme la navigation par sidebar ou le pull-to-refresh (introduit par Tweetie) qu’Apple finirait par adopter.

Le déclin a été lent, puis brutal. Les restrictions d’API limitaient peu à peu les fonctionnalités des clients tiers, certaines étant réservées à l’app officielle, comme les sondages. Puis le rachat est arrivé, et avec lui le shit show : l’arrivée au siège avec un évier (« let that sink in »), le 𝕏 lumineux sur le toit qui empêchait les voisins de dormir, les certifications bleues offertes de force à des gens comme Stephen King et LeBron James qui avaient publiquement annoncé ne plus en vouloir. Puis les prix d’API sont devenus exorbitants, achevant pour de bon les clients tiers et obligeant tout le monde à utiliser l’horrible app officielle. Ce qui était mon outil de veille principal s’est transformé en repère de bots OnlyFans, de trends stupides de clickbait et d’engagement farming, et de propos fascistes décomplexés.

Tout le monde s’est dispersé : certains sur Mastodon, d’autres sur Threads, d’autres sur Bluesky. Certains influenceurs sont hélas restés sur Twitter, les autres se sont répartis entre adeptes du Fédiverse et partisans de l’AT Protocol. De ces cendres, une prise de conscience collective a émergé : on a beau aimer une plateforme, être propriétaire de ses données et en contrôle de sa diffusion n’a pas de prix. Les sites web personnels ont commencé à revenir.

The best time to buy a domain was 20 years ago. The second best time is today.

Jim NielsenThe Best Time to Own a Domain Was 20 Years Ago; The Second Best Time Is Today

Avoir un site personnel a toujours été un fantasme. Je n’ai jamais réussi à trouver la légitimité de publier du contenu. Mais ce qui était un rêve éveillé est devenu comme une fatalité. Un besoin intrinsèque d’écriture m’anime, et pour ce faire, il me faut un support dont mon tempérament d’éternel insatisfait soit fier.

Technologie

Ce site est construit avec Next.js (App Router) et TypeScript. Le contenu est rédigé en MDX : du Markdown avec des composants React intégrés.

C’est le MDX qui fait de ce site plus qu’un blog. Chaque page peut mêler prose et composants React sur mesure. En voici quelques-uns, rendus en direct avec leurs props :

ASCIIText

Le pipeline de traitement Markdown repose sur unified avec remark (parsing, GFM, math) et rehype (rendu KaTeX, génération de slugs, liens automatiques sur les titres, guillemets typographiques, gestion des tirets cadratins). Le rendu MDX est assuré par next-mdx-remote-client, et la coloration syntaxique par Sugar High.

La qualité du code est assurée par Oxlint et Oxfmt (du linting et du formatage écrits en Rust qui s’exécutent en millisecondes) avec des hooks pre-commit Husky pour garder les choses honnêtes.

Typographie

Trois polices, chacune avec un rôle :

  • Roobert pour les titres. Une sans-serif géométrique avec du caractère.
  • PP Neue Montreal pour le corps de texte. Une néo-grotesque. J’ai toujours été attiré par les grotesques, et celle-ci trouve le bon équilibre : propre et lisible, mais discrètement distinctive.
  • Geist Mono pour le code. Conçue pour les terminaux et les éditeurs.

Design

Thème sombre, toujours. La mise en page repose sur un pattern CSS Grid de breakout inspiré par Ryan Mulligan et SmolCSS. Au lieu d’enfermer le contenu dans un container contraint puis de se battre pour en faire sortir certains éléments, chaque enfant se place sur une grille avec des colonnes nommées content, popout, feature, full et choisit la largeur dont il a besoin. Les blocs de code débordent en popout, les visuels hero s’étirent en full, et la prose reste en content. Pas de hacks max-width, pas de marges négatives. Stylisé avec Tailwind CSS et shadcn/ui.

Chaque visuel de ce site est du pur code : CSS, Three.js, Canvas. Pas d’images générées par IA, pas de photos de banque d’images. Les animations sont gérées par Motion avec un système d’animations séquentielles sur mesure.

Contenu

Chaque texte est écrit à la main, en anglais et en français. L’IA est utilisée pour la relecture, jamais pour la rédaction ni l’écriture. Le raisonnement complet est sur la page /ai.

Le site supporte le contenu bilingue avec un routage par locale, un sélecteur de langue et des balises hreflang alternatives. La syndication est disponible via des flux RSS et Atom dans les deux langues.

Chaque page répond aussi à l’en-tête Accept : en demandant text/markdown ou text/plain, vous obtenez une version Markdown propre au lieu du HTML, avec les composants personnalisés convertis en texte brut via un plugin remark dédié.

Hébergement et vie privée

Hébergé sur Vercel. Les analytics sont fournies par Vercel Web Analytics et Speed Insights : anonymes, sans cookies, et conformes par design. Aucune donnée personnelle n’est collectée. Détails complets sur la page /privacy.

Ceci est une page /colophon, une page décrivant comment ce site est fabriqué. La tradition vient de l’édition, où un colophon documente les polices, le papier et les méthodes d’impression utilisées pour produire un livre. Voir toutes les pages slash.