|
|
|
@@ -0,0 +1,128 @@ |
|
|
|
<!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> |
|
|
|
<!-- 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-04-25.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> |
|
|
|
|
|
|
|
<body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> |
|
|
|
|
|
|
|
<article> |
|
|
|
<h1>Covidoudou</h1> |
|
|
|
<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" tabindex="1">🏠</a> |
|
|
|
|
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
<hr> |
|
|
|
|
|
|
|
<p><em>Journal de déconfinement.</em></p> |
|
|
|
<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>.</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" aria-hidden="true">#</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…</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 alors que pas une seule ligne de code n’a é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" aria-hidden="true">#</a></h2><blockquote> |
|
|
|
<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> |
|
|
|
<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" aria-hidden="true">#</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" aria-hidden="true">#</a></h2><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 au final.</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" aria-hidden="true">#</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" aria-hidden="true">#</a></h2><p>Jusqu’à présent, on a favorisé la vitesse au détriment de la robustesse. On ne peut pas avoir les deux ne 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 à dire 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" aria-hidden="true">#</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 cet 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 (<abbr title="private joke">👋🐢🤔</abbr>).</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" aria-hidden="true">#</a></h2><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 jusqu’à présent :</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 celle 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> |
|
|
|
<hr /> |
|
|
|
<p>À suivre…</p> |
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
</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> |
|
|
|
</footer> |
|
|
|
<script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script> |
|
|
|
</body> |
|
|
|
</html> |
