davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
							<!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>
    Tag #partage
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #partage">
  <!-- 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)">
  <!-- Documented, feel free to shoot an email. -->
  <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t4_poly_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/triplicate_t3_regular.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_bold.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <link rel="preload"
        href="/static/david/css/fonts/triplicate_t3_italic.woff2"
        as="font"
        type="font/woff2"
        media="(prefers-color-scheme: dark)"
        crossorigin>
  <script>
    function toggleTheme(themeName) {
      document.documentElement.classList.toggle(
        'forced-dark',
        themeName === 'dark'
      )
      document.documentElement.classList.toggle(
        'forced-light',
        themeName === 'light'
      )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
      toggleTheme(selectedTheme)
    }
  </script>
  
  <style type="text/css">
    details[open] summary {
      display: none;
    }
  </style>

  <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
        data-instant-intensity="viewport-all">
    
  <header>
    <h1>Publications relatives au tag #partage</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">
        <svg class="icon icon-home">
          <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
        </svg>
      Accueil</a>
      • <a rel="tags"
    href="/david/#tags-2023"
    title="Liste de toutes les étiquettes">
      <svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg>
    Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  
    <h2>
      <a href="/david/2023/09/13/" title="Lien permanent vers cet article">Documentation</a> (2023-09-13)
    </h2>
    
      

<blockquote lang="en">
<p>The deeper I dig into my research, the more case studies and examples I find. Institutional memory is frequently overlooked and undervalued - until the moment when someone needs access to memory right now, and of course by then it’s too late. Good remembering means turning tacit knowledge into explicit knowledge; <mark>if all your tacit knowledge has left the building inside the heads of former colleagues, it’s lost to you&nbsp;forever.</mark></p>
<p>So I think there’s a case for allowing and encouraging documentation for teams, just as much as documentation for software. Writing that documentation is a task, It needs to be part of someone’s job. Every organisation needs a little bit of storytelling capability, to help make that job&nbsp;easier.</p>
<p><cite><em><a href="https://gilest.org/htr.html">How teams remember</a></em>&nbsp;(<a href="/david/cache/2023/5a9fa7db62f151b8a863b949ed4e9e5f/">cache</a>)</cite></p>
</blockquote>
<p>J’ai développé un outil pour Scopyleft l’année dernière qui s’intitule «&nbsp;Le Voilier&nbsp;». Il s’agit d’un lieux où l’on consigne nos discussions, propositions et résolutions. C’était important car il y avait pas mal de perte/dilution d’information orale, ce qui est classique en équipes distribuées qui grandissent. Depuis un an et demi, il y a 381&nbsp;sujets qui ont été consignés dans ce <a href="/david/2022/12/19/">journal</a> de bord collectif, c’est un outil vivant. Des fonctionnalités bourgeonnent ou passent au compost au gré des besoins, c’est assez plaisant d’avoir la flexibilité de connaître le générateur du site (350&nbsp;lignes de Python à ce jour) et de pouvoir sortir du cadre sans que ce soit trop&nbsp;douloureux.</p>
<p>Cela a commencé avec un site totalement statique qui était (re)construit par l’intégration continue à chaque ajout de fichier <em>markdown</em> avec les bonnes méta-données dans un dossier dédié. Classique. C’était facile pour les personnes familières de git(lab) mais moins pratique pour celles qui ne le sont pas, notamment lorsqu’il faut prendre des notes en séance. L’expérience utilisateur·ice des forges logicielles n’est pas vraiment adaptée à un tel usage, surtout dans un contexte de charge cognitive&nbsp;élevée.</p>
<p>J’ai donc transformé cela en site <em>semynamique</em> 🌱&nbsp;: on reste sur la même infrastructure mais je rajoute un formulaire (toujours statique) qui va soumettre les données vers une seule fonction Python/wsgi qui consiste à créer le fichier <em>markdown</em> conforme aux attentes de l’outil et à le pousser sur le dépôt. Cela a rendu l’outil plus accessible et avenant. Depuis, j’ai décliné ce principe pour d’autres <em>scenarii</em> avec de bons&nbsp;retours.</p>
<p>Avec l’expérience et un petit script de déploiement, cela me prend moins d’une heure à mettre en place sur AlwaysData avec un strict minimum de maintenance. J’ai une relative tranquillité d’esprit aussi car seule une petite partie du site serait inutilisable si le service tombait et il reste la possibilité d’ajouter des fichiers dans git à la main s’il y avait une&nbsp;urgence.</p>
<p>Je ne sais pas trop quoi faire à partir de là, je me dis que ça pourrait en inspirer d’autres. Entre les sites purement statiques et les usines à gaz en JS, il y a tout un dégradé de couleurs enthousiasmantes, certaines restant à&nbsp;découvrir&#8239;!</p>
<p><em>Peut-être qu’à un moment, on pourrait aussi proposer un catalogue d’outils utiles aux coopératives — à l’instar de <a href="https://paheko.cloud/">Paheko</a> pour les&nbsp;associations…</em></p>
<hr />

<blockquote>
<p>🏡 Une grande partie de mon entourage est déjà propriétaire. Ça en dit long sur la sphère dans laquelle j’évolue. J’ai l’impression que le fait d’acheter une maison fait partie de la liste non-négociable d’une vie réussie dans notre monde capitaliste. Jusqu’à très récemment, je n’avais jamais interrogé ce&nbsp;postulat.</p>
<p><cite><em><a href="https://ynote.hk/mots/argent/propriete.html">Propriété par Fanny Cheung</a></em>&nbsp;(<a href="/david/cache/2023/37b0c9d01d6f788bee398b64377cb6c1/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🔨 Yes, it’s fair to point out that AI in its many different software manifestations can be considered a tool. But that is not the point of the statement. The word to watch out for is “just”. If someone were to say ”it’s a tool”, that makes sense. But the word “just” is there to shed&nbsp;accountability.</p>
<p>Hence my concern is that the statement itself removes accountability and consideration for the bigger picture effects. <mark>Saying something is just a tool creates the faulty mental model</mark> of all tools having interchangeable qualities from an ethical perspective, which simply isn’t&nbsp;true.</p>
<p><cite><em><a href="https://axbom.com/hammer-ai/">If a hammer was like AI…</a></em>&nbsp;(<a href="/david/cache/2023/aac3c4716f9ff73e7409ecbc9550491b/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>💯 When it comes to front-end development, I’m worried that we’ve reached a state where the more complex over-engineered approach is viewed as the&nbsp;default.</p>
<p>I may be committing a fundamental attribution error here, but I think that we’ve reached this point not because of any consideration for users, but rather <mark>because of how it makes us developers feel.</mark> Perhaps building an old-fashioned website that uses HTML for navigations feels too easy, like it’s beneath us. But building an “app” that requires JavaScript just to render text on a screen feels like <em>real</em>&nbsp;programming.</p>
<p><cite><em><a href="https://adactio.com/journal/20442">Multi-page web apps</a></em>&nbsp;(<a href="/david/cache/2023/efc348f6559d55129657c7ba9d740b76/">cache</a>)</cite></p>
</blockquote>

    
  
    <h2>
      <a href="/david/2023/03/13/" title="Lien permanent vers cet article">Traditions</a> (2023-03-13)
    </h2>
    
      

<blockquote lang="en">
<p>Documents are documents. Books are books, recordings are recordings, and so on. As time has gone on, though, I’ve observed the probably obvious-to-others fact that <strong>Lore</strong> is the grease between the concrete blocks of knowledge, the carved step in an otherwise impossible-to-scale mountain, the small bit of powder sprinkled through a workspace to ensure sparks don’t fly and things don’t burn. Inconceivably odd to the outsider, but vital to the dedicated or intense practice of the&nbsp;craft.</p>
<p>Certainly, the ideal situation is lore is inlaid into a framework of knowledge. […]</p>
<p><mark>The danger in this process, the potential lost ballast in the rise to the skies, is that the lore-to-knowledge transfer is lossy, messy, and arbitrary.</mark> Maybe those in the know want to keep the information to themselves, so it won’t be given to whoever the person or persons are who are laying down the written form. Maybe the chronicler of information has blind spots they don’t know about and not enough people to correct them. Or, more likely, you have to set the “noise filter” of the information to not go down the rabbit and rat holes of contingencies that maybe a dozen or two people will even want to know about, to the favor of that which <em>everyone</em> will need. The outcome is always the same: Lore loses in the long&nbsp;run.</p>
<p><cite><em><a href="http://ascii.textfiles.com/archives/5509">Discord, or the Death of Lore «&nbsp;ASCII by Jason Scott</a></em>&nbsp;(<a href="/david/cache/2023/f6e269f9a6e16436827169039d551623/">cache</a>)</cite></p>
</blockquote>
<p>La documentation des us et coutumes, des pratiques culturelles, de façon numérique est un vrai défi. Surtout pour les personnes qui sont plutôt de culture orale dans leur façon de&nbsp;transmettre.</p>
<p>Ce n’est pas mon cas mais je me retiens toujours de <em>lutter contre</em> en proposant des outils complémentaires qui viennent enrichir la souvenance que l’on peut avoir d’un échange. Un <a href="/david/2022/12/19/">journal</a>, une notice, un billet de blog, qu’importe le format pourvu que l’on ait une URL pérenne qui puisse être&nbsp;référencée.</p>
<p>Cela me prend du temps, mais bien moins que de devoir reprendre les échanges de zéro. Ou de faire un peu trop confiance à l’interprétation faite par ma propre&nbsp;mémoire&#8239;!</p>
<hr />
<p>J’essaye <a href="https://hazeover.com/">HazeOver</a> depuis maintenant une semaine et je me demande comment ça n’est pas une fonctionnalité par défaut de macOS. Je n’ai aucune fenêtre maximisée et j’ai un écran relativement grand, cet outil me permet de focaliser sur la fenêtre en cours. Lors du partage d’écran complet en visio (pour alterner code/navigateur par exemple), un coup de scroll sur l’icône dans la barre du haut et hop on ne voit que la fenêtre active avec un fond&nbsp;noir.</p>
<p>Autre test du moment&nbsp;: <a href="https://sindresorhus.com/folder-peek">Folder Peek</a>, Sindre Sorhus fait plein d’autres <a href="https://sindresorhus.com/apps">petits outils intéressants</a>.</p>
<hr />
<p>Parce qu’il n’y a pas de raisons que ça soit restreint à un public&nbsp;mastodon&nbsp;:</p>

<blockquote>
<p>Pour rappel&nbsp;: si vous souhaitez proposer un sujet pour une conférence comme <a href="https://mamot.fr/@ParisWeb">@ParisWeb</a> ou <a href="https://piaille.fr/@sudweb">@sudweb</a> je me propose de vous accompagner dans la démarche, surtout si vous faites partie d’une population peu représentée dans ces évènements (cette formulation est probablement maladroite mais j’espère que vous voyez&nbsp;l’idée).</p>
<p>🤗</p>
<p><cite><a href="https://fedi.larlet.fr/@david/109993800837974664">Proposition du&nbsp;9&nbsp;mars</a></cite></p>
</blockquote>
<hr />

<blockquote lang="en">
<p>👴 According to the most recent StackOverflow survey, half of the developer population started their careers within the last 9&nbsp;years, which is to say, <mark>half of all web developers have never known a world without&nbsp;React.</mark></p>
<p>It’s even highly likely that they were taught web development via React or that they have never built a site any other way. They were told by their teachers, then by recruiters and then by their employers that React was the way you build web sites, and they invested their careers in it&nbsp;accordingly.</p>
<p><cite><em><a href="https://remotesynthesis.com/blog/the-price-of-developer-tools/">The Price Developers Pay for Loving Their Tools Too Much</a></em>&nbsp;(<a href="/david/cache/2023/339a862f8939f7ba8ae1524fa14f94c2/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>😔 Il s’agit de la tendance qu’ont les gens à graviter vers ou être attirés par ceux qui leur sont similaires en apparence, croyances, origine. Un effet de bord pernicieux ou même vicieux est la tendance à éviter ou même détester les gens ou les groupes qui sont&nbsp;différents.</p>
<p>Puisque le milieu professionnel est dominé par les mâles blancs, ce biais affecte les femmes, d’autant plus si elles sont de couleur. <mark>C’est le biais qui fait le plus de détriment aux femmes au travail</mark>&nbsp;: décisions de recrutement injustes, promotions inéquitables, idées balayées ou&nbsp;volées.</p>
<p><cite><em><a href="https://koalie.blog/2023/03/11/ces-stereotypes-qui-nuisent-aux-femmes-au-travail/">Ces stéréotypes qui nuisent aux femmes au travail</a></em>&nbsp;(<a href="/david/cache/2023/6c69f245e09fb696b43afa54240b4148/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>📷 Having my phone in my pocket doesn’t trigger anything but distraction. It can do everything, and so I feel nothing in particular about it. A physical camera takes photos, but it also makes me think about seeing. And I like&nbsp;that.</p>
<p><cite><em><a href="https://macwright.com/2017/11/03/carrying-a-camera.html">Carrying a camera</a></em>&nbsp;(<a href="/david/cache/2023/c9925184359c01c5c077be55b7cd6505/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>😢 Et je suis fatiguée de cette société qui est incapable de croire les femmes. Combien faudra t-il encore de vidéos ou témoignage où un homme se retrouve, volontairement ou par accident, à la place d’une femme&#8239;? Pour se rendre compte qu’en fait oui c’est violent ce que vivent les femmes et que ce qu’elles dénoncent c’est vrai et&nbsp;systémique.</p>
<p>Je ne peux m’empêcher de penser que si j’avais été un homme ma carrière serait plus avancée aujourd’hui, mon salaire supérieur et ma santé mentale bien&nbsp;meilleure.</p>
<p><cite><em><a href="https://www.duchess-france.fr/coup%20de%20gueule/sexisme/2023/03/06/stupeur-et-trembements.html">Stupeur et tremblements&nbsp;: comment faire fuir les développeuses expérimentées.</a></em>&nbsp;(<a href="/david/cache/2023/25d41d569f637f8342c495139ccce8a8/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>✍️ That is against our purposes here. A blog post is <em>a search query</em>. <mark>You write to find your tribe;</mark> you write so they will know what kind of fascinating things they should route to your inbox. If you follow common wisdom, you will cut exactly the things that will help you find these&nbsp;people.</p>
<p><cite><em><a href="https://escapingflatland.substack.com/p/search-query">A blog post is a very long and complex search query to find fascinating people and make them route interesting stuff to your inbox</a></em>&nbsp;(<a href="/david/cache/2023/5bea097a2dba65380cf43adf2df540f8/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🤔 Fact we’re in the ’Twenties’ sounds so weird. It’s so synonymous with the 1920s. Sounds like a bygone era when women were still fighting for their rights, the upper classes were living a life of hedonism whilst people starved &amp; the world was on the verge of financial ruin and&nbsp;war.</p>
<p><cite>Une capture d’écran de @BeardedGenius vue sur mastodon. 2023.</cite></p>
</blockquote>

    
  
    <h2>
      <a href="/david/2023/01/11/" title="Lien permanent vers cet article">Suspendu</a> (2023-01-11)
    </h2>
    
      
<p>On discute de moyens de monétiser et échanger des choses plus ou moins artistiques avec <a href="https://ynote.hk/">Fanny</a>. Je me demande si le troc d’une œuvre contre une journée de développement dédiée à une asso/un produit militant·e serait&nbsp;envisageable.</p>
<p>En allant plus loin, est-ce que je peux me dire que j’ai des journées de développement suspendues pour chaque facture émise&#8239;? Un peu à la manière des dons défiscalisés&nbsp;: tu m’achètes 3&nbsp;jours de développement et j’en offre 1&nbsp;à une asso que l’on choisit&nbsp;ensemble.</p>
<p>Une journée par-ci par-là ce n’est peut-être pas très utile mais s’il y a un espace pour centraliser ces disponibilités et proposer une aide un peu plus construite ça peut potentiellement être une base de discussion avec les structures qui en auraient besoin&#8239;? Est-ce qu’à la manière de <a href="https://copiepublique.fr/">CopiePublique</a> il y aurait de la place pour un&nbsp;MécénatDeCompétencesPublic&#8239;?</p>
<hr />
<p>Parfois, je me dis qu’il faudrait que j’arrête de publier du flux pour me concentrer sur des articles de fond comme arrivent à le faire <a href="https://ciechanow.ski/archives/">Bartosz Ciechanowski</a>, <a href="https://www.joshwcomeau.com/tutorials/">Josh Comeau</a> ou <a href="https://explained-from-first-principles.com/">Explained from First Principles</a>.</p>
<p>Écrire un article <a href="/david/2022/12/15/">un peu plus long</a> que la moyenne me demande tout de même un effort plus important. Bien davantage que la somme de billets totalisant la même&nbsp;taille.</p>
<p>Est-ce que des traductions seraient déjà un premier&nbsp;pas&#8239;?</p>
<hr />
<p>Je me suis réveillé il y a quelques jours avec cette citation et ça me fait&nbsp;cogiter&nbsp;:</p>

<blockquote>
<p>Ceux qui optent pour le moindre mal tendent très vite à oublier qu’ils ont choisi le&nbsp;mal.</p>
<p><cite><em>Hannah&nbsp;Arendt</em></cite></p>
</blockquote>
<hr />

<blockquote>
<p>J’encourage à débuter par un <em>petit</em> espace-temps pour <em>jouer</em> avec peu&nbsp;d’enjeux.</p>
<p>Se dire qu’on essaye un mois pour voir. Sur un petit sujet, <mark>rencontre entre les personnes à aider et ce qui vous enthousiasme.</mark> Ou de démarrer avec quelque chose de présent dans votre tête depuis longtemps — cette association au coin de la rue, celle dont on lit le journal avec intérêt ou cette étiquette qui attire notre attention au marché&nbsp;fermier.</p>
<p><cite><em><a href="https://www.24joursdeweb.fr/2022/tjm-tarif-journalier-militant/">TJM - le Taux Journalier Militant</a></em>&nbsp;(<a href="/david/cache/2023/1fb96c68665818ad66939956b9c4188c/">cache</a>)</cite></p>
</blockquote>

    
  
</main>

    <hr>
    <footer>
      <p>
        <nobr>
          <a href="/david/" title="Aller à l’accueil">
            <svg class="icon icon-home">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
            </svg>
          Accueil</a>
        </nobr>
        •
        <nobr>
          <a href="/david/log/" title="Accès au flux RSS">
            <svg class="icon icon-rss2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
            </svg>
          Suivre</a>
        </nobr>
        •
        <nobr>
          <a href="http://larlet.com"
             title="Go to my English profile"
             data-instant>
            <svg class="icon icon-user-tie">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
            </svg>
          Pro</a>
        </nobr>
        •
        <nobr>
          <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
            <svg class="icon icon-mail">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
            </svg>
          Email</a>
        </nobr>
        •
        <nobr>
          <abbr class="nowrap"
                title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
            <svg class="icon icon-hammer2">
              <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
            </svg>
          Légal</abbr>
        </nobr>
      </p>
      <template id="theme-selector">
        <form>
          <fieldset>
            <legend>
              <svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
              </svg>
              Thème
            </legend>
            <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>
          </fieldset>
        </form>
      </template>
    </footer>
    <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
    <script>
      function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(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 hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
          let mediaRules = []
          for (const cssRule of styleSheet.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) {
            styleSheet.insertRule(mediaRule.cssText)
            hasDarkRules = true
          }
        }
        if (hasDarkRules) {
          loadThemeForm('#theme-selector')
        }
      })
    </script>
    
  </body>
</html>