davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008
							<!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 #commun
  — 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 #commun">
  <!-- 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>#commun</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/03/07/" title="Lien permanent vers cet article">Sondages</a> <time datetime="2024-03-07">7 mars 2024</time>
    </h2>
    

<blockquote>
<p><mark>Une faible majorité</mark> des votants estime qu’il faut mentionner dans le résumé introductif le nom pré-transition d’une personne transgenre qui a acquis sous cette ancienne identité une notoriété suffisante pour remplir les critères&nbsp;d’admissibilité.</p>
<p>Dans leurs verbatims, les partisans de la mention du morinom insistent sur le caractère encyclopédique de l’information (62), puisque les sujets concernés ont acquis la notoriété sous leur ancien nom (50) et qu’elle s’appuie sur des sources secondaires publiques (31). Il convient selon eux d’indiquer de façon claire et accessible (31), sans réécriture de l’histoire (22), cette information utile au lecteur (15). Ils estiment que les biographies des personnes transgenres ne doivent pas être traitées différemment des autres (14) et rappellent que sur Wikipédia le sujet d’une biographie n’a pas de privilège éditorial sur son contenu (8). Si à leur sens l’information doit figurer dans l’article, il est en revanche inopportun de la répéter&nbsp;(24).</p>
<p>Les opposants arguent quant à eux que la mention du morinom est nuisible aux personnes concernées (83) ou constitue un manque de respect pour le sujet de la biographie (40). Ils considèrent qu’un nom obsolète ne peut pas être encyclopédique (37), qu’il s’agit d’une information privée (38), inutile (36), dont la mention est transphobe (17). L’avis d’une personne transgenre sujet d’une biographie doit selon eux être respecté&nbsp;(29).</p>
<p><cite><em><a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Sondage/Mention_du_nom_de_naissance_pour_les_personnes_trans/R%C3%A9sultats">Wikipédia:Sondage/Mention du nom de naissance pour les personnes&nbsp;trans/Résultats</a></em></cite></p>
</blockquote>
<p>54% des 357&nbsp;avis décomptés. Tristesse <a href="/david/2024/02/29/" title="Wikipédia">anticipée</a>.</p>
<p>Wikipedia est le seul service centralisé sur le Web qui ne souffre d’aucune concurrence. Alors les luttes sont internes, pour décrire le monde tel qu’il est perçu par une certaine population, que l’autre partie de la population prendra pour vérité. Il y a probablement un truc mâle·sain dans tout&nbsp;ça.</p>

<blockquote lang="en">
<p>Today, the French-speaking Wikipedia passed a decision to deadname trans people in their&nbsp;biographies.</p>
<p>Some will argue that this makes WP-FR transphobic, and there is certainly something to it: while Wikipedia is not a monolithic institution, and while I am critical of the phrase &quot;Wikipedian community&quot;, it is a fact that WP-FR is effectively controlled by people hostile or indifferent to&nbsp;inclusion.</p>
<p>But <mark>this decision is utterly un-Wikipedian,</mark> and therefore lacks any legitimity, for&nbsp;2&nbsp;reasons</p>
<p><em><a data-link-domain="bagarrosphere.fr" href="https://bagarrosphere.fr/@photos_floues/112047957955051151">Rama sur&nbsp;Mastodon</a></em></p>
</blockquote>
<a href="#hr-102" title="Lien vers cette section de la page"><hr id="hr-102" /></a>

<blockquote lang="en">
<p>CSS <code>:has()</code> is a powerful feature that opens a lot of possibilities that weren’t possible before. It literally gives us CSS superpowers! I recommend you start using it today and experiment with&nbsp;it.</p>
<p><cite><em><a data-link-domain="ishadeed.com" href="https://ishadeed.com/article/css-has-guide/" hreflang="en"
            title="Consultation de l’article (anglais)">CSS&nbsp;:has() Interactive Guide</a>
            <a href="/david/cache/2024/02eaae467a3a88479393c9fe026f655a/" hreflang="en"
                data-tippy data-description="Everything you need to know about CSS :has() selector."
                data-source="https://ishadeed.com/article/css-has-guide/"
                data-date="2024-03-07"
                data-favicon="https://ishadeed.com/assets/favicon-32x32.png"
                data-domain="ishadeed.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>Incroyable article d’Ahmad Shadeed complété par <a data-link-domain="piccalil.li" href="https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/" hreflang="en"
            title="Consultation de l’article (anglais)">d’autres cas pratiques</a>
            <a href="/david/cache/2024/529fce4c2b7c378f07aead94e62d3923/" hreflang="en"
                data-tippy data-description="I’ve created some low fidelity demos of :has() snippets that I’ve been using in real-world client projects."
                data-source="https://piccalil.li/blog/some-little-ways-im-using-css-has-in-the-real-world/"
                data-date="2024-03-07"
                data-favicon="https://piccalil.li/images/favicon-32x32.png"
                data-domain="piccalil.li"
                ><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> d’Andy Bell qui m’ont donné envie de jouer avec sur <a href="/david/">ma page d’accueil</a>. C’est subtil et je reviendrai dessus mais je trouve ça intéressant pour montrer le lien entre les articles de l’année et leurs étiquettes. Cela ne m’embête pas que ce ne soit pas accessible à des doigts, au clavier et/ou aux anciens navigateurs car c’est du bonus. En effet, c’est du Baseline2023™ <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">niveau support</a>.</p>
<p>Je me suis rendu compte en consultant les résultats de <a data-link-domain="social.lol" href="https://social.lol/@brandonwrites/112045044489173328">ce sondage</a> (92% des 363&nbsp;personnes ayant répondu vont consulter les archives d’un blog qu’elles découvrent) qu’il n’était pas évident de découvrir ce que je raconte par ici. Surtout avec des titres à un seul mot, aussi je tente des choses pour rendre plus explicite la toile qui est tissée quotidiennement. Depuis bientôt&nbsp;20&nbsp;ans.</p>
<a href="#hr-103" title="Lien vers cette section de la page"><hr id="hr-103" /></a>

<blockquote lang="en">
<p>A <strong>title drop</strong> is when a character in a movie says the title of the movie they’re in. Here’s a large-scale analysis of 73,921&nbsp;movies from the last 80&nbsp;years on how often, when and maybe even why that&nbsp;happens.</p>
<p><cite><em><a data-link-domain="titledrops.net" href="https://www.titledrops.net/">Full Of&nbsp;Themselves</a></em></cite></p>
</blockquote>
<p>Parfois tu tombes sur un site qui a demandé un effort non négligeable et tu te dis <del>à quoi bon</del> trop&nbsp;génial&#8239;!</p>

<blockquote>
<p>So who are the most excessive offenders in mentioning their titles over the course of the film? The overall star when it comes to fiction only came out last year: it’s Barbie by Greta Gerwig with an impressive 267&nbsp;title drops within its 1&nbsp;hour and 54&nbsp;minutes runtime, clocking in at a whopping 2.34&nbsp;BPM (Barbies Per&nbsp;Minute).</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Je comprends mieux mon&nbsp;endormissement.</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/deception/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#déception</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>
    
  
    <h2>
      <a href="/david/2024/02/29/" title="Lien permanent vers cet article">Wikipédia</a> <time datetime="2024-02-29">29 février 2024</time>
    </h2>
    

<blockquote>
<p>Petit récapitulatif pour moi-même de la controverse qui agite la version francophone de Wikipédia et ses communautés. Bien que j’aimerai écrire plus longuement sur le sujet, je n’ai pas la bande passante nocturne pour le faire encore moins diurne. <mark>Je travaille de façon ouverte en espérant que les esprits refroidis retrouveront un brin de lucidité.</mark> Wikipédia est un projet important, chacun y contribue à sa manière, j’essaie de poser quelques bases pour éventuellement développer plus en détails certains points à l’avenir. Une note de synthèse en quelques&nbsp;sortes.</p>
<p><cite><em><a data-link-domain="write.apreslanu.it" href="https://write.apreslanu.it/tk/wikipedia-ou-la-desillusion-de-lintelligence-collective" hreflang="fr"
            title="Consultation de l’article">Wikipédia ou la désillusion de l’intelligence collective</a>
            <a href="/david/cache/2024/71d5226ddc436248164884b12f15ed42/" hreflang="fr"
                data-tippy data-description="Petit récapitulatif pour moi-même de la controverse qui agite la version francophone de Wikipédia et ses communautés. Bien que j’aimerai ..."
                data-source="https://write.apreslanu.it/tk/wikipedia-ou-la-desillusion-de-lintelligence-collective"
                data-date="2024-03-01"
                data-favicon="https://write.apreslanu.it/favicon.ico"
                data-domain="write.apreslanu.it"
                ><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>Cela fait quelques jours que j’observe la situation en essayant de ne pas réagir à chaud. Je vois d’un côté des personnes qui souhaitent documenter des faits «&nbsp;historiques&nbsp;» sans en subir aucune conséquence et de l’autre des personnes qui ont bien souvent souffert et souffrent encore de cette histoire, sans compter les potentiels risques actuels et futurs&nbsp;encourus.</p>
<p>Ce résumé est sûrement caricatural <em>et</em> je peux passer outre mon besoin de savoir encyclopédique pour la sécurité physique et mentale d’autres&nbsp;personnes.</p>
<p>Une pensée pour les personnes concernées qui sont impliquées et contributrices régulières, ça ne doit pas être évident de garder la motivation après&nbsp;ça&nbsp;💜.</p>

<blockquote>
<p>Comment comprendre cette contradiction entre volonté de transparence et&nbsp;d’entre-soi&#8239;?</p>
<p><cite><em><a data-link-domain="crowdagger.fr" href="https://crowdagger.fr/wikipedia-et-le-necronyme-des-personnes-trans-linsoutenable-neutralite-du-point-de-vue/" hreflang="fr"
            title="Consultation de l’article">Wikipédia et le nécronyme des personnes trans&nbsp;: l’insoutenable neutralité du point de vue&#8239;?</a>
            <a href="/david/cache/2024/1eec2b195d91939cdc7bad71b40021bd/" hreflang="fr"
                data-tippy data-description="Tentative de comprendre le conflit sur Wikipédia francophone autour du nécronyme des personnes trans"
                data-source="https://crowdagger.fr/wikipedia-et-le-necronyme-des-personnes-trans-linsoutenable-neutralite-du-point-de-vue/"
                data-date="2024-03-01"
                data-favicon="https://crowdagger.fr/wp-content/uploads/2021/11/cropped-facivon-32x32.png"
                data-domain="crowdagger.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>
<a href="#hr-95" title="Lien vers cette section de la page"><hr id="hr-95" /></a>
<p>Si jamais vous avez un code Python qui doit tourner sous Windows et qui semble avoir des problème d’encodage (notamment sur <code>Path().read/write_text()</code>), <a data-link-domain="dev.to" href="https://dev.to/methane/python-use-utf-8-mode-on-windows-212i">vous pouvez tenter</a> la variable d’environnement <code>PYTHONUTF8=1</code> ou le paramètre <code>-Xutf8</code> pour lancer Python&nbsp;3.7+.</p>
<a href="#hr-96" title="Lien vers cette section de la page"><hr id="hr-96" /></a>

<blockquote lang="en">
<p>25&nbsp;January 1999&nbsp;was my first day at W3C. I was 23&nbsp;years old when I started. I’ve now spent more than half my life at that. <mark>I regret nothing</mark> because I find the work I do really interesting, important, meaningful; and I don’t tire of it because I feel like there’s renewal every now and&nbsp;then.</p>
<p><cite><em><a data-link-domain="blog.koalie.net" href="https://blog.koalie.net/2024/02/29/25th-work-anniversary/" hreflang="en"
            title="Consultation de l’article (anglais)">25th work anniversary</a>
            <a href="/david/cache/2024/d74f376e53fc6a1108c59b6e6fa57ba1/" hreflang="en"
                data-tippy data-description="25 January 1999 was my first day at W3C. I was 23 years old when I started. I’ve now spent more than half my life at that. I regret nothing because I find the work I do really interesting, im…"
                data-source="https://blog.koalie.net/2024/02/29/25th-work-anniversary/"
                data-date="2024-03-01"
                data-favicon="https://blog.koalie.net/wp-content/uploads/2023/12/cropped-koalie-meiji-shrine-cropped-400px-32x32.jpeg"
                data-domain="blog.koalie.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>Dans la catégorie pas-toutes-les-héroïnes-ne-portent-de-capes, koalie tient une belle&nbsp;place&nbsp;🙇.</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/deception/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#déception</a>
          
            <a href="/david/2024/psychologie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#psychologie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/18/" title="Lien permanent vers cet article">In·directions</a> <time datetime="2024-02-18">18 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>Any time you have a design that references the same value across multiple pieces of UI, I’d suggest that is an opportunity for <mark>abstracting</mark> that value into a name that better describes the intention of the value in the&nbsp;design.</p>
<p><cite><em><a data-link-domain="jwdallas.com" href="https://jwdallas.com/posts/namingcssvariables/" hreflang="en"
            title="Consultation de l’article (anglais)">Naming Variables In CSS</a>
            <a href="/david/cache/2024/d0ffe1891c332b6fc6e7d7826d8489da/" hreflang="en"
                data-tippy data-description="Some collected thoughts around how to name variables in CSS. Ideas, conventions, and some do's and don't for consideration."
                data-source="https://jwdallas.com/posts/namingcssvariables/"
                data-date="2024-02-18"
                data-favicon="https://jwdallas.com/icons/favicon.ico"
                data-domain="jwdallas.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 me demande souvent quel est le bon niveau hiérarchique au sein des CSS modernes. L’approche constatée actuelle semble être de mettre des variables par couleur (par exemple) puis ensuite définir des variables intermédiaires pour leur donner un sens pour un contexte&nbsp;donné.</p>
<pre><code>:root {
  --umap-color-darkBlue: #263B58;
}
button {
  --color-primary: var(--umap-color-darkBlue);
}
button.primary {
  background-color: var(--color-primary);
}
</code></pre>
<p>Il s’agit ici de partir d’un exemple simpliste mais concret. J’imagine qu’il y a autant de dévelopeur·euse que de façon d’écrire ces 3&nbsp;seules déclarations&nbsp;:). Pourquoi <code>:root</code> et pas <code>html</code>&#8239;? Est-ce qu’il faut définir les couleurs primaires sur le <code>button</code> ou sur <code>form, nav</code>&#8239;? Ou faire sauter cet intermédiaire&#8239;? Est-ce qu’il faut <code>button.primary</code>, <code>.primary</code>, <code>.button-primary</code>, <code>.button.button-primary</code>&#8239;? Etc, etc.</p>
<p>Et je ne mentionne même pas les solutions à partir de <code>:host</code> / <code>:host-context()</code> ou <code>:scope</code> qui sont encore d’autres façons de faire qui sont peut-être amenées à devenir&nbsp;populaires.</p>
<p>Venant d’un langage dont l’<a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Zen_of_Python">un des mantras</a> est <q lang="en">There should be one-- and preferably only one --obvious way to do it.</q>, il est plus difficile de se retrouver devant une telle… flexibilité&#8239;? Lorsqu’on envisage un commun sur ces 10&nbsp;prochaines années, comment trouver une stratégie maintenable qui s’inscrira dans la durée avec&nbsp;enthousiasme&#8239;?</p>
<p>Ce qui est certain, c’est que l’approche de Tailwind ne me convient pas du&nbsp;tout.</p>

<blockquote lang="en">
<p>To keep up with the ever-evolving CSS standard Tailwind introduced another set of language literals. Over the years Tailwind has grown from a simple set of atoms to a <mark>vendor-specific</mark> language with expressions, operators, and method&nbsp;calls.</p>
<p><cite><em><a data-link-domain="nuejs.org" href="https://nuejs.org/blog/tailwind-misinformation-engine/" hreflang=""
            title="Consultation de l’article">Tailwind marketing and misinformation engine</a>
            <a href="/david/cache/2024/44c12c8fbb59c7239f0f3b04bae189b7/" hreflang=""
                data-tippy data-description="The origins of Tailwind and how it is framed against semantic CSS"
                data-source="https://nuejs.org/blog/tailwind-misinformation-engine/"
                data-date="2024-02-18"
                data-favicon="https://nuejs.org/img/favicon.svg"
                data-domain="nuejs.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-77" title="Lien vers cette section de la page"><hr id="hr-77" /></a>

<blockquote lang="en">
<p><em>File over app</em> is a philosophy: if you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. <mark>Use tools that give you this&nbsp;freedom.</mark></p>
<p><em>File over app</em> is an appeal to tool makers: accept that all software is ephemeral, and give people ownership over their&nbsp;data.</p>
<p><cite><em><a data-link-domain="stephango.com" href="https://stephango.com/file-over-app" hreflang="en"
            title="Consultation de l’article (anglais)">File over app - Steph Ango</a>
            <a href="/david/cache/2024/20d288eb47779c4f1b3f36fb86aa7108/" hreflang="en"
                data-tippy data-description="If you want to create digital artifacts that last, they must be files you can control, in formats that are easy to retrieve and read. Use tools that give you..."
                data-source="https://stephango.com/file-over-app"
                data-date="2024-02-18"
                data-favicon="https://stephango.com/icon.svg"
                data-domain="stephango.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-78" title="Lien vers cette section de la page"><hr id="hr-78" /></a>

<blockquote lang="en">
<p>Learn about the systems that already exist, and build on them rather than around them. If an existing system doesn’t do what you want, maybe the problem is in the design of your system, not that&nbsp;one.</p>
<p>If you do build a new component, make sure it’s of general utility. Don’t build infrastructure that solves only the problems of your own&nbsp;team.</p>
<p>It’s easy to build complexity. In the rush to launch, it’s quicker and easier to code than to redesign. <mark>But the costs accumulate and you lose in the long&nbsp;run.</mark></p>
<p><cite><em><a data-link-domain="commandcenter.blogspot.com" href="https://commandcenter.blogspot.com/2023/12/simplicity.html" hreflang="en"
            title="Consultation de l’article (anglais)">command center: Simplicity</a>
            <a href="/david/cache/2024/6b26bff7f4772cf8fb78878ff4f9594f/" hreflang="en"
                data-tippy data-description="In May 2009, Google hosted an internal  Design Wizardry  panel, with talks by Jeff Dean,  Mike Burrows, Paul Haahr, Alfred Spector, Bill Cou..."
                data-source="https://commandcenter.blogspot.com/2023/12/simplicity.html"
                data-date="2024-02-18"
                data-favicon="https://commandcenter.blogspot.com/favicon.ico"
                data-domain="commandcenter.blogspot.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>

    
      <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/dependance/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#dépendance</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>
    
  
    <h2>
      <a href="/david/2024/02/16/" title="Lien permanent vers cet article">uMap&nbsp;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/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
    </h2>
    
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
    <a href="/static/david/2024/2024-02-14-input-datalist.png"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-14-input-datalist.png"
            width="1634" height="408"
            srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
            sizes="min(100vw, calc(100vh * 1634 / 408))"
            loading="lazy"
            decoding="async"
            alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
    </a>
    <figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></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/opendata/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#opendata</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>
    
  
    <h2>
      <a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
    </h2>
    
<p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p>
<p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p>
<p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>

<blockquote>
<p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p>
<p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
</blockquote>

<blockquote>
<p>Le prêt de main d’œuvre&nbsp;: l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins&nbsp;: il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de&nbsp;3&nbsp;ans.</p>
<p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
</blockquote>
<p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur&nbsp;valorisation&nbsp;:</p>
<ul>
<li>pour le calcul de la réduction d’impôt que déclare&nbsp;l’entreprise&#8239;;</li>
<li>pour la réintégration extra-comptable de la valeur du don par&nbsp;l’entreprise&#8239;;</li>
<li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du&nbsp;don&#8239;;</li>
<li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du&nbsp;don.</li>
</ul>
<h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence&#8239;? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3&nbsp;du code de la sécurité sociale (CSS), soit 10&#8239;284&#8239;€ par mois en&nbsp;2022.</p>
<p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
</blockquote>
<p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>

<blockquote>
<p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24&nbsp;août 2021&nbsp;confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10&nbsp;juin&nbsp;2022.</p>
</blockquote>
<h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le «&nbsp;don&nbsp;» de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de&nbsp;don.</p>
<p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
</blockquote>
<h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
<p>En synthèse, il&nbsp;faut&nbsp;:</p>
<h3>Les&nbsp;coordonnées</h3>
<p>Entre&nbsp;:</p>
<p>L’entreprise …, statut, dont le siège social est au …,<br />
Représentée par …, fonction,<br />
Ci-après dénommée «&nbsp;le&nbsp;mécène&nbsp;»,</p>
<p>Et</p>
<p>L’association …, sise au …,<br />
Représentée par son Président (&#8239;?), …<br />
Ci-après dénommée&nbsp;«&nbsp;l’association&nbsp;»,</p>
<p>Vu la loi n°2003-79&nbsp;du 1<sup>er</sup> août 2003&nbsp;relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238&nbsp;bis du code général des&nbsp;impôts.</p>
<h3>(optionnel) Préambule&nbsp;(contexte)</h3>
<ul>
<li>objet du mécénat de l’entreprise, de la&nbsp;fondation…</li>
<li>objet de l’association&nbsp;: présentation de sa mission/vocation générale, et laïus sur le
projet qu’ils portent en commun avec l’entreprise le cas&nbsp;échéant</li>
<li>rencontre de ces deux&nbsp;objets&#8239;?</li>
</ul>
<h3>Ce qui est&nbsp;convenu</h3>
<p>Il est convenu et décidé ce qui&nbsp;suit&nbsp;:</p>
<ul>
<li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant&nbsp;: (descriptif de l’action ou de la&nbsp;manifestation)</li>
<li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant&nbsp;: représentant une valeur de … € sur la période de&nbsp;…</li>
</ul>

<blockquote>
<p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire&nbsp;chargé).</p>
<p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à&nbsp;l’association.</p>
<p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60&#8239;% du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
</blockquote>
<h3>Conditions</h3>
<ul>
<li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la&nbsp;manifestation.</li>
<li>La présente convention est établie en vertu des dispositions de l’article 238&nbsp;bis du&nbsp;CGI</li>
<li>La présente convention prendra effet à sa date de signature et prendra fin le&nbsp;….</li>
</ul>
<p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à&nbsp;l’amiable.</p>
<h3>Signatures</h3>
<p>Date, lieu et signatures&nbsp;:<br />
A … le …<br />
Représentant de l’entreprise /  Représentant de&nbsp;l’association</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/documentation/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#documentation</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/01/23/" title="Lien permanent vers cet article">Thèse</a> <time datetime="2024-01-23">23 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Cette thèse porte sur les processus d’édition en considérant qu’ils sont constitutifs de la production du sens et qu’ils reflètent des visions du monde plurielles. Nous considérons le phénomène de fabrique d’édition comme un acte éditorial qui comprend autant la formalisation d’un texte <mark>que la constitution des outils permettant ce travail.</mark> Les dimensions techniques de l’édition sont ainsi imbriquées, telles que la construction de procédés de fabrication et de production de formes, d’objets et d’artefacts que sont les livres, ou telles que des opérations sur le texte comme l’architecture des contenus, la structuration sémantique et la composition&nbsp;typographique.</p>
<p><cite><em><a data-link-domain="these.quaternum.net" href="https://these.quaternum.net/">Fabriquer des éditions
Éditer des fabriques - Reconfiguration des processus techniques éditoriaux et nouveaux modèles épistémologiques</a></em>, Antoine&nbsp;Fauchié</cite></p>
</blockquote>
<p>J’assiste en direct à une soutenance de thèse pour la première fois de ma vie. Il s’agit d’un exercice moins facile que ce que je m’imaginais mais pas toutes les soutenances ne se font dans un tel contexte si j’ai bien réussi à lire entre les lignes. En tout cas, j’étais impressionné par la pertinence des réponses d’Antoine à chaud et sa faculté à recentrer les&nbsp;discussions.</p>
<p>Les questions que j’aurais aimé&nbsp;poser&nbsp;:</p>
<ol>
<li>Comment transformer ces fabriques de logiciels <em>open-source</em> en communs numériques impliquant une gouvernance partagée&#8239;? Comment sont impliquées les différentes parties&nbsp;prenantes&#8239;?</li>
<li>Quelle est la littéracie numérique nécessaire pour devenir auteur·ice aujourd’hui&#8239;? Quelle est l’in·accessibilité de ces fabriques sous cet angle&nbsp;là&#8239;?</li>
<li>Le rôle de l’éditeur·ice devient-il également celui d’un·e accompagnateur·ice technique&#8239;? Quelle part pour l’éthique dans ce choix&nbsp;d’intermédiaire&#8239;?</li>
</ol>
<p>Niveau technique, dommage qu’il ne soit pas possible de faire référence à des passages particuliers vu qu’ils sont déjà numérotés dans la version HTML (mais en&nbsp;CSS).</p>
<p><mark>@nnotation(contexte)</mark>&nbsp;: J’ai <a href="/david/2023/12/08/">participé au développement</a> d’une partie des outils présentés dans la thèse et on se connait depuis un moment avec&nbsp;Antoine.</p>
<a href="#hr-45" title="Lien vers cette section de la page"><hr id="hr-45" /></a>

<blockquote>
<p>La sociologie parle de «&nbsp;dépossession économique&nbsp;» et de «&nbsp;dépossession culturelle&nbsp;» pour nommer la manière dont la société limite les capacités d’accès à certaines ressources et les expériences qu’elles rendent possibles. Ne pourrait-on pas suggérer qu’il y a aussi, à côté de ces deux phénomènes, ce que l’on pourrait désigner comme des mécanismes de dépossession existentielle&#8239;? Subir la forme-de-vie qui s’empare de nous et nous fait être ce que nous sommes, c’est subir sa vie et subir certains modes d’existence alors que d’autres auraient pu beaucoup mieux nous convenir et nous rendre plus heureux. C’est même, en un sens, se faire voler son existence par la société et les autres — et peut-être même par soi-même, par une certaine version de&nbsp;soi-même.</p>
<p><mark>Nous ne devons jamais, comme dit Adorno, confondre ce que nous sommes et ce que la société a fait de nous.</mark> Nous ne sommes pas de toute éternité ce que nous avons été amenés à devenir. Il n’y a donc pas de projet qui vise à mettre en place une analytique oppositionnelle de l’ordre social et de notre inscription à l’intérieur de celui-ci qui pourrait faire l’économie d’une investigation de l’existence — d’une interrogation sur les formes de la vie et le tissu relationnel qui nous&nbsp;constitue.</p>
<p><cite><em>Une aspiration au dehors</em>, Geoffroy de&nbsp;Lagasnerie</cite></p>
</blockquote>
<p>D’une certaine manière, je vis une <em>dépossession existentielle</em> choisie en assistant à cet exercice après avoir bifurqué d’une carrière&nbsp;universitaire.</p>
<p>Merci Antoine pour&nbsp;l’invitation.</p>
<p><em>Antoine a <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/" hreflang="fr"
            title="Consultation de l’article">répondu le 2&nbsp;février</a>
            <a href="/david/cache/2024/e58d4c2ceeab475aba6a179c035852f8/" hreflang="fr"
                data-tippy data-description="David a assisté à la soutenance de ma thèse de doctorat, il m&rsquo;a posé trois questions via un billet de blog, à défaut d&rsquo;avoir pu le faire pendant la soutenance."
                data-source="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/"
                data-date="2024-02-18"
                data-favicon=""
                data-domain="quaternum.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/commun/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#commun</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/processus/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#processus</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>
    
  

      
        <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>