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>
    Vain
  — 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="wordfreq was built by collecting a whole lot of text in a lot of languages. That used to be a pretty reasonable thing to do, and not the kind of thing someone would be likely to object to. Now, the text-slurping tools are mostly used for training generative AI, and people are quite rightly on the defensive. If someone is collecting all the text from your books, articles, Web site, or public posts, it’s very likely because they are creating a plagiarism machine that will claim your words as its own.">
  <!-- 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">
  
<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>Vain</h1>
      <p>Le <time datetime="2024-09-30">30 septembre 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/08/10/"
           title="Publication précédente : Kudopamine">← 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>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>wordfreq was built by collecting a whole lot of text in a lot of languages. That used to be a pretty reasonable thing to do, and not the kind of thing someone would be likely to object to. Now, the text-slurping tools are mostly used for training generative AI, and people are quite rightly on the defensive. <mark>If someone is collecting all the text from your books, articles, Web site, or public posts, it’s very likely because they are creating a plagiarism machine</mark> that will claim your words as its&nbsp;own.</p>
<p>So I don’t want to work on anything that could be confused with generative AI, or that could benefit generative&nbsp;AI.</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/rspeer/wordfreq/blob/master/SUNSET.md#i-dont-want-to-be-part-of-this-scene-anymore" hreflang="en"
            title="Consultation de l’article (anglais)">I don’t want to be part of this scene anymore - Why wordfreq will not be updated</a>
            <a href="/david/cache/2024/1cd6127ccec88387f4804f0c3cf1011a/" hreflang="en"
                data-tippy data-description="Access a database of word frequencies, in various natural languages. - rspeer/wordfreq"
                data-source="https://github.com/rspeer/wordfreq/blob/master/SUNSET.md#i-dont-want-to-be-part-of-this-scene-anymore"
                data-date="2024-09-30"
                data-favicon="https://github.githubassets.com/favicons/favicon.png"
                data-domain="github.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>Je me devais de <a href="/david/biologeek/archives/20040930-ouverture-de-rideau/">marquer le coup</a>&nbsp;🎂.</p>
<p>Ces derniers mois, je me pose beaucoup de questions au sujet du partage, du pillage, de ce que ça veut dire de transmettre aujourd’hui et surtout à quelle échelle. Peut-être que les <abbr lang="en" title="Large Language Model">LLM</abbr> sont une <strong>nouvelle forme de transmission</strong> qui passe par une transformation sur laquelle l’instigateur n’a aucun contrôle. Cela laisse reposer une incroyable responsabilité sur les intermédiaires. La communication directe est déjà un exercice tellement difficile… quels effets de bord à moyen terme sur la crédibilité et la confiance de ce qui est&nbsp;partagé&#8239;?</p>
<p>Et comment peut-on refuser&#8239;? Comment conserver une interaction directe, humaine&#8239;? Peut-être que c’est finalement cela qui est en train d’être perdu lorsqu’on écrit sur le Web&nbsp;: douter du nombre d’intermédiaires. Un premier cercle va avoir droit à la pensée «&nbsp;originale&nbsp;» (interprétée), les suivants auront une pensée «&nbsp;transformée&nbsp;» (hybridée) par la machine et ses concepteur·ices pour une diffusion à une échelle qui m’échappe encore, avec une potentielle volonté manipulatrice qui m’échappe encore&nbsp;plus.</p>
<p>Je ne sais pas encore si j’accepterais ici un <em>loginwall</em>, un <em>paywall</em>, un <em>throttling</em> hyper agressif ou une autre solution à inventer. Je sens bien que ma motivation à publier ouvertement est en chute libre dans un tel contexte. Quitte a être inéluctablement aspiré, peut-être qu’il faut que je me concentre sur des projets qui ont du sens et qui produisent / mettent en scène de la donnée qui mérite davantage d’être&nbsp;diffusée.</p>
<p>À vingt ans, il est peut-être temps de laisser cet espace vivre sa vie aussi, le libérer et recommencer ailleurs, plus petit, différent. Toute corrélation avec ma <a href="/david/2024/06/06/" title="Sensibilité">situation professionnelle</a> serait bien évidemment&nbsp;fortuite.</p>

<blockquote lang="en">
<p>There’s something subversive about writing <mark>without concern</mark> for marketability or&nbsp;scale.</p>
<p><cite><em><a data-link-domain="tracydurnell.com" href="https://tracydurnell.com/2024/09/29/the-secret-power-of-a-blog/" hreflang="en"
            title="Consultation de l’article (anglais)">The secret power of a blog</a>
            <a href="/david/cache/2024/72bb85e63c3eb4caed75fbb77608a638/" hreflang="en"
                data-tippy data-description=""
                data-source="https://tracydurnell.com/2024/09/29/the-secret-power-of-a-blog/"
                data-date="2024-09-30"
                data-favicon="https://tracydurnell.com/favicon.ico"
                data-domain="tracydurnell.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>Une part d’innocence n’est&nbsp;plus.</p>
<a href="#hr-202" title="Lien vers cette section de la page"><hr id="hr-202" /></a>

<blockquote lang="en">
<p>It will no longer be enough to blog in order to merely “put out content”. The key will be what has always been key to great blogging: expressing your unique, inimitable&nbsp;impression.</p>
<p>Blogging is expressing your impression. It’s deriving action from thought. <mark>Regardless of how much the AI sphere may not be giving thought to its actions, continued blogging in the face of that reality is deliberate action with thought</mark> — something only us humans can do. Blog. Blog against the dying of the&nbsp;light.</p>
<p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/impressionist-blogging/" hreflang="en"
            title="Consultation de l’article (anglais)">The Impressionist Blogging Movement</a>
            <a href="/david/cache/2024/1a30c47a2b293dcfaee45ee5a67efdd1/" hreflang="en"
                data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
                data-source="https://blog.jim-nielsen.com/2024/impressionist-blogging/"
                data-date="2024-09-30"
                data-favicon="https://blog.jim-nielsen.com/favicon.ico"
                data-domain="blog.jim-nielsen.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>
<a href="#hr-203" title="Lien vers cette section de la page"><hr id="hr-203" /></a>

<blockquote>
<p>En ce qui concerne la recherche, il me semble qu’il faudrait interdire toutes les applications: si on veut faire de la recherche avec les LLM, il me semble nécessaire de les utiliser en dehors des couches applicatives, en créant des applications ad hoc. Tous les autres usages devraient être bannis, parce que <mark>l’usage de LLM dans des applications existantes rend impossible la compréhension</mark> précise de la&nbsp;méthodologie.</p>
<p><cite><em><a data-link-domain="blog.sens-public.org" href="http://blog.sens-public.org/marcellovitalirosati/chatgpttronconneuse.html" hreflang="en"
            title="Consultation de l’article (anglais)">ChatGPT et la tronçonneuse</a>
            <a href="/david/cache/2024/62e66665ed5fa02d7beff383c877fdce/" hreflang="en"
                data-tippy data-description="Blogue de Marcello Vitali-Rosati"
                data-source="http://blog.sens-public.org/marcellovitalirosati/chatgpttronconneuse.html"
                data-date="2024-09-30"
                data-favicon="http://blog.sens-public.org/marcellovitalirosati/favicon.png"
                data-domain="blog.sens-public.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>
<a href="#hr-204" title="Lien vers cette section de la page"><hr id="hr-204" /></a>

<blockquote>
<p>Révolution dans l’identité biologique! Des cellules de votre mère, de votre frère aîné ou même de votre tante pourraient bien se cacher dans votre propre&nbsp;corps.</p>
<p>Ces cellules, qui ne vous appartiennent pas, vous ont été transmises in utero et sont hébergées dans vos organes, votre sang, votre moelle osseuse. Mais quel rôle jouent-elles? Longtemps associées aux maladies auto-immunes, la découverte de leur capacité à régénérer certains tissus change complètement la perception qu’on a de ces cellules étrangères. <mark>L’étude du microchimérisme ouvre une nouvelle voie</mark> thérapeutique en médecine de&nbsp;régénération.</p>
<p><cite><em><a data-link-domain="coeurdessciences.uqam.ca" href="https://coeurdessciences.uqam.ca/component/eventlist/details/1220-microchimerisme-ces-autres-en-nous.html">Ces autres en nous</a></em>, Nathalie&nbsp;Lambert</cite></p>
</blockquote>
<p>Fascinante intervention de Nathalie Lambert sur les cellules qui se transmettent entre générations et fratries. Et même d’enfants qui ne sont pas arrivés à terme. Avec le côté <em>pharmakon</em> de ces cellules (souches) qui peuvent aider dans certaines situations et potentiellement activer des réactions auto-immunes dans&nbsp;d’autres.</p>
<p>Une bonne partie de ce que j’ai appris en biologie il y a 20&nbsp;ans est déjà fausse. C’est extrêmement&nbsp;stimulant.</p>
<p><a href="/david/biologeek/archives/20060119-open-articles-liberez-votre-savoir/">D’autres choses</a> n’ont <a data-link-domain="forbes.com" href="https://www.forbes.com/sites/michaeltnietzel/2024/09/16/scientists-file-antitrust-lawsuit-against-six-journal-publishers/">pas beaucoup</a> <a data-link-domain="affordance.framasoft.org" href="https://affordance.framasoft.org/2024/09/chercheur-auteur-argent-du-beurre-nantes-universite-contre-philippe-forest/">changé</a> par&nbsp;contre…</p>
<a href="#hr-205" title="Lien vers cette section de la page"><hr id="hr-205" /></a>

<blockquote>
<p>J’aime cette façon qu’on a, aussi, en vieillissant, de ne pas vraiment changer, au contraire, de se retrouver un peu, tout en découvrant sur soi des choses qui&nbsp;apaisent.</p>
<p><cite><em><a data-link-domain="sacripanne.net" href="https://sacripanne.net/post/2024/09/20/Le-privil%C3%A8ge-de-l-%C3%A2ge" hreflang="fr"
            title="Consultation de l’article">Le privilège de l’âge</a>
            <a href="/david/cache/2024/4703553d711667b5d3a10c0592c51508/" hreflang="fr"
                data-tippy data-description="L'âge est un sujet de conversation qui passionne les foules. On est toujours trop vieux ou trop jeune pour : quelque chose, les autres, faire bien, faire mal, être à temps, en"
                data-source="https://sacripanne.net/post/2024/09/20/Le-privil%C3%A8ge-de-l-%C3%A2ge"
                data-date="2024-09-30"
                data-favicon=""
                data-domain="sacripanne.net"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-206" title="Lien vers cette section de la page"><hr id="hr-206" /></a>
<p>Mot du jour&nbsp;: Friluftsliv.</p>
<a href="#hr-207" title="Lien vers cette section de la page"><hr id="hr-207" /></a>
<p>Acronyme du jour&nbsp;: <a data-link-domain="rationalwiki.org" href="https://rationalwiki.org/wiki/WEIRD">W.E.I.R.D.</a></p>
<a href="#hr-208" title="Lien vers cette section de la page"><hr id="hr-208" /></a>
<p>Lecture du jour&nbsp;: <a data-link-domain="segalcentre.org" href="https://www.segalcentre.org/common/sitemedia/201819_Shows/FR_AllyToolkit.pdf">Trousse d’outils pour les alliées aux luttes autochtones</a> (PDF, 4Mo, <a href="/static/david/blog/2024/FR_AllyToolkit.pdf">cache</a>).</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/adaptation/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#adaptation</a>
        
          <a href="/david/2024/ecriture/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#écriture</a>
        
          <a href="/david/2024/ia/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#IA</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/08/10/"
           title="Publication précédente : Kudopamine">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</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>