davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332
							<!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 #incompétence — David Larlet</title>
<meta name="description" content="Publications relatives au tag #incompétence">
<!-- 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 #incompétence</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/05/01/" title="Lien permanent vers cet article">Long&nbsp;cours</a> (2023-05-01)</h2>
    
      
<p>Je suis avec beaucoup d’intérêt les réflexions d’<a href="https://n.survol.fr/">Éric D.</a> qui envisage un périple du milieu de la France au nord de la Norvège. Ça me fait envisager ce type d’aventure sur plusieurs mois, ce qui me retient, ce que j’emporterais, ce que j’ai appris de mes propres sorties et qui pourrait me&nbsp;servir.</p>
<p><em>Note&nbsp;: je n’ai jamais fait plus d’un demi-GR20 en durée et mes sorties en forêt ne dépassent pas 3/4&nbsp;jours. Tout ce qui suit est donc très&nbsp;hypothétique.</em></p>
<p>Je crois que la question principale qui me taraude(rait) en envisageant un tel périple est de savoir si c’est du tourisme lent ou une façon d’effleurer les cultures et les modes de vies des territoires que je traverse. Je commence par cet aspect car c’est assez central ensuite pour le matériel&nbsp;: est-ce que je veux un vélo qui supporte le gel ou est-ce que je suis prêt à m’adapter en terminant le voyage en traîneau ou a skis ou autre-pas-encore-envisageable&#8239;? (pour donner un&nbsp;exemple)</p>
<p>J’avais l’air de plaisanter sur mastodon lorsque je proposais d’oublier les matelas trop chauds/isolants pour récupérer des peaux de rennes au cours du trajet mais il y a un peu de vrai dans mon envie de me renseigner sur les pratiques locales/traditionnelles pour les incorporer à cette transformation de moi-même qui me semble être le voyage au long cours. Ne pas l’envisager comme une traversée sur-pensée en étant sur-équipé mais comme une adaptation continue en fonction des rencontres et des expériences. C’est un peu ma démarche actuelle avec mon apprentissage de <a href="https://nature.larlet.fr/habillage/#laine">la laine</a> et je suis même allé jusqu’à acheter cet hiver une chapka en fourrure pour connaître ces propriétés de maintient de la chaleur. Ce n’est pas qu’une démarche scientifique mais aussi une forme d’acclimatation au territoire et à ses pratiques ancestrales. Ne pas traverser la forêt dans mon cas, mais devenir la forêt en la&nbsp;traversant.</p>
<p>Ce que j’ai appris de mes essais en continu ces dernières années, c’est qu’un matériel ne peut être éprouvé qu’en conditions réelles. Pas seulement si cette tente peut supporter une tempête de neige mais si cette tente peut supporter une tempête de neige <em>dans cette portion de forêt avec mes connaissances actuelles de positionnement</em>. Pas seulement si ce hamac a une moustiquaire mais si j’arrive à passer une soirée à l’abri de la fumée puis à m’insérer dans le hamac sans qu’une nuée de moustique rentre avec moi en plein mois de juillet. La liste est très/trop longue du matériel que je pensais être pertinent et indispensable et qui se révèle être inadapté à mon milieu et sa saison. Et je n’aurais pas pu le savoir sans le pratiquer, et parfois il est pertinent seulement un mois dans l’année mais je le connais suffisamment pour maintenant l’utiliser à bon escient. Pour un voyage de plusieurs mois j’imagine qu’il est impossible d’avoir le matériel adapté à une telle&nbsp;diversité.</p>
<p>Alors il faut peut-être s’adapter soi et se tourner vers des matières et pratiques&nbsp;résilientes.</p>
<p>Je me pose presque chaque fois la question lors du chemin du retour d’imaginer pouvoir rester plus longtemps (indépendamment de la nourriture). Et j’évalue au passage ce qui aurait rendu cela possible&nbsp;: aller plus lentement, mieux dormir, être plus confortable au niveau du campement, etc. Parfois c’est lié au matériel mais bien souvent ça cache plutôt le mental/l’intelligence du&nbsp;terrain&nbsp;:</p>
<ul>
<li>J’ai des courbatures parce que j’ai trop forcé ou bien car je me suis mal hydraté au cours de la journée après avoir fait des choix discutables en matière&nbsp;d’orientation&#8239;?</li>
<li>J’ai mal dormi car le matelas était trop fin ou parce que je flippais au moindre&nbsp;bruit&#8239;?</li>
<li>Mon duvet est humide parce qu’il est mauvais ou parce que j’ai mal positionné mon&nbsp;campement&#8239;?</li>
</ul>
<p>Même après pas mal de nuits dehors, je fais encore souvent des erreurs, parfois de manière récurrente. Elles n’ont jusqu’à présent pas été critiques mais leur somme sur une excursion plus longue aurait probablement un impact non négligeable sur ma motivation et peut-être ma santé&nbsp;(mentale).</p>
<p>En parlant de motivation, c’est probablement là que j’aurais besoin de beaucoup travailler. Il n’est pas rare qu’au milieu de la forêt je me demande ce que je fais là et pourquoi je ne suis pas dans un lieu au chaud entouré des personnes que j’aime. Je sais aussi ce que ça m’apporte par ailleurs et j’ai toujours ce réconfort qu’à <em>court</em> terme je vais pouvoir les retrouver. Sur du plus long, ce serait plus difficile, peut-être&nbsp;impossible.</p>
<p>Je suis assez certain de pouvoir marcher pendant une semaine mais après un mois, est-ce que j’aurais encore l’envie de mettre un pied devant l’autre qui m’éloigne de mon foyer&#8239;? Est-ce qu’après 3&nbsp;jours de pluie à manger du lyophilisé tout en étant carencé en vitamines et minéraux mon moral tiendrait le choc avec un objectif si lointain&#8239;? Est-ce que j’arriverais à m’accepter pendant une aussi longue période&#8239;? Est-ce que je m’adonne à une activité de privilégié car je n’ai pas d’autre sens dans ma vie que celui d’être égoïste&#8239;? Est-ce que le partage de ces expériences est leur seule forme d’existence&#8239;? Est-ce que je m’autorise ce que j’interprète comme un&nbsp;échec&#8239;?</p>
<p>Ces réponses ne s’achètent pas mais pèsent parfois très lourd dans mon&nbsp;sac.</p>
<hr />
<p>Cet article est déjà assez long, merci Éric de m’avoir motivé à écrire tout ça de manière cathartique. J’espère ne pas être condescendant ou moralisateur, c’est vraiment ce qui me tourne en tête en envisageant un périple de ce type par&nbsp;procuration.</p>

    
    <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/02/03/" title="Lien permanent vers cet article">Chargement</a> (2023-02-03)</h2>
    
      
<blockquote lang="en">
<p>If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a&nbsp;deadlock.</p>
<p>If you do not make digital experiences for a living, what happened is not obvious at all. All you see is <mark>a tiny fake loading spinner that never&nbsp;stops.</mark></p>
<p><cite><em><a href="https://ericwbailey.website/published/modern-health-frameworks-performance-and-harm/">Modern Health, frameworks, performance, and harm</a></em>&nbsp;(<a href="/david/cache/2023/7469f181ef4b031f59ae69356af16e28/">cache</a>)</cite></p>
</blockquote>
<p>Je suis le témoin d’un web cassé au quotidien. J’utilise <a href="https://addons.mozilla.org/en-US/firefox/addon/umatrix/">uMatrix</a> en bloquant toutes les requêtes qui ne sont pas sur le domaine consulté. Il est assez triste de constater le manque de résilience de la plupart des&nbsp;sites.</p>
<p>Parfois, la consultation d’un article de blog n’est pas possible à cause de cela. Le contenu n’est même pas dans le HTML… ou une erreur JavaScript en masque&nbsp;l’affichage.</p>
<p>La fragilité est devenue la norme car plus personne ne sait se servir des fondations du&nbsp;Web.</p>
<hr />
<p>Bande son du moment&nbsp;: <a href="https://www.youtube-nocookie.com/embed/Lm_2LCDmpXU">SEVDALIZA - DARKEST&nbsp;HOUR</a></p>
<hr />

<blockquote lang="en">
<p>🏎️ I guess what I’m winding up to say here is <mark>developer experience really isn’t important</mark>—especially when frameworks haven’t even got the absolute baseline experience anywhere near where it needs to be to service a world wide web. A world wide web that’s accessed with slow, expensive connections and cheap, underperforming hardware. How about taking a bit of “DX” on the chin to focus instead on “why are we using this framework that potentially excludes the majority of&nbsp;users?”.</p>
<p><cite><em><a href="https://andy-bell.co.uk/speed-for-who/">Speed for who? | Andy Bell</a></em>&nbsp;(<a href="/david/cache/2023/f7957bdde7af740e322756668784d355/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🤗 Préciser notre mission, c’est rediscuter ensemble l’ordonnanceur qu’on ramènera tou⋅tes à la maison&nbsp;: quelles priorités, quelles actions, et comment s’insèrent-elles dans la tapisserie que nous brodons&nbsp;ensemble.</p>
<p><cite><em><a href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs">La mission de Deuxfleurs</a></em>&nbsp;(<a href="/david/cache/2023/a0ccec7acb932e4155960c1c88d65eff/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🙇  Thinking that people are stupid is not thinking. <mark>Understanding them&nbsp;is.</mark></p>
<p>I never want to debate, but if I had to, I would hope to lose. I don’t want to convince anyone of my existing perspective. I would rather be convinced of theirs. It’s more interesting to assume that they are&nbsp;right.</p>
<p><cite><em><a href="https://sive.rs/led">I want to lose every debate.</a></em>&nbsp;(<a href="/david/cache/2023/f85d5742bb188e4b25d627b78413fbac/">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>