davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
							<!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>Traces — David Larlet</title>
<meta name="description" content="Cet article est un brouillon, pas encore publié. Vous êtes invité·e à NE PAS le partager pour l’instant. Merci.">
<!-- 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>

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
  <h1>Traces</h1>
</header>
<nav>
  <p class="center">
    
    <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/recherche/" title="Aller à la page de recherche"
        ><svg class="icon icon-search">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
          ></use>
        </svg>
        Recherche</a
      >
    </nobr>
    
  </p>
</nav>
<hr>

<p><em>Cet article est un brouillon, pas encore publié. Vous êtes invité·e à NE PAS le partager pour l’instant. Merci.</em></p>
<details>
<summary>Proposition 24&nbsp;jours de web</summary>

<blockquote>
<p>Je vous propose un article sur ma pratique d’un journal professionnel. Je ne cherche pas à élargir mon audience et je suis conscient que mes privilèges facilitent la diffusion de mes idées et que je suis en capacité de publier mes pensées. Si vous avez d’autres propositions d’articles issues de personnes moins représentées, je leur cède bien volontiers ma place. Ce contenu sera de toute façon en ligne, soit en même temps, soit avec un délai à définir, sur mon propre espace de&nbsp;publication.</p>
<p>Aussi, je peux servir d’article bouche-trou s’il y a un désistement de dernière minute. Je suis volontaire pour participer à la relecture d’autres propositions plus ou moins&nbsp;techniques.</p>
</blockquote>
</details>
<p>Lorsqu’on parle de publication d’un journal sur le web —&nbsp;qu’il soit personnel ou professionnel&nbsp;— on pense tout de suite aux (web)blogs. Je voudrais ici partager avec vous une autre pratique du journal qui me permet de partager mon travail de manière semi-privée au sein des équipes distribuées et asynchrones que je côtoie depuis plus de 5&nbsp;ans. C’est un intermédiaire entre la description d’une facture, un compte rendu d’activité&nbsp;(CRA) et ce qui peut être échangé lors d’un rendez-vous d’équipe oral quotidien. Pour <a href="/david/2020/12/13/#journal">une version courte</a>.</p>
<h2 id="prologue">Prologue <a href="#prologue" title="Ancre vers cette partie">#</a></h2><p>J’ai probablement été inspiré par les carnets de laboratoire si importants pour la recherche scientifique, ayant ensuite participé activement à leur numérisation et à leur passage au web (premier emploi). Il y a certainement des personnes comme <a href="https://ronan.amicel.net/">Ronan</a> et <a href="https://elsif.fr/">Yannick</a> qui m’ont influencé aussi dans cette routine d’écriture. Oh, et peut-être de bloguer depuis 18&nbsp;ans&nbsp;aussi&nbsp;🙃.</p>
<h2 id="genese">Génèse <a href="#genese" title="Ancre vers cette partie">#</a></h2><p>Le plus vieux journal de la sorte que j’ai pu retrouver remonte à mon accompagnement de data.gouv.fr en 2016. C’est étrange d’avoir commencé en cours de mission mais ça correspond aussi à mon arrivée au Québec ce qui justifie probablement l’envie de créer un nouvel espace d’échanges asynchrones car je me retrouvais avec 6&nbsp;heures de décalage horaire. <em>Note&nbsp;: le fait de ne pas être sur la même timezone m’apporte beaucoup dans mon travail quotidien mais ce sera l’objet d’un futur article.</em> Il était aussi probablement plus facile de démarrer l’expérience avec une équipe que je connaissais bien (un an et demi&nbsp;d’ancienneté).</p>
<figure>
    <a href="#journal-2016-datagouvfr"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2016-datagouvfr.png" alt="Capture d’écran d’un ancien journal (2016)"
             loading="lazy" width="2200" height="1432" />
    </a>
    <a href="#_" class="lightbox" id="journal-2016-datagouvfr">
        <img src="/static/david/2022/journal-2016-datagouvfr.png" alt="Capture d’écran d’un ancien journal (2016)"
             loading="lazy" width="2200" height="1432" />
    </a>
    <figcaption>Capture d’écran d’un journal hebdomadaire pour la deuxième semaine de septembre&nbsp;2016.</figcaption>
</figure>
<p>On peut voir que je comptabilise le nombre de jours de manière publique avec l’équipe, que je partage un <em>mood</em> et que je documente ce que j’ai fait sur la semaine en cours/passée. Il y a aussi beaucoup de liens et d’emojis, on se refait&nbsp;pas&nbsp;🤷.</p>
<p>Lors d’un essai, je trouve ça pertinent de ne pas trop se soucier de la forme ou du lieu où sont stockées les données, cela sera facilement modifiable et récupérable si l’expérience est concluante. Ça reste tout de même du texte brut en <em>markdown</em> qui est aisément&nbsp;transformable.</p>
<p>J’ai continué ce premier journal jusqu’à la fin de l’année avant de valider l’expérience et de passer à une publication chez moi jusqu’à avoir un journal par équipe/produit. Avoir la main sur la conversion en HTML m’a permis de le représenter davantage sous la forme d’une <em>timeline</em> et de comptabiliser automagiquement les jours du mois pour la facturation grâce à des <code>data-attributes</code> bien placés. J’ai aussi la possibilité de replier les entrées très anciennes à l’aide d’un <code>details</code>/<code>summary</code> ce qui devient assez critique car je passe à un format quotidien plus approprié au <a href="https://beta.gouv.fr/startups/zam.html">produit sur lequel je travaille</a> à ce moment&nbsp;là.</p>
<figure>
    <a href="#journal-2019-zam"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2019-zam.png" alt="Capture d’écran d’un ancien journal (2019)"
             loading="lazy" width="1756" height="1254" />
    </a>
    <a href="#_" class="lightbox" id="journal-2019-zam">
        <img src="/static/david/2022/journal-2019-zam.png" alt="Capture d’écran d’un ancien journal (2019)"
             loading="lazy" width="1756" height="1254" />
    </a>
    <figcaption>Capture d’écran d’un journal quotidien fin&nbsp;2019</figcaption>
</figure>
<p>Il s’agit d’une routine qui demande une certaine rigueur mais en couplant l’écriture au décompte du temps passé —&nbsp;et donc à la rémunération associée&nbsp;— cela motive pour ne pas louper une&nbsp;entrée&nbsp;😅.</p>
<h2 id="evolutions">Évolutions <a href="#evolutions" title="Ancre vers cette partie">#</a></h2><p>Début 2022, je sentais bien que je supportais de moins en moins le contexte du produit sur lequel je travaillais, j’ai donc introduit une notion de fun combinée à une comptabilité du temps plus précise qui ne s’effectuait plus à la (demi-)journée. Je me disais qu’il fallait au moins prendre la mesure de cette démotivation ainsi que son évolution. Cela m’a permis de clairement réaliser qu’il fallait que je mette fin à ma participation à ce&nbsp;produit.</p>
<figure>
    <a href="#journal-2022-fun"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2022-fun.png" alt="Capture d’écran d’un journal récent (début 2022)"
             loading="lazy" width="2414" height="1762" />
    </a>
    <a href="#_" class="lightbox" id="journal-2022-fun">
        <img src="/static/david/2022/journal-2022-fun.png" alt="Capture d’écran d’un journal récent (début 2022)"
             loading="lazy" width="2414" height="1762" />
    </a>
    <figcaption>Capture d’écran d’un journal début&nbsp;2022</figcaption>
</figure>
<p>Plus récemment, sur un autre journal/produit, j’ai ajouté des graphes du temps passé et de l’humeur du moment. Je voulais voir ce que ça pouvait donner sur une période et visualiser si l’humeur était dépendante d’une surcharge de travail par exemple. Je trouve intéressant d’avoir ce baromètre donnant une information importante pour les collaborateur·ices et pour&nbsp;moi-même.</p>
<p>Au cours de l’évolution dans le temps du format du journal, je remarque que je me concentre davantage sur les émotions que sur ce qui a été fait de manière analytique. C’est peut-être lié à une maturité personnelle qui me fait considérer davantage le côté humain au côté technique dans mon&nbsp;travail.</p>
<figure>
    <a href="#journal-2022-stylo"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2022-stylo.png" alt="Capture d’écran d’un journal récent (2022)"
             loading="lazy" width="1366" height="1698" />
    </a>
    <a href="#_" class="lightbox" id="journal-2022-stylo">
        <img src="/static/david/2022/journal-2022-stylo.png" alt="Capture d’écran d’un journal récent (2022)"
             loading="lazy" width="1366" height="1698" />
    </a>
    <figcaption>Capture d’écran d’un journal quotidien en&nbsp;2022</figcaption>
</figure>
<p>Pour la source, elle est toujours en <em>markdown</em>, j’ai tenté à un moment d’écrire directement en HTML (et j’ai encore des journaux en cours ainsi) mais ça change ma fluidité d’écriture car je finis par être distrait par l’éditeur. J’ajoute des métadonnées à base d’emojis pour comptabiliser le temps et consigner&nbsp;l’humeur&nbsp;:</p>
<figure>
    <a href="#journal-2022-stylo-source"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2022-stylo-source.png" alt="Capture d’écran de la source d’un journal récent (2022)"
             loading="lazy" width="2982" height="880" />
    </a>
    <a href="#_" class="lightbox" id="journal-2022-stylo-source">
        <img src="/static/david/2022/journal-2022-stylo-source.png" alt="Capture d’écran de la source d’un journal récent (2022)"
             loading="lazy" width="2982" height="880" />
    </a>
    <figcaption>Capture d’écran de la source d’un journal quotidien en&nbsp;2022</figcaption>
</figure>
<p>Je passe sur certaines adaptations faites au cours du temps sur le générateur de HTML pour pouvoir supporter le décompte du temps de plusieurs personnes ou d’avoir plusieurs journaux combinés sur une même&nbsp;page.</p>
<p>La technique est loin d’être clef dans ce contexte et l’importance est plutôt de rendre le journal accessible facilement aux autre membres de l’équipe. Je poste le lien vers l’entrée du jour plus ou moins régulièrement (en fonction de l’activité du projet) dans l’espace dédié à la discussion&nbsp;instantanée.</p>
<h2 id="interets">Intérêts <a href="#interets" title="Ancre vers cette partie">#</a></h2><p>Le premier gain est personnel, il s’agit d’une mémoire externalisée de ce que j’ai fait avec des notes —&nbsp;parfois technique&nbsp;— de ce qui m’a débloqué à des moments clefs. Le fait de rédiger quotidiennement ou hebdomadairement me permet de faire un bilan de ce que j’ai réussi (ou échoué) à faire et des conditions de travail dans lesquelles j’ai été. Cela donne un sentiment d’avancement assez plaisant, ou lors de certaines périodes de réaliser que l’on piétine un peu aussi. J’y consignais aussi des bouts de code plus technique avant de les externaliser vers un <a href="https://code.larlet.fr/">espace public dédié</a>.</p>
<p>Je relis rarement ce journal de bout en bout <em>a posteriori</em> mais je vais souvent y piocher des lignes de commandes ou des conclusions de réunions. Parfois même des actions à faire lorsque la régularité sur un produit devient plus&nbsp;espacée.</p>
<p>Cela m’offre un certain recul sur le temps passé et ma «&nbsp;productivité&nbsp;» aussi, autant dans un sens (<em>burn-out</em>) que dans l’autre (culpabilité, syndrome de l’imposteur, etc). Il y a toute la réflexion autour de «&nbsp;Est-ce que c’est du travail&#8239;?&nbsp;» qui est intéressante lorsqu’on fait un travail plutôt intellectuel. Est-ce que d’aller me promener une heure est important pour arriver à la résolution de ce _bug_&#8239;? Est-ce que j’ai besoin de trois heures de procrastination pour arriver à développer cette fonctionnalité en 20&nbsp;minutes&#8239;? Si oui, comment facturer cela&#8239;? Etc.</p>
<p>J’apprécie que le temps soit décompté de manière transparente, il y a rarement des surprises ou si elles le sont c’est rapidement expliqué. Je trouve cela important que pour des personnes moins techniques mon métier soit un peu plus tangible. Le fait de raconter les différents errements et recherches technologiques participe probablement à sa compréhension. Lorsqu’on facture au temps passé et qui plus est à distance, la confiance s’installe également par la&nbsp;transparence.</p>
<p>Le gain collectif est difficile à estimer. J’ai souvent des retours positifs et inspirants. J’apprécie que toutes les personnes de l’équipe puissent avoir le même niveau d’information à mon sujet, autant au niveau du cheminement technique que de la forme du moment. Notamment dans des passages difficiles, je trouve ça intéressant de pouvoir m’exprimer à l’écrit de manière asynchrone, de manière un peu plus posée. Ces retours sont souvent à l’origine de discussions qui sont importantes pour que tout le monde se sente bien dans l’équipe. Le journal est une soupape de connaissances afin de ne pas devenir un·e gardien·ne du temple mais aussi une soupape&nbsp;émotionnelle&#8239;!</p>
<p>Est-ce que les autres personnes des équipes lisent ces traces de développement au quotidien&#8239;? Je n’en ai aucune idée, je pense que chaque collaborateur·ice a ses propres routines de lectures et il faut combiner à cela les personnes qui sont plus à l’aise à l’oral. Le journal n’est pas exclusif mais fait partie d’une faculté plus globale à communiquer de plusieurs manières possibles pour essayer de transmettre un message&nbsp;compréhensible.</p>
<h2 id="cooperative">Coopérative <a href="#cooperative" title="Ancre vers cette partie">#</a></h2><p>Dans un autre contexte — la <a href="http://scopyleft.fr/">coopérative</a> dont je fais partie depuis 10&nbsp;ans&nbsp;— j’ai démarré cette année un nouveau journal pour partager autour des petits produits que je mettais en proposition pour la&nbsp;SCOP.</p>
<figure>
    <a href="#journal-2022-scopyleft"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2022-scopyleft.png" alt="Capture d’écran de la source d’un journal de coopérative (2022)"
             loading="lazy" width="2586" height="952" />
    </a>
    <a href="#_" class="lightbox" id="journal-2022-scopyleft">
        <img src="/static/david/2022/journal-2022-scopyleft.png" alt="Capture d’écran de la source d’un journal de coopérative (2022)"
             loading="lazy" width="2586" height="952" />
    </a>
    <figcaption>Capture d’écran de la source d’un journal de coopérative en&nbsp;2022</figcaption>
</figure>
<p>Celui-ci avait encore une fois le double intérêt de partager mes expérimentations avec les membres de l’équipe et de comptabiliser le temps passé pour d’éventuelles productions immobilisées (du jargon pour dire que je crée de la valeur pour l’entreprise). La porte est ouverte, dans ce moteur de blog/site statique, pour que d’autres personnes puissent participer bien que cela n’ait pas encore été le&nbsp;cas.</p>
<p>Ce journal a tout particulièrement pour objectif de générer des discussions et d’expliquer les attentes et frustrations autour des produits. Certaines entrées sont très techniques, d’autres davantage un résumé du cheminement. Je rédige souvent des entrées en pensant à une personne particulière de la coopérative qui pourrait le lire et y trouver des petites&nbsp;graines.</p>
<p>Le fait d’être en décalage de six heures avec les autres membres me fait davantage utiliser l’écrit et l’asynchrone pour certaines tâches comme le développement pur, cela influence probablement mon attirance pour ces traces numériques. Il n’est pas toujours aisé de travailler côte à côte lorsqu’un océan les&nbsp;sépare.</p>
<h2 id="la-suite">La suite&#8239;? <a href="#la-suite" title="Ancre vers cette partie">#</a></h2><p>Je ne sais pas de quoi mon prochain journal sera fait. La seule certitude que je peux avoir est qu’il existera. J’espère qu’il continuera à s’adapter à mes besoins et à ceux des équipes car c’est aussi un espace de jeu autour du partage et d’une autre forme de&nbsp;travail.</p>
<p>Je vous invite à inventer le vôtre, qui vous correspondra et qui en inspirera d’autres. Peut-être que de nouvelles façons de faire émergeront, des dessins, une photo, un <em>haïku</em>, tout est&nbsp;possible.</p>
<h2 id="epilogue">Épilogue <a href="#epilogue" title="Ancre vers cette partie">#</a></h2><p>Depuis cette année, l’enfant de 9&nbsp;ans qui vit avec moi rédige ce qu’ielles appellent dans sa classe des «&nbsp;traces d’études&nbsp;», ce qui correspond à une page de résumé des apprentissages pour la semaine en&nbsp;cours.</p>
<p>Il n’est jamais trop tôt pour&nbsp;commencer&#8239;!</p>
<figure>
    <a href="#journal-2022-traces"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-2022-traces.jpg" alt="Photo d’un cahier avec des traces d’études (2022)"
             loading="lazy" width="1512" height="1917" />
    </a>
    <a href="#_" class="lightbox" id="journal-2022-traces">
        <img src="/static/david/2022/journal-2022-traces.jpg" alt="Photo d’un cahier avec des traces d’études (2022)"
             loading="lazy" width="1512" height="1917" />
    </a>
    <figcaption>Une photo du cahier avec des traces&nbsp;d’études.</figcaption>
</figure>


<nav>
  <p class="center">
    
    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
    
  </p>
</nav>
</article>


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