davidbgk
/
larlet-fr-david

<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Étiquette #solastalgia
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Publications relatives au tag #solastalgia">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- To get attribution when linking on mastodon. -->
  <meta name="fediverse:creator" content="@david@larlet.fr">
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#solastalgia</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/03/04/" title="Lien permanent vers cet article">Jour 1</a> <time datetime="2024-03-04">4 mars 2024</time>
    </h2>
    
<p>Une réservation de longue date qui s’est transformée en sortie familiale (!), malheureusement nous n’avons pas pu rejoindre le refuge à ski faute de neige suffisante. C’était problématique car j’avais prévu de traîner une bonne partie de l’équipement, ce qui se révélait être un peu plus lourd sur le dos. Bon, aussi, on était partis sur une raclette, ça n’aide&nbsp;pas&nbsp;😅.</p>
<p>J’avais très peur que le sentier soit peu praticable sans percer à chaque pas, ce qui m’était déjà arrivé dans un tel contexte. Vu le poids du sac, je craignais notamment que ma cheville en cours de réparation refasse le même mouvement en descente… mais nous étions à une poignée de degrés de cet état de la neige pour notre plus grand&nbsp;bonheur.</p>
<p>Ce n’était pas non plus de tout repos et la récompense d’une lac dégelant à l’arrivée était bien méritée. Il est rare d’avoir ces conditions très douces dans un contexte hivernal, on en avait même oublié de prendre nos&nbsp;tuques&#8239;!</p>
<p><em>Tests du jour&nbsp;: les barquettes en aluminium pour faire réflecteur de bougies. Efficace. Les bougies longues durées d’Ikea pour faire fondre du fromage. Pas&nbsp;efficace.</em></p>
<figure>
    <a href="/static/david/2024/2024-03-04-lac-corbeau.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-04-lac-corbeau.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-03-04-lac-corbeau.jpg 3024w, /static/david/2024/2024-03-04-lac-corbeau_660x440.jpg 660w, /static/david/2024/2024-03-04-lac-corbeau_990x660.jpg 990w, /static/david/2024/2024-03-04-lac-corbeau_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Lac corbeau avec des boulots au premier plan.">
    </a>
    <figcaption>Un décor très minecrafteux&nbsp;(sic).</figcaption>
</figure>

    
      <nav>
        <p>
          
            <a href="/david/2024/dystopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dystopie</a>
          
            <a href="/david/2024/foret/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#forêt</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time>
    </h2>
    
<p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu&nbsp;frais…</p>
<figure>
    <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-28-courbe-temperature.jpg"
            width="960" height="2079"
            srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 960 / 2079))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12&nbsp;heures.">
    </a>
    <figcaption>#MeanwhileInCanada</figcaption>
</figure>
<a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a>
<p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p>
<p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement&nbsp;défensifs.</p>
<a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a>

<blockquote lang="en">
<p>Anyway, if you want to know some basic information about Passkeys I know a site you can check&nbsp;out.</p>
<p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en"
            title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a>
            <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en"
                data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now."
                data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/"
                data-date="2024-02-28"
                data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨‍💻</text></svg>"
                data-domain="chriscoyier.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p>
<a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a>

<blockquote lang="en">
<p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we&nbsp;choose!</p>
<p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en"
            title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a>
            <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en"
                data-tippy data-description="Let the browser and OKLCH do the hard work of styling states."
                data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/"
                data-date="2024-02-28"
                data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg"
                data-domain="abeautifulsite.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste&nbsp;titre.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/documentation/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#documentation</a>
          
            <a href="/david/2024/partage/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#partage</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time>
    </h2>
    
<p>Anecdote du jour qui met le sourire de bon&nbsp;matin.</p>
<figure>
    <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-26-neige-galaxie.jpg"
            width="4032" height="3024"
            srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 4032 / 3024))"
            loading="lazy"
            decoding="async"
            alt="De la neige qui tombe à gros flocon.">
    </a>
    <figcaption>L’espace d’un instant, par la&nbsp;fenêtre.</figcaption>
</figure>

<blockquote>
<p>— Oh la belle neige&#8239;!<br />
—&nbsp;Il pleut des étoiles, la galaxie est en train de tomber.<br />
—&nbsp;❤️</p>
</blockquote>
<a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a>

<blockquote lang="en">
<p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party&nbsp;components.</p>
<p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en"
            title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a>
            <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en"
                data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace"
                data-source="https://lea.verou.me/docs/var-groups/"
                data-date="2024-02-27"
                data-favicon="https://lea.verou.me/mark.svg"
                data-domain="lea.verou.me"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer&nbsp;😅🙇. Trop&nbsp;hâte&#8239;!</p>
<a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a>

<blockquote lang="en">
<p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have&nbsp;plugins.</p>
<p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en"
            title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a>
            <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en"
                data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too."
                data-source="https://css-tricks.com/designing-a-javascript-plugin-system/"
                data-date="2024-02-27"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Problématique du jour&nbsp;: comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité&#8239;? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que&nbsp;JavaScript.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/parentalite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#parentalité</a>
          
            <a href="/david/2024/poesie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#poésie</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/17/" title="Lien permanent vers cet article">Quotidien</a> <time datetime="2024-02-17">17 février 2024</time>
    </h2>
    
<p>S’il y a une chose qui a changé depuis que j’ai repris une écriture quotidienne c’est de ne presque plus regarder de films /&nbsp;séries.</p>
<p>Vu la qualité des vidéos que <q lang="fr_ca">j’écoutais</q>, ça n’est vraiment pas une mauvaise&nbsp;chose.</p>
<a href="#hr-74" title="Lien vers cette section de la page"><hr id="hr-74" /></a>
<p>Outil du jour&nbsp;: <a data-link-domain="whocanuse.com" href="https://www.whocanuse.com">who can use</a>.</p>
<p>Voir en direct la perception des personnes sous forme de boutons pour des couleurs données permet de lâcher prise et de se concentrer sur la lisibilité. Savoir que seules 68% des personnes ont la capacité à voir ce que je vois (peut-être) donne un autre sens à&nbsp;l’accessibilité.</p>
<a href="#hr-75" title="Lien vers cette section de la page"><hr id="hr-75" /></a>
<p>Découverte d’un nouveau <a data-link-domain="montreal.ca" href="https://montreal.ca/lieux/parc-nature-du-cap-saint-jacques">terrain de jeu en hiver</a>.</p>
<p>Le nombre d’hivers où il sera encore possible de skier à Montréal sont comptés. Il fait probablement partie de la dernière génération à pouvoir le faire. Aujourd’hui, une dizaine de kilomètres à skis-de-fond-de-location-qui-ne-glissent-pas&nbsp;(sic).</p>
<a href="#hr-76" title="Lien vers cette section de la page"><hr id="hr-76" /></a>

<blockquote lang="en">
<p>Most “news” is designed to trick us into giving our fucks to things that don’t deserve them or where they have no&nbsp;value.</p>
<p><cite><em><a data-link-domain="patrickrhone.net" href="https://www.patrickrhone.net/the-fucks-and-how-we-give-them-a-manifesto/" hreflang="en"
            title="Consultation de l’article (anglais)">The Fucks and How We Give Them (A Manifesto)</a>
            <a href="/david/cache/2024/d890da6c22300e52daec05e9c5888784/" hreflang="en"
                data-tippy data-description="The older I get, the fewer fucks I’m willing to give."
                data-source="https://www.patrickrhone.net/the-fucks-and-how-we-give-them-a-manifesto/"
                data-date="2024-02-18"
                data-favicon="https://www.patrickrhone.net/favicon.ico"
                data-domain="patrickrhone.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>

    
      <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/lecture/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#lecture</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <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;;
  font-size: smaller;
  color: var(--link-color-domain);
}
</code></pre>
<p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
<pre><code>a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: calc(var(--fluid-0) / 10);
  position: relative;
}
a::before {
  content: '';
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -1px;
  height: calc(var(--fluid-0) / 10);
  background: linear-gradient(
    to right, 
    var(--link-color), 
    var(--link-color-domain)
  );
}
</code></pre>
<p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
<p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
<p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
<p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
<a href="#hr-17" title="Lien vers cette section de la page"><hr id="hr-17" /></a>

<blockquote>
<p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
<p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment" hreflang="fr"
            title="Consultation de l’article">Ma page /now (ou plutôt /en-ce-moment)</a>
            <a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" hreflang="fr"
                data-tippy data-description="La page /now a été proposée par Derek Sivers pour spécifier de manière très flexible un format de page web sur laquelle on peut en apprendre plus sur …"
                data-source="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment"
                data-date="2024-01-07"
                data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22 filter=%22hue-rotate(82deg)%22>🌿</text></svg>"
                data-domain="blog.professeurjoachim.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p>

<blockquote lang="en">
<p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
<p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
<p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/" hreflang="en"
            title="Consultation de l’article (anglais)">Opening Mail</a>
            <a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" hreflang="en"
                data-tippy data-description="First make the change easy, then make the easy change."
                data-source="https://frantic.im/opening-mail/"
                data-date="2024-01-07"
                data-favicon="https://frantic.im/favicon.png"
                data-domain="frantic.im"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
<a href="#hr-18" title="Lien vers cette section de la page"><hr id="hr-18" /></a>
<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/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  

      
        <form action="/david/recherche/" method="get">
          <fieldset>
            <legend>Recherche</legend>
            <label for="input-search">Termes de votre recherche :</label>
            <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
            <input type="submit" value="Chercher">
            <p id="indexation-infos">
              <small>
                Seuls les contenus de ces 8 dernières années sont indexés.
              </small>
            </p>
          </fieldset>
        </form>
      
      <aside>
        <theme-toggle></theme-toggle>
      </aside>
    </article>
    <hr>
    <footer>
      <p>
        <a href="/david/" title="Aller à l’accueil">Accueil</a>
        •
        <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
        •
        <a href="http://larlet.com"
           title="Go to my English profile"
           data-instant>Pro</a>
        •
        <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
        •
        <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
      </p>
      <template id="theme-selector">
        <form>
          <style type="text/css">
            fieldset div {
              text-align: center;
            }
          </style>
          <fieldset>
            <legend>Thème</legend>
            <div>
              <label>
                <input type="radio" value="auto" name="chosen-color-scheme" checked>
                Auto
              </label>
              <label>
                <input type="radio" value="dark" name="chosen-color-scheme">
                Foncé
              </label>
              <label>
                <input type="radio" value="light" name="chosen-color-scheme">
                Clair
              </label>
            </div>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      class ThemeToggle extends HTMLElement {
        constructor() {
          super()
          const themeSelectorTemplate = document.querySelector('#theme-selector')
          const form = themeSelectorTemplate.content.firstElementChild
          this.attachShadow({ mode: 'open' })
          this.shadowRoot.appendChild(form.cloneNode(true))
        }

        connectedCallback() {
          const form = this.shadowRoot.querySelector('form')
          form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
          })

          const selectedTheme = localStorage.getItem('theme')
          if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
          }
        }
      }

      const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
      window.addEventListener('load', () => {
        let colorsLayer = undefined
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const layerRule of styleSheet.cssRules) {
            if (!(layerRule instanceof CSSLayerBlockRule)) {
              continue
            }
            if (layerRule.name === 'colors') {
              colorsLayer = layerRule
            }
            for (const cssRule of layerRule.cssRules) {
              if (cssRule.type !== CSSRule.MEDIA_RULE) {
                continue
              }
              // WARNING: Safari does not have/supports `conditionText`.
              if (cssRule.conditionText) {
                if (cssRule.conditionText !== prefersColorSchemeDark) {
                  continue
                }
              } else {
                if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                  continue
                }
              }
              mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }
          }

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            // Safari requires the `0` second parameter (even if default).
            colorsLayer.insertRule(mediaRule.cssText, 0)
            hasDarkRules = true
          }
        }

        if (hasDarkRules) {
          if ('customElements' in window && !customElements.get('theme-toggle')) {
            customElements.define('theme-toggle', ThemeToggle)
          }
        }
      })
    </script>
    
  </body>
</html>