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://winnielim.org/journal/43/">43</a>,
          06-04-2024
        </dt>
        <dd>
          I wrote this time last year that I felt like I was coping better than the year before. This year I don’t feel like I have made much progress, and perhaps I...
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-04-04-implosion-de-la-bulle-ia.html">[Veille] L’implosion de la bulle IA</a>,
          04-04-2024
        </dt>
        <dd>
          https://ploum.net/2024-04-04-la-bulle-ai.html Excellent billet de Ploum sur l’implosion désormais amorcée de la bulle IA. C’est clair, concis et percutant. On peut même le faire lire à quelqu’un qui ne sait pas ce qu’est ChatGPT, tout est expliqué et contextualisé. À diffuser largement !
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2024/04/03/vasectomie-operation/">☕️ Journal : Le jour de la vasectomie</a>,
          03-04-2024
        </dt>
        <dd>
          On y est donc, le 13 octobre 2022, à Crest. 18 mois après la première tentative d’amorcer le processus chez un médecin généraliste pe
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2024/04/03/anesthesiste/">☕️ Journal : Rendez-vous avec l'anesthésiste</a>,
          03-04-2024
        </dt>
        <dd>
          10 octobre 2022. Je franchis le sas d’entrée de l’hôpital de Crest : c’est le dernier rendez-vous avant la vasectomie, dans 3 réveils.</
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/notes/95-months-i-am-the-tree-and-she-is-the-forest/">95 months: i am the tree and she is the forest</a>,
          02-04-2024
        </dt>
        <dd>
          "our selfies are so boring! let’s take cool pictures like john lennon and yoko ono!” and thereafter she no longer looks at the camera lens…i love her because she’s always making me laugh like this with all her quirky thoughts and ideas, and that includes the way she sees and loves me. throughout all the peaks and the extreme lows she’s been there with me, not just when i’m at my best but…
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/blog/2024-03-29-ordinateurs-et-telephones-en-cours.html">[Blog] Ordinateurs et téléphones en cours : responsabiliser plutôt qu’interdire</a>,
          29-03-2024
        </dt>
        <dd>
          Faut-il interdire autant que possible les ordinateurs à l’université ? J’ai lu des tas de choses sur ce sujet au fil des ans mais je n’étais pas vraiment en capacité de me positionner. Or depuis que je suis devenu maître de conférences, j’ai pas mal progressé en pédagogie, car j’ai pu me former, rencontrer des situations nouvelles et réfléchir en équipe. C’est dans ce contexte que je suis tombé…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Vide-a-la-demande">Vide à la demande</a>,
          29-03-2024
        </dt>
        <dd>
          Bertrand Cochard, Vide à la demande. Critique des séries, L’Échappée, 2024, 176 pages, 17 € (sortie le 5 avril) Je l’avoue tout de suite, j’ai bingé Vide à la demande. Telle la lumière bleue des écrans qui retarde l’endormissement, le livre de Bertrand Cochard peut vous faire perdre quelques heures de sommeil. Dans le paysage des ouvrages sur les séries télévisées, il y a les ravi·es de la…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/humeur/marcher.html">Marcher</a>,
          27-03-2024
        </dt>
        <dd>
          Marcher
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/03/papiliorama/">Papiliorama</a>,
          25-03-2024
        </dt>
        <dd>
          K m’a fait la surprise de m’emmener dans une serre à papillons mi-mars et c’était une des plus chouettes sorties que j’ai faites ces derniers temps. Une capsule de ressourcement dans un état d’émerveillement enfantin qui n’était pas sans me rappeler ma fascination des aquariums. C’est une visite de quelques heures que je recommande fortement,… Poursuivre la lecture Papiliorama
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Une-captivite-coupable">Une captivité coupable ?</a>,
          23-03-2024
        </dt>
        <dd>
          L’an dernier, une étude publiée par des économistes rendait compte de la somme pour laquelle les utilisateurs et utilisatrices des médias sociaux consentiraient à se déconnecter. Les étudiant·es d’une université états-unienne accepteraient 59 dollars, pas moins, pour ne plus se connecter à TikTok et 47 pour délaisser Instagram. De manière plus intéressante et apparemment contradictoire, ils et…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://emmaclit.com/2024/03/19/tri-social/">Tri social</a>,
          19-03-2024
        </dt>
        <dd>
          
          — <a href="https://emmaclit.com/">Emma</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/en-voiture-ou-marreter-sur-la-chaussee">En voiture, où m’ar­rê­ter sur la chaus­sée ?</a>,
          15-03-2024
        </dt>
        <dd>
          L’idée c’est de parcou­rir cas à cas, dans l’ordre, et de s’ar­rê­ter au premier qui corres­pond. Cas géné­ral Il y a des places de station­ne­ment libres ? ✅ Utili­sez-les. Ne faites pas de double file, n’oc­cu­pez pas la bande cyclable. Il y a une place de livrai­son avec ligne discon­ti­nue ? ✅ Vous pouvez vous y arrê­ter […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/03/11/cafe">café du matin</a>,
          11-03-2024
        </dt>
        <dd>
          Sugamo, Japon, 11 mars 2024 Water, soil, and the earth's green mantle of plants make up the world that supports the animal life of the earth. Although modern man seldom remembers the fact, he could not exist without the plants that harness the sun's energy and manufacture the basic foodstuffs he depends upon for life. Our attitude towards plants is a singularly narrow one. If we see any…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/03/chiroto-t-datoca/">Chiroto T. Datoca</a>,
          11-03-2024
        </dt>
        <dd>
          Making of d'un projet artistique qui m'a dévorée pendant huit mois.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/03/10/putain">Putain</a>,
          10-03-2024
        </dt>
        <dd>
          Yokohama, Japon, 10 mars 2024 Life not only formed the soil, but other living things of incredible abundance and diversity now exist within it; if this were not so the soil would be a dead and sterile thing. By their presence and by their activities the myriad organisms of the soil make it capable of supporting the earth's green mantle. The soil exists in a state of constant change, taking part…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/le-monde-tel-quil-aurait-pu-etre-2">Le monde tel qu’il aurait pu être</a>,
          20-02-2024
        </dt>
        <dd>
          J’ai arrêté cette série de billets très rapi­de­ment. J’y tiens. Je veux recréer de l’uto­pie et penser plus au monde possible qu’à celui qu’on est en train de construire. Le problème c’est que ces billets sont viciés à la base. Ils ne fonc­tionnent que par contraste avec ce qui est fait, ou pas fait, aujourd’­hui. […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/processus-de-creation/pousses-de-pins.html">Pousses de pins</a>,
          17-02-2024
        </dt>
        <dd>
          J’ai repris le pinceau. En relisant un livre sur la couleur de Jackie Isard, j’ai eu à nouveau envie de faire du dessin botanique.
          — <a href="https://ynote.hk/">Fanny Cheung</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://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://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://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>