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>
    Blogroll
  — David Larlet</title>
  <meta name="description" content="Les sites des ami·es.">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <article>
    <header>
      <h1>Blogroll : les sites des ami·es</h1>
    </header>
    <p>Pour ne pas être totalement auto-centré, voici quelques portes ouvertes vers le Web que j’aime.</p>
    <nav>
      <ul>
        <li>
            <a href="https://www.maiwann.net/">Maïtané Lenoir</a>
            (<a href="https://www.maiwann.net/feed.xml">flux</a>)
          </li>
        <li>
            <a href="https://ynote.hk/">Fanny Cheung</a>
            (<a href="https://ynote.hk/feed.xml">flux</a>)
          </li>
        <li>
            <a href="https://lalunemauve.fr/">La Lune Mauve</a>
            (<a href="https://lalunemauve.fr/feed/">flux</a>)
          </li>
        <li>
            <a href="https://www.hypothermia.fr/">Eliness</a>
            (<a href="https://www.hypothermia.fr/rss">flux</a>)
          </li>
        <li>
            <a href="https://luce.carevic.eu/fr">Luce Carević</a>
            (<a href="https://luce.carevic.eu/fr/flux">flux</a>)
          </li>
        <li>
            <a href="https://emmaclit.com/">Emma</a>
            (<a href="https://emmaclit.com/feed/">flux</a>)
          </li>
        <li>
            <a href="https://www.la-grange.net/">Karl Dubost</a>
            (<a href="https://www.la-grange.net/feed.atom">flux</a>)
          </li>
        <li>
            <a href="https://thom4.net/">Thomas Parisot</a>
            (<a href="https://thom4.net/feed/">flux</a>)
          </li>
        <li>
            <a href="https://www.arthurperret.fr/">Arthur Perret</a>
            (<a href="https://www.arthurperret.fr/feed.xml">flux</a>)
          </li>
        <li>
            <a href="https://www.quaternum.net/">Antoine Fauchié</a>
            (<a href="https://www.quaternum.net/atom.xml">flux</a>)
          </li>
        <li>
            <a href="https://n.survol.fr/">Éric D.</a>
            (<a href="https://n.survol.fr/feed">flux</a>)
          </li>
        <li>
            <a href="https://blog.ecologie-politique.eu/">Aude</a>
            (<a href="https://blog.ecologie-politique.eu/feed/atom">flux</a>)
          </li>
        <li>
            <a href="https://winnielim.org/">Winnie Lim (en)</a>
            (<a href="https://winnielim.org/feed/">flux</a>)
          </li>
        <li>
            <a href="https://brr.fyi/">brr (en)</a>
            (<a href="https://brr.fyi/feed.xml">flux</a>)
          </li>
        
      </ul>
    </nav>
    <p>N’hésitez pas à me contacter si vous ne souhaitez pas figurer dans cette liste.</p>
    <h2>Leurs dernières publications</h2>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/02/magyar-szerelem/">Magyar szerelem</a>,
          12-02-2024
        </dt>
        <dd>
          Concentré hyperdense de découvertes heureuses dans la capitale hongroise.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/journal/documenting-my-mom-making-kueh-lapis/">documenting my mom making kueh lapis</a>,
          10-02-2024
        </dt>
        <dd>
          I cannot remember how long has it been that my mother has been making kueh lapis for the lunar new year every year. Kueh means cake, and lapis means layers, so kueh...
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/02/09/inari">inari</a>,
          09-02-2024
        </dt>
        <dd>
          Sugamo, Japon, 9 février 2024 Je l'ai recollée, mais la réparation est un peu visible. Les rafistolages ne font-ils pas partie de la vie d'un objet ? — Parfum de pagode, Anna Moï, urn:isbn:978-2-7526-0363-0 Une divinité renard (inari)) est dans une cage. Je vois souvent ce type de cages. Est-ce pour « empêcher » la divinité de partir du temple ? Ou est-ce pour empêcher les gens de toucher la…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/02/08/herbe">La fraîcheur de l'herbe</a>,
          08-02-2024
        </dt>
        <dd>
          Komagome, Japon, 8 février 2024 En effet, sans même qu'il soit question de tombe, l'herbe, refuge contre la mort, suffit à garder le souvenir de l'être disparu. Maurice de Guérin a intensément exprimé cela, à propos de la mort de son amie Marie, à laquelle il demeurait tant attaché : « Ne retrouverais-je pas le parfum de votre souvenir caché dans les herbes et les vibrations de votre douce voix…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-02-07-llm-recherche-info-scientifique-valeur-ajoutee-incertaine.html">[Veille] LLM et recherche d’information scientifique : une valeur ajoutée encore incertaine</a>,
          07-02-2024
        </dt>
        <dd>
          http://musingsaboutlibrarianship.blogspot.com/2024/01/things-i-am-still-wondering-about.html Aaron Tay évoque l’usage de grands modèles de langue (la fameuse « intelligence artificielle générative ») pour augmenter les moteurs de recherche scientifique : c’est la Retrieval Augmented Generation (RAG), ou recherche sémantique (semantic search). Pour l’instant, sur le plan technique le processus…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-02-07-signes-marquage-le-cas-des-revisions.html">[Veille] Signes et marquage en édition : le cas des révisions</a>,
          07-02-2024
        </dt>
        <dd>
          http://blog.sens-public.org/marcellovitalirosati/revision.html Dans ce billet, Marcello Vitali-Rosati explique comment fonctionnaient les révisions (corrections, rectificatifs…) à l’époque pré-numérique, et surtout comment les logiciels de bureautique ont nivelé par le bas les savoir-faire liés à cette phase essentielle du travail éditorial. En le lisant, j’ai tout de suite pensé à deux de mes…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/journal/the-uncomfortable-phase-of-learning/">the uncomfortable phase of learning</a>,
          04-02-2024
        </dt>
        <dd>
          I have begun strength training for the first time in october last year. I had three personal training sessions before I traveled to japan, and when I got back there was a...
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Cheres-collaboratrices">Chères collaboratrices</a>,
          02-02-2024
        </dt>
        <dd>
          Sandrine Holin, Chères collaboratrices. Comment échapper au féminisme néolibéral, La Découverte, 2023, 240 pages, 19,50 € Voici un livre dont on a envie de partager la lecture avec beaucoup d’amies et de camarades, en raison de son sujet qui en France reste assez rarement abordé. S’il est facile de mépriser certains féminismes, il est plus difficile en revanche de poser le doigt sur ce qui pose…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/">Trois réponses sur ma thèse</a>,
          02-02-2024
        </dt>
        <dd>
          David a assisté à la soutenance de ma thèse de doctorat, il m’a posé trois questions via un billet de blog, à défaut d’avoir pu le faire pendant la soutenance. Voici trois réponses. (Et toute question est bienvenue !) Comment transformer ces fabriques de logiciels open-source en communs numériques ? La question exacte est la suivante : “Comment transformer ces fabriques de logiciels open-source…
          — <a href="https://www.quaternum.net/">Antoine Fauchié</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/01/il-ny-a-pas-de-hasards-que-des-rendez-vous/">Il n’y a pas de hasards, que des rendez-vous.</a>,
          29-01-2024
        </dt>
        <dd>
          Chercher le clan dans des huttes de sauna ou sur des tapis de yoga.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/France-Bullshit">France Bullshit</a>,
          25-01-2024
        </dt>
        <dd>
          Il y a quelques jours j’ai repéré une pub assez laide pour un entreprise avec un nom à la con. Un peu comme Assur2000 ou Charenton Clés. Passant et repassant devant pour aller prendre le métro (quand il est accessible), il m’a fallu un temps pour comprendre que France Services était une énième déclinaison de France Bullshit, cette refonte des services de l’État sous une marque à la syntaxe…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture fronçaise</a>,
          19-01-2024
        </dt>
        <dd>
          Appel à manifester contre la loi dimanche 21 Janvier dans toute la France https://www.humanite.fr/politique/loi-immigration-darmanin/201-personnalites-appellent-a-marcher-contre-la-loi-immigration
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://brr.fyi/posts/redeployment-part-three">Redeployment Part Three</a>,
          18-01-2024
        </dt>
        <dd>
          Off-continent after 446 days!
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.quaternum.net/2024/01/17/avis-de-soutenance-de-these/">Avis de soutenance de thèse</a>,
          17-01-2024
        </dt>
        <dd>
          Lundi 22 janvier 2024 à 9h (UTC-5) je soutiens publiquement ma thèse de doctorat en littérature (option Humanités numériques) à Montréal et à distance, thèse déjà disponible en ligne dans une version préliminaire (https://these.quaternum.net). La thèse, intitulée “Fabriquer des éditions, éditer des fabriques : reconfiguration des processus techniques éditoriaux et nouveaux modèles…
          — <a href="https://www.quaternum.net/">Antoine Fauchié</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://brr.fyi/posts/redeployment-part-two">Redeployment Part Two</a>,
          13-01-2024
        </dt>
        <dd>
          Station opening, and my flight out of Pole!
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://emmaclit.com/2024/01/06/darmaprout/">Darmaprout</a>,
          06-01-2024
        </dt>
        <dd>
          Bédé libre de droits pour toute utilisation militante. J’ai choisi de faire un format court pour faciliter la lecture, ne m’en voulez pas si le propos est incomplet ! Bonne lecture !
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/code-en-francais">Code en français</a>,
          28-12-2023
        </dt>
        <dd>
          « C’est ridi­cule ce getTauxRemboursementSecu(). Le code on le fait en anglais. (refor­mu­la­tion libre de débats trou­vés sur Twit­ter) Je ai eu ce débat quasi­ment dans chaque équipe que j’ai traversé. Les réponses n’ont pas toujours été les mêmes et — sans vous dire quoi faire dans votre situa­tion spéci­fique, bien que mon avis géné­rique soit […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/cherche-un-vae-de-rando">Cherche un VAE de rando</a>,
          27-12-2023
        </dt>
        <dd>
          Je cherche un vélo à assis­tance élec­trique pour partir en rando avec une personne lourde peu spor­tive et ses sacoches, idéa­le­ment jusqu’à 60 km au moins pour des étapes vallon­nées avec des montées ponc­tuelles de 10%, en été sur des chemins cyclables terre et bitume. Évidem­ment, l’in­ves­tis­se­ment servira aussi pour le quoti­dien en ville et […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2023/12/27/vigipirate/">☕️ Journal : Vigipirate</a>,
          27-12-2023
        </dt>
        <dd>
          Dans le train, j’écoute une annonce, le genre de celle qu’on connait tellement qu’à l’instar d’un bloqueur de pub, on l’efface aussitôt.<
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/sommeil/paralysie.html">Paralysie</a>,
          24-12-2023
        </dt>
        <dd>
          Les dernières semaines sont éprouvantes. Mon corps tient à un fil tandis que les nuits pleines de cauchemars se succèdent.
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://lalunemauve.fr/interview-mathyld-under-the-pyramids/">Interview de Mathyld (under the pyramids), artisane-créatrice de bijoux en argent</a>,
          21-12-2023
        </dt>
        <dd>
          En ce solstice d’hiver, j’ai la joie de publier l’interview de Mathyld, artisane autodidacte française qui crée des bijoux en argent aussi mystérieux que délicats derrière la marque « under the pyramids ». Découvrez le parcours de Mathyld, ses sources d’inspiration, sa démarche, mais aussi le collier lunemauvien que nous avons co-créé ensemble. (Hé ouais, c’est la classe.)
          — <a href="https://lalunemauve.fr/">La Lune Mauve</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://luce.carevic.eu/fr/notes/attribut-disabled-fieldset">Attribut disabled et fieldset</a>,
          08-12-2023
        </dt>
        <dd>
          L’attribut booléen disabled sur un élément <fieldset> désactive tous les contrôles de formulaire présents à l’intérieur à l’exception de ceux présents dans l’élément <legend>. Voir la documentation mdn sur l’élément <fieldset>. Ça m’a surprise d’apprendre qu’il est possible de mettre des contrôles de formulaire dans un élément <legend> ! Curieuse de voir les cas d’usage où ça peut être utile 🤔.…
          — <a href="https://luce.carevic.eu/fr">Luce Carević</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2023/12/04/questions/">☕️ Journal : Question(s)</a>,
          04-12-2023
        </dt>
        <dd>
          quand on (me) pose une question je demande pourquoi, ce passage du « tu » au « on » ; quand tu réponds « je ne sais pas »
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/sommeil/le-point-d-equilibre.html">Le point d’équilibre</a>,
          07-11-2023
        </dt>
        <dd>
          Il y a une réalité frustrante pour celleux qui subissent leur fatigue. On est toujours à l’affut du moment où on va sombrer.
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://luce.carevic.eu/fr/notes/pandoc-supprimer-retours-ligne">Pandoc : supprimer les retours à la ligne</a>,
          27-09-2023
        </dt>
        <dd>
          Par défaut, lors d’une conversion vers HTML, Pandoc ajoute des retours à la ligne pour rendre le code plus facile à lire. Pour désactiver ce comportement, il faut ajouter l'attribut --wrap=none dans la commande de conversion. Exemple de conversion d'un docx vers du HTML : pandoc *.docx -o export.html --wrap=noneVous souhaitez réagir ? N’hésitez pas à m’écrire.
          — <a href="https://luce.carevic.eu/fr">Luce Carević</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="http://www.maiwann.net//blogperso/tahiti_j24/">Tahiti - jour 24</a>,
          25-09-2023
        </dt>
        <dd>
          Au lever (le plus tardif possible), on a des firi-firi (genre de beignet à rien qui fait notre bonheur). Puis alors que je lis les retours des copaines sur la promesse de vente, on remballe les affaires pour aller manger au snack près du port. Il y avait un beau chat et 19 !! canetons près de l’eau <3
          — <a href="https://www.maiwann.net/">Maïtané Lenoir</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="http://www.maiwann.net//blogperso/tahiti_j23/">Tahiti - jour 23</a>,
          25-09-2023
        </dt>
        <dd>
          Aujourd’hui, c’est pluie-day.
          — <a href="https://www.maiwann.net/">Maïtané Lenoir</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://lalunemauve.fr/perlimpinpin/">Où je crache ma pastille Valda à propos d’Instagram</a>,
          05-07-2023
        </dt>
        <dd>
          Ce billet est une exclusivité pour l’Antichambre. — Il y a quelques mois, dans une story Instagram, je vous ai demandé ce vous préfériez lire en priorité sur mon blog entre, d’une part, un coup de sang à propos d’Instagram et, d’autre part, mes bonnes adresses à Strasbourg. Vous avez été une large majorité à voter pour le premier choix : je m’exécute donc, même si ça va rafraîchir l’ambiance.…
          — <a href="https://lalunemauve.fr/">La Lune Mauve</a>
        </dd>
      </dl>
    
  </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>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">
            <svg class="icon icon-rss2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
            </svg>
          Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>
            <svg class="icon icon-user-tie">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
            </svg>
          Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
            <svg class="icon icon-mail">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
            </svg>
          Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
            <svg class="icon icon-hammer2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
            </svg>
          Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <fieldset>
            <legend>
              <svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
              </svg>
              Thème
            </legend>
            <label>
              <input type="radio" value="auto" name="chosen-color-scheme" checked>
              Auto
            </label>
            <label>
              <input type="radio" value="dark" name="chosen-color-scheme">
              Foncé
            </label>
            <label>
              <input type="radio" value="light" name="chosen-color-scheme">
              Clair
            </label>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

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

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

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

          // WARNING: do not try to insert a Rule to a styleSheet you are
          // currently iterating on, otherwise the browser will be stuck
          // in a infinite loop…
          for (const mediaRule of mediaRules) {
            styleSheet.insertRule(mediaRule.cssText)
            hasDarkRules = true
          }
        }
        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
        }
      })
    </script>
    
  </body>
</html>