Use markdown for images (and automatic sizes)

david/2020/01/10/index.html

@@ -78,7 +78,9 @@
 <p>Remettre en questions beaucoup de choses sans pour autant trouver de réponses universelles. Se planter, continuer à germer, sans se presser. Partager des choses, inspirer parfois, épauler quand on peut. Une autre façon d’envisager son activité, de manière plus apaisée d’un côté, avec des tiraillements plus profonds de l’autre.</p>
 <p>J’ai passé plus de temps au sein de scopyleft que dans l’ensemble des structures professionnelles par lesquelles je suis précédemment passé. Un quotidien de privilégié qui semble me convenir. En tout cas, cela m’a permis d’en prendre conscience. <em>Merci les scopains.</em></p>
 <h2 id="environnement">Environnement <a href="#environnement" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/environnement.jpg" alt="Environnement de travail, 2019-12-31" loading="lazy" width="1024px" height="768px" />
+    <img src="/static/david/2020/environnement.jpg"
+         alt="Environnement de travail, 2019-12-31"
+         loading="lazy" width="1024" height="768" />
     <figcaption>Mon open-space actuel.</figcaption>
 </figure>
 

david/2020/01/17/index.html

@@ -64,12 +64,16 @@
 <h2 id="drapeau">Drapeau <a href="#drapeau" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Le 22 avril, après quelques itérations internes, le code est déployé en production mais restreint à une partie des utilisateur·ice·s <em>via</em> un <em>feature flag</em>. Il faut connaître l’<abbr title="Uniform Resource Locator">URL</abbr>, à savoir <code>https://www.data.gouv.fr/fr/?flag=recherche</code> pour avoir accès à une nouvelle interface lorsqu’on s’apprête à effectuer une recherche. Les outils sont en place pour pouvoir mesurer les différences de comportements lorsqu’on active ou désactive ce petit drapeau.</p>
 <p>Voilà ce que ça donne lorsqu’on <em>focus</em> sur l’<em>input</em> de recherche :</p>
 <figure>
-    <img src="/static/david/2020/datagouv_recherche.png" alt="Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut." loading="lazy" width="1024px" height="633px" />
+    <img src="/static/david/2020/datagouv_recherche.png"
+         alt="Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut."
+         loading="lazy" width="1024" height="633" />
     <figcaption>Les 6 jeux de données les plus populaires sont affichés par défaut.</figcaption>
 </figure>
 <p>Et voilà ce qui apparait dynamiquement lorsqu’on renseigne le champ avec un mot-clé particulèrement populaire sans qu’aucune requête ne soit faite vers le serveur (une centaine de cartes est pré-chargée par défaut) :</p>
 <figure>
-    <img src="/static/david/2020/datagouv_recherche_covid.png" alt="Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours." loading="lazy" width="1024px" height="812px" />
+    <img src="/static/david/2020/datagouv_recherche_covid.png"
+         alt="Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours."
+         loading="lazy" width="1024" height="812" />
     <figcaption>Cette fois avec les résultats sur le mot-clé <q>covid</q>.</figcaption>
 </figure>
 <p>Il y a des faux positifs car la recherche est assez <em>fuzzy</em> mais dans l’ensemble ça remonte ce qui est pertinent et sur d’autres mots-clés moins normalisés c’est davantage pertinent.</p>

david/2020/01/29/index.html

@@ -45,7 +45,9 @@
 
 <p><em>Réflexions poudreuses.</em></p>
 <h2 id="ski-de-fond">Ski de fond <a href="#ski-de-fond" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/ski_de_fond.jpg" alt="Des skis et une piste à travers la forêt." loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/ski_de_fond.jpg"
+         alt="Des skis et une piste à travers la forêt."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>J’ai croisé trois personnes en trente heures, bon ratio.</figcaption>
 </figure>
 <p>Je crois que je ne pourrais plus faire de sports qui nécessitent une autre énergie que la mienne. C’est en partie hypocrite vu qu’il m’a fallu un véhicule pour y aller et des machines pour faire la piste.</p>
@@ -55,7 +57,9 @@
 <p>Il y a bien assez de place pour deux.</p>
 <p>On s’est relayé pour maintenir le feu dans le poêle au cours de la nuit. Il faisait -21°C au réveil dehors, 7°C à l’intérieur. Pas pire.</p>
 <figure>
-    <img src="/static/david/2020/refuge.jpg" alt="Refuge du Corbeau dans le Parc de la forêt de Ouareau" loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/refuge.jpg"
+         alt="Refuge du Corbeau dans le Parc de la forêt de Ouareau."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Refuge du Corbeau.</figcaption>
 </figure>
 <h2 id="migrants">Migrants <a href="#migrants" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><blockquote>
@@ -64,7 +68,9 @@
 </blockquote>
 <p>De l’importance du vocabulaire. Le seul choix (ou non-choix) qui est fait c’est le nôtre. Riches consommateurs.</p>
 <h2 id="poesie">Poésie <a href="#poesie" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/poesie.jpg" alt="Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux." loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/poesie.jpg"
+         alt="Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Poésie sauvage et anonyme.</figcaption>
 </figure>
 <p><strong>Mise à jour</strong> : <a href="https://ronan.amicel.net/">Ronan</a> m’indique (merci !) qu’il s’agit du poème de Baudelaire « La Géante » :</p>
@@ -91,7 +97,9 @@ Comme un hameau paisible au pied d’une montagne.</p>
 </blockquote>
 <p>En m’endormant, je repense à ce qu’il se passe au sein de <a href="https://beta.gouv.fr/">betagouv</a>. À partir de quelle taille est-ce qu’une <a href="/david/thoughts/#communities">communauté</a> n’arrive plus à prétendre à son horizontalité ? Se battre ou battre en retraite ?</p>
 <h2 id="pointe-critique">Pointe critique <a href="#pointe-critique" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/hydroquebec_pointe_critique.png" alt="Tableau rendant compte des gains en période de pointe critique par HydroQuébec" loading="lazy" width="1024px" height="921px" />
+    <img src="/static/david/2020/hydroquebec_pointe_critique.png"
+         alt="Tableau rendant compte des gains en période de pointe critique par HydroQuébec."
+         loading="lazy" width="1024" height="921" />
     <figcaption>20,83 $CAN depuis le début de l’hiver.</figcaption>
 </figure>
 <p>Depuis cette année, <a href="https://fr.wikipedia.org/wiki/Hydro-Qu%C3%A9bec">Hydro-Québec</a> (équivalent EDF/Enedis local) propose des <a href="http://www.hydroquebec.com/residentiel/espace-clients/tarifs/tarification-dynamique.html">forfaits</a> qui notifient des périodes dites de « <a href="http://www.hydroquebec.com/residentiel/espace-clients/consommation/consommation-electrique-hiver.html">pointe critique</a> » pendant lesquelles on acquiert des crédits si on réduit sa consommation. Je trouve l’initiative intéressante car j’y vois un effort collectif pour lisser les courbes de demande.</p>

david/2020/02/07/index.html

@@ -95,7 +95,9 @@ Il n’a pas fallu attendre le « Temps d’écran » d’Apple pour réaliser
 </blockquote>
 <p>Ceci n’est pas de la science-fiction, il y a aussi une intersectionnalité dans la surveillance et la manipulation. <em>Joie.</em></p>
 <h2 id="sonos">Sonos <a href="#sonos" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/sonos_obsolescence.png" alt="Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans" loading="lazy" width="1024px" height="1056px" />
+    <img src="/static/david/2020/sonos_obsolescence.png"
+         alt="Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans."
+         loading="lazy" width="1024" height="1056" />
     <figcaption><strong>PAS</strong> Merci Sonos pour ce bel exemple d’obsolescence programmée.</figcaption>
 </figure>
 <p>Lorsque Sonos s’est mis à faire des enceintes connectées, je me suis empressé d’acheter les derniers modèles qui n’envoient pas un enregistrement continu de mon environnement (du moins je ne peux que l’espérer). Rétrospectivement, <a href="https://www.bbc.co.uk/news/technology-50948868">c’était une erreur</a> (<a href="/david/cache/2020/cbef115a80c646c9eddc61ac077a6891/">cache</a>) et j’aurais dû m’en tenir à des enceintes <em>low-tech</em> qui ne sont pas des ordinateurs à part entière.</p>
@@ -131,20 +133,28 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 <p>Il suffit d’une seule génération pour en sortir mais il n’a suffit que d’une seule génération pour y entrer aussi.</p>
 <p><em>Ma génération.</em></p>
 <h2 id="credibilite">Crédibilité <a href="#credibilite" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><figure>
-    <img src="/static/david/2020/dependances_affordance.png" alt="Dépendances externes du site affordance.info par l’extension uMatrix" loading="lazy" width="1024px" height="919px" />
+    <img src="/static/david/2020/dependances_affordance.png"
+         alt="Dépendances externes du site affordance.info par l’extension uMatrix"
+         loading="lazy" width="1024" height="919" />
     <figcaption>C’est bien la peine de se plaindre des GAFAM+…</figcaption>
 </figure>
 <p><a href="/david/stream/2019/08/20/">J’évoquais précédemment</a> ma frustration vis-à-vis des situations incohérentes, on en a un bel exemple ici avec l’article sus-cité. Quelle est la crédibilité d’un site dénonçant manifestement l’emprise des GAFAM+ sur nos vies et qui n’a pas moins de 24 dépendances externes incluant les services de Google ?</p>
 <figure>
-    <img src="/static/david/2020/dependances_scinfolex.png" alt="Dépendances externes du site affordance.com par l’extension uMatrix" loading="lazy" width="1024px" height="917px" />
+    <img src="/static/david/2020/dependances_scinfolex.png"
+         alt="Dépendances externes du site scinfolex.com par l’extension uMatrix"
+         loading="lazy" width="1024" height="917" />
     <figcaption>Notez que le cas n’est malheureusement pas isolé dans la blogosphère, loin de là.</figcaption>
 </figure>
 <figure>
-    <img src="/static/david/2020/dependances_monidenum.png" alt="Dépendances externes du site monidenum.com par l’extension uMatrix" loading="lazy" width="1024px" height="1059px" />
+    <img src="/static/david/2020/dependances_monidenum.png"
+         alt="Dépendances externes du site monidenum.fr par l’extension uMatrix"
+         loading="lazy" width="1024" height="1059" />
     <figcaption>Ça marche aussi avec les sites gouvernementaux (qui gèrent l’identité des citoyens sinon c’est pas drôle).</figcaption>
 </figure>
 <figure>
-    <img src="/static/david/2020/dependances_theintercept.png" alt="Dépendances externes du site theintercept.com par l’extension uMatrix" loading="lazy" width="1024px" height="468px" />
+    <img src="/static/david/2020/dependances_theintercept.png"
+         alt="Dépendances externes du site theintercept.com par l’extension uMatrix"
+         loading="lazy" width="1024" height="468" />
     <figcaption>Et puis les journaux indépendants qui parlent de <em>mass surveillance</em> à longueur d’articles.</figcaption>
 </figure>
 <p><em>Hyperconfort, incompétence ou inculture ?</em></p>

david/2020/04/03/index.html

@@ -88,7 +88,9 @@
 <p>Cerise sur le gâteau, je me rends compte que j’étais sur le pont de la dernière scène il y a un mois (4 mars).</p>
 <p><em>La forêt me manque.</em></p>
 <figure>
-    <img src="/static/david/2020/pont_ouareau.jpg" alt="Vue depuis le pont qui enjambe la rivière Ouareau" loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/pont_ouareau.jpg"
+         alt="Vue depuis le pont qui enjambe la rivière Ouareau."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Photo prise depuis le pont.</figcaption>
 </figure>
 <h2 id="good-intent">Good intent <a href="#good-intent" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><blockquote>

david/2020/04/18/index.html

@@ -51,7 +51,9 @@
 <p><cite><em>La Voie de l’Archer</em>, Paulo Coelho</cite></p>
 </blockquote>
 <figure>
-    <img src="/static/david/2020/archer_a_genoux.jpg" alt="Un archer en position à genoux." loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/archer_a_genoux.jpg"
+         alt="Un archer en position à genoux."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Kamakura, avril 2012.</figcaption>
 </figure>
 <h2 id="contexte">Contexte <a href="#contexte" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Je suis contacté par Raphaël il y a deux ans pour rejoindre une <a href="https://beta.gouv.fr/">Startup d’État</a>, après avoir travaillé sur <a href="https://www.data.gouv.fr/fr/">datagouv</a> pendant un temps puis avoir planté <a href="https://beta.gouv.fr/startups/api-drones.html">une autre startup</a>. Dans un tel contexte, on ne sait jamais ce qui va pousser après. Dans mon cas, ça avait quand même fait germer une petite graine sur l’importance d’un·e responsable produit ainsi que la présence d’une personne ayant des compétences en <abbr title="Expérience utilisateur·ice">UX</abbr>.</p>
@@ -60,7 +62,9 @@
 <p>Cela faisait un moment que je m’intéressais au processus législatif car il me semblait que cela était un élément clé de la démocratie. Aussi, je réponds naïvement « oui » et me voilà embarqué dans un wagonnet de montagnes russes. Enfin — canadiennes en fait — vu que nous avons pu concevoir l’intégralité du produit <a href="/david/blog/2018/penser-distance/">en étant à distance</a>.</p>
 <p>Ainsi naissait mon implication dans <a href="https://beta.gouv.fr/startups/zam.html">Zam</a> (<a href="/david/cache/2020/8d7e08c54e30cc6d35375da17e6a61c0/">cache</a>).</p>
 <figure>
-    <img src="/static/david/2020/zam_journal.png" alt="Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17." loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/zam_journal.png"
+         alt="Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Première entrée dans mon journal pro, j’aime constater à quel point il a évolué dans le temps pour consigner davantage des émotions et ressentis une fois la confiance installée.</figcaption>
 </figure>
 <h2 id="objectif">Objectif <a href="#objectif" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>L’objectif est de proposer un outil numérique permettant de réduire la pénibilité (et le nombre de pages jusque là imprimées) lors de la rédaction des réponses aux amendements soumis par les député·e·s et/ou sénateur·ice·s de la part du gouvernement afin de préparer le débat législatif au sein des instances parlementaires (Assemblée Nationale et Sénat).</p>
@@ -80,7 +84,9 @@
 <p>Tous les six mois environ (?), on prend un peu de recul sur ce que l’on a fait et compris — sur notre nouvelle façon de voir les choses aussi — pour réajuster le cap si on en ressent le besoin. Cela permet d’échanger sur des émotions qui sont passées entre les mailles du filet quotidien.</p>
 <h2 id="technique">Technique <a href="#technique" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>J’ai parlé un peu de <a href="/david/2020/03/13/">technique</a> récemment et la pile de technologies que l’on a utilisé pour ce projet me semble être relativement stable et compréhensible. Le code est accessible sur <a href="https://github.com/betagouv/zam/">Microsoft Github</a> sous <a href="https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)">licence AGPL-3</a>, on peut voir que la répartition est assez équilibrée entre Ronan et moi. C’est du Python 3 annoté pour les types qui utilise <a href="https://trypyramid.com/">Pyramid</a> comme <em>framework</em> web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit (voir plus bas).</p>
 <figure>
-    <img src="/static/david/2020/zam_meme_bootstrap.jpg" alt="Il y aura toujours Bootstrap sur Zam." loading="lazy" width="517px" height="499px" />
+    <img src="/static/david/2020/zam_meme_bootstrap.jpg"
+         alt="Il y aura toujours Bootstrap sur Zam."
+         loading="lazy" width="517" height="499" />
     <figcaption>Un petit mème <em>courtesy of</em> Maïtané 😅.</figcaption>
 </figure>
 <p>Ce qui est peut-être un peu plus inhabituel c’est de ne pas utiliser <a href="https://www.npmjs.com/">Microsoft npm</a> pour gérer nos dépendances JavaScript, cela permet de bien voir ce que l’on ajoute, une sorte de <a href="https://timkadlec.com/remembers/2020-03-18-building-with-friction/">friction</a> (<a href="/david/cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/">cache</a>) manuelle qui m’est chère lorsqu’on parle de faire tourner mon code sur la machine de beaucoup d’autres.</p>
@@ -102,7 +108,9 @@
 <p><cite><em>La Voie de l’Archer</em>, Paulo Coelho</cite></p>
 </blockquote>
 <figure>
-    <img src="/static/david/2020/archer_equipe.jpg" alt="Des archers en position." loading="lazy" width="1024px" height="1537px" />
+    <img src="/static/david/2020/archer_equipe.jpg"
+         alt="Des archers en position."
+         loading="lazy" width="1024" height="1537" />
     <figcaption>Kamakura, avril 2012.</figcaption>
 </figure>
 <h2 id="satisfactions">Satisfactions <a href="#satisfactions" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Je vais me concentrer sur trois satisfactions importantes au cours de ces deux dernières années :</p>
@@ -133,7 +141,9 @@
 <p><cite><em>La Voie de l’Archer</em>, Paulo Coelho</cite></p>
 </blockquote>
 <figure>
-    <img src="/static/david/2020/archer_tir.jpg" alt="Un archer en train de tirer." loading="lazy" width="1024px" height="1366px" />
+    <img src="/static/david/2020/archer_tir.jpg"
+         alt="Un archer en train de tirer."
+         loading="lazy" width="1024" height="1366" />
     <figcaption>Kamakura, avril 2012.</figcaption>
 </figure>
 <p><em>P.S.: le Japon me manque.</em></p>

david/2020/12/15/index.html

@@ -90,7 +90,9 @@
 <p>Cerise sur le gâteau, je me rends compte que j’étais sur le pont de la dernière scène il y a un mois (4 mars).</p>
 <p><em>La forêt me manque.</em></p>
 <figure>
-    <img src="/static/david/2020/pont_ouareau.jpg" alt="Vue depuis le pont qui enjambe la rivière Ouareau" loading="lazy" width="1024px" height="1024px" />
+    <img src="/static/david/2020/pont_ouareau.jpg"
+         alt="Vue depuis le pont qui enjambe la rivière Ouareau."
+         loading="lazy" width="1024" height="1024" />
     <figcaption>Photo prise depuis le pont.</figcaption>
 </figure>
 <hr />

david/2020/fragments/Credibilite.md

@@ -1,26 +1,14 @@
 ## Crédibilité
 
-<figure>
-    <img src="/static/david/2020/dependances_affordance.png" alt="Dépendances externes du site affordance.info par l’extension uMatrix" loading="lazy" width="1024px" height="919px" />
-    <figcaption>C’est bien la peine de se plaindre des GAFAM+…</figcaption>
-</figure>
+![Dépendances externes du site affordance.info par l’extension uMatrix](/static/david/2020/dependances_affordance.png "C’est bien la peine de se plaindre des GAFAM+…")
 
 [J’évoquais précédemment](/david/stream/2019/08/20/) ma frustration vis-à-vis des situations incohérentes, on en a un bel exemple ici avec l’article sus-cité. Quelle est la crédibilité d’un site dénonçant manifestement l’emprise des GAFAM+ sur nos vies et qui n’a pas moins de 24 dépendances externes incluant les services de Google ?
 
-<figure>
-    <img src="/static/david/2020/dependances_scinfolex.png" alt="Dépendances externes du site affordance.com par l’extension uMatrix" loading="lazy" width="1024px" height="917px" />
-    <figcaption>Notez que le cas n’est malheureusement pas isolé dans la blogosphère, loin de là.</figcaption>
-</figure>
+![Dépendances externes du site scinfolex.com par l’extension uMatrix](/static/david/2020/dependances_scinfolex.png "Notez que le cas n’est malheureusement pas isolé dans la blogosphère, loin de là.")
 
-<figure>
-    <img src="/static/david/2020/dependances_monidenum.png" alt="Dépendances externes du site monidenum.com par l’extension uMatrix" loading="lazy" width="1024px" height="1059px" />
-    <figcaption>Ça marche aussi avec les sites gouvernementaux (qui gèrent l’identité des citoyens sinon c’est pas drôle).</figcaption>
-</figure>
+![Dépendances externes du site monidenum.fr par l’extension uMatrix](/static/david/2020/dependances_monidenum.png "Ça marche aussi avec les sites gouvernementaux (qui gèrent l’identité des citoyens sinon c’est pas drôle).")
 
-<figure>
-    <img src="/static/david/2020/dependances_theintercept.png" alt="Dépendances externes du site theintercept.com par l’extension uMatrix" loading="lazy" width="1024px" height="468px" />
-    <figcaption>Et puis les journaux indépendants qui parlent de <em>mass surveillance</em> à longueur d’articles.</figcaption>
-</figure>
+![Dépendances externes du site theintercept.com par l’extension uMatrix](/static/david/2020/dependances_theintercept.png "Et puis les journaux indépendants qui parlent de <em>mass surveillance</em> à longueur d’articles.")
 
 *Hyperconfort, incompétence ou inculture ?*
 

david/2020/fragments/Drapeau.md

@@ -4,16 +4,10 @@ Le 22 avril, après quelques itérations internes, le code est déployé en pro
 
 Voilà ce que ça donne lorsqu’on <em>focus</em> sur l’<em>input</em> de recherche :
 
-<figure>
-    <img src="/static/david/2020/datagouv_recherche.png" alt="Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut." loading="lazy" width="1024px" height="633px" />
-    <figcaption>Les 6 jeux de données les plus populaires sont affichés par défaut.</figcaption>
-</figure>
+![Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut.](/static/david/2020/datagouv_recherche.png "Les 6 jeux de données les plus populaires sont affichés par défaut.")
 
 Et voilà ce qui apparait dynamiquement lorsqu’on renseigne le champ avec un mot-clé particulèrement populaire sans qu’aucune requête ne soit faite vers le serveur (une centaine de cartes est pré-chargée par défaut) :
 
-<figure>
-    <img src="/static/david/2020/datagouv_recherche_covid.png" alt="Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours." loading="lazy" width="1024px" height="812px" />
-    <figcaption>Cette fois avec les résultats sur le mot-clé <q>covid</q>.</figcaption>
-</figure>
+![Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours.](/static/david/2020/datagouv_recherche_covid.png "Cette fois avec les résultats sur le mot-clé <q>covid</q>.")
 
 Il y a des faux positifs car la recherche est assez *fuzzy* mais dans l’ensemble ça remonte ce qui est pertinent et sur d’autres mots-clés moins normalisés c’est davantage pertinent.

david/2020/fragments/Environnement.md

@@ -1,6 +1,3 @@
 ## Environnement
 
-<figure>
-    <img src="/static/david/2020/environnement.jpg" alt="Environnement de travail, 2019-12-31" loading="lazy" width="1024px" height="768px" />
-    <figcaption>Mon open-space actuel.</figcaption>
-</figure>
+![Environnement de travail, 2019-12-31](/static/david/2020/environnement.jpg "Mon open-space actuel.")

david/2020/fragments/Jusqu_au_declin.md

@@ -8,7 +8,4 @@ Cerise sur le gâteau, je me rends compte que j’étais sur le pont de la derni
 
 *La forêt me manque.*
 
-<figure>
-    <img src="/static/david/2020/pont_ouareau.jpg" alt="Vue depuis le pont qui enjambe la rivière Ouareau" loading="lazy" width="1024px" height="1024px" />
-    <figcaption>Photo prise depuis le pont.</figcaption>
-</figure>
+![Vue depuis le pont qui enjambe la rivière Ouareau.](/static/david/2020/pont_ouareau.jpg "Photo prise depuis le pont.")

david/2020/fragments/Poesie.md

@@ -1,9 +1,6 @@
 ## Poésie
 
-<figure>
-    <img src="/static/david/2020/poesie.jpg" alt="Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux." loading="lazy" width="1024px" height="1024px" />
-    <figcaption>Poésie sauvage et anonyme.</figcaption>
-</figure>
+![Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux.](/static/david/2020/poesie.jpg "Poésie sauvage et anonyme.")
 
 **Mise à jour** : [Ronan](https://ronan.amicel.net/) m’indique (merci !) qu’il s’agit du poème de Baudelaire « La Géante » :
 

david/2020/fragments/Pointe critique.md

@@ -1,9 +1,6 @@
 ## Pointe critique
 
-<figure>
-    <img src="/static/david/2020/hydroquebec_pointe_critique.png" alt="Tableau rendant compte des gains en période de pointe critique par HydroQuébec" loading="lazy" width="1024px" height="921px" />
-    <figcaption>20,83 $CAN depuis le début de l’hiver.</figcaption>
-</figure>
+![Tableau rendant compte des gains en période de pointe critique par HydroQuébec.](/static/david/2020/hydroquebec_pointe_critique.png "20,83 $CAN depuis le début de l’hiver.")
 
 Depuis cette année, [Hydro-Québec](https://fr.wikipedia.org/wiki/Hydro-Qu%C3%A9bec) (équivalent EDF/Enedis local) propose des [forfaits](http://www.hydroquebec.com/residentiel/espace-clients/tarifs/tarification-dynamique.html) qui notifient des périodes dites de « [pointe critique](http://www.hydroquebec.com/residentiel/espace-clients/consommation/consommation-electrique-hiver.html) » pendant lesquelles on acquiert des crédits si on réduit sa consommation. Je trouve l’initiative intéressante car j’y vois un effort collectif pour lisser les courbes de demande.
 

david/2020/fragments/Refugie.md

@@ -6,7 +6,4 @@ Il y a bien assez de place pour deux.
 
 On s’est relayé pour maintenir le feu dans le poêle au cours de la nuit. Il faisait -21°C au réveil dehors, 7°C à l’intérieur. Pas pire.
 
-<figure>
-    <img src="/static/david/2020/refuge.jpg" alt="Refuge du Corbeau dans le Parc de la forêt de Ouareau" loading="lazy" width="1024px" height="1024px" />
-    <figcaption>Refuge du Corbeau.</figcaption>
-</figure>
+![Refuge du Corbeau dans le Parc de la forêt de Ouareau.](/static/david/2020/refuge.jpg "Refuge du Corbeau.")

david/2020/fragments/Ski de fond.md

@@ -1,9 +1,6 @@
 ## Ski de fond
 
-<figure>
-    <img src="/static/david/2020/ski_de_fond.jpg" alt="Des skis et une piste à travers la forêt." loading="lazy" width="1024px" height="1024px" />
-    <figcaption>J’ai croisé trois personnes en trente heures, bon ratio.</figcaption>
-</figure>
+![Des skis et une piste à travers la forêt.](/static/david/2020/ski_de_fond.jpg "J’ai croisé trois personnes en trente heures, bon ratio.")
 
 Je crois que je ne pourrais plus faire de sports qui nécessitent une autre énergie que la mienne. C’est en partie hypocrite vu qu’il m’a fallu un véhicule pour y aller et des machines pour faire la piste.
 

david/2020/fragments/Sonos.md

@@ -1,8 +1,5 @@
 ## Sonos
 
-<figure>
-    <img src="/static/david/2020/sonos_obsolescence.png" alt="Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans" loading="lazy" width="1024px" height="1056px" />
-    <figcaption><strong>PAS</strong> Merci Sonos pour ce bel exemple d’obsolescence programmée.</figcaption>
-</figure>
+![Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans.](/static/david/2020/sonos_obsolescence.png "<strong>PAS</strong> Merci Sonos pour ce bel exemple d’obsolescence programmée.")
 
 Lorsque Sonos s’est mis à faire des enceintes connectées, je me suis empressé d’acheter les derniers modèles qui n’envoient pas un enregistrement continu de mon environnement (du moins je ne peux que l’espérer). Rétrospectivement, [c’était une erreur](https://www.bbc.co.uk/news/technology-50948868) ([cache](/david/cache/2020/cbef115a80c646c9eddc61ac077a6891/)) et j’aurais dû m’en tenir à des enceintes *low-tech* qui ne sont pas des ordinateurs à part entière.

david/2020/fragments/Zam Contexte.md

@@ -10,7 +10,4 @@ Cela faisait un moment que je m’intéressais au processus législatif car il m
 
 Ainsi naissait mon implication dans [Zam](https://beta.gouv.fr/startups/zam.html) ([cache](/david/cache/2020/8d7e08c54e30cc6d35375da17e6a61c0/)).
 
-<figure>
-    <img src="/static/david/2020/zam_journal.png" alt="Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17." loading="lazy" width="1024px" height="1024px" />
-    <figcaption>Première entrée dans mon journal pro, j’aime constater à quel point il a évolué dans le temps pour consigner davantage des émotions et ressentis une fois la confiance installée.</figcaption>
-</figure>
+![Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17.](/static/david/2020/zam_journal.png "Première entrée dans mon journal pro, j’aime constater à quel point il a évolué dans le temps pour consigner davantage des émotions et ressentis une fois la confiance installée.")

david/2020/fragments/Zam Entracte.md

@@ -8,8 +8,4 @@
 >
 > <cite>*La Voie de l’Archer*, Paulo Coelho</cite>
 
-<figure>
-    <img src="/static/david/2020/archer_equipe.jpg" alt="Des archers en position." loading="lazy" width="1024px" height="1537px" />
-    <figcaption>Kamakura, avril 2012.</figcaption>
-</figure>
-
+![Des archers en position.](/static/david/2020/archer_equipe.jpg "Kamakura, avril 2012.")

david/2020/fragments/Zam Epilogue.md

@@ -6,7 +6,4 @@
 >
 > <cite>*La Voie de l’Archer*, Paulo Coelho</cite>
 
-<figure>
-    <img src="/static/david/2020/archer_tir.jpg" alt="Un archer en train de tirer." loading="lazy" width="1024px" height="1366px" />
-    <figcaption>Kamakura, avril 2012.</figcaption>
-</figure>
+![Un archer en train de tirer.](/static/david/2020/archer_tir.jpg "Kamakura, avril 2012.")

david/2020/fragments/Zam Prologue.md

@@ -8,7 +8,4 @@
 >
 > <cite>*La Voie de l’Archer*, Paulo Coelho</cite>
 
-<figure>
-    <img src="/static/david/2020/archer_a_genoux.jpg" alt="Un archer en position à genoux." loading="lazy" width="1024px" height="1024px" />
-    <figcaption>Kamakura, avril 2012.</figcaption>
-</figure>
+![Un archer en position à genoux.](/static/david/2020/archer_a_genoux.jpg "Kamakura, avril 2012.")

david/2020/fragments/Zam Technique.md

@@ -2,10 +2,7 @@
 
 J’ai parlé un peu de [technique](/david/2020/03/13/) récemment et la pile de technologies que l’on a utilisé pour ce projet me semble être relativement stable et compréhensible. Le code est accessible sur [Microsoft Github](https://github.com/betagouv/zam/) sous [licence AGPL-3](https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)), on peut voir que la répartition est assez équilibrée entre Ronan et moi. C’est du Python 3 annoté pour les types qui utilise [Pyramid](https://trypyramid.com/) comme *framework* web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit (voir plus bas).
 
-<figure>
-    <img src="/static/david/2020/zam_meme_bootstrap.jpg" alt="Il y aura toujours Bootstrap sur Zam." loading="lazy" width="517px" height="499px" />
-    <figcaption>Un petit mème <em>courtesy of</em> Maïtané 😅.</figcaption>
-</figure>
+![Il y aura toujours Bootstrap sur Zam.](/static/david/2020/zam_meme_bootstrap.jpg "Un petit mème <em>courtesy of</em> Maïtané 😅.")
 
 Ce qui est peut-être un peu plus inhabituel c’est de ne pas utiliser [Microsoft npm](https://www.npmjs.com/) pour gérer nos dépendances JavaScript, cela permet de bien voir ce que l’on ajoute, une sorte de [friction](https://timkadlec.com/remembers/2020-03-18-building-with-friction/) ([cache](/david/cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/)) manuelle qui m’est chère lorsqu’on parle de faire tourner mon code sur la machine de beaucoup d’autres.
 

david/log/index.xml

@@ -5,7 +5,7 @@
     <link href="https://larlet.fr/david/" rel="alternate" type="text/html" />
     <link href="https://larlet.fr/david/log/" rel="self" />
     <id>https://larlet.fr/david/</id>
-    <updated>2020-04-29T12:00:00+01:00</updated>
+    <updated>2020-04-30T12:00:00+01:00</updated>
     <author>
         <name>David Larlet</name>
         <uri>https://larlet.fr/david/</uri>
@@ -27,7 +27,9 @@
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;La Voie de l’Archer&lt;/em&gt;, Paulo Coelho&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_a_genoux.jpg&quot; alt=&quot;Un archer en position à genoux.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_a_genoux.jpg&quot;
+         alt=&quot;Un archer en position à genoux.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;Kamakura, avril 2012.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h2&gt;Contexte&lt;/h2&gt;
@@ -37,7 +39,9 @@
 &lt;p&gt;Cela faisait un moment que je m’intéressais au processus législatif car il me semblait que cela était un élément clé de la démocratie. Aussi, je réponds naïvement « oui » et me voilà embarqué dans un wagonnet de montagnes russes. Enfin — canadiennes en fait — vu que nous avons pu concevoir l’intégralité du produit &lt;a href=&quot;https://larlet.fr/david/blog/2018/penser-distance/&quot;&gt;en étant à distance&lt;/a&gt;.&lt;/p&gt;
 &lt;p&gt;Ainsi naissait mon implication dans &lt;a href=&quot;https://beta.gouv.fr/startups/zam.html&quot;&gt;Zam&lt;/a&gt; (&lt;a href=&quot;https://larlet.fr/david/cache/2020/8d7e08c54e30cc6d35375da17e6a61c0/&quot;&gt;cache&lt;/a&gt;).&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/zam_journal.png&quot; alt=&quot;Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/zam_journal.png&quot;
+         alt=&quot;Première rencontre avec Mélodie le 18 avril, avec Raphaël le 17.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;Première entrée dans mon journal pro, j’aime constater à quel point il a évolué dans le temps pour consigner davantage des émotions et ressentis une fois la confiance installée.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h2&gt;Objectif&lt;/h2&gt;
@@ -60,7 +64,9 @@
 &lt;h2&gt;Technique&lt;/h2&gt;
 &lt;p&gt;J’ai parlé un peu de &lt;a href=&quot;https://larlet.fr/david/2020/03/13/&quot;&gt;technique&lt;/a&gt; récemment et la pile de technologies que l’on a utilisé pour ce projet me semble être relativement stable et compréhensible. Le code est accessible sur &lt;a href=&quot;https://github.com/betagouv/zam/&quot;&gt;Microsoft Github&lt;/a&gt; sous &lt;a href=&quot;https://tldrlegal.com/license/gnu-affero-general-public-license-v3-(agpl-3.0)&quot;&gt;licence AGPL-3&lt;/a&gt;, on peut voir que la répartition est assez équilibrée entre Ronan et moi. C’est du Python 3 annoté pour les types qui utilise &lt;a href=&quot;https://trypyramid.com/&quot;&gt;Pyramid&lt;/a&gt; comme &lt;em&gt;framework&lt;/em&gt; web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit (voir plus bas).&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/zam_meme_bootstrap.jpg&quot; alt=&quot;Il y aura toujours Bootstrap sur Zam.&quot; loading=&quot;lazy&quot; width=&quot;517px&quot; height=&quot;499px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/zam_meme_bootstrap.jpg&quot;
+         alt=&quot;Il y aura toujours Bootstrap sur Zam.&quot;
+         loading=&quot;lazy&quot; width=&quot;517&quot; height=&quot;499&quot; /&gt;
     &lt;figcaption&gt;Un petit mème &lt;em&gt;courtesy of&lt;/em&gt; Maïtané 😅.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Ce qui est peut-être un peu plus inhabituel c’est de ne pas utiliser &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;Microsoft npm&lt;/a&gt; pour gérer nos dépendances JavaScript, cela permet de bien voir ce que l’on ajoute, une sorte de &lt;a href=&quot;https://timkadlec.com/remembers/2020-03-18-building-with-friction/&quot;&gt;friction&lt;/a&gt; (&lt;a href=&quot;https://larlet.fr/david/cache/2020/331eb17ffb3f4fbb5fdd8123c0dc1eeb/&quot;&gt;cache&lt;/a&gt;) manuelle qui m’est chère lorsqu’on parle de faire tourner mon code sur la machine de beaucoup d’autres.&lt;/p&gt;
@@ -84,7 +90,9 @@
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;La Voie de l’Archer&lt;/em&gt;, Paulo Coelho&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_equipe.jpg&quot; alt=&quot;Des archers en position.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1537px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_equipe.jpg&quot;
+         alt=&quot;Des archers en position.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1537&quot; /&gt;
     &lt;figcaption&gt;Kamakura, avril 2012.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h2&gt;Satisfactions&lt;/h2&gt;
@@ -120,7 +128,9 @@
 &lt;p&gt;&lt;cite&gt;&lt;em&gt;La Voie de l’Archer&lt;/em&gt;, Paulo Coelho&lt;/cite&gt;&lt;/p&gt;
 &lt;/blockquote&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_tir.jpg&quot; alt=&quot;Un archer en train de tirer.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1366px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/archer_tir.jpg&quot;
+         alt=&quot;Un archer en train de tirer.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1366&quot; /&gt;
     &lt;figcaption&gt;Kamakura, avril 2012.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;&lt;em&gt;P.S.: le Japon me manque.&lt;/em&gt;&lt;/p&gt;
@@ -274,7 +284,9 @@
 &lt;p&gt;Cerise sur le gâteau, je me rends compte que j’étais sur le pont de la dernière scène il y a un mois (4 mars).&lt;/p&gt;
 &lt;p&gt;&lt;em&gt;La forêt me manque.&lt;/em&gt;&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/pont_ouareau.jpg&quot; alt=&quot;Vue depuis le pont qui enjambe la rivière Ouareau&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/pont_ouareau.jpg&quot;
+         alt=&quot;Vue depuis le pont qui enjambe la rivière Ouareau.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;Photo prise depuis le pont.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h2&gt;Good intent&lt;/h2&gt;
@@ -857,7 +869,9 @@ Il n’a pas fallu attendre le « Temps d’écran » d’Apple pour réaliser
 &lt;p&gt;Ceci n’est pas de la science-fiction, il y a aussi une intersectionnalité dans la surveillance et la manipulation. &lt;em&gt;Joie.&lt;/em&gt;&lt;/p&gt;
 &lt;h2&gt;Sonos&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/sonos_obsolescence.png&quot; alt=&quot;Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1056px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/sonos_obsolescence.png&quot;
+         alt=&quot;Courriel envoyé par Sonos pour des enceintes achetées il y a moins de trois ans.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1056&quot; /&gt;
     &lt;figcaption&gt;&lt;strong&gt;PAS&lt;/strong&gt; Merci Sonos pour ce bel exemple d’obsolescence programmée.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Lorsque Sonos s’est mis à faire des enceintes connectées, je me suis empressé d’acheter les derniers modèles qui n’envoient pas un enregistrement continu de mon environnement (du moins je ne peux que l’espérer). Rétrospectivement, &lt;a href=&quot;https://www.bbc.co.uk/news/technology-50948868&quot;&gt;c’était une erreur&lt;/a&gt; (&lt;a href=&quot;https://larlet.fr/david/cache/2020/cbef115a80c646c9eddc61ac077a6891/&quot;&gt;cache&lt;/a&gt;) et j’aurais dû m’en tenir à des enceintes &lt;em&gt;low-tech&lt;/em&gt; qui ne sont pas des ordinateurs à part entière.&lt;/p&gt;
@@ -898,20 +912,28 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 &lt;p&gt;&lt;em&gt;Ma génération.&lt;/em&gt;&lt;/p&gt;
 &lt;h2&gt;Crédibilité&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_affordance.png&quot; alt=&quot;Dépendances externes du site affordance.info par l’extension uMatrix&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;919px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_affordance.png&quot;
+         alt=&quot;Dépendances externes du site affordance.info par l’extension uMatrix&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;919&quot; /&gt;
     &lt;figcaption&gt;C’est bien la peine de se plaindre des GAFAM+…&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/stream/2019/08/20/&quot;&gt;J’évoquais précédemment&lt;/a&gt; ma frustration vis-à-vis des situations incohérentes, on en a un bel exemple ici avec l’article sus-cité. Quelle est la crédibilité d’un site dénonçant manifestement l’emprise des GAFAM+ sur nos vies et qui n’a pas moins de 24 dépendances externes incluant les services de Google ?&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_scinfolex.png&quot; alt=&quot;Dépendances externes du site affordance.com par l’extension uMatrix&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;917px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_scinfolex.png&quot;
+         alt=&quot;Dépendances externes du site scinfolex.com par l’extension uMatrix&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;917&quot; /&gt;
     &lt;figcaption&gt;Notez que le cas n’est malheureusement pas isolé dans la blogosphère, loin de là.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_monidenum.png&quot; alt=&quot;Dépendances externes du site monidenum.com par l’extension uMatrix&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1059px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_monidenum.png&quot;
+         alt=&quot;Dépendances externes du site monidenum.fr par l’extension uMatrix&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1059&quot; /&gt;
     &lt;figcaption&gt;Ça marche aussi avec les sites gouvernementaux (qui gèrent l’identité des citoyens sinon c’est pas drôle).&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_theintercept.png&quot; alt=&quot;Dépendances externes du site theintercept.com par l’extension uMatrix&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;468px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/dependances_theintercept.png&quot;
+         alt=&quot;Dépendances externes du site theintercept.com par l’extension uMatrix&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;468&quot; /&gt;
     &lt;figcaption&gt;Et puis les journaux indépendants qui parlent de &lt;em&gt;mass surveillance&lt;/em&gt; à longueur d’articles.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;&lt;em&gt;Hyperconfort, incompétence ou inculture ?&lt;/em&gt;&lt;/p&gt;
@@ -1001,7 +1023,9 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 &lt;p&gt;&lt;em&gt;Réflexions poudreuses.&lt;/em&gt;&lt;/p&gt;
 &lt;h2&gt;Ski de fond&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/ski_de_fond.jpg&quot; alt=&quot;Des skis et une piste à travers la forêt.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/ski_de_fond.jpg&quot;
+         alt=&quot;Des skis et une piste à travers la forêt.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;J’ai croisé trois personnes en trente heures, bon ratio.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Je crois que je ne pourrais plus faire de sports qui nécessitent une autre énergie que la mienne. C’est en partie hypocrite vu qu’il m’a fallu un véhicule pour y aller et des machines pour faire la piste.&lt;/p&gt;
@@ -1012,7 +1036,9 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 &lt;p&gt;Il y a bien assez de place pour deux.&lt;/p&gt;
 &lt;p&gt;On s’est relayé pour maintenir le feu dans le poêle au cours de la nuit. Il faisait -21°C au réveil dehors, 7°C à l’intérieur. Pas pire.&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/refuge.jpg&quot; alt=&quot;Refuge du Corbeau dans le Parc de la forêt de Ouareau&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/refuge.jpg&quot;
+         alt=&quot;Refuge du Corbeau dans le Parc de la forêt de Ouareau.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;Refuge du Corbeau.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;h2&gt;Migrants&lt;/h2&gt;
@@ -1023,7 +1049,9 @@ On croyait la main du marché invisible, c’est en fait une œillère bien opaq
 &lt;p&gt;De l’importance du vocabulaire. Le seul choix (ou non-choix) qui est fait c’est le nôtre. Riches consommateurs.&lt;/p&gt;
 &lt;h2&gt;Poésie&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/poesie.jpg&quot; alt=&quot;Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;1024px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/poesie.jpg&quot;
+         alt=&quot;Du temps que la nature en sa verve puissante, concevait chaque jour des enfants monstrueux, j’eus aimé vivre auprès d’une jeune géante, comme à son pied un chat voluptueux.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;1024&quot; /&gt;
     &lt;figcaption&gt;Poésie sauvage et anonyme.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;&lt;strong&gt;Mise à jour&lt;/strong&gt; : &lt;a href=&quot;https://ronan.amicel.net/&quot;&gt;Ronan&lt;/a&gt; m’indique (merci !) qu’il s’agit du poème de Baudelaire « La Géante » :&lt;/p&gt;
@@ -1052,7 +1080,9 @@ Comme un hameau paisible au pied d’une montagne.&lt;/p&gt;
 &lt;p&gt;En m’endormant, je repense à ce qu’il se passe au sein de &lt;a href=&quot;https://beta.gouv.fr/&quot;&gt;betagouv&lt;/a&gt;. À partir de quelle taille est-ce qu’une &lt;a href=&quot;https://larlet.fr/david/thoughts/#communities&quot;&gt;communauté&lt;/a&gt; n’arrive plus à prétendre à son horizontalité ? Se battre ou battre en retraite ?&lt;/p&gt;
 &lt;h2&gt;Pointe critique&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/hydroquebec_pointe_critique.png&quot; alt=&quot;Tableau rendant compte des gains en période de pointe critique par HydroQuébec&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;921px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/hydroquebec_pointe_critique.png&quot;
+         alt=&quot;Tableau rendant compte des gains en période de pointe critique par HydroQuébec.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;921&quot; /&gt;
     &lt;figcaption&gt;20,83 $CAN depuis le début de l’hiver.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Depuis cette année, &lt;a href=&quot;https://fr.wikipedia.org/wiki/Hydro-Qu%C3%A9bec&quot;&gt;Hydro-Québec&lt;/a&gt; (équivalent EDF/Enedis local) propose des &lt;a href=&quot;http://www.hydroquebec.com/residentiel/espace-clients/tarifs/tarification-dynamique.html&quot;&gt;forfaits&lt;/a&gt; qui notifient des périodes dites de « &lt;a href=&quot;http://www.hydroquebec.com/residentiel/espace-clients/consommation/consommation-electrique-hiver.html&quot;&gt;pointe critique&lt;/a&gt; » pendant lesquelles on acquiert des crédits si on réduit sa consommation. Je trouve l’initiative intéressante car j’y vois un effort collectif pour lisser les courbes de demande.&lt;/p&gt;
@@ -1176,12 +1206,16 @@ Comme un hameau paisible au pied d’une montagne.&lt;/p&gt;
 &lt;p&gt;Le 22 avril, après quelques itérations internes, le code est déployé en production mais restreint à une partie des utilisateur·ice·s &lt;em&gt;via&lt;/em&gt; un &lt;em&gt;feature flag&lt;/em&gt;. Il faut connaître l’&lt;abbr title=&quot;Uniform Resource Locator&quot;&gt;URL&lt;/abbr&gt;, à savoir &lt;code&gt;https://www.data.gouv.fr/fr/?flag=recherche&lt;/code&gt; pour avoir accès à une nouvelle interface lorsqu’on s’apprête à effectuer une recherche. Les outils sont en place pour pouvoir mesurer les différences de comportements lorsqu’on active ou désactive ce petit drapeau.&lt;/p&gt;
 &lt;p&gt;Voilà ce que ça donne lorsqu’on &lt;em&gt;focus&lt;/em&gt; sur l’&lt;em&gt;input&lt;/em&gt; de recherche :&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/datagouv_recherche.png&quot; alt=&quot;Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;633px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/datagouv_recherche.png&quot;
+         alt=&quot;Capture d’écran de la page d’accueil de data.gouv.fr avec les cartes par défaut.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;633&quot; /&gt;
     &lt;figcaption&gt;Les 6 jeux de données les plus populaires sont affichés par défaut.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Et voilà ce qui apparait dynamiquement lorsqu’on renseigne le champ avec un mot-clé particulèrement populaire sans qu’aucune requête ne soit faite vers le serveur (une centaine de cartes est pré-chargée par défaut) :&lt;/p&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/datagouv_recherche_covid.png&quot; alt=&quot;Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours.&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;812px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/datagouv_recherche_covid.png&quot;
+         alt=&quot;Capture d’écran de la page d’accueil de data.gouv.fr avec une recherche en cours.&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;812&quot; /&gt;
     &lt;figcaption&gt;Cette fois avec les résultats sur le mot-clé &lt;q&gt;covid&lt;/q&gt;.&lt;/figcaption&gt;
 &lt;/figure&gt;
 &lt;p&gt;Il y a des faux positifs car la recherche est assez &lt;em&gt;fuzzy&lt;/em&gt; mais dans l’ensemble ça remonte ce qui est pertinent et sur d’autres mots-clés moins normalisés c’est davantage pertinent.&lt;/p&gt;
@@ -1288,7 +1322,9 @@ Comme un hameau paisible au pied d’une montagne.&lt;/p&gt;
 &lt;p&gt;J’ai passé plus de temps au sein de scopyleft que dans l’ensemble des structures professionnelles par lesquelles je suis précédemment passé. Un quotidien de privilégié qui semble me convenir. En tout cas, cela m’a permis d’en prendre conscience. &lt;em&gt;Merci les scopains.&lt;/em&gt;&lt;/p&gt;
 &lt;h2&gt;Environnement&lt;/h2&gt;
 &lt;figure&gt;
-    &lt;img src=&quot;https://larlet.fr/static/david/2020/environnement.jpg&quot; alt=&quot;Environnement de travail, 2019-12-31&quot; loading=&quot;lazy&quot; width=&quot;1024px&quot; height=&quot;768px&quot; /&gt;
+    &lt;img src=&quot;https://larlet.fr/static/david/2020/environnement.jpg&quot;
+         alt=&quot;Environnement de travail, 2019-12-31&quot;
+         loading=&quot;lazy&quot; width=&quot;1024&quot; height=&quot;768&quot; /&gt;
     &lt;figcaption&gt;Mon open-space actuel.&lt;/figcaption&gt;
 &lt;/figure&gt;
 </summary>

requirements.txt

@@ -1,4 +1,5 @@
 Jinja2==2.10.3
 minicli==0.4.4
 mistune==2.0.0a2
+Pillow==7.1.2
 python-slugify==4.0.0

site.py

@@ -1,12 +1,12 @@
 #!/usr/bin/env python3
 import fnmatch
-import json
 import locale
 import os
 from dataclasses import dataclass
-from datetime import date, datetime, timedelta
+from datetime import datetime, timedelta
 from html import escape
 from pathlib import Path
+from textwrap import dedent
 from time import perf_counter
 
 import mistune
@@ -14,6 +14,7 @@ from jinja2 import Environment as Env
 from jinja2 import FileSystemLoader
 from minicli import cli, run, wrap
 from mistune.directives import DirectiveInclude
+from PIL import Image
 from slugify import slugify
 
 # Useful for dates rendering within Jinja2.
@@ -21,6 +22,7 @@ locale.setlocale(locale.LC_ALL, "fr_FR.UTF-8")
 
 HERE = Path(".")
 DAVID = HERE / "david"
+STATIC = HERE / ".." / "larlet-fr-static"
 DOMAIN = "https://larlet.fr"
 LOCAL_DOMAIN = "http://larlet.test:3579"
 # Hardcoding publication at 12 in Paris timezone.
@@ -28,7 +30,30 @@ NORMALIZED_STRFTIME = "%Y-%m-%dT12:00:00+01:00"
 TODAY = datetime.today() + timedelta(hours=6)
 
 
-class H2AnchorsHTMLRenderer(mistune.HTMLRenderer):
+class ImgsWithSizesRenderer(mistune.HTMLRenderer):
+    def paragraph(self, text):
+        # In case of a figure, we do not want the (non-standard) paragraph.
+        if text.strip().startswith("<figure>"):
+            return text
+        return f"<p>{text}</p>\n"
+
+    def image(self, src, alt="", title=None):
+        full_path = STATIC / Path(src[1:])
+        image = Image.open(full_path)
+        width, height = image.size
+        return dedent(
+            f"""\
+                <figure>
+                    <img src="{src}"
+                         alt="{alt}"
+                         loading="lazy" width="{width}" height="{height}" />
+                    <figcaption>{title}</figcaption>
+                </figure>
+            """
+        )
+
+
+class H2AnchorsRenderer(ImgsWithSizesRenderer):
     def heading(self, text, level):
         # Set an anchor to h2 headings.
         if level == 2:
@@ -46,12 +71,12 @@ class H2AnchorsHTMLRenderer(mistune.HTMLRenderer):
 
 # We want a custom renderer to create a hash/link for each H2 headings.
 markdown_with_h2_anchors = mistune.create_markdown(
-    renderer=H2AnchorsHTMLRenderer(escape=False), plugins=[DirectiveInclude()]
+    renderer=H2AnchorsRenderer(escape=False), plugins=[DirectiveInclude()]
 )
 # The second markdown is pertinent to generate articles for the feed,
 # we do not need anchors in that case.
-markdown = mistune.create_markdown(
-    renderer=mistune.HTMLRenderer(escape=False), plugins=[DirectiveInclude()]
+markdown_with_img_sizes = mistune.create_markdown(
+    renderer=ImgsWithSizesRenderer(escape=False), plugins=[DirectiveInclude()]
 )
 
 # This is the jinja2 configuration to locate templates.
@@ -113,7 +138,7 @@ class Page:
     def all(source: Path, only_published=True, with_h2_anchors=True):
         """Retrieve all pages sorted by desc."""
         page_list = []
-        md = markdown_with_h2_anchors if with_h2_anchors else markdown
+        md = markdown_with_h2_anchors if with_h2_anchors else markdown_with_img_sizes
         for file_path in each_markdown_from(source):
             result = md.read(file_path)
             # Extract (and remove) the title from the generated page.