Article

david/2024/01/01/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
 <li>Conséquences psychiques, physiques, sociales,…</li>
 </ul>
 <p>Bon Dry J. pour celleux qui le font&#8239;! Moi j’en&nbsp;suis&#8239;!</p>
-<p><cite><a href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
+<p><cite><a data-link-domain="framapiaf.org"  href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
 </blockquote>
 <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul&nbsp;mois.</p>
 <p>Je me sens prêt, on verra bien où cela me&nbsp;mène.</p>

david/2024/01/02/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
 <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
 <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
 <ul>
-<li><a href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
-<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
-<li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
-<li><a href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
+<li><a data-link-domain="piccalil.li"  href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
+<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/"  data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
+<li><a href="https://github.com/jensimmons/cssremedy"  data-link-domain="github.com">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
+<li><a href="https://jgthms.com/minireset.css/"  data-link-domain="jgthms.com">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
 </ul>
-<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
+<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com"  href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com"  href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
 <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
-<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
+<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/"  data-link-domain="quaternum.net">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>]&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr"  href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
 <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
 <hr />
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train"  data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />
     </a>
     <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
 </figure>
-<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
+<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/"  data-link-domain="velvetyne.fr">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
 <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>
 
     

david/2024/01/03/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
       </p>
     </nav>
     
-<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
-<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/"  data-link-domain="mbtype.com">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com"  href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi"  href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
 <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
 <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
 <hr />

david/2024/01/04/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
 </blockquote>
 <p>Dans un chalet pour quelques jours. Des randonnées à trois générations. Toujours ces questionnements autour de la propriété. Concilier tous les besoins, accepter de changer de vie, ne pas savoir si on serait finalement entourés d’une culture qui ne nous correspond pas (et qui ne nous attire pas non plus). Trouver le bon&nbsp;tempo.</p>
 <hr />
-<p>Je me demande s’il serait pertinent <a href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/">d’utiliser <code>text-wrap</code></a> sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
+<p>Je me demande s’il serait pertinent <a data-link-domain="blog.stephaniestimac.com"  href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/">d’utiliser <code>text-wrap</code></a> [<a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" title="Copie locale au 2024-01-07">archive</a>] sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr"  href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a data-link-domain="ronan.amicel.net"  href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
 <p>Je tente de rendre les citations explicites car on m’a déjà fait le retour de ne pas tout de suite comprendre une publication qui commence par une citation&nbsp;: <q>Ah je croyais que c’était de toi&#8239;!</q>.</p>
 <pre><code>blockquote::before {
     content: &quot;citation&quot;;

david/2024/01/05/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
 <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
 <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
 </blockquote>
-<p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
+<p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org"  href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
 <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>
 
 <blockquote>
 <p><cite><em>Ibid.</em></cite></p>
 </blockquote>
 <hr />
-<p><a href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
+<p><a data-link-domain="piaille.fr"  href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr"  href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
 <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
 <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
-<p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
+<p>Plus tard, <a data-link-domain="mamot.fr"  href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
 <p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
 <hr />
 <p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>

david/2024/01/06/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
 Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
 <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
 <p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
-<p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
+<p><cite><a data-link-domain="pipou.academy"  href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
 </blockquote>
 
     

david/2024/01/07/index.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
              rel="search">Recherche</a>
         </nobr>
         
+          • <a rel="next"
+    href="/david/2024/01/08/"
+    title="Publication suivante : Liens">Suivant →</a>
+        
       </p>
     </nav>
     
 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
-<p>Vu le succès de <a href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
+<p>Vu le succès de <a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
-<p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
+<p><cite><a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
-<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
+<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/"  title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com"  href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
-<p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
-<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
+<p>Masto comme un <a data-link-domain="fedi.larlet.fr"  href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
+<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/"  data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />
 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
-<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche"  data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
-<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
+<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"  data-link-domain="kagifeedback.org">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
-<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>
+<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"  data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle&nbsp;cryptonite.</p>
 
     
       <nav>
         
         <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
         
+          • <a rel="next"
+    href="/david/2024/01/08/"
+    title="Publication suivante : Liens">Suivant →</a>
+        
       </p>
     </nav>
     <aside>

david/2024/01/08/index.html

+<!DOCTYPE html><!-- This is a valid HTML5 document. -->
+<!-- Screen readers, SEO, extensions and so on. -->
+<html lang="fr">
+  <!-- Has to be within the first 1024 bytes, hence before the `title` element
+  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
+  <meta charset="utf-8">
+  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
+  <!-- The viewport meta is quite crowded and we are responsible for that.
+  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <!-- Required to make a valid HTML5 document. -->
+  <title>
+    Liens
+  — David Larlet</title>
+  <meta name="description" content="Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de mistune et je m’en sers ensuite en CSS pour l’afficher dynamiquement :">
+  <!-- That good ol' feed, subscribe :). -->
+  <link rel="alternate"
+        type="application/atom+xml"
+        title="Feed"
+        href="/david/log/">
+  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/david/icons2/apple-touch-icon.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/static/david/icons2/favicon-32x32.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/static/david/icons2/favicon-16x16.png">
+  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
+  <link rel="mask-icon"
+        href="/static/david/icons2/safari-pinned-tab.svg"
+        color="#07486c">
+  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
+  <meta name="msapplication-TileColor" content="#f7f7f7">
+  <meta name="msapplication-config"
+        content="/static/david/icons2/browserconfig.xml">
+  <meta name="theme-color"
+        content="#f7f7f7"
+        media="(prefers-color-scheme: light)">
+  <meta name="theme-color"
+        content="#272727"
+        media="(prefers-color-scheme: dark)">
+  <!-- Is that even respected? Retrospectively? What a shAItshow…
+  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
+  <meta name="robots" content="noai, noimageai">
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <script>
+    function toggleTheme(themeName) {
+      document.documentElement.classList.toggle(
+        'forced-dark',
+        themeName === 'dark'
+      )
+      document.documentElement.classList.toggle(
+        'forced-light',
+        themeName === 'light'
+      )
+    }
+    const selectedTheme = localStorage.getItem('theme')
+    if (selectedTheme !== 'undefined') {
+      toggleTheme(selectedTheme)
+    }
+  </script>
+  
+  <body data-instant-intensity="viewport-all">
+    
+  <article>
+    <header>
+      <hgroup>
+        <h1>Liens</h1>
+        <p>Le <time datetime="2024-01-08">8 janvier 2024</time></p>
+      </hgroup>
+    </header>
+    <nav>
+      <p class="center">
+        
+          <a rel="prev"
+             href="/david/2024/01/07/"
+             title="Publication précédente : Dons">← Précédent</a> •
+        
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/recherche/"
+             title="Aller à la page de recherche"
+             rel="search">Recherche</a>
+        </nobr>
+        
+      </p>
+    </nav>
+    
+<p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/"  data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
+<pre><code>a[data-link-domain]::after {
+  content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+</code></pre>
+<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
+<pre><code>a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+</code></pre>
+<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
+<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a href="https://fedi.larlet.fr/@david/111703611010197838"  data-link-domain="fedi.larlet.fr">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
+<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
+<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
+<hr />
+
+<blockquote>
+<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
+<p><cite><em><a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"  data-link-domain="blog.professeurjoachim.com">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com"  href="https://larlet.com/">profil pro</a>.</p>
+
+<blockquote lang="en">
+<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
+<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
+<p><cite><em><a data-link-domain="frantic.im"  href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
+<hr />
+<p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>
+
+    
+      <nav>
+        <p>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/solastalgia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#solastalgia</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <nav>
+      <p class="center">
+        
+          <a rel="prev"
+             href="/david/2024/01/07/"
+             title="Publication précédente : Dons">← Précédent</a> •
+        
+        <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
+        
+      </p>
+    </nav>
+    <aside>
+      <theme-toggle></theme-toggle>
+    </aside>
+  </article>
+
+    <hr>
+    <footer>
+      <p>
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil">Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="http://larlet.com"
+             title="Go to my English profile"
+             data-instant>Pro</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
+        </nobr>
+        •
+        <nobr>
+          <abbr class="nowrap"
+                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
+        </nobr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <style type="text/css">
+            fieldset {
+              text-align: center;
+            }
+          </style>
+          <fieldset>
+            <legend>Thème
+            </legend>
+            <label>
+              <input type="radio" value="auto" name="chosen-color-scheme" checked>
+              Auto
+            </label>
+            <label>
+              <input type="radio" value="dark" name="chosen-color-scheme">
+              Foncé
+            </label>
+            <label>
+              <input type="radio" value="light" name="chosen-color-scheme">
+              Clair
+            </label>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      class ThemeToggle extends HTMLElement {
+        constructor() {
+          super()
+          const themeSelectorTemplate = document.querySelector('#theme-selector')
+          const form = themeSelectorTemplate.content.firstElementChild
+          this.attachShadow({ mode: 'open' })
+          this.shadowRoot.appendChild(form.cloneNode(true))
+        }
+
+        connectedCallback() {
+          const form = this.shadowRoot.querySelector('form')
+          form.addEventListener('change', (e) => {
+            const chosenColorScheme = e.target.value
+            localStorage.setItem('theme', chosenColorScheme)
+            toggleTheme(chosenColorScheme)
+          })
+
+          const selectedTheme = localStorage.getItem('theme')
+          if (selectedTheme && selectedTheme !== 'undefined') {
+            form.querySelector(`[value="${selectedTheme}"]`).checked = true
+          }
+        }
+      }
+
+      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+      window.addEventListener('load', () => {
+        let colorsLayer = undefined
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
+              continue
+            }
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
+                continue
+              }
+              // WARNING: Safari does not have/supports `conditionText`.
+              if (cssRule.conditionText) {
+                if (cssRule.conditionText !== prefersColorSchemeDark) {
+                  continue
+                }
+              } else {
+                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                  continue
+                }
+              }
+              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+            }
+          }
+
+          // WARNING: do not try to insert a Rule to a styleSheet you are
+          // currently iterating on, otherwise the browser will be stuck
+          // in a infinite loop…
+          for (const mediaRule of mediaRules) {
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
+            hasDarkRules = true
+          }
+        }
+
+        if (hasDarkRules) {
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
+        }
+      })
+    </script>
+    
+  </body>
+</html>

david/2024/_sources/2024-01-02 - Fondations.md

 
 > Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des rêves.
 >
-> <cite>*[notes](https://www.la-grange.net/2023/07/10/notes-train)* par Karl</cite>
+> <cite>*[notes](https://www.la-grange.net/2023/07/10/notes-train)*, Karl</cite>
 
 🧡
 

david/2024/_sources/2024-01-08 - Liens.md

+# Liens
+
+Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de [mistune](https://mistune.lepture.com/en/latest/) et je m’en sers ensuite en CSS pour l’afficher dynamiquement :
+
+```
+a[data-link-domain]::after {
+  content: " [" attr(data-link-domain) "]";
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+```
+
+Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du domaine :
+
+```
+a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+```
+
+Mais au final je jette car je perds la partie `skip-ink` que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience / accessibilité.
+
+Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre *Web Component* dédié. En suivant les recommandations [sur masto](https://fedi.larlet.fr/@david/111703611010197838), je les nomme `archive` pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus tard.
+
+Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la durée.
+
+Chaque lien distant prend une longueur non négligeable suite à ces deux ajouts 🤔. 
+
+---
+
+> Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit blog”.
+> 
+> <cite>*[Ma page /now (ou plutôt /en-ce-moment)](https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment)*</cite>
+
+J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon [profil pro](https://larlet.com/).
+
+> [en] I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but ==they like building their own blog engine to make blogging more pleasant== (I’m very guilty of this too).
+>
+> Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy change”.
+>
+> <cite>*[Opening Mail](https://frantic.im/opening-mail/)*</cite>
+
+Note : cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes articles.
+
+---
+
+L’hiver commence maintenant le 7 janvier à Montréal. Phénomène météorologique exceptionnel _et_ tendance climatique.
+
+#processus #solastalgia #technique

david/2024/accompagnement/index.html

     </h2>
     
       
-<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
-<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/"  data-link-domain="mbtype.com">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com"  href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi"  href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
 <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
 <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
 <hr />

david/2024/addiction/index.html

 Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
 <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
 <p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
-<p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
+<p><cite><a data-link-domain="pipou.academy"  href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
 </blockquote>
 
     
 <li>Conséquences psychiques, physiques, sociales,…</li>
 </ul>
 <p>Bon Dry J. pour celleux qui le font&#8239;! Moi j’en&nbsp;suis&#8239;!</p>
-<p><cite><a href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
+<p><cite><a data-link-domain="framapiaf.org"  href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
 </blockquote>
 <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul&nbsp;mois.</p>
 <p>Je me sens prêt, on verra bien où cela me&nbsp;mène.</p>

david/2024/apprentissage/index.html

 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
-<p>Vu le succès de <a href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
+<p>Vu le succès de <a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
-<p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
+<p><cite><a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
-<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
+<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/"  title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com"  href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
-<p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
-<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
+<p>Masto comme un <a data-link-domain="fedi.larlet.fr"  href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
+<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/"  data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />
 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
-<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche"  data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
-<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
+<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"  data-link-domain="kagifeedback.org">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
-<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>
+<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"  data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle&nbsp;cryptonite.</p>
 
     
   
 <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
 <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
 </blockquote>
-<p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
+<p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org"  href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
 <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>
 
 <blockquote>
 <p><cite><em>Ibid.</em></cite></p>
 </blockquote>
 <hr />
-<p><a href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
+<p><a data-link-domain="piaille.fr"  href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr"  href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
 <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
 <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
-<p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
+<p>Plus tard, <a data-link-domain="mamot.fr"  href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
 <p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
 <hr />
 <p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>

david/2024/communaute/index.html

 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
-<p>Vu le succès de <a href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
+<p>Vu le succès de <a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
-<p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
+<p><cite><a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
-<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
+<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/"  title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com"  href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
-<p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
-<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
+<p>Masto comme un <a data-link-domain="fedi.larlet.fr"  href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
+<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/"  data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />
 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
-<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche"  data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
-<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
+<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"  data-link-domain="kagifeedback.org">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
-<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>
+<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"  data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle&nbsp;cryptonite.</p>
 
     
   

david/2024/decision/index.html

 <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
 <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
 </blockquote>
-<p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
+<p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org"  href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
 <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>
 
 <blockquote>
 <p><cite><em>Ibid.</em></cite></p>
 </blockquote>
 <hr />
-<p><a href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
+<p><a data-link-domain="piaille.fr"  href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr"  href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
 <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
 <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
-<p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
+<p>Plus tard, <a data-link-domain="mamot.fr"  href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
 <p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
 <hr />
 <p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>

david/2024/ecriture/index.html

     </h2>
     
       
-<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
-<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/"  data-link-domain="mbtype.com">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com"  href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi"  href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
 <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
 <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
 <hr />

david/2024/equipe/index.html

 <p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
 <p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
 </blockquote>
-<p>On pourrait y voir de la <a href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
+<p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org"  href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
 <p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>
 
 <blockquote>
 <p><cite><em>Ibid.</em></cite></p>
 </blockquote>
 <hr />
-<p><a href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
+<p><a data-link-domain="piaille.fr"  href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr"  href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
 <p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
 <p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
-<p>Plus tard, <a href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
+<p>Plus tard, <a data-link-domain="mamot.fr"  href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
 <p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
 <hr />
 <p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>

david/2024/experience/index.html

 <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
 <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
 <ul>
-<li><a href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
-<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
-<li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
-<li><a href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
+<li><a data-link-domain="piccalil.li"  href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
+<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/"  data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
+<li><a href="https://github.com/jensimmons/cssremedy"  data-link-domain="github.com">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
+<li><a href="https://jgthms.com/minireset.css/"  data-link-domain="jgthms.com">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
 </ul>
-<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
+<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com"  href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com"  href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
 <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
-<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
+<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/"  data-link-domain="quaternum.net">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>]&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr"  href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
 <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
 <hr />
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train"  data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />
     </a>
     <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
 </figure>
-<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
+<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/"  data-link-domain="velvetyne.fr">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
 <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>
 
     
 <li>Conséquences psychiques, physiques, sociales,…</li>
 </ul>
 <p>Bon Dry J. pour celleux qui le font&#8239;! Moi j’en&nbsp;suis&#8239;!</p>
-<p><cite><a href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
+<p><cite><a data-link-domain="framapiaf.org"  href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
 </blockquote>
 <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul&nbsp;mois.</p>
 <p>Je me sens prêt, on verra bien où cela me&nbsp;mène.</p>

david/2024/fediverse/index.html

 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
-<p>Vu le succès de <a href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
+<p>Vu le succès de <a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
 <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
-<p><cite><a href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
+<p><cite><a data-link-domain="piaille.fr"  href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
 </blockquote>
 <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
-<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a href="https://www.saq.com/">SAQ</a>.</p>
+<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/"  title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com"  href="https://www.saq.com/">SAQ</a>.</p>
 <hr />
 <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
 <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
 <hr />
-<p>Masto comme un <a href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
-<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
+<p>Masto comme un <a data-link-domain="fedi.larlet.fr"  href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
+<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a href="https://ricaud.me/blog/"  data-link-domain="ricaud.me">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
 <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
 <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
 <hr />
 <blockquote>
 <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
 <p>Je suis&nbsp;impressionné.</p>
-<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a></em>, Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2024/01/06/ebauche"  data-link-domain="la-grange.net">plaisir d’ébauche</a> [<a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>Ce&nbsp;titre&nbsp;:)</p>
 <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
 <blockquote lang="en">
 <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
 <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
-<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
+<p><cite><em><a href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"  data-link-domain="kagifeedback.org">Vlad (admin Kagi) répondant</a> [<a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">archive</a>] à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
 </blockquote>
 <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
-<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> est ma nouvelle&nbsp;cryptonite.</p>
+<p><a href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"  data-link-domain="theverge.com">Pas de politique au travail</a> [<a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">archive</a>] est ma nouvelle&nbsp;cryptonite.</p>
 
     
   

david/2024/index.html

       <a href="/david/2024/01/04/">Repos</a>, 
       <a href="/david/2024/01/05/">Vocabulaire</a>, 
       <a href="/david/2024/01/06/">Objectif</a>, 
-      <a href="/david/2024/01/07/">Dons</a>.
+      <a href="/david/2024/01/07/">Dons</a>, 
+      <a href="/david/2024/01/08/">Liens</a>.
       
     </p>
   
       <a href="/david/2021/equipe/" rel="tag">#équipe (1)</a>
       <a href="/david/2021/experience/" rel="tag">#expérience (2)</a>
       <a href="/david/2021/fediverse/" rel="tag">#fédiverse (1)</a>
-      <a href="/david/2021/processus/" rel="tag">#processus (1)</a>
+      <a href="/david/2021/processus/" rel="tag">#processus (2)</a>
       <a href="/david/2021/protopie/" rel="tag">#protopie (1)</a>
+      <a href="/david/2021/solastalgia/" rel="tag">#solastalgia (1)</a>
       <a href="/david/2021/sport/" rel="tag">#sport (1)</a>
-      <a href="/david/2021/technique/" rel="tag">#technique (1)</a>
+      <a href="/david/2021/technique/" rel="tag">#technique (2)</a>
       <a href="/david/2021/web/" rel="tag">#web (2)</a>
       
     </p>

david/2024/processus/index.html

 <main>
   <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
   
+    <h2>
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+    </h2>
+    
+      
+<p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/"  data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
+<pre><code>a[data-link-domain]::after {
+  content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+</code></pre>
+<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
+<pre><code>a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+</code></pre>
+<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
+<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a href="https://fedi.larlet.fr/@david/111703611010197838"  data-link-domain="fedi.larlet.fr">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
+<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
+<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
+<hr />
+
+<blockquote>
+<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
+<p><cite><em><a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"  data-link-domain="blog.professeurjoachim.com">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com"  href="https://larlet.com/">profil pro</a>.</p>
+
+<blockquote lang="en">
+<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
+<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
+<p><cite><em><a data-link-domain="frantic.im"  href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
+<hr />
+<p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>
+
+    
+  
     <h2>
       <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> (2024-01-06)
     </h2>
 Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
 <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
 <p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
-<p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
+<p><cite><a data-link-domain="pipou.academy"  href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
 </blockquote>
 
     

david/2024/protopie/index.html

 <li>Conséquences psychiques, physiques, sociales,…</li>
 </ul>
 <p>Bon Dry J. pour celleux qui le font&#8239;! Moi j’en&nbsp;suis&#8239;!</p>
-<p><cite><a href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
+<p><cite><a data-link-domain="framapiaf.org"  href="https://framapiaf.org/@Air/111681709094993435">@Air@framapiaf.org</a></cite></p>
 </blockquote>
 <p>Dans mon entourage, de plus en plus de personnes que j’estime ne boivent pas d’alcool, de plus en plus de personnes qui vieillissent en deviennent dépendantes. Je suis davantage attiré par la première option… et pas pour un seul&nbsp;mois.</p>
 <p>Je me sens prêt, on verra bien où cela me&nbsp;mène.</p>

david/2024/solastalgia/index.html

+<!DOCTYPE html><!-- This is a valid HTML5 document. -->
+<!-- Screen readers, SEO, extensions and so on. -->
+<html lang="fr">
+  <!-- Has to be within the first 1024 bytes, hence before the `title` element
+  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
+  <meta charset="utf-8">
+  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
+  <!-- The viewport meta is quite crowded and we are responsible for that.
+  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <!-- Required to make a valid HTML5 document. -->
+  <title>
+    Tag #solastalgia
+  — David Larlet</title>
+  <meta name="description" content="Publications relatives au tag #solastalgia">
+  <!-- That good ol' feed, subscribe :). -->
+  <link rel="alternate"
+        type="application/atom+xml"
+        title="Feed"
+        href="/david/log/">
+  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
+  <link rel="apple-touch-icon"
+        sizes="180x180"
+        href="/static/david/icons2/apple-touch-icon.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/static/david/icons2/favicon-32x32.png">
+  <link rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/static/david/icons2/favicon-16x16.png">
+  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
+  <link rel="mask-icon"
+        href="/static/david/icons2/safari-pinned-tab.svg"
+        color="#07486c">
+  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
+  <meta name="msapplication-TileColor" content="#f7f7f7">
+  <meta name="msapplication-config"
+        content="/static/david/icons2/browserconfig.xml">
+  <meta name="theme-color"
+        content="#f7f7f7"
+        media="(prefers-color-scheme: light)">
+  <meta name="theme-color"
+        content="#272727"
+        media="(prefers-color-scheme: dark)">
+  <!-- Is that even respected? Retrospectively? What a shAItshow…
+  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
+  <meta name="robots" content="noai, noimageai">
+  <!-- Documented, feel free to shoot an email. -->
+  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
+  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <link rel="preload"
+        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
+        as="font"
+        type="font/woff2"
+        media="(prefers-color-scheme: dark)"
+        crossorigin>
+  <script>
+    function toggleTheme(themeName) {
+      document.documentElement.classList.toggle(
+        'forced-dark',
+        themeName === 'dark'
+      )
+      document.documentElement.classList.toggle(
+        'forced-light',
+        themeName === 'light'
+      )
+    }
+    const selectedTheme = localStorage.getItem('theme')
+    if (selectedTheme !== 'undefined') {
+      toggleTheme(selectedTheme)
+    }
+  </script>
+  
+  <style type="text/css">
+    details[open] summary {
+      display: none;
+    }
+  </style>
+
+  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
+        data-instant-intensity="viewport-all">
+    
+  <header>
+    <h1>Publications relatives au tag #solastalgia</h1>
+  </header>
+  <nav>
+    <p class="center">
+      <a href="/david/" title="Aller à l’accueil">
+        <svg class="icon icon-home">
+          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
+        </svg>
+      Accueil</a>
+      • <a rel="tags"
+    href="/david/#tags-2023"
+    title="Liste de toutes les étiquettes">
+      <svg class="icon icon-tags">
+        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
+      </svg>
+    Étiquettes</a>
+  </p>
+</nav>
+<hr>
+<main>
+  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
+  
+    <h2>
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+    </h2>
+    
+      
+<p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/"  data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
+<pre><code>a[data-link-domain]::after {
+  content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+</code></pre>
+<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
+<pre><code>a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+</code></pre>
+<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
+<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a href="https://fedi.larlet.fr/@david/111703611010197838"  data-link-domain="fedi.larlet.fr">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
+<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
+<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
+<hr />
+
+<blockquote>
+<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
+<p><cite><em><a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"  data-link-domain="blog.professeurjoachim.com">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com"  href="https://larlet.com/">profil pro</a>.</p>
+
+<blockquote lang="en">
+<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
+<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
+<p><cite><em><a data-link-domain="frantic.im"  href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
+<hr />
+<p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>
+
+    
+  
+</main>
+
+    <hr>
+    <footer>
+      <p>
+        <nobr>
+          <a href="/david/" title="Aller à l’accueil">
+            <svg class="icon icon-home">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
+            </svg>
+          Accueil</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="/david/log/" title="Accès au flux RSS">
+            <svg class="icon icon-rss2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
+            </svg>
+          Suivre</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="http://larlet.com"
+             title="Go to my English profile"
+             data-instant>
+            <svg class="icon icon-user-tie">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
+            </svg>
+          Pro</a>
+        </nobr>
+        •
+        <nobr>
+          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
+            <svg class="icon icon-mail">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
+            </svg>
+          Email</a>
+        </nobr>
+        •
+        <nobr>
+          <abbr class="nowrap"
+                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
+            <svg class="icon icon-hammer2">
+              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
+            </svg>
+          Légal</abbr>
+        </nobr>
+      </p>
+      <template id="theme-selector">
+        <form>
+          <fieldset>
+            <legend>
+              <svg class="icon icon-brightness-contrast">
+                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
+              </svg>
+              Thème
+            </legend>
+            <label>
+              <input type="radio" value="auto" name="chosen-color-scheme" checked>
+              Auto
+            </label>
+            <label>
+              <input type="radio" value="dark" name="chosen-color-scheme">
+              Foncé
+            </label>
+            <label>
+              <input type="radio" value="light" name="chosen-color-scheme">
+              Clair
+            </label>
+          </fieldset>
+        </form>
+      </template>
+    </footer>
+    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
+    <script>
+      function loadThemeForm(templateName) {
+        const themeSelectorTemplate = document.querySelector(templateName)
+        const form = themeSelectorTemplate.content.firstElementChild
+        themeSelectorTemplate.replaceWith(form)
+
+        form.addEventListener('change', (e) => {
+          const chosenColorScheme = e.target.value
+          localStorage.setItem('theme', chosenColorScheme)
+          toggleTheme(chosenColorScheme)
+        })
+
+        const selectedTheme = localStorage.getItem('theme')
+        if (selectedTheme && selectedTheme !== 'undefined') {
+          form.querySelector(`[value="${selectedTheme}"]`).checked = true
+        }
+      }
+
+      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
+      window.addEventListener('load', () => {
+        let hasDarkRules = false
+        for (const styleSheet of Array.from(document.styleSheets)) {
+          let mediaRules = []
+          for (const cssRule of styleSheet.cssRules) {
+            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+              continue
+            }
+            // WARNING: Safari does not have/supports `conditionText`.
+            if (cssRule.conditionText) {
+              if (cssRule.conditionText !== prefersColorSchemeDark) {
+                continue
+              }
+            } else {
+              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
+                continue
+              }
+            }
+            mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
+          }
+
+          // WARNING: do not try to insert a Rule to a styleSheet you are
+          // currently iterating on, otherwise the browser will be stuck
+          // in a infinite loop…
+          for (const mediaRule of mediaRules) {
+            styleSheet.insertRule(mediaRule.cssText)
+            hasDarkRules = true
+          }
+        }
+        if (hasDarkRules) {
+          loadThemeForm('#theme-selector')
+        }
+      })
+    </script>
+    
+  </body>
+</html>

david/2024/sport/index.html

 Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
 <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
 <p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
-<p><cite><a href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
+<p><cite><a data-link-domain="pipou.academy"  href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
 </blockquote>
 
     

david/2024/technique/index.html

 <main>
   <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
   
+    <h2>
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+    </h2>
+    
+      
+<p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a href="https://mistune.lepture.com/en/latest/"  data-link-domain="mistune.lepture.com">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
+<pre><code>a[data-link-domain]::after {
+  content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+</code></pre>
+<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
+<pre><code>a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: '';
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+</code></pre>
+<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
+<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a href="https://fedi.larlet.fr/@david/111703611010197838"  data-link-domain="fedi.larlet.fr">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
+<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
+<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
+<hr />
+
+<blockquote>
+<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
+<p><cite><em><a href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"  data-link-domain="blog.professeurjoachim.com">Ma page /now (ou plutôt /en-ce-moment)</a> [<a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com"  href="https://larlet.com/">profil pro</a>.</p>
+
+<blockquote lang="en">
+<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
+<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
+<p><cite><em><a data-link-domain="frantic.im"  href="https://frantic.im/opening-mail/">Opening Mail</a> [<a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">archive</a>]</em></cite></p>
+</blockquote>
+<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
+<hr />
+<p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>
+
+    
+  
     <h2>
       <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
     </h2>
 <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
 <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
 <ul>
-<li><a href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
-<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
-<li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
-<li><a href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
+<li><a data-link-domain="piccalil.li"  href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
+<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/"  data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
+<li><a href="https://github.com/jensimmons/cssremedy"  data-link-domain="github.com">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
+<li><a href="https://jgthms.com/minireset.css/"  data-link-domain="jgthms.com">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
 </ul>
-<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
+<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com"  href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com"  href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
 <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
-<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
+<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/"  data-link-domain="quaternum.net">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>]&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr"  href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
 <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
 <hr />
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train"  data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />
     </a>
     <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
 </figure>
-<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
+<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/"  data-link-domain="velvetyne.fr">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
 <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>
 
     

david/2024/web/index.html

     </h2>
     
       
-<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
-<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
+<p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a href="https://mbtype.com/fonts/century-supra/"  data-link-domain="mbtype.com">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com"  href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
+<p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi"  href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
 <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
 <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
 <hr />
 <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p>
 <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p>
 <ul>
-<li><a href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
-<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
-<li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
-<li><a href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
+<li><a data-link-domain="piccalil.li"  href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li>
+<li><a href="https://www.joshwcomeau.com/css/custom-css-reset/"  data-link-domain="joshwcomeau.com">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li>
+<li><a href="https://github.com/jensimmons/cssremedy"  data-link-domain="github.com">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li>
+<li><a href="https://jgthms.com/minireset.css/"  data-link-domain="jgthms.com">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li>
 </ul>
-<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
+<p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a data-link-domain="caniuse.com"  href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a data-link-domain="css-tricks.com"  href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p>
 <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p>
-<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
+<p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/"  data-link-domain="quaternum.net">coucou Antoine</a> [<a href="/david/cache/2024/55477786fc56b6fc37bb97231b634d90/" title="Copie locale au 2024-01-07">archive</a>]&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a data-link-domain="code.larlet.fr"  href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p>
 <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p>
 <hr />
 
 <blockquote>
 <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p>
-<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em> par&nbsp;Karl</cite></p>
+<p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train"  data-link-domain="la-grange.net">notes</a> [<a href="/david/cache/2024/9bc04d41d25fc73391116d99b7259a3d/" title="Copie locale au 2024-01-07">archive</a>]</em>, Karl</cite></p>
 </blockquote>
 <p>🧡</p>
 <hr />
     </a>
     <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption>
 </figure>
-<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
+<p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/"  data-link-domain="velvetyne.fr">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p>
 <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p>
 
     

david/index.html

     <p>Liste des publications récentes en ordre anté-chronologique :</p>
     <nav>
       <p>
+        <a href="/david/2024/01/08/">Liens</a>,
         <a href="/david/2024/01/07/">Dons</a>,
         <a href="/david/2024/01/06/">Objectif</a>,
         <a href="/david/2024/01/05/">Vocabulaire</a>,
         <a href="/david/2023/equipe/" rel="tag">#équipe (1)</a>,
         <a href="/david/2023/experience/" rel="tag">#expérience (2)</a>,
         <a href="/david/2023/fediverse/" rel="tag">#fédiverse (1)</a>,
-        <a href="/david/2023/processus/" rel="tag">#processus (1)</a>,
+        <a href="/david/2023/processus/" rel="tag">#processus (2)</a>,
         <a href="/david/2023/protopie/" rel="tag">#protopie (1)</a>,
+        <a href="/david/2023/solastalgia/" rel="tag">#solastalgia (1)</a>,
         <a href="/david/2023/sport/" rel="tag">#sport (1)</a>,
-        <a href="/david/2023/technique/" rel="tag">#technique (1)</a>,
+        <a href="/david/2023/technique/" rel="tag">#technique (2)</a>,
         <a href="/david/2023/web/" rel="tag">#web (2)</a>.
           
         

david/log/index.xml

     <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
     <link href="https://larlet.fr/david/log/" rel="self" />
     <id>https://larlet.fr/david/</id>
-    <updated>2024-01-07T12:00:00+01:00</updated>
+    <updated>2024-01-08T12:00:00+01:00</updated>
     <author>
         <name>David Larlet</name>
         <uri>https://larlet.fr/david/</uri>
     </author>
     <rights>Copyright (c) 2004-2024, David Larlet</rights>
     
+        <entry xml:lang="fr">
+            <title type="html">Liens</title>
+            <link href="https://larlet.fr/david/2024/01/08/" rel="alternate" type="text/html" />
+            <updated>2024-01-08T12:00:00+01:00</updated>
+            <id>https://larlet.fr/david/2024/01/08/</id>
+            <summary type="html">
+&lt;p&gt;Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de &lt;a href=&quot;https://mistune.lepture.com/en/latest/&quot;&gt;mistune&lt;/a&gt; et je m’en sers ensuite en CSS pour l’afficher&amp;nbsp;dynamiquement&amp;nbsp;:&lt;/p&gt;
+&lt;pre&gt;&lt;code&gt;a[data-link-domain]::after {
+  content: &amp;quot; [&amp;quot; attr(data-link-domain) &amp;quot;]&amp;quot;;
+  font-size: smaller;
+  color: var(--link-color-domain);
+}
+&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&amp;nbsp;domaine&amp;nbsp;:&lt;/p&gt;
+&lt;pre&gt;&lt;code&gt;a {
+  text-decoration-skip-ink: auto;
+  text-decoration-thickness: calc(var(--fluid-0) / 10);
+  position: relative;
+}
+a::before {
+  content: &#x27;&#x27;;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: -1px;
+  height: calc(var(--fluid-0) / 10);
+  background: linear-gradient(
+    to right, 
+    var(--link-color), 
+    var(--link-color-domain)
+  );
+}
+&lt;/code&gt;&lt;/pre&gt;
+&lt;p&gt;Mais au final je jette car je perds la partie &lt;code&gt;skip-ink&lt;/code&gt; que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&amp;nbsp;accessibilité.&lt;/p&gt;
+&lt;p&gt;Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre &lt;em&gt;Web Component&lt;/em&gt; dédié. En suivant les recommandations &lt;a href=&quot;https://fedi.larlet.fr/@david/111703611010197838&quot;&gt;sur masto&lt;/a&gt;, je les nomme &lt;code&gt;archive&lt;/code&gt; pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&amp;nbsp;tard.&lt;/p&gt;
+&lt;p&gt;Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&amp;nbsp;durée.&lt;/p&gt;
+&lt;p&gt;Chaque lien distant prend une longueur non négligeable suite à ces deux&amp;nbsp;ajouts&amp;nbsp;🤔.&lt;/p&gt;
+&lt;hr /&gt;
+
+&lt;blockquote&gt;
+&lt;p&gt;Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&amp;nbsp;blog”.&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment&quot;&gt;Ma page /now (ou plutôt&amp;nbsp;/en-ce-moment)&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon &lt;a href=&quot;https://larlet.com/&quot;&gt;profil pro&lt;/a&gt;.&lt;/p&gt;
+
+&lt;blockquote lang=&quot;en&quot;&gt;
+&lt;p&gt;I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but &lt;mark&gt;they like building their own blog engine to make blogging more pleasant&lt;/mark&gt; (I’m very guilty of this&amp;nbsp;too).&lt;/p&gt;
+&lt;p&gt;Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&amp;nbsp;change”.&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://frantic.im/opening-mail/&quot;&gt;Opening&amp;nbsp;Mail&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
+&lt;/blockquote&gt;
+&lt;p&gt;Note&amp;nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&amp;nbsp;articles.&lt;/p&gt;
+&lt;hr /&gt;
+&lt;p&gt;L’hiver commence maintenant le 7&amp;nbsp;janvier à Montréal. Phénomène météorologique exceptionnel &lt;em&gt;et&lt;/em&gt; tendance&amp;nbsp;climatique.&lt;/p&gt;
+&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/processus/&quot;&gt;#processus&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/solastalgia/&quot;&gt;#solastalgia&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
+        </entry>
+    
         <entry xml:lang="fr">
             <title type="html">Dons</title>
             <link href="https://larlet.fr/david/2024/01/07/" rel="alternate" type="text/html" />
 &lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://piaille.fr/@mattisg/111652988498506725&quot;&gt;@mattisg@piaille.fr&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&amp;nbsp;personnel.&lt;/p&gt;
-&lt;p&gt;Une forme d’impôt volontaire qui ne termine pas / &lt;a href=&quot;https://larlet.fr/david/2024/01/01/&quot; title=&quot;Dryear(s)&quot;&gt;plus&lt;/a&gt; à la &lt;a href=&quot;https://www.saq.com/&quot;&gt;SAQ&lt;/a&gt;.&lt;/p&gt;
+&lt;p&gt;Une forme d’impôt volontaire qui ne termine pas / &lt;a href=&quot;https://larlet.fr/david/2024/01/01/&quot;&gt;plus&lt;/a&gt; à la &lt;a href=&quot;https://www.saq.com/&quot;&gt;SAQ&lt;/a&gt;.&lt;/p&gt;
 &lt;hr /&gt;
 &lt;p&gt;Pensée (genrée) du jour&amp;nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&amp;nbsp;cuisine.&lt;/p&gt;
 &lt;p&gt;Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&amp;nbsp;déguisée.&lt;/p&gt;
 
 &lt;blockquote&gt;
 &lt;p&gt;Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&amp;nbsp;rêves.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/07/10/notes-train&quot;&gt;notes&lt;/a&gt;&lt;/em&gt; par&amp;nbsp;Karl&lt;/cite&gt;&lt;/p&gt;
+&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/07/10/notes-train&quot;&gt;notes&lt;/a&gt;&lt;/em&gt;, Karl&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;p&gt;🧡&lt;/p&gt;
 &lt;hr /&gt;

david/recherche/index.html

     </template>
     
     <script id="search-index" type="application/json">[
+  {
+    "title": "Liens",
+    "url": "/david/2024/01/08/",
+    "date": "2024-01-08",
+    "content": "Je d\u00e9cide de tester d\u2019ajouter le domaine du lien apr\u00e8s la lien, j\u2019ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python gr\u00e2ce \u00e0 la flexibilit\u00e9 de mistune et je m\u2019en sers ensuite en CSS pour l\u2019afficher\u00a0dynamiquement\u00a0: a[data-link-domain]::after { content: \" [\" attr(data-link-domain) \"]\"; font-size: smaller; color: var(--link-color-domain); } Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal \u00e0 celle du\u00a0domaine\u00a0: a { text-decoration-skip-ink: auto; text-decoration-thickness: calc(var(--fluid-0) / 10); position: relative; } a::before { content:   ; width: 100%; position: absolute; left: 0; bottom: -1px; height: calc(var(--fluid-0) / 10); background: linear-gradient( to right, var(--link-color), var(--link-color-domain) ); } Mais au final je jette car je perds la partie skip-ink que je trouve chouette comme \u00e9volution de rendu possible. Toujours cet \u00e9quilibre complexit\u00e9 / exp\u00e9rience /\u00a0accessibilit\u00e9. Plus tard, je commence l\u2019impl\u00e9mentation de l\u2019archivage des liens distants. J\u2019ai pas mal d\u2019id\u00e9es mais je sais qu\u2019il ne faut pas que je prenne trop de retard dans la r\u00e9cup\u00e9ration sinon je ne vais pas avoir l\u2019\u00e9nergie pour reprendre l\u2019historique. Ce sera probablement l\u2019occasion de faire un autre Web Component d\u00e9di\u00e9. En suivant les recommandations sur masto, je les nomme archive pour le moment et je conserve la date de r\u00e9cup\u00e9ration de l\u2019article car c\u2019est une information importante. J\u2019adapterai le style plus\u00a0tard. Il faut que j\u2019am\u00e9liore cette automatisation car c\u2019est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi r\u00e9duire le nombre de liens que j\u2019archive, les sources techniques ont probablement moins d\u2019int\u00e9r\u00eat dans la\u00a0dur\u00e9e. Chaque lien distant prend une longueur non n\u00e9gligeable suite \u00e0 ces deux\u00a0ajouts\u00a0\ud83e\udd14. Ce billet illustre la loi qui dit \u201cMoins un blog est mis \u00e0 jour, plus il y a de probabilit\u00e9 que ce qui y est publi\u00e9 a pour sujet les aspects techniques dudit\u00a0blog\u201d. Ma page /now (ou plut\u00f4t\u00a0/en-ce-moment) J\u2019ai ri. Je n\u2019ai jamais fait une telle page car je sais que je n\u2019arriverais pas \u00e0 la maintenir \u00e0 jour. Je gal\u00e8re d\u00e9j\u00e0 avec mon profil pro. I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but they like building their own blog engine to make blogging more pleasant (I\u2019m very guilty of this\u00a0too). Kent Beck nailed it: \u201cfor each desired change, make the change easy (warning: this may be hard), then make the easy\u00a0change\u201d. Opening\u00a0Mail Note\u00a0: cette ann\u00e9e, je ne ferai aucun lien vers \ud835\udd4f (twitter.com) depuis mes\u00a0articles. L\u2019hiver commence maintenant le 7\u00a0janvier \u00e0 Montr\u00e9al. Ph\u00e9nom\u00e8ne m\u00e9t\u00e9orologique exceptionnel et tendance\u00a0climatique."
+  },
   {
     "title": "Dons",
     "url": "/david/2024/01/07/",
     "title": "Fondations",
     "url": "/david/2024/01/02/",
     "date": "2024-01-02",
-    "content": "Tellement de choses sont dor\u00e9navant possibles en CSS, je suis submerg\u00e9 par l\u2019ampleur de la t\u00e2che. J\u2019ai envie d\u2019essayer trop de choses\u00a0: des grids, des layers, des fonctionnalit\u00e9s avanc\u00e9es de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j\u2019ai un peu d\u00e9laiss\u00e9 cet aspect au fil du\u00a0temps. Je commence par regarder \u00e0 quoi ressemble une page nue avec la pr\u00e9c\u00e9dente s\u00e9mantique HTML. Ce n\u2019est pas si mal mais les ic\u00f4nes en SVG pourraient avoir des dimensions plus appropri\u00e9es. Je les retire, il est temps de gagner en l\u00e9g\u00e8ret\u00e9. Je regarde \u00e0 quoi ressemblent des reset\u00a0modernes\u00a0: A (more) Modern CSS Reset par Andy\u00a0Bell\u202f; My Custom CSS Reset par Josh W. Comeau\u202f; CSS Remedy par Jen Simmons et Miriam\u00a0Suzanne\u202f; A tiny modern CSS reset par Jeremy\u00a0Thomas. J\u2019aimerais commencer ma CSS par @layer reset mais c\u2019est sur du Baseline\u2122 2022. Toujours cette tension entre jouer avec les nouveaut\u00e9s sans exclure pour autant une partie de l\u2019auditoire potentiel. Au pire, cette page nue est consultable et le flux devrait \u00eatre support\u00e9 partout. Peut-\u00eatre que je n\u2019ai pas besoin d\u2019avoir des CSS layers mais quand je fais une refonte de cet espace je ne suis pas que sur le besoin. J\u2019obtiens un reset que j\u2019imagine fonctionnel mais il est un peu frustrant d\u2019arriver \u00e0 un r\u00e9sultat finalement moins lisible que ce que j\u2019avais sans aucun styles. Commencer par d\u00e9construire pour reconstruire est probablement l\u2019un des maux de notre culture. Ne pas accepter qu\u2019il puisse exister quelque chose de suffisant sur lequel s\u2019appuyer. Une attitude de\u00a0colon. Je finis par tout jeter / r\u00e9-interroger et je m\u2019en sors avec\u00a06\u00a0r\u00e8gles. J\u2019ai besoin de voir mon texte en action pour pouvoir le travailler. Qu\u2019il passe de lisible \u00e0 enviable, que sa fabrique \u2014\u00a0coucou Antoine\u00a0\u2014 fasse partie int\u00e9grante de sa cr\u00e9ation+diffusion. C\u2019est le texte que je suis en train d\u2019\u00e9crire qui est le mod\u00e8le. Je commence par adoucir les contrastes et \u00e0 centrer quelques \u00e9l\u00e9ments. Puis j\u2019applique cette astuce pour avoir des citations \u00e0 fond perdu tout en centrant le texte de l\u2019article. J\u2019ai envie de leur donner la place qu\u2019elles m\u00e9ritent dans mes\u00a0publications. Je suis satisfait de mon r\u00e9sultat tr\u00e8s minimaliste du\u00a0jour. Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L\u2019ennui permet l\u2019\u00e9tincelle des r\u00eaveries, tout comme la nuit la profondeur des\u00a0r\u00eaves. notes par\u00a0Karl \ud83e\udde1 Plus tard, je me rends compte en voulant faire les choses proprement que j\u2019avais d\u00e9j\u00e0 fait des essais il y a un peu plus d\u2019un\u00a0an\u00a0: <a href=\"/static/david/2024/2024-01-02-ancien-essai.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-01-02-ancien-essai.png\" width=\"2488\" height=\"1486\" srcset=\"/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w\" sizes=\"min(100vw, calc(100vh * 2488 / 1486))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de l\u2019essai\"> Capture d\u2019\u00e9cran de\u00a0l\u2019essai. Je ne sais pas trop quoi en penser, c\u2019est toujours marrant de retrouver de vieilles tentatives. De m\u00e9moire, c\u2019\u00e9tait d\u00e9j\u00e0 plus pour m\u2019amuser avec les layers qu\u2019une refonte s\u00e9rieuse (et cette typo\u00a0\ud83d\ude31 (Bizmeud, en retraite)). Il n\u2019est pas exclus que les essais actuels finissent \u00e9galement \u00e0 la\u00a0poubelle. Tiens, est-ce que j\u2019arrive \u00e0 faire d\u00e9border l\u2019image du flux aussi\u202f? Oui, et \u00e7a ouvre des perspectives d\u2019agencements photographiques \u00e0\u00a0explorer\u2026"
+    "content": "Tellement de choses sont dor\u00e9navant possibles en CSS, je suis submerg\u00e9 par l\u2019ampleur de la t\u00e2che. J\u2019ai envie d\u2019essayer trop de choses\u00a0: des grids, des layers, des fonctionnalit\u00e9s avanc\u00e9es de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j\u2019ai un peu d\u00e9laiss\u00e9 cet aspect au fil du\u00a0temps. Je commence par regarder \u00e0 quoi ressemble une page nue avec la pr\u00e9c\u00e9dente s\u00e9mantique HTML. Ce n\u2019est pas si mal mais les ic\u00f4nes en SVG pourraient avoir des dimensions plus appropri\u00e9es. Je les retire, il est temps de gagner en l\u00e9g\u00e8ret\u00e9. Je regarde \u00e0 quoi ressemblent des reset\u00a0modernes\u00a0: A (more) Modern CSS Reset par Andy\u00a0Bell\u202f; My Custom CSS Reset par Josh W. Comeau\u202f; CSS Remedy par Jen Simmons et Miriam\u00a0Suzanne\u202f; A tiny modern CSS reset par Jeremy\u00a0Thomas. J\u2019aimerais commencer ma CSS par @layer reset mais c\u2019est sur du Baseline\u2122 2022. Toujours cette tension entre jouer avec les nouveaut\u00e9s sans exclure pour autant une partie de l\u2019auditoire potentiel. Au pire, cette page nue est consultable et le flux devrait \u00eatre support\u00e9 partout. Peut-\u00eatre que je n\u2019ai pas besoin d\u2019avoir des CSS layers mais quand je fais une refonte de cet espace je ne suis pas que sur le besoin. J\u2019obtiens un reset que j\u2019imagine fonctionnel mais il est un peu frustrant d\u2019arriver \u00e0 un r\u00e9sultat finalement moins lisible que ce que j\u2019avais sans aucun styles. Commencer par d\u00e9construire pour reconstruire est probablement l\u2019un des maux de notre culture. Ne pas accepter qu\u2019il puisse exister quelque chose de suffisant sur lequel s\u2019appuyer. Une attitude de\u00a0colon. Je finis par tout jeter / r\u00e9-interroger et je m\u2019en sors avec\u00a06\u00a0r\u00e8gles. J\u2019ai besoin de voir mon texte en action pour pouvoir le travailler. Qu\u2019il passe de lisible \u00e0 enviable, que sa fabrique \u2014\u00a0coucou Antoine\u00a0\u2014 fasse partie int\u00e9grante de sa cr\u00e9ation+diffusion. C\u2019est le texte que je suis en train d\u2019\u00e9crire qui est le mod\u00e8le. Je commence par adoucir les contrastes et \u00e0 centrer quelques \u00e9l\u00e9ments. Puis j\u2019applique cette astuce pour avoir des citations \u00e0 fond perdu tout en centrant le texte de l\u2019article. J\u2019ai envie de leur donner la place qu\u2019elles m\u00e9ritent dans mes\u00a0publications. Je suis satisfait de mon r\u00e9sultat tr\u00e8s minimaliste du\u00a0jour. Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L\u2019ennui permet l\u2019\u00e9tincelle des r\u00eaveries, tout comme la nuit la profondeur des\u00a0r\u00eaves. notes, Karl \ud83e\udde1 Plus tard, je me rends compte en voulant faire les choses proprement que j\u2019avais d\u00e9j\u00e0 fait des essais il y a un peu plus d\u2019un\u00a0an\u00a0: <a href=\"/static/david/2024/2024-01-02-ancien-essai.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-01-02-ancien-essai.png\" width=\"2488\" height=\"1486\" srcset=\"/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w\" sizes=\"min(100vw, calc(100vh * 2488 / 1486))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de l\u2019essai\"> Capture d\u2019\u00e9cran de\u00a0l\u2019essai. Je ne sais pas trop quoi en penser, c\u2019est toujours marrant de retrouver de vieilles tentatives. De m\u00e9moire, c\u2019\u00e9tait d\u00e9j\u00e0 plus pour m\u2019amuser avec les layers qu\u2019une refonte s\u00e9rieuse (et cette typo\u00a0\ud83d\ude31 (Bizmeud, en retraite)). Il n\u2019est pas exclus que les essais actuels finissent \u00e9galement \u00e0 la\u00a0poubelle. Tiens, est-ce que j\u2019arrive \u00e0 faire d\u00e9border l\u2019image du flux aussi\u202f? Oui, et \u00e7a ouvre des perspectives d\u2019agencements photographiques \u00e0\u00a0explorer\u2026"
   },
   {
     "title": "Dryear(s)",
     "date": "2024-01-01",
     "content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
   },
+  {
+    "title": "Liens",
+    "url": "/david/2024/01/08/",
+    "date": "2024-01-08",
+    "content": "Je d\u00e9cide de tester d\u2019ajouter le domaine du lien apr\u00e8s la lien, j\u2019ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python gr\u00e2ce \u00e0 la flexibilit\u00e9 de mistune et je m\u2019en sers ensuite en CSS pour l\u2019afficher\u00a0dynamiquement\u00a0: a[data-link-domain]::after { content: \" [\" attr(data-link-domain) \"]\"; font-size: smaller; color: var(--link-color-domain); } Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal \u00e0 celle du\u00a0domaine\u00a0: a { text-decoration-skip-ink: auto; text-decoration-thickness: calc(var(--fluid-0) / 10); position: relative; } a::before { content:   ; width: 100%; position: absolute; left: 0; bottom: -1px; height: calc(var(--fluid-0) / 10); background: linear-gradient( to right, var(--link-color), var(--link-color-domain) ); } Mais au final je jette car je perds la partie skip-ink que je trouve chouette comme \u00e9volution de rendu possible. Toujours cet \u00e9quilibre complexit\u00e9 / exp\u00e9rience /\u00a0accessibilit\u00e9. Plus tard, je commence l\u2019impl\u00e9mentation de l\u2019archivage des liens distants. J\u2019ai pas mal d\u2019id\u00e9es mais je sais qu\u2019il ne faut pas que je prenne trop de retard dans la r\u00e9cup\u00e9ration sinon je ne vais pas avoir l\u2019\u00e9nergie pour reprendre l\u2019historique. Ce sera probablement l\u2019occasion de faire un autre Web Component d\u00e9di\u00e9. En suivant les recommandations sur masto, je les nomme archive pour le moment et je conserve la date de r\u00e9cup\u00e9ration de l\u2019article car c\u2019est une information importante. J\u2019adapterai le style plus\u00a0tard. Il faut que j\u2019am\u00e9liore cette automatisation car c\u2019est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi r\u00e9duire le nombre de liens que j\u2019archive, les sources techniques ont probablement moins d\u2019int\u00e9r\u00eat dans la\u00a0dur\u00e9e. Chaque lien distant prend une longueur non n\u00e9gligeable suite \u00e0 ces deux\u00a0ajouts\u00a0\ud83e\udd14. Ce billet illustre la loi qui dit \u201cMoins un blog est mis \u00e0 jour, plus il y a de probabilit\u00e9 que ce qui y est publi\u00e9 a pour sujet les aspects techniques dudit\u00a0blog\u201d. Ma page /now (ou plut\u00f4t\u00a0/en-ce-moment) J\u2019ai ri. Je n\u2019ai jamais fait une telle page car je sais que je n\u2019arriverais pas \u00e0 la maintenir \u00e0 jour. Je gal\u00e8re d\u00e9j\u00e0 avec mon profil pro. I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but they like building their own blog engine to make blogging more pleasant (I\u2019m very guilty of this\u00a0too). Kent Beck nailed it: \u201cfor each desired change, make the change easy (warning: this may be hard), then make the easy\u00a0change\u201d. Opening\u00a0Mail Note\u00a0: cette ann\u00e9e, je ne ferai aucun lien vers \ud835\udd4f (twitter.com) depuis mes\u00a0articles. L\u2019hiver commence maintenant le 7\u00a0janvier \u00e0 Montr\u00e9al. Ph\u00e9nom\u00e8ne m\u00e9t\u00e9orologique exceptionnel et tendance\u00a0climatique."
+  },
   {
     "title": "Dons",
     "url": "/david/2024/01/07/",
     "title": "Fondations",
     "url": "/david/2024/01/02/",
     "date": "2024-01-02",
-    "content": "Tellement de choses sont dor\u00e9navant possibles en CSS, je suis submerg\u00e9 par l\u2019ampleur de la t\u00e2che. J\u2019ai envie d\u2019essayer trop de choses\u00a0: des grids, des layers, des fonctionnalit\u00e9s avanc\u00e9es de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j\u2019ai un peu d\u00e9laiss\u00e9 cet aspect au fil du\u00a0temps. Je commence par regarder \u00e0 quoi ressemble une page nue avec la pr\u00e9c\u00e9dente s\u00e9mantique HTML. Ce n\u2019est pas si mal mais les ic\u00f4nes en SVG pourraient avoir des dimensions plus appropri\u00e9es. Je les retire, il est temps de gagner en l\u00e9g\u00e8ret\u00e9. Je regarde \u00e0 quoi ressemblent des reset\u00a0modernes\u00a0: A (more) Modern CSS Reset par Andy\u00a0Bell\u202f; My Custom CSS Reset par Josh W. Comeau\u202f; CSS Remedy par Jen Simmons et Miriam\u00a0Suzanne\u202f; A tiny modern CSS reset par Jeremy\u00a0Thomas. J\u2019aimerais commencer ma CSS par @layer reset mais c\u2019est sur du Baseline\u2122 2022. Toujours cette tension entre jouer avec les nouveaut\u00e9s sans exclure pour autant une partie de l\u2019auditoire potentiel. Au pire, cette page nue est consultable et le flux devrait \u00eatre support\u00e9 partout. Peut-\u00eatre que je n\u2019ai pas besoin d\u2019avoir des CSS layers mais quand je fais une refonte de cet espace je ne suis pas que sur le besoin. J\u2019obtiens un reset que j\u2019imagine fonctionnel mais il est un peu frustrant d\u2019arriver \u00e0 un r\u00e9sultat finalement moins lisible que ce que j\u2019avais sans aucun styles. Commencer par d\u00e9construire pour reconstruire est probablement l\u2019un des maux de notre culture. Ne pas accepter qu\u2019il puisse exister quelque chose de suffisant sur lequel s\u2019appuyer. Une attitude de\u00a0colon. Je finis par tout jeter / r\u00e9-interroger et je m\u2019en sors avec\u00a06\u00a0r\u00e8gles. J\u2019ai besoin de voir mon texte en action pour pouvoir le travailler. Qu\u2019il passe de lisible \u00e0 enviable, que sa fabrique \u2014\u00a0coucou Antoine\u00a0\u2014 fasse partie int\u00e9grante de sa cr\u00e9ation+diffusion. C\u2019est le texte que je suis en train d\u2019\u00e9crire qui est le mod\u00e8le. Je commence par adoucir les contrastes et \u00e0 centrer quelques \u00e9l\u00e9ments. Puis j\u2019applique cette astuce pour avoir des citations \u00e0 fond perdu tout en centrant le texte de l\u2019article. J\u2019ai envie de leur donner la place qu\u2019elles m\u00e9ritent dans mes\u00a0publications. Je suis satisfait de mon r\u00e9sultat tr\u00e8s minimaliste du\u00a0jour. Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L\u2019ennui permet l\u2019\u00e9tincelle des r\u00eaveries, tout comme la nuit la profondeur des\u00a0r\u00eaves. notes par\u00a0Karl \ud83e\udde1 Plus tard, je me rends compte en voulant faire les choses proprement que j\u2019avais d\u00e9j\u00e0 fait des essais il y a un peu plus d\u2019un\u00a0an\u00a0: <a href=\"/static/david/2024/2024-01-02-ancien-essai.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-01-02-ancien-essai.png\" width=\"2488\" height=\"1486\" srcset=\"/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w\" sizes=\"min(100vw, calc(100vh * 2488 / 1486))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de l\u2019essai\"> Capture d\u2019\u00e9cran de\u00a0l\u2019essai. Je ne sais pas trop quoi en penser, c\u2019est toujours marrant de retrouver de vieilles tentatives. De m\u00e9moire, c\u2019\u00e9tait d\u00e9j\u00e0 plus pour m\u2019amuser avec les layers qu\u2019une refonte s\u00e9rieuse (et cette typo\u00a0\ud83d\ude31 (Bizmeud, en retraite)). Il n\u2019est pas exclus que les essais actuels finissent \u00e9galement \u00e0 la\u00a0poubelle. Tiens, est-ce que j\u2019arrive \u00e0 faire d\u00e9border l\u2019image du flux aussi\u202f? Oui, et \u00e7a ouvre des perspectives d\u2019agencements photographiques \u00e0\u00a0explorer\u2026"
+    "content": "Tellement de choses sont dor\u00e9navant possibles en CSS, je suis submerg\u00e9 par l\u2019ampleur de la t\u00e2che. J\u2019ai envie d\u2019essayer trop de choses\u00a0: des grids, des layers, des fonctionnalit\u00e9s avanc\u00e9es de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j\u2019ai un peu d\u00e9laiss\u00e9 cet aspect au fil du\u00a0temps. Je commence par regarder \u00e0 quoi ressemble une page nue avec la pr\u00e9c\u00e9dente s\u00e9mantique HTML. Ce n\u2019est pas si mal mais les ic\u00f4nes en SVG pourraient avoir des dimensions plus appropri\u00e9es. Je les retire, il est temps de gagner en l\u00e9g\u00e8ret\u00e9. Je regarde \u00e0 quoi ressemblent des reset\u00a0modernes\u00a0: A (more) Modern CSS Reset par Andy\u00a0Bell\u202f; My Custom CSS Reset par Josh W. Comeau\u202f; CSS Remedy par Jen Simmons et Miriam\u00a0Suzanne\u202f; A tiny modern CSS reset par Jeremy\u00a0Thomas. J\u2019aimerais commencer ma CSS par @layer reset mais c\u2019est sur du Baseline\u2122 2022. Toujours cette tension entre jouer avec les nouveaut\u00e9s sans exclure pour autant une partie de l\u2019auditoire potentiel. Au pire, cette page nue est consultable et le flux devrait \u00eatre support\u00e9 partout. Peut-\u00eatre que je n\u2019ai pas besoin d\u2019avoir des CSS layers mais quand je fais une refonte de cet espace je ne suis pas que sur le besoin. J\u2019obtiens un reset que j\u2019imagine fonctionnel mais il est un peu frustrant d\u2019arriver \u00e0 un r\u00e9sultat finalement moins lisible que ce que j\u2019avais sans aucun styles. Commencer par d\u00e9construire pour reconstruire est probablement l\u2019un des maux de notre culture. Ne pas accepter qu\u2019il puisse exister quelque chose de suffisant sur lequel s\u2019appuyer. Une attitude de\u00a0colon. Je finis par tout jeter / r\u00e9-interroger et je m\u2019en sors avec\u00a06\u00a0r\u00e8gles. J\u2019ai besoin de voir mon texte en action pour pouvoir le travailler. Qu\u2019il passe de lisible \u00e0 enviable, que sa fabrique \u2014\u00a0coucou Antoine\u00a0\u2014 fasse partie int\u00e9grante de sa cr\u00e9ation+diffusion. C\u2019est le texte que je suis en train d\u2019\u00e9crire qui est le mod\u00e8le. Je commence par adoucir les contrastes et \u00e0 centrer quelques \u00e9l\u00e9ments. Puis j\u2019applique cette astuce pour avoir des citations \u00e0 fond perdu tout en centrant le texte de l\u2019article. J\u2019ai envie de leur donner la place qu\u2019elles m\u00e9ritent dans mes\u00a0publications. Je suis satisfait de mon r\u00e9sultat tr\u00e8s minimaliste du\u00a0jour. Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L\u2019ennui permet l\u2019\u00e9tincelle des r\u00eaveries, tout comme la nuit la profondeur des\u00a0r\u00eaves. notes, Karl \ud83e\udde1 Plus tard, je me rends compte en voulant faire les choses proprement que j\u2019avais d\u00e9j\u00e0 fait des essais il y a un peu plus d\u2019un\u00a0an\u00a0: <a href=\"/static/david/2024/2024-01-02-ancien-essai.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-01-02-ancien-essai.png\" width=\"2488\" height=\"1486\" srcset=\"/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w\" sizes=\"min(100vw, calc(100vh * 2488 / 1486))\" loading=\"lazy\" decoding=\"async\" alt=\"Capture d\u2019\u00e9cran de l\u2019essai\"> Capture d\u2019\u00e9cran de\u00a0l\u2019essai. Je ne sais pas trop quoi en penser, c\u2019est toujours marrant de retrouver de vieilles tentatives. De m\u00e9moire, c\u2019\u00e9tait d\u00e9j\u00e0 plus pour m\u2019amuser avec les layers qu\u2019une refonte s\u00e9rieuse (et cette typo\u00a0\ud83d\ude31 (Bizmeud, en retraite)). Il n\u2019est pas exclus que les essais actuels finissent \u00e9galement \u00e0 la\u00a0poubelle. Tiens, est-ce que j\u2019arrive \u00e0 faire d\u00e9border l\u2019image du flux aussi\u202f? Oui, et \u00e7a ouvre des perspectives d\u2019agencements photographiques \u00e0\u00a0explorer\u2026"
   },
   {
     "title": "Dryear(s)",

david/templates/base_2024.html

   https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
   <meta name="robots" content="noai, noimageai">
   <!-- Documented, feel free to shoot an email. -->
-  <link rel="stylesheet" href="/static/david/css/style_2024-01-06.css">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-07.css">
   <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
   <link rel="preload"
         href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"

site.py

 #!/usr/bin/env python3
+import hashlib
 import json
 import locale
-import pickle
 import time
 from collections import defaultdict
 from dataclasses import dataclass
 from string import Template
 from textwrap import dedent
 from time import perf_counter
+from urllib.parse import urlparse
 
 import feedparser
 import mistune
         return typographie(super().block_html(html), html=True)
 
 
-class InternalLinkTitleRenderer(mistune.HTMLRenderer):
-    """Automatically generate the title for internal links."""
+class CustomLinkAttributesRenderer(mistune.HTMLRenderer):
+    """Automatically generate the title for internal links.
+
+    Also, set the domain as a data-attribute for a remote link.
+    Also, add an archive link if it exists.
+    Also, split that.
+    """
 
     def link(self, text, url, title=None):
-        s = '<a href="' + self.safe_url(url) + '"'
+        attrs = {}
+        attrs["href"] = self.safe_url(url)
 
         if not title and url.startswith("/david/2024/"):
             # It will not work for internal urls referencing the future.
             page = pages_by_url.get(url)
             if page:
                 title = page.title
+        else:
+            hostname = urlparse(url).hostname
+            if hostname is not None:
+                domain = hostname.lstrip("www.")
+                attrs["data-link-domain"] = domain
 
         if title:
-            s += ' title="' + safe_entity(title) + '"'
-        return s + ">" + text + "</a>"
-
-
-class CustomAndBlockquoteLanguageRenderer(
-    FrenchTypographyRenderer, InternalLinkTitleRenderer, TagsRenderer
-):
+            attrs["title"] = safe_entity(title)
+
+        attributes = {f' {attr}="{value}"' for attr, value in attrs.items()}
+        initial_link = f'<a{" ".join(attributes)}>{text}</a>'
+
+        archive_link = ""
+        hash_url = hashlib.md5(url.encode("utf-8")).hexdigest()
+        archive_folder = (
+            HERE.resolve().parent
+            / "larlet-fr-david-cache"
+            / "cache"
+            / "2024"
+            / hash_url
+        ).resolve()
+        if archive_folder.exists():
+            archive_path_md = archive_folder / "index.md"
+            _, content = archive_path_md.read_text().split("archive_date:", 1)
+            archive_date = content.split("\n", 1)[0].strip()
+            link = f"/david/cache/2024/{hash_url}/"
+            title = f"Copie locale au {archive_date}"
+            archive_link = f' [<a href="{link}" title="{title}">archive</a>]'
+
+        return f"{initial_link}{archive_link}"
+
+
+class CustomAndBlockquoteLanguageRenderer(FrenchTypographyRenderer, TagsRenderer):
     """Sets the English language attribute for blockquotes with `[en]` prefix."""
 
     def _get_language(self, text):
         )
 
 
-class H2AnchorsRenderer(ImgsWithSizesRenderer):
+class H2AnchorsRenderer(CustomLinkAttributesRenderer, ImgsWithSizesRenderer):
     """Custom renderer for H2 titles with anchors."""
 
     def heading(self, text, level):