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 #échanges
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #échanges">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-02-03.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#échanges</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/02/12/" title="Lien permanent vers cet article">Renards</a> <time datetime="2024-02-12">12 février 2024</time>
    </h2>
    
<p>Entre chien et loup, le renard pointe le bout de son nez pointu. Après avoir attendu patiemment attendu que mon appareil photo arrive à ses limites, le voilà avançant vers moi d’un pas&nbsp;décidé.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-1.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-1.jpg"
            width="3456" height="2304"
            srcset="/static/david/2024/2024-02-12-renards-1.jpg 3456w, /static/david/2024/2024-02-12-renards-1_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-1_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-1_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3456 / 2304))"
            loading="lazy"
            decoding="async"
            alt="Un renard trottinant sur la rivière gelée.">
    </a>
    <figcaption>Un renard trottinant sur la rivière&nbsp;gelée.</figcaption>
</figure>
<p>Même en poussant les réglages au maximum lors du développement, je me rends bien compte que je suis dans la nuit bientôt noire. Alors je tente d’utiliser l’éclairage de la ville, la pollution lumineuse se reflétant sur la neige m’offre de précieux <em>stops</em>&nbsp;photographiques.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-2.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-2.jpg"
            width="2560" height="3840"
            srcset="/static/david/2024/2024-02-12-renards-2.jpg 2560w, /static/david/2024/2024-02-12-renards-2_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-2_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-2_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2560 / 3840))"
            loading="lazy"
            decoding="async"
            alt="Un renard sur la rivière gelée avec un pont en fond.">
    </a>
    <figcaption>Un renard sur la rivière gelée avec un pont en&nbsp;fond.</figcaption>
</figure>
<p>L’équivalent 800mm que je tiens à bout de bras n’aide pas à faire baisser les ISO, tant pis, je compte trop sur ma mobilité pour être capable de tenter une approche. La neige est bien trop gelée et bruyante pour que j’ai la moindre chance. Un skieur nocturne détourne leur&nbsp;attention.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-3.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-3.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-3.jpg 3840w, /static/david/2024/2024-02-12-renards-3_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-3_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-3_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Deux renards&nbsp;: l’un sur la rivière, l’autre sur un ponton abandonné.">
    </a>
    <figcaption>Deux renards : l’un sur la rivière, l’autre sur un ponton&nbsp;abandonné.</figcaption>
</figure>
<p>La luminosité est telle que je vois la lumière de mon autofocus qui se reflète, bien rouge, au fond de ses yeux à une cinquantaine de mètres. Iel m’attend. Je ne saurais jamais jusqu’à quelle distance est-ce que l’on se seraient acceptés car une coureuse met fin à ce tête-à-tête nocturne. Si nous sommes tous le deux routiniers, nous aurons certainement d’autres occasions de nous&nbsp;croiser.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-4.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-4.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-4.jpg 3840w, /static/david/2024/2024-02-12-renards-4_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-4_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-4_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Un renard qui me regarde depuis le chemin.">
    </a>
    <figcaption>Un renard qui me regarde depuis le&nbsp;chemin.</figcaption>
</figure>
<p>Photographiquement parlant, je crois que je préfère la prise floue de la veille. Une forme d’acceptation qu’il puisse encore y avoir des animaux libres d’une capture trop&nbsp;nette.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-5.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-5.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-5.jpg 3840w, /static/david/2024/2024-02-12-renards-5_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-5_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-5_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Un renard flou qui se reflète dans l’eau de la rivière qui fond.">
    </a>
    <figcaption>Vais-je passer à travers ? Je ne suis pas le seul à me poser ces&nbsp;questions…</figcaption>
</figure>
<p>Merci au parent devant l’école qui m’a dit qu’il n’y avait pas de renards dans le parc cette année. Mon esprit de con·tradiction a fait le&nbsp;reste.</p>
<a href="#hr-71" title="Lien vers cette section de la page"><hr id="hr-71" /></a>

<blockquote>
<p>Les carnets Web servent également à faire rêver les autres de façon inattendue et la plupart du temps silencieusement. N’hésitez pas à publier. Vous toucherez le cœur et l’imagination d’une personne quelque part dans le&nbsp;monde.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/02/04/enfant" hreflang="fr"
            title="Consultation de l’article">D’un enfant à l’autre</a>
            <a href="/david/cache/2024/40a1a0f90d7ac25a6150e6e27ac310d4/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/02/04/enfant"
                data-date="2024-02-12"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>🧡</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/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</a>
          
            <a href="/david/2024/photographie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#photographie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/29/" title="Lien permanent vers cet article">Déploiement</a> <time datetime="2024-01-29">29 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Ce qui me fait penser que cela fait plusieurs fois que je veux demander comment David déploie son&nbsp;site.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/24/herbe" hreflang="fr"
            title="Consultation de l’article">herbe</a>
            <a href="/david/cache/2024/956819385548bba6e768563b12edc2d6/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/24/herbe"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Mes <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/explore/repos">dépôts</a> contiennent le HTML généré car c’est ce que je considère comme étant la version pérenne de mes écrits donc je ne souhaite pas avoir une génération sur le serveur. Cela fait grossir le dépôt mais ça offre une tranquillité d’esprit de pouvoir observer les différences lorsque je modifie le&nbsp;moteur.</p>
<p>Il se trouve que ces dépôts sont sur le même serveur que celui qui sert les pages HTML que vous voyez. Je lance donc une commande distante avec <a data-link-domain="minicli.readthedocs.io" href="https://minicli.readthedocs.io/">minicli</a> qui va faire une archive du dépôt git au bon endroit sur le&nbsp;serveur&nbsp;:</p>
<pre><code>git archive --remote=larlet-fr-index.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david.git master | tar -x -C larlet-fr
git archive --remote=larlet-fr-david-cache.git master | tar -x -C larlet-fr/david
[…]
</code></pre>
<p>J’itère ainsi sur chacun des dépôts concernés et l’avantage c’est que je peux donner un sous-dossier à la commande <code>tar</code> selon où je veux placer le contenu dans l’arborescence. Par exemple, ci-dessus, les articles archivés <code>larlet-fr-david-cache.git</code> arrivent directement dans mon dossier personnel <code>larlet-fr/david</code>. Il faut tout de même vérifier de ne pas écraser ses propres&nbsp;dossiers/fichiers.</p>
<p>Le déploiement met à ce jour une trentaine de secondes. Ce n’est pas optimisé mais je n’ai pas besoin de&nbsp;l’optimiser.</p>
<a href="#hr-53" title="Lien vers cette section de la page"><hr id="hr-53" /></a>

<blockquote lang="en">
<p>I therefore officially announce 2024&nbsp;to be the year when the square checkbox has finally&nbsp;died.</p>
<p><cite><em><a data-link-domain="tonsky.me" href="https://tonsky.me/blog/checkbox/" hreflang="en"
            title="Consultation de l’article (anglais)">In Loving Memory of Square Checkbox</a>
            <a href="/david/cache/2024/ff566a58892db07815a327802fea66d3/" hreflang="en"
                data-tippy data-description="History of checkboxes and radio buttons in user interfaces"
                data-source="https://tonsky.me/blog/checkbox/"
                data-date="2024-01-28"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.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>À quand une petite coche sur les <a data-link-domain="alvaromontoro.com" href="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari" hreflang="en"
            title="Consultation de l’article (anglais)">futurs toggle/switch natifs</a>
            <a href="/david/cache/2024/b351cda8d2ccd73362ca1729845b7e79/" hreflang="en"
                data-tippy data-description="Toggle switches are a common request by Designers and Developers. Safari proposed a native way to create switches in HTML without the hassle of dealing with CSS or unnecessary control states."
                data-source="https://alvaromontoro.com/blog/68049/new-toggle-switch-lands-in-safari"
                data-date="2024-01-28"
                data-favicon="https://alvaromontoro.com/fav.ico"
                data-domain="alvaromontoro.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>&#8239;? Ou <a data-link-domain="grumpy.website" href="https://grumpy.website/1457">pire</a>&#8239;? 🙈</p>
<p>R.I.P. <a data-link-domain="nubero.ch" href="https://www.nubero.ch/blog/009/" hreflang="de"
            title="Consultation de l’article">les boutons</a>
            <a href="/david/cache/2024/a3ccfb51f65cd59f375d5424d243e012/" hreflang="de"
                data-tippy data-description="Nuberodesign: Agentur fÃ¼r Grafikdesign, Animation, Videoproduktion und Usability in Winterthur"
                data-source="https://www.nubero.ch/blog/009/"
                data-date="2024-01-28"
                data-favicon="https://www.nubero.ch/favicon.svg"
                data-domain="nubero.ch"
                ><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>&nbsp;aussi…</p>
<a href="#hr-54" title="Lien vers cette section de la page"><hr id="hr-54" /></a>

<blockquote>
<p>Les poètes et écrivains évitaient tous la colère des rois et des puissants par l’utilisation de métaphores. Mais c’est justement par cette analogie que cela devient&nbsp;intéressant.</p>
<p><mark>Les empires informatiques d’aujourd’hui comme exemples de l’absolutisme du pouvoir des siècles précédents posent la question plus qu’intéressantes sur la liberté d’expression.</mark> Quand tout l’espace de notre expression transite par un domaine privé et commercial, nous ne sommes plus dans l’espace public de notre expression mais bien dans cet espace contrôlé. Que devient le sens de notre communication si dès que nous sommes sur ces espaces, l’expression devient plus limitée que celle que l’espace public&nbsp;permet.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/26/fraichement" hreflang="fr"
            title="Consultation de l’article">fraîchement</a>
            <a href="/david/cache/2024/b692faaa55fd2775e957b20e833e9e5e/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/26/fraichement"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Il est interdit de parler anglais dans les écoles québécoises. Il n’en fallait pas beaucoup plus pour que les élèves aient envie de l’apprendre et d’échanger entre eux dans cette langue. <em>Oppression + contre-pouvoir = culture&nbsp;commune.</em></p>
<p>Aussi, l’enseignement de l’anglais est relativement médiocre pour une province qui insiste sur le bilinguisme. Difficile d’en mesurer&nbsp;l’intention.</p>
<a href="#hr-55" title="Lien vers cette section de la page"><hr id="hr-55" /></a>

<blockquote>
<p>[…] Je ne sais pas ce qui est le plus important, préserver un nom de domaine n’est qu’une partie. Préserver le contenu derrière le nom de domaine est plus difficile. Il faut penser serveurs, mise à jour de sécurité, les technologies utilisées, etc.</p>
<p>Le No JS pour les sites Web est rarement mentionné pour la longévité du contenu. Et pourtant c’est une pièce&nbsp;fondamentale.</p>
<p>Peut-être il serait plus important de <mark>penser à ce que les autres voudront préserver plutôt que de penser à ce que nous voulons transmettre.</mark> De même que voulons nous préserver des générations antérieures pour nous aider à mieux penser notre propre&nbsp;disparition.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/23/legacy" hreflang="fr"
            title="Consultation de l’article">ce que nous laissons</a>
            <a href="/david/cache/2024/1fe484434058e9c44d21bfebb0ddba31/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/23/legacy"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>Peut-être que si chaque personne avait sa <a href="/david/cache/2024/">propre archive</a> des publications des autres, on aurait accès à un réseau de citations distribuées qui contribueraient à cette préservation. Et qui auraient été considérées comme étant «&nbsp;pertinentes&nbsp;» par les lecteur·ices&#8239;? Les guillemets sont importants car citation ne veut pas forcément dire caution ou intérêt le plus grand. Par exemple, l’<a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/22/carnet" hreflang="fr"
            title="Consultation de l’article">anecdote</a>
            <a href="/david/cache/2024/790f724c45b26de460f9eeac04d48884/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/22/carnet"
                data-date="2024-01-28"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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> <q lang="fr">Je me pose de sérieuses questions sur l’image que nous renvoyons à notre enfant.</q> me fait beaucoup réfléchir et me donne envie de la conserver sans forcément la citer. Comment combiner réactions publiques et souvenirs plus&nbsp;intimes&#8239;?</p>
<p>Maintenant je vais vouloir citer encore plus d’articles de&nbsp;Karl&nbsp;(-:.</p>
<p><em>PS&nbsp;: Un réseau de <a data-link-domain="flus.fr" href="https://flus.fr/">flus</a> ou <a data-link-domain="readeck.org" href="https://readeck.org">readeck</a> serait aussi une option s’ils pouvaient devenir un des nœuds d’une archive distribuée et&nbsp;collective.</em></p>

    
      <nav>
        <p>
          
            <a href="/david/2024/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</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/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/22/" title="Lien permanent vers cet article">Légitimité</a> <time datetime="2024-01-22">22 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Car comment écrire le monde, en particulier celui qui souffre, suffoque et se bat, depuis une situation privilégiée&#8239;? Comment, dans un monde baigné de superflu, mener une analyse fine et lucide sur la nécessité&#8239;? Peut-on en appeler à la beauté dans un monde de violence&#8239;? Et comment combattre le sentiment d’imposture&#8239;? Comment concilier lucidité et poésie, politique et esthétique, sentiment de classe et pulsions d’universalité, comment enfin écrire sur ce qu’on ne fait parfois qu’effleurer, sans l’avoir parfaitement, longuement et profondément&nbsp;éprouvé&#8239;?</p>
<p>En étant honnête, sans doute. […] <mark>Mais l’écriture, une fois entravée d’un tel filet de précautions et de prudences, ne perd-elle pas en&nbsp;sincérité&#8239;?</mark></p>
<p>Le désir de beauté, les envies de mots débridés, le souci même de l’éthique viennent souvent se fracasser sur la réalité sociale, le prosaïque du quotidien et <em>in fine</em> la crainte de l’indécence. C’est un souci salutaire sans aucun doute, mais aussi un brise-l’élan qui, depuis des années, me détourne de&nbsp;l’essai.</p>
<p>La critique est tellement facile et le dénigrement si prisé dans les milieux militants que je ne dois pas être la seule, parfois, à me sentir dissuadée d’écrire sur certains sujets. Pourtant, faut-il s’empêcher d’explorer de nouveaux espaces, d’écrire ses impressions, de poser des intuitions et des sensations, de formuler des hypothèses? Faut-il s’interdire certains&nbsp;thèmes&#8239;?</p>
<p>Doit-on être spécialiste d’un sujet pour en parler&#8239;? Rien ne peut fonctionner si seuls les universitaires peuvent écrire des essais, si les romancières sont cantonnées à raconter des histoires, si seuls les insurgés sont légitimes à parler de révolution, les pauvres de misère, les racisés de discrimination, si les déserteurs sont trop diplômés et si les écrivains ne peuvent disserter que sur la&nbsp;création.</p>
<p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
</blockquote>
<p>La légitimité de la personne qui écrit est importante —&nbsp;notamment en terme de crédibilité&nbsp;— et j’apprécie qu’IA Writer <a data-link-domain="ia.net" href="https://ia.net/topics/writing-with-ai" hreflang="en"
            title="Consultation de l’article (anglais)">expérimente des choses</a>
            <a href="/david/cache/2024/291cddda62f18ec9355ec98761b7e9d9/" hreflang="en"
                data-tippy data-description="When ChatGPT came out one year ago, we wanted to know whether and how it could be used for writing. We put it to the test."
                data-source="https://ia.net/topics/writing-with-ai"
                data-date="2024-01-21"
                data-favicon="https://ia.net/wp-content/themes/iA-library/assets/favicons/favicon.ico"
                data-domain="ia.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> dans le domaine et peut-être que leur <a data-link-domain="github.com" href="https://github.com/iainc/Markdown-Annotations">spécification pour annotations</a> pourrait être détournée pour mentionner où l’auteur·ice <em>se situe</em> explicitement dans (la partie de) l’article. J’écris ce paragraphe avec ma casquette de développeur, ou en ayant expérimenté l’expatriation, ou en étant membre d’une coopérative, ou en ayant l’habitude d’écrire des trucs sur le net. On pourrait annoter les intentions aussi&nbsp;: j’écris cela en voulant être informatif, ou troll, ou militant, etc.</p>
<p>C’est l’une des choses que rend possible le numérique. Légitimité sans argument d’autorité, tout un programme. Et si je tentais des choses ces prochains&nbsp;jours&#8239;?</p>

<blockquote lang="en">
<p>optionally followed by author annotation session, with a format <mark>to be announced</mark> in a future version of the spec, separated from the author name either by the author identifier or a&nbsp;comma</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/iainc/Markdown-Annotations#author-annotations">Author&nbsp;Annotations</a></em></cite></p>
</blockquote>
<a href="#hr-43" title="Lien vers cette section de la page"><hr id="hr-43" /></a>

<blockquote lang="en">
<p>Sometimes I’d have a realization that I was doing something for the first time since I had left home, 16&nbsp;months earlier. First time pumping gas. First time ringing a doorbell. First time going to a grocery store. First time swimming. Each of these instances brought with it a small feeling of novelty, but it didn’t amount to much. It took conscious effort to remember that I was pumping gas for the first time in 16&nbsp;months. It felt&nbsp;normal.</p>
<p>I was back in my real life, and although I put it on hold for Antarctica, it was waiting for me when I got back. <mark>Antarctica was a a different world, a radical departure from my normal reality.</mark> It was so different, in fact, that I simply could not merge the two realities into one. I had my real life, and I had my Antarctica life. When my Antarctica life finished, I resumed my real&nbsp;life.</p>
<p><cite><em><a data-link-domain="brr.fyi" href="https://brr.fyi/posts/redeployment-part-three" hreflang="en"
            title="Consultation de l’article (anglais)">Redeployment Part Three</a>
            <a href="/david/cache/2024/e8748af541273328d9aa9f1aeb1087b2/" hreflang="en"
                data-tippy data-description="Departing Antarctica after 446 days on-ice. Relaxing in Christchurch, then heading home. What an adventure!"
                data-source="https://brr.fyi/posts/redeployment-part-three"
                data-date="2024-01-21"
                data-favicon="https://brr.fyi/favicon-32x32.png"
                data-domain="brr.fyi"
                ><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>Troisième partie (<a data-link-domain="brr.fyi" href="https://brr.fyi/posts/redeployment-part-one" hreflang="en"
            title="Consultation de l’article (anglais)">1</a>
            <a href="/david/cache/2024/da7e5578fd96fe31d46bfb207d041880/" hreflang="en"
                data-tippy data-description="Sunrise at the bottom of the world. Preparing South Pole Station to welcome its first new arrivals in almost nine months."
                data-source="https://brr.fyi/posts/redeployment-part-one"
                data-date="2024-01-21"
                data-favicon="https://brr.fyi/favicon-32x32.png"
                data-domain="brr.fyi"
                ><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>, <a data-link-domain="brr.fyi" href="https://brr.fyi/posts/redeployment-part-two" hreflang="en"
            title="Consultation de l’article (anglais)">2</a>
            <a href="/david/cache/2024/284205d0f99390dd18d3af12ff53227c/" hreflang="en"
                data-tippy data-description="First flight to the South Pole after a long, isolated winter. Winterover staff handing over their work and preparing to depart."
                data-source="https://brr.fyi/posts/redeployment-part-two"
                data-date="2024-01-21"
                data-favicon="https://brr.fyi/favicon-32x32.png"
                data-domain="brr.fyi"
                ><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>) d’un retour sur la terre non gelée. Merci pour ce voyage par procuration cette dernière année, les détails et les anecdotes étaient&nbsp;parfaits.</p>
<p><em>Je remarque au passage qu’iels chaussent les mêmes bottes Baffin que moi par grand&nbsp;froid.</em></p>
<a href="#hr-44" title="Lien vers cette section de la page"><hr id="hr-44" /></a>

<blockquote>
<p>Il est largement prouvé qu’il n’y a qu’un moyen de faire entrer plus de femmes dans la tech. C’est par le biais de la <strong>représentativité</strong>. <mark>Les jeunes femmes ne peuvent pas se projeter dans des rôles qu’elles ne connaissent pas.</mark> J’espère qu’à un moment où un autre, vous aurez vous aussi envie d’occuper l’espace et de vous rendre visible, pour montrer que les femmes dans la tech existent et que c’est une voie royale. Vous pouvez aussi être <strong>marraine</strong> et intervenir dans des écoles avec <a data-link-domain="ellesbougent.com" href="https://www.ellesbougent.com/">Elles bougent</a> ou <a data-link-domain="intrepidesdelatech.org" href="https://www.intrepidesdelatech.org/">Les intrépides de la tech</a>.</p>
<p><cite><em><a data-link-domain="duchess-france.fr" href="https://www.duchess-france.fr/dossier/women%20in%20tech/alli%C3%A9s/2023/01/15/manuel-survie-femme-tech.html" hreflang="en"
            title="Consultation de l’article (anglais)">Manuel de survie de la femme dans la tech</a>
            <a href="/david/cache/2024/c4751e7c80b292e3533ee6b3e057b702/" hreflang="en"
                data-tippy data-description="Je vois de plus en plus de femmes rejoindre l’informatique, et c’est une très bonne chose. Je vois aussi trop de femmes patir de sexisme ordinaire, se remettre en question encore et encore… et quitter le milieu au bout de quelques années. J’ai mis du temps à apprendre certaines choses."
                data-source="https://www.duchess-france.fr/dossier/women%20in%20tech/alli%C3%A9s/2023/01/15/manuel-survie-femme-tech.html"
                data-date="2024-01-21"
                data-favicon="https://www.duchess-france.fr/favicon.ico"
                data-domain="duchess-france.fr"
                ><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>Superbe manuel de Florence Chabanois avec plein de conseils et de liens pour creuser. J’appuie le fait qu’il est important d’être bien entourée pour rentrer dans ce domaine, pas seulement pour l’apprentissage de la technique mais pour déconstruire des situations sans se sentir démunie face à une culture toxique. N’hésitez pas à rejoindre l’un des collectifs&nbsp;listés.</p>
<p>Je peux faire le <em>parrain-à-6000km</em>, mon adresse de courriel est en pied de&nbsp;page.</p>
<p><mark>@nnotation(intention)</mark>&nbsp;: Je précise la distance depuis la France car ça réduit les possibilités d’agressions physiques… et malheureusement c’est non&nbsp;négligeable.&nbsp;😢</p>

<blockquote>
<p>La technique de l’amplification, popularisée à la Maison Blanche à l’époque d’Obama, consiste à répéter l’idée en lui reconnaissant la maternité, ce qui permet d’augmenter son audibilité. Sachez aussi que nous n’apprenons pas à nous exprimer de la même façon selon notre genre. Quand les femmes prennent la parole, elles l’encombrent plus souvent de termes parasites minimisant comme <em>“peut-être”</em>, <em>“je pense que”</em>, <em>“c’est juste mon avis”</em>. <mark>Les femmes enrobent plus leurs propos, ce qui peut limiter sa portée et/ou nuire à sa clarté, et surtout minimiser des propos pas moins importants.</mark> Elles s’excusent aussi plus souvent de déranger (à tort). À l’écrit, ce sont les points d’exclamation et les smileys qui sont sur représentés, pour adoucir le ton et paraître sympathique. Dans tous les cas, ces parasites réduisent l’impact des messages exprimés. En gros, il vaut mieux faire court pour limiter la charge cognitive et répéter plusieurs fois le&nbsp;message…</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>… ou que les personnes à l’écoute apprennent à communiquer de cette façon&#8239;? À donner le temps nécessaire à la prise de soin plutôt que de formater d’autres personnes à ce qui peut être interprété comme de l’«&nbsp;efficacité&nbsp;» analytique (telle que définie par des hommes)&#8239;? L’adaptation peut et doit se faire dans les deux&nbsp;sens.</p>
<p><mark>@nnotation(légitimité)</mark>&nbsp;: Je propose cela alors qu’il y a 6&nbsp;femmes sur les 8&nbsp;membres de Scopyleft, à la création nous étions 4&nbsp;hommes. Le changement dans nos interactions a été&nbsp;radical.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</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/gratitude/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#gratitude</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/19/" title="Lien permanent vers cet article">Marcher</a> <time datetime="2024-01-19">19 janvier 2024</time>
    </h2>
    

<blockquote lang="en">
<p>A walk-and-talk is a moveable salon. A small group of people walk together for a week, having casual conversations side-by-side during most of the day. In the evening the group sits down to an intense hours-long discussion centered on a daily chosen topic by those present. A moderator keeps the conversation on that day’s single topic to sharpen it and make it&nbsp;memorable.</p>
<p><mark>To focus on conversations while walking,</mark> participants carry only day-packs, and eat locally prepared meals. The walks are not strenuous and to keep it even more inspiring, they take place in storied environments that are walker-friendly, such as footpaths in England, Japan, and Spain. By the end of the week, every person present has walked about 100&#8239;km and has had deep conversations with all the&nbsp;others.</p>
<p><cite><em><a data-link-domain="craigmod.com" href="https://craigmod.com/ridgeline/176/" hreflang="en"
            title="Consultation de l’article (anglais)">The Walk and Talk: Everything We Know</a>
            <a href="/david/cache/2024/877ad04fd329c26c80113e15dec540df/" hreflang="en"
                data-tippy data-description="Kevin Kelly and my notes detailing everything we've learned walking and talking these past six years"
                data-source="https://craigmod.com/ridgeline/176/"
                data-date="2024-01-18"
                data-favicon="https://craigmod.com/images/favicons/favicon-196x196.png"
                data-domain="craigmod.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>C’est peu de dire que ce format m’intéresse et je l’ai envisagé à plusieurs reprises en France, notamment autour du Mont-Blanc. J’ai l’impression que la Traversée de Charlevoix serait un chemin assez idéal compte tenu des <a data-link-domain="traverseedecharlevoix.qc.ca" href="https://www.traverseedecharlevoix.qc.ca/services-offerts/">services proposés</a> s’il s’agit de s’en tenir au format décrit (transport des&nbsp;bagages).</p>
<p>Le faire une première fois de manière rapide en solo cette année m’aiderait certainement —&nbsp;en plus d’en faire la reconnaissance&nbsp;— à l’envisager sur un rythme beaucoup plus doux en étant accompagné par la&nbsp;suite.</p>
<a href="#hr-38" title="Lien vers cette section de la page"><hr id="hr-38" /></a>

<blockquote lang="en">
<p>Going forward I plan to version the projects I work on in a way that communicates <em>how much effort I expect a user will need to spend to adopt the new version.</em> I’m going to refer to that scheme as <strong>Intended Effort Versioning (EffVer for short)</strong>.</p>
<p><cite><em><a data-link-domain="jacobtomlinson.dev" href="https://jacobtomlinson.dev/effver/" hreflang="en"
            title="Consultation de l’article (anglais)">EffVer: Version your code by the effort required to upgrade</a>
            <a href="/david/cache/2024/fd6eda56671045e0c1e2d215e07f1a6f/" hreflang="en"
                data-tippy data-description="Version numbers are hard to get right. Semantic Versioning (SemVer) communicates backward compatibility via version numbers which often lead to a false sense of security and broken promises."
                data-source="https://jacobtomlinson.dev/effver/"
                data-date="2024-01-18"
                data-favicon=""
                data-domain="jacobtomlinson.dev"
                ><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>Il faudrait que je rende explicite ma façon de décompter les crédits (facturés) dans <a href="/david/2022/12/15/">mes journaux</a> car la notion d’effort / pénibilité y est présente, ce n’est pas qu’une question de temps. Ça m’aide notamment à vérifier qu’une journée n’est pas trop intense et n’a pas consommé toutes mes <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Th%C3%A9orie_des_cuill%C3%A8res">cuillères</a>, sociales surtout, ce qui peut avoir des conséquences sur les jours&nbsp;suivants…</p>
<a href="#hr-39" title="Lien vers cette section de la page"><hr id="hr-39" /></a>

<blockquote>
<p>il</p>
<p>suffit<br />
parfois d’<br />
être&nbsp;là</p>
<p>pour que<br />
quelqu’un nous&nbsp;voit</p>
<p><cite><em><a data-link-domain="clairesohem.com" href="https://clairesohem.com/blog/2024/01/10-12-2023-2/">10&#8239;12&#8239;2023</a></em></cite></p>
</blockquote>

    
      <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/communaute/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#communauté</a>
          
            <a href="/david/2024/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</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>