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>
    Étiquette #décision
  — 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="Publications relatives au tag #décision">
  <!-- 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">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#décision</h1>
      <p>Publications relatives à cette étiquette</p>
    </hgroup>
  </header>
  <nav>
    <p>
      <a href="/david/" title="Aller à l’accueil">
        Accueil</a>
      •
      <a rel="tags"
        href="/david/2024/#tags"
        title="Liste de toutes les étiquettes">
        Étiquettes</a>
      •
      <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/02/22/" title="Lien permanent vers cet article">Responsabilité</a> <time datetime="2024-02-22">22 février 2024</time>
    </h2>
    

<blockquote>
<p>Il n’y a pas vraiment de conclusion à tout ça. Nous avons été témoins, par le petit bout de la lorgnette, du tout début de cette histoire&#8239;; nous avons imaginé un instant <mark>avoir l’opportunité, ou le devoir,</mark> d’y faire quelque chose. Finalement, nous n’avons jamais vraiment donné notre&nbsp;avis.&nbsp;🤷</p>
<p><cite><em><a data-link-domain="codeursenliberte.fr" href="https://www.codeursenliberte.fr/blog/tous_anti_covid/" hreflang="fr"
            title="Consultation de l’article">TousAntiCovid&nbsp;: vu depuis Codeureuses en Liberté</a>
            <a href="/david/cache/2024/ddc3ee3603be2702cef745c180b87776/" hreflang="fr"
                data-tippy data-description="TousAntiCovid a refait récemment l’actualité sur les montants de l’hébergement et les modalités d’attribution du marché."
                data-source="https://www.codeursenliberte.fr/blog/tous_anti_covid/"
                data-date="2024-02-22"
                data-favicon="https://www.codeursenliberte.fr/favicon.png"
                data-domain="codeursenliberte.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>Je me souviens vaguement de certaines discussions à ce sujet. D’un côté l’orgueil de penser que l’on pouvait faire mieux, de l’autre la culpabilité de pouvoir être associé à un tel projet. Et au milieu, une épidémie et le sentiment de pouvoir faire des choses avec nos compétences et notre position au sein de l’État français. Un mois plus tard, je m’embarquais dans <a href="/david/2020/05/26/">une autre aventure</a>, plus proche de mon&nbsp;style.</p>
<p>Deux années, 23&nbsp;millions de visiteur·euses uniques et 60&nbsp;millions de pages vues plus tard, j’ai l’impression d’avoir été utile à mon échelle. Merci à la D<a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">R</a><a data-link-domain="ut7.fr" href="https://www.ut7.fr/">R</a>u<a data-link-domain="maiwann.net" href="https://www.maiwann.net/">M</a><a data-link-domain="fr.linkedin.com" href="https://fr.linkedin.com/in/m%C3%A9lodiedahi">M</a> team pour cette&nbsp;période.</p>
<a href="#hr-84" title="Lien vers cette section de la page"><hr id="hr-84" /></a>

<blockquote lang="en">
<p>A custom element implementation of the Stack is provided for&nbsp;download.</p>
<p><cite><em><a data-link-domain="every-layout.dev" href="https://every-layout.dev/layouts/stack/#the-component" hreflang="en"
            title="Consultation de l’article (anglais)">The Stack: Every Layout</a>
            <a href="/david/cache/2024/6b2b8e2559a07b8d66dac842017b2619/" hreflang="en"
                data-tippy data-description="A composable CSS layout primitive."
                data-source="https://every-layout.dev/layouts/stack/#the-component"
                data-date="2024-02-22"
                data-favicon="https://every-layout.dev/images/favicon.png"
                data-domain="every-layout.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></em></cite></p>
</blockquote>
<p>Utiliser des <em>Web Components</em> pour appliquer un style, je n’y avais pas encore&nbsp;songé.</p>
<a href="#hr-85" title="Lien vers cette section de la page"><hr id="hr-85" /></a>
<p>Hier soir, j’ai regardé <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/The_Deepest_Breath">The Deepest Breath</a>. J’ai mal dormi. D’autant que, plus tôt dans la journée, on m’avait transmis <a data-link-domain="youtube.com" href="https://www.youtube.com/watch?v=LFLl9q-bEgk">ce retour d’expérience</a>, flippant (et discutable) à plus d’un&nbsp;titre.</p>
<p>La récupération de ma cheville suit son cours, ça va être long, il manque du muscle. Je me sens suffisamment en confiance pour tenter une sortie hivernale en camping cette fin de semaine, on va voir ce que ça donne. Il va faire <q lang="fr_CA">frête</q> et ça laisse peu de place aux&nbsp;incapacités…</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/experience/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#expérience</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/16/" title="Lien permanent vers cet article">uMap 2</a> <time datetime="2024-02-16">16 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>But it’s deeper that that. Open source is <em>good for humanity</em>. It’s only slightly hyperbolic to say that <mark>open source is one of the most notable collective successes</mark> of humankind as a species! It’s one of the few places where essentially all of humanity works together on something that benefits everyone. A world without open source would be substantially worse than the world we live&nbsp;in.</p>
<p><cite><em><a data-link-domain="jacobian.org" href="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/" hreflang="en"
            title="Consultation de l’article (anglais)">Paying people to work on open source is good actually</a>
            <a href="/david/cache/2024/ad0648259b032d4d0e5a9e6220c3c71e/" hreflang="en"
                data-tippy data-description="If you have a problem with maintainers getting paid then you have a problem with me and I suggest you let that one marinate."
                data-source="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/"
                data-date="2024-02-17"
                data-favicon="https://jacobian.org/favicon.ico"
                data-domain="jacobian.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>J’ai déjà parlé <a href="/david/2024/01/18/" title="Open-source">d’open-source</a>, de <a href="/david/2024/01/31/" title="Mécénat">mécénat</a>, de <a href="/david/2024/02/09/" title="Version">versions</a>, de <a href="/david/2024/02/15/" title="Licence">licences</a>, mais comment se passe une <em>release</em> de produit&nbsp;open-source&#8239;?</p>
<p>On commence à avoir affiné et <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/release/">documenté le processus</a>, on a <a data-link-domain="github.com" href="https://github.com/umap-project/umap-deploy-osmfr">des scripts dédiés</a> pour arriver à cela lorsque le moment est venu et nous sommes pour l’instant 2&nbsp;à pouvoir faire cela de bout en bout avec <a data-link-domain="yohanboniface.me" href="https://yohanboniface.me/">Yohan</a>. C’est peu mais c’est aussi +100% par rapport à l’année&nbsp;dernière…</p>
<p>Nous n’étions pas très loin de repousser encore une fois la version&nbsp;2&nbsp;car il y avait un dernier changement majeur à faire passer. Tiraillés, nous avons repoussé cela à une version&nbsp;3&nbsp;quitte à ce qu’elle arrive prochainement. Franchir cette barrière psychologique était important pour la suite. Le faire en visio de bout en bout (comme une bonne partie de nos interactions sur le produit) était enthousiasmant. En bonus, c’était un vendredi&nbsp;après-midi.</p>
<p>Voilà donc <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/changelog/#200-2024-02-16">un <em>changelog</em></a> déjà bien chargé. Nous nous sommes rendu compte au cours du processus que le versionnement était davantage pertinent pour les mainteneur·euses que pour les utilisateur·ices. Les fonctionnalités sont ajoutées au compte-goutte mais il faut prévenir les personnes qui vont mettre à jour l’outil de ce qui pourrait coincer lors du déploiement. Certains changements ont été volontaires (modules ESM =&gt; support navigateurs), d’autres contraints (fin du support de l’authification OpenStreetMap OAuth1), d’autres subis (Django&nbsp;5 =&gt; Python 3.10). Un beau&nbsp;mélange.</p>
<p>Je ne vais rien annoncer pour une version&nbsp;3&nbsp;car ce serait ajouter une pression inutile et même si on a des intuitions tout est loin d’être priorisé. Dans mes motivations <em>personnelles</em>&nbsp;:</p>
<ul>
<li>aller vers une amélioration de&nbsp;l’accessibilité&#8239;;</li>
<li>voir les <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/tag/umap.html">explorations d’Alexis</a> prendre&nbsp;forme&#8239;;</li>
<li>clarifier les lieux de support / documentation en participant&nbsp;davantage.</li>
</ul>

<blockquote lang="en">
<p>We have to accept the world as it is – even if it’s not the world we want. This means we have to be okay with the idea that maintainers need to be paid. Far too often I see arguments like: “<mark>maintainers shouldn’t be paid by private companies because the government should be supporting them.</mark>” Sure, this sounds great – but <em>governments aren’t doing this!</em> So this argument reduces to “open source maintainers shouldn’t be paid”. I can’t get on board with&nbsp;that.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Étant actuellement payé par l’Agence nationale de la cohésion des territoires pour participer à de l’<em>open-source</em>, je ne peux qu’approuver cette partie de la citation et être heureux de me trouver là où je suis. Les exceptions existent grâce à une conjonction de volontés, de privilèges et de coups de&nbsp;bol.</p>
<a href="#hr-73" title="Lien vers cette section de la page"><hr id="hr-73" /></a>

<blockquote lang="en">
<p><a data-link-domain="github.com" href="https://github.com/astral-sh/uv">uv</a> represents a milestone in our pursuit of a “<a data-link-domain="blog.rust-lang.org" href="https://blog.rust-lang.org/2016/05/05/cargo-pillars.html#pillars-of-cargo">Cargo for Python</a>”: a comprehensive Python project and package manager that’s fast, reliable, and easy to&nbsp;use.</p>
<p><cite><em><a data-link-domain="astral.sh" href="https://astral.sh/blog/uv" hreflang="en"
            title="Consultation de l’article (anglais)">uv: Python packaging in Rust</a>
            <a href="/david/cache/2024/359df603dbf60e8476027b2eb26cb7ce/" hreflang="en"
                data-tippy data-description="uv is an extremely fast Python package installer and resolver, designed as a drop-in alternative to pip and pip-tools."
                data-source="https://astral.sh/blog/uv"
                data-date="2024-02-17"
                data-favicon="https://astral.sh/static/favicon-32x32.png"
                data-domain="astral.sh"
                ><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 futur de Python se dessine et j’en apprécie les&nbsp;esquisses.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/15/" title="Lien permanent vers cet article">Licence</a> <time datetime="2024-02-15">15 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>Title: WTFPL Submission: http://crynwr.com/cgi-bin/ezmlm-cgi?17:mss:634:200902:aglgcgbhmfcheffmdgon License: http://sam.zoy.org/wtfpl/ Comments: It’s no different from dedication to the public domain. Author has submitted license approval request — author is free to make public domain dedication. Although he agrees with the recommendation, Mr. Michlmayr notes that <mark>public domain doesn’t exist in Europe.</mark> Recommend: Reject</p>
<p><cite><em><a data-link-domain="opensource.org" href="https://opensource.org/meeting-minutes/minutes20090304/" hreflang="en"
            title="Consultation de l’article (anglais)">OSI Board Meeting Minutes, Wednesday, March 4, 2009</a>
            <a href="/david/cache/2024/90e6434dbda21f9d18ad8fa53c822b47/" hreflang="en"
                data-tippy data-description="Quorum reached and meeting called to order 08:10 am PST. Attendees Mr. Michael Tiemann, President Ms. Danese Cooper, Secretary and Treasurer Mr. Harshad Gune, Director Mr. Martin Michlmayr, Directo…"
                data-source="https://opensource.org/meeting-minutes/minutes20090304/"
                data-date="2024-02-17"
                data-favicon="https://i0.wp.com/opensource.org/wp-content/uploads/2023/01/cropped-cropped-OSI_Horizontal_Logo_0-e1674081292667.png?fit=32%2C32&ssl=1"
                data-domain="opensource.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>Nous sommes <a data-link-domain="github.com" href="https://github.com/umap-project/umap/pull/1605">passés</a> de la licence <a data-link-domain="wtfpl.net" href="http://www.wtfpl.net/">WTFPL</a> à <a data-link-domain="gnu.org" href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a> pour uMap à partir de la version&nbsp;2 (à venir). Notamment car elle n’était pas acceptable pour l’<a data-link-domain="opensource.org" href="https://opensource.org/">OSI</a> ce qui nous posait des problèmes pour obtenir des financements européen ou pour bénéficier des plans <em>open-source</em> de services comme <a data-link-domain="browserstack.com" href="https://www.browserstack.com/open-source">BrowserStack</a>.</p>
<p>Le seul service qui a accepté la licence WTFPL sans broncher est <a data-link-domain="sentry.io" href="https://sentry.io/for/open-source/">Sentry</a>, ceci en un temps&nbsp;record.</p>

<blockquote lang="en">
<p>Simply put, the AGPLv3 is effectively the GPLv3, but with an additional licensing term that ensures that users who interact <mark>over a network</mark> with modified versions of the program can receive the source code for that&nbsp;program.</p>
<p><cite><em><a data-link-domain="fsf.org" href="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3" hreflang="en"
            title="Consultation de l’article (anglais)">The fundamentals of the AGPLv3</a>
            <a href="/david/cache/2024/036789c955419215be9d88c6823b55aa/" hreflang="en"
                data-tippy data-description="The GNU Affero General Public License version 3 (AGPLv3) is the most protective of computer user freedom, yet it remains the most misunderstood of the GNU family of licenses."
                data-source="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3"
                data-date="2024-02-17"
                data-favicon="https://www.fsf.org/favicon.ico"
                data-domain="fsf.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<a href="#hr-72" title="Lien vers cette section de la page"><hr id="hr-72" /></a>

<blockquote>
<p>La prévalence des drogues chinoises, et synthétiques en général, sur le marché a eu des conséquences au Mexique voisin. Dans une vidéo de fin 2020, The Intercept montre que la baisse drastique de demande en héroïne au profit du fentanyl a des conséquences humaines considérables. «&nbsp;Les cultivateurs de pavot au Mexique doivent se résoudre à migrer pour travailler ou se tourner vers le crime organisé&nbsp;», raconte le média, partageant des témoignages de personnes précaires encore appauvries par la&nbsp;situation.</p>
<p><cite><em><a data-link-domain="basta.media" href="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer" hreflang="fr"
            title="Consultation de l’article">Crise des opioïdes&nbsp;: pourquoi il ne faut ni l’oublier ni l’ignorer</a>
            <a href="/david/cache/2024/1929f7183f694c7abeafeddb891fcf50/" hreflang="fr"
                data-tippy data-description="Aux États-Unis, le nombre de morts par overdose dépasse celui des décès sur la route. La crise des opioïdes, déclarée dans les années 2010, touche aussi de plein fouet le Canada. Et le phénomène dépasse les frontières nord-américaines."
                data-source="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer"
                data-date="2024-02-17"
                data-favicon="https://basta.media/squelettes/basta/favicon/favicon.svg?1634019699"
                data-domain="basta.media"
                ><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 n’avais pas encore pris conscience de tous les enjeux socio-économico-géopolitiques de ces nouvelles drogues. Il y a des guerres qui sont moins médiatisées que&nbsp;d’autres.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/09/" title="Lien permanent vers cet article">Version</a> <time datetime="2024-02-09">9 février 2024</time>
    </h2>
    
<p>Il y a cette appréhension à sortir une version&nbsp;2&nbsp;qui est bloquante sur pas mal de projets / produits / outils. Réduire ses ambitions quitte à planifier les versions 3&nbsp;et 4&nbsp;par la même occasion est un moyen de faire baisser la pression de ses propres attentes. Ce n’est plus <strong>l</strong>’évènement mais <em>un</em> évènement parmi les suivants qui vient s’intégrer dans une dynamique plus&nbsp;globale.</p>
<p>Il y a d’un côté l’<a href="/david/2024/01/19/#hr-38">effort pour les personnes qui vont l’utiliser</a> et de l’autre <a data-link-domain="yolover.org" href="https://yolover.org/" hreflang="en"
            title="Consultation de l’article (anglais)">la motivation</a>
            <a href="/david/cache/2024/959374400b4bb6d58c74116ffd08281b/" hreflang="en"
                data-tippy data-description="Realistic versioning for modern software."
                data-source="https://yolover.org/"
                data-date="2024-02-09"
                data-favicon="https://yolover.org/favicon.png"
                data-domain="yolover.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> pour les personnes qui vont développer et maintenir le&nbsp;produit.</p>
<p>Je caricature mais on est&nbsp;vendredi.</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/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/07/" title="Lien permanent vers cet article">Écureuil</a> <time datetime="2024-02-07">7 février 2024</time>
    </h2>
    
<p>De bon matin, en me brossant les dents, l’écureuil dans un micro-sommeil après une nuit fraîche. Je le regarde avec un peu d’envie, je referme la fenêtre délicatement. Une minute plus tard, alors qu’il commençait à piquer dangereusement du nez, le voilà déjà&nbsp;reparti.</p>
<figure>
    <a href="/static/david/2024/2024-02-05-ecureuil-soleil.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-05-ecureuil-soleil.jpg"
            width="3456" height="2304"
            srcset="/static/david/2024/2024-02-05-ecureuil-soleil.jpg 3456w, /static/david/2024/2024-02-05-ecureuil-soleil_660x440.jpg 660w, /static/david/2024/2024-02-05-ecureuil-soleil_990x660.jpg 990w, /static/david/2024/2024-02-05-ecureuil-soleil_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3456 / 2304))"
            loading="lazy"
            decoding="async"
            alt="Un écureuil endormi sur une branche.">
    </a>
    <figcaption>Un écureuil endormi sur une&nbsp;branche.</figcaption>
</figure>
<a href="#hr-69" title="Lien vers cette section de la page"><hr id="hr-69" /></a>
<p>Une motivation importante de l’année est de réussir à économiser. C’est une chose que je n’ai jamais vraiment envisagé de faire jusqu’à présent. Si j’ai bien compris le principe actuel, chaque dollar accumulé est un dollar que je n’aurai pas à payer une <em>seconde</em> fois à la&nbsp;banque.</p>
<p>C’est stupide. Mais ça motive. Mais c’est&nbsp;stupide.</p>
<a href="#hr-70" title="Lien vers cette section de la page"><hr id="hr-70" /></a>
<figure>
    <a href="/static/david/2024/2024-02-05-ecureuil-superhero.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-05-ecureuil-superhero.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-05-ecureuil-superhero.jpg 3840w, /static/david/2024/2024-02-05-ecureuil-superhero_660x440.jpg 660w, /static/david/2024/2024-02-05-ecureuil-superhero_990x660.jpg 990w, /static/david/2024/2024-02-05-ecureuil-superhero_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Un écureuil en posture de super-héros·ïne.">
    </a>
    <figcaption>Un écureuil en posture de super-héros·ïne. (Iel a juste froid aux&nbsp;pattes.)</figcaption>
</figure>

    
      <nav>
        <p>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/foret/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#forêt</a>
          
            <a href="/david/2024/photographie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#photographie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/18/" title="Lien permanent vers cet article">Open-source</a> <time datetime="2024-01-18">18 janvier 2024</time>
    </h2>
    
<p>Deux phrases du&nbsp;jour&nbsp;:</p>
<ol>
<li><q lang="en">Open Source is the Right to Repair, for software.</q>, <a data-link-domain="macaw.social" href="https://macaw.social/@andypiper/111774169944729337">sur&nbsp;masto</a></li>
<li><q lang="fr">uMap est-il un produit ou un commun&#8239;?</q>, en réunion&nbsp;interne</li>
</ol>
<p>Faute de temps, le développement est laissé comme exercice aux&nbsp;lecteur·ices.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</a>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/opensource/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opensource</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/05/" title="Lien permanent vers cet article">Vocabulaire</a> <time datetime="2024-01-05">5 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Les tensions et processer les tensions. Essayez de remplacer les termes «&nbsp;problèmes&nbsp;» et «&nbsp;solutions&nbsp;» par «&nbsp;tensions&nbsp;» et «&nbsp;processer&nbsp;». Les êtres humains semblent être enclins de manière innée à attendre la dernière minute pour gérer ce qu’ils perçoivent comme des problèmes. Par conséquent, l’emploi de ce langage «&nbsp;négatif&nbsp;» dans le monde de l’entreprise peut donner naissance à une culture de l’évitement ou de l’inquiétude inutile. Le terme «&nbsp;tension&nbsp;», comme employé en <em>Holacracy</em>, est neutre et signifie simplement <em>la perception d’un écart entre la réalité et ce qu’elle pourrait&nbsp;être.</em></p>
<p>Une tension n’est pas un «&nbsp;problème&nbsp;» et n’induit pas nécessairement une «&nbsp;solution&nbsp;». Elle met en lumière une occasion de rapprocher la situation actuelle de ce qu’elle pourrait être — ce qui sous-entend généralement une amélioration. <mark>Holacracy emploie le terme «&nbsp;processer&nbsp;» pour décrire ce phénomène, qui évite la notion de résultat fixe et définitif et illustre un cheminement fait d’une adaptation et de progrès&nbsp;permanents.</mark></p>
<p>Des propositions plutôt que des problèmes. Le changement qui va de pair avec celui que je viens de décrire est de prendre l’habitude de faire des «&nbsp;propositions&nbsp;» au lieu de se contenter de se lamenter. Lorsque vous ressentez une tension, demandez-vous&nbsp;: «&nbsp;Qu’est-ce qui pourrait améliorer la situation&#8239;? Que pourrais-je proposer&#8239;?&nbsp;» Encouragez votre équipe à en faire de même. La proposition ne se doit pas d’être une «&nbsp;solution&nbsp;» parfaite — c’est un moyen d’entamer la conversation de manière proactive et créative, et non&nbsp;négative.</p>
<p><cite><em>La révolution Holacracy</em>, Brian J. Robertson, chapitre «&nbsp;Changez votre langage, changez votre&nbsp;culture&nbsp;»</cite></p>
</blockquote>
<p>On pourrait y voir de la <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Novlangue">novlangue</a> de <em>manager</em> mais il y a cette idée derrière qu’on ne tente pas de résoudre un problème mais de libérer —&nbsp;peut-être temporairement&nbsp;— une tension qui me plait bien. Ce que l’on aborde alors ensemble ce sont les actions qui nous semblent aller vers <em>un</em> mieux parmi l’arbre des possibles. L’enjeu d’un collectif qui se respecte est de trouver la légitimité individuelle nécessaire pour continuer à explorer des pistes ne faisant pas forcément l’unanimité lors d’une première itération. <em>Holacratie</em> semble mettre des règles explicites sur ces&nbsp;pratiques.</p>
<p>J’apprécie particulièrement le couple proposition / objections. Difficile de sortir d’une forme de confort une fois celui-ci établi. Peut-être que le <em>refus de confort</em> pourrait être une notion au même titre que le <a href="/david/2020/10/08/"><em>refus de parvenir</em></a>&#8239;? Accepter le risque de l’inconnu pour ne pas se perdre dans un hier déjà expérimenté, déjà&nbsp;dé·fini.</p>

<blockquote>
<p>Des objections&#8239;? La prochaine fois que vous recherchez l’adhésion de votre équipe à une décision, modifiez votre mode de communication. Ne demandez pas&nbsp;: «&nbsp;Est-ce que tout le monde est d’accord&#8239;?&nbsp;» ou «&nbsp;Ma proposition plaît-elle à tout le monde&#8239;?&nbsp;». Ces questions débouchent sur une discussion longue et pénible. Demandez-leur plutôt&nbsp;: <mark>«&nbsp;Y a-t-il des objections à l’adoption de cette proposition&#8239;?&nbsp;»</mark> Et définissez une objection comme «&nbsp;une raison pour laquelle l’adoption de cette proposition causerait du tort ou nous ferait&nbsp;régresser&#8239;?&nbsp;»</p>
<p>Voici une autre formulation&nbsp;: «&nbsp;Est-ce que quelqu’un considère la mise en œuvre de cette proposition comme pas assez sûre, sachant que nous pourrons revoir cette décision si elle ne porte pas ses fruits&#8239;?&nbsp;» Ce simple changement de langage peut vous faire gagner beaucoup de temps et alléger considérablement le processus&nbsp;décisionnel.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<a href="#hr-7" title="Lien vers cette section de la page"><hr id="hr-7" /></a>
<p><a data-link-domain="piaille.fr" href="https://piaille.fr/@nicosomb/111696724396676161">Nicolas L.</a> et <a data-link-domain="mamot.fr" href="https://mamot.fr/@nhoizey/111697128068526484">Nicolas H.</a> me font des retours sur le nouveau design en passant par Mastodon. Les choix respectifs de chacun·e de rendre les réponses publiques ou non enlèvent une partie des échanges mais c’est vraiment chouette d’entamer un processus d’amélioration (de libération de tensions&#8239;?) en commun à ce&nbsp;sujet.</p>
<p>J’essaye de rendre l’épaisseur du soulignement des liens dynamique, lié à la fluidité de la taille du texte&nbsp;🧑‍🔬, peut-être que je devrais rendre la taille des bordures dynamiques aussi&#8239;? Parfois la contrainte technique peut devenir une contrainte éditoriale acceptable. <strong>Cet espace est suffisamment sur-pensé comme&nbsp;ça.</strong></p>
<p>Je commence un thème sombre qui réagit à celui du système d’exploitation par défaut. Surtout pour un besoin personnel pour l’instant, mes yeux en ont besoin. Cela me pousse à ajouter des variables CSS pour les&nbsp;couleurs.</p>
<p>Plus tard, <a data-link-domain="mamot.fr" href="https://mamot.fr/@emmanuelc/111700432836997597">Emmanuel</a> m’enlève une épine du pied sur une formule de grille que je ne comprenais pas totalement. J’apprends des choses au passage. Le copier-coller&#8239;? Oui, mais il faudra toujours finir par le&nbsp;décortiquer.</p>
<p>La CSS progresse, 426&nbsp;lignes ce soir… et un seul <code>breakpoint</code> défini pour forcer une variable maximale sur les grands écrans. J’aime bien cette&nbsp;idée.</p>
<a href="#hr-8" title="Lien vers cette section de la page"><hr id="hr-8" /></a>
<p>Randonnée de 8&#8239;km en famille aujourd’hui, parfois je ne me rends plus trop compte des distances —&nbsp;qui plus est sur un sol difficile. Je voulais surtout savoir jusqu’à quels refuges je pouvais envisager des aventures avec l’enfant dans des conditions hivernales. Chaque année, de nouveaux horizons&nbsp;s’ouvrent.</p>
<a href="#hr-9" title="Lien vers cette section de la page"><hr id="hr-9" /></a>

<blockquote>
<p>— Comment appelle-t-on un groupe de faisans&#8239;? demande Anna.<br />
— Un bouquet, répond Isobel. Un groupe d’étourneaux&#8239;?<br />
— Un murmure.<br />
— De flamants&#8239;?<br />
— Une flamboyance de flamants. De hiboux&#8239;?<br />
Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place&nbsp;:<br />
— On dit un parlement de hiboux.<br />
— Très bien. Plus difficile alors. Comment appelle-t-on un groupe d’alouettes&#8239;?<br />
— Une exaltation.<br />
— Et de papillons&#8239;?<br />
— Un kaléidoscope de&nbsp;papillons.</p>
<p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel Darleux citant Dominique Fortier sur Emily Dickinson, <em>Les Villes de&nbsp;papiers</em></cite></p>
</blockquote>
<p>💚 Quand l’ornithologie fait de la&nbsp;poésie.</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/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/equipe/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#équipe</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/04/" title="Lien permanent vers cet article">Repos</a> <time datetime="2024-01-04">4 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Je m’engouffre, sans trop réfléchir et avant qu’il ne file, dans cet élan d’écriture que j’espérais tout en refusant de m’en faire une contrainte. L’Inde m’offre l’imprévu, la nouveauté, la stimulation sans doute, que je n’avais plus en France pour pouvoir écrire autre chose que de la fiction. Ce pays est un roman en soi — je peux revenir avec désir à cette réalité-là. <mark>J’en suis aussi excitée que prudente,</mark> je n’ai aucune idée de ce que cela va donner ni si ça aura le moindre intérêt. Mais je sais déjà que je n’évoquerai ni les Rafale, ni le nucléaire, ni Modi, ces tue-l’amour&nbsp;absolus.</p>
<p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
</blockquote>
<p>Dans un chalet pour quelques jours. Des randonnées à trois générations. Toujours ces questionnements autour de la propriété. Concilier tous les besoins, accepter de changer de vie, ne pas savoir si on serait finalement entourés d’une culture qui ne nous correspond pas (et qui ne nous attire pas non plus). Trouver le bon&nbsp;tempo.</p>
<a href="#hr-6" title="Lien vers cette section de la page"><hr id="hr-6" /></a>
<p>Je me demande s’il serait pertinent <a data-link-domain="blog.stephaniestimac.com" href="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/" hreflang="en"
            title="Consultation de l’article (anglais)">d’utiliser <code>text-wrap</code></a>
            <a href="/david/cache/2024/b31ba18e3de1fc479b79f1885043026a/" hreflang="en"
                data-tippy data-description="A ruthless look at when to use these two CSS text-wrap values."
                data-source="https://blog.stephaniestimac.com/posts/2023/10/css-text-wrap/"
                data-date="2024-01-07"
                data-favicon="https://stephaniestimac.com/imgs/favicon.ico"
                data-domain="blog.stephaniestimac.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> sachant que mes titres ne font qu’un seul mot et que je m’occupe déjà des veuves / orphelines typographiques avec <a data-link-domain="git.larlet.fr" href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/typography.py">un script Python</a> que l’on a fait avec <a data-link-domain="ronan.amicel.net" href="https://ronan.amicel.net/">Ronan</a> à l’époque <a href="/david/2020/05/26/">de MesConseilsCovid / Covidoudou</a>.</p>
<p>Je tente de rendre les citations explicites car on m’a déjà fait le retour de ne pas tout de suite comprendre une publication qui commence par une citation&nbsp;: <q>Ah je croyais que c’était de toi&#8239;!</q>.</p>
<pre><code>blockquote::before {
    content: &quot;citation&quot;;
    transform: rotate(-90deg);
    position: absolute;
    margin-left: -1rem;
    margin-top: 3.5rem;
}
</code></pre>
<p>Au passage, autant faire de même pour le code. Des couleurs, de la vie&#8239;! De&nbsp;l’envie.</p>
<p>Note&nbsp;: être développeur d’un produit <em>open-source</em> populaire c’est un boulot à plein temps, pas de vacances pour les notifications /&nbsp;sollicitations.</p>

    
      <nav>
        <p>
          
            <a href="/david/2024/decision/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#décision</a>
          
            <a href="/david/2024/parvenir/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#parvenir</a>
          
            <a href="/david/2024/propriete/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#propriété</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</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>
    
  </body>
</html>