davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
							<!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 influé aussi dans cette routine&nbsp;d’écriture.</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 et 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&nbsp;article.</em></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. 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>Plus récemment, j’ai introduit 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>Je remarque au cours de l’évolution dans le temps du format du journal 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 échouer) à 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>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 pas trop techniques mon métier soit un peu plus tangible et le fait de raconter les différents errements et recherches technologiques participe à 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 connaissance afin de ne pas devenir un·e gardien·ne du temple mais aussi une soupape&nbsp;émotionnelle&#8239;!</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 c’est qu’il&nbsp;existera.</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’ils appellent dans sa classe des «&nbsp;traces d’écritures&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’écritures (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’écritures (2022)"
             loading="lazy" width="1512" height="1917" />
    </a>
    <figcaption>Une photo du cahier avec des traces&nbsp;d’écritures.</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>