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>
    Calme
  — 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="Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de route.">
  <!-- 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>Calme</h1>
      <p>Le <time datetime="2024-04-18">18 avril 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/04/17/"
           title="Publication précédente : Échelle">← 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/04/20/"
            title="Publication suivante : Jour 1">Suivant →</a>
      
    </p>
  </nav>
  
<p>Le calme avant la tempête ou la tempête avant le calme. Ces prochains jours en décideront. C’est peut-être aussi la tempête avant la tempête. Me voilà à la barre, en essayant de ne pas la mettre trop haute, acceptant que le cap puisse être réajusté en cours de&nbsp;route.</p>
<a href="#hr-152" title="Lien vers cette section de la page"><hr id="hr-152" /></a>

<blockquote lang="en">
<p>A calm company’s purpose is to provide exceptional service to customers while simultaneously improving the lives of the people who work&nbsp;there.</p>
<p><mark>By default, a calm company is profitable.</mark> Those profits give a calm company its resilience: there’s no last-minute scramble to meet payroll or earn a last-minute sale to keep the business afloat. The company has enough financial margin to weather economic&nbsp;storms.</p>
<p>Moreover, calm companies are fun to work for. The work is usually interesting and enjoyable. The team has been carefully selected, and there’s a good vibe in&nbsp;meetings.</p>
<p>Calm companies provide meaningful work, healthy interactions, and flexibility for people’s lives. If your kid is home sick, you can set work aside and take care of them. If it’s a beautiful day, you can go for a run on the&nbsp;beach.</p>
<p><cite><em><a data-link-domain="justinjackson.ca" href="https://justinjackson.ca/calm-company" hreflang="en"
            title="Consultation de l’article (anglais)">We need more calm companies</a>
            <a href="/david/cache/2024/944899e3cafa6019bd2f285284a14dd7/" hreflang="en"
                data-tippy data-description="Calm companies are profitable, value freedom, have a purpose, and improve the team's lives. Frenzied companies are crisis-driven."
                data-source="https://justinjackson.ca/calm-company"
                data-date="2024-04-18"
                data-favicon="https://justinjackson.ca/img/asset/bWFpbi9icnV0YWwvanVzdGluLWphY2tzb24tZG90cy1jaXJjbGUucG5n?w=32&h=32&s=84e63e02be5161c4fdb75e2f8304ae35"
                data-domain="justinjackson.ca"
                ><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>Par la force des choses, je me retrouve à réfléchir à cette histoire de profit. Peut-être que l’équilibre est suffisant. Peut-être même qu’il incite à rester frugal, à rester à une échelle humaine, à prendre soin de relations qui ne soient pas dégradées par l’argent. Peut-être que le profit introduit un déséquilibre en lui-même qui ne permet pas de rester&nbsp;calme.</p>
<a href="#hr-153" title="Lien vers cette section de la page"><hr id="hr-153" /></a>

<blockquote lang="en">
<p><code>Line-height</code> and <code>vertical-align</code> are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline formatting&nbsp;context.</p>
<p><cite><em><a data-link-domain="iamvdo.me" href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align" hreflang="en"
            title="Consultation de l’article (anglais)">Deep dive CSS: font metrics, line-height and vertical-align</a>
            <a href="/david/cache/2024/157e744e8062e5495ba700566e99f8f2/" hreflang="en"
                data-tippy data-description="An introduction to the inline formatting context. Explores line-height and vertical-align properties, as well as the font metrics. Understand how text is rendered on screen, and how to control it with CSS."
                data-source="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align"
                data-date="2024-04-18"
                data-favicon="https://iamvdo.me/images/favicon.png"
                data-domain="iamvdo.me"
                ><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>Centrer des éléments sur le web —&nbsp;<em>a fortiori</em> du texte&nbsp;— a toujours été compliqué. <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/centering/" hreflang="en"
            title="Consultation de l’article (anglais)">Voire impossible.</a>
            <a href="/david/cache/2024/4bda7c6500950716846bdeb6bddbafed/" hreflang="en"
                data-tippy data-description="Somehow we forgot how to center rectangles and must find our way back"
                data-source="https://tonsky.me/blog/centering/"
                data-date="2024-04-18"
                data-favicon="https://tonsky.me/i/favicon.png"
                data-domain="tonsky.me"
                ><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> Je me demande si des unités comme <code>rlh</code> on une chance de <a data-link-domain="pawelgrzybek.com" href="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/" hreflang="en"
            title="Consultation de l’article (anglais)">changer des choses</a>
            <a href="/david/cache/2024/c224a3174ad7a76fae1aaa8d174ec791/" hreflang="en"
                data-tippy data-description="Vertical rhythm is a design concept that helps to create a harmonious layout by following consistent spacing between elements, typically using the height of a line as a base."
                data-source="https://pawelgrzybek.com/vertical-rhythm-using-css-lh-and-rlh-units/"
                data-date="2024-04-18"
                data-favicon="https://pawelgrzybek.com/icon.svg"
                data-domain="pawelgrzybek.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> à ce&nbsp;sujet.</p>
<p>Je vous ai déjà dit que <a data-link-domain="moderncss.dev" href="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/" hreflang="en"
            title="Consultation de l’article (anglais)">les CSS c’était devenu génial&#8239;?</a>
            <a href="/david/cache/2024/35c44c8d8b999faa625ed6009da60e99/" hreflang="en"
                data-tippy data-description="Explore modern project architecture, theming, responsive layouts, and component design. Learn to improve code organization, dig into layout techniques, and review real-world, context-aware components that use cutting-edge CSS techniques."
                data-source="https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/"
                data-date="2024-04-18"
                data-favicon="https://moderncss.dev/favicon.png"
                data-domain="moderncss.dev"
                ><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> Le temps que ça a dû prendre à Stephanie Eckles pour découvrir/collecter/tester/agencer/écrire tout&nbsp;ça&nbsp;😮.</p>
<a href="#hr-154" title="Lien vers cette section de la page"><hr id="hr-154" /></a>

<blockquote lang="en">
<p>What is less thrilling is that, nevermind the basic accessibility requirements that are often missing like alt text on images, we stopped letting people do very normal web things. There are a number of avenues to route the blame to: rushing to release something midly usable for testing protocols in the wild, not having a UI engineer on the project, building things in a mobile “touch first” experience and ignoring other inputs or devices; the list goes on. In the end, <mark>it’s usually because we’ve JavaScript’ed our way out of these&nbsp;things.</mark></p>
<p>Here are some things I wish people allowed to continue to work in their web&nbsp;projects:</p>
<p><cite><em><a data-link-domain="heather-buchel.com" href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" hreflang="en"
            title="Consultation de l’article (anglais)">Just normal web things.</a>
            <a href="/david/cache/2024/a20d47394f5c790270fd5af6faa58651/" hreflang="en"
                data-tippy data-description="A plea for us to get back to building websites that can do normal website things."
                data-source="https://heather-buchel.com/blog/2023/07/just-normal-web-things/"
                data-date="2024-04-18"
                data-favicon="https://heather-buchel.com/icon.svg"
                data-domain="heather-buchel.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>Oui. Les cas exceptionnels existent… dans la mesure où ils restent des cas exceptionnels. Ça arrive, mais ça doit rester très&nbsp;rare.</p>
<a href="#hr-155" title="Lien vers cette section de la page"><hr id="hr-155" /></a>

<blockquote lang="en">
<p>It comes down to this annoying, upsetting, stupid fact: the only way to build a great product is to use it every day, to stare at it, to hold it in your hands to feel its lumps. The data and customers will lie to you but the product never will. And <mark>most product orgs suck because they simply don’t use the products that they’re building;</mark> they ship incremental nothings without direction because they’re looking at spreadsheets all day long filled with junk data&nbsp;nothings.</p>
<p>See, I don’t know much about product stuff. I have no experience as a product manager, no experience running teams or building a company. Take everything I say here with an enormous silo of salt. But: I don’t care what the data shows me and I’m not sure I ever will. You can show me charts and spreadsheets all day long and I will not care. Tell me what your gut says instead after relentless experience of the product every day. This is the only way to see the world&nbsp;clearly.</p>
<p><cite><em><a data-link-domain="robinrendle.com" href="https://robinrendle.com/notes/vibe-driven-development/" hreflang="en"
            title="Consultation de l’article (anglais)">Vibe Driven Development</a>
            <a href="/david/cache/2024/2b6f113e6c47bf6d2b282fa0a48b48a6/" hreflang="en"
                data-tippy data-description="The website of Robin Rendle, a designer and writer from the UK."
                data-source="https://robinrendle.com/notes/vibe-driven-development/"
                data-date="2024-04-18"
                data-favicon="https://robinrendle.com/images/favicons3/favicon-32x32.png"
                data-domain="robinrendle.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 voulais en parler depuis bien longtemps. C’est l’une des raisons pour lesquelles j’essaye d’être acteur des <a href="/david/2024/04/17/" title="Échelle">évènements</a> que je produis. Entre égoïsme et altruisme la frontière peut être fine dans ce&nbsp;domaine.</p>
<a href="#hr-156" title="Lien vers cette section de la page"><hr id="hr-156" /></a>

<blockquote lang="en">
<p>I said “delve” was overused by ChatGPT compared to the internet at large. But there’s one part of the internet where “delve” is a much more common word: the African web. In Nigeria, “delve” is much more frequently used in business English than it is in England or the US. So the workers training their systems provided examples of input and output that used the same language, <mark>eventually ending up with an AI system that writes slightly like an&nbsp;African.</mark></p>
<p><cite><em><a data-link-domain="theguardian.com" href="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt" hreflang="en"
            title="Consultation de l’article (anglais)">TechScape: How cheap, outsourced labour in Africa is shaping AI English</a>
            <a href="/david/cache/2024/3a28346225751986cc06aaadb8c8bb90/" hreflang="en"
                data-tippy data-description="Workers in Africa have been exploited first by being paid a pittance to help make chatbots, then by having their own words become AI-ese. Plus, new AI gadgets are coming for your smartphones"
                data-source="https://www.theguardian.com/technology/2024/apr/16/techscape-ai-gadgest-humane-ai-pin-chatgpt"
                data-date="2024-04-18"
                data-favicon="https://static.guim.co.uk/images/favicon-32x32.ico"
                data-domain="theguardian.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>On ne sait plus qui donne la leçon à qui dans ces jeux d’apprentissages. La langue ne ment pas. J’attends qu’Olivier Ertzscheid en fasse un billet&nbsp;🍿.</p>
<p><em>Via <a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Apr/18/delve/" hreflang="en"
            title="Consultation de l’article (anglais)">Simon Willison</a>
            <a href="/david/cache/2024/1137631455ddd7b2acdd1f4071756ba6/" hreflang="en"
                data-tippy data-description="The word  delve  has been getting a lot of attention recently as an example of something that might be an indicator of ChatGPT generated content. One example: articles on medical …"
                data-source="https://simonwillison.net/2024/Apr/18/delve/"
                data-date="2024-04-18"
                data-favicon="https://simonwillison.net/favicon.ico"
                data-domain="simonwillison.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></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/introspection/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#introspection</a>
        
          <a href="/david/2024/technique/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#technique</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/04/17/"
           title="Publication précédente : Échelle">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/04/20/"
            title="Publication suivante : Jour 1">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>