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>
    Tout
  — 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="We’re expected to do everything, keep up with everything, adapt to constant changes, and understand multiple conflicting architectural paradigms ranging from immediate mode rendering, to relational databases, to REST API designs, to both imperative and declarative programming, to complex state querying languages like GraphQL, to all of the various intricacies of how CSS handles rendering.">
  <!-- 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>Tout</h1>
      <p>Le <time datetime="2024-05-24">24 mai 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/05/20/"
           title="Publication précédente : Stimulations">← 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/31/"
            title="Publication suivante : Technocritique">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>We’re expected to do everything, keep up with everything, adapt to constant changes, and understand multiple conflicting architectural paradigms ranging from immediate mode rendering, to relational databases, to REST API designs, to both imperative and declarative programming, to complex state querying languages like GraphQL, to all of the various intricacies of how CSS handles&nbsp;rendering.</p>
<p>We’re made <mark>to do all this while watching</mark> our peers lose their jobs, our employers savage society through pervasive surveillance and collaboration with authoritarian companies, and our data centres suck up the entire water supply for entire&nbsp;municipalities.</p>
<p>No wonder we’re all fucked up emotionally and&nbsp;mentally.</p>
<p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/" hreflang="en"
            title="Consultation de l’article (anglais)">The deskilling of web dev is harming the product but, more importantly, it’s damaging our health</a>
            <a href="/david/cache/2024/8672047b982b09475a59605ed0f9a011/" hreflang="en"
                data-tippy data-description="Even before the web developer job market became as dire as it is today, I was regularly seeing developers burn out and leave the industry. Some left for good; some only temporarily."
                data-source="https://www.baldurbjarnason.com/2024/the-deskilling-of-web-dev-is-harming-us-all/"
                data-date="2024-05-21"
                data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
                data-domain="baldurbjarnason.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>J’aimerais bien papoter avec Baldur Bjarnason un jour. Et je sais que mon niveau d’anglais actuel ne me permettrait pas d’aborder ces sujets avec la subtilité qui le&nbsp;nécessite.</p>
<a href="#hr-169" title="Lien vers cette section de la page"><hr id="hr-169" /></a>

<blockquote lang="en">
<p>My web experience was thus enlightenment and disempowerment. Opportunity and anxiety. Tears and&nbsp;joy.</p>
<p>[…]</p>
<p>My vision for the web over the next ten years is that <mark>we can turn that feeling of malaise,</mark> which I think is rooted in disempowerment, into a feeling that things can be&nbsp;different.</p>
<p>No one person set off a light bulb in my mind that made me think I could have a personal website where I blog about all the things I find fun and interesting. Rather, it was seeing role models from all different backgrounds that made me think I could take more control of the web, and use the web as a platform not for consumption or creation for capital, but as a place of&nbsp;expression.</p>
<p><cite><em><a data-link-domain="jamesg.blog" href="https://jamesg.blog/2024/05/19/next-web-decade/" hreflang="en"
            title="Consultation de l’article (anglais)">The next decade of the web</a>
            <a href="/david/cache/2024/50fb34a41d67e9468fce639e97fd62a3/" hreflang="en"
                data-tippy data-description="My experience on the web has been one of dualities."
                data-source="https://jamesg.blog/2024/05/19/next-web-decade/"
                data-date="2024-05-21"
                data-favicon="https://jamesg.blog/favicon.ico"
                data-domain="jamesg.blog"
                ><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>Un peu d’optimisme ne fait pas de&nbsp;mal.</p>
<a href="#hr-170" title="Lien vers cette section de la page"><hr id="hr-170" /></a>

<blockquote>
<p>The best way to think of SLS is as a balding guy with a mullet: there are fireworks down below that are meant to distract you from a sad situation up&nbsp;top.</p>
<p><cite><em><a data-link-domain="idlewords.com" href="https://idlewords.com/2024/5/the_lunacy_of_artemis.htm" hreflang=""
            title="Consultation de l’article">The Lunacy of Artemis (Idle Words)</a>
            <a href="/david/cache/2024/b1099381931e530393ab2740d48ae1ef/" hreflang=""
                data-tippy data-description="For the first time since the 1960's, it looks doubtful whether the US space agency is even capable of getting us to the Moon."
                data-source="https://idlewords.com/2024/5/the_lunacy_of_artemis.htm"
                data-date="2024-05-21"
                data-favicon=""
                data-domain="idlewords.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>Maciej Cegłowski, in style&nbsp;😂.</p>
<p>Voir aussi&nbsp;: <a data-link-domain="idlewords.com" href="https://idlewords.com/2023/1/why_not_mars.htm" hreflang="en"
            title="Consultation de l’article (anglais)">Why Not Mars</a>
            <a href="/david/cache/2024/9dee199dbf71b1176eaac521e828693b/" hreflang="en"
                data-tippy data-description="It's slow, expensive, the engineering is mostly port-a-potty chemistry, and the best-case outcome is that thirty years from now weâll get to watch someone remotely operate a soil scoop from Mars instead of Pasadena"
                data-source="https://idlewords.com/2023/1/why_not_mars.htm"
                data-date="2024-05-21"
                data-favicon=""
                data-domain="idlewords.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>.</p>
<a href="#hr-171" title="Lien vers cette section de la page"><hr id="hr-171" /></a>

<blockquote lang="en">
<p>Rye said Apple’s response addressed the most depressing aspect of their research: That there was previously no way for anyone to opt out of this data&nbsp;collection.</p>
<p>“You may not have Apple products, but if you have an access point and someone near you owns an Apple device, your BSSID will be in [Apple’s] database,” he said. “What’s important to note here is that <mark>every access point is being tracked, without opting in, whether they run an Apple device or not.</mark> Only after we disclosed this to Apple have they added the ability for people to opt&nbsp;out.”</p>
<p><cite><em><a data-link-domain="krebsonsecurity.com" href="https://krebsonsecurity.com/2024/05/why-your-wi-fi-router-doubles-as-an-apple-airtag/" hreflang="en"
            title="Consultation de l’article (anglais)">Why Your Wi-Fi Router Doubles as an Apple AirTag</a>
            <a href="/david/cache/2024/34b4deffee5820ed20c6e57d6c0ee000/" hreflang="en"
                data-tippy data-description="Apple and the satellite-based broadband service Starlink each recently took steps to address new research into the potential security and privacy implications of how their services geo-locate devices. Researchers from the University of Maryland say they relied on publicly available…"
                data-source="https://krebsonsecurity.com/2024/05/why-your-wi-fi-router-doubles-as-an-apple-airtag/"
                data-date="2024-05-22"
                data-favicon="https://krebsonsecurity.com/favicon.ico"
                data-domain="krebsonsecurity.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>Le ver est dans la pomme depuis un peu trop longtemps à mon&nbsp;goût…</p>
<p>Un <a data-link-domain="infosec.exchange" href="https://infosec.exchange/@briankrebs/112480004285401846">résumé sur masto</a>.</p>
<a href="#hr-172" title="Lien vers cette section de la page"><hr id="hr-172" /></a>

<blockquote lang="en">
<p>Recall works by <mark>taking a screenshot of your active window every few seconds</mark>, recording everything you do in Windows for up to three months by&nbsp;default.</p>
<p>These snapshots will be analyzed by the on-device Neural Processing Unit (NPU) and an AI model to extract data from the screenshot. The data will be saved in a semantic index, allowing Windows users to browse through the snapshot history or search using human language&nbsp;queries.</p>
<p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/microsoft/microsofts-new-windows-11-recall-is-a-privacy-nightmare/" hreflang="en"
            title="Consultation de l’article (anglais)">Microsoft’s new Windows 11&nbsp;Recall is a privacy nightmare</a>
            <a href="/david/cache/2024/e1f6125fe416ecd26f2804cdab5cc571/" hreflang="en"
                data-tippy data-description="Microsoft&#039;s announcement of the new AI-powered Windows 11 Recall feature has sparked a lot of concern, with many thinking that it has created massive privacy risks and a new attack vector that threat actors can exploit to steal data."
                data-source="https://www.bleepingcomputer.com/news/microsoft/microsofts-new-windows-11-recall-is-a-privacy-nightmare/"
                data-date="2024-05-24"
                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>C’est la porte ouverte à toute les fenêtres, Windows Unlimited eut été un meilleur nom. 🤡</p>
<a href="#hr-173" title="Lien vers cette section de la page"><hr id="hr-173" /></a>

<blockquote lang="en">
<p>Russian troops in Ukraine are using thousands of Starlink satellite communications terminals made by Elon Musk’s SpaceX, the Ukrainian military intelligence chief told the Wall Street Journal in an interview published on&nbsp;Thursday.</p>
<p>Lieutenant General Kyrylo Budanov said that <mark>Russian troops have been communicating over the Starlink system “for quite a long time”</mark> and acquired the terminals from private Russian firms that purchased them from&nbsp;intermediaries.</p>
<p><cite><em><a data-link-domain="reuters.com" href="https://www.reuters.com/world/europe/russia-using-thousands-spacex-starlink-terminals-ukraine-wsj-says-2024-02-15/" hreflang="en"
            title="Consultation de l’article (anglais)">Russia using thousands of SpaceX Starlink terminals in Ukraine, WSJ says</a>
            <a href="/david/cache/2024/664e0f4028089315e2fa0be1c8c70300/" hreflang="en"
                data-tippy data-description="The Russian Embassy and SpaceX did not respond immediately to requests for comment."
                data-source="https://www.reuters.com/world/europe/russia-using-thousands-spacex-starlink-terminals-ukraine-wsj-says-2024-02-15/"
                data-date="2024-05-22"
                data-favicon="https://www.reuters.com/favicon.ico"
                data-domain="reuters.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>Neutralité du net vs. héroïsation des fournisseurs d’accès à&nbsp;internet.</p>
<a href="#hr-174" title="Lien vers cette section de la page"><hr id="hr-174" /></a>

<blockquote lang="en">
<p>This leads us straight back to the original conversation about “Man or Bear,” which has nothing to do with bears. (Sorry, bears!) <mark>“Would you rather be stuck in a forest with a man or a bear?” is just another way of asking, “Are you afraid of men?”</mark> It’s the same question I’ve been fielding for the entirety of my life as a solo female traveler. It’s the same question that hovers over women all the time as we move through the&nbsp;world.</p>
<p>And it’s a question that’s always been difficult for me to answer. I’m not afraid of all men. But I am afraid of some men. The real problem is the gray area in between and what it takes to manage the murkiness of that&nbsp;unknown.</p>
<p><cite><em><a data-link-domain="bikepacking.com" href="https://bikepacking.com/plog/man-or-bear-debate/" hreflang="en"
            title="Consultation de l’article (anglais)">A Woman Who Left Society to Live With Bears Weighs in on “Man or Bear”</a>
            <a href="/david/cache/2024/cba1417ac2338abde14bb06d0a1f505d/" hreflang="en"
                data-tippy data-description="In this piece, long-term bicycle traveler Laura Killingbeck reflects on the  Man or Bear  debate and adds her unique perspective..."
                data-source="https://bikepacking.com/plog/man-or-bear-debate/"
                data-date="2024-05-24"
                data-favicon="https://bikepacking.com/icon.svg?v=2"
                data-domain="bikepacking.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>En tant qu’homme qui peut croiser des hommes et des ours dans la forêt, j’ai déjà plus peur de croiser un homme. Je n’imagine même pas en tant que&nbsp;femme.</p>
<p>À mon niveau, lorsque je croise une femme seule dans la forêt (très rare, mais ça arrive), j’essaye de rester à bonne distance en ayant l’attitude que j’aurais vis-à-vis… d’un&nbsp;ours.</p>

<blockquote lang="en">
<p>As I listened to his laughter, a visceral understanding rose from my stomach and landed in my brain. In that moment I knew something that I could no longer prevent myself from knowing. That the person I loved got bigger when I got smaller. That he could not stop bringing me down, because bringing me down was what brought him&nbsp;up.</p>
<p><cite><em><a data-link-domain="bicycling.com" href="https://www.bicycling.com/rides/a34466128/search-for-the-wild-reindeer/" hreflang="en"
            title="Consultation de l’article (anglais)">In Search of the Wild Reindeer</a>
            <a href="/david/cache/2024/49b61c702d03a23ba3e0801bdaa3cb07/" hreflang="en"
                data-tippy data-description="When her life fell apart, Laura Killingbeck went on an epic bike journey to find wild reindeer in Labrador."
                data-source="https://www.bicycling.com/rides/a34466128/search-for-the-wild-reindeer/"
                data-date="2024-05-24"
                data-favicon="https://www.bicycling.com/_assets/design-tokens/bicycling/static/images/favicon.94f0fb3.ico"
                data-domain="bicycling.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>😭</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/evolution/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#évolution</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/web/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#web</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/20/"
           title="Publication précédente : Stimulations">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/05/31/"
            title="Publication suivante : Technocritique">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>