davidbgk
/
larlet-fr-david

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Traces — David Larlet</title>
<meta name="description" content="Cet article a également été publié sur 24 jours de web à l’adresse suivante. 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">
    <a rel="prev" href="/david/2022/11/27/" title="Publication précédente : Neuf">← Précédent</a> •
    <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>
     • <a rel="next" href="/david/2022/12/22/" title="Publication suivante : Marcher">Suivant →</a>
  </p>
</nav>
<hr>

<p><em>Cet article a également été publié sur <a href="https://www.24joursdeweb.fr/">24&nbsp;jours de web</a> à <a href="https://www.24joursdeweb.fr/2022/traces-de-developpements/">l’adresse suivante</a>. Merci.</em></p>
<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>
<blockquote>
<p>Je suis fermement convaincu que l’on ne «&nbsp;perd&nbsp;» jamais du temps à écrire, même si à un certain moment on abandonne le projet sur lequel on travaillait. Chaque tentative d’écriture, qu’il s’agisse d’un article analytique, d’un chapitre de roman ou d’un poème, est une expérience de travail sur la tâche impossible de donner une forme écrite à la vie vécue. <mark>La vie vécue ne peut être couchée sur le papier.</mark> Elle ne se présente pas sous la forme de mots et est impossible à traduire en mots. L’expérience de penser une pensée n’est pas la pensée qu’on inscrit sur la page. Et pourtant, nous essayons d’inventer des formes de faire cette traduction impossible&nbsp;[…]</p>
<p><cite><em><a href="https://carnetpsy.fr/pour-une-nouvelle-sensibilite-analytique-ou-que-veux-tu-etre-quand-tu-seras-grand/">Pour une nouvelle sensibilité analytique ou «&nbsp;que veux-tu être quand tu seras grand&#8239;?&nbsp;»</a></em>&nbsp;(<a href="/david/cache/2022/e6dbee7e4ecefa386cb1c73040ee9e16/">cache</a>)</cite></p>
</blockquote>
<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 régulièrement <a href="/david/biologeek/archives/20040930-ouverture-de-rideau/">depuis 18&nbsp;ans</a>&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 <a href="https://www.data.gouv.fr/fr/">data.gouv.fr</a> en 2016. C’est étrange d’avoir commencé en cours de mission mais ça correspond aussi à mon arrivée au Québec. Cela 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 plus facile de démarrer l’expérience avec une équipe que je connaissais assez 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 facturés 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 mais à l’heure. 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 instantanée. Je n’ai pas de statistiques de lecture et je ne cherche pas à en&nbsp;avoir.</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 également 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>
<figure>
    <a href="#journal-sean-connery"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2022/journal-sean-connery.gif" alt="GIF animé de Sean Connery issu d’un film qui dit qu’il consigne des choses dans son journal pour ne pas avoir à les retenir"
             loading="lazy" width="400" height="170" />
    </a>
    <a href="#_" class="lightbox" id="journal-sean-connery">
        <img src="/static/david/2022/journal-sean-connery.gif" alt="GIF animé de Sean Connery issu d’un film qui dit qu’il consigne des choses dans son journal pour ne pas avoir à les retenir"
             loading="lazy" width="400" height="170" />
    </a>
    <figcaption>Ce-que-disent-les-vieux.</figcaption>
</figure>
<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 <em>bug</em>&#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 du collectif 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, un <a href="https://fr.wikipedia.org/wiki/%C3%89tudes_du_f%C5%93tus_dans_l%27ut%C3%A9rus">schéma</a>, une photo, un <em>haïku</em>, une <a href="https://simonwillison.net/2022/Nov/26/productivity/"><em>issue</em></a>&nbsp;(<a href="/david/cache/2022/747b97ed378bc3b334ab6375346a13fa/">cache</a>), 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’iels 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>
<p><em>Merci à Émilie et Roch pour leurs relectures attentives et&nbsp;enthousiastes.</em></p>


<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/11/27/" title="Publication précédente : Neuf">← Précédent</a> •
    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
     • <a rel="next" href="/david/2022/12/22/" title="Publication suivante : Marcher">Suivant →</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>