davidbgk
/
larlet-fr-david

<!DOCTYPE html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
  <!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  <meta charset="utf-8">
  <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  <!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <!-- Required to make a valid HTML5 document. -->
  <title>
    Étiquette #apprentissage
  — 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 #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">
  
  <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" 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/06/" title="Lien permanent vers cet article">Vannerie</a> <time datetime="2024-03-06">6 mars 2024</time>
    </h2>
    
<p>L’atelier du jour était une initiation à la vannerie, cette fois-ci avec / pour l’enfant. Depuis le temps qu’il veut m’accompagner, j’ai sauté sur l’occasion lorsqu’une animatrice d’atelier — ancienne enseignante, ça doit jouer&nbsp;— acceptât les personnes de son&nbsp;âge.</p>
<figure>
    <a href="/static/david/2024/2024-03-06-vannerie-panier.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-06-vannerie-panier.jpg"
            width="4032" height="3024"
            srcset="/static/david/2024/2024-03-06-vannerie-panier.jpg 4032w, /static/david/2024/2024-03-06-vannerie-panier_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-panier_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-panier_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 4032 / 3024))"
            loading="lazy"
            decoding="async"
            alt="Un panier en vannerie.">
    </a>
    <figcaption>Un panier en vannerie, ça m’a pris&nbsp;2h30.</figcaption>
</figure>
<p>Le <em>twist</em>, c’est que j’ai pu le faire aussi vu que nous étions les seuls présents pour la session au final. Autant dire qu’avec un cours particulier on a pu apprendre encore plus de choses&#8239;! Sur un spectre allant des techniques d’assouplissement à l’appropriation culturelle, on a passé un bon moment d’échanges. J’ai appris que la préparation du frêne noir utilisé dans la vannerie par les Premières Nations prend plusieurs mois, ce qui explique sa rareté (et son&nbsp;prix).</p>
<figure>
    <a href="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-03-06-vannerie-sac-a-dos.jpg 3024w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_660x440.jpg 660w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_990x660.jpg 990w, /static/david/2024/2024-03-06-vannerie-sac-a-dos_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Un sac à dos en vannerie.">
    </a>
    <figcaption>Un sac à dos en vannerie sur le dos de&nbsp;l’enfant.</figcaption>
</figure>
<p>Toujours cette sensation de créer des objets utiles à partir de pas grand chose et avec un minimum de&nbsp;matériel.</p>
<a href="#hr-100" title="Lien vers cette section de la page"><hr id="hr-100" /></a>

<blockquote lang="en">
<p>Like Stimulus, but <em>a lot</em> smaller and a bit more&nbsp;webcomponenty?</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/johanhalse/musculus">Musculus</a></em></cite></p>
</blockquote>
<p>Découverte du jour que je trouve très inspirante. J’avais dans un coin de tête de tester des choses dans cette voie. Réussir à faire le pont entre les deux serait une très bonne combinaison. J’apprécie qu’une solution de test soit proposée, même si elle est légère (en terme de fiabilité) j’en peux plus d’attendre&nbsp;Playwright.</p>
<a href="#hr-101" title="Lien vers cette section de la page"><hr id="hr-101" /></a>

<blockquote>
<p>End the battle. Use <code>infinity</code> to get the highest possible <code>z-index</code> and win&nbsp;forever.</p>
<p>[…]</p>
<p>But is <code>infinity</code> really any better than some arbitrarily big value like <code>9999px</code>? Functionally, no. Same end result. But I think <mark>it does help make code more self-documenting,</mark> because <code>infinity</code> conveys intent. It expresses that it’s all about the magnitude, not a specific magic&nbsp;number.</p>
<p><cite><em><a data-link-domain="codersblock.com" href="https://codersblock.com/blog/playing-with-infinity-in-css/" hreflang="en"
            title="Consultation de l’article (anglais)">Playing with Infinity in CSS</a>
            <a href="/david/cache/2024/1f4e359d100592aee6e46505a40b2a01/" hreflang="en"
                data-tippy data-description="CSS has an infinity constant. When I first learned about this, my brain lit up with all kinds of absurd possibilities. Let’s discuss! There might even be some..."
                data-source="https://codersblock.com/blog/playing-with-infinity-in-css/"
                data-date="2024-03-06"
                data-favicon="https://codersblock.com/favicon-32x32.png"
                data-domain="codersblock.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>Autre découverte du jour. J’aime bien l’idée de pouvoir évacuer certaines valeurs magiques de manière explicite. J’ai la flemme de tester ce qu’un <code>calc(infinity - 1)</code> donnerait sur un <code>z-index</code>&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/parentalite/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#parentalité</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/02/23/" title="Lien permanent vers cet article">Préparatifs</a> <time datetime="2024-02-23">23 février 2024</time>
    </h2>
    
<p>J’admire les personnes qui arrivent à prendre une photo de leur sac de manière éclatée avant de partir. J’ai toujours pas mal de choses à rajouter au dernier moment, j’essaye au moins d’avoir les basiques de façon&nbsp;certaine.</p>
<a href="#hr-86" title="Lien vers cette section de la page"><hr id="hr-86" /></a>

<blockquote lang="en">
<p>A utopia for web that I can envision would have <mark>rich component creation</mark> and manipulation capabilities in built as a part of spec and browsers implementing them. Hence, we won’t have to include any of the heavy third party libraries which will give faster load times to the users by saving the download costs by a huge&nbsp;amounts.</p>
<p><cite><em><a data-link-domain="codeburst.io" href="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e" hreflang="en"
            title="Consultation de l’article (anglais)">Generating Config driven Dynamic Forms using Web Components</a>
            <a href="/david/cache/2024/5da390fa8d93278cd62233d3915729e7/" hreflang="en"
                data-tippy data-description="Over the years, we as UI Developers have become so habitual of using the already available UI Frameworks and Libraries like React, Angular, Vue etc due to the increasing demand of shipping things…"
                data-source="https://codeburst.io/generating-config-driven-dynamic-forms-using-web-components-7c8d400f7f2e"
                data-date="2024-02-23"
                data-favicon="https://miro.medium.com/v2/resize:fill:256:256/1*mNmxddJJTzkiBfK77mWuGA.png"
                data-domain="codeburst.io"
                ><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>Aujourd’hui, j’ai exploré les façons de faire des formulaires en assemblant des <em>Web Components</em>. Cet article de 2019&nbsp;donne un bon aperçu de ce qu’il est possible de faire. Il y a aussi <a data-link-domain="dev.to" href="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj" hreflang="en"
            title="Consultation de l’article (anglais)">cet autre article</a>
            <a href="/david/cache/2024/2cadf792810f64540605c86a1431cb6b/" hreflang="en"
                data-tippy data-description="The ElementInternals API allows us to create form-associated custom elements which we can use to make our own supercharged form fields."
                data-source="https://dev.to/stuffbreaker/custom-forms-with-web-components-and-elementinternals-4jaj"
                data-date="2024-02-23"
                data-favicon="https://media.dev.to/cdn-cgi/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"
                data-domain="dev.to"
                ><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> qui m’a permis de découvrir <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals">ElementInternals</a>. Des frameworks comme Shoelace <a data-link-domain="shoelace.style" href="https://shoelace.style/getting-started/form-controls">pourraient être inspirants</a> dans le&nbsp;domaine.</p>
<a href="#hr-87" title="Lien vers cette section de la page"><hr id="hr-87" /></a>

<blockquote lang="en">
<p>RH uses GNOME 3. Ubuntu used Unity, alienated a lot of people who only knew how to use Windows-like desktops, and that made Mint a huge success. GNOME 2&nbsp;got forked as MATE, and Mint adopted it, helping a lot. Mint also built its own fork of GNOME 3, Cinnamon. Formerly tiny niche desktops like Xfce and LXDE got a <em>huge</em> boost. Debian adopted GNOME 3&nbsp;and systemd, annoying lots of its developers and causing the Devuan fork to&nbsp;happen.</p>
<p><cite><em><a data-link-domain="liam-on-linux.dreamwidth.org" href="https://liam-on-linux.dreamwidth.org/85359.html" hreflang="en"
            title="Consultation de l’article (anglais)">Everyone seems to forget why GNOME and GNOME 3&nbsp;and Unity happened</a>
            <a href="/david/cache/2024/ecae6fcce7e86066e432b5f38b2299ca/" hreflang="en"
                data-tippy data-description="That is *what* it came from, yes, but not *why*."
                data-source="https://liam-on-linux.dreamwidth.org/85359.html"
                data-date="2024-02-23"
                data-favicon="https://liam-on-linux.dreamwidth.org/favicon.ico"
                data-domain="liam-on-linux.dreamwidth.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>Fascinante&nbsp;histoire.</p>
<a href="#hr-88" title="Lien vers cette section de la page"><hr id="hr-88" /></a>

<blockquote lang="en">
<p>As of version 2.1.0&nbsp;this project will split into Plausible Community Edition and Plausible Enterprise Edition. The Community Edition (CE) will remain completely open source under the AGPLv3 license. The Enterprise Edition (EE) will contain extra features that will be published as source-available on Github, but we do not grant rights for anyone else to use, distribute or otherwise exploit these&nbsp;features.</p>
<p><cite><em><a data-link-domain="github.com" href="https://github.com/plausible/analytics/releases/tag/v2.1.0-rc.0">Release notes de Plausible&nbsp;2.1.0</a></em></cite></p>
</blockquote>
<p>Des <a data-link-domain="plausible.io" href="https://plausible.io/blog/community-edition" hreflang="en"
            title="Consultation de l’article (anglais)">raisons un peu plus détaillées</a>
            <a href="/david/cache/2024/d6e0a9beec0623cc66cede135fc7acdc/" hreflang="en"
                data-tippy data-description="We’re introducing the “free as in beer”, self-hosted and AGPL-licensed Plausible Community Edition (CE)."
                data-source="https://plausible.io/blog/community-edition"
                data-date="2024-02-23"
                data-favicon="https://plausible.io/assets/images/icon/favicon-16x16.png"
                data-domain="plausible.io"
                ><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> ayant motivé ce&nbsp;choix.</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/processus/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#processus</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/19/" title="Lien permanent vers cet article">Injection</a> <time datetime="2024-02-19">19 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p>It’s fun to think of <mark>other possible uses…</mark> Perhaps you could pull in HTML modules along with their relevant CSS link. Or embed a tweet or code examples in documentation or a blog post. It could probably even be used to load and apply a regular <code>rel=stylesheet</code> link asynchronously, and at a low priority, which is otherwise surprisingly hard to do (note: I didn’t test this idea much to say for&nbsp;sure).</p>
<p><cite><em><a data-link-domain="filamentgroup.com" href="https://www.filamentgroup.com/lab/html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">HTML Includes That Work Today</a>
            <a href="/david/cache/2024/88df28660094efbc5a13bb09d70dfea6/" hreflang="en"
                data-tippy data-description="Read this page on the Filament Group website"
                data-source="https://www.filamentgroup.com/lab/html-includes/"
                data-date="2024-02-19"
                data-favicon="https://www.filamentgroup.com/images/icons/favicon-32x32.png"
                data-domain="filamentgroup.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>J’ai cette page ouverte dans un onglet depuis littéralement des années. C’est <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/">Alexis</a> qui me l’a rappelé en partageant <a data-link-domain="leanrada.com" href="https://leanrada.com/htmz/">htmz</a> aujourd’hui qui va un tout petit peu plus&nbsp;loin.</p>
<p>Voilà le code en&nbsp;question&nbsp;:</p>
<pre><code>&lt;iframe 
  src=&quot;/static/david/2024/test-injection.html&quot; 
  onload=&quot;
    this.before(
      (
        this.contentDocument.body||this.contentDocument
      ).children[0]
    );
    this.remove()
  &quot; 
  hidden&gt;
&lt;/iframe&gt;
</code></pre>
<p>En résumé, on prend le code l’<code>iframe</code> et on l’injecte au chargement dans le document en cours. Voici un exemple (pas sûr que ça fonctionne depuis un&nbsp;agrégateur…)&nbsp;:</p>
<iframe src="/static/david/2024/test-injection.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()" hidden></iframe>

<p>J’ai ajouté l’attribut <code>hidden</code> à la proposition initiale pour éviter le flash. Si vous inspectez le code, vous constatez que le paragraphe précédent tout à fait classique alors qu’il s’agissait d’une <code>iframe</code> (sauf si vous avez une extension qui bloque les <code>iframe</code> bien sûr). Jusque là c’est <a data-link-domain="css-tricks.com" href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" hreflang="en"
            title="Consultation de l’article (anglais)">une forme d’inclusion</a>
            <a href="/david/cache/2024/6bfc6bd7bc1d9158aa7f6591123e7f4b/" hreflang="en"
                data-tippy data-description="It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that"
                data-source="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/"
                data-date="2024-02-19"
                data-favicon="https://css-tricks.com/favicon.svg"
                data-domain="css-tricks.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> mais rien de bien&nbsp;utile.</p>
<p>Ce qui devient un peu plus fou serait de pouvoir injecter un <em>Web Component</em> de cette façon&#8239;! Le problème étant que le <code>this.remove()</code> est exécuté avant le chargement du script de l’<code>iframe</code>… et si on le retire on conserve cet élément <code>hidden</code> dans le document. Ce n’est pas critique mais ce n’est pas très élégant non plus, d’autant que cela signifie que le composant est défini et instancié deux&nbsp;fois.</p>
<style>para-graph { background: paleturquoise; color: black; }</style>

<iframe src="/static/david/2024/test-injection-web-component.html" onload= "this.before((this.contentDocument.body||this.contentDocument).children[0]);this.before(this.contentDocument.scripts[0])" hidden></iframe>

<p>Il y a probablement des choses qui m’échappent mais il se fait&nbsp;tard.</p>
<p><em>To be&nbsp;continued…</em></p>
<a href="#hr-79" title="Lien vers cette section de la page"><hr id="hr-79" /></a>
<p>Découvertes du jour&nbsp;: <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a> et <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a>.</p>
<p>Aussi, il n’est <a data-link-domain="github.com" href="https://github.com/django/django/commit/b7f500396e05cd1f0bb8901fce16e2d8393d2779">pas forcément indiqué</a> de générer une <code>SECRET_KEY</code> avec Django, il vaut mieux le faire en Python&nbsp;directement&nbsp;:</p>
<pre><code>[depuis un shell]

$ python3 -c 'import secrets; print(secrets.token_hex(100))'
</code></pre>
<a href="#hr-80" title="Lien vers cette section de la page"><hr id="hr-80" /></a>

<blockquote lang="en">
<p>So, what’s the fun of writing on the internet anymore? Well, if your aim is to be respected as an author, there’s probably not much fun to be had here at all. Don’t write online for fame and glory. Oblivion, obscurity and exploitation are all but guaranteed. Write here because <em>ideas</em> matter, not authorship. Write here because the more robots, pirates, and single-minded trolls swallow up cyberspace, <mark>the more we need independent writing in order to think new thoughts in the future</mark> — even if your words are getting dished up and plated by an&nbsp;algorithm.</p>
<p><cite><em><a data-link-domain="jamesshelley.com" href="https://jamesshelley.com/blog/writing-on-the-internet.html" hreflang="en"
            title="Consultation de l’article (anglais)">What’s the fun in writing on the internet anymore?</a>
            <a href="/david/cache/2024/a005801f0e596f9ecb99037a992ecc1b/" hreflang="en"
                data-tippy data-description="The moment you release your words, you relinquish all control."
                data-source="https://jamesshelley.com/blog/writing-on-the-internet.html"
                data-date="2024-02-19"
                data-favicon="https://jamesshelley.com/images/favicon.png"
                data-domain="jamesshelley.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>Rester (et alimenter la machine) ou quitter (et laisser l’espace à la&nbsp;machine).</p>
<p>Je n’aime pas beaucoup la <a data-link-domain="maggieappleton.com" href="https://maggieappleton.com/ai-dark-forest" hreflang="en"
            title="Consultation de l’article (anglais)">métaphore de la forêt noire</a>
            <a href="/david/cache/2024/140458968f9f7da7d14e181d0a80e799/" hreflang="en"
                data-tippy data-description="Proving you're a human on a web flooded with generative AI content"
                data-source="https://maggieappleton.com/ai-dark-forest"
                data-date="2024-02-19"
                data-favicon="https://maggieappleton.com//images/favicon/favicon.ico"
                data-domain="maggieappleton.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> ces temps-ci car j’apprécie un peu trop les forêts pour ça. J’aurais davantage l’impression de faire partie d’une haie alors qu’il y a beaucoup de monoculture aux alentours. Avec les double sens que cette méta·phore&nbsp;implique.</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/laboratoire/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#laboratoire</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/13/" title="Lien permanent vers cet article">Feutrage</a> <time datetime="2024-02-13">13 février 2024</time>
    </h2>
    
<p>Atelier du soir avec <a data-link-domain="wiseoakwilderness.com" href="https://wiseoakwilderness.com/">Jesse</a> que je connaissais pour ses autres activités et c’était une surprise de retomber sur lui&#8239;! C’est une bonne personne&nbsp;😊. Le problème des <a data-link-domain="les-affutes.ca" href="https://www.les-affutes.ca/">Affûtés</a> c’est qu’iels arrivent un peu trop bien à me <a href="/david/2024/01/21/" title="Bois">cibler</a>&#8239;!</p>
<p>L’objectif était de faire une paire de mitaines à partir de laine brute, c’est une approche qui m’intéresse beaucoup car je n’arrive pas à accrocher au tricotage et j’ai pourtant de gros besoins à ce sujet (je ne taris pas d’éloge au sujet de <a data-link-domain="nature.larlet.fr" href="https://nature.larlet.fr/habillage/#laine">cette matière</a> par ailleurs, je ne vais pas me répéter ici). Je n’avais aucune idée de cette technique&nbsp;auparavant.</p>
<figure>
    <a href="/static/david/2024/2024-02-13-laine-brute.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-13-laine-brute.jpg"
            width="2464" height="3285"
            srcset="/static/david/2024/2024-02-13-laine-brute.jpg 2464w, /static/david/2024/2024-02-13-laine-brute_660x440.jpg 660w, /static/david/2024/2024-02-13-laine-brute_990x660.jpg 990w, /static/david/2024/2024-02-13-laine-brute_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2464 / 3285))"
            loading="lazy"
            decoding="async"
            alt="De la laine relativement brute.">
    </a>
    <figcaption>De la laine relativement&nbsp;brute.</figcaption>
</figure>
<p>La laine provenait de la <a data-link-domain="etsy.com" href="https://www.etsy.com/ca/market/bure_bure">boutique BureBure</a> sur Etsy, ce qui a l’avantage de pouvoir s’en procurer facilement de manière indépendante. Pour une option plus locale, certaines évoquaient <a data-link-domain="lavieenalpaga.com" href="https://www.lavieenalpaga.com/">La Vie en Alpaga</a> mais c’est une laine plus fine qu’il vaut mieux couper d’après Jesse pour qu’elle arrive à feutrer plus facilement. J’ai appris qu’une bonne partie de la laine qui serait utilisable au Québec ne l’est pas faute de rentabilité. À moi de trouver une source&nbsp;locale.</p>
<p>Je vais documenter la méthode car c’est faisable dans sa cuisine sans nécessiter d’outillage particulier et je compte bien continuer cet apprentissage. Cela demande quelques étapes et un petit tour de main, l’atelier était vraiment important pour devenir&nbsp;autonome.</p>
<p>Matériel&nbsp;: un bac étanche, un natte pour faire des <em>maki</em> (véridique), un rectangle de papier bulles, un rectangle en plastique avec des trous (type rideau ou tapis de vaisselle). Le tout dimensionné pour le patron choisi qui peut être découpé dans un sac de course en plastique rigide. Ensuite, il ne faut que de l’eau chaude, du savon et du vinaigre. Autant dire que ce n’est pas le matériel qui coûte&nbsp;cher.</p>
<ol>
<li>On fait un patron ayant une taille d’environ 130% par rapport au résultat attendu, le principe est que la laine va s’agréger et donc réduire sa taille de manière significative lors du&nbsp;processus.</li>
<li>On pose le patron dans le bac, sur la natte + papier&nbsp;bulles.</li>
<li>On ajoute trois couches de laine en commençant par la fibre à l’horizontale puis en croisant les fibres, on fait en sorte que ça dépasse pour pouvoir faire la jonction avec la face arrière du&nbsp;patron.</li>
<li>On recouvre avec le tapis en plastique puis on arrose d’eau très chaude et de&nbsp;savon.</li>
<li>On masse avec tendresse pour ne pas faire de trous au début, c’est cette action qui va relier les différents filaments de laine progressivement (c’est le feutrage à proprement&nbsp;parler).</li>
<li>On retourne et on replie l’excédent sur les bords du patron avant d’ajouter nos trois couches de laine sur cette nouvelle&nbsp;face.</li>
<li>Arrivé à cette étape, on a notre structure et on n’ajoutera plus de laine (à part souci). La simplicité du processus est&nbsp;incroyable.</li>
<li>On fait bien le détourage du pouce dans le cas d’une mitaine. Ne pas oublier de replier le bord en bas, il faut laisser un trou pour le passage de la&nbsp;main&#8239;!</li>
<li>On continue de masser recto-verso un très grand nombre de fois en ajoutant de l’eau chaude et du savon (le foulage) jusqu’à ce que ça tienne bien et que l’on puisse extraire le&nbsp;patron.</li>
<li>On peut maintenant rouler nos <em>maki</em>&#8239;! Cela permet de masser le rouleau et d’avoir d’autres angles pour les fibres. Il faut aussi se concentrer sur les bords pour arrondir les angles et commencer à former la&nbsp;mitaine.</li>
<li>Au bout d’un moment —&nbsp;ces premières étapes ont pris une bonne heure&nbsp;— on passe à la deuxième mitaine, retour à l’étape&nbsp;2…</li>
<li>Avec les deux mitaines en main, on peut les feutrer/fouler réciproquement en se frottant les mains toujours en ajoutant du savon et de l’eau brulante (c’est un atelier vraiment propre) pendant là aussi de longues minutes, l’objectif est d’arriver à approcher de la taille finale désirée. On frotte dans le sens où on veut réduire la taille, par exemple en horizontal sur l’ouverture pour&nbsp;resserrer.</li>
<li>On termine en rinçant abondamment le savon et en plongeant la pièce dans une solution vinaigrée pour changer le pH, ce qui fixe le tout et adouci la&nbsp;laine.</li>
<li>(Optionnel) Il est possible de réduire encore <em>a posteriori</em> en remouillant avec du savon MAIS il n’est pas possible de revenir en arrière donc il vaut mieux s’arrêter trop tôt plutôt que trop tard, d’autant que ça rétrécit au&nbsp;séchage.</li>
</ol>
<p>Il y a très peu de pertes dans le processus même si ça prend beaucoup de savon. Le gros intérêt de la technique, c’est que la pièce est vraiment adaptée au support sur laquelle on la feutre+foule (ici mes mains). Il est possible de couper le surplus en bas pour égaliser mais je préfère que ça remonte plus haut sur l’avant-bras. Le résultat est un peu rigide car j’ai privilégié la chaleur (et les erreurs de débutant) mais il est possible de mettre moins de laine. J’arrive néanmoins à tenir un bâton de ski sans&nbsp;forcer.</p>
<figure>
    <a href="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-13-mitaines-feutrage.jpg"
            width="3024" height="4032"
            srcset="/static/david/2024/2024-02-13-mitaines-feutrage.jpg 3024w, /static/david/2024/2024-02-13-mitaines-feutrage_660x440.jpg 660w, /static/david/2024/2024-02-13-mitaines-feutrage_990x660.jpg 990w, /static/david/2024/2024-02-13-mitaines-feutrage_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3024 / 4032))"
            loading="lazy"
            decoding="async"
            alt="Les mitaines réalisées qui sèchent verticalement.">
    </a>
    <figcaption>Le résultat après 4 heures de travail et pas mal d’huile de&nbsp;coude.</figcaption>
</figure>
<p>Anecdote&nbsp;: j’étais le plus jeune et le seul homme, c’était intéressant d’être au sein de cette <em>sororité des aînées</em>, il ne manquait qu’une cheminée pour avoir une soirée d’anecdotes québécoises au coin du&nbsp;feu&nbsp;🤗.</p>
<p>Au retour, après avoir essoré les mitaines pour qu’elles ne gouttent pas trop, j’ai pu les mettre pour qu’elles affrontent leur première tempête de neige improvisée. Même mouillées et dégoulinantes, j’arrivais à garder mes mains au chaud à l’intérieur… ah, la laine&nbsp;&lt;3. J’ai hâte de tester avec avec une sous-couche et/ou une sur-couche, ça tombe bien car les températures redescendent&nbsp;enfin.</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/processus/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#processus</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/02/12/" title="Lien permanent vers cet article">Renards</a> <time datetime="2024-02-12">12 février 2024</time>
    </h2>
    
<p>Entre chien et loup, le renard pointe le bout de son nez pointu. Après avoir attendu patiemment attendu que mon appareil photo arrive à ses limites, le voilà avançant vers moi d’un pas&nbsp;décidé.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-1.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-1.jpg"
            width="3456" height="2304"
            srcset="/static/david/2024/2024-02-12-renards-1.jpg 3456w, /static/david/2024/2024-02-12-renards-1_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-1_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-1_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3456 / 2304))"
            loading="lazy"
            decoding="async"
            alt="Un renard trottinant sur la rivière gelée.">
    </a>
    <figcaption>Un renard trottinant sur la rivière&nbsp;gelée.</figcaption>
</figure>
<p>Même en poussant les réglages au maximum lors du développement, je me rends bien compte que je suis dans la nuit bientôt noire. Alors je tente d’utiliser l’éclairage de la ville, la pollution lumineuse se reflétant sur la neige m’offre de précieux <em>stops</em>&nbsp;photographiques.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-2.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-2.jpg"
            width="2560" height="3840"
            srcset="/static/david/2024/2024-02-12-renards-2.jpg 2560w, /static/david/2024/2024-02-12-renards-2_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-2_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-2_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2560 / 3840))"
            loading="lazy"
            decoding="async"
            alt="Un renard sur la rivière gelée avec un pont en fond.">
    </a>
    <figcaption>Un renard sur la rivière gelée avec un pont en&nbsp;fond.</figcaption>
</figure>
<p>L’équivalent 800mm que je tiens à bout de bras n’aide pas à faire baisser les ISO, tant pis, je compte trop sur ma mobilité pour être capable de tenter une approche. La neige est bien trop gelée et bruyante pour que j’ai la moindre chance. Un skieur nocturne détourne leur&nbsp;attention.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-3.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-3.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-3.jpg 3840w, /static/david/2024/2024-02-12-renards-3_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-3_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-3_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Deux renards&nbsp;: l’un sur la rivière, l’autre sur un ponton abandonné.">
    </a>
    <figcaption>Deux renards : l’un sur la rivière, l’autre sur un ponton&nbsp;abandonné.</figcaption>
</figure>
<p>La luminosité est telle que je vois la lumière de mon autofocus qui se reflète, bien rouge, au fond de ses yeux à une cinquantaine de mètres. Iel m’attend. Je ne saurais jamais jusqu’à quelle distance est-ce que l’on se seraient acceptés car une coureuse met fin à ce tête-à-tête nocturne. Si nous sommes tous le deux routiniers, nous aurons certainement d’autres occasions de nous&nbsp;croiser.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-4.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-4.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-4.jpg 3840w, /static/david/2024/2024-02-12-renards-4_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-4_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-4_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Un renard qui me regarde depuis le chemin.">
    </a>
    <figcaption>Un renard qui me regarde depuis le&nbsp;chemin.</figcaption>
</figure>
<p>Photographiquement parlant, je crois que je préfère la prise floue de la veille. Une forme d’acceptation qu’il puisse encore y avoir des animaux libres d’une capture trop&nbsp;nette.</p>
<figure>
    <a href="/static/david/2024/2024-02-12-renards-5.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-02-12-renards-5.jpg"
            width="3840" height="2560"
            srcset="/static/david/2024/2024-02-12-renards-5.jpg 3840w, /static/david/2024/2024-02-12-renards-5_660x440.jpg 660w, /static/david/2024/2024-02-12-renards-5_990x660.jpg 990w, /static/david/2024/2024-02-12-renards-5_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 3840 / 2560))"
            loading="lazy"
            decoding="async"
            alt="Un renard flou qui se reflète dans l’eau de la rivière qui fond.">
    </a>
    <figcaption>Vais-je passer à travers ? Je ne suis pas le seul à me poser ces&nbsp;questions…</figcaption>
</figure>
<p>Merci au parent devant l’école qui m’a dit qu’il n’y avait pas de renards dans le parc cette année. Mon esprit de con·tradiction a fait le&nbsp;reste.</p>
<a href="#hr-71" title="Lien vers cette section de la page"><hr id="hr-71" /></a>

<blockquote>
<p>Les carnets Web servent également à faire rêver les autres de façon inattendue et la plupart du temps silencieusement. N’hésitez pas à publier. Vous toucherez le cœur et l’imagination d’une personne quelque part dans le&nbsp;monde.</p>
<p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/02/04/enfant" hreflang="fr"
            title="Consultation de l’article">D’un enfant à l’autre</a>
            <a href="/david/cache/2024/40a1a0f90d7ac25a6150e6e27ac310d4/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/02/04/enfant"
                data-date="2024-02-12"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>🧡</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/echanges/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#échanges</a>
          
            <a href="/david/2024/photographie/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#photographie</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/09/" title="Lien permanent vers cet article">Version</a> <time datetime="2024-02-09">9 février 2024</time>
    </h2>
    
<p>Il y a cette appréhension à sortir une version&nbsp;2&nbsp;qui est bloquante sur pas mal de projets / produits / outils. Réduire ses ambitions quitte à planifier les versions 3&nbsp;et 4&nbsp;par la même occasion est un moyen de faire baisser la pression de ses propres attentes. Ce n’est plus <strong>l</strong>’évènement mais <em>un</em> évènement parmi les suivants qui vient s’intégrer dans une dynamique plus&nbsp;globale.</p>
<p>Il y a d’un côté l’<a href="/david/2024/01/19/#hr-38">effort pour les personnes qui vont l’utiliser</a> et de l’autre <a data-link-domain="yolover.org" href="https://yolover.org/" hreflang="en"
            title="Consultation de l’article (anglais)">la motivation</a>
            <a href="/david/cache/2024/959374400b4bb6d58c74116ffd08281b/" hreflang="en"
                data-tippy data-description="Realistic versioning for modern software."
                data-source="https://yolover.org/"
                data-date="2024-02-09"
                data-favicon="https://yolover.org/favicon.png"
                data-domain="yolover.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> pour les personnes qui vont développer et maintenir le&nbsp;produit.</p>
<p>Je caricature mais on est&nbsp;vendredi.</p>

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

<blockquote>
<p>Ceci est tellement vrai que nous sommes seuls au monde dans la communication que, lorsque quelqu’un écoute et lorsque la communication réussit, c’est un miracle étincelant. […] C’est tellement rare, c’est tellement improbable, c’est tellement miraculeux que c’est peut-être ça la civilisation et la culture. <mark>Rencontrer quelqu’un qui&nbsp;écoute.</mark></p>
<p><cite><em>Le Bonheur possible</em>, Michel Serres&nbsp;(1997)</cite></p>
</blockquote>
<p>Exercice de mise en forme des <a href="/david/2024/02/02/" title="Valeurs">valeurs</a> émergeantes des valeurs de Scopyleft aujourd’hui. Je suis content d’y reconnaître chaque personne et <em>en même temps</em> un collectif qui se découvre et qui apprend à faire ensemble. Avoir 8&nbsp;valeurs qui se démarquent dans 3&nbsp;contextes différents me donne davantage d’information et d’envie qu’une poignée affichée sur un site web. Un maillage de compréhension réciproque est en train d’être tissé entre&nbsp;nous.</p>

<blockquote>
<p>Ce besoin de venir (re)questionner la manière de faire ensemble est nécessaire à ces collectifs. Ce n’est pas dans l’objectif d’un travail évaluatif des bonnes ou mauvaises pratiques, mais bien dans un désir d’entretenir la flamme collective. Ces collectifs ont besoin de se questionner sans cesse sur leurs pratiques. Sur les raisons qui les poussent à faire ensemble. Sans quoi, l’activité du groupe piétine et ses membres peuvent se dégager du projet commun. C’est une manière de redonner de l’élan et de la motivation au collectif. Ce besoin de se redire&nbsp;: «&nbsp;pourquoi nous sommes-nous mis ensemble et où voulions-nous&nbsp;aller&#8239;?&nbsp;»</p>
<p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/lart-de-conter-nos-experiences-collectives.html" hreflang="fr"
            title="Consultation de l’article">L’art de conter nos expériences collectives</a>
            <a href="/david/cache/2024/bd0c3ccce5c3f229f84c6c132ebdaca9/" hreflang="fr"
                data-tippy data-description="Faire récit à l'heure du storytelling par Benjamin Roux"
                data-source="https://blog.notmyidea.org/lart-de-conter-nos-experiences-collectives.html"
                data-date="2024-02-08"
                data-favicon=""
                data-domain="blog.notmyidea.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>

    
      <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/evolution/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#évolution</a>
          
          <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
        </p>
      </nav>
    
  
    <h2>
      <a href="/david/2024/02/04/" title="Lien permanent vers cet article">Tooltipopover</a> <time datetime="2024-02-04">4 février 2024</time>
    </h2>
    

<blockquote lang="en">
<p><a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API">Popover API</a> – This provides a declarative mechanism to create content that always renders in the topmost-layer, so that it overlays other web page content. <mark>This can be useful for building features like tooltips</mark> and notifications. Support for popover was the #1&nbsp;author request in the recent State of HTML&nbsp;survey.</p>
<p><cite><em><a data-link-domain="hacks.mozilla.org" href="https://hacks.mozilla.org/2024/02/announcing-interop-2024/" hreflang="en"
            title="Consultation de l’article (anglais)">Announcing Interop 2024</a>
            <a href="/david/cache/2024/0deb984b2f799d391607afcaa488446d/" hreflang="en"
                data-tippy data-description="Following the success of Interop 2023, we are pleased to confirm that the project will continue in 2024 with a new selection of focus areas."
                data-source="https://hacks.mozilla.org/2024/02/announcing-interop-2024/"
                data-date="2024-02-03"
                data-favicon="https://hacks.mozilla.org/wp-content/themes/Hax/favicon.ico"
                data-domain="hacks.mozilla.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>Ma première intuition pour enrichir les liens de la version archivée était de passer par des éléments natifs (comme toujours). Initialement, j’ai même envisagé un <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">élément <code>&lt;dialog&gt;</code></a> qui est déjà mieux supporté mais ça rentrait mal dans le DOM là où je voulais l’insérer. Je me met alors en quête d’un <em><a data-link-domain="github.com" href="https://github.com/oddbird/popover-polyfill">polyfill</a></em> pour la Popover API qui pourrait convenir mais j’ai un peu peur des effets de bord vu que je découvre et qu’il y a quand même <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using">pas mal de possibilités</a>. J’en suis même à me <a data-link-domain="open-ui.org" href="https://open-ui.org/components/popover.research.explainer/" hreflang="en"
            title="Consultation de l’article (anglais)">lire une bonne page de doc</a>
            <a href="/david/cache/2024/bf61b62532f71e39e7b92c76dc36bb0f/" hreflang="en"
                data-tippy data-description="A very common UI pattern on the Web, for which there is no native API, is “popover UI”, also sometimes called “popovers”, “pop up UI”, or “popovers”. Popovers are a general class of UI that have three common behaviors"
                data-source="https://open-ui.org/components/popover.research.explainer/"
                data-date="2024-02-03"
                data-favicon="https://open-ui.org/images/favicon-32x32.png"
                data-domain="open-ui.org"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a> pour essayer de comprendre la distinction entre les&nbsp;deux.</p>
<p>Je finis par abandonner cette piste et je me dis que ça pourrait être un <em>Web Component</em> intéressant. Je m’arrache les cheveux un bon petit moment sur le positionnement et je capitule en me disant qu’il y a déjà des personnes qui ont produit des outils comme <a data-link-domain="floating-ui.com" href="https://floating-ui.com/">Floating UI</a> ou <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/">Tippy.js</a>. Choisir c’est renoncer… et j’ai fait les deux à la fois en optant pour Tippy qui <a data-link-domain="atomiks.github.io" href="https://atomiks.github.io/tippyjs/v6/accessibility/" hreflang="en"
            title="Consultation de l’article (anglais)">prend soin de l’accessibilité</a>
            <a href="/david/cache/2024/af0aee71fef1821c89ce368622f9a464/" hreflang="en"
                data-tippy data-description="Tooltip and popovers are usually not mouse-only UI elements. If vital functionality or information is contained within them, they should be accessible to keyboard and touch inputs so that users who navigate interfaces without using a mouse are not locked out."
                data-source="https://atomiks.github.io/tippyjs/v6/accessibility/"
                data-date="2024-02-03"
                data-favicon="https://atomiks.github.io/tippyjs/favicon-32x32.png?v=68cd85fe631cbce4dad8be8ef26f93f3"
                data-domain="atomiks.github.io"
                ><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>. J’ai trop besoin d’avoir <em>l’expérience de l’interface</em> pour pouvoir affiner par la suite et faire les choses à ma&nbsp;sauce.</p>
<p>N’hésitez pas à jouer avec et à me faire des retours, c’est amené à&nbsp;évoluer.</p>
<a href="#hr-65" title="Lien vers cette section de la page"><hr id="hr-65" /></a>

<blockquote lang="en">
<p>My recipe for fiction set ten years in the future used to be 90% already-here, 9% not-here-yet but predictable, and 1% who-ordered-that. But <mark>unfortunately the ratios have changed.</mark> I think we're now down to maybe 80% already-here —climate change takes a huge toll on infrastructure— then 15% not-here-yet but predictable, and a whopping 5% of utterly unpredictable deep&nbsp;craziness.</p>
<p><cite><em><a data-link-domain="antipope.org" href="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html" hreflang="en"
            title="Consultation de l’article (anglais)">Dude, you broke the future!</a>
            <a href="/david/cache/2024/71b177818657a209fc76f23c08c21d25/" hreflang="en"
                data-tippy data-description="In this talk, author Charles Stross will give a rambling, discursive, and angry tour of what went wrong with the 21st century, why we didn't see it coming, where we can expect it to go next, and a few suggestions for what to do about it if we don't like it."
                data-source="https://www.antipope.org/charlie/blog-static/2018/01/dude-you-broke-the-future.html"
                data-date="2024-02-03"
                data-favicon="https://www.antipope.org/favicon.ico"
                data-domain="antipope.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>Cela me rappelle une discussion récente au sujet du manque de pertinence de la météo et de la difficulté à faire de la prédiction sur des données rendues obsolètes par le changement climatique. Les modèles ne sont pas (encore&#8239;?) adaptés à un tel&nbsp;chaos.</p>
<p>Manifestement, les écrivains non&nbsp;plus.</p>

<blockquote lang="en">
<p>Someone out there is working on it: a geolocation-aware social media scraping deep learning application, that uses a gamified, competitive interface to reward its “players” for joining in acts of mob violence against whoever the app developer hates. Probably it has an inoccuous-seeming but highly addictive training mode to get the users accustomed to working in teams and obeying the app's instructions—think Ingress or Pokemon Go. Then, at some pre-planned zero hour, <mark>it switches mode and starts rewarding players for violence</mark>—players who have been primed to think of their targets as vermin, by a steady drip-feed of micro-targeted dehumanizing propaganda delivered over a period of&nbsp;months.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>Ah si en&nbsp;fait&nbsp;😬.</p>
<a href="#hr-66" title="Lien vers cette section de la page"><hr id="hr-66" /></a>

<blockquote lang="en">
<p>If we want a system that is consistent with the flourishing of life on earth, we will need a system that mimics nature. Our current economic model doesn’t - for many reasons - and needs to change. Looking at nature, including our own human nature in our private lives, gives us many ideas for what this new, harmonious system could look&nbsp;like.</p>
<p><cite><em><a data-link-domain="erinremblance.substack.com" href="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private" hreflang="en"
            title="Consultation de l’article (anglais)">“We Are All Socialists in Our Private Lives”</a>
            <a href="/david/cache/2024/f5b5c3dff862cc55318684cf434b8d74/" hreflang="en"
                data-tippy data-description="David Graeber gets to the heart of human (and more than human) nature."
                data-source="https://erinremblance.substack.com/p/we-are-all-socialists-in-our-private"
                data-date="2024-02-03"
                data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F79e3e832-517f-4ca3-989b-41eb1c8249d7%2Ffavicon-16x16.png"
                data-domain="erinremblance.substack.com"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p>Il n’y a que les classes moyennes qui peuvent être socialistes. C’était tout l’enjeu de leur destruction pour n’avoir plus que des personnes qui aient peur de perdre le <em>trop peu</em> ou le <em>vraiment beaucoup</em> qu’elles ont. Et la peur rend la manipulation tellement plus&nbsp;facile…</p>

<blockquote lang="en">
<p>If a monkey hoarded more bananas than it could eat, while most of the other monkeys starved, scientists would study that monkey to figure out what the heck was wrong with it. When humans do it, we put them on the cover of&nbsp;Forbes.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<p>🙈</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/technique/"
               title="Liste de tous les articles 2024 associés à cette étiquette"
               rel="tag">#technique</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/01/30/" title="Lien permanent vers cet article">Équipe</a> <time datetime="2024-01-30">30 janvier 2024</time>
    </h2>
    

<blockquote lang="en">
<p>We can typically break down collaboration groups into three&nbsp;types:</p>
<ul>
<li><strong>Real teams</strong> are all about solving the hardest, most complex problems. A diverse set of perspectives and skills is required to untangle these sorts of problems, for which there is no obvious solution. […]</li>
<li><strong>Working groups</strong> are all about efficiency. Most people spend most of their productive time in working groups. We’ll say it again: there is nothing wrong with being in a working group. […]</li>
<li><strong>Teams-in-name-only</strong> are groups that claim to be a team, but lack emotional commitment and shared purpose. They are like working groups, but without the efficient processes and individual responsibility. […]</li>
</ul>
<p>Although most people are told that they’re part of a team, the reality is that, more often than not, they’re members of a&nbsp;team-in-name-only.</p>
<p><cite><em><a data-link-domain="strategy-business.com" href="https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team" hreflang="en"
            title="Consultation de l’article (anglais)">Teaming is hard because you’re probably not really on a team</a>
            <a href="/david/cache/2024/9b4b5364526390ba1db9c4a651ea8311/" hreflang="en"
                data-tippy data-description="Hybrid and remote work are complicating many of the collaborative challenges that were present long before the pandemic arrived."
                data-source="https://www.strategy-business.com/article/Teaming-is-hard-because-youre-probably-not-really-on-a-team"
                data-date="2024-01-29"
                data-favicon="https://www.strategy-business.com/media/image/favicon22-16x16.png"
                data-domain="strategy-business.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>Devenir une (vraie) équipe prend du temps. Il faut même pouvoir envisager que cela ne devienne jamais le cas. Et ce n’est peut-être pas un souci si on n’a pas ces attentes… ou qu’on peut les&nbsp;attendre.</p>
<a href="#hr-56" title="Lien vers cette section de la page"><hr id="hr-56" /></a>
<p><a data-link-domain="github.com" href="https://github.com/zedeus/nitter/issues/1155#issuecomment-1913361757">Nitter est mort.</a> C’était le seul moyen qu’il me restait pour suivre les <em>drama</em> dans la communauté des échecs pro (et ils sont si&nbsp;nombreux&#8239;!).</p>
<p>Ce n’est pas si&nbsp;grave.</p>
<a href="#hr-57" title="Lien vers cette section de la page"><hr id="hr-57" /></a>
<figure>
    <a href="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg"
        title="Cliquer pour une version haute résolution">
        <img
            src="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg"
            width="2560" height="1536"
            srcset="/static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat.jpg 2560w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_660x440.jpg 660w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_990x660.jpg 990w, /static/david/2024/2024-01-30-grande-boucle-hauts-sommets-st-donat_1320x880.jpg 1320w"
            sizes="min(100vw, calc(100vh * 2560 / 1536))"
            loading="lazy"
            decoding="async"
            alt="Une carte de la grande boucle des hauts sommets de St-Donat.">
    </a>
    <figcaption>La grande boucle des hauts sommets de St-Donat. 84 km de sentiers. Je cherche encore les hauts sommets&nbsp;🙊.</figcaption>
</figure>
<p>Un autre lieu où il serait possible de <a href="/david/2024/01/19/" title="Marcher">marcher</a> en parlant, ou l’inverse. Il est même possible de prolonger en suivant le sentier inter-centre vers&nbsp;Mont-Tremblant.</p>
<a href="#hr-58" title="Lien vers cette section de la page"><hr id="hr-58" /></a>

<blockquote>
<p>Si j’écrivais <strong>faire ensemble</strong>, ça serait <em>faux</em>. C’est une combinaison de <strong>expérimenter des chemins vers un monde auquel j’aspire</strong> et de <strong>les partager</strong>. Ça m’intéresse de le faire, et ça ne m’intéresse pas si c’est juste pour moi. Le prompt, c’est écouter mes dissonnances cognitives et suivre le fil. Y cogiter à plusieurs, lire à ces sujets, tester seul ou à plusieurs, le restituer/mettre en œuvre. Arrêter, continuer, recommencer.</p>
<p><cite><em><a data-link-domain="détour.studio" href="https://d%C3%A9tour.studio/yearnotes/4/">Yearnotes #4 •&nbsp;détour.studio</a></em></cite></p>
</blockquote>
<p>J’aime beaucoup la mélodie des <em>Year</em>notes de&nbsp;Thomas.</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/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/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/" hreflang="fr"
            title="Consultation de l’article">L’Observatoire des perspectives utopiques</a>
            <a href="/david/cache/2024/7ed7f4aefae1b5af33b3ec1f607a633f/" hreflang="fr"
                data-tippy data-description="Avec le soutien de nos partenaires Accédez ci-dessous aux principaux enseignements (classés par thématiques) de l’Observatoire."
                data-source="https://lobsoco.com/perspectives-utopiques-vague-3/"
                data-date="2024-01-24"
                data-favicon="https://lobsoco.com/wp-content/uploads/2020/09/cropped-FAVICON-01-32x32.png"
                data-domain="lobsoco.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>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" hreflang="en"
            title="Consultation de l’article (anglais)">Let’s make the indie web easier</a>
            <a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" hreflang="en"
                data-tippy data-description=""
                data-source="https://gilest.org/indie-easy.html"
                data-date="2024-01-09"
                data-favicon="https://gilest.org/favicon.ico"
                data-domain="gilest.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>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" hreflang="en"
            title="Consultation de l’article (anglais)">The Perfect Web Page</a>
            <a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" hreflang="en"
                data-tippy data-description="How the internet reshaped itself around Google’s search algorithms — and into a world where websites look the same."
                data-source="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization"
                data-date="2024-01-09"
                data-favicon="https://cdn.vox-cdn.com/uploads/chorus_asset/file/23989695/favicon_32x32.png"
                data-domain="theverge.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>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" hreflang="en"
            title="Consultation de l’article (anglais)">Data Luddism</a>
            <a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" hreflang="en"
                data-tippy data-description=""
                data-source="https://www.danmcquillan.org/dataluddism.html"
                data-date="2024-01-09"
                data-favicon=""
                data-domain="danmcquillan.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-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" hreflang="en"
            title="Consultation de l’article (anglais)">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a>
            <a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" hreflang="en"
                data-tippy data-description="An NPM user named PatrickJS launched a troll campaign with a package called  everything,  which depends on all public npm packages."
                data-source="https://socket.dev/blog/when-everything-becomes-too-much"
                data-date="2024-01-09"
                data-favicon="https://socket.dev/favicon-32x32.png"
                data-domain="socket.dev"
                ><svg xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="square"
                    stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
                    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                    <line x1="12" y1="17" x2="12.01" y2="17"></line>
                </svg>
                <span class="sr-only">[archive]</span></a></em></cite></p>
</blockquote>
<p><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/" hreflang="en"
            title="Consultation de l’article (anglais)">Where have all the websites gone?</a>
            <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"
                data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."
                data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"
                data-date="2024-01-09"
                data-favicon="https://www.fromjason.xyz/img/favicon.png"
                data-domain="fromjason.xyz"
                ><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>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" hreflang="fr"
            title="Consultation de l’article">plaisir d’ébauche</a>
            <a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" hreflang="fr"
                data-tippy data-description=""
                data-source="https://www.la-grange.net/2024/01/06/ebauche"
                data-date="2024-01-07"
                data-favicon="https://www.la-grange.net/favicon.ico"
                data-domain="la-grange.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>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" hreflang="en"
            title="Consultation de l’article (anglais)">Vlad (admin Kagi) répondant</a>
            <a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" hreflang="en"
                data-tippy data-description="Brave, as you know, is led by Brendan Eich. s homophobia is so disgusting that he was forced to resign as the leader..."
                data-source="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"
                data-date="2024-01-07"
                data-favicon="https://kagifeedback.org/assets/favicon-bmwk4ltf.png"
                data-domain="kagifeedback.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> à «&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" hreflang="en"
            title="Consultation de l’article (anglais)">Pas de politique au travail</a>
            <a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" hreflang="en"
                data-tippy data-description="Basecamp announced it would ban “societal and political discussions” at work. But the hardest conversations at work were about the company itself. Platformer’s Casey Newton spoke with half a dozen employees about the controversy."
                data-source="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"
                data-date="2024-01-07"
                data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
                data-domain="theverge.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> 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>