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.arthurperret.fr/evenements/2024-06-11-inacheve-d-imprimer-aurore-turbiau-litote.html">[Évènement] Inachevé d’imprimer – Aurore Turbiau</a>,
          11-06-2024
        </dt>
        <dd>
          Inachevé d’imprimer, nouvelle session mardi 11 juin à 16h, avec Aurore Turbiau. Cette rencontre nous donnera l’occasion de discuter (entre autres) des jeux typographiques dans la littérature féministe, du fait de fabriquer ses propres outils, ainsi que d’hypertextualité, de citation et même un peu de droit. Un programme très riche ! Rendez-vous le mardi 11 juin à 16h, en visioconférence. Aurore…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://thom4.net/2024/06/06/patois-guernesien/">☕️ Journal : Ces prémises sont terre à l'amende</a>,
          06-06-2024
        </dt>
        <dd>
          Des panneaux reviennent régulièrement sur les espaces de stationnement de l’île de Guer
          — <a href="https://thom4.net/">Thomas Parisot</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/arretons-avec-les-frameworks-agiles">Arrê­tons avec les frame­works agiles</a>,
          04-06-2024
        </dt>
        <dd>
          Jetez moi SCRUM, Shape-up et les autres, et encore plus leurs versions dites « at-scale » type SAFe. Je ne comprends même pas comment on en est arrivé là alors que le mani­feste agile met en avant «  Les indi­vi­dus et leurs inter­ac­tions, de préfé­rence aux proces­sus et aux outils ». Prétendre cadrer les indi­vi­dus et les inter­ac­tions via […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/notes/first-time-using-holbein-gouache/">first time using holbein gouache</a>,
          04-06-2024
        </dt>
        <dd>
          spread of stuff from the movie, “spirited away”. first time using holbein gouache — it was nice to be able to paint over mistakes. the foreground subjects in the movie had no complicated gradients, just simple flat shadows and highlights, making it easier for a beginner like me. this sketchbook uses brown paper so light colours have more pop.
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Sur-quelques-accusations-de-fascisme-envers-le-mouvement-anti-industriel">Sur quelques accusations de fascisme envers le mouvement anti-industriel</a>,
          03-06-2024
        </dt>
        <dd>
          Il y a quelques mois a été publié un pamphlet anonyme dénonçant le « naufrage réactionnaire du mouvement anti-industriel ». Mouvance à laquelle j’estime appartenir (entre autres affiliations) et pamphlet dans lequel un de mes écrits fait référence… Je ne sais pas si c’est une position spécialement confortable ou au contraire inconfortable mais le fait est que je n’ai pas ressenti l’intérêt de…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/06/retour-a-la-chapelle-da/">Retour à la Chapelle d’A.</a>,
          03-06-2024
        </dt>
        <dd>
          Retourner aux sources et se retrouver des années en aval.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.arthurperret.fr/veille/2024-06-02-robots-cooking-inquietant-virage-ia-adam-hyde.html">[Veille] Robots Cooking : l’inquiétant virage IA d’Adam Hyde (Coko)</a>,
          02-06-2024
        </dt>
        <dd>
          https://www.robotscooking.com C’est une série inquiétante. Après Gordon Brander, voici qu’un autre innovateur dont j’admirais le travail est désormais séduit par l’intelligence artificielle générative : Adam Hyde, fondateur de Coko. Hyde a fait beaucoup pour le développement d’outils libres et open source dans le monde de l’édition. Beaucoup de bien, jusqu’ici. Dans le flux incessant…
          — <a href="https://www.arthurperret.fr/">Arthur Perret</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://winnielim.org/notes/photos-97-months-together/">photos: 97 months together</a>,
          02-06-2024
        </dt>
        <dd>
          we’re both people who default to routines and being at home, so without conscious effort we won’t venture out of our comfort zones. celebrating our monthly anniversary is a ritual that attempts to take us out of that familiar zone, and in that process we get to know our selves and each other more as we discover new places and have new experiences. she likes to sew couple clothes for us — to…
          — <a href="https://winnielim.org/">Winnie Lim (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://n.survol.fr/n/quick-n-dirty">Quick ‘n dirty</a>,
          31-05-2024
        </dt>
        <dd>
          J’ai appris. En bon ingé­nieur j’ai beau­coup poussé l’idée qu’il faut un produit très bien foutu, sans erreur, sans zone d’ombre, perfor­mant et que, quand tout ça va, les utili­sa­teurs vont venir tout seuls. J’ai appris qu’un produit beau avec des erreurs fonc­tionne mieux qu’un produit moche sans erreurs. C’est contre-intui­tif pour moi et pas […]
          — <a href="https://n.survol.fr/">Éric D.</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://brr.fyi/posts/engineering-for-slow-internet">Engineering for Slow Internet</a>,
          31-05-2024
        </dt>
        <dd>
          How to minimize user frustration in Antarctica.
          — <a href="https://brr.fyi/">brr (en)</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.hypothermia.fr/2024/05/hallucinations-collectives/">Hallucinations collectives</a>,
          20-05-2024
        </dt>
        <dd>
          Trouver du lien dans le ciel ou dans l'art en guise de remparts.
          — <a href="https://www.hypothermia.fr/">Eliness</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/temporalite/explorartise-d-hiver-nouvel-an-lunaire.html">Explorartise d’hiver - 新年, nouvel an lunaire</a>,
          13-05-2024
        </dt>
        <dd>
          Ce weekend, j’ai fêté le nouvel an lunaire avec ma famille.
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://ynote.hk/mots/processus-de-creation/dragon-de-bois.html">Dragon de bois</a>,
          01-05-2024
        </dt>
        <dd>
          Le 10 février, ce sera le nouvel an chinois. Comme l’année dernière, j’aimerais proposer une jolie illustration pour l’occasion.
          — <a href="https://ynote.hk/">Fanny Cheung</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://blog.ecologie-politique.eu/post/Etre-de-gauche-et-penser-la-domination-ou-pas">Être de gauche et penser la domination (ou pas)</a>,
          27-04-2024
        </dt>
        <dd>
          Le récit des relations sexuelles abusives que le psychanalyste de gauche Gérard Miller a imposées à de jeunes femmes admiratives m’a rappelé les mésaventures subies par des ami·es. Dans mon entourage, je connais pas moins de trois personnes qui à des âges très jeunes (entre 18 et 22 ou 23 ans) ont eu des rapports sexuels avec des personnalités masculines, rapports qui après coup avaient un goût…
          — <a href="https://blog.ecologie-politique.eu/">Aude</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/04/16/terre">ma vie les genoux à terre</a>,
          16-04-2024
        </dt>
        <dd>
          Takinogawa, Japon, 16 avril 2024 Tes yeux comme ton corps, tu te déplaces avec eux, ils te disent que tu es là où tu es. J'avais passé ma vie les genoux à terre, pour traire, comme pour planter. Mes pantalons en portent la trace de ce ras-de-terre. Je devais me concentrer pour voir, pour marcher et même pour lire, et ça me prenait du temps, beaucoup plus de temps, et du temps j'en possède à…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.la-grange.net/2024/04/15/pilea">pilea</a>,
          15-04-2024
        </dt>
        <dd>
          Komagome, Japon, 15 avril 2024 D'écrire, parfois j'avoue, j'oublie aussi. — Nos vaches sont jolies parce qu'elles mangent des fleurs, Paul Bedel / Catherine Boivin, urn:isbn:978-2-266-28669-5 Pilea peperomioides. Elle a beaucoup grandi pendant quelques années et puis elle s'est arrêtée. Je devrais rempoter les boutures à son pied. Comme si la nouvelle génération ne cherchait juste qu'un peu…
          — <a href="https://www.la-grange.net/">Karl Dubost</a>
        </dd>
      </dl>
    <dl>
        <dt>
          <a href="https://www.quaternum.net/2024/04/04/publier-un-billet-de-blog-sous-forme-de-manuel/">[flux] Publier un billet de blog sous forme de manuel</a>,
          04-04-2024
        </dt>
        <dd>
          Earlier this week, with a spark for building but no particular idea in mind, I started to think about the Linux manual page. Could I serve my blog posts as Linux manual pages? Herein lay an adventure. James, Serving my blog posts as Linux manual pages, https://jamesg.blog/2024/02/29/linux-manual-pages/ L’idée est très bonne : structurer un billet de blog comme une page de manuel (dans le format…
          — <a href="https://www.quaternum.net/">Antoine Fauchié</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://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://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://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>