davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600
							<!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 #apprentissage
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #apprentissage">
  <!-- 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">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2024-01-19.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>
  <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>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body data-instant-intensity="viewport-all">
    <article>
      
  <header>
    <hgroup>
      <h1>#apprentissage</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">Recherche</a>
      •
      <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
    </p>
  </nav>
  
    <h2>
      <a href="/david/2024/01/25/" title="Lien permanent vers cet article">Stratégie</a> <time datetime="2024-01-25">25 janvier 2024</time>
    </h2>
    

<blockquote>
<p>La notion de stratégie revêt une dimension temporelle axée sur l’avenir. Mais lorsque nous tentons de nous engager sur l’avenir, nous nous retrouvons sur un terrain glissant. Trop souvent, la stratégie d’entreprise repose sur le principe erroné selon lequel il est possible de prédire l’avenir d’une manière fiable. Nassim Nicholas Taleb, l’un des auteurs les plus brillants sur l’illusion de la prédictibilité, a dit&nbsp;: «&nbsp;Nous ne pouvons pas vraiment planifier parce que nous ne comprenons pas l’avenir — mais ce n’est pas nécessairement une mauvaise nouvelle. Nous pourrions le faire <em>en gardant à l’esprit ces limitations.</em> Cela requiert simplement du&nbsp;courage.&nbsp;»</p>
<p>Eric Beinhocker va dans le même sens&nbsp;: «&nbsp;On s’attend à ce que les dirigeants d’entreprise se comportent en généraux courageux capables de prédire l’avenir, d’échafauder de grandes stratégies, de mener leurs troupes à une bataille couronnée de succès — puis ils sont virés à la première escarmouche perdue. Il faut des dirigeants courageux pour faire reculer cet état d’esprit, admettre l’incertitude inhérente à l’avenir et privilégier l’apprentissage et l’adaptation au détriment de la prédiction et de la&nbsp;planification.&nbsp;»</p>
<p>Comme le soulignent Taleb et Beinhocker, dans la plupart des organisations conventionnelles, la stratégie est l’essence même de l’approche prévision-contrôle — en déterminant une stratégie, nous fixons les bons objectifs, puis choisissons un itinéraire pour les atteindre. Toute cette approche repose sur un faux raisonnement. <mark>Bien qu’il soit possible de prévoir certaines choses, celles qu’il est impossible de prévoir sont bien plus nombreuses.</mark> Nous ne pouvons connaître la future situation économique ou celle de notre secteur d’activité, prévoir les innovations qui vont perturber le marché ou les opportunités susceptibles d’apparaître. Il serait plus facile de dresser la toute petite liste de ce que nous pouvons prévoir en toute fiabilité que d’énumérer l’imprévisible, que nous nous évertuons malgré tout trop souvent à essayer&nbsp;d’envisager.</p>
<p>Lorsque nous tentons de prédire l’avenir dans un univers imprévisible, nous nous berçons non seulement d’illusions, mais pire, nous diminuons notre faculté à détecter et nous ajuster à la réalité du&nbsp;moment.</p>
<p><cite><em>La révolution Holacracy</em>, Brian J. Robertson</cite></p>
</blockquote>
<p>Se donner les moyens et les conditions d’être à l’écoute est loin d’être trivial. Une fois le nez dans le guidon, il est facile de laisser pousser des œillères et de réduire son champ des possibles. Après tout, pourquoi avoir envie de faire évoluer une situation qui fonctionne bien&#8239;? Pourquoi envisager de nouveaux chemins avec leurs lots d’incertitudes et de dangers&#8239;? Mais c’est ce confort qui est le plus dangereux, celui qui fait manquer des rencontres, des occasions d’apprendre ou de découvrir de nouveaux domaines. Ce confort rend les entreprises séniles très&nbsp;rapidement.</p>
<p>J’aime bien la métaphore du vélo proposée par ce livre pour décrire la différence entre un plan à 5&nbsp;ans et une adaptation continue au contexte&nbsp;changeant.</p>

<blockquote>
<p>Imaginez que vous fassiez du vélo comme on gère la plupart des organisations modernes. Vous organiseriez une grande réunion afin de décider l’angle que doit présenter le guidon. Vous détailleriez le plus possible votre itinéraire en répertoriant tous les obstacles connus, le moment précis où vous devrez les éviter, ainsi que la trajectoire nécessaire pour cela. Puis vous enfourcheriez votre vélo, tiendriez fermement le guidon selon l’angle défini, fermeriez les yeux, puis rouleriez conformément au plan. Vous n’avez pratiquement aucune chance d’atteindre votre objectif, même si vous parveniez à garder le vélo bien droit pendant tout le parcours. Et lorsque vous tombez, vous vous demandez probablement, «&nbsp;Pourquoi n’y sommes-nous pas arrivés la première fois&#8239;?&nbsp;», voire «&nbsp;Qui a&nbsp;merdé&#8239;?&nbsp;»</p>
<p>Cette approche ridicule n’est pas loin de correspondre à l’approche adoptée par de nombreuses organisations pour leur planification stratégique. En revanche, Holacracy aide une organisation à fonctionner à la manière dont nous faisons habituellement du vélo, selon un paradigme de pilotage dynamique, à savoir un ajustement permanent selon les retours obtenus, faisant ainsi naître un cheminement plus organique. Si vous observez un cycliste très doué, vous constaterez une oscillation permanente car il reçoit sans arrêt des informations sensorielles sur sa situation et son environnement lui permettant de corriger légèrement sa direction, sa vitesse, son équilibre et son aérodynamisme. Cette oscillation intervient car il maintient un équilibre dynamique tout en avançant. Les informations qu’il reçoit rapidement lui permettent de respecter les contraintes de l’environnement et de son matériel. Au lieu de perdre beaucoup de temps et d’énergie à prévoir précisément à l’avance le «&nbsp;bon&nbsp;» itinéraire, il garde son but en tête, reste focalisé sur l’instant présent et avance le plus naturellement du monde. Cela ne signifie pas qu’il n’a aucun plan ou tout du moins aucune idée de son itinéraire, mais qu’il parvient à mieux contrôler sa progression en se livrant en permanence à la réalité ambiante et en se fiant à sa capacité à ressentir les choses et à réagir instantanément. De même, l’occasion s’offre à nous d’afficher un meilleur contrôle dans nos organisations en affrontant la réalité et en nous adaptant, en&nbsp;permanence.</p>
<p>Lorsque nous nous attachons à un résultat précis prévu à l’avance, nous risquons de nous retrouver à combattre la réalité quand celle-ci ne correspond pas à notre prévision. Si nous constatons que nous avons dévié du bon cap, nous pouvons en conclure, parfois inconsciemment, que nous sommes très certainement dans l’erreur. <mark>Juger ainsi la réalité nuit à notre capacité d’adaptation et nous incite à lutter contre la vérité indésirable, à essayer de forcer la réalité à être conforme à la vision que nous avions.</mark> Il s’agit là d’une stratégie loin d’être efficace pour gérer la complexité fluctuante du monde des affaires actuel. Lorsque la réalité entre en conflit avec nos plans les mieux échafaudés, c’est généralement la réalité qui&nbsp;l’emporte.</p>
<p>Je dois faire remarquer qu’adopter une approche plus dynamique pour gagner en contrôle ne revient pas à «&nbsp;ne rien prévoir&nbsp;», tout comme on n’avance pas à vélo «&nbsp;sans piloter&nbsp;». Il s’agit de modifier notre relation aux prévisions et plans, en les considérant parfois comme des faux raisonnements utiles et non comme des outils essentiels pour contrôler l’organisation. Et il s’agit d’être en phase avec l’instant présent afin de toujours pouvoir piloter en fonction de la&nbsp;réalité.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<a href="#hr-48" title="Lien vers cette section de la page"><hr id="hr-48" /></a>

<blockquote>
<p>Alors que le malaise dans lequel sont aujourd’hui plongées les sociétés occidentales n’en finit plus d’être commenté, est-il néanmoins possible de dessiner les contours d’une société idéale, une utopie réaliste, susceptible de constituer, pour les Français, un avenir désirable&#8239;? C’est précisément pour apporter des éléments de réponses à cette question qu’a été lancé en 2019&nbsp;l’Observatoire des perspectives utopiques. Dans le sillage de ces deux années de pandémie et à la veille de l’élection présidentielle, il nous est apparu utile de reconduire cette enquête, pour saisir où en sont les Français et évaluer dans quelle mesure leurs représentations et aspirations ont&nbsp;évolué.</p>
<p><cite><em><a data-link-domain="lobsoco.com" href="https://lobsoco.com/perspectives-utopiques-vague-3/">L’Observatoire des perspectives utopiques</a> <a href="/david/cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/" title="Copie locale au 2024-01-24">[archive]</a></em></cite></p>
</blockquote>
<p>Il y a des choses intéressantes qui ressortent de cet observatoire, notamment en comparant les résultats au cours du temps. Je me demande ce que pourraient donner les résultats de ce même sondage au&nbsp;Québec.</p>
<a href="#hr-49" title="Lien vers cette section de la page"><hr id="hr-49" /></a>
<p>Mot du jour&nbsp;: <a data-link-domain="fr.wiktionary.org" href="https://fr.wiktionary.org/wiki/cyn%C3%A9g%C3%A9tophobie">cynégétophobie</a>.</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/equipe/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#équipe</a>
          
            <a href="/david/2024/velo/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#vélo</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/21/" title="Lien permanent vers cet article">Bois</a> <time datetime="2024-01-21">21 janvier 2024</time>
    </h2>
    
<p>La dissonance cognitive du jour&nbsp;: faire un atelier de tour à bois et lire dans la foulée <em>La vie secrète des arbre</em> de Peter Wohlleben brillamment mise en version BD par Fred Bernard et Benjamin&nbsp;Flao.</p>
<figure>
    <a href="/static/david/2024/2024-01-20-tour-a-bois.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-01-20-tour-a-bois.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-01-20-tour-a-bois.jpg 3024w, /static/david/2024/2024-01-20-tour-a-bois_660x440.jpg 660w, /static/david/2024/2024-01-20-tour-a-bois_990x660.jpg 990w, /static/david/2024/2024-01-20-tour-a-bois_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Une assiette, un bol et une cuillère en bois à côté du livre cité avec des plantes en fond.">
    </a>
    <figcaption>6 heures de travail non-stop pour faire cette assiette et ce&nbsp;bol.</figcaption>
</figure>

<blockquote>
<p>Lorsque je marche en foret, je sens que je fais partie intégrante du vivant. Je suis, nous sommes naturellement, unis au minéral, aux bactéries, aux virus, aux champignons aux plantes, aux chenilles, aux papillons, à tous les&nbsp;animaux.</p>
<p>Nous sommes tous reliés et <mark>ne faisons que passer sur cette mince pellicule de vie</mark> qui couvre miraculeusement la terre. Tout le vivant est constitue des mêmes atomes présents sur notre planète depuis sa&nbsp;création.</p>
<p>Je porte en moi des particules qui ont constitue des arbres du crétacé, des légionnaires romains, des plants de tomates rapportés d’Amérique par les conquistadors… rien ne se crée, tout se transforme, dit-on. Rien n’est plus&nbsp;vrai.</p>
</blockquote>
<figure>
    <a href="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-01-20-vie-secrete-arbres.jpg 3024w, /static/david/2024/2024-01-20-vie-secrete-arbres_660x440.jpg 660w, /static/david/2024/2024-01-20-vie-secrete-arbres_990x660.jpg 990w, /static/david/2024/2024-01-20-vie-secrete-arbres_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Extrait du livre «&nbsp;La vie secrète des arbres&nbsp;» dont est issue la citation ci-dessus.">
    </a>
    <figcaption>J’aime beaucoup des livres transformés en BD, je trouve que l’image leur donne une autre&nbsp;dimension.</figcaption>
</figure>
<p>D’autant plus motivé pour trouver un bout de forêt à préserver —&nbsp;des chasseurs, de l’exploitation, de la pollution, etc.&nbsp;— dans le coin. Un de mes objectifs&nbsp;2024.</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/foret/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#forêt</a>
          
            <a href="/david/2024/protopie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#protopie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
    </h2>
    

<blockquote lang="en">
<p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
<p>But here’s the thing: we need more tools for it. We need simpler tools for it. And we need to make installing and using them <em>trivially simple</em>.</p>
<p>We need more self-hosted platforms for personal publishing that <em>aren’t Wordpress</em>. <mark>And don’t point me to Hugo or Netlify or Eleventy or all those things - all of them are great, but none of them are simple enough.</mark> We need web publishing tools that do not require users to open the Terminal <em>at all</em>. And we need lots of&nbsp;them.</p>
<p>We need a whole <em>galaxy</em> of&nbsp;options.</p>
<p><cite><em><a data-link-domain="gilest.org" href="https://gilest.org/indie-easy.html">Let’s make the indie web easier</a> <a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<p>Quelques étoiles dans la&nbsp;galaxie&nbsp;:</p>
<ul>
<li><a data-link-domain="atelier.scribouilli.org" href="https://atelier.scribouilli.org/">Scribouilli</a> (<a data-link-domain="github.com" href="https://github.com/Scribouilli/scribouilli">code</a>) par <a data-link-domain="lechappeebelle.team" href="https://lechappeebelle.team/">L’Échappée Belle</a>&#8239;;</li>
<li><a data-link-domain="write.as" href="https://write.as/">Write.as</a> (<a data-link-domain="writefreely.org" href="https://writefreely.org/">open-source</a>) est le plus proche que je pourrais conseiller avec un support commercial de <a data-link-domain="musing.studio" href="https://musing.studio/">Musing Studio</a>&#8239;;</li>
<li><a data-link-domain="masto.host" href="https://masto.host/">mastohost</a> —&nbsp;que <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/">j’utilise</a>&nbsp;— permet d’avoir son propre domaine aussi sans vraiment de connaissance technique, le support est&nbsp;réactif&#8239;;</li>
<li><a data-link-domain="carrd.co" href="https://carrd.co/">Carrd</a> est revenu plusieurs fois dans ma bulle ces derniers&nbsp;temps&#8239;;</li>
<li><a data-link-domain="pika.page" href="https://pika.page/">Pika</a> aussi avec une saveur plus&nbsp;humaine.</li>
</ul>
<p>Il y a une bonne liste dans <a data-link-domain="mastodon.social" href="https://mastodon.social/@matthiasott/111557355056827064">cette discussion</a> et une autre <a data-link-domain="robertkingett.com" href="https://robertkingett.com/links/">par ici</a> (section <q lang="en">Managed Static site hosts or Blogging platforms</q>).</p>
<a href="#hr-21" title="Lien vers cette section de la page"><hr id="hr-21" /></a>

<blockquote lang="en">
<p>Among its suggestions: write a longer headline; split a six-sentence paragraph up because it’s “too long”; and replace “too complex” words like “invariably,” “notoriety,” and “modification.” Dozens of sentences were flagged as being confusing (I disagree) — and it really hated em dashes. I rewrote my prose over and over, but it didn’t seem to satisfy my robot grader. I finally chose one thought per sentence, broke up paragraphs, and replaced words with suggested keywords to get rid of the red dots signaling&nbsp;problems.</p>
<p><mark>The result feels like an AI summary of my story</mark> — at any moment, a paragraph could start with “In conclusion…” or “The next thing to consider is…” The nuance, voice, and unexpected twists and turns have been snuffed out. I’m sure some people would prefer this uncomplicated, beat-by-beat version of the story, but it’s gone from being a story written by a real person to a clinical, stiff series of&nbsp;sentences.</p>
<p><cite><em><a data-link-domain="theverge.com" href="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization">The Perfect Web Page</a> <a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<p>Un article de TheVerge qui risque de ne pas être très bien référencé. Le moment où l’on s’adapte pour nourrir les robots n’est pas nouveau, on a «&nbsp;juste&nbsp;» mis une nouvelle étiquette dessus en 2023&nbsp;qui permet aux robots / algorithmes de se battre entre eux de manière&nbsp;explicite.</p>
<p>Pas sûr de vouloir <a data-link-domain="darkvisitors.com" href="https://darkvisitors.com/robots-txt-builder">entrer sur le ring</a> sans m’épuiser très&nbsp;vite.</p>

<blockquote lang="en">
<p>I propose <mark>Data Luddism</mark> as a radical response to the productive power of big data and predictive algorithms. My starting point is not the Romantic neo-Luddism of Kirkpatrick Sale but the historical Luddism of 1811-1816, and the Luddites' own rhetoric regarding their resistance to 'obnoxious&nbsp;machines'.</p>
<p><cite><em><a data-link-domain="danmcquillan.org" href="https://www.danmcquillan.org/dataluddism.html">Data Luddism</a> <a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<a href="#hr-22" title="Lien vers cette section de la page"><hr id="hr-22" /></a>

<blockquote lang="en">
<p>The <code>everything</code> package and its 3,000+ sub-packages have caused a Denial of Service (DOS) for anyone who installs it. We’re talking about storage space running out and system resource&nbsp;exhaustion.</p>
<p>But that’s not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the&nbsp;situation.</p>
<p><cite><em><a data-link-domain="socket.dev" href="https://socket.dev/blog/when-everything-becomes-too-much">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a> <a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<p><code>npm install lol</code> 🤣</p>
<p>En <a data-link-domain="jop2024.lol" href="https://jop2024.lol/">parlant de lol</a>…</p>
<a href="#hr-23" title="Lien vers cette section de la page"><hr id="hr-23" /></a>

<blockquote>
<p>Si les fictions, celles qu’on s’invente, celles que nous souffle notre inconscient comme celles qu’on lit, ont un rôle majeur à jouer dans la fabrique de notre rapport au monde, alors voilà qui plaide pour redoubler d’ardeur quand il s’agit de nourrir soigneusement nos imaginaires. Quand on voit les déferlements de violence et le virilisme qui caractérisent les héros modernes, on ne peut que s’interroger sur le type de rapport au monde que cela crée. C’est la raison pour laquelle <mark>la bataille culturelle passe aussi par la création de nouvelles utopies,</mark> ni niaises ni naïves, qui puissent donner d’autres matières à rêver qu’un monde dévasté et peuplé de soldats&nbsp;augmentés.</p>
<p>[…] Nous avons besoin d’autres cadres de pensée dans lesquels évoluer. Nous avons besoin d’<em>ailleurs culturels</em> pour sortir de l’ornière et nous&nbsp;dérouter.</p>
<p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
</blockquote>
<p>Nous accueillons une nouvelle personne chez Scopyleft, l’occasion de former une <a href="/david/2021/03/17/">nouvelle équipe</a>. Ces <em>ailleurs culturels</em> doivent pouvoir être partagés et inspirer pour réussir à&nbsp;essaimer.</p>
<p>C’est l’une de mes frustrations à ne plus <a href="/david/2021/01/26/">participer à des regroupements</a>, ne pas partager par ce biais là les expériences menées depuis 11&nbsp;ans en matière d’horizontalité et de travail en&nbsp;commun·s.</p>
<a href="#hr-24" title="Lien vers cette section de la page"><hr id="hr-24" /></a>

<blockquote lang="en">
<p>So when we wonder where all the websites have gone, know it’s the <em>curators</em> we’re nostalgic for because the curators showed us the best the web had to offer once upon a time. And the curators— the tenders, aggregators, collectors, and connectors— can bring us back to something better. Because it’s still out there, we just have to find&nbsp;it.</p>
<p>Here’s the best part. <mark>You can be that curator right now, at this very moment.</mark> You can start to rebuild the interconnectivity that made the web fun to explore. And you don’t need to be a computer scientist to do&nbsp;it.</p>
<p><cite><em><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where have all the websites gone?</a> <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" title="Copie locale au 2024-01-09">[archive]</a></em></cite></p>
</blockquote>
<p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</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/ecriture/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#écriture</a>
          
            <a href="/david/2024/ia/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#IA</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
    </h2>
    

<blockquote>
<p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
<p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
<p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
<p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
</blockquote>
<p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
<p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p>
<a href="#hr-13" title="Lien vers cette section de la page"><hr id="hr-13" /></a>
<p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
<p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
<a href="#hr-14" title="Lien vers cette section de la page"><hr id="hr-14" /></a>
<p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
<p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
<p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
<p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
<a href="#hr-15" title="Lien vers cette section de la page"><hr id="hr-15" /></a>

<blockquote>
<p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
<p>Je suis&nbsp;impressionné.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche">plaisir d’ébauche</a> <a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" title="Copie locale au 2024-01-07">[archive]</a></em>, Karl</cite></p>
</blockquote>
<p>Ce&nbsp;titre&nbsp;:)</p>
<p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
<a href="#hr-16" title="Lien vers cette section de la page"><hr id="hr-16" /></a>

<blockquote lang="en">
<p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
<p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
<p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6">Vlad (admin Kagi) répondant</a> <a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" title="Copie locale au 2024-01-07">[archive]</a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
</blockquote>
<p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
<p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy">Pas de politique au travail</a> <a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" title="Copie locale au 2024-01-07">[archive]</a> est ma nouvelle&nbsp;cryptonite.</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/communaute/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#communauté</a>
          
            <a href="/david/2024/fediverse/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#fédiverse</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>
    
  

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