Tags 2024

david/2023/index.html

@@ -256,47 +256,47 @@
       </svg>
     </h3>
     <p>
-      <a href="/david/2021/accompagnement/" rel="tag">#accompagnement (9)</a>
-      <a href="/david/2021/amadou/" rel="tag">#amadou (1)</a>
-      <a href="/david/2021/attention/" rel="tag">#attention (2)</a>
-      <a href="/david/2021/aventure/" rel="tag">#aventure (13)</a>
-      <a href="/david/2021/complexite/" rel="tag">#complexité (8)</a>
-      <a href="/david/2021/confiance/" rel="tag">#confiance (6)</a>
-      <a href="/david/2021/confidentialite/" rel="tag">#confidentialité (4)</a>
-      <a href="/david/2021/courage/" rel="tag">#courage (7)</a>
-      <a href="/david/2021/decentralisation/" rel="tag">#décentralisation (4)</a>
-      <a href="/david/2021/don/" rel="tag">#don (2)</a>
-      <a href="/david/2021/eau/" rel="tag">#eau (3)</a>
-      <a href="/david/2021/ecriture/" rel="tag">#écriture (5)</a>
-      <a href="/david/2021/foret/" rel="tag">#forêt (11)</a>
-      <a href="/david/2021/gafam/" rel="tag">#gafam (3)</a>
-      <a href="/david/2021/gratitude/" rel="tag">#gratitude (10)</a>
-      <a href="/david/2021/incompetence/" rel="tag">#incompétence (5)</a>
-      <a href="/david/2021/intimite/" rel="tag">#intimité (3)</a>
-      <a href="/david/2021/livre/" rel="tag">#livre (3)</a>
-      <a href="/david/2021/masque/" rel="tag">#masque (1)</a>
-      <a href="/david/2021/mastodon/" rel="tag">#mastodon (1)</a>
-      <a href="/david/2021/nostalgie/" rel="tag">#nostalgie (4)</a>
-      <a href="/david/2021/parentalite/" rel="tag">#parentalité (5)</a>
-      <a href="/david/2021/partage/" rel="tag">#partage (3)</a>
-      <a href="/david/2021/patriarcat/" rel="tag">#patriarcat (1)</a>
-      <a href="/david/2021/photographie/" rel="tag">#photographie (3)</a>
-      <a href="/david/2021/propriete/" rel="tag">#propriété (2)</a>
-      <a href="/david/2021/psychologie/" rel="tag">#psychologie (2)</a>
-      <a href="/david/2021/qualite/" rel="tag">#qualité (4)</a>
-      <a href="/david/2021/recherche/" rel="tag">#recherche (12)</a>
-      <a href="/david/2021/recyclage/" rel="tag">#recyclage (2)</a>
-      <a href="/david/2021/reponse/" rel="tag">#réponse (2)</a>
-      <a href="/david/2021/scopyleft/" rel="tag">#scopyleft (2)</a>
-      <a href="/david/2021/simplicite/" rel="tag">#simplicité (4)</a>
-      <a href="/david/2021/sociologie/" rel="tag">#sociologie (8)</a>
-      <a href="/david/2021/solastalgia/" rel="tag">#solastalgia (4)</a>
-      <a href="/david/2021/sport/" rel="tag">#sport (3)</a>
-      <a href="/david/2021/technique/" rel="tag">#technique (10)</a>
-      <a href="/david/2021/traces/" rel="tag">#traces (6)</a>
-      <a href="/david/2021/tristesse/" rel="tag">#tristesse (6)</a>
-      <a href="/david/2021/viande/" rel="tag">#viande (1)</a>
-      <a href="/david/2021/web/" rel="tag">#web (10)</a>
+      <a href="/david/2023/accompagnement/" rel="tag">#accompagnement (9)</a>
+      <a href="/david/2023/amadou/" rel="tag">#amadou (1)</a>
+      <a href="/david/2023/attention/" rel="tag">#attention (2)</a>
+      <a href="/david/2023/aventure/" rel="tag">#aventure (13)</a>
+      <a href="/david/2023/complexite/" rel="tag">#complexité (8)</a>
+      <a href="/david/2023/confiance/" rel="tag">#confiance (6)</a>
+      <a href="/david/2023/confidentialite/" rel="tag">#confidentialité (4)</a>
+      <a href="/david/2023/courage/" rel="tag">#courage (7)</a>
+      <a href="/david/2023/decentralisation/" rel="tag">#décentralisation (4)</a>
+      <a href="/david/2023/don/" rel="tag">#don (2)</a>
+      <a href="/david/2023/eau/" rel="tag">#eau (3)</a>
+      <a href="/david/2023/ecriture/" rel="tag">#écriture (5)</a>
+      <a href="/david/2023/foret/" rel="tag">#forêt (11)</a>
+      <a href="/david/2023/gafam/" rel="tag">#gafam (3)</a>
+      <a href="/david/2023/gratitude/" rel="tag">#gratitude (10)</a>
+      <a href="/david/2023/incompetence/" rel="tag">#incompétence (5)</a>
+      <a href="/david/2023/intimite/" rel="tag">#intimité (3)</a>
+      <a href="/david/2023/livre/" rel="tag">#livre (3)</a>
+      <a href="/david/2023/masque/" rel="tag">#masque (1)</a>
+      <a href="/david/2023/mastodon/" rel="tag">#mastodon (1)</a>
+      <a href="/david/2023/nostalgie/" rel="tag">#nostalgie (4)</a>
+      <a href="/david/2023/parentalite/" rel="tag">#parentalité (5)</a>
+      <a href="/david/2023/partage/" rel="tag">#partage (3)</a>
+      <a href="/david/2023/patriarcat/" rel="tag">#patriarcat (1)</a>
+      <a href="/david/2023/photographie/" rel="tag">#photographie (3)</a>
+      <a href="/david/2023/propriete/" rel="tag">#propriété (2)</a>
+      <a href="/david/2023/psychologie/" rel="tag">#psychologie (2)</a>
+      <a href="/david/2023/qualite/" rel="tag">#qualité (4)</a>
+      <a href="/david/2023/recherche/" rel="tag">#recherche (12)</a>
+      <a href="/david/2023/recyclage/" rel="tag">#recyclage (2)</a>
+      <a href="/david/2023/reponse/" rel="tag">#réponse (2)</a>
+      <a href="/david/2023/scopyleft/" rel="tag">#scopyleft (2)</a>
+      <a href="/david/2023/simplicite/" rel="tag">#simplicité (4)</a>
+      <a href="/david/2023/sociologie/" rel="tag">#sociologie (8)</a>
+      <a href="/david/2023/solastalgia/" rel="tag">#solastalgia (4)</a>
+      <a href="/david/2023/sport/" rel="tag">#sport (3)</a>
+      <a href="/david/2023/technique/" rel="tag">#technique (10)</a>
+      <a href="/david/2023/traces/" rel="tag">#traces (6)</a>
+      <a href="/david/2023/tristesse/" rel="tag">#tristesse (6)</a>
+      <a href="/david/2023/viande/" rel="tag">#viande (1)</a>
+      <a href="/david/2023/web/" rel="tag">#web (10)</a>
       
     </p>
   
@@ -429,4 +429,4 @@
     </script>
     
   </body>
-</html>
+</html>

david/2024/01/01/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/02/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/03/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/04/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/05/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/06/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/07/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/08/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/09/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/10/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/11/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/12/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/01/13/index.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/2024/accessibilite/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #accessibilité
+    Étiquette #accessibilité
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #accessibilité">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #accessibilité</h1>
+    <hgroup>
+      <h1>#accessibilité</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> (2024-01-09)
+      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time>
     </h2>
     
-      
 <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p>
 <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p>
 <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p>
@@ -160,63 +154,64 @@
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accessibilite/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accessibilité</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</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>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -236,55 +231,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/accompagnement/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #accompagnement
+    Étiquette #accompagnement
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #accompagnement">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #accompagnement</h1>
+    <hgroup>
+      <h1>#accompagnement</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
     </h2>
     
-      
 <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">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>
@@ -156,63 +150,64 @@
 <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accompagnement/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accompagnement</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -232,55 +227,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/addiction/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #addiction
+    Étiquette #addiction
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #addiction">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #addiction</h1>
+    <hgroup>
+      <h1>#addiction</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> (2024-01-06)
+      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> <time datetime="2024-01-06">6 janvier 2024</time>
     </h2>
     
-      
 <p>C’est fou comme le fait de se donner un objectif (sportif) change la donne en terme de motivation. Pour cette année, ce sera la <em>Traversée de Charlevoix</em>. Je vais essayer de documenter le processus de&nbsp;préparation.</p>
 <hr />
 <p>Au détour d’un vieux&nbsp;chalet&nbsp;:</p>
@@ -176,12 +170,31 @@
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> (2024-01-01)
+      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> <time datetime="2024-01-01">1 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>33&#8239;% de 44&nbsp;millions de consommateurs vont faire le Dry January<br />
@@ -209,63 +222,64 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
 <p>Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me&nbsp;retenir.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/protopie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#protopie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -285,55 +299,75 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/apprentissage/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #apprentissage
+    Étiquette #apprentissage
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #apprentissage">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #apprentissage</h1>
+    <hgroup>
+      <h1>#apprentissage</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> (2024-01-10)
+      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
@@ -199,12 +193,31 @@
 <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
+      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
@@ -242,12 +255,31 @@
 <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">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>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/communaute/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#communauté</a>
+          
+            <a href="/david/2024/fediverse/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#fédiverse</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> (2024-01-05)
+      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> <time datetime="2024-01-05">5 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Les tensions et processer les tensions. Essayez de remplacer les termes «&nbsp;problèmes&nbsp;» et «&nbsp;solutions&nbsp;» par «&nbsp;tensions&nbsp;» et «&nbsp;processer&nbsp;». Les êtres humains semblent être enclins de manière innée à attendre la dernière minute pour gérer ce qu’ils perçoivent comme des problèmes. Par conséquent, l’emploi de ce langage «&nbsp;négatif&nbsp;» dans le monde de l’entreprise peut donner naissance à une culture de l’évitement ou de l’inquiétude inutile. Le terme «&nbsp;tension&nbsp;», comme employé en <em>Holacracy</em>, est neutre et signifie simplement <em>la perception d’un écart entre la réalité et ce qu’elle pourrait&nbsp;être.</em></p>
@@ -290,63 +322,64 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
 <p>💚 Quand l’ornithologie fait de la&nbsp;poésie.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/decision/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#décision</a>
+          
+            <a href="/david/2024/equipe/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#équipe</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -366,55 +399,75 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/communaute/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #communauté
+    Étiquette #communauté
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #communauté">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #communauté</h1>
+    <hgroup>
+      <h1>#communauté</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
+      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
@@ -177,63 +171,64 @@
 <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">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>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/communaute/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#communauté</a>
+          
+            <a href="/david/2024/fediverse/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#fédiverse</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -253,55 +248,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/decision/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #décision
+    Étiquette #décision
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #décision">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #décision</h1>
+    <hgroup>
+      <h1>#décision</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> (2024-01-05)
+      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> <time datetime="2024-01-05">5 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Les tensions et processer les tensions. Essayez de remplacer les termes «&nbsp;problèmes&nbsp;» et «&nbsp;solutions&nbsp;» par «&nbsp;tensions&nbsp;» et «&nbsp;processer&nbsp;». Les êtres humains semblent être enclins de manière innée à attendre la dernière minute pour gérer ce qu’ils perçoivent comme des problèmes. Par conséquent, l’emploi de ce langage «&nbsp;négatif&nbsp;» dans le monde de l’entreprise peut donner naissance à une culture de l’évitement ou de l’inquiétude inutile. Le terme «&nbsp;tension&nbsp;», comme employé en <em>Holacracy</em>, est neutre et signifie simplement <em>la perception d’un écart entre la réalité et ce qu’elle pourrait&nbsp;être.</em></p>
@@ -182,63 +176,64 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
 <p>💚 Quand l’ornithologie fait de la&nbsp;poésie.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/decision/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#décision</a>
+          
+            <a href="/david/2024/equipe/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#équipe</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -258,55 +253,75 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/ecriture/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #écriture
+    Étiquette #écriture
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #écriture">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #écriture</h1>
+    <hgroup>
+      <h1>#écriture</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> (2024-01-13)
+      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> <time datetime="2024-01-13">13 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Le <em>wuwei</em>, dans le taoïsme, est d’ailleurs composé de deux idéogrammes&nbsp;: le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par <em>non-agir</em> ou <em>non-intervention</em>, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir <em>ne pas</em> est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être&nbsp;chinois.</p>
@@ -160,12 +154,31 @@
 <p>De plus en plus tenté d’explorer cette piste. Je me <a href="/david/stream/2018/11/13/">souviens</a> <a href="/david/stream/2018/11/25/">avec</a> <a href="/david/stream/2018/11/27/">émotion</a> de ma lecture de <em>Professeur cherche élève ayant désir de sauver le monde</em> par Daniel&nbsp;Quinn.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+            <a href="/david/2024/parvenir/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#parvenir</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> (2024-01-12)
+      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
@@ -205,12 +218,31 @@
 </ul>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/psychologie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#psychologie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> (2024-01-10)
+      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
@@ -270,14 +302,31 @@
 <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
     </h2>
     
-      <details>
-        <summary>Déplier pour lire le contenu de la publication</summary>
-        
 <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">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>
@@ -293,65 +342,65 @@
 <p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense a été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
 <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
 
-      </details>
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accompagnement/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accompagnement</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -371,55 +420,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/equipe/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #équipe
+    Étiquette #équipe
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #équipe">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #équipe</h1>
+    <hgroup>
+      <h1>#équipe</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> (2024-01-05)
+      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> <time datetime="2024-01-05">5 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Les tensions et processer les tensions. Essayez de remplacer les termes «&nbsp;problèmes&nbsp;» et «&nbsp;solutions&nbsp;» par «&nbsp;tensions&nbsp;» et «&nbsp;processer&nbsp;». Les êtres humains semblent être enclins de manière innée à attendre la dernière minute pour gérer ce qu’ils perçoivent comme des problèmes. Par conséquent, l’emploi de ce langage «&nbsp;négatif&nbsp;» dans le monde de l’entreprise peut donner naissance à une culture de l’évitement ou de l’inquiétude inutile. Le terme «&nbsp;tension&nbsp;», comme employé en <em>Holacracy</em>, est neutre et signifie simplement <em>la perception d’un écart entre la réalité et ce qu’elle pourrait&nbsp;être.</em></p>
@@ -182,63 +176,64 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
 <p>💚 Quand l’ornithologie fait de la&nbsp;poésie.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/decision/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#décision</a>
+          
+            <a href="/david/2024/equipe/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#équipe</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -258,55 +253,75 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/evolution/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #évolution
+    Étiquette #évolution
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #évolution">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #évolution</h1>
+    <hgroup>
+      <h1>#évolution</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> (2024-01-11)
+      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
@@ -174,63 +168,64 @@
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/evolution/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#évolution</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -250,55 +245,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/experience/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #expérience
+    Étiquette #expérience
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #expérience">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #expérience</h1>
+    <hgroup>
+      <h1>#expérience</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
+      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> <time datetime="2024-01-02">2 janvier 2024</time>
     </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>
@@ -179,12 +173,31 @@
 <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>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> (2024-01-01)
+      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> <time datetime="2024-01-01">1 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>33&#8239;% de 44&nbsp;millions de consommateurs vont faire le Dry January<br />
@@ -212,63 +225,64 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
 <p>Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me&nbsp;retenir.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/protopie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#protopie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -288,55 +302,75 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/fediverse/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #fédiverse
+    Étiquette #fédiverse
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #fédiverse">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #fédiverse</h1>
+    <hgroup>
+      <h1>#fédiverse</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> (2024-01-07)
+      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
@@ -177,63 +171,64 @@
 <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">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>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/communaute/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#communauté</a>
+          
+            <a href="/david/2024/fediverse/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#fédiverse</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -253,55 +248,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/ia/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #IA
+    Étiquette #IA
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #IA">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #IA</h1>
+    <hgroup>
+      <h1>#IA</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> (2024-01-13)
+      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> <time datetime="2024-01-13">13 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Le <em>wuwei</em>, dans le taoïsme, est d’ailleurs composé de deux idéogrammes&nbsp;: le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par <em>non-agir</em> ou <em>non-intervention</em>, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir <em>ne pas</em> est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être&nbsp;chinois.</p>
@@ -160,12 +154,31 @@
 <p>De plus en plus tenté d’explorer cette piste. Je me <a href="/david/stream/2018/11/13/">souviens</a> <a href="/david/stream/2018/11/25/">avec</a> <a href="/david/stream/2018/11/27/">émotion</a> de ma lecture de <em>Professeur cherche élève ayant désir de sauver le monde</em> par Daniel&nbsp;Quinn.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+            <a href="/david/2024/parvenir/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#parvenir</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> (2024-01-10)
+      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
@@ -225,63 +238,64 @@
 <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/apprentissage/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#apprentissage</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -301,55 +315,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/index.html

@@ -10,9 +10,9 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Publications sporadiques 2023
+    Publications 2024
   — David Larlet</title>
-  <meta name="description" content="Archives 2023 des publications de David Larlet">
+  <meta name="description" content="Archives 2024 des publications de David Larlet">
   <!-- That good ol' feed, subscribe :). -->
   <link rel="alternate"
         type="application/atom+xml"
@@ -107,7 +107,7 @@
         data-instant-intensity="viewport-all">
     
 <header>
-  <h1>Publications sporadiques 2023</h1>
+  <h1>Publications 2024</h1>
 </header>
 <nav>
   <p class="center">
@@ -162,26 +162,26 @@
       </svg>
     </h3>
     <p>
-      <a href="/david/2021/accessibilite/" rel="tag">#accessibilité (1)</a>
-      <a href="/david/2021/accompagnement/" rel="tag">#accompagnement (1)</a>
-      <a href="/david/2021/addiction/" rel="tag">#addiction (2)</a>
-      <a href="/david/2021/apprentissage/" rel="tag">#apprentissage (3)</a>
-      <a href="/david/2021/communaute/" rel="tag">#communauté (1)</a>
-      <a href="/david/2021/decision/" rel="tag">#décision (1)</a>
-      <a href="/david/2021/ecriture/" rel="tag">#écriture (4)</a>
-      <a href="/david/2021/equipe/" rel="tag">#équipe (1)</a>
-      <a href="/david/2021/evolution/" rel="tag">#évolution (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/ia/" rel="tag">#IA (2)</a>
-      <a href="/david/2021/parvenir/" rel="tag">#parvenir (1)</a>
-      <a href="/david/2021/processus/" rel="tag">#processus (3)</a>
-      <a href="/david/2021/protopie/" rel="tag">#protopie (1)</a>
-      <a href="/david/2021/psychologie/" rel="tag">#psychologie (1)</a>
-      <a href="/david/2021/solastalgia/" rel="tag">#solastalgia (1)</a>
-      <a href="/david/2021/sport/" rel="tag">#sport (2)</a>
-      <a href="/david/2021/technique/" rel="tag">#technique (4)</a>
-      <a href="/david/2021/web/" rel="tag">#web (3)</a>
+      <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (1)</a>
+      <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (1)</a>
+      <a href="/david/2024/addiction/" rel="tag">#addiction (2)</a>
+      <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (3)</a>
+      <a href="/david/2024/communaute/" rel="tag">#communauté (1)</a>
+      <a href="/david/2024/decision/" rel="tag">#décision (1)</a>
+      <a href="/david/2024/ecriture/" rel="tag">#écriture (4)</a>
+      <a href="/david/2024/equipe/" rel="tag">#équipe (1)</a>
+      <a href="/david/2024/evolution/" rel="tag">#évolution (1)</a>
+      <a href="/david/2024/experience/" rel="tag">#expérience (2)</a>
+      <a href="/david/2024/fediverse/" rel="tag">#fédiverse (1)</a>
+      <a href="/david/2024/ia/" rel="tag">#IA (2)</a>
+      <a href="/david/2024/parvenir/" rel="tag">#parvenir (1)</a>
+      <a href="/david/2024/processus/" rel="tag">#processus (3)</a>
+      <a href="/david/2024/protopie/" rel="tag">#protopie (1)</a>
+      <a href="/david/2024/psychologie/" rel="tag">#psychologie (1)</a>
+      <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>
+      <a href="/david/2024/sport/" rel="tag">#sport (2)</a>
+      <a href="/david/2024/technique/" rel="tag">#technique (4)</a>
+      <a href="/david/2024/web/" rel="tag">#web (3)</a>
       
     </p>
   

david/2024/parvenir/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #parvenir
+    Étiquette #parvenir
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #parvenir">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #parvenir</h1>
+    <hgroup>
+      <h1>#parvenir</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> (2024-01-13)
+      <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> <time datetime="2024-01-13">13 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Le <em>wuwei</em>, dans le taoïsme, est d’ailleurs composé de deux idéogrammes&nbsp;: le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par <em>non-agir</em> ou <em>non-intervention</em>, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir <em>ne pas</em> est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être&nbsp;chinois.</p>
@@ -160,63 +154,64 @@
 <p>De plus en plus tenté d’explorer cette piste. Je me <a href="/david/stream/2018/11/13/">souviens</a> <a href="/david/stream/2018/11/25/">avec</a> <a href="/david/stream/2018/11/27/">émotion</a> de ma lecture de <em>Professeur cherche élève ayant désir de sauver le monde</em> par Daniel&nbsp;Quinn.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/ia/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#IA</a>
+          
+            <a href="/david/2024/parvenir/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#parvenir</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -236,55 +231,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/processus/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #processus
+    Étiquette #processus
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #processus">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #processus</h1>
+    <hgroup>
+      <h1>#processus</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> (2024-01-12)
+      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
@@ -179,12 +173,31 @@
 </ul>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/psychologie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#psychologie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time>
     </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 data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">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;;
@@ -234,12 +247,31 @@ a::before {
 <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>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> (2024-01-06)
+      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> <time datetime="2024-01-06">6 janvier 2024</time>
     </h2>
     
-      
 <p>C’est fou comme le fait de se donner un objectif (sportif) change la donne en terme de motivation. Pour cette année, ce sera la <em>Traversée de Charlevoix</em>. Je vais essayer de documenter le processus de&nbsp;préparation.</p>
 <hr />
 <p>Au détour d’un vieux&nbsp;chalet&nbsp;:</p>
@@ -276,63 +308,64 @@ a::before {
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -352,55 +385,75 @@ a::before {
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/protopie/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #protopie
+    Étiquette #protopie
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #protopie">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #protopie</h1>
+    <hgroup>
+      <h1>#protopie</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> (2024-01-01)
+      <a href="/david/2024/01/01/" title="Lien permanent vers cet article">Dryear(s)</a> <time datetime="2024-01-01">1 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>33&#8239;% de 44&nbsp;millions de consommateurs vont faire le Dry January<br />
@@ -167,63 +161,64 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
 <p>Grosse envie de reprendre la CSS par ici en ce début d’année. Avec le dilemme de faire chuter cette motivation si je publie dès maintenant avec l’ancienne (qui restera effective sur les anciens articles). Je vais essayer de me&nbsp;retenir.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/protopie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#protopie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -243,55 +238,75 @@ Pb&nbsp;: mémoire, troubles cognitifs, responsable de cancer, pb sommeil, déco
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/psychologie/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #psychologie
+    Étiquette #psychologie
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #psychologie">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #psychologie</h1>
+    <hgroup>
+      <h1>#psychologie</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> (2024-01-12)
+      <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote>
 <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
@@ -179,63 +173,64 @@
 </ul>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/psychologie/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#psychologie</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -255,55 +250,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/solastalgia/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #solastalgia
+    Étiquette #solastalgia
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #solastalgia">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #solastalgia</h1>
+    <hgroup>
+      <h1>#solastalgia</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time>
     </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 data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">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;;
@@ -189,63 +183,64 @@ a::before {
 <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>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -265,55 +260,75 @@ a::before {
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/sport/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #sport
+    Étiquette #sport
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #sport">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #sport</h1>
+    <hgroup>
+      <h1>#sport</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> (2024-01-09)
+      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time>
     </h2>
     
-      
 <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p>
 <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p>
 <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p>
@@ -160,12 +154,31 @@
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accessibilite/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accessibilité</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</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>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> (2024-01-06)
+      <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> <time datetime="2024-01-06">6 janvier 2024</time>
     </h2>
     
-      
 <p>C’est fou comme le fait de se donner un objectif (sportif) change la donne en terme de motivation. Pour cette année, ce sera la <em>Traversée de Charlevoix</em>. Je vais essayer de documenter le processus de&nbsp;préparation.</p>
 <hr />
 <p>Au détour d’un vieux&nbsp;chalet&nbsp;:</p>
@@ -202,63 +215,64 @@
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/addiction/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#addiction</a>
+          
+            <a href="/david/2024/processus/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#processus</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -278,55 +292,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/technique/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #technique
+    Étiquette #technique
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #technique">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #technique</h1>
+    <hgroup>
+      <h1>#technique</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> (2024-01-11)
+      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
@@ -174,12 +168,31 @@
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/evolution/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#évolution</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> (2024-01-09)
+      <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time>
     </h2>
     
-      
 <p>Avec les amis, on profite des premières chutes de neige sur Montréal pour aller s’amuser sur le Mont Royal et vérifier que les skis de rando sont encore en bon état. Cinq minutes avant, je tirais l’enfant avec son baudrier en mode remontée musculaire, en pleine forme. Une descente entre les arbres même pas tant engagée et au moment de rejoindre le groupe, légère perte de contrôle dans un endroit très boisé. Mon ski se coince entre deux arbres assez fins mais suffisamment solides pour que ma cheville doive tourner dans le mauvais sens vu que mon corps a choisi de continuer sa course. <em>Ouille.</em></p>
 <p>La tristesse de se faire mal au tout début de la saison. Aussi, c’est la pire chose à expérimenter lorsqu’on prépare un <a href="/david/2024/01/06/" title="Objectif">défi sportif</a>…</p>
 <p>Youtube est le plus proche du célèbre <q lang="en">I know kung-fu</q> de Neo, j’ai appris à straper une cheville et j’ai l’espoir de pouvoir aller jusqu’au refuge avec l’enfant dans 2&nbsp;semaines vu que j’ai déjà réservé. Une cheville <em>tape</em>ée devrait pouvoir tenir les 5&#8239;km à skis si j’en prends suffisamment soin d’ici&nbsp;là&nbsp;🤞.</p>
@@ -200,12 +213,31 @@
 </blockquote>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accessibilite/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accessibilité</a>
+          
+            <a href="/david/2024/sport/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#sport</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>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> (2024-01-08)
+      <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time>
     </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 data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">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;;
@@ -255,14 +287,31 @@ a::before {
 <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>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
+      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> <time datetime="2024-01-02">2 janvier 2024</time>
     </h2>
     
-      <details>
-        <summary>Déplier pour lire le contenu de la publication</summary>
-        
 <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>
@@ -301,65 +350,65 @@ a::before {
 <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 data-link-domain="velvetyne.fr" 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>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>
 
-      </details>
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -379,55 +428,75 @@ a::before {
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/2024/web/index.html

@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <!-- Required to make a valid HTML5 document. -->
   <title>
-    Tag #web
+    Étiquette #web
   — David Larlet</title>
   <meta name="description" content="Publications relatives au tag #web">
   <!-- That good ol' feed, subscribe :). -->
@@ -48,40 +48,40 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"
+        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/triplicate_t4_poly_bold.woff2"
+        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/triplicate_t4_poly_italic.woff2"
+        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/triplicate_t3_regular.woff2"
+        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/triplicate_t3_bold.woff2"
+        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/triplicate_t3_italic.woff2"
+        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
         as="font"
         type="font/woff2"
         media="(prefers-color-scheme: dark)"
@@ -109,37 +109,31 @@
     }
   </style>
 
-  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
-        data-instant-intensity="viewport-all">
+  <body data-instant-intensity="viewport-all">
     
+<article>
   <header>
-    <h1>Publications relatives au tag #web</h1>
+    <hgroup>
+      <h1>#web</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
   </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>
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
   
     <h2>
-      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> (2024-01-11)
+      <a href="/david/2024/01/11/" title="Lien permanent vers cet article">Impact</a> <time datetime="2024-01-11">11 janvier 2024</time>
     </h2>
     
-      
 
 <blockquote lang="en">
 <p>If front web developers work closer to the users’ needs and problems, <mark>if they feel more implicated in the user experience,</mark> they will understand the impact of what they are building and will naturally adopt the strengths of the front web. […]</p>
@@ -174,12 +168,31 @@
 <p>Je découvre au passage qu’il y a pas mal d’options d’accessibilité dans <a data-link-domain="polypane.app" href="https://polypane.app/">Polypane</a> que j’utilise depuis peu et que je n’ai pas pleinement&nbsp;exploré.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/evolution/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#évolution</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> (2024-01-03)
+      <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
     </h2>
     
-      
 <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">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>
@@ -196,12 +209,31 @@
 <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/accompagnement/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#accompagnement</a>
+          
+            <a href="/david/2024/ecriture/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#écriture</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
     <h2>
-      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> (2024-01-02)
+      <a href="/david/2024/01/02/" title="Lien permanent vers cet article">Fondations</a> <time datetime="2024-01-02">2 janvier 2024</time>
     </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>
@@ -241,63 +273,64 @@
 <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>
 
     
+      <nav>
+        <p>
+          
+            <a href="/david/2024/experience/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#expérience</a>
+          
+            <a href="/david/2024/technique/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#technique</a>
+          
+            <a href="/david/2024/web/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#web</a>
+          
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    
+    <hr>
   
-</main>
+</article>
 
     <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>
+          <a href="/david/" title="Aller à l’accueil">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>
+          <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>
-            <svg class="icon icon-user-tie">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
-            </svg>
-          Pro</a>
+             data-instant>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>
+          <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">
-            <svg class="icon icon-hammer2">
-              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
-            </svg>
-          Légal</abbr>
+                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>
-              <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>Thème
             </legend>
             <label>
               <input type="radio" value="auto" name="chosen-color-scheme" checked>
@@ -317,55 +350,75 @@
     </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)
+      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))
+        }
 
-        form.addEventListener('change', (e) => {
-          const chosenColorScheme = e.target.value
-          localStorage.setItem('theme', chosenColorScheme)
-          toggleTheme(chosenColorScheme)
-        })
+        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 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 cssRule of styleSheet.cssRules) {
-            if (cssRule.type !== CSSRule.MEDIA_RULE) {
+          for (const layerRule of styleSheet.cssRules) {
+            if (!(layerRule instanceof CSSLayerBlockRule)) {
               continue
             }
-            // WARNING: Safari does not have/supports `conditionText`.
-            if (cssRule.conditionText) {
-              if (cssRule.conditionText !== prefersColorSchemeDark) {
+            if (layerRule.name === 'colors') {
+              colorsLayer = layerRule
+            }
+            for (const cssRule of layerRule.cssRules) {
+              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                 continue
               }
-            } else {
-              if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
-                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))
             }
-            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)
+            // Safari requires the `0` second parameter (even if default).
+            colorsLayer.insertRule(mediaRule.cssText, 0)
             hasDarkRules = true
           }
         }
+
         if (hasDarkRules) {
-          loadThemeForm('#theme-selector')
+          if ('customElements' in window && !customElements.get('theme-toggle')) {
+            customElements.define('theme-toggle', ThemeToggle)
+          }
         }
       })
     </script>

david/index.html

@@ -142,29 +142,29 @@
         
       </p>
     </nav>
-    <p id="tags-2023">Ou par étiquettes :</p>
+    <p id="tags-2024">Ou par étiquettes :</p>
     <nav>
       <p>
-        <a href="/david/2023/accessibilite/" rel="tag">#accessibilité (1)</a>,
-        <a href="/david/2023/accompagnement/" rel="tag">#accompagnement (1)</a>,
-        <a href="/david/2023/addiction/" rel="tag">#addiction (2)</a>,
-        <a href="/david/2023/apprentissage/" rel="tag">#apprentissage (3)</a>,
-        <a href="/david/2023/communaute/" rel="tag">#communauté (1)</a>,
-        <a href="/david/2023/decision/" rel="tag">#décision (1)</a>,
-        <a href="/david/2023/ecriture/" rel="tag">#écriture (4)</a>,
-        <a href="/david/2023/equipe/" rel="tag">#équipe (1)</a>,
-        <a href="/david/2023/evolution/" rel="tag">#évolution (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/ia/" rel="tag">#IA (2)</a>,
-        <a href="/david/2023/parvenir/" rel="tag">#parvenir (1)</a>,
-        <a href="/david/2023/processus/" rel="tag">#processus (3)</a>,
-        <a href="/david/2023/protopie/" rel="tag">#protopie (1)</a>,
-        <a href="/david/2023/psychologie/" rel="tag">#psychologie (1)</a>,
-        <a href="/david/2023/solastalgia/" rel="tag">#solastalgia (1)</a>,
-        <a href="/david/2023/sport/" rel="tag">#sport (2)</a>,
-        <a href="/david/2023/technique/" rel="tag">#technique (4)</a>,
-        <a href="/david/2023/web/" rel="tag">#web (3)</a>.
+        <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (1)</a>,
+        <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (1)</a>,
+        <a href="/david/2024/addiction/" rel="tag">#addiction (2)</a>,
+        <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (3)</a>,
+        <a href="/david/2024/communaute/" rel="tag">#communauté (1)</a>,
+        <a href="/david/2024/decision/" rel="tag">#décision (1)</a>,
+        <a href="/david/2024/ecriture/" rel="tag">#écriture (4)</a>,
+        <a href="/david/2024/equipe/" rel="tag">#équipe (1)</a>,
+        <a href="/david/2024/evolution/" rel="tag">#évolution (1)</a>,
+        <a href="/david/2024/experience/" rel="tag">#expérience (2)</a>,
+        <a href="/david/2024/fediverse/" rel="tag">#fédiverse (1)</a>,
+        <a href="/david/2024/ia/" rel="tag">#IA (2)</a>,
+        <a href="/david/2024/parvenir/" rel="tag">#parvenir (1)</a>,
+        <a href="/david/2024/processus/" rel="tag">#processus (3)</a>,
+        <a href="/david/2024/protopie/" rel="tag">#protopie (1)</a>,
+        <a href="/david/2024/psychologie/" rel="tag">#psychologie (1)</a>,
+        <a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>,
+        <a href="/david/2024/sport/" rel="tag">#sport (2)</a>,
+        <a href="/david/2024/technique/" rel="tag">#technique (4)</a>,
+        <a href="/david/2024/web/" rel="tag">#web (3)</a>.
           
         
       </p>
@@ -468,8 +468,7 @@
     </p>
     <h2>Me contacter</h2>
     <p>
-      Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc"
-    title="Clé publique de chiffrement">ma clé publique</a>.
+      Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même.
     </p>
   </article>
 

david/log/index.xml

@@ -543,810 +543,4 @@ Pb : mémoire, troubles cognitifs, responsable de cancer, pb sommeil, d
 &lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/addiction/&quot;&gt;#addiction&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/experience/&quot;&gt;#expérience&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/protopie/&quot;&gt;#protopie&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">Ailleurs</title>
-            <link href="https://larlet.fr/david/2023/12/31/" rel="alternate" type="text/html" />
-            <updated>2023-12-31T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/31/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;— What a year, huh?&lt;br /&gt;
-— Captain, it’s December&amp;nbsp;31st.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Ce &lt;em&gt;meme&lt;/em&gt; inversé résume assez bien cette année avec son lot de hauts et de bas. J’avais la tête ailleurs pour &lt;a href=&quot;https://larlet.fr/david/2021/03/17/&quot;&gt;créer&lt;/a&gt; / consolider un collectif qui venait de subir un traumatisme. J’ai l’impression que nous avons réussi·es à trouver un nouvel équilibre avec davantage d’horizontalité, de compréhension de notre cadre de travail mais aussi et surtout des besoins des autres et donc de soi. Un remodelage difficile mais salutaire qui nous a permis aussi d’éponger une importante &lt;em&gt;dette de gestion&lt;/em&gt; après 11&amp;nbsp;années&amp;nbsp;d’existence.&lt;/p&gt;
-&lt;p&gt;J’ai découvert des outils intéressants pour les collectifs dont j’aimerais avoir / prendre le temps de documenter ces prochains mois. Toujours dans l’idée de semer des graines de réflexion ici et ailleurs, je crois qu’il serait pertinent que l’on documente un peu mieux nos pratiques et nos choix. De jolies choses ont poussé ces derniers temps&amp;nbsp;🧑‍🌾. Certains bouts de codes mériteraient d’être rendus publics&amp;nbsp;aussi.&lt;/p&gt;
-&lt;p&gt;Ailleurs, j’ai / on a&amp;nbsp;publié&amp;nbsp;:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;a href=&quot;https://scopyleft.gitlab.io/les-statuts/&quot;&gt;Les statuts de Scopyleft&lt;/a&gt; avec une volonté de minimalisme et&amp;nbsp;d’explicite&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;http://scopyleft.fr/blog/2023/transformation-en-cours/&quot;&gt;Transformation en cours&lt;/a&gt; sur le blog de scopyleft qui &lt;a href=&quot;http://scopyleft.fr/blog/2023/petit-panorama-des-pratiques-de-remuneration-en-horizontalite/&quot;&gt;se réveille&lt;/a&gt;&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;https://www.openstreetmap.org/user/David%20Larlet/diary/402475&quot;&gt;uMap: fine-grained permissions and more&lt;/a&gt; sur un blog OpenStreetMap avant de &lt;a href=&quot;https://umap-project.org/fr/&quot;&gt;créer le nôtre&lt;/a&gt;&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;https://code.larlet.fr/blog/2023/12/26/umap-et-web-components/&quot;&gt;uMap et Web Components&lt;/a&gt; sur un futur(?) blog&amp;nbsp;technique.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;Une forme d’essaimage doux amené à se&amp;nbsp;poursuivre.&lt;/p&gt;
-&lt;p&gt;&lt;strong&gt;Et ici alors&amp;#8239;?&lt;/strong&gt; J’ai besoin de retrouver une forme d’envie de partager, peut-être que ça passera par des notes plus courtes, peut-être par un &lt;em&gt;redesign&lt;/em&gt;, peut-être par une contrainte auto-imposée assez forte, peut-être autre&amp;nbsp;chose.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;— Ah on est bien là à courir, on se sent vivants&amp;#8239;!&lt;br /&gt;
-— Je te rassure, tu es tout le temps vivant…&lt;br /&gt;
-— Ouais mais des fois la maison c’est quand même comme un grand cercueil.&lt;br /&gt;
-— Mmmh, d’accord mais alors dans ma chambre la machine à coudre c’est comme un cœur qui&amp;nbsp;bat.&lt;/p&gt;
-&lt;p&gt;Hier, on a couru 7km pour la première&amp;nbsp;fois&amp;nbsp;💓.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/confiance/&quot;&gt;#confiance&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&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">Abonnement</title>
-            <link href="https://larlet.fr/david/2023/12/12/" rel="alternate" type="text/html" />
-            <updated>2023-12-12T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/12/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;20&amp;nbsp;years ago, Chris Anderson told me that it was unrealistic to expect tech companies to refuse demands for DRM from the entertainment companies whose media they hoped to play. My argument – then and now – was that any tech company that sells you a gadget that can have its features revoked is defrauding you. You’re paying for x, y and z – and if they are contractually required to remove x and y on demand, &lt;mark&gt;they are selling you something that you can’t rely on&lt;/mark&gt;, without making that clear to&amp;nbsp;you.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://pluralistic.net/2023/12/08/playstationed/#tyler-james-hill&quot;&gt;Pluralistic: “If buying isn’t owning, piracy isn’t stealing” (08&amp;nbsp;Dec 2023)&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/c5baffcec6831c2b1fe5f3b27ebaeef4/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2020/02/07/#mood&quot;&gt;Rappel&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2021/12/05/&quot;&gt;quasi&lt;/a&gt;-&lt;a href=&quot;https://larlet.fr/david/2023/02/01/&quot; title=&quot;Ombres&quot;&gt;annuel&lt;/a&gt;&amp;nbsp;: de Netflix à Spotify, la volatilité des catalogues est telle qu’on ne peux compter sur aucune &lt;em&gt;playlist&lt;/em&gt; qui tiendrait dans la durée. Considérant le prix des disques durs externes SSD, il est devenu plus que rentable et pérenne d’entretenir ses propres&amp;nbsp;bibliothèques&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Ne pensez pas priver plus que ça les artistes de revenus avec ces pratiques, au mieux il leur manquera &lt;a href=&quot;https://www.rollingstone.com/music/music-news/weird-al-yankovic-spotify-wrapped-video-criticism-1234905887/&quot;&gt;un sandwich… par an&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/1ac69ff7b6913bfc4298d9ec0365ca5b/&quot;&gt;cache&lt;/a&gt;).&lt;/p&gt;
-&lt;p&gt;PS&amp;nbsp;: j’ai écouté 🇨🇦 &lt;a href=&quot;https://fr.wikipedia.org/wiki/Pax_Massilia&quot;&gt;Pax Massilia&lt;/a&gt; et ça m’a fait l’effet d’un &lt;em&gt;space cake&lt;/em&gt; de&amp;nbsp;Proust.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🙃 when people say “enshittification”, it’s as if their core complaint about capitalism is the customer service, rather than the systematic exploitation of other people. people don’t talk about union busting as “enshittification”, or wage theft as “enshittification”, let alone deeper systematic&amp;nbsp;issues.&lt;/p&gt;
-&lt;p&gt;people talk about enshittification to mean &lt;mark&gt;“i can&#x27;t watch my favourite tv show any&amp;nbsp;more”&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://cohost.org/tef/post/3175066-enshittification-is&quot;&gt;enshittification is what happens when a disney adult learns about captialism&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/37d6792aae27bda5e258f7a1b052045a/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/gafam/&quot;&gt;#gafam&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/propriete/&quot;&gt;#propriété&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">Développement(s)</title>
-            <link href="https://larlet.fr/david/2023/12/08/" rel="alternate" type="text/html" />
-            <updated>2023-12-08T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/08/</id>
-            <summary type="html">
-&lt;p&gt;J’ai un peu de mal ces temps-ci à dire que je suis un développeur car j’ai l’impression de passer énormément d’énergie à faire d’autres choses. Lorsqu’on me demande ce que je fais, je dis «&amp;nbsp;des trucs, de-ci de-là…&amp;nbsp;», rien de bien grandiloquent. Une bonne partie de mes journées est passée dans la gestion de Scopyleft (au sens très large), une autre à interagir avec les équipes avec lesquelles je travaille. Et puis parfois, l’après-midi ou le soir, lorsqu’il n’y a ni grève, ni neige, ni journée pédagogique, ni covid, ni flemme, il m’arrive de coder des&amp;nbsp;trucs.&lt;/p&gt;
-&lt;h2&gt;Anthologie&amp;nbsp;Palatine&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-anthologie-palatine.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-anthologie-palatine.jpg&quot;
-            width=&quot;2862&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-anthologie-palatine.jpg 2862w, /static/david/2023/2023-12-08-anthologie-palatine_660x440.jpg 660w, /static/david/2023/2023-12-08-anthologie-palatine_990x660.jpg 990w, /static/david/2023/2023-12-08-anthologie-palatine_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2862 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Projet de longue date avec la &lt;a href=&quot;https://www.ecrituresnumeriques.ca/&quot;&gt;Chaire du Canada sur les écritures numériques&lt;/a&gt; qui consiste à rendre possible le parcours et l’analyse de &lt;a href=&quot;https://anthologiagraeca.org/&quot;&gt;textes en Grec ancien&lt;/a&gt;. C’est un peu en pause depuis le début de l’année mais j’ai pris beaucoup de plaisir à échanger / pairer techniquement avec Sarah (de Scopyleft) sur ces&amp;nbsp;évolutions.&lt;/p&gt;
-&lt;p&gt;Participer à de la recherche par l’angle du développement est &lt;del&gt;un des moyens d’être bien payé&lt;/del&gt; une façon de garder un pied dans un domaine qui me fait mouliner le cerveau pour autre chose que le profit des&amp;nbsp;autres.&lt;/p&gt;
-&lt;h2&gt;Pressoir&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-ateliers-sens-public.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-ateliers-sens-public.jpg&quot;
-            width=&quot;2288&quot; height=&quot;2122&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-ateliers-sens-public.jpg 2288w, /static/david/2023/2023-12-08-ateliers-sens-public_660x440.jpg 660w, /static/david/2023/2023-12-08-ateliers-sens-public_990x660.jpg 990w, /static/david/2023/2023-12-08-ateliers-sens-public_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2288 / 2122))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Toujours avec la &lt;a href=&quot;https://www.ecrituresnumeriques.ca/&quot;&gt;Chaire du Canada sur les écritures numériques&lt;/a&gt;, parce qu’on apprécie bien de travailler ensemble, on a fait il y a quelques années un outil permettant de générer des livres numériques à partir de sources en &lt;em&gt;markdown&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;Cela a donné lieu à &lt;a href=&quot;https://ateliers.sens-public.org/&quot;&gt;deux&lt;/a&gt; &lt;a href=&quot;http://parcoursnumeriques-pum.ca/&quot;&gt;collections&lt;/a&gt; enrichies de contenus numériques (vidéos, etc).&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg&quot;
-            width=&quot;2310&quot; height=&quot;2108&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg 2310w, /static/david/2023/2023-12-08-presses-universitaires-montreal_660x440.jpg 660w, /static/david/2023/2023-12-08-presses-universitaires-montreal_990x660.jpg 990w, /static/david/2023/2023-12-08-presses-universitaires-montreal_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2310 / 2108))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Depuis l’automne, on assume d’avoir fait un &lt;a href=&quot;https://gitlab.huma-num.fr/ecrinum/pressoir-cli/&quot;&gt;Générateur de Livres Statiques&lt;/a&gt; et on essaye de le rendre plus polyvalent / autonome. C’est un exercice de recherche qui va vers une dé-GAFAM-isation et qui m’intéresse &lt;a href=&quot;https://larlet.fr/david/biologeek/archives/20060119-open-articles-liberez-votre-savoir/&quot;&gt;depuis un bout de&amp;nbsp;temps…&lt;/a&gt;&lt;/p&gt;
-&lt;h2&gt;Stylo&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-stylo-export.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-stylo-export.jpg&quot;
-            width=&quot;2302&quot; height=&quot;1770&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-stylo-export.jpg 2302w, /static/david/2023/2023-12-08-stylo-export_660x440.jpg 660w, /static/david/2023/2023-12-08-stylo-export_990x660.jpg 990w, /static/david/2023/2023-12-08-stylo-export_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2302 / 1770))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Puisque j’en suis sur la recherche, j’ai aussi contribué modestement à l’éditeur de texte &lt;a href=&quot;https://stylo.huma-num.fr/&quot;&gt;Stylo&lt;/a&gt; pour la partie export. Cela m’a fait plonger dans l’univers de &lt;a href=&quot;https://gitlab.huma-num.fr/ecrinum/stylo/pandoc-api&quot;&gt;Pandoc&lt;/a&gt; (et Docker), de la bibliographie académique et puis j’ai refait des API et j’aime bien&amp;nbsp;ça.&lt;/p&gt;
-&lt;h2&gt;LABRRI&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-labrri.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-labrri.jpg&quot;
-            width=&quot;2446&quot; height=&quot;2028&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-labrri.jpg 2446w, /static/david/2023/2023-12-08-labrri_660x440.jpg 660w, /static/david/2023/2023-12-08-labrri_990x660.jpg 990w, /static/david/2023/2023-12-08-labrri_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2446 / 2028))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Pour finir côté recherche, j’ai accompagné le &lt;a href=&quot;https://labrri.net/&quot;&gt;LABRRI&lt;/a&gt; dans l’analyse et la mise en forme de leurs données autour de situations interculturelles au Québec. C’est en interagissant avec des personnes peu/pas techniques que j’ai l’impression de progresser aujourd’hui. Cela permet de revoir les contraintes, l’autonomie, la consommation des ressources, les outils déjà en place. Cette prise de recul est nécessaire pour un avenir&amp;nbsp;frugal.&lt;/p&gt;
-&lt;p&gt;Le sujet en lui-même est une façon de m’intégrer au Québec en analysant le prisme des incompréhensions culturelles qu’il peut parfois y&amp;nbsp;avoir.&lt;/p&gt;
-&lt;h2&gt;Croix-Rouge&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-croix-rouge-aime.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-croix-rouge-aime.jpg&quot;
-            width=&quot;2340&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-croix-rouge-aime.jpg 2340w, /static/david/2023/2023-12-08-croix-rouge-aime_660x440.jpg 660w, /static/david/2023/2023-12-08-croix-rouge-aime_990x660.jpg 990w, /static/david/2023/2023-12-08-croix-rouge-aime_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2340 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;On a mis en place un outil pour qu’un lieu d’accueil et d’orientation puisse donner des formations à des mineurs étrangers avec &lt;a href=&quot;https://www.maiwann.net/&quot;&gt;Maïtané&lt;/a&gt; et c’était émotionnellement intense. Beaucoup de &lt;a href=&quot;https://larlet.fr/david/2023/02/18/&quot; title=&quot;Quiz&quot;&gt;remises en questions techniques&lt;/a&gt; personnelles mais surtout de réflexions sur quelles sont les véritables héroïnes de ce&amp;nbsp;monde…&lt;/p&gt;
-&lt;p&gt;Un des enjeux était de voir ce que l’on arrivait à produire avec un budget très restreint (pour le domaine). Il y aurait de la matière pour un article&amp;nbsp;dédié.&lt;/p&gt;
-&lt;h2&gt;Outils&amp;nbsp;scopyleft&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-outils-scopyleft.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-outils-scopyleft.jpg&quot;
-            width=&quot;2430&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-outils-scopyleft.jpg 2430w, /static/david/2023/2023-12-08-outils-scopyleft_660x440.jpg 660w, /static/david/2023/2023-12-08-outils-scopyleft_990x660.jpg 990w, /static/david/2023/2023-12-08-outils-scopyleft_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2430 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;J’ai produit et maintenu une quinzaine d’outils pour &lt;a href=&quot;http://scopyleft.fr/&quot;&gt;Scopyleft&lt;/a&gt; au cours de l’année. C’est beaucoup et je m’en suis rendu compte au moment où j’ai dû faire une page pour en faire la liste car on avait du mal à nous y retrouver&amp;#8239;! Plus que les outils en eux-mêmes, c’est la structuration et l’aide qu’ils ont pu apporter à des moments critiques qui me&amp;nbsp;réjouit.&lt;/p&gt;
-&lt;p&gt;J’ai aussi développé pas mal de bouts de code relatifs à l’automatisation / vérification des sous-traitant·es qui sont de plus en plus nombreuses avec le &lt;a href=&quot;https://www.data.gouv.fr/fr/datasets/realisation-de-services-publics-numeriques-en-mode-produit-coordonnes-par-le-programme-interministeriel-beta-gouv/&quot;&gt;marché public&lt;/a&gt; que l’on a remporté il y a quelques années. Extraire et vérifier des données issues de PDF provenant de l’administration ou d’outils de comptabilité n’est pas une mince&amp;nbsp;affaire…&lt;/p&gt;
-&lt;h2&gt;uMap&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-anct.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-anct.jpg&quot;
-            width=&quot;2472&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-umap-anct.jpg 2472w, /static/david/2023/2023-12-08-umap-anct_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-anct_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-anct_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2472 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Au printemps dernier, Yohan m’a motivé pour que l’on transforme un logiciel open-source en commun tout en se faisant financer par l’État. Je dois avouer que j’étais un peu dubitatif mais j’ai tenté le coup. Quelques mois après, on a une &lt;a href=&quot;https://umap.incubateur.anct.gouv.fr/&quot;&gt;instance souveraine&lt;/a&gt; en production, des centaines d’&lt;em&gt;issues&lt;/em&gt; traitées, un &lt;a href=&quot;https://umap-project.org/&quot;&gt;site dédié&lt;/a&gt; avec une possibilité de financement participatif, des mises à jour régulières, des réflexions de fond avec la communauté, un financement par &lt;a href=&quot;https://nlnet.nl/&quot;&gt;NLnet&lt;/a&gt;, etc.&lt;/p&gt;
-&lt;p&gt;Pari tellement réussi qu’on a décidé de me passer en mécénat de compétences avec Scopyleft pour les derniers mois de l’année. Il faudra que je fasse un billet&amp;nbsp;dédié.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-project.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-project.jpg&quot;
-            width=&quot;2462&quot; height=&quot;2108&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-umap-project.jpg 2462w, /static/david/2023/2023-12-08-umap-project_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-project_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-project_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2462 / 2108))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;hr /&gt;
-&lt;p&gt;La plupart de ces sites sont statiques ou &lt;a href=&quot;https://larlet.fr/david/2023/09/13/&quot; title=&quot;Documentation&quot;&gt;semynamiques&lt;/a&gt;, sans faire appel à NPM.&amp;nbsp;Vous n’avez pas idée d’à quel point cela me tranquillise et augmente mon efficacité en terme de maintenance sur le long&amp;nbsp;terme.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/recherche/&quot;&gt;#recherche&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Équivalent</title>
-            <link href="https://larlet.fr/david/2023/12/06/" rel="alternate" type="text/html" />
-            <updated>2023-12-06T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/06/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Un vol aller-retour entre Paris et Montréal (11&amp;#8239;080&amp;#8239;km) émet 2,5&amp;nbsp;tonnes de &lt;mark&gt;dioxyde de carbone équivalent&lt;/mark&gt; dans l’atmosphère par passager&amp;nbsp;[…]&lt;/p&gt;
-&lt;p&gt;&lt;strong&gt;Comment contrebalancer les émissions CO₂e de votre&amp;nbsp;Paris-Montréal&amp;#8239;?&lt;/strong&gt;&lt;/p&gt;
-&lt;p&gt;Diminuer votre chauffage&amp;nbsp;: 21&amp;nbsp;ans et 3&amp;nbsp;mois&lt;br /&gt;
-Réduire vos déchets&amp;nbsp;: 12&amp;nbsp;ans et 9&amp;nbsp;mois&lt;br /&gt;
-Adopter des gestes d’écoconduite&amp;nbsp;: 12&amp;nbsp;ans et 9&amp;nbsp;mois&lt;br /&gt;
-Se nourrir localement&amp;nbsp;: 8&amp;nbsp;ans et 6&amp;nbsp;mois&lt;br /&gt;
-Adopter un régime végétarien&amp;nbsp;: 5&amp;nbsp;ans et 6&amp;nbsp;mois&lt;br /&gt;
-Adopter un régime végan&amp;nbsp;: 3&amp;nbsp;ans et 4&amp;nbsp;mois&lt;br /&gt;
-Passer à de l’électricité 100&amp;#8239;% renouvelable&amp;nbsp;: 1&amp;nbsp;an et 7&amp;nbsp;mois&lt;br /&gt;
-Abandonner la voiture&amp;nbsp;: 1&amp;nbsp;an et&amp;nbsp;3&amp;nbsp;mois&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.lemonde.fr/les-decodeurs/article/2023/12/05/vous-voulez-compenser-votre-vol-en-avion-par-des-ecogestes-voici-combien-de-temps-cela-vous-prendra_6204046_4355770.html&quot;&gt;Vous voulez «&amp;nbsp;compenser&amp;nbsp;» votre vol en avion par des écogestes&amp;#8239;? Voici combien de temps cela vous&amp;nbsp;prendra&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je suis de plus en plus convaincu que l’on ne changera pas nos habitudes avant que les réserves de pétrole / charbon / gaz ne soient&amp;nbsp;vides.&lt;/p&gt;
-&lt;p&gt;Pénuries, famines, rapports de forces changeants, le capitalisme est très résilient dans ces situations. Il n’y a guère que la solidarité qui pourrait entamer un tel système et il comporte suffisamment de mécanismes pour s’en&amp;nbsp;protéger.&lt;/p&gt;
-&lt;p&gt;Un «&amp;nbsp;dioxyde de carbone équivalent&amp;nbsp;» est tellement scientifique, la mesure parait si propre. Combien d’«&amp;nbsp;humains morts équivalents&amp;nbsp;»&amp;#8239;? Combien de «&amp;nbsp;générations en état de suffocation équivalent&amp;nbsp;»&amp;#8239;? Combien d’«&amp;nbsp;espèces anéanties&amp;nbsp;équivalent&amp;nbsp;»&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;&lt;a href=&quot;https://theconversation.com/why-are-people-still-flying-to-climate-conferences-by-private-jet-218459&quot;&gt;Et pendant ce temps là… un vol en bandes organisées.&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/328976d647ab5dbf9ff820f2cfe35e5a/&quot;&gt;cache&lt;/a&gt;)&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;📧 Hope the air where you are is somewhat breathable today! Just wanted to circle back around on that&amp;nbsp;report.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.mcsweeneys.net/articles/email-greetings-for-modern-times&quot;&gt;Email Greetings for Modern Times&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ec3d02a88dc8597c24f1b32b9cf51d41/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/incompetence/&quot;&gt;#incompétence&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/solastalgia/&quot;&gt;#solastalgia&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">NostAlgIe</title>
-            <link href="https://larlet.fr/david/2023/12/03/" rel="alternate" type="text/html" />
-            <updated>2023-12-03T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/03/</id>
-            <summary type="html">
-&lt;p&gt;Paradoxalement, les &lt;abbr title=&quot;Large Language Model&quot;&gt;LLM&lt;/abbr&gt; qui sont annoncés comme étant l’avenir ne font que reproduire ce qui a eu lieu dans le passé. Comme un auto-correct qui ne saurait pas que la langue évolue. Chaque &lt;em&gt;prompt&lt;/em&gt; demande à notre passé de construire notre avenir, une forme d’héritage numérique auquel il va falloir&amp;nbsp;s’habituer.&lt;/p&gt;
-&lt;p&gt;Considérant que nous sommes à un moment charnière où il faudrait justement dévier d’une trajectoire passée qui nous propulse à +trop-de-degrés, ces outils —&amp;nbsp;par nature&amp;nbsp;— réactionnaires ne sont-ils pas en train de nous conforter dans nos erreurs&amp;nbsp;passées&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;Et c’est là où ça devient intéressant, peut-on de manière éthique choisir d’être orientés et quelles dérives certaines cela aurait&amp;#8239;? Il y a déjà des biais énormes sur les jeux d’apprentissage mais est-ce que je pourrais choisir par exemple une &lt;em&gt;saveur&lt;/em&gt; de ChatGPT &lt;a href=&quot;https://www.wired.com/story/search-engine-ecosia-generative-ai-revolution/&quot;&gt;qui ait été définie par Ecosia&amp;#8239;?&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/b3accd4d0eb51c1628b85144224efa04/&quot;&gt;cache&lt;/a&gt;) Quels paramètres politiques sont acceptables&amp;#8239;? Et pour&amp;nbsp;qui&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;Bref, c’était mieux avant&amp;nbsp;🙃.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🙄 Provides neutral analysis, fostering open communication and&amp;nbsp;trust.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://liarliar.ai/&quot;&gt;LiarLiar.ai&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✍️ Even if there are no real updates there is always something to say. In those moments, I write about something that happened to me this week. A small anecdote. &lt;mark&gt;Something human.&lt;/mark&gt; Something grounding. No design mic-drops. No condescending words of&amp;nbsp;wisdom.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://markboulton.co.uk/journal/an-anchor/&quot;&gt;An Anchor - Mark Boulton&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ef356702864a79503a82ed2e288dd6fb/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🧑‍⚖️ The Functional Source License (FSL) is a mostly permissive non-compete license that converts to Apache 2.0&amp;nbsp;or MIT after two years. It is designed for SaaS companies that value both user freedom and developer sustainability. FSL provides everything a developer needs to use and learn from your software without harmful&amp;nbsp;free-riding.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://fsl.software/&quot;&gt;FSL&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/sociologie/&quot;&gt;#sociologie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/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">Papillon</title>
-            <link href="https://larlet.fr/david/2023/12/01/" rel="alternate" type="text/html" />
-            <updated>2023-12-01T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/01/</id>
-            <summary type="html">
-&lt;p&gt;Plus je suis stressé et plus je m’éparpille, une façon de canaliser mon cerveau qui bouillonne, une tentative pour étouffer ce qui remue au fond par un ensevelissement de tâches plus ou moins f·utiles. La beauté de ce mécanisme c’est que même en étant pleinement conscient de cela, je n’ai pas pour autant une prise dessus. Alors je lâche-prise justement, j’accepte cette période, surtout si je sais qu’elle est bornée par une date clé. Savoir qu’il va y avoir un après est déjà&amp;nbsp;libérateur.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🤯 As a family, we have a secret pass phrase to check identity between ourselves in the event of an unexpected video&amp;nbsp;call.&lt;/p&gt;
-&lt;p&gt;It’s a sticking plaster solution. &lt;mark&gt;Long term I suspect we all need 2FA for&amp;nbsp;humans.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;In the meantime, maybe the most effective ward against deepfakes is simply to turn&amp;nbsp;sideways?&lt;/p&gt;
-&lt;p&gt;We should build the habit now. At the beginning of every call, exchange a quick proof-of-humanity by showing our&amp;nbsp;ears.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://interconnected.org/home/2023/09/22/wards&quot;&gt;Old wards and new against fake humans&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/60461be5ec82443fd6a7c12f29e40587/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🦫 “As our collaborator Joe Wheaton [from Utah State University] likes to say, ‘water doesn’t burn,’” Kolarik says. “Beavers maintain healthy riverscapes which store carbon and water. Consistent access to water is key to mitigating the effects of climate disturbances like&amp;nbsp;drought.”&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;Beavers’ role as firefighters&lt;/mark&gt; has already been documented in Idaho. A 2018&amp;nbsp;technical report by Anabranch Solutions, a river restoration company, found that beavers were a major factor in decreasing burn intensity along Baugh Creek during that year’s Sharps&amp;nbsp;Fire.&lt;/p&gt;
-&lt;p&gt;“Where active beaver dams were present, native riparian vegetation persisted, unburnt,” the authors wrote. In our hotter and fierier world, beavers are a&amp;nbsp;buffer.&lt;/p&gt;
-&lt;p&gt;“I once heard a rancher use the analogy of sponges when referring to valley bottoms. If we can successfully rewet the sponges, the West will be much more resilient to climate change, and beavers can keep those sponges wet,” Kolarik&amp;nbsp;says.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://news.mongabay.com/2023/09/nasa-satellites-reveal-restoration-power-of-beavers/&quot;&gt;NASA satellites reveal restoration power of beavers&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7732c1cdc56a5db0f2fd3117f9522fa8/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✋ It should be strictly &lt;strong&gt;opt-in&lt;/strong&gt;. No one should be required to provide their work for free to any person or organization. The online community is under no responsibility to help them create their products. Some will declare that I am “Anti-AI” for saying such things, but that would be a misrepresentation. I am not declaring that these systems should be torn down, simply that &lt;mark&gt;their developers aren’t entitled to our work.&lt;/mark&gt; They can still build those systems with purchased or donated&amp;nbsp;data.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/&quot;&gt;Block the Bots that Feed “AI” Models by Scraping Your Website&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/af6aeab9b848e78334e31b9b7a668413/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😔 Our community has persistent and pervasive problems of a particular sort which we are not allowed to talk about: sexual harassment and assault. Men who assault, harass, and even rape women in our spaces, are protected. A culture of silence is enforced, and those who call out rape, sexual assault, or harassment, those who criticise they who enable and protect these behaviors, are punished, swiftly and&amp;nbsp;aggressively.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://drewdevault.com/2023/09/29/The-forbidden-topics.html&quot;&gt;The forbidden topics&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ae2b427ba896475633726fdd731caf09/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;☢️ [en] The Soviet RTG program is – for me – a foreboding engineering parable about the cost of deploying an idea with no plans for future maintenance. Sure, I can deploy this hot new tech now and it does the job in new and clever ways, but what is the impact if we don’t have a plan for regular maintenance? When future people interact with my contraption, will it work and will it kill anyone? Y’know, the basic concerns every software project deals&amp;nbsp;with.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://daverupert.com/2023/05/soviet-rtgs/&quot;&gt;Lessons from Soviet Russia on deploying small nuclear generators&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/90e565ff0043e34d7fcfc087d66555d3/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🚴 Je n’ai ni gagné ni perdu de poids, je saurais pas dire si il y a le moindre changement niveau muscles/graisse. D’après Strava, je brulais en moyenne 2000&amp;nbsp;kcal par jour à&amp;nbsp;vélo.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://virgule.net/blog/vacances_a_velo_2023.html&quot;&gt;Vacances à vélo 2023&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7863cd9fd3df50880d0d8841307b05f2/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🎯 En tant que travailleurs de la tech, très souvent, nous faisons partie du système, nous participons au problème, &lt;mark&gt;nous sommes un maillon de la chaine productiviste&lt;/mark&gt;&amp;nbsp;: par notre travail, nous contribuons à des modèles capitalistiques coloniaux, le profit de certains au détriment de tous, l’accaparement des ressources de la planète, l’asservissement des êtres humains les plus pauvres et la destruction du&amp;nbsp;vivant.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://richardhanna.dev/blog/2023/ecoconception-ne-suffit-pas.html&quot;&gt;Écoconception des services numériques, et si ça ne suffisait pas&amp;#8239;?&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/026e36c493ee97a30d613864813aaae1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&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">Dix</title>
-            <link href="https://larlet.fr/david/2023/11/27/" rel="alternate" type="text/html" />
-            <updated>2023-11-27T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/11/27/</id>
-            <summary type="html">
-&lt;p&gt;Dix ans que j’apprends à être père. Que la réaction cellulaire en chaîne aspire à devenir incontrôlable. Que ½ plus ½ fait 1&amp;nbsp;tout différent qui découvre ses propres singularités. C’est beau, c’est précieux, c’est un exercice d’équilibriste chaque jour pour que l’ébullition ne fasse pas déborder la&amp;nbsp;casserole.&lt;/p&gt;
-&lt;p&gt;Je suis content que tu aies choisi une machine à coudre comme cadeau. Et que tu sois si heureux et reconnaissant. Je vais m’endormir avec le sourire… et toi&amp;nbsp;aussi.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Perspective</title>
-            <link href="https://larlet.fr/david/2023/09/27/" rel="alternate" type="text/html" />
-            <updated>2023-09-27T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/27/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Let’s call the generally pro-Tailwind group &lt;em&gt;Builders&lt;/em&gt;, and let’s call the generally anti-Tailwind group &lt;em&gt;Crafters&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;This isn’t to say that Crafters don’t build things, or that the Builders aren’t skilled craftspeople. But as a quick and messy shorthand, let’s go with it for a moment, because I think it hints at the values of these two&amp;nbsp;groups.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;Builders clearly value getting the work done as quickly and efficiently as possible. They are making something—likely something with parts beyond the frontend—and are eager to see it through to&amp;nbsp;completion.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;On the other side, the Crafters tend to be seasoned CSS specialists, and almost always enjoy the part of the work that Tailwind is supposed to make easier. It’s fair to say they’ve overcome the challenge presented by CSS—or, at least, &lt;mark&gt;that this is where they &lt;em&gt;like&lt;/em&gt; to be&amp;nbsp;challenged.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;Crafters may be building holistic products and projects, just like Builders. But Crafters generally are less focused on &lt;em&gt;getting through&lt;/em&gt; the frontend as a &lt;em&gt;part&lt;/em&gt; of that work, and instead see the frontend as &lt;em&gt;the product itself&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://joshcollinsworth.com/blog/tailwind-is-smart-steering&quot;&gt;Classic rock, Mario Kart, and why we can’t agree on Tailwind&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/2074a4d527220f5ddf2dc0b4e678c83a/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Un article nuancé qui pose le doigt sur la différence de point de vue dans l’utilisation des outils. Oui, c’est le second article technique d’affilé, après je vais prendre mes&amp;nbsp;gouttes.&lt;/p&gt;
-&lt;p&gt;Le parallèle est intéressant avec les joueurs et les audiophiles car on est toujours dans la recherche de l’accomplissement au-delà de la performance pure. Une histoire de plaisir à arpenter le chemin et à le rendre accessible au plus grand nombre… tout en ayant conscience d’être un peu élitiste en se permettant cela car la face nord offre d’autres&amp;nbsp;défis.&lt;/p&gt;
-&lt;p&gt;Je respecte —&amp;nbsp;et j’admire de plus en plus&amp;nbsp;— les personnes qui n’ont pas besoin d’entrer à fond dans un sujet pour s’amuser. Il y a une innocence dont émane une forme de beauté. Certain·es pourraient y lire une condescendance mal placée mais pas du tout, cette recherche est bien trop souvent un fardeau chronophage qui pourrit la vie et les relations. Un groupe sain nécessite probablement d’avoir les deux façons d’appréhender les choses pour arriver à l’équilibre instable qui consiste à aller de&amp;nbsp;l’avant.&lt;/p&gt;
-&lt;p&gt;Oh, et pour revenir aux CSS, &lt;strong&gt;pour mon usage&lt;/strong&gt; qui est de faire des petits outils résilients en équipe réduite, j’utilise de plus en plus des &lt;em&gt;frameworks&lt;/em&gt; &lt;a href=&quot;https://github.com/dbohdan/classless-css&quot;&gt;sans classes&lt;/a&gt; (ahum) comme &lt;a href=&quot;https://picocss.com/&quot;&gt;Pico.css&lt;/a&gt; qui procurent une base saine, configurable et facilement portable. Est-ce que cela fait de moi un &lt;em&gt;Brafter&lt;/em&gt;&amp;#8239;? (&lt;a href=&quot;https://www.urbandictionary.com/define.php?term=Braft&quot;&gt;Non&lt;/a&gt;.)&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✍️ Most people default to one or another behavior but rarely use them exclusively. Writers will often benefit from talking things out when they get stuck; and talkers will find that occasionally writing something down helps solidify their thoughts. Both strategies can be learned. Whether you’re a writer or a talker isn’t about your inability to do one or the other so much as it is a preferred or optimized&amp;nbsp;mode.&lt;/p&gt;
-&lt;p&gt;This is, incidentally, &lt;mark&gt;a much more valuable way of understanding different working styles&lt;/mark&gt; than the old maker vs manager canard. Both talkers and writers make things (including decisions), but they means by which they make things—and the needs they have in relation to their colleagues—are not the&amp;nbsp;same.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://everythingchanges.us/blog/writers-and-talkers-and-leaders/&quot;&gt;Writers and talkers and leaders, oh my!&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/b2292d98e9d54537c13b8c1e2cae5583/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🐉 But in general, I’d still be wary of using local-first outside real-time / multiplayer / offline use cases. &lt;mark&gt;Local-first is definitely still bleeding-edge.&lt;/mark&gt; You will hit unexpected problems. A good community has rapidly developed, but there’ll still be some stretches on the road where you’ll have to solve novel&amp;nbsp;problems.&lt;/p&gt;
-&lt;p&gt;So: if you need local-first, see if it makes sense to isolate the local-first parts and architect the rest of the app (for now) in a more conventional&amp;nbsp;fashion.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://bricolage.io/some-notes-on-local-first-development/&quot;&gt;Some notes on Local-First Development&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/49f2ce04dd0beb94dc2f662163bc6339/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;😔 En fait ma plus grande inquiétude dans ses parcours hors-circuits sont les autres humains, ceux qui ne comprendraient pas ma&amp;nbsp;démarche.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/03/03/suburb&quot;&gt;banlieue ou suburb&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/5f93f91a46391e0e120dac49298857d1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/recherche/&quot;&gt;#recherche&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/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">Éco-conception</title>
-            <link href="https://larlet.fr/david/2023/09/23/" rel="alternate" type="text/html" />
-            <updated>2023-09-23T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/23/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;De mon temps on disait pas «&amp;nbsp;écoconception&amp;nbsp;» on disait juste «&amp;nbsp;appliquer les prérequis basiques du métier de dev&amp;nbsp;» et on n’était pas plus&amp;nbsp;malheureux.&lt;/p&gt;
-&lt;p&gt;S’il vous faut une formation pour vous empêcher d’afficher 10&amp;#8239;Mo d’images sur votre homepage et d’empiler 50&amp;nbsp;frameworks JS pour faire un formulaire, &lt;mark&gt;c’est peut-être que votre titre initial de «&amp;nbsp;dev full stack senior&amp;nbsp;» était légèrement usurpé.&lt;/mark&gt; Et si l’interopérabilité, la rétrocompatibilité, l’amélioration progressive, l’accessibilité et les perfs sont pour vous de nouvelles compétences tendance à faire valoir sur un CV, je suis navré de vous annoncer que vous étiez jusque ici un&amp;nbsp;escroc.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://mastodon.social/@STPo/111101966708210843&quot;&gt;STPo sur&amp;nbsp;mastodon&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Ce n’est pas vraiment un secret que je fasse partie de la team vieux-rageux-qui-lève-ses-poings-vers-le-ciel (et surtout les yeux&amp;nbsp;🙄) lorsqu’on parle de technique et de web. Le pire étant que plus le temps passe et plus j’ai le sentiment que cette profession se crée sa propre utilité. Il faudrait que je lise &lt;em&gt;Bullshit Jobs&lt;/em&gt; pour être certain de ne pas dire n’importe quoi mais je crois bien que ça s’en rapproche de plus en plus. Ou alors j’en prends davantage&amp;nbsp;conscience.&lt;/p&gt;
-&lt;p&gt;Et ça m’embête autant que de jardiner dans mon petit potager bio tout en vivant au milieu d’une zone commerciale géante bariolée de publicités et traversée par des &lt;abbr title=&quot;sport utility vehicle&quot;&gt;SUV&lt;/abbr&gt; et autres &lt;em&gt;pickups&lt;/em&gt;. Toute ressemblance avec ma dissonance cognitive actuelle serait bien évidemment&amp;nbsp;fortuite.&lt;/p&gt;
-&lt;p&gt;En ce moment, à 15h50, j’écoute les enfants à la fenêtre préparer la chanson de l’année où &lt;a href=&quot;https://www.lafabriqueculturelle.tv/capsules/14586/le-grand-rendez-vous-de-fanny-bloom-et-l-osm-une-chanson-a-l-ecole-les-journees-de-la-culture&quot;&gt;Fanny Bloom leur demande de planter des arbres&lt;/a&gt; alors qu’il y a une file de voitures de plus de 2&amp;nbsp;tonnes qui attendent la sortie de leurs chers bambins. Tout ça pour s’éviter de faire quelques centaines de mètres à&amp;nbsp;pied.&lt;/p&gt;
-&lt;p&gt;Je crois que c’est ça l’éco-conception sur le web&amp;nbsp;: réduire la taille d’une image afin de réduire son empreinte carbone tout en ayant demandé à un &lt;abbr title=&quot;Large Language Model&quot;&gt;LLM&lt;/abbr&gt; de l’avoir&amp;nbsp;générée.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🎯 However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own technical decisions and how those decisions can also contribute to the disappearance of web’s &lt;em&gt;culture&lt;/em&gt; of&amp;nbsp;openness.&lt;/p&gt;
-&lt;p&gt;Inadvertently (for the most part) technical trends and decisions in web development in &lt;mark&gt;the last two decades have lead to what we term a “Technical Enclosure” of the web,&lt;/mark&gt; a processes whereby technical decisions chip away at the #ViewSource affordance that Cory Doctorow discusses in the opening quote of this article, an affordance that existed as a commons for early web&amp;nbsp;developers.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://htmx.org/essays/right-click-view-source/&quot;&gt;The #ViewSource Affordance&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/2782723c95c98a22087e9954b07a8fba/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🤗 I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, &lt;mark&gt;I like to do my part&lt;/mark&gt; which is why I try hard to not collect and keep any data about&amp;nbsp;you.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://manuelmoreale.com/i-don-t-want-your-data&quot;&gt;I don’t want your data&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/73f0ab0b4336be702e863205bd1bbace/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🧑‍⚕️ We in software, sadly, tend to be in the treatments business, not in the patients business. &lt;mark&gt;We’re Big Pharma.&lt;/mark&gt; And in the same way that Big Pharma invests massively in persuading us that we have the illness their potion cures, we have a tendency to try to get the customer’s problem to fit our solution. And so it is that “productivity” tends to be about the potion, and not the&amp;nbsp;patient.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://codemanship.wordpress.com/2023/09/25/the-illusion-of-developer-productivity-opens-the-door-to-snake-oil/&quot;&gt;The Illusion Of Developer “Productivity” Opens The Door To Snake Oil&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/d048e59b323783f6de3b03bda43a02cc/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;💜 Quand il laisse couler l’eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l’oubli n’efface les derniers sourires jusqu’à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d’un ancêtre dont les cendres sont peut-être encore sur le coin d’une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l’évasion d’une enfance&amp;nbsp;heureuse&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/03/15/envers&quot;&gt;endroit de l’envers&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/nostalgie/&quot;&gt;#nostalgie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/qualite/&quot;&gt;#qualité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Documentation</title>
-            <link href="https://larlet.fr/david/2023/09/13/" rel="alternate" type="text/html" />
-            <updated>2023-09-13T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/13/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The deeper I dig into my research, the more case studies and examples I find. Institutional memory is frequently overlooked and undervalued - until the moment when someone needs access to memory right now, and of course by then it’s too late. Good remembering means turning tacit knowledge into explicit knowledge; &lt;mark&gt;if all your tacit knowledge has left the building inside the heads of former colleagues, it’s lost to you&amp;nbsp;forever.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;So I think there’s a case for allowing and encouraging documentation for teams, just as much as documentation for software. Writing that documentation is a task, It needs to be part of someone’s job. Every organisation needs a little bit of storytelling capability, to help make that job&amp;nbsp;easier.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://gilest.org/htr.html&quot;&gt;How teams remember&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/5a9fa7db62f151b8a863b949ed4e9e5f/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;J’ai développé un outil pour Scopyleft l’année dernière qui s’intitule «&amp;nbsp;Le Voilier&amp;nbsp;». Il s’agit d’un lieux où l’on consigne nos discussions, propositions et résolutions. C’était important car il y avait pas mal de perte/dilution d’information orale, ce qui est classique en équipes distribuées qui grandissent. Depuis un an et demi, il y a 381&amp;nbsp;sujets qui ont été consignés dans ce &lt;a href=&quot;https://larlet.fr/david/2022/12/19/&quot;&gt;journal&lt;/a&gt; de bord collectif, c’est un outil vivant. Des fonctionnalités bourgeonnent ou passent au compost au gré des besoins, c’est assez plaisant d’avoir la flexibilité de connaître le générateur du site (350&amp;nbsp;lignes de Python à ce jour) et de pouvoir sortir du cadre sans que ce soit trop&amp;nbsp;douloureux.&lt;/p&gt;
-&lt;p&gt;Cela a commencé avec un site totalement statique qui était (re)construit par l’intégration continue à chaque ajout de fichier &lt;em&gt;markdown&lt;/em&gt; avec les bonnes méta-données dans un dossier dédié. Classique. C’était facile pour les personnes familières de git(lab) mais moins pratique pour celles qui ne le sont pas, notamment lorsqu’il faut prendre des notes en séance. L’expérience utilisateur·ice des forges logicielles n’est pas vraiment adaptée à un tel usage, surtout dans un contexte de charge cognitive&amp;nbsp;élevée.&lt;/p&gt;
-&lt;p&gt;J’ai donc transformé cela en site &lt;em&gt;semynamique&lt;/em&gt; 🌱&amp;nbsp;: on reste sur la même infrastructure mais je rajoute un formulaire (toujours statique) qui va soumettre les données vers une seule fonction Python/wsgi qui consiste à créer le fichier &lt;em&gt;markdown&lt;/em&gt; conforme aux attentes de l’outil et à le pousser sur le dépôt. Cela a rendu l’outil plus accessible et avenant. Depuis, j’ai décliné ce principe pour d’autres &lt;em&gt;scenarii&lt;/em&gt; avec de bons&amp;nbsp;retours.&lt;/p&gt;
-&lt;p&gt;Avec l’expérience et un petit script de déploiement, cela me prend moins d’une heure à mettre en place sur AlwaysData avec un strict minimum de maintenance. J’ai une relative tranquillité d’esprit aussi car seule une petite partie du site serait inutilisable si le service tombait et il reste la possibilité d’ajouter des fichiers dans git à la main s’il y avait une&amp;nbsp;urgence.&lt;/p&gt;
-&lt;p&gt;Je ne sais pas trop quoi faire à partir de là, je me dis que ça pourrait en inspirer d’autres. Entre les sites purement statiques et les usines à gaz en JS, il y a tout un dégradé de couleurs enthousiasmantes, certaines restant à&amp;nbsp;découvrir&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;&lt;em&gt;Peut-être qu’à un moment, on pourrait aussi proposer un catalogue d’outils utiles aux coopératives — à l’instar de &lt;a href=&quot;https://paheko.cloud/&quot;&gt;Paheko&lt;/a&gt; pour les&amp;nbsp;associations…&lt;/em&gt;&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🏡 Une grande partie de mon entourage est déjà propriétaire. Ça en dit long sur la sphère dans laquelle j’évolue. J’ai l’impression que le fait d’acheter une maison fait partie de la liste non-négociable d’une vie réussie dans notre monde capitaliste. Jusqu’à très récemment, je n’avais jamais interrogé ce&amp;nbsp;postulat.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://ynote.hk/mots/argent/propriete.html&quot;&gt;Propriété par Fanny Cheung&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/37b0c9d01d6f788bee398b64377cb6c1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🔨 Yes, it’s fair to point out that AI in its many different software manifestations can be considered a tool. But that is not the point of the statement. The word to watch out for is “just”. If someone were to say ”it’s a tool”, that makes sense. But the word “just” is there to shed&amp;nbsp;accountability.&lt;/p&gt;
-&lt;p&gt;Hence my concern is that the statement itself removes accountability and consideration for the bigger picture effects. &lt;mark&gt;Saying something is just a tool creates the faulty mental model&lt;/mark&gt; of all tools having interchangeable qualities from an ethical perspective, which simply isn’t&amp;nbsp;true.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://axbom.com/hammer-ai/&quot;&gt;If a hammer was like AI…&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/aac3c4716f9ff73e7409ecbc9550491b/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;💯 When it comes to front-end development, I’m worried that we’ve reached a state where the more complex over-engineered approach is viewed as the&amp;nbsp;default.&lt;/p&gt;
-&lt;p&gt;I may be committing a fundamental attribution error here, but I think that we’ve reached this point not because of any consideration for users, but rather &lt;mark&gt;because of how it makes us developers feel.&lt;/mark&gt; Perhaps building an old-fashioned website that uses HTML for navigations feels too easy, like it’s beneath us. But building an “app” that requires JavaScript just to render text on a screen feels like &lt;em&gt;real&lt;/em&gt;&amp;nbsp;programming.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://adactio.com/journal/20442&quot;&gt;Multi-page web apps&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/efc348f6559d55129657c7ba9d740b76/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/partage/&quot;&gt;#partage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/scopyleft/&quot;&gt;#scopyleft&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">Blogroll</title>
-            <link href="https://larlet.fr/david/2023/09/09/" rel="alternate" type="text/html" />
-            <updated>2023-09-09T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/09/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Je lie cinq blogs person­nels, choi­sis arbi­trai­re­ment et sans hiérar­chie, avec une phrase sur pourquoi ils me sont impor­tants, en choi­sis­sant un billet précis que j’ai aimé y trou­ver&amp;nbsp;[…]&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://n.survol.fr/n/la-blogchain&quot;&gt;La blogchain - Carnet de notes&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/543d854b54593b8bf1adc2c491468bca/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je partageais sur Mastodon l’initiative d’Alex Sirac d’avoir fait un·e &lt;a href=&quot;https://blogroll.fr/&quot;&gt;&lt;em&gt;blogroll&lt;/em&gt;&lt;/a&gt; et en explorant le site je me rends compte qu’&lt;a href=&quot;https://blogroll.fr/articles-recents/&quot;&gt;il y a une forme de &lt;em&gt;planet&lt;/em&gt;&lt;/a&gt; et ça m’a rappelé de doux souvenirs. Je me souviens d’avoir mis ça en place sur cet espace à un moment, ça m’a rendu nostalgique 5&amp;nbsp;minutes… et j’ai passé les deux heures suivantes à le coder en mode statique&amp;nbsp;:-). Merci-pas-merci&amp;nbsp;Alex&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Il y a donc maintenant &lt;a href=&quot;https://larlet.fr/david/blogroll/&quot;&gt;une page de blogroll&lt;/a&gt; sur ce site avec les deux derniers billets publiés par personne listée. J’espère que j’arriverai à maintenir une page qui représente mes lectures réelles. Elle est loin d’être exhaustive car j’ai 150&amp;nbsp;flux de personnes dans mon agrégateur. J’avais plus envie d’encourager la diversité des&amp;nbsp;publications.&lt;/p&gt;
-&lt;p&gt;J’ai rencontré deux problèmes durant cette&amp;nbsp;expérience&amp;nbsp;:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;strong&gt;humain&lt;/strong&gt;&amp;nbsp;: certaines personnes souhaitent ne publier certains billets que par le biais de leur flux, est-ce qu’un agrégateur public ne va pas à l’encontre de cette&amp;nbsp;volonté&amp;#8239;?&lt;/li&gt;
-&lt;li&gt;&lt;strong&gt;technique&lt;/strong&gt;&amp;nbsp;: une proportion non négligeable de flux ne sont pas valides / standards, j’ai signalé cela à certain·es auteur·ices. Un &lt;a href=&quot;https://validator.w3.org/feed/&quot;&gt;outil existe&lt;/a&gt; de la part du W3C pour effectuer cette&amp;nbsp;vérification.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;Je me suis aussi demandé si c’était pertinent de faire comme Éric le propose avec un billet d’entrée particulier. C’est ce que &lt;a href=&quot;https://www.hypothermia.fr/liens/&quot;&gt;fait Eli&lt;/a&gt; par exemple et j’avais trouvé ça chouette et plus stimulant qu’une simple liste, je garde ça dans un coin de tête. Je sais aussi d’expérience qu’il ne faut pas que je me prenne trop la tête si je veux garder une liste à jour sinon je vais vite avoir la flemme. Peut-être que je fais suffisamment de liens externes dans mes&amp;nbsp;publications.&lt;/p&gt;
-&lt;p&gt;&lt;del&gt;J’aimerais également prendre le temps de faire une liste des articles techniques qui ont compté pour moi, à l’instar de &lt;a href=&quot;https://ericwbailey.website/formative-posts/&quot;&gt;Eric W. Bailey&lt;/a&gt; et &lt;a href=&quot;https://esif.dev/&quot;&gt;tant&lt;/a&gt; &lt;a href=&quot;https://wdrl.info/evergreen/&quot;&gt;d’autres&lt;/a&gt;.&lt;/del&gt; Bon, en fait &lt;a href=&quot;https://larlet.fr/david/stream/2019/12/27/&quot;&gt;je l’ai déjà faite&lt;/a&gt;, parfois ma mémoire numérique m’aide mais me rappelle que &lt;a href=&quot;https://larlet.fr/david/stream/2018/04/07/&quot;&gt;la spirale&lt;/a&gt; n’est peut-être pas compatible avec la vieillesse, oups&amp;nbsp;😅. J’aime bien l’idée de la &lt;a href=&quot;https://gilest.org/shoebox.html&quot;&gt;boîte à chaussures&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/462022ad2f27ff57387e9d0f49e96bad/&quot;&gt;cache&lt;/a&gt;) aussi, avec la crainte que ce musée des &lt;em&gt;vaporwares&lt;/em&gt; ne soit un peu trop&amp;nbsp;déprimant.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Mot du jour&amp;nbsp;: &lt;a href=&quot;https://fr.wikipedia.org/wiki/Eucatastrophe&quot;&gt;Eucatastrophe&lt;/a&gt; (j’ai arraché deux dents&amp;nbsp;aujourd’hui).&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/decentralisation/&quot;&gt;#décentralisation&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Char&amp;nbsp;2</title>
-            <link href="https://larlet.fr/david/2023/09/08/" rel="alternate" type="text/html" />
-            <updated>2023-09-08T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/08/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Je voulais le &lt;a href=&quot;https://larlet.fr/david/2020/02/07/#cars&quot;&gt;moins d’électronique&lt;/a&gt; possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la&amp;nbsp;ville.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://larlet.fr/david/2021/07/16/&quot;&gt;Char&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Suite des mes aventures avec une &lt;a href=&quot;http://tmp.larlet.fr/ccmc/&quot;&gt;comptabilité à jour&lt;/a&gt; depuis bientôt 3&amp;nbsp;ans. Divulgâcheur&amp;nbsp;: ça coûte très&amp;nbsp;cher.&lt;/p&gt;
-&lt;p&gt;Le résultat n’est pas joli-joli avec environ vingt mille kilomètres au compteur sur la période. Je n’ai pas non plus réussi à descendre en-dessous des 12L/100km avec ce véhicule qui n’a pas été pensé pour être économe et qui alimente les 4&amp;nbsp;roues en permanence… MAIS je crois que si c’était à refaire, je choisirais un &lt;em&gt;véhicule stupide&lt;/em&gt; à&amp;nbsp;nouveau.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Car companies are on the forefront of postcapitalism, and &lt;mark&gt;they understand that digital is the key to rent-extraction.&lt;/mark&gt; Remember when BMW announced that it was going to rent you the seatwarmer in your own fucking&amp;nbsp;car?&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;This is the urinary tract infection business model: without digitization, all your car’s value flowed in a healthy stream. But once the car-makers add semiconductors, each one of those features comes out in a painful, burning dribble, with every button on that farkakta touchscreen wired directly into your&amp;nbsp;credit-card.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://pluralistic.net/2023/07/24/rent-to-pwn/&quot;&gt;Pluralistic: Autoenshittification (24&amp;nbsp;July 2023)&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/8be5d8a651e8f8e211cfe10fd49bb3f0/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je pourrais citer tellement de passages de cet article de Cory Doctorow qui confirment ce choix que ça en est édifiant. Et si vous pensez que certaines marques ne font quand même pas n’importe quoi avec vos données, Mozilla se charge — chiffres à l’appui&amp;nbsp;— de démentir cette&amp;nbsp;idée&amp;nbsp;:&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The gist is: they can collect super intimate information about you -- from your medical information, your genetic information, to your “sex life” (seriously), to how fast you drive, where you drive, and what songs you play in your car -- in huge quantities. They then use it to invent more data about you through “inferences” about things like your intelligence, abilities, and&amp;nbsp;interests.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;It’s bad enough for the behemoth corporations that own the car brands to have all that personal information in their possession, to use for their own research, marketing, or the ultra-vague “business purposes.” But then, most (84%) of the car brands we researched say they can share your personal data -- with service providers, data brokers, and other businesses we know little or nothing about. Worse, &lt;mark&gt;nineteen (76%) say they can sell your personal&amp;nbsp;data.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;A surprising number (56%) also say they can share your information with the government or law enforcement in response to a “request.” Not a high bar court order, but something as easy as an “informal request.” Yikes -- that’s a very low&amp;nbsp;bar!&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://foundation.mozilla.org/en/privacynotincluded/articles/its-official-cars-are-the-worst-product-category-we-have-ever-reviewed-for-privacy/&quot;&gt;It’s Official: Cars Are the Worst Product Category We Have Ever Reviewed for Privacy&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/81eb35bbd276cb28230820176152af87/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Progressivement, j’en apprends un peu plus sur la mécanique d’une vieille voiture thermique et je crois que c’est ma seule option. Elle n’est peut-être pas payante mais elle me garantit une certaine &lt;em&gt;confidensanité&lt;/em&gt;.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Welcome to the future. &lt;mark&gt;Sabotage&amp;nbsp;it.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://thenib.com/im-a-luddite/&quot;&gt;I’m a Luddite (and So Can&amp;nbsp;You!)&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😶 You can’t talk about all the friends and family you’ve lost. You can’t talk about how tired you are. You can’t talk about politics. You can’t talk about climate change. You can’t talk about the wildfires or that town that burned down. You can’t talk about living through the hottest days in human history. You can’t talk about masks or air purifiers. You can’t talk about student loans. You can’t talk about the wars we’re fighting or getting ready to&amp;nbsp;fight.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;You can’t talk about anything that&amp;nbsp;matters.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;You can only talk about the latest shitty superhero movie. You can talk about Barbie. You can talk about celebrity gossip. You can talk about the vacation you pretended to enjoy. You can talk about&amp;nbsp;yoga.&lt;/p&gt;
-&lt;p&gt;You can talk about your morning&amp;nbsp;routine.&lt;/p&gt;
-&lt;p&gt;You can talk about&amp;nbsp;sports.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.okdoomer.io/watching-the-world-burn-on-our-phones/&quot;&gt;Watching The World Burn on Our Phones&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/977dc3c51f364f41db786f881d2c3fd2/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😁 I’m not young enough to know&amp;nbsp;everything.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://blog.jim-nielsen.com/2023/family-tree-wisdom/&quot;&gt;Family Tree Wisdom&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/d40295a6495f934934436470ad425cac/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/confidentialite/&quot;&gt;#confidentialité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gafam/&quot;&gt;#gafam&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/traces/&quot;&gt;#traces&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">Conteur</title>
-            <link href="https://larlet.fr/david/2023/09/07/" rel="alternate" type="text/html" />
-            <updated>2023-09-07T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/07/</id>
-            <summary type="html">
-&lt;p&gt;Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant —&amp;nbsp;comme la fin de semaine dernière&amp;nbsp;— on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, &lt;del&gt;anis&lt;/del&gt; gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour &lt;del&gt;écrire&lt;/del&gt; taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que &lt;a href=&quot;https://ia.net/writer/support/basics/markdown-guide&quot;&gt;c’est possible&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/478260db4b078551676bf263cbeeaa52/&quot;&gt;cache&lt;/a&gt;) avec &lt;code&gt;+++&lt;/code&gt;&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Au passage, je découvre qu’il y a tout un tas de possibilités dans un logiciel que j’utilise depuis des années. Comme les formules (dans les tableaux) ou les métadonnées qui viennent dynamiquement remplacer des variables. Une chouette découverte après avoir utilisé récemment les &lt;em&gt;templates&lt;/em&gt; pour uniformiser mes&amp;nbsp;courriers.&lt;/p&gt;
-&lt;p&gt;Et c’est ainsi que je vous conte ce qu’il nous est arrivé en contant cette histoire. Je vous accorde que c’est un peu &lt;em&gt;meta&lt;/em&gt;.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-09-06-extrait-quete.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-09-06-extrait-quete.jpg&quot;
-            width=&quot;3024&quot; height=&quot;3024&quot;
-            srcset=&quot;/static/david/2023/2023-09-06-extrait-quete.jpg 3024w, /static/david/2023/2023-09-06-extrait-quete_660x440.jpg 660w, /static/david/2023/2023-09-06-extrait-quete_990x660.jpg 990w, /static/david/2023/2023-09-06-extrait-quete_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3024 / 3024))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Un extrait de l’histoire&amp;nbsp;: Sur le chemin du retour, nous nous dimes que nous allions écrire cette histoire.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Mais on aime ça le meta. (Et les typos. (Et le passé&amp;nbsp;simple.))&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🪦 The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100&amp;nbsp;years of a trusted platform to a loved one, &lt;mark&gt;this plan is a testament to the future&lt;/mark&gt;’s boundless&amp;nbsp;potential.&lt;/p&gt;
-&lt;p&gt;The cost is $38,000. We hope people&amp;nbsp;renew.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/&quot;&gt;Introducing the 100-Year Plan: Secure Your Online Legacy for a Century&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/57c0b22f733354552de63db112f51b20/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;📜 A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. &lt;mark&gt;Without constant maintenance and management,&lt;/mark&gt; most digital information will be lost in just a few decades. Our modern records are far from&amp;nbsp;permanent.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/&quot;&gt;Shining a Light on the Digital Dark Age&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🔋 But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something &lt;em&gt;consistent&lt;/em&gt;. We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. &lt;mark&gt;What differentiates these experiences isn’t the number of hours in the day but the energy we get from the work.&lt;/mark&gt; Energy &lt;em&gt;makes&lt;/em&gt;&amp;nbsp;time.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://everythingchanges.us/blog/energy-makes-time/&quot;&gt;Energy makes time&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/3f4be4add2995420dc6be529f1032e46/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/aventure/&quot;&gt;#aventure&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Retour</title>
-            <link href="https://larlet.fr/david/2023/09/06/" rel="alternate" type="text/html" />
-            <updated>2023-09-06T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/06/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The app will eventually become obsolete. It’s the plain text files I create that are designed to last. Who knows if anyone will want to read them besides me, but &lt;em&gt;future me&lt;/em&gt; is enough of an audience to make it&amp;nbsp;worthwhile.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://stephango.com/file-over-app&quot;&gt;File over app - Steph Ango&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/20d288eb47779c4f1b3f36fb86aa7108/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je vais revenir délicatement publier par ici. Ces derniers mois ont été… mmh, agités… mais je commence à retrouver un certain équilibre. Beaucoup de phases qui ne s’articulaient pas comme je l’espérais, d’attention trop superficielle mal compensée, au milieu d’une grosse &lt;a href=&quot;https://larlet.fr/david/2023/01/23/&quot; title=&quot;Déception&quot;&gt;déception&lt;/a&gt; qui a laissé des traces profondes. J’aurais au moins appris la différence entre l’inspiration et la manipulation. &lt;em&gt;The Hard Way™&lt;/em&gt;. Je suis très reconnaissant envers toutes les personnes qui ont fait que je ne me suis pas senti trop isolé ou vulnérable pendant cette&amp;nbsp;période.&lt;/p&gt;
-&lt;p&gt;Grâce à un départ, &lt;a href=&quot;http://scopyleft.fr/&quot;&gt;Scopyleft&lt;/a&gt; prend une &lt;a href=&quot;https://larlet.fr/david/2021/03/17/&quot;&gt;autre dimension&lt;/a&gt; et redéfinit ses aspirations collectivement à travers des échanges plus sains et apaisés. Un arbre tombe et de nombreuses autres espèces arrivent enfin à capter la lumière pour proposer un autre paysage, envisager un nouvel écosystème&amp;nbsp;🌻🐝.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Et puis, j’ai des dizaines d’onglets à partager à mon &lt;em&gt;futur moi&lt;/em&gt;.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;💭 If you’re more a guess-culture person, asking people for help without knowing their circumstances can feel rude or intrusive. Broadcasting publicly your need for help can feel awkward and&amp;nbsp;vulnerable.&lt;/p&gt;
-&lt;p&gt;If you’re more of an ask-culture person, the guess-culture example of juggling everyone’s specific scenarios and the historical context of favors &lt;mark&gt;probably seems exhausting.&lt;/mark&gt; Dropping hints in the hopes that you won’t even have to make your request can feel extra passive and&amp;nbsp;manipulative.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://jeanhsu.substack.com/p/ask-vs-guess-culture&quot;&gt;Ask vs guess culture&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ba42826808418339bdc0364586bea5bf/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😔 But really the baseline of web design is so low because there’s a lack of tenderness, care, and empathy. &lt;mark&gt;It’s because we don’t see the making of a website as a worthy profession.&lt;/mark&gt; It’s because we hope to squeeze the last bit of juice from the orange by mulching people in between modals and pop ups and cookie&amp;nbsp;banners.&lt;/p&gt;
-&lt;p&gt;So how do we do better? How do we take better care of our&amp;nbsp;websites?&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://robinrendle.com/notes/why-are-websites-embarrassing/&quot;&gt;Why are websites embarrassing?&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7458294e070577c610294f8ec927c30d/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🍏 It would also inject the potential for a slippery slope of unintended consequences. Scanning for one type of content, for instance, &lt;mark&gt;opens the door for bulk surveillance&lt;/mark&gt; and could create a desire to search other encrypted messaging systems across content types (such as images, videos, text, or audio) and content categories. How can users be assured that a tool for one type of surveillance has not been reconfigured to surveil for other content such as political activity or religious persecution? Tools of mass surveillance have widespread negative implications for freedom of speech and, by extension, democracy as a whole. Also, designing this technology for one government could require applications for other countries across new data&amp;nbsp;types.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://larlet.fr/static/david/2023/apple-letter-to-heat-initiative.pdf&quot;&gt;Apple letter to Heat initiative&lt;/a&gt; (PDF, 121Ko)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/intimite/&quot;&gt;#intimité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/scopyleft/&quot;&gt;#scopyleft&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">France</title>
-            <link href="https://larlet.fr/david/2023/07/28/" rel="alternate" type="text/html" />
-            <updated>2023-07-28T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/07/28/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Si vous êtes venus pour m’aider, vous perdez votre temps. Mais si vous êtes venus parce que votre libération est liée à la mienne, alors travaillons&amp;nbsp;ensemble.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;Lilla Watson (militante autochtone&amp;nbsp;australienne)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Sentiment toujours très particulier pour l’expatrié que je suis de faire un séjour dans son pays de&amp;nbsp;naissance.&lt;/p&gt;
-&lt;p&gt;Il y a les paysages, les personnes, les odeurs, les situations à la fois si réelles et si cotonneuses. Comme si les émotions étaient encore sous le coup du décalage horaire. Comme si l’éphémère se devait d’être intense, presque sur-joué. Comme si l’enjeu pouvait être un retour. Ou encore plus de&amp;nbsp;kérosène.&lt;/p&gt;
-&lt;p&gt;Il y a le monde. Partout. Tout le temps. L’impression d’être asphyxié dans ces petites rues caniculaires (coucou Pomme). Et l’inquiétude qui monte de se demander ce qu’il va arriver à toutes ces personnes. Dans l’étuve, les grenouilles apprécient l’eau chaude tant qu’il y en a — moins les moustiques&amp;nbsp;tigres.&lt;/p&gt;
-&lt;p&gt;Il y a les montagnes, celles que l’on évalue en se cassant la nuque. Celles qui aspirent et inspirent. Qui permettent de se sentir vivant… à en perdre le souffle. Qui requièrent de s’élever pour élargir sa vision du monde. Celles qui me manquent tant. Je n’ai pas arrêté de faire du sport, j’ai arrêté d’être attiré par des&amp;nbsp;sommets.&lt;/p&gt;
-&lt;p&gt;Il y a &lt;em&gt;toujours&lt;/em&gt; cette ambiance nauséabonde qui se traduit en un chapelet de micro-agressions auxquelles on ne peut être pleinement sensible lorsqu’on baigne dedans. C’est leur absence, ailleurs, qui les rend d’autant plus visibles. Ma parentalité en France serait une épreuve pour justifier des abus injustifiables (et je croule déjà sous mes propres&amp;nbsp;contradictions).&lt;/p&gt;
-&lt;p&gt;Il y a les retrouvailles, les fruits mûrs, les rigolades, le non soutenable qui étire les yeux et les sourires. La culpabilité d’imposer ce manque —&amp;nbsp;et sa compensation&amp;nbsp;— à un enfant aussi, qui peut difficilement rationaliser depuis le cocon familial si douillet des vacances. Il y a les reproches qui grandissent avec le besoin de se construire une jeune identité. Il y a les proches qui vieillissent avec la peur de devoir déconstruire leurs&amp;nbsp;in·certitudes.&lt;/p&gt;
-&lt;p&gt;Il y a læ covid. Ah non, pardon&amp;nbsp;🫣.&lt;/p&gt;
-&lt;p&gt;Il y a la&amp;nbsp;France.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/nostalgie/&quot;&gt;#nostalgie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/sociologie/&quot;&gt;#sociologie&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">Perles</title>
-            <link href="https://larlet.fr/david/2023/07/02/" rel="alternate" type="text/html" />
-            <updated>2023-07-02T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/07/02/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Mon travail de scientifique m’a appris comment les gens construisent des théories pour avoir le sentiment de contrôler leur&amp;nbsp;environnement.&lt;/p&gt;
-&lt;p&gt;Ils se comportent ensuite de manière à renforcer ces théories. Les personnes autistes partagent ce désir «&amp;nbsp;normal&amp;nbsp;» de contrôler leur environnement. Ce qui diffère pour elles, c’est l’intensité avec laquelle cet environnement les déborde. Des connexions neuronales atypiques dans le cerveau des personnes autistes peuvent conduire à une perception anormale, augmentant l’importance des événements individuels mais affaiblissant la capacité à relier ces morceaux de vie en des représentations plus intégrées et&amp;nbsp;abstraites.&lt;/p&gt;
-&lt;p&gt;Les comportements rigides et répétitifs des personnes autistes commencent à avoir un sens lorsque nous les considérons comme la réaction normale d’un être humain à un environnement sensoriel très anormal, plutôt que comme des symptômes d’une maladie. Les symptômes autistiques sont ce qu’une personne fait pour forcer un monde chaotique à suivre un scénario prévisible. Nous essayons tous d’imposer un ordre narratif à ce qui peut sembler un monde fondamentalement chaotique. La différence dans l’autisme est qu’il y a plus de chaos à&amp;nbsp;contrôler.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;À cet égard, l’étude de l’autisme peut nous en apprendre beaucoup sur l’humanité en général&lt;/mark&gt; et sur la façon dont la détresse psychologique peut être expliquée comme une réaction rationnelle, bien qu’extrême, à un monde qui ne tourne pas&amp;nbsp;rond.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;L’imperméable jaune&lt;/em&gt;, Matthew&amp;nbsp;Belmonte&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Une citation extraite de &lt;em&gt;Des gènes, des synapses, des autismes&lt;/em&gt; de Thomas Bourgeron qui est assez technique et que je recommande. Cela me donne envie de séquencer mon génome pour jouer avec mais comment réduire les intermédiaires&amp;nbsp;profiteurs&amp;#8239;?&lt;/p&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;La génétique n’est pas la science des gènes mais la science de la diversité génétique qui contribue à notre&amp;nbsp;individualité.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;Ibid.&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;hr /&gt;
-&lt;p&gt;Avec son&amp;nbsp;consentement&amp;nbsp;:&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-explique-ton-hypothese.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-explique-ton-hypothese.jpg&quot;
-            width=&quot;3022&quot; height=&quot;675&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-explique-ton-hypothese.jpg 3022w, /static/david/2023/2023-07-02-explique-ton-hypothese_660x440.jpg 660w, /static/david/2023/2023-07-02-explique-ton-hypothese_990x660.jpg 990w, /static/david/2023/2023-07-02-explique-ton-hypothese_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 675))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Explique ton hypothèse&amp;nbsp;: Ça. (← Ceci n’est pas une hypothèse.)&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Ni une&amp;nbsp;pipe.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-que-remarques-tu.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-que-remarques-tu.jpg&quot;
-            width=&quot;3022&quot; height=&quot;675&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-que-remarques-tu.jpg 3022w, /static/david/2023/2023-07-02-que-remarques-tu_660x440.jpg 660w, /static/david/2023/2023-07-02-que-remarques-tu_990x660.jpg 990w, /static/david/2023/2023-07-02-que-remarques-tu_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 675))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Que remarques-tu&amp;#8239;? J’ai remarqué que j’ai raison.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Devenu un&amp;nbsp;mème.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-pourquoi.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-pourquoi.jpg&quot;
-            width=&quot;3022&quot; height=&quot;819&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-pourquoi.jpg 3022w, /static/david/2023/2023-07-02-pourquoi_660x440.jpg 660w, /static/david/2023/2023-07-02-pourquoi_990x660.jpg 990w, /static/david/2023/2023-07-02-pourquoi_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 819))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Pourquoi&amp;#8239;? On le dit tout le temps.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;La&amp;nbsp;facilité.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-enonce-une-hypothese.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-enonce-une-hypothese.jpg&quot;
-            width=&quot;3022&quot; height=&quot;1185&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-enonce-une-hypothese.jpg 3022w, /static/david/2023/2023-07-02-enonce-une-hypothese_660x440.jpg 660w, /static/david/2023/2023-07-02-enonce-une-hypothese_990x660.jpg 990w, /static/david/2023/2023-07-02-enonce-une-hypothese_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 1185))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Je le pense parce que&amp;nbsp;: car dur + dur + dur = méga-dur&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;La&amp;nbsp;science.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-vie-de-groupe.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-vie-de-groupe.jpg&quot;
-            width=&quot;2932&quot; height=&quot;2190&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-vie-de-groupe.jpg 2932w, /static/david/2023/2023-07-02-vie-de-groupe_660x440.jpg 660w, /static/david/2023/2023-07-02-vie-de-groupe_990x660.jpg 990w, /static/david/2023/2023-07-02-vie-de-groupe_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2932 / 2190))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Pourquoi doit-on apprendre à vivre en groupe&amp;#8239;? Pour s’amuser. (Car nous vivons en société.) Est-il facile selon toi de vivre en groupe&amp;#8239;? Explique pourquoi. NON. J’arrive pas à attendre qu’elle ai terminer&amp;#8239;! (Ce n’est pas que du travail à deux)&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Une histoire de chats et de&amp;nbsp;chiens.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Particules</title>
-            <link href="https://larlet.fr/david/2023/06/26/" rel="alternate" type="text/html" />
-            <updated>2023-06-26T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/06/26/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;La mémoire est la source de la libération, et l’oubli est la racine de&amp;nbsp;l’exil.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;Ba’al&amp;nbsp;Shem-Tov&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;On attend que les particules fines retombent pour pouvoir décoller. Si ça n’est pas un grand écart &lt;em&gt;facepalm&lt;/em&gt;&amp;nbsp;ça…&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Pas vraiment d’&lt;a href=&quot;https://larlet.fr/david/2021/06/15/&quot;&gt;avihonte&lt;/a&gt; chez les ami·es (expatrié·es). J’évite de trop y penser, je vis déjà assez reclus comme ça. Et je suis loin d’être&amp;nbsp;exemplaire.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Il y a un besoin urgent à ce que je devienne ringard. Comme la cigarette, la voiture, l’avion. Un sous-groupe de ma génération doit incarner ce qu’il ne faut &lt;strong&gt;pas&lt;/strong&gt;&amp;nbsp;devenir.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Les Sardaukars ont en eu marre de se battre contre des Fremens et sont retournés sur Geidi Prime pour le dire. Denis Villeneuve doit se frotter les&amp;nbsp;mains.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;J’ai lu le Paradoxe de Fermi de Jean-Pierre Boudine ainsi que &lt;a href=&quot;https://www.visualcapitalist.com/path-of-human-evolution/&quot;&gt;cette illustration&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/58bdc0bd6ed37d5990d24384ee40022b/&quot;&gt;cache&lt;/a&gt;), serait-on sur la dernière marche&amp;#8239;? Celle du grand&amp;nbsp;sot.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Combien d’appareils pourraient être rendus meilleurs en enlevant des choses dedans&amp;#8239;? Tous&amp;#8239;? &lt;a href=&quot;http://mikebeauchamp.com/misc/sennheiser-hd-555-to-hd-595-mod/&quot;&gt;Au moins un.&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/8f76362de8331d4dc5d3e0e0a882606e/&quot;&gt;cache&lt;/a&gt;)&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;J’ai failli acheter une casquette sur laquelle était&amp;nbsp;inscrite&amp;nbsp;:&lt;/p&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;Ce qui distingue les garçons des hommes c’est le prix de leurs jouets. (Oui, ça sonnait mieux en&amp;nbsp;anglais…)&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Depuis, je ris&amp;nbsp;jaune.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Je me suis mis au skate pour pouvoir suivre l’enfant. Je me demande à quel point le &lt;em&gt;longboard&lt;/em&gt; est un skate bourgeois. Je retrouve des sensations de &lt;em&gt;snowboard&lt;/em&gt; intéressantes cela&amp;nbsp;dit.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Je suis content de ne pas avoir pris mon appareil photo pour cette dernière sortie en forêt. Documenter &lt;a href=&quot;https://larlet.fr/david/2023/06/12/&quot; title=&quot;Apocalypse&quot;&gt;l’apocalypse&lt;/a&gt; sans la rendre belle est un enjeu&amp;nbsp;important.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-06-25-ouareau-smog.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-06-25-ouareau-smog.jpg&quot;
-            width=&quot;3024&quot; height=&quot;4032&quot;
-            srcset=&quot;/static/david/2023/2023-06-25-ouareau-smog.jpg 3024w, /static/david/2023/2023-06-25-ouareau-smog_660x440.jpg 660w, /static/david/2023/2023-06-25-ouareau-smog_990x660.jpg 990w, /static/david/2023/2023-06-25-ouareau-smog_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3024 / 4032))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Un soleil rouge au-dessus de la forêt embrumée par des cendres à des centaines de kilomètres plus au nord.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Ou&amp;nbsp;ringard.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/solastalgia/&quot;&gt;#solastalgia&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">Village</title>
-            <link href="https://larlet.fr/david/2023/06/19/" rel="alternate" type="text/html" />
-            <updated>2023-06-19T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/06/19/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Because they are precious, it’s important to understand what makes a village a village, and what kills the&amp;nbsp;village.&lt;/p&gt;
-&lt;p&gt;The central thesis is that what these villages can’t tolerate is a sustained large influx of strangers. A stranger in this context is an nothing more or less than an unfamiliar face. I know it tends to draw the mind in those directions, but please refrain from projecting concepts such as nationality or ethnicity on the term. We’re all simultaneously villagers and strangers in various social&amp;nbsp;circumstances.&lt;/p&gt;
-&lt;p&gt;A slow trickle of strangers is tolerable, a brief large influx is fine; the strangers’ average interaction is eventually stabilizes and biases toward the a stable group of members, and they quickly find shared values and become villagers too. They become familiar faces, and undoubtedly make their mark on the shared culture. That’s often a refreshing and welcome thing. It’s still a&amp;nbsp;village.&lt;/p&gt;
-&lt;p&gt;When sustained growth is too large, the strangers’ average interaction is with other strangers, and even if this would have eventually stabilized into something like a village, there are yet more strangers to prevent this from happening. Everyone stays strangers, and a sort of stranger-culture emerges where guards are up by default because there are never any familiar&amp;nbsp;faces.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;It’s no longer a village, but something like a train station.&lt;/mark&gt; The default mode of being is &lt;em&gt;passing through&lt;/em&gt;. People come and go, and there’s no real sense of belonging. There is a sense of anonymity, there are no lasting repercussions for cutting in line or being&amp;nbsp;rude.&lt;/p&gt;
-&lt;p&gt;It’s an oppressive, alienating, and disempowering&amp;nbsp;environment.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.marginalia.nu/log/82_killing_community/&quot;&gt;Killing Community&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/e6c79911a93db53d87a80281d0037b97/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Cet article parle de Reddit mais je ressens très fort la transformation qui s’est opérée au sein de Mastodon, d’un village en une gare. Il m’a fallu &lt;a href=&quot;https://larlet.fr/david/2022/11/12/&quot;&gt;6&amp;nbsp;mois&lt;/a&gt; pour prendre le train et retourner dans ma&amp;nbsp;grotte.&lt;/p&gt;
-&lt;p&gt;Dans cet espace, je réfléchis beaucoup à cette différence de se sentir &lt;a href=&quot;https://sive.rs/below-average&quot;&gt;en-dessous de la moyenne&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/4d9148b9d78455c2d67051e467d2e824/&quot;&gt;cache&lt;/a&gt;). Et ce changement de point de vue me fait aussi reconsidérer mes dépendances et mes incompétences. Ce n’est pas cet atelier vélo qui est mauvais, ce sont mes choix techniques qui m’ont rendu incompétent face aux pannes actuelles qui demandent davantage d’outillage et d’expérience. Etc.&lt;/p&gt;
-&lt;p&gt;En ce moment, je travaille avec &lt;a href=&quot;https://www.croix-rouge.fr/&quot;&gt;La Croix-Rouge française&lt;/a&gt;, le &lt;a href=&quot;https://labrri.net/&quot;&gt;Laboratoire de recherche en relations interculturelles de l’Université de Montréal&lt;/a&gt; et surtout &lt;a href=&quot;https://github.com/umap-project/umap/&quot;&gt;uMap&lt;/a&gt; et son essaimage, autant de projets et d’explorations qui redonnent du sens à mes investissements dans le numérique. Il faudrait que je prenne le temps d’écrire à ce sujet, j’aurais probablement des choses à partager côté évolution de Scopyleft&amp;nbsp;aussi.&lt;/p&gt;
-&lt;p&gt;Dans un temps et un espaces finis, il faut constamment rebâtir les chemins de sa pensée et prendre soin des relations du village. Mon activité devient alors davantage celle d’un conteur, qui se sert parfois d’outils pour mettre en musique les actions des&amp;nbsp;autres.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/incompetence/&quot;&gt;#incompétence&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/simplicite/&quot;&gt;#simplicité&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>
 </feed>

david/templates/archives_2020.html

@@ -1,9 +1,9 @@
 {% extends "base_2020.html" %}
-{% block title %}Publications sporadiques 2023{% endblock %}
-{% block description %}Archives 2023 des publications de David Larlet{% endblock %}
+{% block title %}Publications 2024{% endblock %}
+{% block description %}Archives 2024 des publications de David Larlet{% endblock %}
 {% block content %}
 <header>
-  <h1>Publications sporadiques 2023</h1>
+  <h1>Publications 2024</h1>
 </header>
 <nav>
   <p class="center">
@@ -49,7 +49,7 @@
     </h3>
     <p>
       {% for slug, name, counter in tags -%}
-        <a href="/david/2021/{{ slug }}/" rel="tag">#{{ name }} ({{ counter }})</a>
+        <a href="/david/2024/{{ slug }}/" rel="tag">#{{ name }} ({{ counter }})</a>
       {% endfor %}
     </p>
   {% endif %}

david/templates/base_2024.html

@@ -48,7 +48,7 @@
   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">
+  <link rel="stylesheet" href="/static/david/css/style_2024-01-13.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"

david/templates/feed.xml

@@ -21,810 +21,4 @@
             <summary type="html">{{ page.escaped_content }}</summary>
         </entry>
     {% endfor %}
-        <entry xml:lang="fr">
-            <title type="html">Ailleurs</title>
-            <link href="https://larlet.fr/david/2023/12/31/" rel="alternate" type="text/html" />
-            <updated>2023-12-31T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/31/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;— What a year, huh?&lt;br /&gt;
-— Captain, it’s December&amp;nbsp;31st.&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Ce &lt;em&gt;meme&lt;/em&gt; inversé résume assez bien cette année avec son lot de hauts et de bas. J’avais la tête ailleurs pour &lt;a href=&quot;https://larlet.fr/david/2021/03/17/&quot;&gt;créer&lt;/a&gt; / consolider un collectif qui venait de subir un traumatisme. J’ai l’impression que nous avons réussi·es à trouver un nouvel équilibre avec davantage d’horizontalité, de compréhension de notre cadre de travail mais aussi et surtout des besoins des autres et donc de soi. Un remodelage difficile mais salutaire qui nous a permis aussi d’éponger une importante &lt;em&gt;dette de gestion&lt;/em&gt; après 11&amp;nbsp;années&amp;nbsp;d’existence.&lt;/p&gt;
-&lt;p&gt;J’ai découvert des outils intéressants pour les collectifs dont j’aimerais avoir / prendre le temps de documenter ces prochains mois. Toujours dans l’idée de semer des graines de réflexion ici et ailleurs, je crois qu’il serait pertinent que l’on documente un peu mieux nos pratiques et nos choix. De jolies choses ont poussé ces derniers temps&amp;nbsp;🧑‍🌾. Certains bouts de codes mériteraient d’être rendus publics&amp;nbsp;aussi.&lt;/p&gt;
-&lt;p&gt;Ailleurs, j’ai / on a&amp;nbsp;publié&amp;nbsp;:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;a href=&quot;https://scopyleft.gitlab.io/les-statuts/&quot;&gt;Les statuts de Scopyleft&lt;/a&gt; avec une volonté de minimalisme et&amp;nbsp;d’explicite&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;http://scopyleft.fr/blog/2023/transformation-en-cours/&quot;&gt;Transformation en cours&lt;/a&gt; sur le blog de scopyleft qui &lt;a href=&quot;http://scopyleft.fr/blog/2023/petit-panorama-des-pratiques-de-remuneration-en-horizontalite/&quot;&gt;se réveille&lt;/a&gt;&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;https://www.openstreetmap.org/user/David%20Larlet/diary/402475&quot;&gt;uMap: fine-grained permissions and more&lt;/a&gt; sur un blog OpenStreetMap avant de &lt;a href=&quot;https://umap-project.org/fr/&quot;&gt;créer le nôtre&lt;/a&gt;&amp;#8239;;&lt;/li&gt;
-&lt;li&gt;&lt;a href=&quot;https://code.larlet.fr/blog/2023/12/26/umap-et-web-components/&quot;&gt;uMap et Web Components&lt;/a&gt; sur un futur(?) blog&amp;nbsp;technique.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;Une forme d’essaimage doux amené à se&amp;nbsp;poursuivre.&lt;/p&gt;
-&lt;p&gt;&lt;strong&gt;Et ici alors&amp;#8239;?&lt;/strong&gt; J’ai besoin de retrouver une forme d’envie de partager, peut-être que ça passera par des notes plus courtes, peut-être par un &lt;em&gt;redesign&lt;/em&gt;, peut-être par une contrainte auto-imposée assez forte, peut-être autre&amp;nbsp;chose.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;— Ah on est bien là à courir, on se sent vivants&amp;#8239;!&lt;br /&gt;
-— Je te rassure, tu es tout le temps vivant…&lt;br /&gt;
-— Ouais mais des fois la maison c’est quand même comme un grand cercueil.&lt;br /&gt;
-— Mmmh, d’accord mais alors dans ma chambre la machine à coudre c’est comme un cœur qui&amp;nbsp;bat.&lt;/p&gt;
-&lt;p&gt;Hier, on a couru 7km pour la première&amp;nbsp;fois&amp;nbsp;💓.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/confiance/&quot;&gt;#confiance&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&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">Abonnement</title>
-            <link href="https://larlet.fr/david/2023/12/12/" rel="alternate" type="text/html" />
-            <updated>2023-12-12T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/12/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;20&amp;nbsp;years ago, Chris Anderson told me that it was unrealistic to expect tech companies to refuse demands for DRM from the entertainment companies whose media they hoped to play. My argument – then and now – was that any tech company that sells you a gadget that can have its features revoked is defrauding you. You’re paying for x, y and z – and if they are contractually required to remove x and y on demand, &lt;mark&gt;they are selling you something that you can’t rely on&lt;/mark&gt;, without making that clear to&amp;nbsp;you.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://pluralistic.net/2023/12/08/playstationed/#tyler-james-hill&quot;&gt;Pluralistic: “If buying isn’t owning, piracy isn’t stealing” (08&amp;nbsp;Dec 2023)&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/c5baffcec6831c2b1fe5f3b27ebaeef4/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2020/02/07/#mood&quot;&gt;Rappel&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2021/12/05/&quot;&gt;quasi&lt;/a&gt;-&lt;a href=&quot;https://larlet.fr/david/2023/02/01/&quot; title=&quot;Ombres&quot;&gt;annuel&lt;/a&gt;&amp;nbsp;: de Netflix à Spotify, la volatilité des catalogues est telle qu’on ne peux compter sur aucune &lt;em&gt;playlist&lt;/em&gt; qui tiendrait dans la durée. Considérant le prix des disques durs externes SSD, il est devenu plus que rentable et pérenne d’entretenir ses propres&amp;nbsp;bibliothèques&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Ne pensez pas priver plus que ça les artistes de revenus avec ces pratiques, au mieux il leur manquera &lt;a href=&quot;https://www.rollingstone.com/music/music-news/weird-al-yankovic-spotify-wrapped-video-criticism-1234905887/&quot;&gt;un sandwich… par an&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/1ac69ff7b6913bfc4298d9ec0365ca5b/&quot;&gt;cache&lt;/a&gt;).&lt;/p&gt;
-&lt;p&gt;PS&amp;nbsp;: j’ai écouté 🇨🇦 &lt;a href=&quot;https://fr.wikipedia.org/wiki/Pax_Massilia&quot;&gt;Pax Massilia&lt;/a&gt; et ça m’a fait l’effet d’un &lt;em&gt;space cake&lt;/em&gt; de&amp;nbsp;Proust.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🙃 when people say “enshittification”, it’s as if their core complaint about capitalism is the customer service, rather than the systematic exploitation of other people. people don’t talk about union busting as “enshittification”, or wage theft as “enshittification”, let alone deeper systematic&amp;nbsp;issues.&lt;/p&gt;
-&lt;p&gt;people talk about enshittification to mean &lt;mark&gt;“i can&#x27;t watch my favourite tv show any&amp;nbsp;more”&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://cohost.org/tef/post/3175066-enshittification-is&quot;&gt;enshittification is what happens when a disney adult learns about captialism&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/37d6792aae27bda5e258f7a1b052045a/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/gafam/&quot;&gt;#gafam&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/propriete/&quot;&gt;#propriété&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">Développement(s)</title>
-            <link href="https://larlet.fr/david/2023/12/08/" rel="alternate" type="text/html" />
-            <updated>2023-12-08T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/08/</id>
-            <summary type="html">
-&lt;p&gt;J’ai un peu de mal ces temps-ci à dire que je suis un développeur car j’ai l’impression de passer énormément d’énergie à faire d’autres choses. Lorsqu’on me demande ce que je fais, je dis «&amp;nbsp;des trucs, de-ci de-là…&amp;nbsp;», rien de bien grandiloquent. Une bonne partie de mes journées est passée dans la gestion de Scopyleft (au sens très large), une autre à interagir avec les équipes avec lesquelles je travaille. Et puis parfois, l’après-midi ou le soir, lorsqu’il n’y a ni grève, ni neige, ni journée pédagogique, ni covid, ni flemme, il m’arrive de coder des&amp;nbsp;trucs.&lt;/p&gt;
-&lt;h2&gt;Anthologie&amp;nbsp;Palatine&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-anthologie-palatine.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-anthologie-palatine.jpg&quot;
-            width=&quot;2862&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-anthologie-palatine.jpg 2862w, /static/david/2023/2023-12-08-anthologie-palatine_660x440.jpg 660w, /static/david/2023/2023-12-08-anthologie-palatine_990x660.jpg 990w, /static/david/2023/2023-12-08-anthologie-palatine_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2862 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Projet de longue date avec la &lt;a href=&quot;https://www.ecrituresnumeriques.ca/&quot;&gt;Chaire du Canada sur les écritures numériques&lt;/a&gt; qui consiste à rendre possible le parcours et l’analyse de &lt;a href=&quot;https://anthologiagraeca.org/&quot;&gt;textes en Grec ancien&lt;/a&gt;. C’est un peu en pause depuis le début de l’année mais j’ai pris beaucoup de plaisir à échanger / pairer techniquement avec Sarah (de Scopyleft) sur ces&amp;nbsp;évolutions.&lt;/p&gt;
-&lt;p&gt;Participer à de la recherche par l’angle du développement est &lt;del&gt;un des moyens d’être bien payé&lt;/del&gt; une façon de garder un pied dans un domaine qui me fait mouliner le cerveau pour autre chose que le profit des&amp;nbsp;autres.&lt;/p&gt;
-&lt;h2&gt;Pressoir&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-ateliers-sens-public.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-ateliers-sens-public.jpg&quot;
-            width=&quot;2288&quot; height=&quot;2122&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-ateliers-sens-public.jpg 2288w, /static/david/2023/2023-12-08-ateliers-sens-public_660x440.jpg 660w, /static/david/2023/2023-12-08-ateliers-sens-public_990x660.jpg 990w, /static/david/2023/2023-12-08-ateliers-sens-public_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2288 / 2122))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Toujours avec la &lt;a href=&quot;https://www.ecrituresnumeriques.ca/&quot;&gt;Chaire du Canada sur les écritures numériques&lt;/a&gt;, parce qu’on apprécie bien de travailler ensemble, on a fait il y a quelques années un outil permettant de générer des livres numériques à partir de sources en &lt;em&gt;markdown&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;Cela a donné lieu à &lt;a href=&quot;https://ateliers.sens-public.org/&quot;&gt;deux&lt;/a&gt; &lt;a href=&quot;http://parcoursnumeriques-pum.ca/&quot;&gt;collections&lt;/a&gt; enrichies de contenus numériques (vidéos, etc).&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg&quot;
-            width=&quot;2310&quot; height=&quot;2108&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg 2310w, /static/david/2023/2023-12-08-presses-universitaires-montreal_660x440.jpg 660w, /static/david/2023/2023-12-08-presses-universitaires-montreal_990x660.jpg 990w, /static/david/2023/2023-12-08-presses-universitaires-montreal_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2310 / 2108))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Depuis l’automne, on assume d’avoir fait un &lt;a href=&quot;https://gitlab.huma-num.fr/ecrinum/pressoir-cli/&quot;&gt;Générateur de Livres Statiques&lt;/a&gt; et on essaye de le rendre plus polyvalent / autonome. C’est un exercice de recherche qui va vers une dé-GAFAM-isation et qui m’intéresse &lt;a href=&quot;https://larlet.fr/david/biologeek/archives/20060119-open-articles-liberez-votre-savoir/&quot;&gt;depuis un bout de&amp;nbsp;temps…&lt;/a&gt;&lt;/p&gt;
-&lt;h2&gt;Stylo&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-stylo-export.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-stylo-export.jpg&quot;
-            width=&quot;2302&quot; height=&quot;1770&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-stylo-export.jpg 2302w, /static/david/2023/2023-12-08-stylo-export_660x440.jpg 660w, /static/david/2023/2023-12-08-stylo-export_990x660.jpg 990w, /static/david/2023/2023-12-08-stylo-export_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2302 / 1770))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Puisque j’en suis sur la recherche, j’ai aussi contribué modestement à l’éditeur de texte &lt;a href=&quot;https://stylo.huma-num.fr/&quot;&gt;Stylo&lt;/a&gt; pour la partie export. Cela m’a fait plonger dans l’univers de &lt;a href=&quot;https://gitlab.huma-num.fr/ecrinum/stylo/pandoc-api&quot;&gt;Pandoc&lt;/a&gt; (et Docker), de la bibliographie académique et puis j’ai refait des API et j’aime bien&amp;nbsp;ça.&lt;/p&gt;
-&lt;h2&gt;LABRRI&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-labrri.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-labrri.jpg&quot;
-            width=&quot;2446&quot; height=&quot;2028&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-labrri.jpg 2446w, /static/david/2023/2023-12-08-labrri_660x440.jpg 660w, /static/david/2023/2023-12-08-labrri_990x660.jpg 990w, /static/david/2023/2023-12-08-labrri_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2446 / 2028))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Pour finir côté recherche, j’ai accompagné le &lt;a href=&quot;https://labrri.net/&quot;&gt;LABRRI&lt;/a&gt; dans l’analyse et la mise en forme de leurs données autour de situations interculturelles au Québec. C’est en interagissant avec des personnes peu/pas techniques que j’ai l’impression de progresser aujourd’hui. Cela permet de revoir les contraintes, l’autonomie, la consommation des ressources, les outils déjà en place. Cette prise de recul est nécessaire pour un avenir&amp;nbsp;frugal.&lt;/p&gt;
-&lt;p&gt;Le sujet en lui-même est une façon de m’intégrer au Québec en analysant le prisme des incompréhensions culturelles qu’il peut parfois y&amp;nbsp;avoir.&lt;/p&gt;
-&lt;h2&gt;Croix-Rouge&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-croix-rouge-aime.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-croix-rouge-aime.jpg&quot;
-            width=&quot;2340&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-croix-rouge-aime.jpg 2340w, /static/david/2023/2023-12-08-croix-rouge-aime_660x440.jpg 660w, /static/david/2023/2023-12-08-croix-rouge-aime_990x660.jpg 990w, /static/david/2023/2023-12-08-croix-rouge-aime_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2340 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;On a mis en place un outil pour qu’un lieu d’accueil et d’orientation puisse donner des formations à des mineurs étrangers avec &lt;a href=&quot;https://www.maiwann.net/&quot;&gt;Maïtané&lt;/a&gt; et c’était émotionnellement intense. Beaucoup de &lt;a href=&quot;https://larlet.fr/david/2023/02/18/&quot; title=&quot;Quiz&quot;&gt;remises en questions techniques&lt;/a&gt; personnelles mais surtout de réflexions sur quelles sont les véritables héroïnes de ce&amp;nbsp;monde…&lt;/p&gt;
-&lt;p&gt;Un des enjeux était de voir ce que l’on arrivait à produire avec un budget très restreint (pour le domaine). Il y aurait de la matière pour un article&amp;nbsp;dédié.&lt;/p&gt;
-&lt;h2&gt;Outils&amp;nbsp;scopyleft&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-outils-scopyleft.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-outils-scopyleft.jpg&quot;
-            width=&quot;2430&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-outils-scopyleft.jpg 2430w, /static/david/2023/2023-12-08-outils-scopyleft_660x440.jpg 660w, /static/david/2023/2023-12-08-outils-scopyleft_990x660.jpg 990w, /static/david/2023/2023-12-08-outils-scopyleft_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2430 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;J’ai produit et maintenu une quinzaine d’outils pour &lt;a href=&quot;http://scopyleft.fr/&quot;&gt;Scopyleft&lt;/a&gt; au cours de l’année. C’est beaucoup et je m’en suis rendu compte au moment où j’ai dû faire une page pour en faire la liste car on avait du mal à nous y retrouver&amp;#8239;! Plus que les outils en eux-mêmes, c’est la structuration et l’aide qu’ils ont pu apporter à des moments critiques qui me&amp;nbsp;réjouit.&lt;/p&gt;
-&lt;p&gt;J’ai aussi développé pas mal de bouts de code relatifs à l’automatisation / vérification des sous-traitant·es qui sont de plus en plus nombreuses avec le &lt;a href=&quot;https://www.data.gouv.fr/fr/datasets/realisation-de-services-publics-numeriques-en-mode-produit-coordonnes-par-le-programme-interministeriel-beta-gouv/&quot;&gt;marché public&lt;/a&gt; que l’on a remporté il y a quelques années. Extraire et vérifier des données issues de PDF provenant de l’administration ou d’outils de comptabilité n’est pas une mince&amp;nbsp;affaire…&lt;/p&gt;
-&lt;h2&gt;uMap&lt;/h2&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-anct.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-anct.jpg&quot;
-            width=&quot;2472&quot; height=&quot;2124&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-umap-anct.jpg 2472w, /static/david/2023/2023-12-08-umap-anct_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-anct_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-anct_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2472 / 2124))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;p&gt;Au printemps dernier, Yohan m’a motivé pour que l’on transforme un logiciel open-source en commun tout en se faisant financer par l’État. Je dois avouer que j’étais un peu dubitatif mais j’ai tenté le coup. Quelques mois après, on a une &lt;a href=&quot;https://umap.incubateur.anct.gouv.fr/&quot;&gt;instance souveraine&lt;/a&gt; en production, des centaines d’&lt;em&gt;issues&lt;/em&gt; traitées, un &lt;a href=&quot;https://umap-project.org/&quot;&gt;site dédié&lt;/a&gt; avec une possibilité de financement participatif, des mises à jour régulières, des réflexions de fond avec la communauté, un financement par &lt;a href=&quot;https://nlnet.nl/&quot;&gt;NLnet&lt;/a&gt;, etc.&lt;/p&gt;
-&lt;p&gt;Pari tellement réussi qu’on a décidé de me passer en mécénat de compétences avec Scopyleft pour les derniers mois de l’année. Il faudra que je fasse un billet&amp;nbsp;dédié.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-project.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-12-08-umap-project.jpg&quot;
-            width=&quot;2462&quot; height=&quot;2108&quot;
-            srcset=&quot;/static/david/2023/2023-12-08-umap-project.jpg 2462w, /static/david/2023/2023-12-08-umap-project_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-project_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-project_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2462 / 2108))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Capture d’écran du produit&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Capture d’écran du&amp;nbsp;produit.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;hr /&gt;
-&lt;p&gt;La plupart de ces sites sont statiques ou &lt;a href=&quot;https://larlet.fr/david/2023/09/13/&quot; title=&quot;Documentation&quot;&gt;semynamiques&lt;/a&gt;, sans faire appel à NPM.&amp;nbsp;Vous n’avez pas idée d’à quel point cela me tranquillise et augmente mon efficacité en terme de maintenance sur le long&amp;nbsp;terme.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/recherche/&quot;&gt;#recherche&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Équivalent</title>
-            <link href="https://larlet.fr/david/2023/12/06/" rel="alternate" type="text/html" />
-            <updated>2023-12-06T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/06/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Un vol aller-retour entre Paris et Montréal (11&amp;#8239;080&amp;#8239;km) émet 2,5&amp;nbsp;tonnes de &lt;mark&gt;dioxyde de carbone équivalent&lt;/mark&gt; dans l’atmosphère par passager&amp;nbsp;[…]&lt;/p&gt;
-&lt;p&gt;&lt;strong&gt;Comment contrebalancer les émissions CO₂e de votre&amp;nbsp;Paris-Montréal&amp;#8239;?&lt;/strong&gt;&lt;/p&gt;
-&lt;p&gt;Diminuer votre chauffage&amp;nbsp;: 21&amp;nbsp;ans et 3&amp;nbsp;mois&lt;br /&gt;
-Réduire vos déchets&amp;nbsp;: 12&amp;nbsp;ans et 9&amp;nbsp;mois&lt;br /&gt;
-Adopter des gestes d’écoconduite&amp;nbsp;: 12&amp;nbsp;ans et 9&amp;nbsp;mois&lt;br /&gt;
-Se nourrir localement&amp;nbsp;: 8&amp;nbsp;ans et 6&amp;nbsp;mois&lt;br /&gt;
-Adopter un régime végétarien&amp;nbsp;: 5&amp;nbsp;ans et 6&amp;nbsp;mois&lt;br /&gt;
-Adopter un régime végan&amp;nbsp;: 3&amp;nbsp;ans et 4&amp;nbsp;mois&lt;br /&gt;
-Passer à de l’électricité 100&amp;#8239;% renouvelable&amp;nbsp;: 1&amp;nbsp;an et 7&amp;nbsp;mois&lt;br /&gt;
-Abandonner la voiture&amp;nbsp;: 1&amp;nbsp;an et&amp;nbsp;3&amp;nbsp;mois&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.lemonde.fr/les-decodeurs/article/2023/12/05/vous-voulez-compenser-votre-vol-en-avion-par-des-ecogestes-voici-combien-de-temps-cela-vous-prendra_6204046_4355770.html&quot;&gt;Vous voulez «&amp;nbsp;compenser&amp;nbsp;» votre vol en avion par des écogestes&amp;#8239;? Voici combien de temps cela vous&amp;nbsp;prendra&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je suis de plus en plus convaincu que l’on ne changera pas nos habitudes avant que les réserves de pétrole / charbon / gaz ne soient&amp;nbsp;vides.&lt;/p&gt;
-&lt;p&gt;Pénuries, famines, rapports de forces changeants, le capitalisme est très résilient dans ces situations. Il n’y a guère que la solidarité qui pourrait entamer un tel système et il comporte suffisamment de mécanismes pour s’en&amp;nbsp;protéger.&lt;/p&gt;
-&lt;p&gt;Un «&amp;nbsp;dioxyde de carbone équivalent&amp;nbsp;» est tellement scientifique, la mesure parait si propre. Combien d’«&amp;nbsp;humains morts équivalents&amp;nbsp;»&amp;#8239;? Combien de «&amp;nbsp;générations en état de suffocation équivalent&amp;nbsp;»&amp;#8239;? Combien d’«&amp;nbsp;espèces anéanties&amp;nbsp;équivalent&amp;nbsp;»&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;&lt;a href=&quot;https://theconversation.com/why-are-people-still-flying-to-climate-conferences-by-private-jet-218459&quot;&gt;Et pendant ce temps là… un vol en bandes organisées.&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/328976d647ab5dbf9ff820f2cfe35e5a/&quot;&gt;cache&lt;/a&gt;)&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;📧 Hope the air where you are is somewhat breathable today! Just wanted to circle back around on that&amp;nbsp;report.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.mcsweeneys.net/articles/email-greetings-for-modern-times&quot;&gt;Email Greetings for Modern Times&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ec3d02a88dc8597c24f1b32b9cf51d41/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/incompetence/&quot;&gt;#incompétence&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/solastalgia/&quot;&gt;#solastalgia&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">NostAlgIe</title>
-            <link href="https://larlet.fr/david/2023/12/03/" rel="alternate" type="text/html" />
-            <updated>2023-12-03T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/03/</id>
-            <summary type="html">
-&lt;p&gt;Paradoxalement, les &lt;abbr title=&quot;Large Language Model&quot;&gt;LLM&lt;/abbr&gt; qui sont annoncés comme étant l’avenir ne font que reproduire ce qui a eu lieu dans le passé. Comme un auto-correct qui ne saurait pas que la langue évolue. Chaque &lt;em&gt;prompt&lt;/em&gt; demande à notre passé de construire notre avenir, une forme d’héritage numérique auquel il va falloir&amp;nbsp;s’habituer.&lt;/p&gt;
-&lt;p&gt;Considérant que nous sommes à un moment charnière où il faudrait justement dévier d’une trajectoire passée qui nous propulse à +trop-de-degrés, ces outils —&amp;nbsp;par nature&amp;nbsp;— réactionnaires ne sont-ils pas en train de nous conforter dans nos erreurs&amp;nbsp;passées&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;Et c’est là où ça devient intéressant, peut-on de manière éthique choisir d’être orientés et quelles dérives certaines cela aurait&amp;#8239;? Il y a déjà des biais énormes sur les jeux d’apprentissage mais est-ce que je pourrais choisir par exemple une &lt;em&gt;saveur&lt;/em&gt; de ChatGPT &lt;a href=&quot;https://www.wired.com/story/search-engine-ecosia-generative-ai-revolution/&quot;&gt;qui ait été définie par Ecosia&amp;#8239;?&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/b3accd4d0eb51c1628b85144224efa04/&quot;&gt;cache&lt;/a&gt;) Quels paramètres politiques sont acceptables&amp;#8239;? Et pour&amp;nbsp;qui&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;Bref, c’était mieux avant&amp;nbsp;🙃.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🙄 Provides neutral analysis, fostering open communication and&amp;nbsp;trust.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://liarliar.ai/&quot;&gt;LiarLiar.ai&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✍️ Even if there are no real updates there is always something to say. In those moments, I write about something that happened to me this week. A small anecdote. &lt;mark&gt;Something human.&lt;/mark&gt; Something grounding. No design mic-drops. No condescending words of&amp;nbsp;wisdom.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://markboulton.co.uk/journal/an-anchor/&quot;&gt;An Anchor - Mark Boulton&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ef356702864a79503a82ed2e288dd6fb/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🧑‍⚖️ The Functional Source License (FSL) is a mostly permissive non-compete license that converts to Apache 2.0&amp;nbsp;or MIT after two years. It is designed for SaaS companies that value both user freedom and developer sustainability. FSL provides everything a developer needs to use and learn from your software without harmful&amp;nbsp;free-riding.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://fsl.software/&quot;&gt;FSL&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/sociologie/&quot;&gt;#sociologie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/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">Papillon</title>
-            <link href="https://larlet.fr/david/2023/12/01/" rel="alternate" type="text/html" />
-            <updated>2023-12-01T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/12/01/</id>
-            <summary type="html">
-&lt;p&gt;Plus je suis stressé et plus je m’éparpille, une façon de canaliser mon cerveau qui bouillonne, une tentative pour étouffer ce qui remue au fond par un ensevelissement de tâches plus ou moins f·utiles. La beauté de ce mécanisme c’est que même en étant pleinement conscient de cela, je n’ai pas pour autant une prise dessus. Alors je lâche-prise justement, j’accepte cette période, surtout si je sais qu’elle est bornée par une date clé. Savoir qu’il va y avoir un après est déjà&amp;nbsp;libérateur.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🤯 As a family, we have a secret pass phrase to check identity between ourselves in the event of an unexpected video&amp;nbsp;call.&lt;/p&gt;
-&lt;p&gt;It’s a sticking plaster solution. &lt;mark&gt;Long term I suspect we all need 2FA for&amp;nbsp;humans.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;In the meantime, maybe the most effective ward against deepfakes is simply to turn&amp;nbsp;sideways?&lt;/p&gt;
-&lt;p&gt;We should build the habit now. At the beginning of every call, exchange a quick proof-of-humanity by showing our&amp;nbsp;ears.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://interconnected.org/home/2023/09/22/wards&quot;&gt;Old wards and new against fake humans&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/60461be5ec82443fd6a7c12f29e40587/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🦫 “As our collaborator Joe Wheaton [from Utah State University] likes to say, ‘water doesn’t burn,’” Kolarik says. “Beavers maintain healthy riverscapes which store carbon and water. Consistent access to water is key to mitigating the effects of climate disturbances like&amp;nbsp;drought.”&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;Beavers’ role as firefighters&lt;/mark&gt; has already been documented in Idaho. A 2018&amp;nbsp;technical report by Anabranch Solutions, a river restoration company, found that beavers were a major factor in decreasing burn intensity along Baugh Creek during that year’s Sharps&amp;nbsp;Fire.&lt;/p&gt;
-&lt;p&gt;“Where active beaver dams were present, native riparian vegetation persisted, unburnt,” the authors wrote. In our hotter and fierier world, beavers are a&amp;nbsp;buffer.&lt;/p&gt;
-&lt;p&gt;“I once heard a rancher use the analogy of sponges when referring to valley bottoms. If we can successfully rewet the sponges, the West will be much more resilient to climate change, and beavers can keep those sponges wet,” Kolarik&amp;nbsp;says.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://news.mongabay.com/2023/09/nasa-satellites-reveal-restoration-power-of-beavers/&quot;&gt;NASA satellites reveal restoration power of beavers&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7732c1cdc56a5db0f2fd3117f9522fa8/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✋ It should be strictly &lt;strong&gt;opt-in&lt;/strong&gt;. No one should be required to provide their work for free to any person or organization. The online community is under no responsibility to help them create their products. Some will declare that I am “Anti-AI” for saying such things, but that would be a misrepresentation. I am not declaring that these systems should be torn down, simply that &lt;mark&gt;their developers aren’t entitled to our work.&lt;/mark&gt; They can still build those systems with purchased or donated&amp;nbsp;data.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/&quot;&gt;Block the Bots that Feed “AI” Models by Scraping Your Website&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/af6aeab9b848e78334e31b9b7a668413/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😔 Our community has persistent and pervasive problems of a particular sort which we are not allowed to talk about: sexual harassment and assault. Men who assault, harass, and even rape women in our spaces, are protected. A culture of silence is enforced, and those who call out rape, sexual assault, or harassment, those who criticise they who enable and protect these behaviors, are punished, swiftly and&amp;nbsp;aggressively.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://drewdevault.com/2023/09/29/The-forbidden-topics.html&quot;&gt;The forbidden topics&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ae2b427ba896475633726fdd731caf09/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;☢️ [en] The Soviet RTG program is – for me – a foreboding engineering parable about the cost of deploying an idea with no plans for future maintenance. Sure, I can deploy this hot new tech now and it does the job in new and clever ways, but what is the impact if we don’t have a plan for regular maintenance? When future people interact with my contraption, will it work and will it kill anyone? Y’know, the basic concerns every software project deals&amp;nbsp;with.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://daverupert.com/2023/05/soviet-rtgs/&quot;&gt;Lessons from Soviet Russia on deploying small nuclear generators&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/90e565ff0043e34d7fcfc087d66555d3/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🚴 Je n’ai ni gagné ni perdu de poids, je saurais pas dire si il y a le moindre changement niveau muscles/graisse. D’après Strava, je brulais en moyenne 2000&amp;nbsp;kcal par jour à&amp;nbsp;vélo.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://virgule.net/blog/vacances_a_velo_2023.html&quot;&gt;Vacances à vélo 2023&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7863cd9fd3df50880d0d8841307b05f2/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🎯 En tant que travailleurs de la tech, très souvent, nous faisons partie du système, nous participons au problème, &lt;mark&gt;nous sommes un maillon de la chaine productiviste&lt;/mark&gt;&amp;nbsp;: par notre travail, nous contribuons à des modèles capitalistiques coloniaux, le profit de certains au détriment de tous, l’accaparement des ressources de la planète, l’asservissement des êtres humains les plus pauvres et la destruction du&amp;nbsp;vivant.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://richardhanna.dev/blog/2023/ecoconception-ne-suffit-pas.html&quot;&gt;Écoconception des services numériques, et si ça ne suffisait pas&amp;#8239;?&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/026e36c493ee97a30d613864813aaae1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&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">Dix</title>
-            <link href="https://larlet.fr/david/2023/11/27/" rel="alternate" type="text/html" />
-            <updated>2023-11-27T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/11/27/</id>
-            <summary type="html">
-&lt;p&gt;Dix ans que j’apprends à être père. Que la réaction cellulaire en chaîne aspire à devenir incontrôlable. Que ½ plus ½ fait 1&amp;nbsp;tout différent qui découvre ses propres singularités. C’est beau, c’est précieux, c’est un exercice d’équilibriste chaque jour pour que l’ébullition ne fasse pas déborder la&amp;nbsp;casserole.&lt;/p&gt;
-&lt;p&gt;Je suis content que tu aies choisi une machine à coudre comme cadeau. Et que tu sois si heureux et reconnaissant. Je vais m’endormir avec le sourire… et toi&amp;nbsp;aussi.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Perspective</title>
-            <link href="https://larlet.fr/david/2023/09/27/" rel="alternate" type="text/html" />
-            <updated>2023-09-27T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/27/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Let’s call the generally pro-Tailwind group &lt;em&gt;Builders&lt;/em&gt;, and let’s call the generally anti-Tailwind group &lt;em&gt;Crafters&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;This isn’t to say that Crafters don’t build things, or that the Builders aren’t skilled craftspeople. But as a quick and messy shorthand, let’s go with it for a moment, because I think it hints at the values of these two&amp;nbsp;groups.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;Builders clearly value getting the work done as quickly and efficiently as possible. They are making something—likely something with parts beyond the frontend—and are eager to see it through to&amp;nbsp;completion.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;On the other side, the Crafters tend to be seasoned CSS specialists, and almost always enjoy the part of the work that Tailwind is supposed to make easier. It’s fair to say they’ve overcome the challenge presented by CSS—or, at least, &lt;mark&gt;that this is where they &lt;em&gt;like&lt;/em&gt; to be&amp;nbsp;challenged.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;Crafters may be building holistic products and projects, just like Builders. But Crafters generally are less focused on &lt;em&gt;getting through&lt;/em&gt; the frontend as a &lt;em&gt;part&lt;/em&gt; of that work, and instead see the frontend as &lt;em&gt;the product itself&lt;/em&gt;.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://joshcollinsworth.com/blog/tailwind-is-smart-steering&quot;&gt;Classic rock, Mario Kart, and why we can’t agree on Tailwind&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/2074a4d527220f5ddf2dc0b4e678c83a/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Un article nuancé qui pose le doigt sur la différence de point de vue dans l’utilisation des outils. Oui, c’est le second article technique d’affilé, après je vais prendre mes&amp;nbsp;gouttes.&lt;/p&gt;
-&lt;p&gt;Le parallèle est intéressant avec les joueurs et les audiophiles car on est toujours dans la recherche de l’accomplissement au-delà de la performance pure. Une histoire de plaisir à arpenter le chemin et à le rendre accessible au plus grand nombre… tout en ayant conscience d’être un peu élitiste en se permettant cela car la face nord offre d’autres&amp;nbsp;défis.&lt;/p&gt;
-&lt;p&gt;Je respecte —&amp;nbsp;et j’admire de plus en plus&amp;nbsp;— les personnes qui n’ont pas besoin d’entrer à fond dans un sujet pour s’amuser. Il y a une innocence dont émane une forme de beauté. Certain·es pourraient y lire une condescendance mal placée mais pas du tout, cette recherche est bien trop souvent un fardeau chronophage qui pourrit la vie et les relations. Un groupe sain nécessite probablement d’avoir les deux façons d’appréhender les choses pour arriver à l’équilibre instable qui consiste à aller de&amp;nbsp;l’avant.&lt;/p&gt;
-&lt;p&gt;Oh, et pour revenir aux CSS, &lt;strong&gt;pour mon usage&lt;/strong&gt; qui est de faire des petits outils résilients en équipe réduite, j’utilise de plus en plus des &lt;em&gt;frameworks&lt;/em&gt; &lt;a href=&quot;https://github.com/dbohdan/classless-css&quot;&gt;sans classes&lt;/a&gt; (ahum) comme &lt;a href=&quot;https://picocss.com/&quot;&gt;Pico.css&lt;/a&gt; qui procurent une base saine, configurable et facilement portable. Est-ce que cela fait de moi un &lt;em&gt;Brafter&lt;/em&gt;&amp;#8239;? (&lt;a href=&quot;https://www.urbandictionary.com/define.php?term=Braft&quot;&gt;Non&lt;/a&gt;.)&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;✍️ Most people default to one or another behavior but rarely use them exclusively. Writers will often benefit from talking things out when they get stuck; and talkers will find that occasionally writing something down helps solidify their thoughts. Both strategies can be learned. Whether you’re a writer or a talker isn’t about your inability to do one or the other so much as it is a preferred or optimized&amp;nbsp;mode.&lt;/p&gt;
-&lt;p&gt;This is, incidentally, &lt;mark&gt;a much more valuable way of understanding different working styles&lt;/mark&gt; than the old maker vs manager canard. Both talkers and writers make things (including decisions), but they means by which they make things—and the needs they have in relation to their colleagues—are not the&amp;nbsp;same.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://everythingchanges.us/blog/writers-and-talkers-and-leaders/&quot;&gt;Writers and talkers and leaders, oh my!&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/b2292d98e9d54537c13b8c1e2cae5583/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🐉 But in general, I’d still be wary of using local-first outside real-time / multiplayer / offline use cases. &lt;mark&gt;Local-first is definitely still bleeding-edge.&lt;/mark&gt; You will hit unexpected problems. A good community has rapidly developed, but there’ll still be some stretches on the road where you’ll have to solve novel&amp;nbsp;problems.&lt;/p&gt;
-&lt;p&gt;So: if you need local-first, see if it makes sense to isolate the local-first parts and architect the rest of the app (for now) in a more conventional&amp;nbsp;fashion.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://bricolage.io/some-notes-on-local-first-development/&quot;&gt;Some notes on Local-First Development&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/49f2ce04dd0beb94dc2f662163bc6339/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;😔 En fait ma plus grande inquiétude dans ses parcours hors-circuits sont les autres humains, ceux qui ne comprendraient pas ma&amp;nbsp;démarche.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/03/03/suburb&quot;&gt;banlieue ou suburb&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/5f93f91a46391e0e120dac49298857d1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/complexite/&quot;&gt;#complexité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/recherche/&quot;&gt;#recherche&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/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">Éco-conception</title>
-            <link href="https://larlet.fr/david/2023/09/23/" rel="alternate" type="text/html" />
-            <updated>2023-09-23T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/23/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;De mon temps on disait pas «&amp;nbsp;écoconception&amp;nbsp;» on disait juste «&amp;nbsp;appliquer les prérequis basiques du métier de dev&amp;nbsp;» et on n’était pas plus&amp;nbsp;malheureux.&lt;/p&gt;
-&lt;p&gt;S’il vous faut une formation pour vous empêcher d’afficher 10&amp;#8239;Mo d’images sur votre homepage et d’empiler 50&amp;nbsp;frameworks JS pour faire un formulaire, &lt;mark&gt;c’est peut-être que votre titre initial de «&amp;nbsp;dev full stack senior&amp;nbsp;» était légèrement usurpé.&lt;/mark&gt; Et si l’interopérabilité, la rétrocompatibilité, l’amélioration progressive, l’accessibilité et les perfs sont pour vous de nouvelles compétences tendance à faire valoir sur un CV, je suis navré de vous annoncer que vous étiez jusque ici un&amp;nbsp;escroc.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://mastodon.social/@STPo/111101966708210843&quot;&gt;STPo sur&amp;nbsp;mastodon&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Ce n’est pas vraiment un secret que je fasse partie de la team vieux-rageux-qui-lève-ses-poings-vers-le-ciel (et surtout les yeux&amp;nbsp;🙄) lorsqu’on parle de technique et de web. Le pire étant que plus le temps passe et plus j’ai le sentiment que cette profession se crée sa propre utilité. Il faudrait que je lise &lt;em&gt;Bullshit Jobs&lt;/em&gt; pour être certain de ne pas dire n’importe quoi mais je crois bien que ça s’en rapproche de plus en plus. Ou alors j’en prends davantage&amp;nbsp;conscience.&lt;/p&gt;
-&lt;p&gt;Et ça m’embête autant que de jardiner dans mon petit potager bio tout en vivant au milieu d’une zone commerciale géante bariolée de publicités et traversée par des &lt;abbr title=&quot;sport utility vehicle&quot;&gt;SUV&lt;/abbr&gt; et autres &lt;em&gt;pickups&lt;/em&gt;. Toute ressemblance avec ma dissonance cognitive actuelle serait bien évidemment&amp;nbsp;fortuite.&lt;/p&gt;
-&lt;p&gt;En ce moment, à 15h50, j’écoute les enfants à la fenêtre préparer la chanson de l’année où &lt;a href=&quot;https://www.lafabriqueculturelle.tv/capsules/14586/le-grand-rendez-vous-de-fanny-bloom-et-l-osm-une-chanson-a-l-ecole-les-journees-de-la-culture&quot;&gt;Fanny Bloom leur demande de planter des arbres&lt;/a&gt; alors qu’il y a une file de voitures de plus de 2&amp;nbsp;tonnes qui attendent la sortie de leurs chers bambins. Tout ça pour s’éviter de faire quelques centaines de mètres à&amp;nbsp;pied.&lt;/p&gt;
-&lt;p&gt;Je crois que c’est ça l’éco-conception sur le web&amp;nbsp;: réduire la taille d’une image afin de réduire son empreinte carbone tout en ayant demandé à un &lt;abbr title=&quot;Large Language Model&quot;&gt;LLM&lt;/abbr&gt; de l’avoir&amp;nbsp;générée.&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🎯 However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own technical decisions and how those decisions can also contribute to the disappearance of web’s &lt;em&gt;culture&lt;/em&gt; of&amp;nbsp;openness.&lt;/p&gt;
-&lt;p&gt;Inadvertently (for the most part) technical trends and decisions in web development in &lt;mark&gt;the last two decades have lead to what we term a “Technical Enclosure” of the web,&lt;/mark&gt; a processes whereby technical decisions chip away at the #ViewSource affordance that Cory Doctorow discusses in the opening quote of this article, an affordance that existed as a commons for early web&amp;nbsp;developers.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://htmx.org/essays/right-click-view-source/&quot;&gt;The #ViewSource Affordance&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/2782723c95c98a22087e9954b07a8fba/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🤗 I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, &lt;mark&gt;I like to do my part&lt;/mark&gt; which is why I try hard to not collect and keep any data about&amp;nbsp;you.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://manuelmoreale.com/i-don-t-want-your-data&quot;&gt;I don’t want your data&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/73f0ab0b4336be702e863205bd1bbace/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🧑‍⚕️ We in software, sadly, tend to be in the treatments business, not in the patients business. &lt;mark&gt;We’re Big Pharma.&lt;/mark&gt; And in the same way that Big Pharma invests massively in persuading us that we have the illness their potion cures, we have a tendency to try to get the customer’s problem to fit our solution. And so it is that “productivity” tends to be about the potion, and not the&amp;nbsp;patient.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://codemanship.wordpress.com/2023/09/25/the-illusion-of-developer-productivity-opens-the-door-to-snake-oil/&quot;&gt;The Illusion Of Developer “Productivity” Opens The Door To Snake Oil&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/d048e59b323783f6de3b03bda43a02cc/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;💜 Quand il laisse couler l’eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l’oubli n’efface les derniers sourires jusqu’à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d’un ancêtre dont les cendres sont peut-être encore sur le coin d’une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l’évasion d’une enfance&amp;nbsp;heureuse&amp;#8239;?&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.la-grange.net/2023/03/15/envers&quot;&gt;endroit de l’envers&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/nostalgie/&quot;&gt;#nostalgie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/qualite/&quot;&gt;#qualité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Documentation</title>
-            <link href="https://larlet.fr/david/2023/09/13/" rel="alternate" type="text/html" />
-            <updated>2023-09-13T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/13/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The deeper I dig into my research, the more case studies and examples I find. Institutional memory is frequently overlooked and undervalued - until the moment when someone needs access to memory right now, and of course by then it’s too late. Good remembering means turning tacit knowledge into explicit knowledge; &lt;mark&gt;if all your tacit knowledge has left the building inside the heads of former colleagues, it’s lost to you&amp;nbsp;forever.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;So I think there’s a case for allowing and encouraging documentation for teams, just as much as documentation for software. Writing that documentation is a task, It needs to be part of someone’s job. Every organisation needs a little bit of storytelling capability, to help make that job&amp;nbsp;easier.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://gilest.org/htr.html&quot;&gt;How teams remember&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/5a9fa7db62f151b8a863b949ed4e9e5f/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;J’ai développé un outil pour Scopyleft l’année dernière qui s’intitule «&amp;nbsp;Le Voilier&amp;nbsp;». Il s’agit d’un lieux où l’on consigne nos discussions, propositions et résolutions. C’était important car il y avait pas mal de perte/dilution d’information orale, ce qui est classique en équipes distribuées qui grandissent. Depuis un an et demi, il y a 381&amp;nbsp;sujets qui ont été consignés dans ce &lt;a href=&quot;https://larlet.fr/david/2022/12/19/&quot;&gt;journal&lt;/a&gt; de bord collectif, c’est un outil vivant. Des fonctionnalités bourgeonnent ou passent au compost au gré des besoins, c’est assez plaisant d’avoir la flexibilité de connaître le générateur du site (350&amp;nbsp;lignes de Python à ce jour) et de pouvoir sortir du cadre sans que ce soit trop&amp;nbsp;douloureux.&lt;/p&gt;
-&lt;p&gt;Cela a commencé avec un site totalement statique qui était (re)construit par l’intégration continue à chaque ajout de fichier &lt;em&gt;markdown&lt;/em&gt; avec les bonnes méta-données dans un dossier dédié. Classique. C’était facile pour les personnes familières de git(lab) mais moins pratique pour celles qui ne le sont pas, notamment lorsqu’il faut prendre des notes en séance. L’expérience utilisateur·ice des forges logicielles n’est pas vraiment adaptée à un tel usage, surtout dans un contexte de charge cognitive&amp;nbsp;élevée.&lt;/p&gt;
-&lt;p&gt;J’ai donc transformé cela en site &lt;em&gt;semynamique&lt;/em&gt; 🌱&amp;nbsp;: on reste sur la même infrastructure mais je rajoute un formulaire (toujours statique) qui va soumettre les données vers une seule fonction Python/wsgi qui consiste à créer le fichier &lt;em&gt;markdown&lt;/em&gt; conforme aux attentes de l’outil et à le pousser sur le dépôt. Cela a rendu l’outil plus accessible et avenant. Depuis, j’ai décliné ce principe pour d’autres &lt;em&gt;scenarii&lt;/em&gt; avec de bons&amp;nbsp;retours.&lt;/p&gt;
-&lt;p&gt;Avec l’expérience et un petit script de déploiement, cela me prend moins d’une heure à mettre en place sur AlwaysData avec un strict minimum de maintenance. J’ai une relative tranquillité d’esprit aussi car seule une petite partie du site serait inutilisable si le service tombait et il reste la possibilité d’ajouter des fichiers dans git à la main s’il y avait une&amp;nbsp;urgence.&lt;/p&gt;
-&lt;p&gt;Je ne sais pas trop quoi faire à partir de là, je me dis que ça pourrait en inspirer d’autres. Entre les sites purement statiques et les usines à gaz en JS, il y a tout un dégradé de couleurs enthousiasmantes, certaines restant à&amp;nbsp;découvrir&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;&lt;em&gt;Peut-être qu’à un moment, on pourrait aussi proposer un catalogue d’outils utiles aux coopératives — à l’instar de &lt;a href=&quot;https://paheko.cloud/&quot;&gt;Paheko&lt;/a&gt; pour les&amp;nbsp;associations…&lt;/em&gt;&lt;/p&gt;
-&lt;hr /&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;🏡 Une grande partie de mon entourage est déjà propriétaire. Ça en dit long sur la sphère dans laquelle j’évolue. J’ai l’impression que le fait d’acheter une maison fait partie de la liste non-négociable d’une vie réussie dans notre monde capitaliste. Jusqu’à très récemment, je n’avais jamais interrogé ce&amp;nbsp;postulat.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://ynote.hk/mots/argent/propriete.html&quot;&gt;Propriété par Fanny Cheung&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/37b0c9d01d6f788bee398b64377cb6c1/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🔨 Yes, it’s fair to point out that AI in its many different software manifestations can be considered a tool. But that is not the point of the statement. The word to watch out for is “just”. If someone were to say ”it’s a tool”, that makes sense. But the word “just” is there to shed&amp;nbsp;accountability.&lt;/p&gt;
-&lt;p&gt;Hence my concern is that the statement itself removes accountability and consideration for the bigger picture effects. &lt;mark&gt;Saying something is just a tool creates the faulty mental model&lt;/mark&gt; of all tools having interchangeable qualities from an ethical perspective, which simply isn’t&amp;nbsp;true.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://axbom.com/hammer-ai/&quot;&gt;If a hammer was like AI…&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/aac3c4716f9ff73e7409ecbc9550491b/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;💯 When it comes to front-end development, I’m worried that we’ve reached a state where the more complex over-engineered approach is viewed as the&amp;nbsp;default.&lt;/p&gt;
-&lt;p&gt;I may be committing a fundamental attribution error here, but I think that we’ve reached this point not because of any consideration for users, but rather &lt;mark&gt;because of how it makes us developers feel.&lt;/mark&gt; Perhaps building an old-fashioned website that uses HTML for navigations feels too easy, like it’s beneath us. But building an “app” that requires JavaScript just to render text on a screen feels like &lt;em&gt;real&lt;/em&gt;&amp;nbsp;programming.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://adactio.com/journal/20442&quot;&gt;Multi-page web apps&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/efc348f6559d55129657c7ba9d740b76/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/partage/&quot;&gt;#partage&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/scopyleft/&quot;&gt;#scopyleft&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">Blogroll</title>
-            <link href="https://larlet.fr/david/2023/09/09/" rel="alternate" type="text/html" />
-            <updated>2023-09-09T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/09/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Je lie cinq blogs person­nels, choi­sis arbi­trai­re­ment et sans hiérar­chie, avec une phrase sur pourquoi ils me sont impor­tants, en choi­sis­sant un billet précis que j’ai aimé y trou­ver&amp;nbsp;[…]&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://n.survol.fr/n/la-blogchain&quot;&gt;La blogchain - Carnet de notes&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/543d854b54593b8bf1adc2c491468bca/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je partageais sur Mastodon l’initiative d’Alex Sirac d’avoir fait un·e &lt;a href=&quot;https://blogroll.fr/&quot;&gt;&lt;em&gt;blogroll&lt;/em&gt;&lt;/a&gt; et en explorant le site je me rends compte qu’&lt;a href=&quot;https://blogroll.fr/articles-recents/&quot;&gt;il y a une forme de &lt;em&gt;planet&lt;/em&gt;&lt;/a&gt; et ça m’a rappelé de doux souvenirs. Je me souviens d’avoir mis ça en place sur cet espace à un moment, ça m’a rendu nostalgique 5&amp;nbsp;minutes… et j’ai passé les deux heures suivantes à le coder en mode statique&amp;nbsp;:-). Merci-pas-merci&amp;nbsp;Alex&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Il y a donc maintenant &lt;a href=&quot;https://larlet.fr/david/blogroll/&quot;&gt;une page de blogroll&lt;/a&gt; sur ce site avec les deux derniers billets publiés par personne listée. J’espère que j’arriverai à maintenir une page qui représente mes lectures réelles. Elle est loin d’être exhaustive car j’ai 150&amp;nbsp;flux de personnes dans mon agrégateur. J’avais plus envie d’encourager la diversité des&amp;nbsp;publications.&lt;/p&gt;
-&lt;p&gt;J’ai rencontré deux problèmes durant cette&amp;nbsp;expérience&amp;nbsp;:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;strong&gt;humain&lt;/strong&gt;&amp;nbsp;: certaines personnes souhaitent ne publier certains billets que par le biais de leur flux, est-ce qu’un agrégateur public ne va pas à l’encontre de cette&amp;nbsp;volonté&amp;#8239;?&lt;/li&gt;
-&lt;li&gt;&lt;strong&gt;technique&lt;/strong&gt;&amp;nbsp;: une proportion non négligeable de flux ne sont pas valides / standards, j’ai signalé cela à certain·es auteur·ices. Un &lt;a href=&quot;https://validator.w3.org/feed/&quot;&gt;outil existe&lt;/a&gt; de la part du W3C pour effectuer cette&amp;nbsp;vérification.&lt;/li&gt;
-&lt;/ul&gt;
-&lt;p&gt;Je me suis aussi demandé si c’était pertinent de faire comme Éric le propose avec un billet d’entrée particulier. C’est ce que &lt;a href=&quot;https://www.hypothermia.fr/liens/&quot;&gt;fait Eli&lt;/a&gt; par exemple et j’avais trouvé ça chouette et plus stimulant qu’une simple liste, je garde ça dans un coin de tête. Je sais aussi d’expérience qu’il ne faut pas que je me prenne trop la tête si je veux garder une liste à jour sinon je vais vite avoir la flemme. Peut-être que je fais suffisamment de liens externes dans mes&amp;nbsp;publications.&lt;/p&gt;
-&lt;p&gt;&lt;del&gt;J’aimerais également prendre le temps de faire une liste des articles techniques qui ont compté pour moi, à l’instar de &lt;a href=&quot;https://ericwbailey.website/formative-posts/&quot;&gt;Eric W. Bailey&lt;/a&gt; et &lt;a href=&quot;https://esif.dev/&quot;&gt;tant&lt;/a&gt; &lt;a href=&quot;https://wdrl.info/evergreen/&quot;&gt;d’autres&lt;/a&gt;.&lt;/del&gt; Bon, en fait &lt;a href=&quot;https://larlet.fr/david/stream/2019/12/27/&quot;&gt;je l’ai déjà faite&lt;/a&gt;, parfois ma mémoire numérique m’aide mais me rappelle que &lt;a href=&quot;https://larlet.fr/david/stream/2018/04/07/&quot;&gt;la spirale&lt;/a&gt; n’est peut-être pas compatible avec la vieillesse, oups&amp;nbsp;😅. J’aime bien l’idée de la &lt;a href=&quot;https://gilest.org/shoebox.html&quot;&gt;boîte à chaussures&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/462022ad2f27ff57387e9d0f49e96bad/&quot;&gt;cache&lt;/a&gt;) aussi, avec la crainte que ce musée des &lt;em&gt;vaporwares&lt;/em&gt; ne soit un peu trop&amp;nbsp;déprimant.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Mot du jour&amp;nbsp;: &lt;a href=&quot;https://fr.wikipedia.org/wiki/Eucatastrophe&quot;&gt;Eucatastrophe&lt;/a&gt; (j’ai arraché deux dents&amp;nbsp;aujourd’hui).&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/decentralisation/&quot;&gt;#décentralisation&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/web/&quot;&gt;#web&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">Char&amp;nbsp;2</title>
-            <link href="https://larlet.fr/david/2023/09/08/" rel="alternate" type="text/html" />
-            <updated>2023-09-08T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/08/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Je voulais le &lt;a href=&quot;https://larlet.fr/david/2020/02/07/#cars&quot;&gt;moins d’électronique&lt;/a&gt; possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la&amp;nbsp;ville.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://larlet.fr/david/2021/07/16/&quot;&gt;Char&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Suite des mes aventures avec une &lt;a href=&quot;http://tmp.larlet.fr/ccmc/&quot;&gt;comptabilité à jour&lt;/a&gt; depuis bientôt 3&amp;nbsp;ans. Divulgâcheur&amp;nbsp;: ça coûte très&amp;nbsp;cher.&lt;/p&gt;
-&lt;p&gt;Le résultat n’est pas joli-joli avec environ vingt mille kilomètres au compteur sur la période. Je n’ai pas non plus réussi à descendre en-dessous des 12L/100km avec ce véhicule qui n’a pas été pensé pour être économe et qui alimente les 4&amp;nbsp;roues en permanence… MAIS je crois que si c’était à refaire, je choisirais un &lt;em&gt;véhicule stupide&lt;/em&gt; à&amp;nbsp;nouveau.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Car companies are on the forefront of postcapitalism, and &lt;mark&gt;they understand that digital is the key to rent-extraction.&lt;/mark&gt; Remember when BMW announced that it was going to rent you the seatwarmer in your own fucking&amp;nbsp;car?&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;This is the urinary tract infection business model: without digitization, all your car’s value flowed in a healthy stream. But once the car-makers add semiconductors, each one of those features comes out in a painful, burning dribble, with every button on that farkakta touchscreen wired directly into your&amp;nbsp;credit-card.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://pluralistic.net/2023/07/24/rent-to-pwn/&quot;&gt;Pluralistic: Autoenshittification (24&amp;nbsp;July 2023)&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/8be5d8a651e8f8e211cfe10fd49bb3f0/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je pourrais citer tellement de passages de cet article de Cory Doctorow qui confirment ce choix que ça en est édifiant. Et si vous pensez que certaines marques ne font quand même pas n’importe quoi avec vos données, Mozilla se charge — chiffres à l’appui&amp;nbsp;— de démentir cette&amp;nbsp;idée&amp;nbsp;:&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The gist is: they can collect super intimate information about you -- from your medical information, your genetic information, to your “sex life” (seriously), to how fast you drive, where you drive, and what songs you play in your car -- in huge quantities. They then use it to invent more data about you through “inferences” about things like your intelligence, abilities, and&amp;nbsp;interests.&lt;/p&gt;
-&lt;p&gt;[…]&lt;/p&gt;
-&lt;p&gt;It’s bad enough for the behemoth corporations that own the car brands to have all that personal information in their possession, to use for their own research, marketing, or the ultra-vague “business purposes.” But then, most (84%) of the car brands we researched say they can share your personal data -- with service providers, data brokers, and other businesses we know little or nothing about. Worse, &lt;mark&gt;nineteen (76%) say they can sell your personal&amp;nbsp;data.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;A surprising number (56%) also say they can share your information with the government or law enforcement in response to a “request.” Not a high bar court order, but something as easy as an “informal request.” Yikes -- that’s a very low&amp;nbsp;bar!&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://foundation.mozilla.org/en/privacynotincluded/articles/its-official-cars-are-the-worst-product-category-we-have-ever-reviewed-for-privacy/&quot;&gt;It’s Official: Cars Are the Worst Product Category We Have Ever Reviewed for Privacy&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/81eb35bbd276cb28230820176152af87/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Progressivement, j’en apprends un peu plus sur la mécanique d’une vieille voiture thermique et je crois que c’est ma seule option. Elle n’est peut-être pas payante mais elle me garantit une certaine &lt;em&gt;confidensanité&lt;/em&gt;.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Welcome to the future. &lt;mark&gt;Sabotage&amp;nbsp;it.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://thenib.com/im-a-luddite/&quot;&gt;I’m a Luddite (and So Can&amp;nbsp;You!)&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😶 You can’t talk about all the friends and family you’ve lost. You can’t talk about how tired you are. You can’t talk about politics. You can’t talk about climate change. You can’t talk about the wildfires or that town that burned down. You can’t talk about living through the hottest days in human history. You can’t talk about masks or air purifiers. You can’t talk about student loans. You can’t talk about the wars we’re fighting or getting ready to&amp;nbsp;fight.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;You can’t talk about anything that&amp;nbsp;matters.&lt;/mark&gt;&lt;/p&gt;
-&lt;p&gt;You can only talk about the latest shitty superhero movie. You can talk about Barbie. You can talk about celebrity gossip. You can talk about the vacation you pretended to enjoy. You can talk about&amp;nbsp;yoga.&lt;/p&gt;
-&lt;p&gt;You can talk about your morning&amp;nbsp;routine.&lt;/p&gt;
-&lt;p&gt;You can talk about&amp;nbsp;sports.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.okdoomer.io/watching-the-world-burn-on-our-phones/&quot;&gt;Watching The World Burn on Our Phones&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/977dc3c51f364f41db786f881d2c3fd2/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😁 I’m not young enough to know&amp;nbsp;everything.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://blog.jim-nielsen.com/2023/family-tree-wisdom/&quot;&gt;Family Tree Wisdom&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/d40295a6495f934934436470ad425cac/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/confidentialite/&quot;&gt;#confidentialité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/gafam/&quot;&gt;#gafam&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/traces/&quot;&gt;#traces&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">Conteur</title>
-            <link href="https://larlet.fr/david/2023/09/07/" rel="alternate" type="text/html" />
-            <updated>2023-09-07T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/07/</id>
-            <summary type="html">
-&lt;p&gt;Un peu de contexte. Lorsqu’on va promener et bivouaquer en forêt avec l’enfant —&amp;nbsp;comme la fin de semaine dernière&amp;nbsp;— on invente des histoires. C’est souvent inspiré des lectures du moment (La guerre de clans, Naruto, etc) croisées avec les éléments que l’on a sous la main (crapauds, &lt;del&gt;anis&lt;/del&gt; gemmes de Flavigny, etc). En rentrant à la maison, on prend un moment le soir pour &lt;del&gt;écrire&lt;/del&gt; taper tout cela mais il faut garder de la place pour les dessins d’illustration. Me voilà donc en train de chercher comment introduire un saut de page en Markdown lors de l’impression. Ou plutôt dans le rendu de Markdown par iAWriter pour être plus précis. Et il s’avère que &lt;a href=&quot;https://ia.net/writer/support/basics/markdown-guide&quot;&gt;c’est possible&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/478260db4b078551676bf263cbeeaa52/&quot;&gt;cache&lt;/a&gt;) avec &lt;code&gt;+++&lt;/code&gt;&amp;#8239;!&lt;/p&gt;
-&lt;p&gt;Au passage, je découvre qu’il y a tout un tas de possibilités dans un logiciel que j’utilise depuis des années. Comme les formules (dans les tableaux) ou les métadonnées qui viennent dynamiquement remplacer des variables. Une chouette découverte après avoir utilisé récemment les &lt;em&gt;templates&lt;/em&gt; pour uniformiser mes&amp;nbsp;courriers.&lt;/p&gt;
-&lt;p&gt;Et c’est ainsi que je vous conte ce qu’il nous est arrivé en contant cette histoire. Je vous accorde que c’est un peu &lt;em&gt;meta&lt;/em&gt;.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-09-06-extrait-quete.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-09-06-extrait-quete.jpg&quot;
-            width=&quot;3024&quot; height=&quot;3024&quot;
-            srcset=&quot;/static/david/2023/2023-09-06-extrait-quete.jpg 3024w, /static/david/2023/2023-09-06-extrait-quete_660x440.jpg 660w, /static/david/2023/2023-09-06-extrait-quete_990x660.jpg 990w, /static/david/2023/2023-09-06-extrait-quete_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3024 / 3024))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Un extrait de l’histoire&amp;nbsp;: Sur le chemin du retour, nous nous dimes que nous allions écrire cette histoire.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Mais on aime ça le meta. (Et les typos. (Et le passé&amp;nbsp;simple.))&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;hr /&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🪦 The 100-Year Plan isn’t just about today. It’s an investment in tomorrow. Whether you’re cementing your own digital legacy or gifting 100&amp;nbsp;years of a trusted platform to a loved one, &lt;mark&gt;this plan is a testament to the future&lt;/mark&gt;’s boundless&amp;nbsp;potential.&lt;/p&gt;
-&lt;p&gt;The cost is $38,000. We hope people&amp;nbsp;renew.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/&quot;&gt;Introducing the 100-Year Plan: Secure Your Online Legacy for a Century&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/57c0b22f733354552de63db112f51b20/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;📜 A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. &lt;mark&gt;Without constant maintenance and management,&lt;/mark&gt; most digital information will be lost in just a few decades. Our modern records are far from&amp;nbsp;permanent.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://longnow.org/ideas/shining-a-light-on-the-digital-dark-age/&quot;&gt;Shining a Light on the Digital Dark Age&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/83c60dd85e9f0f07bf41821a2694a0e5/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🔋 But there’s something else I want to suggest here, and it’s to stop thinking about time entirely. Or, at least, to stop thinking about time as something &lt;em&gt;consistent&lt;/em&gt;. We all know that time can be stretchy or compressed—we’ve experienced hours that plodded along interminably and those that whisked by in a few breaths. We’ve had days in which we got so much done we surprised ourselves and days where we got into a staring contest with the to-do list and the to-do list didn’t blink. And we’ve also had days that left us puddled on the floor and days that left us pumped up, practically leaping out of our chairs. &lt;mark&gt;What differentiates these experiences isn’t the number of hours in the day but the energy we get from the work.&lt;/mark&gt; Energy &lt;em&gt;makes&lt;/em&gt;&amp;nbsp;time.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://everythingchanges.us/blog/energy-makes-time/&quot;&gt;Energy makes time&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/3f4be4add2995420dc6be529f1032e46/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/aventure/&quot;&gt;#aventure&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Retour</title>
-            <link href="https://larlet.fr/david/2023/09/06/" rel="alternate" type="text/html" />
-            <updated>2023-09-06T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/09/06/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;The app will eventually become obsolete. It’s the plain text files I create that are designed to last. Who knows if anyone will want to read them besides me, but &lt;em&gt;future me&lt;/em&gt; is enough of an audience to make it&amp;nbsp;worthwhile.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://stephango.com/file-over-app&quot;&gt;File over app - Steph Ango&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/20d288eb47779c4f1b3f36fb86aa7108/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Je vais revenir délicatement publier par ici. Ces derniers mois ont été… mmh, agités… mais je commence à retrouver un certain équilibre. Beaucoup de phases qui ne s’articulaient pas comme je l’espérais, d’attention trop superficielle mal compensée, au milieu d’une grosse &lt;a href=&quot;https://larlet.fr/david/2023/01/23/&quot; title=&quot;Déception&quot;&gt;déception&lt;/a&gt; qui a laissé des traces profondes. J’aurais au moins appris la différence entre l’inspiration et la manipulation. &lt;em&gt;The Hard Way™&lt;/em&gt;. Je suis très reconnaissant envers toutes les personnes qui ont fait que je ne me suis pas senti trop isolé ou vulnérable pendant cette&amp;nbsp;période.&lt;/p&gt;
-&lt;p&gt;Grâce à un départ, &lt;a href=&quot;http://scopyleft.fr/&quot;&gt;Scopyleft&lt;/a&gt; prend une &lt;a href=&quot;https://larlet.fr/david/2021/03/17/&quot;&gt;autre dimension&lt;/a&gt; et redéfinit ses aspirations collectivement à travers des échanges plus sains et apaisés. Un arbre tombe et de nombreuses autres espèces arrivent enfin à capter la lumière pour proposer un autre paysage, envisager un nouvel écosystème&amp;nbsp;🌻🐝.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Et puis, j’ai des dizaines d’onglets à partager à mon &lt;em&gt;futur moi&lt;/em&gt;.&lt;/p&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;💭 If you’re more a guess-culture person, asking people for help without knowing their circumstances can feel rude or intrusive. Broadcasting publicly your need for help can feel awkward and&amp;nbsp;vulnerable.&lt;/p&gt;
-&lt;p&gt;If you’re more of an ask-culture person, the guess-culture example of juggling everyone’s specific scenarios and the historical context of favors &lt;mark&gt;probably seems exhausting.&lt;/mark&gt; Dropping hints in the hopes that you won’t even have to make your request can feel extra passive and&amp;nbsp;manipulative.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://jeanhsu.substack.com/p/ask-vs-guess-culture&quot;&gt;Ask vs guess culture&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/ba42826808418339bdc0364586bea5bf/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;😔 But really the baseline of web design is so low because there’s a lack of tenderness, care, and empathy. &lt;mark&gt;It’s because we don’t see the making of a website as a worthy profession.&lt;/mark&gt; It’s because we hope to squeeze the last bit of juice from the orange by mulching people in between modals and pop ups and cookie&amp;nbsp;banners.&lt;/p&gt;
-&lt;p&gt;So how do we do better? How do we take better care of our&amp;nbsp;websites?&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://robinrendle.com/notes/why-are-websites-embarrassing/&quot;&gt;Why are websites embarrassing?&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/7458294e070577c610294f8ec927c30d/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;🍏 It would also inject the potential for a slippery slope of unintended consequences. Scanning for one type of content, for instance, &lt;mark&gt;opens the door for bulk surveillance&lt;/mark&gt; and could create a desire to search other encrypted messaging systems across content types (such as images, videos, text, or audio) and content categories. How can users be assured that a tool for one type of surveillance has not been reconfigured to surveil for other content such as political activity or religious persecution? Tools of mass surveillance have widespread negative implications for freedom of speech and, by extension, democracy as a whole. Also, designing this technology for one government could require applications for other countries across new data&amp;nbsp;types.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;a href=&quot;https://larlet.fr/static/david/2023/apple-letter-to-heat-initiative.pdf&quot;&gt;Apple letter to Heat initiative&lt;/a&gt; (PDF, 121Ko)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/intimite/&quot;&gt;#intimité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/scopyleft/&quot;&gt;#scopyleft&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">France</title>
-            <link href="https://larlet.fr/david/2023/07/28/" rel="alternate" type="text/html" />
-            <updated>2023-07-28T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/07/28/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Si vous êtes venus pour m’aider, vous perdez votre temps. Mais si vous êtes venus parce que votre libération est liée à la mienne, alors travaillons&amp;nbsp;ensemble.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;Lilla Watson (militante autochtone&amp;nbsp;australienne)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Sentiment toujours très particulier pour l’expatrié que je suis de faire un séjour dans son pays de&amp;nbsp;naissance.&lt;/p&gt;
-&lt;p&gt;Il y a les paysages, les personnes, les odeurs, les situations à la fois si réelles et si cotonneuses. Comme si les émotions étaient encore sous le coup du décalage horaire. Comme si l’éphémère se devait d’être intense, presque sur-joué. Comme si l’enjeu pouvait être un retour. Ou encore plus de&amp;nbsp;kérosène.&lt;/p&gt;
-&lt;p&gt;Il y a le monde. Partout. Tout le temps. L’impression d’être asphyxié dans ces petites rues caniculaires (coucou Pomme). Et l’inquiétude qui monte de se demander ce qu’il va arriver à toutes ces personnes. Dans l’étuve, les grenouilles apprécient l’eau chaude tant qu’il y en a — moins les moustiques&amp;nbsp;tigres.&lt;/p&gt;
-&lt;p&gt;Il y a les montagnes, celles que l’on évalue en se cassant la nuque. Celles qui aspirent et inspirent. Qui permettent de se sentir vivant… à en perdre le souffle. Qui requièrent de s’élever pour élargir sa vision du monde. Celles qui me manquent tant. Je n’ai pas arrêté de faire du sport, j’ai arrêté d’être attiré par des&amp;nbsp;sommets.&lt;/p&gt;
-&lt;p&gt;Il y a &lt;em&gt;toujours&lt;/em&gt; cette ambiance nauséabonde qui se traduit en un chapelet de micro-agressions auxquelles on ne peut être pleinement sensible lorsqu’on baigne dedans. C’est leur absence, ailleurs, qui les rend d’autant plus visibles. Ma parentalité en France serait une épreuve pour justifier des abus injustifiables (et je croule déjà sous mes propres&amp;nbsp;contradictions).&lt;/p&gt;
-&lt;p&gt;Il y a les retrouvailles, les fruits mûrs, les rigolades, le non soutenable qui étire les yeux et les sourires. La culpabilité d’imposer ce manque —&amp;nbsp;et sa compensation&amp;nbsp;— à un enfant aussi, qui peut difficilement rationaliser depuis le cocon familial si douillet des vacances. Il y a les reproches qui grandissent avec le besoin de se construire une jeune identité. Il y a les proches qui vieillissent avec la peur de devoir déconstruire leurs&amp;nbsp;in·certitudes.&lt;/p&gt;
-&lt;p&gt;Il y a læ covid. Ah non, pardon&amp;nbsp;🫣.&lt;/p&gt;
-&lt;p&gt;Il y a la&amp;nbsp;France.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/nostalgie/&quot;&gt;#nostalgie&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/sociologie/&quot;&gt;#sociologie&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">Perles</title>
-            <link href="https://larlet.fr/david/2023/07/02/" rel="alternate" type="text/html" />
-            <updated>2023-07-02T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/07/02/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;Mon travail de scientifique m’a appris comment les gens construisent des théories pour avoir le sentiment de contrôler leur&amp;nbsp;environnement.&lt;/p&gt;
-&lt;p&gt;Ils se comportent ensuite de manière à renforcer ces théories. Les personnes autistes partagent ce désir «&amp;nbsp;normal&amp;nbsp;» de contrôler leur environnement. Ce qui diffère pour elles, c’est l’intensité avec laquelle cet environnement les déborde. Des connexions neuronales atypiques dans le cerveau des personnes autistes peuvent conduire à une perception anormale, augmentant l’importance des événements individuels mais affaiblissant la capacité à relier ces morceaux de vie en des représentations plus intégrées et&amp;nbsp;abstraites.&lt;/p&gt;
-&lt;p&gt;Les comportements rigides et répétitifs des personnes autistes commencent à avoir un sens lorsque nous les considérons comme la réaction normale d’un être humain à un environnement sensoriel très anormal, plutôt que comme des symptômes d’une maladie. Les symptômes autistiques sont ce qu’une personne fait pour forcer un monde chaotique à suivre un scénario prévisible. Nous essayons tous d’imposer un ordre narratif à ce qui peut sembler un monde fondamentalement chaotique. La différence dans l’autisme est qu’il y a plus de chaos à&amp;nbsp;contrôler.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;À cet égard, l’étude de l’autisme peut nous en apprendre beaucoup sur l’humanité en général&lt;/mark&gt; et sur la façon dont la détresse psychologique peut être expliquée comme une réaction rationnelle, bien qu’extrême, à un monde qui ne tourne pas&amp;nbsp;rond.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;L’imperméable jaune&lt;/em&gt;, Matthew&amp;nbsp;Belmonte&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Une citation extraite de &lt;em&gt;Des gènes, des synapses, des autismes&lt;/em&gt; de Thomas Bourgeron qui est assez technique et que je recommande. Cela me donne envie de séquencer mon génome pour jouer avec mais comment réduire les intermédiaires&amp;nbsp;profiteurs&amp;#8239;?&lt;/p&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;La génétique n’est pas la science des gènes mais la science de la diversité génétique qui contribue à notre&amp;nbsp;individualité.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;Ibid.&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;hr /&gt;
-&lt;p&gt;Avec son&amp;nbsp;consentement&amp;nbsp;:&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-explique-ton-hypothese.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-explique-ton-hypothese.jpg&quot;
-            width=&quot;3022&quot; height=&quot;675&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-explique-ton-hypothese.jpg 3022w, /static/david/2023/2023-07-02-explique-ton-hypothese_660x440.jpg 660w, /static/david/2023/2023-07-02-explique-ton-hypothese_990x660.jpg 990w, /static/david/2023/2023-07-02-explique-ton-hypothese_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 675))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Explique ton hypothèse&amp;nbsp;: Ça. (← Ceci n’est pas une hypothèse.)&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Ni une&amp;nbsp;pipe.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-que-remarques-tu.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-que-remarques-tu.jpg&quot;
-            width=&quot;3022&quot; height=&quot;675&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-que-remarques-tu.jpg 3022w, /static/david/2023/2023-07-02-que-remarques-tu_660x440.jpg 660w, /static/david/2023/2023-07-02-que-remarques-tu_990x660.jpg 990w, /static/david/2023/2023-07-02-que-remarques-tu_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 675))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Que remarques-tu&amp;#8239;? J’ai remarqué que j’ai raison.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Devenu un&amp;nbsp;mème.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-pourquoi.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-pourquoi.jpg&quot;
-            width=&quot;3022&quot; height=&quot;819&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-pourquoi.jpg 3022w, /static/david/2023/2023-07-02-pourquoi_660x440.jpg 660w, /static/david/2023/2023-07-02-pourquoi_990x660.jpg 990w, /static/david/2023/2023-07-02-pourquoi_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 819))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Pourquoi&amp;#8239;? On le dit tout le temps.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;La&amp;nbsp;facilité.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-enonce-une-hypothese.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-enonce-une-hypothese.jpg&quot;
-            width=&quot;3022&quot; height=&quot;1185&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-enonce-une-hypothese.jpg 3022w, /static/david/2023/2023-07-02-enonce-une-hypothese_660x440.jpg 660w, /static/david/2023/2023-07-02-enonce-une-hypothese_990x660.jpg 990w, /static/david/2023/2023-07-02-enonce-une-hypothese_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3022 / 1185))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Je le pense parce que&amp;nbsp;: car dur + dur + dur = méga-dur&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;La&amp;nbsp;science.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-07-02-vie-de-groupe.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-07-02-vie-de-groupe.jpg&quot;
-            width=&quot;2932&quot; height=&quot;2190&quot;
-            srcset=&quot;/static/david/2023/2023-07-02-vie-de-groupe.jpg 2932w, /static/david/2023/2023-07-02-vie-de-groupe_660x440.jpg 660w, /static/david/2023/2023-07-02-vie-de-groupe_990x660.jpg 990w, /static/david/2023/2023-07-02-vie-de-groupe_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 2932 / 2190))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Pourquoi doit-on apprendre à vivre en groupe&amp;#8239;? Pour s’amuser. (Car nous vivons en société.) Est-il facile selon toi de vivre en groupe&amp;#8239;? Explique pourquoi. NON. J’arrive pas à attendre qu’elle ai terminer&amp;#8239;! (Ce n’est pas que du travail à deux)&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Une histoire de chats et de&amp;nbsp;chiens.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/accompagnement/&quot;&gt;#accompagnement&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/ecriture/&quot;&gt;#écriture&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/parentalite/&quot;&gt;#parentalité&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">Particules</title>
-            <link href="https://larlet.fr/david/2023/06/26/" rel="alternate" type="text/html" />
-            <updated>2023-06-26T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/06/26/</id>
-            <summary type="html">
-
-&lt;blockquote&gt;
-&lt;p&gt;La mémoire est la source de la libération, et l’oubli est la racine de&amp;nbsp;l’exil.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;Ba’al&amp;nbsp;Shem-Tov&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;On attend que les particules fines retombent pour pouvoir décoller. Si ça n’est pas un grand écart &lt;em&gt;facepalm&lt;/em&gt;&amp;nbsp;ça…&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Pas vraiment d’&lt;a href=&quot;https://larlet.fr/david/2021/06/15/&quot;&gt;avihonte&lt;/a&gt; chez les ami·es (expatrié·es). J’évite de trop y penser, je vis déjà assez reclus comme ça. Et je suis loin d’être&amp;nbsp;exemplaire.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Il y a un besoin urgent à ce que je devienne ringard. Comme la cigarette, la voiture, l’avion. Un sous-groupe de ma génération doit incarner ce qu’il ne faut &lt;strong&gt;pas&lt;/strong&gt;&amp;nbsp;devenir.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Les Sardaukars ont en eu marre de se battre contre des Fremens et sont retournés sur Geidi Prime pour le dire. Denis Villeneuve doit se frotter les&amp;nbsp;mains.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;J’ai lu le Paradoxe de Fermi de Jean-Pierre Boudine ainsi que &lt;a href=&quot;https://www.visualcapitalist.com/path-of-human-evolution/&quot;&gt;cette illustration&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/58bdc0bd6ed37d5990d24384ee40022b/&quot;&gt;cache&lt;/a&gt;), serait-on sur la dernière marche&amp;#8239;? Celle du grand&amp;nbsp;sot.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Combien d’appareils pourraient être rendus meilleurs en enlevant des choses dedans&amp;#8239;? Tous&amp;#8239;? &lt;a href=&quot;http://mikebeauchamp.com/misc/sennheiser-hd-555-to-hd-595-mod/&quot;&gt;Au moins un.&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/8f76362de8331d4dc5d3e0e0a882606e/&quot;&gt;cache&lt;/a&gt;)&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;J’ai failli acheter une casquette sur laquelle était&amp;nbsp;inscrite&amp;nbsp;:&lt;/p&gt;
-
-&lt;blockquote&gt;
-&lt;p&gt;Ce qui distingue les garçons des hommes c’est le prix de leurs jouets. (Oui, ça sonnait mieux en&amp;nbsp;anglais…)&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Depuis, je ris&amp;nbsp;jaune.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Je me suis mis au skate pour pouvoir suivre l’enfant. Je me demande à quel point le &lt;em&gt;longboard&lt;/em&gt; est un skate bourgeois. Je retrouve des sensations de &lt;em&gt;snowboard&lt;/em&gt; intéressantes cela&amp;nbsp;dit.&lt;/p&gt;
-&lt;hr /&gt;
-&lt;p&gt;Je suis content de ne pas avoir pris mon appareil photo pour cette dernière sortie en forêt. Documenter &lt;a href=&quot;https://larlet.fr/david/2023/06/12/&quot; title=&quot;Apocalypse&quot;&gt;l’apocalypse&lt;/a&gt; sans la rendre belle est un enjeu&amp;nbsp;important.&lt;/p&gt;
-&lt;figure&gt;
-    &lt;a href=&quot;https://larlet.fr/static/david/2023/2023-06-25-ouareau-smog.jpg&quot;
-        title=&quot;Cliquer pour une version haute résolution&quot;&gt;
-        &lt;img
-            src=&quot;https://larlet.fr/static/david/2023/2023-06-25-ouareau-smog.jpg&quot;
-            width=&quot;3024&quot; height=&quot;4032&quot;
-            srcset=&quot;/static/david/2023/2023-06-25-ouareau-smog.jpg 3024w, /static/david/2023/2023-06-25-ouareau-smog_660x440.jpg 660w, /static/david/2023/2023-06-25-ouareau-smog_990x660.jpg 990w, /static/david/2023/2023-06-25-ouareau-smog_1320x880.jpg 1320w&quot;
-            sizes=&quot;min(100vw, calc(100vh * 3024 / 4032))&quot;
-            loading=&quot;lazy&quot;
-            decoding=&quot;async&quot;
-            alt=&quot;Un soleil rouge au-dessus de la forêt embrumée par des cendres à des centaines de kilomètres plus au nord.&quot;&gt;
-    &lt;/a&gt;
-    &lt;figcaption&gt;Ou&amp;nbsp;ringard.&lt;/figcaption&gt;
-&lt;/figure&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/foret/&quot;&gt;#forêt&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/solastalgia/&quot;&gt;#solastalgia&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/tristesse/&quot;&gt;#tristesse&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">Village</title>
-            <link href="https://larlet.fr/david/2023/06/19/" rel="alternate" type="text/html" />
-            <updated>2023-06-19T12:00:00+01:00</updated>
-            <id>https://larlet.fr/david/2023/06/19/</id>
-            <summary type="html">
-
-&lt;blockquote lang=&quot;en&quot;&gt;
-&lt;p&gt;Because they are precious, it’s important to understand what makes a village a village, and what kills the&amp;nbsp;village.&lt;/p&gt;
-&lt;p&gt;The central thesis is that what these villages can’t tolerate is a sustained large influx of strangers. A stranger in this context is an nothing more or less than an unfamiliar face. I know it tends to draw the mind in those directions, but please refrain from projecting concepts such as nationality or ethnicity on the term. We’re all simultaneously villagers and strangers in various social&amp;nbsp;circumstances.&lt;/p&gt;
-&lt;p&gt;A slow trickle of strangers is tolerable, a brief large influx is fine; the strangers’ average interaction is eventually stabilizes and biases toward the a stable group of members, and they quickly find shared values and become villagers too. They become familiar faces, and undoubtedly make their mark on the shared culture. That’s often a refreshing and welcome thing. It’s still a&amp;nbsp;village.&lt;/p&gt;
-&lt;p&gt;When sustained growth is too large, the strangers’ average interaction is with other strangers, and even if this would have eventually stabilized into something like a village, there are yet more strangers to prevent this from happening. Everyone stays strangers, and a sort of stranger-culture emerges where guards are up by default because there are never any familiar&amp;nbsp;faces.&lt;/p&gt;
-&lt;p&gt;&lt;mark&gt;It’s no longer a village, but something like a train station.&lt;/mark&gt; The default mode of being is &lt;em&gt;passing through&lt;/em&gt;. People come and go, and there’s no real sense of belonging. There is a sense of anonymity, there are no lasting repercussions for cutting in line or being&amp;nbsp;rude.&lt;/p&gt;
-&lt;p&gt;It’s an oppressive, alienating, and disempowering&amp;nbsp;environment.&lt;/p&gt;
-&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://www.marginalia.nu/log/82_killing_community/&quot;&gt;Killing Community&lt;/a&gt;&lt;/em&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/e6c79911a93db53d87a80281d0037b97/&quot;&gt;cache&lt;/a&gt;)&lt;/cite&gt;&lt;/p&gt;
-&lt;/blockquote&gt;
-&lt;p&gt;Cet article parle de Reddit mais je ressens très fort la transformation qui s’est opérée au sein de Mastodon, d’un village en une gare. Il m’a fallu &lt;a href=&quot;https://larlet.fr/david/2022/11/12/&quot;&gt;6&amp;nbsp;mois&lt;/a&gt; pour prendre le train et retourner dans ma&amp;nbsp;grotte.&lt;/p&gt;
-&lt;p&gt;Dans cet espace, je réfléchis beaucoup à cette différence de se sentir &lt;a href=&quot;https://sive.rs/below-average&quot;&gt;en-dessous de la moyenne&lt;/a&gt;&amp;nbsp;(&lt;a href=&quot;https://larlet.fr/david/cache/2023/4d9148b9d78455c2d67051e467d2e824/&quot;&gt;cache&lt;/a&gt;). Et ce changement de point de vue me fait aussi reconsidérer mes dépendances et mes incompétences. Ce n’est pas cet atelier vélo qui est mauvais, ce sont mes choix techniques qui m’ont rendu incompétent face aux pannes actuelles qui demandent davantage d’outillage et d’expérience. Etc.&lt;/p&gt;
-&lt;p&gt;En ce moment, je travaille avec &lt;a href=&quot;https://www.croix-rouge.fr/&quot;&gt;La Croix-Rouge française&lt;/a&gt;, le &lt;a href=&quot;https://labrri.net/&quot;&gt;Laboratoire de recherche en relations interculturelles de l’Université de Montréal&lt;/a&gt; et surtout &lt;a href=&quot;https://github.com/umap-project/umap/&quot;&gt;uMap&lt;/a&gt; et son essaimage, autant de projets et d’explorations qui redonnent du sens à mes investissements dans le numérique. Il faudrait que je prenne le temps d’écrire à ce sujet, j’aurais probablement des choses à partager côté évolution de Scopyleft&amp;nbsp;aussi.&lt;/p&gt;
-&lt;p&gt;Dans un temps et un espaces finis, il faut constamment rebâtir les chemins de sa pensée et prendre soin des relations du village. Mon activité devient alors davantage celle d’un conteur, qui se sert parfois d’outils pour mettre en musique les actions des&amp;nbsp;autres.&lt;/p&gt;
-&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2023/gratitude/&quot;&gt;#gratitude&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/incompetence/&quot;&gt;#incompétence&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2023/simplicite/&quot;&gt;#simplicité&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>
 </feed>

david/templates/profil.html

@@ -30,11 +30,11 @@
         {% endfor %}
       </p>
     </nav>
-    <p id="tags-2023">Ou par étiquettes :</p>
+    <p id="tags-2024">Ou par étiquettes :</p>
     <nav>
       <p>
         {% for slug, title, count in tags -%}
-          <a href="/david/2023/{{ slug }}/" rel="tag">#{{ title }} ({{ count }})</a>
+          <a href="/david/2024/{{ slug }}/" rel="tag">#{{ title }} ({{ count }})</a>
           {%- if not loop.last %},
           {%- else -%}.
           {% endif %}
@@ -340,8 +340,7 @@
     </p>
     <h2>Me contacter</h2>
     <p>
-      Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même. Si vous souhaitez correspondre de manière chiffrée, voici <a href="/static/david/david-larlet-pgp-public-key-1359EA98.asc"
-    title="Clé publique de chiffrement">ma clé publique</a>.
+      Je réponds à <em>presque</em> tous les courriels reçus, exception faite de ceux que j’assimile à de la publicité ou du <code>spam</code>. Vous pouvez <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">m’écrire</a> sans trop de civilités et me tutoyer, je répondrai probablement de même.
     </p>
   </article>
 {% endblock content %}

david/templates/tag_2024.html

@@ -0,0 +1,50 @@
+{% extends "base_2024.html" %}
+{% block title %}Étiquette #{{ tag_name }}{% endblock %}
+{% block description %}Publications relatives au tag #{{ tag_name }}{% endblock %}
+{% block extra_head %}
+  <style type="text/css">
+    details[open] summary {
+      display: none;
+    }
+  </style>
+{% endblock %}
+{% block content %}
+<article>
+  <header>
+    <hgroup>
+      <h1>#{{ tag_name }}</h1>
+      <p>Publications relatives à cette étiquette</p>
+    </hgroup>
+  </header>
+  <nav>
+    <p class="center">
+      <a href="/david/" title="Aller à l’accueil">
+        Accueil</a>
+      •
+      <a rel="tags"
+        href="/david/#tags-2024"
+        title="Liste de toutes les étiquettes">
+        Étiquettes</a>
+    </p>
+  </nav>
+  {% for page in page_list %}
+    <h2>
+      <a href="{{ page.url }}" title="Lien permanent vers cet article">{{ page.title }}</a> <time datetime="{{ page.date }}">{{ page.date|format_date }}</time>
+    </h2>
+    {{ page.content }}
+    {% if page.tags %}
+      <nav>
+        <p>
+          {% for tag in page.tags %}
+            <a href="/david/2024/{{ slugify(tag) }}/"
+               title="Liste de tous les articles 2024 associés à cette étiquette"
+               rel="tag">#{{ tag }}</a>
+          {% endfor %}
+          <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
+        </p>
+      </nav>
+    {% endif %}
+    <hr>
+  {% endfor %}
+</article>
+{% endblock content %}

site.py

@@ -456,10 +456,11 @@ def tags():
     # Parse all pages to collect tags.
     Page.all(source=SOURCES_PATH, only_published=True)
     for tag in all_tags:
-        template = environment.get_template("tag_2021.html")
+        template = environment.get_template("tag_2024.html")
         content = template.render(
             page_list=sorted(pages_by_tags[tag], reverse=True),
             tag_name=tag,
+            slugify=slugify,
         )
         target_path = DAVID / "2024" / slugify(tag)
         target_path.mkdir(parents=True, exist_ok=True)