davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535
							<!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>
    Technocritique
  — 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="Given the extreme connectivity constraints at the South Pole, I wrote a Python script for publishing to S3 that worked well in the challenging environment. It uses the S3 API to upload assets in small chunks. It detects and resumes failed uploads without losing progress. It waits until everything is safely uploaded before publishing the new version.">
  <!-- 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>Technocritique</h1>
      <p>Le <time datetime="2024-05-31">31 mai 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/24/"
           title="Publication précédente : Tout">← 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/06/06/"
            title="Publication suivante : Sensibilité">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>Given the extreme connectivity constraints at the South Pole, I wrote a Python script for publishing to S3 that worked well in the challenging environment. It uses the S3 API to upload assets in small chunks. It detects and resumes failed uploads without losing progress. It waits until everything is safely uploaded before publishing the new&nbsp;version.</p>
<p>If I can do it, unpaid, working alone, for my silly little hobby blog, in 200&nbsp;lines of Python… <mark>surely your team of engineers can do so</mark> for your flagship&nbsp;webapp.</p>
<p><cite><em><a data-link-domain="brr.fyi" href="https://brr.fyi/posts/engineering-for-slow-internet" hreflang="en"
            title="Consultation de l’article (anglais)">Engineering for Slow Internet</a>
            <a href="/david/cache/2024/9e9c6f97d732010e14201f1624782ddc/" hreflang="en"
                data-tippy data-description="How to minimize user frustration in Antarctica."
                data-source="https://brr.fyi/posts/engineering-for-slow-internet"
                data-date="2024-05-31"
                data-favicon="https://brr.fyi/favicon-32x32.png"
                data-domain="brr.fyi"
                ><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>En ce moment, suite à une mise à jour de l’application SONOS rendant mes enceintes inutilisables (n’achetez jamais cette marque…), je m’amuse à faire une interface web grâce au <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli/">serveur open-source</a> qui a été développé ces dernières&nbsp;années.</p>
<p>C’est triste d’en arriver là, je ressens fort le pouvoir que me procurent mes capacités de développeur mais je sais aussi que la majorité subit l’emmerdification logicielle (c’était déjà pas terrible avant&#8239;!) sans avoir d’autre&nbsp;option.</p>
<p>Ce n’est pas encore prêt à être utilisable par d’autres mais c’est stimulant d’ajouter des fonctionnalités au fil des besoins locaux. Je réalise à quel point le manque de réactivité de l’app de 175Mo n’est pas liée au <em>hardware</em> vu que j’arrive à avoir quelque chose d’immédiat avec quelques lignes de Python +&nbsp;JS/HTML.</p>

<blockquote lang="en">
<p>The <strong>only way</strong> I was able to get this done was by <strong>turning off the phone entirely</strong>, right before Internet access dropped, and then turning it back on when Internet access resumed at the next satellite pass. This tricked the phone into not giving up on the download, because it was totally off during the period without Internet. It never had a chance to fail. By doing this, I was able to spread out the download across multiple satellite passes, and I could complete the&nbsp;download.</p>
<p>This is an absurd workaround! I should not have had to do&nbsp;this.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<a href="#hr-175" title="Lien vers cette section de la page"><hr id="hr-175" /></a>

<blockquote>
<p>À chaque technologie qu’on vous propose, qui émerge dans le champ commercial, il s’agit toujours de se demander&nbsp;: en quoi cette tech va-t-elle nourrir ou appauvrir mon rapport aux autres, au monde et à moi-même&#8239;? Il est très facile de mesurer le pouvoir qu’une appli ou qu’un service numérique apporte, beaucoup plus insidieux de réaliser ce qu’elle nous fait perdre ou même dégrade dans nos relations et nos puissances propres&nbsp;: puissance de créer, de réfléchir, d’imaginer, d’être empathique, d’écouter, puissance physique de ressentir par soi-même, de se déplacer, de garder son énergie, etc.</p>
<p><mark>La technocritique doit discriminer pouvoir (le faire faire) et puissance (le faire par soi-même, en autonomie),</mark> ouverture ou fermeture au monde, enrichissement ou effilochement des liens, impact sur l’écologie en amont et en aval, exhaustion des ressources, impacts sociaux sur les pays en développement, pollutions induites, pour notre Terre — mais aussi dans nos cerveaux avec le siphonnage permanent de notre attention, de nos temps libres par le numérique. Et elle doit aussi se demander&nbsp;: quels désirs doit-on encourager&#8239;? Quelle liberté ou émancipation la techno doit-elle nous aider à atteindre&#8239;? Le peut-elle seulement, et dans quel contexte&nbsp;d’usage&#8239;?</p>
<p><cite><em><a data-link-domain="bonpote.com" href="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/" hreflang="fr"
            title="Consultation de l’article">«&nbsp;On a besoin de pirates pour saboter les datacenters d’Amazon, pour bloquer les plateformes d’Uber ou de Airbnb&nbsp;»</a>
            <a href="/david/cache/2024/02acbf716d95797a371706c8983d6164/" hreflang="fr"
                data-tippy data-description="La Silicon Valley n’est qu’à la marge soucieuse de l’écologie. Mais c’est aussi qu’elle croit profondément au solutionnisme techno pour"
                data-source="https://bonpote.com/on-a-besoin-de-pirates-pour-saboter-les-datacenters-damazon-pour-bloquer-les-plateformes-duber-ou-de-airbnb/"
                data-date="2024-05-31"
                data-favicon="https://bonpote.com/wp-content/uploads/2024/01/ezez_1.ico"
                data-domain="bonpote.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><del>Martine</del> Alain aux&nbsp;US.</p>
<a href="#hr-176" title="Lien vers cette section de la page"><hr id="hr-176" /></a>

<blockquote lang="en">
<p>Google utilizes cookie history, logged-in Chrome data, and pattern detection (referred to in the leak as “unsquashed” clicks versus “squashed” clicks) as effective means for fighting manual &amp; automated click spam. […]</p>
<p>My anonymous source claimed that way back in 2005, <mark>Google wanted the full clickstream of billions of Internet users, and with Chrome, they’ve now got it.</mark> The API documents suggest Google calculates several types of metrics that can be called using Chrome views related to both individual pages and entire&nbsp;domains.</p>
<p>This document, describing the features around how Google creates Sitelinks, is particularly interesting. It showcases a call named topUrl, which is “A list of top urls with highest two_level_score, i.e., chrome_trans_clicks.” My read is that Google likely uses the number of clicks on pages in Chrome browsers and uses that to determine the most popular/important URLs on a site, which go into the calculation of which to include in the sitelinks&nbsp;feature.</p>
<p><cite><em><a data-link-domain="sparktoro.com" href="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/" hreflang="en"
            title="Consultation de l’article (anglais)">An Anonymous Source Shared Thousands of Leaked Google Search API Documents with Me; Everyone in SEO Should See Them</a>
            <a href="/david/cache/2024/2eba81418d244e79cef08638976dbeae/" hreflang="en"
                data-tippy data-description="On Sunday, May 5th, I received an email from a person claiming to have access to a massive leak of API documentation from inside Google’s Search division."
                data-source="https://sparktoro.com/blog/an-anonymous-source-shared-thousands-of-leaked-google-search-api-documents-with-me-everyone-in-seo-should-see-them/"
                data-date="2024-05-31"
                data-favicon="https://sparktoro.com/favicon.ico"
                data-domain="sparktoro.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>Ce qui est bien avec les produits Google c’est qu’on n’est jamais&nbsp;surpris.</p>
<a href="#hr-177" title="Lien vers cette section de la page"><hr id="hr-177" /></a>

<blockquote>
<p>En prenant un tout petit peu de recul Josh se rend compte que cette troupe ne comprend pas vraiment ce qu’est le Bluetooth, son fonctionnement SANS FIL justement. Josh a de son côté pris part à des développement dans ce format au cours de son activité professionnelle. Il a même remonté des bugs rencontrés sur ce format à Ericsson au début des années 2000. <mark>Comment, avec un diplôme d’informatique en poche, Josh peut-il avoir tord</mark> et comment ces gens qui ne comprennent pas le fonctionnement du Bluetooth peuvent-ils avoir&nbsp;raison&#8239;?</p>
<p><cite><em><a data-link-domain="minimachines.net" href="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339" hreflang="fr"
            title="Consultation de l’article">L’aventurier du casque Bluetooth maudit</a>
            <a href="/david/cache/2024/acf33204fda8c91ac054bb26f99e8c59/" hreflang="fr"
                data-tippy data-description="Cette histoire est un témoignage étonnant d'un internaute qui ne comprend plus comment le Bluetooth - et notre monde - fonctionnent."
                data-source="https://www.minimachines.net/actu/casque-apple-lightning-bluetooth-127339"
                data-date="2024-05-31"
                data-favicon="https://www.minimachines.net/wp-content/uploads/2012/09/favicon1.png"
                data-domain="minimachines.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>
<p>Cette histoire peut être lue avec tellement d’angles —&nbsp;et de biais&nbsp;— possibles. Je me demande quel serait le bilan carbone des deux options sur du long terme en tenant compte de la production, du transport, de la durabilité, de la consommation, etc.</p>
<a href="#hr-178" title="Lien vers cette section de la page"><hr id="hr-178" /></a>

<blockquote lang="en">
<p>This approach serves as a reminder of the constantly changing tactics of cybercriminals and, unfortunately, illustrates why you can never blindly trust what someone shares&nbsp;online.</p>
<p>Instead, <mark>developers must verify the source of all packages they add to their projects,</mark> and even if it feels trustworthy, check the code (with word wrap enabled) for unusual or obfuscated commands that will be&nbsp;executed.</p>
<p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/" hreflang="en"
            title="Consultation de l’article (anglais)">Cybercriminals pose as “helpful” Stack Overflow users to push malware</a>
            <a href="/david/cache/2024/1bff60d11f3a030aa5b3d1da84dce189/" hreflang="en"
                data-tippy data-description="Cybercriminals are abusing Stack Overflow in an interesting approach to spreading malware&mdash;answering users&#039; questions by promoting a malicious PyPi package that installs Windows information-stealing malware."
                data-source="https://www.bleepingcomputer.com/news/security/cybercriminals-pose-as-helpful-stack-overflow-users-to-push-malware/"
                data-date="2024-05-31"
                data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
                data-domain="bleepingcomputer.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>Bon&nbsp;courage.</p>
<a href="#hr-179" title="Lien vers cette section de la page"><hr id="hr-179" /></a>

<blockquote>
<p>J’ai appris qu’un produit beau avec des erreurs fonctionne mieux qu’un produit moche sans erreurs. <mark>C’est contre-intuitif pour moi et pas dans mes attentes mais c’est la réalité du terrain.</mark> J’ai appris qu’au-delà du <em>beau</em>, l’expérience utilisateur dans la manipulation des interfaces était une vraie expertise qui faisait toute la différence. J’ai appris que l’adéquation aux besoins métier primait encore plus sur tout&nbsp;ça.</p>
<p><cite><em><a data-link-domain="n.survol.fr" href="https://n.survol.fr/n/quick-n-dirty" hreflang="fr"
            title="Consultation de l’article">Quick ‘n dirty - Carnet de notes</a>
            <a href="/david/cache/2024/23c807abc870219e09f41f92bc869d37/" hreflang="fr"
                data-tippy data-description="J'ai appris.En bon ingénieur j'ai beaucoup poussé l'idée qu'il faut un produit très bien foutu, sans erreur, sans zone d'ombre, performant et que, quand tout ça va, les utilisateurs vont ven"
                data-source="https://n.survol.fr/n/quick-n-dirty"
                data-date="2024-05-31"
                data-favicon=""
                data-domain="n.survol.fr"
                ><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>Oui. J’ai appris cela&nbsp;aussi.</p>
<p>J’ai même appris que des gué-guerres politiques internes pouvaient sabrer la meilleure des&nbsp;techniques.</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/deception/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#déception</a>
        
          <a href="/david/2024/dystopie/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#dystopie</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/24/"
           title="Publication précédente : Tout">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/06/06/"
            title="Publication suivante : Sensibilité">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>