davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
							<!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>
    Sérendipité
  — 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="Discovering things via links is way more fun than most algorithmically-driven discovery — in my humble opinion.">
  <!-- 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>Sérendipité</h1>
      <p>Le <time datetime="2024-03-13">13 mars 2024</time></p>
    </hgroup>
  </header>
  <nav>
    <p>
      
        <a rel="prev"
           href="/david/2024/03/12/"
           title="Publication précédente : Surligner">← 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/03/14/"
            title="Publication suivante : Montre 2">Suivant →</a>
      
    </p>
  </nav>
  

<blockquote lang="en">
<p>Discovering things via links is way more fun than most algorithmically-driven discovery — in my humble&nbsp;opinion.</p>
<p>As an analogy, it’s kind of like going on vacation to a new place and staying/living amongst the locals vs. staying at a manicured 5-star hotel that gives you no reason to leave. <mark>Can you really say you visited the location if you never left the&nbsp;hotel?</mark></p>
<p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/following-links/" hreflang="en"
            title="Consultation de l’article (anglais)">Following Links - Jim Nielsen’s Blog</a>
            <a href="/david/cache/2024/c26881e908632b460cfd93fe61cc0466/" hreflang="en"
                data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
                data-source="https://blog.jim-nielsen.com/2024/following-links/"
                data-date="2024-03-12"
                data-favicon="https://blog.jim-nielsen.com/favicon.ico"
                data-domain="blog.jim-nielsen.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Je suis toujours étonné qu’il n’y ait pas des navigateurs qui affichent la toile de nos navigations de manière plus ou moins artistiques. On pourrait avoir des topologies de navigations, potentiellement quotidiennes, des points de comparaison avec d’autres personnes, une représentation de la curiosité, de l’enfermement dans des silos, etc.</p>

<blockquote lang="en">
<p>A surprising number of other features can be expressed in terms of&nbsp;links.</p>
<p><cite><em><a data-link-domain="subconscious.substack.com" href="https://subconscious.substack.com/p/all-you-need-is-links" hreflang="en"
            title="Consultation de l’article (anglais)">All you need is links</a>
            <a href="/david/cache/2024/a801772c901c3e5cfad33f637d00151e/" hreflang="en"
                data-tippy data-description="Before reaching for features, my goal is to explore, to the fullest extent, the creative potential of plain old links."
                data-source="https://subconscious.substack.com/p/all-you-need-is-links"
                data-date="2024-03-12"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2F4d01c24b-d99d-497e-9e60-1a2427581cad%2Ffavicon-16x16.png"
                data-domain="subconscious.substack.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-112" title="Lien vers cette section de la page"><hr id="hr-112" /></a>

<blockquote lang="en">
<p><code>printf '\e]8;;http://example.com\e\\This is a link\e]8;;\e\\\n'</code></p>
<p><cite><em><a data-link-domain="notes.billmill.org" href="https://notes.billmill.org/programming/bash/Hyperlink_escape_codes.html" hreflang="en"
            title="Consultation de l’article (anglais)">Hyperlink escape codes</a>
            <a href="/david/cache/2024/f68e9507784b5baf1584085908d60f58/" hreflang="en"
                data-tippy data-description="To print out a clickable hyperlink in a terminal"
                data-source="https://notes.billmill.org/programming/bash/Hyperlink_escape_codes.html"
                data-date="2024-03-13"
                data-favicon="https://notes.billmill.org/favicon.ico"
                data-domain="notes.billmill.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Qui me fait découvre <a data-link-domain="github.com" href="https://github.com/nedbat/watchgha">watchgha</a>, bien pratique pour avoir un accès rapide aux résultats de l’intégration&nbsp;continue.</p>
<figure>
    <a href="/static/david/2024/2024-03-13-watchgha.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-13-watchgha.png"
            width="2422" height="192"
            srcset="/static/david/2024/2024-03-13-watchgha.png 2422w, /static/david/2024/2024-03-13-watchgha.png 660w, /static/david/2024/2024-03-13-watchgha.png 990w, /static/david/2024/2024-03-13-watchgha.png 1320w"
            sizes="min(100vw, calc(100vh * 2422 / 192))"
            loading="lazy"
            decoding="async"
            alt="Capture d’écran du résultat de la commande git runs avec l’alias git qui pointe vers watchgha.">
    </a>
    <figcaption>Ça passe 🎉 (je vais essayer de faire une démo d’oEmbed par ici à un&nbsp;moment).</figcaption>
</figure>
<a href="#hr-113" title="Lien vers cette section de la page"><hr id="hr-113" /></a>

<blockquote>
<p>Le constat est simple&nbsp;: je trouve que le Web ne va pas fort en ce moment, et je voulais à ma petite échelle montrer un peu&nbsp;l’exemple.</p>
<p><cite><em><a data-link-domain="vincent-valentin.name" href="https://vincent-valentin.name/articles/motivation-s" hreflang="fr"
            title="Consultation de l’article">Motivation(s) chez Vincent Valentin.</a>
            <a href="/david/cache/2024/c6e0fe933581c74380fa8eaa7f229353/" hreflang="fr"
                data-tippy data-description="Site personnel de Vincent Valentin, habitant à Nantes, quarante-quatre ans et intégrateur web depuis plus de quinze ans."
                data-source="https://vincent-valentin.name/articles/motivation-s"
                data-date="2024-03-13"
                data-favicon="https://vincent-valentin.name/favicon-32x32.png"
                data-domain="vincent-valentin.name"
                ><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>Très chouettes publications cette dernière semaine en tout cas&nbsp;&lt;3.</p>
<a href="#hr-114" title="Lien vers cette section de la page"><hr id="hr-114" /></a>
<p>Rétropédalage sur <a href="/david/2024/03/12/" title="Surligner">le surlignage</a>. Beaucoup trop de retours qui trouvent cela davantage distrayant qu’utile. Pour l’instant, j’ai gardé la logique mais sans animation. Je me demande si je vais en faire un <em>opt-in</em> à un&nbsp;moment.</p>
<a href="#hr-115" title="Lien vers cette section de la page"><hr id="hr-115" /></a>

<blockquote>
<p>Puisque la demi-mesure ne fait pas partie de mon vocabulaire, j’ai tenu à travailler au plus proche des techniques médiévales. <mark>J’ai ainsi appris à encrer à la plume, dorer à la feuille d’or pur, peindre aux pigments en poudre et relier au cuir de chèvre.</mark> Je m’y suis dévouée corps et âme, dédiant le moindre de mon temps libre à la concrétisation de ce projet qui devait se mener dans le plus grand secret. Je m’attelais à l’ouvrage à la moindre opportunité, me levant parfois à l’aube pour grappiller une heure de calligraphie avant d’aller bosser ou prolongeant des soirées jusqu’au petit matin lorsque K travaillait de&nbsp;nuit.</p>
<p>Au total j’ai passé plus de 230&nbsp;heures sur ce&nbsp;projet</p>
<p><cite><em><a data-link-domain="hypothermia.fr" href="https://www.hypothermia.fr/2024/03/chiroto-t-datoca/" hreflang="fr"
            title="Consultation de l’article">Chiroto T. Datoca</a>
            <a href="/david/cache/2024/f5294ac20ea593cce56caf2379813a4a/" hreflang="fr"
                data-tippy data-description="Il y a quinze ans, j'ai entamé un projet de calligraphie que je n'ai jamais terminé, un cadeau que je n'ai jamais offert."
                data-source="https://www.hypothermia.fr/2024/03/chiroto-t-datoca/"
                data-date="2024-03-13"
                data-favicon="https://www.hypothermia.fr/wp-content/uploads/fbrfg/favicon-32x32.png"
                data-domain="hypothermia.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>Ce moment où tu te rends compte que tu n’es pas perfectionniste en fait 🤯. Chapeau bas&nbsp;l’artiste.</p>
<a href="#hr-116" title="Lien vers cette section de la page"><hr id="hr-116" /></a>

<blockquote lang="en">
<p>Rust-like error handling in Python, with type-safety in&nbsp;mind.</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/alexandermalyga/poltergeist">poltergeist</a></em></cite></p>
</blockquote>
<p>J’ai très souvent retrouvé le besoin de ce <em>pattern</em> dans mes&nbsp;projets.</p>
<a href="#hr-117" title="Lien vers cette section de la page"><hr id="hr-117" /></a>
<p>Sortie de la <a data-link-domain="pypi.org" href="https://pypi.org/project/pressoir-cli/2.0.0/">version 2.0&nbsp;de pressoir-cli</a> (oui, <a href="/david/2024/02/16/" title="uMap 2">c’est ma période</a>). L’une des prochaines étapes sera de générer sa propre documentation en l’utilisant. Ça peut paraitre stupide mais c’est trop <em>meta</em> pour ne pas le&nbsp;faire&nbsp;😇.</p>
<a href="#hr-118" title="Lien vers cette section de la page"><hr id="hr-118" /></a>

<blockquote>
<p>Nginx de part sa robustesse, sa structure minimaliste et son fonctionnement événementiel asynchrone est un serveur web plébiscité pour ses performances. Mais ce n’est pas parce qu’on a une Porsche qu’il ne faut pas tenter de la rendre encore plus&nbsp;puissante&#8239;!</p>
<p><cite><em><a data-link-domain="buzut.net" href="https://buzut.net/optimiser-nginx/" hreflang="fr"
            title="Consultation de l’article">Optimisez Nginx pour de meilleurs performances</a>
            <a href="/david/cache/2024/b33059055c307477e43390a51f9a104a/" hreflang="fr"
                data-tippy data-description="Nginx est réputé pour sa rapidité, mais quand votre serveur fait face à un trafic énorme, il est possible d'en tirer encore plus. Voyons comment !"
                data-source="https://buzut.net/optimiser-nginx/"
                data-date="2024-03-13"
                data-favicon="https://buzut.net/img/favicon.png"
                data-domain="buzut.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>Pour lecture&nbsp;ultérieure.</p>
<a href="#hr-119" title="Lien vers cette section de la page"><hr id="hr-119" /></a>

<blockquote>
<p><code>font-size: calc(1rem + 0.25vw);</code></p>
<p><cite><em><a data-link-domain="jameshfisher.com" href="https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/" hreflang="en"
            title="Consultation de l’article (anglais)">A formula for responsive font-size</a>
            <a href="/david/cache/2024/08b2b2735f74ebf856d8a850cc9e41cc/" hreflang="en"
                data-tippy data-description="This CSS is now part of most websites I make:"
                data-source="https://jameshfisher.com/2024/03/12/a-formula-for-responsive-font-size/"
                data-date="2024-03-13"
                data-favicon="https://jameshfisher.com/assets/jim_128.png"
                data-domain="jameshfisher.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>Moins poussé que le <a data-link-domain="utopia.fyi" href="https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&amp;s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l&amp;g=s,l,xl,12">Fluid type scale calculator</a> mais dans un contexte plus minimaliste / simple ça fait déjà le&nbsp;taf.</p>
<a href="#hr-120" title="Lien vers cette section de la page"><hr id="hr-120" /></a>

<blockquote lang="en">
<p>To enable such progress, <strong>the Web Consortium too has evolved, always taking a people-first approach:</strong> the Web must continue to serve humanity. The first such inflection point was the creation of the patent policy in 2003&nbsp;which assures that specifications can be implemented on a Royalty-Free basis and used at no cost, thus boosting adoption and usage. Another is the creation in 2011&nbsp;of W3C Community and Business Groups which enable everyone –not just W3C Members– to participate in the development of the Web or its technologies. Our most recent inflection point was <mark>re-launching the Consortium in 2023&nbsp;as a public-interest non-profit organization</mark> to work for the good of the&nbsp;public.</p>
<p><cite><em><a data-link-domain="w3.org" href="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/" hreflang="en"
            title="Consultation de l’article (anglais)">From a humble beginning 35&nbsp;years ago, the Web is now central to the daily lives of billions</a>
            <a href="/david/cache/2024/c684ecb41e8e4ea04c6dac1e1d87f776/" hreflang="en"
                data-tippy data-description="In this blog post, W3C CEO Seth Dobbs depicts how from a humble beginning 35 years ago, the Web is now central to the daily lives of billions of people."
                data-source="https://www.w3.org/blog/2024/from-a-humble-beginning-35-years-ago-the-web-is-now-central-to-the-daily-lives-of-billions/"
                data-date="2024-03-13"
                data-favicon="https://www.w3.org/favicon.ico"
                data-domain="w3.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>35&nbsp;ans de liens. Merci Tim <em>et al.</em> d’avoir permis&nbsp;cela.</p>

  
    <nav>
      <p>
        
          <a href="/david/2024/liens/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#liens</a>
        
          <a href="/david/2024/partage/"
             title="Liste de tous les articles 2024 associés à cette étiquette"
             rel="tag">#partage</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/03/12/"
           title="Publication précédente : Surligner">← Précédent</a> •
      
      <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
      
        • <a rel="next"
            href="/david/2024/03/14/"
            title="Publication suivante : Montre 2">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>