davidbgk
/
larlet-fr-david


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
							<!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 #qualité
  — David Larlet</title>
  <meta name="description" content="Publications relatives au tag #qualité">
  <!-- 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 #qualité</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/23/" title="Lien permanent vers cet article">Éco-conception</a> (2023-09-23)
    </h2>
    
      

<blockquote>
<p>De mon temps on disait pas «&nbsp;écoconception&nbsp;» on disait juste «&nbsp;appliquer les prérequis basiques du métier de dev&nbsp;» et on n’était pas plus&nbsp;malheureux.</p>
<p>S’il vous faut une formation pour vous empêcher d’afficher 10&#8239;Mo d’images sur votre homepage et d’empiler 50&nbsp;frameworks JS pour faire un formulaire, <mark>c’est peut-être que votre titre initial de «&nbsp;dev full stack senior&nbsp;» était légèrement usurpé.</mark> Et si l’interopérabilité, la rétrocompatibilité, l’amélioration progressive, l’accessibilité et les perfs sont pour vous de nouvelles compétences tendance à faire valoir sur un CV, je suis navré de vous annoncer que vous étiez jusque ici un&nbsp;escroc.</p>
<p><cite><a href="https://mastodon.social/@STPo/111101966708210843">STPo sur&nbsp;mastodon</a></cite></p>
</blockquote>
<p>Ce n’est pas vraiment un secret que je fasse partie de la team vieux-rageux-qui-lève-ses-poings-vers-le-ciel (et surtout les yeux&nbsp;🙄) lorsqu’on parle de technique et de web. Le pire étant que plus le temps passe et plus j’ai le sentiment que cette profession se crée sa propre utilité. Il faudrait que je lise <em>Bullshit Jobs</em> pour être certain de ne pas dire n’importe quoi mais je crois bien que ça s’en rapproche de plus en plus. Ou alors j’en prends davantage&nbsp;conscience.</p>
<p>Et ça m’embête autant que de jardiner dans mon petit potager bio tout en vivant au milieu d’une zone commerciale géante bariolée de publicités et traversée par des <abbr title="sport utility vehicle">SUV</abbr> et autres <em>pickups</em>. Toute ressemblance avec ma dissonance cognitive actuelle serait bien évidemment&nbsp;fortuite.</p>
<p>En ce moment, à 15h50, j’écoute les enfants à la fenêtre préparer la chanson de l’année où <a href="https://www.lafabriqueculturelle.tv/capsules/14586/le-grand-rendez-vous-de-fanny-bloom-et-l-osm-une-chanson-a-l-ecole-les-journees-de-la-culture">Fanny Bloom leur demande de planter des arbres</a> alors qu’il y a une file de voitures de plus de 2&nbsp;tonnes qui attendent la sortie de leurs chers bambins. Tout ça pour s’éviter de faire quelques centaines de mètres à&nbsp;pied.</p>
<p>Je crois que c’est ça l’éco-conception sur le web&nbsp;: réduire la taille d’une image pour réduire son empreinte carbone tout en ayant demandé à un <abbr title="Large Language Model">LLM</abbr> de l’avoir&nbsp;générée.</p>
<hr />

<blockquote lang="en">
<p>🎯 However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own technical decisions and how those decisions can also contribute to the disappearance of web’s <em>culture</em> of&nbsp;openness.</p>
<p>Inadvertently (for the most part) technical trends and decisions in web development in <mark>the last two decades have lead to what we term a “Technical Enclosure” of the web,</mark> a processes whereby technical decisions chip away at the #ViewSource affordance that Cory Doctorow discusses in the opening quote of this article, an affordance that existed as a commons for early web&nbsp;developers.</p>
<p><cite><em><a href="https://htmx.org/essays/right-click-view-source/">The #ViewSource Affordance</a></em>&nbsp;(<a href="/david/cache/2023/2782723c95c98a22087e9954b07a8fba/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🤗 I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, <mark>I like to do my part</mark> which is why I try hard to not collect and keep any data about&nbsp;you.</p>
<p><cite><em><a href="https://manuelmoreale.com/i-don-t-want-your-data">I don’t want your data</a></em>&nbsp;(<a href="/david/cache/2023/73f0ab0b4336be702e863205bd1bbace/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>💜 Quand il laisse couler l’eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l’oubli n’efface les derniers sourires jusqu’à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d’un ancêtre dont les cendres sont peut-être encore sur le coin d’une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l’évasion d’une enfance&nbsp;heureuse&#8239;?</p>
<p><cite><em><a href="https://www.la-grange.net/2023/03/15/envers">endroit de l’envers</a></em>&nbsp;(<a href="/david/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/">cache</a>)</cite></p>
</blockquote>

    
  
    <h2>
      <a href="/david/2023/06/06/" title="Lien permanent vers cet article">Réponse(s)</a> (2023-06-06)
    </h2>
    
      

<blockquote>
<p>The structures of our network commons have concentrated our responses to the forces already pressing against our livelihoods and children and futures. Within their engagement-optimized interfaces, we’ve built ourselves into a standing wave: Abusive posts became network-wide events that require a response not only from moderating authorities, but from every&nbsp;user.</p>
<p>In this machine, silence transmutes to approval of the worst thing happening; via entirely real human needs for signals of safety and support, continuous attention and engagement become mandatory. Simply bad posts are opportunities for demonstrations of prowess. People we agree with become footholds for demonstrating all the subtle ways in which they don’t quite&nbsp;understand.</p>
<p>[…]</p>
<p><mark>Here in my body, I want to be more human in service of a less painfully haunted world.</mark> I want ways of being together that let us pay our respects and build different kinds of power. I want to practice being&nbsp;free.</p>
<p><cite><em><a href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow">Erin Kissane</a></em>&nbsp;(<a href="/david/cache/2023/62bf3ce6ef66e39b7f250a6123d92e66/">cache</a>)</cite></p>
</blockquote>
<p>J’étais ceux que je&nbsp;suis.</p>
<p>Je me retrouve de moins en moins sur des plateformes d’échanges instantanés —&nbsp;fussent-elles libres. Cela me confirme que mon problème n’est pas dans l’outil mais dans la qualité des&nbsp;interactions.</p>
<p>J’ai fait un atelier où j’ai dû dire à des personnes que j’estime à voix haute que j’étais profondément injuste et que j’étais OK avec ça. C’était difficile et je n’en mesure pas encore toutes les&nbsp;conséquences.</p>
<p>La résilience de mon vélo passe par ma capacité à le réparer. Avec des <em>tubeless</em> je me sens moins à l’aise, trop d’outillage devient nécessaire pour pallier un confort&nbsp;relatif.</p>
<p>Dans ces moments de repli, la photographie et la poésie (re)prennent une place importance. J’aimerais en accorder plus au dessin et à la musique mais le plaisir semble encore être trop&nbsp;éloigné.</p>
<p>Je me demande parfois si la publication sur le web n’est pas un de mes privilèges de&nbsp;plus.</p>
<p>Je deviens ce que je ne suis&nbsp;plus.</p>

    
  
    <h2>
      <a href="/david/2023/01/15/" title="Lien permanent vers cet article">Snow&nbsp;Fall</a> (2023-01-15)
    </h2>
    
      

<blockquote lang="en">
<p>Ten years ago this week, in December 2012, “<a href="https://www.nytimes.com/projects/2012/snow-fall/index.html">Snow Fall: The Avalanche at Tunnel Creek</a>,” an ambitious multimedia feature about a deadly avalanche in Washington State that year, took the journalism world by&nbsp;storm.</p>
<p><cite><em><a href="https://www.nytimes.com/2022/12/23/insider/snow-fall-at-10-how-it-changed-journalism.html">‘Snow Fall’ at 10: How It Changed Journalism</a></em>&nbsp;(<a href="/david/cache/2023/cba96d83d96944c55675cb073fcfc60d/">cache</a>)</cite></p>
</blockquote>
<p>Il est rare que je me souvienne d’évènement historiques autour du Web. À part peut-être les sorties de <a href="/david/biologeek/archives/20041121-mozparty-des-geeks-irl--/">Firefox 1</a> et <a href="/david/biologeek/archives/20061028-soiree-firefox-2-paris/">2</a> car j’étais aux évènements&nbsp;dédiés.</p>
<p>«&nbsp;<span lang=en>Snow Fall</span>&nbsp;» était d’un autre ordre de grandeur pour moi car ça ouvrait au Web une possibilité de raconter des histoires dynamiques. Je me rappelle avec une assez bonne précision de l’excitation que j’avais eu en parcourant la page à l’époque. Ce n’était pas tant le côté immersif que technique qui m’intéressait alors, et c’était une époque où l’on pouvait encore consulter une source de site web et la comprendre. J’ai tellement appris comme&nbsp;ça&#8239;!</p>
<p>Allez consulter cette magnificence, une source commentée, non minifiée, avec du contenu qui est dans la page et des media liés de manière standardisée et compréhensible. Une autre&nbsp;époque.</p>
<p>On en parlait récemment avec <a href="https://thom4.net/">Thomas</a>, comment est-ce qu’une génération qui est principalement autodidacte a-t-elle pu être à l’origine de la complexité actuelle des outils de publication sur le Web&#8239;? Je suis tellement triste de la marche que l’on a créé pour réduire l’accessibilité de sa source. Il y a une tendance humaine à faire —&nbsp;plus ou moins consciemment&nbsp;— tomber l’échelle qui nous a permis de monter pour être sûr de garder une certaine avance sur les&nbsp;suivant·es.</p>
<p><em>Tout parallèle avec notre rapport à l’immigration serait bien évidement&nbsp;fortuit.</em></p>

<blockquote lang="en">
<p>Mr. Duenes also noted that “Snow Fall” helped budding designers and engineers see themselves as potential&nbsp;journalists.</p>
<p>“It generated the idea among people with visual skills that journalism might be a place for them,” Mr. Duenes said. “Not people who were experts at the moment, but people in school who could see an overlap between an area where they had talent and the discipline of visual&nbsp;journalism.”</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>
<hr />

<blockquote lang="en">
<p>For a data format, yaml is extremely complicated. It aims to be a human-friendly format, but in striving for that it introduces <mark>so much complexity,</mark> that I would argue it achieves the opposite result. Yaml is full of footguns and its friendliness is deceptive. In this post I want to demonstrate this through an&nbsp;example.</p>
<p><cite><em><a href="https://ruudvanasseldonk.com/2023/01/11/the-yaml-document-from-hell">The yaml document from hell</a></em>&nbsp;(<a href="/david/cache/2023/3b05eb0d7d0409bcfd53b4cdf6c20daa/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p> It was among the strongest feelings of grief I have ever encountered. The contrast between the vicious coldness of space and the warm nurturing of Earth below filled me with overwhelming sadness. Every day, we are confronted with the knowledge of further destruction of Earth at our hands: the extinction of animal species, of flora and fauna . . . things that took five billion years to evolve, and suddenly we will never see them again because of the interference of mankind. It filled me with dread. <mark>My trip to space was supposed to be a celebration; instead, it felt like a&nbsp;funeral.</mark></p>
<p><cite><em><a href="https://variety.com/2022/tv/news/william-shatner-space-boldly-go-excerpt-1235395113/">William Shatner: My Trip to Space Filled Me With Sadness - Variety</a></em>&nbsp;(<a href="/david/cache/2023/ca3e313992d7ac7e4aeaece85e7f4b6a/">cache</a>)</cite></p>
</blockquote>

    
  
    <h2>
      <a href="/david/2023/01/10/" title="Lien permanent vers cet article">Qualité</a> (2023-01-10)
    </h2>
    
      <details>
        <summary>Déplier pour lire le contenu de la publication</summary>
        

<blockquote>
<p>Quiconque cherche à circonscrire une discipline en lui imposant un cadre ne cherche généralement qu’à protéger son œuvre, et il le fait en perpétuant les standards qui ont permis son émergence. Celui-ci essaie de convaincre les générations à venir qu’elles doivent suivre les règles qu’il a édictées si elles comptent parvenir à l’excellence. Mais, comme disait Charles Bukowski, «&nbsp;il est quatre heures et demie du matin, il sera toujours quatre heures et demie du&nbsp;matin…&nbsp;».</p>
<p>Nous sommes à ce point focalisés sur le chemin que nous nous efforçons de suivre, en voulant toujours tout faire au mieux, armés d’une dévotion sans faille pour notre discipline <mark>alors que les œillères de la peur nous empêchent d’envisager des terrains inconnus,</mark> que nos yeux restent fixés sur cette route, sur ces mains qui prennent appui sur des genoux. Et nous ne réalisons pas que nous ne faisons que suivre les règles promulguées par un homme qui a un jour disputé une course contre des chevaux, ou par un autre qui s’est frotté à un sommet de plus de huit mille mètres sans oxygène, ou par un autre encore qui a décidé de laisser chez lui ses pitons, ses cordes et la sécurité pour ne faire qu’un avec les murs à escalader. Nous suivons les lois de ceux qui en ont enfreint de plus&nbsp;anciennes.</p>
<p><cite><em>Au-delà des sommets</em>, Kilian&nbsp;Jornet</cite></p>
</blockquote>
<p>On parlait de code et de qualité avec <a href="https://thom4.net/">Thomas</a>. Je lui faisais part de ma frustration vis-à-vis d’un code qui n’avait pas été écrit par moi et que je trouvais problématique. En creusant un peu (merci&#8239;!), je réalise que ce qui coince est au niveau de la pérennité et de la transmission. Et j’ai aussi conscience de produire moi-même du code qui serait difficile à reprendre par d’autres personnes n’ayant pas les mêmes&nbsp;aspirations/compétences.</p>
<p>En Python, on a la chance de pouvoir automatiser certaines conversions/vérifications qui tendent à aller vers une certaine uniformisation (et donc universalité&#8239;?)&nbsp;: <a href="https://github.com/psf/black">black</a>, <a href="https://flake8.pycqa.org/">flake8</a>, <a href="https://pypi.org/project/isort/">isort</a> ou <a href="https://mypy.readthedocs.io/">mypy</a> par&nbsp;exemple.</p>
<p>Pour aller plus loin, le code en lui-même n’est peut-être pas si critique, mais ce que l’on a appris en le concevant et l’utilisant l’est bien davantage. C’est cette transmission qu’il est important de rendre possible au sein de l’équipe. Outiller la base commune est un moyen de <strong>plus rapidement</strong> passer à l’étape de partage des concepts importants/métiers, en ce souciant moins de la&nbsp;forme.</p>
<p>Et peut-être au contraire, que cette <strong>vitesse</strong> acquise nous empêche d’échanger sur des concepts importants&#8239;? Des envies différentes&#8239;? Des choix à côté desquels on peut passer par manque&nbsp;d’attention.</p>

<blockquote lang="en">
<p>Tradition (n.): Peer pressure from dead&nbsp;people.</p>
<p><cite><em>Lu plusieurs fois sur&nbsp;masto</em></cite></p>
</blockquote>
<hr />

<blockquote>
<p>🦋 Depuis quelques années, j’essaie d’écrire un code le plus direct&nbsp;possible.</p>
<p>Mon objectif&nbsp;: diminuer au maximum ma charge&nbsp;cognitive.</p>
<p><cite><em><a href="https://sklein.xyz/garden/020-keep-it-simple-stupid-le-plus-longtemps-possible/">Keep it simple, stupid le plus longtemps possible</a></em>&nbsp;(<a href="/david/cache/2023/646ebfa25432bc6b653e524b52d25c9a/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>⛵️ Many of the tools that we thought we could rely on broke down, whether it is Apple products, or software that require subscription services, DRM, etc. As an artist you spend time developing a skill, <mark>you become a Photoshop illustrator.</mark> When your connection to the internet fails and that the software locks up, that skill that you thought was yours was actually entirely owned by someone, and can be taken&nbsp;away.</p>
<p>Even though we’ve been paying for this sort of software for years, the moment that you can’t have access to authenticate yourself that skill is gone. We didn’t expect this, it scared&nbsp;us.</p>
<p><cite><em><a href="https://100r.co/site/weathering_software_winter.html">weathering software winter</a></em>&nbsp;(<a href="/david/cache/2023/c564325b28ec854b6b098950df5c8c8f/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🔎 It’s important to remember concepts and high level approaches, but don’t worry about remembering the details. You can always look that stuff up when you need&nbsp;it.</p>
<p><cite><em><a href="https://gomakethings.com/you-dont-have-to-remember-everything-to-be-a-good-programmer/">You don’t have to remember everything to be a good programmer</a></em>&nbsp;(<a href="/david/cache/2023/2f4b8ec8f6fd2cbc48a04dcac2cc7d24/">cache</a>)</cite></p>
</blockquote>

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