davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552
							<!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>
    Stimulations
  — David Larlet</title>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <meta name="description" content="Je me suis demandé en passant par la page sur le Stimming (Auto-stimulation en français) après avoir couru s’il pouvait y avoir un lien avec les sports d’endurance. Je n’ai trouvé que cet article qui n’a pas été publié :">
  <!-- That good ol' feed, subscribe :). -->
  <link rel="alternate"
        type="application/atom+xml"
        title="Feed"
        href="/david/log/">
  <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  <link rel="apple-touch-icon"
        sizes="180x180"
        href="/static/david/icons2/apple-touch-icon.png">
  <link rel="icon"
        type="image/png"
        sizes="32x32"
        href="/static/david/icons2/favicon-32x32.png">
  <link rel="icon"
        type="image/png"
        sizes="16x16"
        href="/static/david/icons2/favicon-16x16.png">
  <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  <link rel="mask-icon"
        href="/static/david/icons2/safari-pinned-tab.svg"
        color="#07486c">
  <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  <meta name="msapplication-TileColor" content="#f7f7f7">
  <meta name="msapplication-config"
        content="/static/david/icons2/browserconfig.xml">
  <meta name="theme-color"
        content="#f7f7f7"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color"
        content="#272727"
        media="(prefers-color-scheme: dark)">
  <!-- Is that even respected? Retrospectively? What a shAItshow…
  https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  <meta name="robots" content="noai, noimageai">
  <!-- To get attribution when linking on mastodon. -->
  <meta name="fediverse:creator" content="@david@larlet.fr">
  
<style type="text/css">
  .tippy-content {
    min-width: 280px;
    padding: .5rem;
    font-size: calc(var(--fluid-0) * 0.8);
    font-family: var(--labor-font);
    letter-spacing: initial;
    text-align: left;
  }
  .tippy-content h3 {
    margin-top: 0;
  }
  .tippy-content h3 img {
    max-width: 2rem;
    max-height: 2rem;
    display: inline-block;
  }
  .tippy-content .tippy-links {
    display: flex;
    justify-content: space-around;
  }
  .tippy-content a {
    padding: .4rem;
    color: #F06048;
  }
</style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>Stimulations</h1>
      <p>Le <time datetime="2024-05-20">20 mai 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/13/"
           title="Publication précédente : Tensions">← Précédent</a> •
      
      <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
      •
      <a href="/david/recherche/"
         title="Aller à la page de recherche"
         rel="search" data-no-instant>Recherche</a>
      
        • <a rel="next"
            href="/david/2024/05/24/"
            title="Publication suivante : Tout">Suivant →</a>
      
    </p>
  </nav>
  
<p><a href="/david/2024/05/12/" title="Alien">Je me suis demandé</a> en passant par la page sur le <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Stimming">Stimming</a> (<a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto-stimulation">Auto-stimulation</a> en français) après avoir couru s’il pouvait y avoir un lien avec les sports d’endurance. Je n’ai trouvé que <a data-link-domain="ncbi.nlm.nih.gov" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8992823/">cet article</a> qui n’a pas été&nbsp;publié&nbsp;:</p>

<blockquote lang="en">
<p>Physical activity is beneficial for physical and mental health in the general population. Among autistic people, a range of physical and mental health conditions, particularly depression and anxiety, occur more frequently than in the general population. <mark>Physical activity interventions could help improve physical and mental health in autistic adults,</mark> but there is a lack of research in the area. The aim of this perspective article is to explore research into physical activity interventions for autistic adults, and identify gaps particularly in need of&nbsp;addressing.</p>
</blockquote>
<p>J’imagine que les mouvements de jambes à l’arrêt facilitent la récupération aussi d’une certaine&nbsp;manière&nbsp;😇.</p>
<p><a href="/david/2024/04/13/#hr-148">Still</a> <a data-link-domain="relationalpsych.group" href="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd" hreflang="en"
            title="Consultation de l’article (anglais)">digging</a>
            <a href="/david/cache/2024/7f7afbfc0e4528838aadd7db4ba231cb/" hreflang="en"
                data-tippy data-description="Autism Assessment at Relational Psych involves comprehensive evaluations to diagnose Autism Spectrum Disorders (ASD). Our assessments are conducted by experienced professionals and are tailored to identify the unique needs and strengths of each individual."
                data-source="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd"
                data-date="2024-05-20"
                data-favicon="https://assets-global.website-files.com/638a47e8e6837e0de97565b0/63fc2dfc3efb72e41f561cf0_Exclude.png"
                data-domain="relationalpsych.group"
                ><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;⛏️.</p>
<a href="#hr-160" title="Lien vers cette section de la page"><hr id="hr-160" /></a>

<blockquote lang="en">
<p>When you’re driving around in Google Maps, you’re piloting a spaceship in an ancient simulation of space&nbsp;warfare.</p>
<p><cite><em><a data-link-domain="interconnected.org" href="https://interconnected.org/home/2024/05/17/arrow" hreflang="en"
            title="Consultation de l’article (anglais)">When you’re driving in Google Maps you’re re-enacting an ancient space combat sim</a>
            <a href="/david/cache/2024/37e471123bcb625e1ada602b1168a3dd/" hreflang="en"
                data-tippy data-description="Posted on Friday 17 May 2024. 1,259 words, 14 links. By Matt Webb."
                data-source="https://interconnected.org/home/2024/05/17/arrow"
                data-date="2024-05-20"
                data-favicon=""
                data-domain="interconnected.org"
                ><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>Matt Webb, un des meilleurs tisseurs du&nbsp;Web.</p>
<a href="#hr-161" title="Lien vers cette section de la page"><hr id="hr-161" /></a>

<blockquote>
<p>Depuis quelques mois, je réalise des petites BD sur le même principe qu’Étymographie dans Le Combat syndicaliste, le journal de la CNT-F. <mark>Je les mets à l’occasion sur Instagram,</mark> mais je ne veux pas non plus totalement laisser mourir mon cher blog, d’autant qu’il y a peut-être une ou deux personnes qui y vont encore et boudent les réseaux sociaux, sait-on jamais… En voici donc&nbsp;trois</p>
<p><cite><em><a data-link-domain="boutanox.blogspot.com" href="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html" hreflang=""
            title="Consultation de l’article">Mélanaïlourologos - Le Combat syndicaliste</a>
            <a href="/david/cache/2024/8a50a4b5f8ead46ca899437425315367/" hreflang=""
                data-tippy data-description="Depuis quelques mois, je réalise des petites BD sur le même principe qu'Étymographie dans Le Combat syndicaliste , le journal de la CNT-F ...."
                data-source="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html"
                data-date="2024-05-20"
                data-favicon="https://boutanox.blogspot.com/favicon.ico"
                data-domain="boutanox.blogspot.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>Merci aux auteur·ices qui publient aussi sur le web (même si c’est sur Google en&nbsp;l’occurence…).</p>
<a href="#hr-162" title="Lien vers cette section de la page"><hr id="hr-162" /></a>

<blockquote lang="en">
<p>Libraries are essential for democracy. We provide librarians and their communities the necessary skills <mark>to turn our ideals into action,</mark> focused on issues like privacy, intellectual freedom, and information&nbsp;democracy.</p>
<p><cite><em><a data-link-domain="libraryfreedom.org" href="https://libraryfreedom.org/">We are Library Freedom&nbsp;Project </a></em></cite></p>
</blockquote>
<p>📚✊</p>
<a href="#hr-163" title="Lien vers cette section de la page"><hr id="hr-163" /></a>

<blockquote>
<p>Je ne connais pas bien l’analyse transactionnelle, mais je m’en méfie un peu, surement plus par ignorance que par&nbsp;connaissance.</p>
<p>Je trouve cependant que les différents «&nbsp;P&nbsp;» (Protection, Permission, Puissance) qui sont proposés sont intéressants quand il s’agit de parler de confiance, de légitimité et de collaboration. Je suis content de rencontrer ces&nbsp;termes.</p>
<p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/oser-la-confiance.html" hreflang="fr"
            title="Consultation de l’article">Oser la confiance</a>
            <a href="/david/cache/2024/f0f339af451863ac8580a9fb65a58e99/" hreflang="fr"
                data-tippy data-description="On m’a conseillé ce livre, voici donc quelques notes."
                data-source="https://blog.notmyidea.org/oser-la-confiance.html"
                data-date="2024-05-20"
                data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
                data-domain="blog.notmyidea.org"
                ><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>Cet article rai·ésonne <a href="/david/2024/05/13/" title="Tensions">particulièrement en ce moment</a>.</p>
<a href="#hr-164" title="Lien vers cette section de la page"><hr id="hr-164" /></a>

<blockquote>
<p>Si je prends la parole aujourd’hui, c’est que je pense que mon parcours et mon cheminement intellectuel peuvent servir à d’autres confrères qui, je le sais, sont nombreux à être passés par mes différentes&nbsp;situations.</p>
<p>Lorsque je suis entré en études d’ostéopathie, j’étais certain de commencer un cursus scientifique qui m’amènerait à être une profession de santé&nbsp;respectable.</p>
<p><cite><em><a data-link-domain="scribe.rip" href="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871" hreflang="fr"
            title="Consultation de l’article">Ostéopathe, je n’en garderai que le nom</a>
            <a href="/david/cache/2024/b2c5ca7e92e2c0d461bc3c7da36e8d32/" hreflang="fr"
                data-tippy data-description="Cette rupture est symbolique. Mais les dérives sont quant à elles réelles. N’oubliez pas, ne pas se positionner, c’est cautionner."
                data-source="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871"
                data-date="2024-05-20"
                data-favicon="https://scribe.rip/favicon.ico"
                data-domain="scribe.rip"
                ><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>Merci aux personnes qui témoignent de&nbsp;l’intérieur.</p>
<a href="#hr-165" title="Lien vers cette section de la page"><hr id="hr-165" /></a>

<blockquote lang="en">
<p>In our increasingly data-driven world, the ability to quickly and accurately access geospatial data can transform industries from public health to urban planning. Imagine being able to locate and analyze data from ‘within 10&nbsp;miles of the North Carolina coastline’ in mere seconds. Natural Language Geocoding makes this possible, <mark>bridging the gap between complex geospatial queries and user-friendly language.</mark> Let’s dive into how this innovative technology is changing the landscape of data analysis, making it more accessible and&nbsp;efficient.</p>
<p><cite><em><a data-link-domain="element84.com" href="https://www.element84.com/machine-learning/natural-language-geocoding/" hreflang="en"
            title="Consultation de l’article (anglais)">Natural Language Geocoding</a>
            <a href="/david/cache/2024/7084f7b279604bc141fee03e01531eb7/" hreflang="en"
                data-tippy data-description="We discuss how natural language geocoding is changing the landscape of data analysis, making it more accessible and efficient."
                data-source="https://www.element84.com/machine-learning/natural-language-geocoding/"
                data-date="2024-05-20"
                data-favicon="https://www.element84.com/favicon-32x32.png?v=24e856d25e63af3f5b952cefe84a531f"
                data-domain="element84.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>L’AI s’immisce décidément partout. Je pensais naïvement être épargné dans ce domaine là. #enshAIttification (you saw it here&nbsp;first).</p>
<a href="#hr-166" title="Lien vers cette section de la page"><hr id="hr-166" /></a>

<blockquote lang="en">
<p>A privacy-first, no-nonsense, super-fast <mark>blogging&nbsp;platform</mark></p>
<p>No trackers, no javascript, no stylesheets. Just your&nbsp;words.</p>
<p><cite><em><a data-link-domain="bearblog.dev" href="https://bearblog.dev/">ʕ•ᴥ•ʔ Bear&nbsp;Blog</a></em></cite></p>
</blockquote>
<a href="#hr-167" title="Lien vers cette section de la page"><hr id="hr-167" /></a>

<blockquote>
<p>Éducation sur le cannabis <mark>pour et par</mark> les Premières Nations, les Inuits et les&nbsp;Métis</p>
<p><cite><em><a data-link-domain="nwaccannabised.ca" href="https://nwaccannabised.ca/fr">NWAC&nbsp;Cannabis</a></em></cite></p>
</blockquote>
<p>Je découvre au passage <a data-link-domain="deplume.ca" href="https://deplume.ca/">Design de Plume</a>.</p>
<a href="#hr-168" title="Lien vers cette section de la page"><hr id="hr-168" /></a>

<blockquote>
<p>Peut-être que je viens de courir le 5k le plus rapide du reste de ma vie. 🏃💨</p>
<p><cite><em><a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111133899699614778">Sur masto</a>, le 26&nbsp;septembre&nbsp;2023</em></cite></p>
</blockquote>
<p>Ce pouet va mal&nbsp;vieillir&nbsp;🫀🦵.</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/documentation/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#documentation</a>
        
          <a href="/david/2024/liens/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#liens</a>
        
        <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
      </p>
    </nav>
  
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/13/"
           title="Publication précédente : Tensions">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/05/24/"
            title="Publication suivante : Tout">Suivant →</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>
    
  <script src="/static/david/js/popper-2.11.8.min.js"></script>
  <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  <script>
    tippy('[data-tippy]', {
      content(reference) {
        reference.addEventListener('click', (e) => e.preventDefault())
        return `
        <h3 lang="fr">
          <img src="${reference.dataset.favicon}" loading="lazy">
          <a href="${reference.dataset.source}"
            >Article sur ${reference.dataset.domain}</a></h3>
        <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
        <div class="tippy-links" lang="fr">
          <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
        </div>
        `
      },
      allowHTML: true,
      interactive: true,
      delay: [150, 700],
      hideOnClick: false
    })
  </script>
  <script type="module">
    import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'

    const markObserver = new IntersectionObserver((entries, observer) => {
      const computedStyle = getComputedStyle(document.documentElement)
      const markBackground = computedStyle.getPropertyValue('--mark-background')
      for (const entry of entries) {
        if (entry.intersectionRatio === 0) continue
        const markElement = entry.target
        markElement.style.backgroundColor = 'inherit'
        const annotation = annotate(
          markElement, {
            type: 'highlight',
            multiline: true,
            color: markBackground,
            // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
            animate: false
          }
        )
        annotation.show()
        observer.unobserve(markElement)
      }
    }, {threshold: 1.0})

    for (const markElement of document.querySelectorAll('mark')) {
      markObserver.observe(markElement)
    }
  </script>

  </body>
</html>