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>
  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>Covidoudou — David Larlet</title>
<meta name="description" content="Journal de déconfinement.">
<!-- 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="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
    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 hr-center ul-star pre-tick" data-instant-intensity="viewport-all">

<article>
<header>
  <h1>Covidoudou</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/05/20/" title="Publication précédente : Bikepacking">←</a> •
    <a href="/david/" title="Aller à l’accueil">🏠</a>
     • <a rel="next" href="/david/2020/06/12/" title="Publication suivante : Vrac">→</a>
  </p>
</nav>
<hr>
<main>
  
<p><em>Journal de déconfinement.</em></p>
<h2 id="preambule">Préambule <a href="#preambule" title="Ancre vers cette partie">#</a></h2><p>Il est rare que j’écrive sur mon travail avec aussi peu de recul. J’avais déjà partagé une <a href="/david/2020/01/17/">expérimentation avec data.gouv.fr</a> et <a href="/david/2020/04/18/">l’aventure Zam</a> sur ces deux dernières années. Ici, le contexte est un peu particulier et s’apparente davantage à un <em>sprint</em>. Il concerne potentiellement 68 millions de français·es (<abbr title="private joke">👋🐢🤔</abbr>), ce qui met la barre assez haute.</p>
<p>Récit de ce qu’il se passe parfois derrière le rideau de vos écrans.</p>
<h2 id="jour-1-5-mai-un-demarrage-etrange">Jour 1 (5 mai) : Un démarrage étrange <a href="#jour-1-5-mai-un-demarrage-etrange" title="Ancre vers cette partie">#</a></h2><p>Cela fait quelques temps avec <a href="/david/blog/2019/faire-equipe/">l’équipe</a> que l’on se demande quoi faire car la <a href="/david/2020/04/18/#suite">suite annoncée</a> n’est pas aussi réactive que ce que l’on eu espéré, contexte sanitaire oblige. On essaye de se positionner sur des produits où l’on pense pouvoir être utiles et qui ne soient pas du solutionnisme technologique.</p>
<p>On nous propose de faire un questionnaire pour le Ministère des Solidarités et de la Santé qui soit à l’opposé d’un autre produit développé en parallèle par le gouvernement :</p>
<ul>
<li><em>open-source</em> dès le premier jour</li>
<li>sans aucune donnée collectée</li>
<li>avec un algorithme public</li>
</ul>
<p>Jusque là, c’est plutôt alléchant mais le <em>timing</em> est quand même serré : le déconfinement est prévu pour le 11 mai. Soit 6 jours plus tard. <em>Gloups.</em></p>
<p>En plus de l’urgence, d’autres voyants sont au rouge : on évoque une <q>équipe en mode commando</q> et il y a déjà beaucoup d’attentes bien qu’aucune ligne de code n’ait été produite… sans compter le fait que nous ne sommes ni des développeurs JavaScript, ni familiers des plateformes de distribution des <abbr title="Google, Apple, Facebook, Amazon, Microsoft et consorts.">GAFAM+</abbr>. Par choix.</p>
<p>On finit par accepter car l’intention nous semble louable. Opération : <strong>Covidoudou</strong>.</p>
<h2 id="jour-3-7-mai-doutes-techniques">Jour 3 (7 mai) : Doutes techniques <a href="#jour-3-7-mai-doutes-techniques" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>What is clear: right now, if you’re using a framework to build your site, <mark>you’re making a trade-off in terms of initial performance</mark>—even in the best of scenarios.</p>
<p><em>Some</em> trade-off may be acceptable in the right situations, but it’s important that we make that exchange consciously.</p>
<p><cite><em><a href="https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/">The Cost of Javascript Frameworks</a></em> (<a href="/david/cache/2020/be8e81e9337d81e7a31a5cc1f4d38435/">cache</a>)</cite></p>
</blockquote>
<p>Beaucoup d’interrogations relatives aux performances et à la complexité que l’on souhaite déléguer dans ce domaine. On s’attend à avoir potentiellement une charge non négligeable à encaisser. On évalue plusieurs solutions mais aucune ne nous satisfait pleinement, aussi on décide de faire un premier jet avec une succession de vues en JavaScript à la main qui reprennent des éléments <code>template</code> pré-chargés dans le HTML. Lorsqu’on fait un compromis, il s’agit toujours de tenter de trouver la solution la moins pire <em>pour un contexte donné</em>.</p>

<blockquote lang="en">
<p>But I think there are a lot of problems that are better solved some other way.</p>
<p><cite><em><a href="https://macwright.org/2020/05/10/spa-fatigue.html">Second-guessing the modern web</a></em> (<a href="/david/cache/2020/ebaa216561b046ae17b29b399305b294/">cache</a>)</cite></p>
</blockquote>
<p>En parallèle, on commence à implémenter l’algorithme. Il est décrit dans des fichiers du genre <code>Copie de algo_deconf_final_V3.xlsx</code> (véridique) et mis à jour par un comité d’experts médecins qui se l’échangent par courriel. On reçoit plusieurs versions par jour !</p>
<p>On fait une première démo à l’équipe rapprochée.</p>
<h2 id="jour-5-9-mai-un-algorithme-recalcitrant">Jour 5 (9 mai) : Un algorithme récalcitrant <a href="#jour-5-9-mai-un-algorithme-recalcitrant" title="Ancre vers cette partie">#</a></h2><p>L’objectif est simple : on a une série de questions et en fonction des réponses on affiche des conseils personnalisés en fonction de la localisation, des caractéristiques, des antécédents et des symptômes ou contact à risque potentiels.</p>
<p>Sauf que tout bouge très vite, autant les questions que les conseils ou l’arbre logique qui permet de passer des unes aux autres. Sans compter qu’il a été écrit par des médecins dans une feuille de calcul et qu’il faut aller repêcher les informations à la main. Pas évident.</p>
<p>En parallèle, on <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/">publie le code source</a> sous licence MIT et on est maintenant en capacité de faire une démo à l’équipe élargie. Les retours sont plutôt bons et ça tranquillise beaucoup de monde.</p>
<h2 id="jour-7-11-mai-tenir-la-charge">Jour 7 (11 mai) : Tenir la charge <a href="#jour-7-11-mai-tenir-la-charge" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>If you are in charge of a web site that provides even slightly important information, or important services, <strong>it’s time to get static</strong>.</p>
<p><cite><em><a href="https://meyerweb.com/eric/thoughts/2020/03/22/get-static/">Get Static</a></em> (<a href="/david/cache/2020/4f88ece170719f58ce09ba4b1818730a/">cache</a>)</cite></p>
</blockquote>
<p>Ronan s’occupe de faire en sorte que l’architecture tienne le coup, on évoque une annonce à la télévision et apparemment ça peut faire un gros pic dans les courbes. Surtout dans cette période anxiogène. Heureusement que l’on ne sert qu’une page statique <a href="https://adactio.com/journal/16797">relativement légère</a> (<a href="/david/cache/2020/24f52bba99b1423102f93cf86b948c5b/">cache</a>) au final. Sans <a href="https://www.kryogenix.org/days/2020/05/06/hammer-and-nails/">recompiler</a> (<a href="/david/cache/2020/73f93e0e8e7810a36d88555c2cbfa573/">cache</a>) trop de choses dans le navigateur.</p>
<p>De mon côté, j’extrais toutes les chaines de caractères <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/tree/master/contenus">dans des fichiers markdown</a> et je <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/tree/master/contenus#algorithme">documente l’algorithme</a> en faisant des liens vers chaque fichier. Je ne sais pas où je vais mais j’ai l’intuition que ça sera moins galère que l’historique des révisions d’une (ou plusieurs !) feuille(s) de calcul.</p>
<p>On commence à avoir des retours d’associations de patients pour nous aider à rendre le contenu intelligible par des non-médecins/techniciens. C’est chouette.</p>
<h2 id="jour-9-13-mai-lancement-officiel">Jour 9 (13 mai) : Lancement officiel <a href="#jour-9-13-mai-lancement-officiel" title="Ancre vers cette partie">#</a></h2><p>On a enfin une adresse officielle : <a href="https://mesconseilscovid.sante.gouv.fr/">mesconseilscovid.sante.gouv.fr</a>, en <em>seulement</em> 9 jours ! Ça peut vous sembler long mais obtenir un sous-domaine en <code>.gouv.fr</code> est parfois un très très long périple.</p>
<figure>
    <img src="/static/david/2020/mesconseilscovid.png"
         alt="Capture d’écran du site"
         loading="lazy" width="1280" height="800" />
    <figcaption>Capture d’écran du site.</figcaption>
</figure>
<p>On peaufine le cache mais aussi sa mise à jour. Il faut que l’application soit conforme à des doctrines gouvernementales changeantes dans un contexte où la réactivité est cruciale. Notre connaissance de la maladie évolue et les conseils pour y échapper aussi.</p>
<p>Même avec les <em>polyfills</em> qui vont bien, il semblerait que l’élément <code>template</code> soit un peu capricieux avec Internet Explorer 11 et on espère que le site soit utilisable par le plus de personnes possibles. Cela occasionne une veillée à revenir sur notre façon d’écrire les pages/vues. Pas vraiment la partie la plus fun…</p>
<h2 id="jour-11-15-mai-structuration-et-consolidation">Jour 11 (15 mai) : Structuration et consolidation <a href="#jour-11-15-mai-structuration-et-consolidation" title="Ancre vers cette partie">#</a></h2><p>Jusqu’à présent, on a favorisé la vitesse au détriment de la robustesse. On ne peut pas avoir les deux en si peu de temps. Mais par contre, il faut être suffisamment lucide pour savoir s’arrêter à temps et consolider l’existant. Alors on écrit plus de tests, on ré-arrange le code pour le rendre plus compréhensible.</p>
<p>Côté contenus, la proposition de passer par Microsoft Github pour éditer les contenus (et peut-être à terme l’algorithme lui-même ?!) a été bien acceptée et on commence à recevoir des <em>pull-requests</em> de médecins.</p>
<p>Poussés par le besoin, on a créé une nouvelle façon technique d’interagir. Un <em>framework</em> nous aurait probablement trop contraint pour avoir cette liberté d’innovation. Difficile de se prononcer avec certitude toutefois.</p>
<h2 id="jour-15-19-mai-un-cms-statique">Jour 15 (19 mai) : un CMS statique <a href="#jour-15-19-mai-un-cms-statique" title="Ancre vers cette partie">#</a></h2><p>Suite à une réunion de travail, on se rend compte qu’il est difficile d’avoir accès à l’intégralité des contenus disponibles pour pouvoir rester cohérent dans les formulations. Aussi, un découpage par dossier s’impose et permet d’avoir un fichier <em>README.md</em> qui va compiler <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/tree/master/contenus/statuts#statuts">l’ensemble de ces contenus</a> par type. Cela fournit un lien pour aller éditer le bon contenu depuis ces index.</p>
<p>On sent naître aussi la nécessité d’un <em>CHANGELOG</em> afin que toutes l’équipe élargie sache ce qui est <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/blob/master/CHANGELOG.md#changelog">implémenté et déployé</a>. C’est intéressant — et un peu effrayant — de voir à quel point on a réussi à faire contribuer des médecins peu techniques en utilisant nos outils de développeurs·ses.</p>
<p><em>Aussi, je m’éclipse pour <a href="/david/2020/05/20/">une vingtaine d’heures</a> en forêt.</em></p>
<h2 id="jour-18-22-mai-prise-de-recul">Jour 18 (22 mai) : Prise de recul <a href="#jour-18-22-mai-prise-de-recul" title="Ancre vers cette partie">#</a></h2>
<blockquote lang="en">
<p>Prioritisation isn’t easy, and it gets harder the more factors come into play: user needs, business needs, technical constraints. But it’s worth investing the time to get agreement on the priority of your constituencies. And then formulate that agreement into design principles.</p>
<p><cite><em><a href="https://adactio.com/journal/16811">Principles and priorities</a></em> (<a href="/david/cache/2020/f3be13f0057c9ff350b6e0bf3c3be90b/">cache</a>)</cite></p>
</blockquote>
<p>Voici venu le temps de se ré-interroger sur nos intentions, les attentes, les outils employés, nos pratiques. C’est pour moi l’un des meilleurs moments d’un produit, ce petit coup d’œil régulier dans le rétroviseur. Celui qui permet de réajuster une trajectoire naissante en désignant un nouveau cap.</p>
<p>Particulièrement côté technique, on a intentionnellement évité tout les outils JS jusqu’à présent. Il y a peut-être des petites briques à récupérer de-ci de-là sans télécharger la moitié du web. Je me réjouis que l’on ait réussi à conserver une page performante et relativement accessible pour l’instant :</p>
<figure>
    <img src="/static/david/2020/andouillette_web.png"
         alt="Une série de A depuis l’outil WebPageTest"
         loading="lazy" width="724" height="222" />
    <figcaption>L’andouillette du développeur Web.</figcaption>
</figure>
<p>Autre victoire non négligeable, tout reste dans le navigateur. Les seules statistiques que l’on ait sont celles de téléchargement de la page et toutes les dix minutes un <em>ping</em> pour vérifier que les conseils sont bien à jour. Vous pouvez refaire le test 15 fois et on ne le saura pas. Vous pouvez mettre n’importe quoi et ça ne changera rien de notre côté. Bon, ça peut planter et on ne le sait pas non plus…</p>
<p>En parallèle, des démo sont faites à des personnes plus ou moins importantes qui vont déboucher sur des annonces plus ou moins officielles/diffusées. Jusqu’ici ça tient.</p>
<p><em>J’ai travaillé 14,5 jours sur ces 18 derniers jours.</em></p>
<h2 id="jour-25-29-mai-peaufinage-et-outillage">Jour 25 (29 mai) : peaufinage et outillage <a href="#jour-25-29-mai-peaufinage-et-outillage" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>Dans ce « désert sémantique emplis d’échos confus », nous avons besoin d’un « quelconque fétiche prestigieux » qui puisse servir de « <mark>doudou</mark> ».</p>
<p><cite><em><a href="https://lundi.am/Sur-la-pandemie-actuelle-d-apres-le-point-de-vue-d-Ivan-Illich">Sur la pandémie actuelle, d’après le point de vue d’Ivan Illich</a></em> (<a href="/david/cache/2020/be1507ea944c6b8d0abd2a6c09efdc43/">cache</a>)</cite></p>
</blockquote>
<p>On intègre des illustrations qui donnent des repères visuels aux différentes sections. Cela permet de faire un rappel entre la question et les conseils associés. Ces illustrations sont issues de <a href="https://undraw.co/">unDraw</a> et sont libres de droits.</p>
<p>On passe aussi une partie de la semaine à finalement s’outiller en JavaScript avec <a href="https://parceljs.org/">Parcel</a> et à ré-arranger notre code afin de le rendre plus résilient. Fini le fichier fourre-tout avec des variables globales et des dépendances non explicites. Cela nous permet aussi de passer à des tests automatisés, ce qui nous met suffisamment en confiance pour reprendre l’algorithme.</p>
<p>En parallèle, on essaye de savoir <em>via</em> les logs HTTP et <a href="https://goaccess.io/">goaccess</a> d’où viennent nos visiteur·ses. Ce n’est pas si simple car il faut agréger ceux-ci depuis plusieurs machines.</p>
<p><em>Mine de rien, le site commence à être utilisé.</em></p>
<h2 id="jour-33-10-juin-orientation-et-pediatrie">Jour 33 (10 juin) : orientation et pédiatrie <a href="#jour-33-10-juin-orientation-et-pediatrie" title="Ancre vers cette partie">#</a></h2><p>Les retours des testeuses et testeurs nous indiquent qu’il serait pertinent d’ajouter des informations relatives à la pédiatrie. On ajoute une page dédiée pour les moins de 15 ans.</p>
<p>Autre amélioration, on implémente <a href="https://github.com/Delegation-numerique-en-sante/covid19-algorithme-orientation">l’algorithme d’orientation</a> pour les personnes présentant actuellement des symptômes afin de prodiguer des conseils plus pertinents dans ce cas là.</p>
<p>Je résume mais il y a bien évidemment une somme de petites retouches apportées ici et là pour rendre le site plus utile.</p>
<hr />
<p>Je vais m’arrêter là pour le moment, je ferai sûrement une nouvelle entrée dédiée lorsqu’on décidera de mettre un terme au produit. D’ici là vous pouvez suivre le <a href="https://github.com/Delegation-numerique-en-sante/mesconseilscovid/blob/master/CHANGELOG.md#changelog">CHANGELOG</a> dédié.</p>

</main>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/05/20/" title="Publication précédente : Bikepacking">←</a> •
    <a href="/david/2020/" title="Liste des publications récentes">↑</a>
     • <a rel="next" href="/david/2020/06/12/" title="Publication suivante : Vrac">→</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>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" defer></script>
<script type="text/javascript">
    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>