Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 93KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Tag #recherche — David Larlet</title>
  13. <meta name="description" content="Publications relatives au tag #recherche">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <style type="text/css">
  53. details[open] summary {
  54. display: none;
  55. }
  56. </style>
  57. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  58. <header>
  59. <h1>Publications relatives au tag #recherche</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a>
  66. • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  68. </svg> Étiquettes</a>
  69. </p>
  70. </nav>
  71. <hr>
  72. <main>
  73. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  74. <h2><a href="/david/2021/12/04/" title="Lien permanent vers cet article">Colophon</a> (2021-12-04)</h2>
  75. <blockquote lang="en">
  76. <p>My goal with Colophon Cards is to create a web-based note-taking app for bookmarking and reading websites, ebooks, and documents. <mark>It needs to find a balance between ease-of-use and advanced features.</mark> It should have a user-subjective sharing model built in from the start where data is shared while the organisation is specific to each. Finally, it needs to provide straightforward tools for turning notes into documents for sharing with others.</p>
  77. <p><cite><em><a href="https://www.colophon.cards/">The Making of Colophon Cards</a></em> (<a href="/david/cache/2021/d232bb8336cade0c220c3f04d2d2c81d/">cache</a>)</cite></p>
  78. </blockquote>
  79. <p>Baldur Bjarnason parle encore davantage de <a href="https://www.baldurbjarnason.com/2021/making-colophon-cards/">la démarche et du contexte</a> (<a href="/david/cache/2021/ce35c82f8b3985d20202076871f169a8/">cache</a>) sur son blog.</p>
  80. <p>C’est fascinant à quel point c’est proche de mes <a href="/david/2021/10/07/" title="Consigner">préoccupations</a> <a href="/david/2021/10/13/" title="Prodiverse">actuelles</a> et le fait que ce soit documenté de manière ouverte m’apporte beaucoup, notamment en ce qui concerne le <a href="https://www.colophon.cards/notes/01-design-notes/">design général</a> (<a href="/david/cache/2021/258d0f17fbbfcfb94be82fb7dd585f66/">cache</a>) mais aussi les explorations <a href="https://www.colophon.cards/notes/whither-cards/">côté interactions</a> (<a href="/david/cache/2021/b3336418889958b9094059ebb5b761f2/">cache</a>).</p>
  81. <h2><a href="/david/2021/12/02/" title="Lien permanent vers cet article">Tags</a> (2021-12-02)</h2>
  82. <blockquote lang="en">
  83. <p>For some reason, when we moved our workflows into the digital realm, we began to lose respect for this way of taking notes, of simply adding new information to an ever-growing log of our thoughts. Instead, we built tools that encourage us to keep only the most current version of reality. […]</p>
  84. <p><strong>Incremental notes</strong> is my push against this trend of note-taking tools that only live in the present and deny the reality of learning and living through time. We don’t remember things by modifying our past memories – we simply accumulate more, as if adding entries to a log or a journal. <mark>We search through them by traversing time</mark>, looking for links between ideas and experiences.</p>
  85. <p><cite><em><a href="https://thesephist.com/posts/inc/">Incremental note-taking</a></em> (<a href="/david/cache/2021/089ec00265a43807246ec4334a10375a/">cache</a>)</cite></p>
  86. </blockquote>
  87. <p>Depuis une semaine, vous devriez avoir vu apparaître une nouvelle dimension d’exploration sur cet espace avec l’apparition d’étiquettes qui fait suite à de <a href="/david/2021/11/12/" title="Étiquettes">précédentes</a> <a href="/david/2021/11/02/" title="Réflexion">réflexions</a>. Une petite révolution.</p>
  88. <p>Je me suis mis à ajouter des <em>tags</em> à chacune des 300&nbsp;entrées de cette année. C’est long mais je vois un intérêt à l’avoir fait en une fois (en vrai, trois soirs)&nbsp;: le <em>corpus</em> est relativement cohérent en me limitant à en apposer un à trois par entrée. J’ai aussi pu réfléchir aux étiquettes qui n’apparaissaient qu’une seule fois, de l’avantage de travailler du contenu existant. À l’inverse, j’ai essayé d’éviter les mot-clés «&nbsp;introspection&nbsp;» ou «&nbsp;blog&nbsp;» que j’avais envie de mettre à trop d’endroits. J’ai remarqué aussi certaines associations comme «&nbsp;pandémie&nbsp;» et «&nbsp;incompétence&nbsp;» inévitables… Lorsque je lis <a href="/david/#tags">la liste des étiquettes</a>, je ne trouve pas mes écrits très réjouissants aussi.</p>
  89. <p>Le plus difficile aura été de choisir d’avoir des étiquettes annuelles, ce qui me permettra de faire évoluer les centres d’intérêts. J’étais aussi à deux doigts de faire un nuage de <em>tags</em> sur la <a href="/david/#tags">page d’accueil</a>. Heureusement que ma CSS actuelle me contraint à ne pas tomber dans la nostalgie.</p>
  90. <blockquote lang="en">
  91. <p>If we were to build a medium for better thinking on top of the web browser, it’s reckless to expect the average user to manually connect, organize, and annotate the information they come across. Just as the early World Wide Web started out manually-curated and eventually became curated by algorithms and communities, <mark>I think we’ll see a shift in how individual personal landscapes of information are curated</mark>, from manual organization to mostly machine-driven organization. Humans will leave connections and highlights as a trail of their thinking, rather than as their primary way of exploring their knowledge and memory.</p>
  92. <p><cite><em><a href="https://thesephist.com/posts/browser/">The web browser as a tool of thought</a></em> (<a href="/david/cache/2021/ed384fc76fbe9728070efb6c71a0eb9c/">cache</a>)</cite></p>
  93. </blockquote>
  94. <h2><a href="/david/2021/11/22/" title="Lien permanent vers cet article">Jour 2</a> (2021-11-22)</h2>
  95. <blockquote>
  96. <p>Le vrai journal est écrit dans la mer et dans le ciel, <mark>on ne peut pas le photographier</mark> pour le donner aux autres. Il est né peu à peu de tout ce qui nous entoure depuis des mois, les bruits de l’eau sur la carène, les bruits du vent qui glisse sur les voiles, les silences pleins de choses secrètes entre mon bateau et moi, comme lorsque j’écoutais parler la forêt quand j’étais gosse.</p>
  97. <p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
  98. </blockquote>
  99. <p>Je me suis réveillé 5&nbsp;fois dans la nuit. Ce n’était pas pour vérifier le pilote automatique du voilier mais pour remettre une bûche dans le poêle. À chaque milieu ses contraintes… et son manque de sommeil. Cela m’a permis de dormir en t-shirt, la prochaine fois je m’abstiendrai de porter un duvet pour ce refuge dont le poêle est surdimensionné… mais qu’il faut tout de même alimenter en continu pour éviter qu’il ne s’éteigne&#8239;!</p>
  100. <p>J’attends que la pleige (sorte de neige très liquide) s’arrête pour quitter le refuge. Je démarre sous le soleil <em>et</em> la grêle. #Canada</p>
  101. <figure>
  102. <a href="#ouareau-chemin-neige"
  103. title="Cliquer pour une version haute résolution">
  104. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  105. loading="lazy" width="2048" height="1536" />
  106. </a>
  107. <a href="#_" class="lightbox" id="ouareau-chemin-neige">
  108. <img src="/static/david/2021/ouareau-chemin-neige.jpg" alt="Un chemin, sous la neige."
  109. loading="lazy" width="2048" height="1536" />
  110. </a>
  111. <figcaption>Pas de meilleure motivation que le soleil pour arriver en haut d’une crête !</figcaption>
  112. </figure>
  113. <p>J’ai prévu de faire une longue crête et je me rappelle aussi qu’il me restait à explorer un lac en contrebas, de l’autre côté, où j’espère trouver un emplacement pour de nouvelles aventures. Mes efforts sont récompensés car il y a effectivement de quoi mettre une tente et/ou un hamac. Il y a même une sorte de cuvette aménagée pour pouvoir faire trempette sur le petit cours d’eau à côté. Limite du <em>glamping</em>. Je suis joie.</p>
  114. <figure>
  115. <a href="#ouareau-lac-braque"
  116. title="Cliquer pour une version haute résolution">
  117. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  118. loading="lazy" width="1536" height="2048" />
  119. </a>
  120. <a href="#_" class="lightbox" id="ouareau-lac-braque">
  121. <img src="/static/david/2021/ouareau-lac-braque.jpg" alt="Lac braque, gelé avec son barrage de castor au premier plan."
  122. loading="lazy" width="1536" height="2048" />
  123. </a>
  124. <figcaption>Pour le moment, il faut creuser si on veut pouvoir se baigner.</figcaption>
  125. </figure>
  126. <p>Je remonte sur la crête et avec le vent ça commence à crouter sévère. Le soleil se voile et la température chute, je dois absolument redescendre de l’autre côté avant que ça devienne ingérable. Je prends un raccourci. Le ruisseau aussi et j’ai rapidement les pieds trempés. Heureusement qu’il ne fait que -5°C mais ce n’est pas le moment de se faire mal. Je rejoins une piste de ski de fond qui me permet d’augmenter la cadence et de me réchauffer.</p>
  127. <figure>
  128. <a href="#ouareau-point-de-vue"
  129. title="Cliquer pour une version haute résolution">
  130. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  131. loading="lazy" width="2048" height="1536" />
  132. </a>
  133. <a href="#_" class="lightbox" id="ouareau-point-de-vue">
  134. <img src="/static/david/2021/ouareau-point-de-vue.jpg" alt="Point de vue depuis la crête."
  135. loading="lazy" width="2048" height="1536" />
  136. </a>
  137. <figcaption>J’espère dormir un jour sur cet à plat en contrebas. #YouDidNotSleepThere</figcaption>
  138. </figure>
  139. <p>J’arrive à un abri où j’envisageais initialement de passer la nuit. Je me fais une soupe miso pour me réchauffer de l’intérieur, il faudrait que je change au moins de chaussettes. Je suis rejoins par deux personnes qui vont y dormir cette nuit, ce seront mes seules rencontres ce jour. Elles ont l’air contentes d’être là, moi aussi.</p>
  140. <blockquote>
  141. <p>Assis sur la chaise du poste de pilotage intérieur, je regarde l’eau phosphorescente à travers les hublots de la coupole qui protège des déferlantes et m’en rapproche. Je suis presque arrivé au tournant de ma route. Je sais, depuis l’océan Indien, que je ne veux plus rentrer là-bas.</p>
  142. <p>[…]</p>
  143. <p>Et jusqu’au Horn, ne pas regarder autre chose que mon bateau, petite planète rouge et blanc faite d’espace, d’air pur, d’étoiles, de nuages et de liberté dans son sens le plus profond, le plus naturel. Et oublier totalement la Terre, ses villes impitoyables, ses foules sans regard et sa soif d’un rythme d’existence dénué de sens. Là-bas… si un marchant pouvait éteindre les étoiles pour que ses panneaux publicitaires se voient mieux dans la nuit, peut-être le ferait-il&#8239;! <mark>Oublier tout ça.</mark></p>
  144. <p>Ne vivre qu’avec la mer et mon bateau, pour la mer et pour mon bateau.</p>
  145. <p><cite><em>Ibid.</em></cite></p>
  146. </blockquote>
  147. <h2><a href="/david/2021/11/17/" title="Lien permanent vers cet article">Apprentissages</a> (2021-11-17)</h2>
  148. <details>
  149. <summary>Déplier pour lire le contenu de la publication</summary>
  150. <p>Ça fait pas mal de temps que je trouve inspirant ce qu’a fait Simon Willison avec <a href="https://til.simonwillison.net/">ses <abbr title="Thing’s I’ve Learned" lang="en">TIL</abbr></a>. Une façon de partager des frictions techniques quotidiennes pour documenter — et potentiellement aider d’autres personnes.</p>
  151. <p>Ce serait une bonne occasion d’essayer <a href="https://datasette.io/">datasette</a> aussi mais c’est peut-être un peu trop dynamique à mon goût. Idéalement, ce serait déposer des bouts de code sur <a href="https://sr.ht/~davidbgk/">sourcehut</a> et les <a href="https://srht.site/automating-deployments">déployer automatiquement</a> là-bas aussi, sur mon <a href="https://srht.site/custom-domains">propre sous-domaine</a>.</p>
  152. <p>Je vais laisser cette idée mâturer un peu, ça pourrait faire l’objet d’un cru 2022.</p>
  153. </details>
  154. <h2><a href="/david/2021/11/12/" title="Lien permanent vers cet article">Étiquettes</a> (2021-11-12)</h2>
  155. <details>
  156. <summary>Déplier pour lire le contenu de la publication</summary>
  157. <blockquote lang="en">
  158. <p>In hierarchical file systems, the path to a file tells us how to retrieve it, not what is inside the file. For example, “/home/john/diary.txt” tells the computer to start from the root, go into the directory named “home”, go into the subdirectory named “john”, and follow the link named “diary.txt” to access the file. It doesn’t necessarily tell us anything about what the file contains – for all we know, it could be an actual diary or a downloaded movie. To make matters worse, the meaning of the path is relative to which computer system we’re working on. The same path “/home/john/diary.txt” might exist on a distant server, but possess completely different file content.</p>
  159. <p><cite><em><a href="https://www.nayuki.io/page/designing-better-file-organization-around-tags-not-hierarchies">Designing better file organization around tags, not hierarchies</a></em> (<a href="/david/cache/2021/2fc0d9333db2b78b5a110724fba31b22/">cache</a>)</cite></p>
  160. </blockquote>
  161. <p>Un long article un peu technique sur le passage d’un stockage hiérarchique à une structure complètement plate en passant par des <em>tags</em>.</p>
  162. <p>Ceci m’intéresse à <a href="/david/2021/10/07/" title="Consigner">double</a> <a href="/david/2021/09/23/" title="Dossier">titre</a>. Ce qui m’interpelle cette fois-ci, c’est qu’une fois la hiérarchie établie par un·e précurseur·euse, les <a href="/david/2021/03/17/" title="Arrivant·es">autres</a> doivent suivre et se retrouvent avec moins de libertés. Une approche par étiquettes permet potentiellement de privilégier une structure permettant une évolution plus fluide.</p>
  163. <p>Peut-être que la façon dont on nous a appris à ranger nos affaires numériques en dit plus que ce que l’on pense. Et je ne parle même pas des URLs. Comme une envie de <a href="/david/2021/11/02/" title="Réflexion">revisiter</a> des choses par ici.</p>
  164. <hr />
  165. <blockquote>
  166. <p><em>[Lisant le titre d’un livre posé dans le salon&nbsp;: «&nbsp;Les lois naturelles de l’enfant&nbsp;»]</em><br />
  167. — <mark>Nous</mark>, on n’a pas de lois.</p>
  168. </blockquote>
  169. <p>🤗</p>
  170. </details>
  171. <h2><a href="/david/2021/11/02/" title="Lien permanent vers cet article">Réflexion</a> (2021-11-02)</h2>
  172. <details>
  173. <summary>Déplier pour lire le contenu de la publication</summary>
  174. <blockquote lang="en">
  175. <p>This website is essentially a repository of my memories, lessons I’ve learnt, insights I’ve discovered, a changelog of my previous selves. Most people build a map of things they have learnt, <mark>I am building a map of how I have come to be, in case I may get lost again.</mark> Maybe someone else interested in a similar lonely path will feel less alone with my documented footprints. Maybe that someone else would be me in the future.</p>
  176. <p><cite><em><a href="https://winnielim.org/experiments/website/this-website-as-a-learning-and-reflection-tool/">this website as a learning and reflection tool</a></em> (<a href="/david/cache/2021/532af45eef948b36907a25f63c6eb95f/">cache</a>)</cite></p>
  177. </blockquote>
  178. <p>Je pourrais citer tellement de parties de cet article que ça en est troublant. Quelqu’un, quelque part se pose aussi plein de questions et les partage. C’est chouette.</p>
  179. <p>Je retiens, entre autres, que je pourrais soigner la façon dont on peut faire des requêtes dans ces données. J’aime bien le fait que l’on puisse récupérer <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">les sources</a> (<a href="https://git.larlet.fr/davidbgk/larlet-fr-david-cache">cache&#8239;!</a>) et faire une recherche <em>full-text</em> mais c’est pas super accessible. Et quand même limité en terme de navigation(s). Si je suis mon premier explorateur, de quelle manière est-ce que j’aimerais (re)découvrir mon ancien moi&#8239;? On a rarement l’occasion d’être aussi mégalo&nbsp;:-).</p>
  180. <p>Merci <a href="https://www.hypothermia.fr/">Eli</a>.</p>
  181. </details>
  182. <h2><a href="/david/2021/10/20/" title="Lien permanent vers cet article">RSSexploration</a> (2021-10-20)</h2>
  183. <details>
  184. <summary>Déplier pour lire le contenu de la publication</summary>
  185. <p><em>Oh boy, ce titre…</em></p>
  186. <p>Suite à des échanges avec <a href="https://www.hypothermia.fr/">Eliness</a>, je me demande si l’invitation à <a href="/david/2021/10/09/" title="Slowgrégateur">découvrir d’anciens contenus via le flux</a> pourrait se faire manuellement. Après tout, cela pourrait être un choix éditorial que celui de proposer de vieux articles… qui pourraient avoir un lien plus ou moins ténu avec la publication récente.</p>
  187. <p>Sans essayer de l’automatiser ou de le rendre aléatoire, qu’est-ce qui serait im·pertinent de faire à cet endroit là&#8239;? Et si ces liens pointaient vers l’extérieur&#8239;? Et si ces liens étaient choisis par les lecteur·ices&#8239;? Et si.</p>
  188. </details>
  189. <h2><a href="/david/2021/10/07/" title="Lien permanent vers cet article">Consigner</a> (2021-10-07)</h2>
  190. <details>
  191. <summary>Déplier pour lire le contenu de la publication</summary>
  192. <blockquote lang="en">
  193. <p>When you “P2” something, you’re writing a blog post, where you can tag in coworkers and cross-post to other P2s. What do teams use P2s for? Absolutely everything. Checklists for onboarding, status reports on projects, thoughts about detailing projects, discussions about best coding practices, architectural diagrams, marketing data analyses, and more. The best part is that the entire company’s history of P2s is available to search through. Also, you can subscribe to literally any P2, and comment on it as necessary, starting with your own team’s.</p>
  194. <p>Why P2s? Because they capture fleeting one-off written communication: <mark>you can read a P2&nbsp;at your own speed, in your own timezone</mark>, which is key since we operate across all timezones.</p>
  195. <p><cite><em><a href="https://veekaybee.github.io/2021/07/17/p2s/">Writing for distributed teams</a></em> (<a href="/david/cache/2021/83fa7f0f8105aa10ffc88555f5699f1c/">cache</a>)</cite></p>
  196. </blockquote>
  197. <p>On a essayé pas mal de chose avec Scopyleft pour garder des traces de discussions, de décisions, avec toujours cette frustration personnelle que le résultat est à l’image de la personne qui prend le temps de consigner cette histoire. La difficulté d’une écriture commune est réelle et je me sen(tai)s un peu démuni face à ce dilemme d’avoir envie (besoin&#8239;?) de retenir des choses tout en n’assumant pas de devenir le scribe officiel. On se retrouve avec une base de connaissance éclatée dans laquelle il est difficile de (re)trouver une information.</p>
  198. <p>La solution mise en place par Automattic (avec un <a href="https://ma.tt/2009/05/how-p2-changed-automattic/">recul non négligeable</a> (<a href="/david/cache/2021/e14051435f3a2513d136df430ae973b3/">cache</a>)), à mi-chemin entre le blog et l’interactivité d’un réseau social est vraiment alléchante. Suffisamment pour me faire envisager de coder un truc à ce sujet. J’imagine déjà une version distribuée (re-coucou le fédiverse) qui permettrait de rendre certaines parties publiques, voire des interactions inter-structures sur des projets communs. Une forme de <a href="/david/2020/12/13/#journal">journalisation interactive</a> avec des droits d’accès relativement fins.</p>
  199. <p>Il n’y a pas eu une seule discussion utilisateur·ice et il y a déjà une montagne de fonctionnalités, ça fait une éternité que je n’avais pas parlé de <em>vaporware</em> par ici&nbsp;:-).</p>
  200. <p>Si vous vous demandez à quoi ressemble P2, il y a une <a href="https://videopress.com/v/YYNW9iSj">vidéo en action ici</a> et le seul espace que je connaisse dans la nature est <a href="http://mtlcityweblog.com/">au sujet de Montréal</a>. J’aime notamment que les nouvelles entrées soient mises en surbrillance et disparaissent au <em>scroll</em>, à l’usage c’est pertinent.</p>
  201. <blockquote lang="en">
  202. <p>Conversations on P2s take place in line, update in real time, and provide space for threaded replies. We’ve stuck with P2&nbsp;for years now, and it has ultimately evolved into a rich source of institutional wisdom and collective company memory.</p>
  203. <p>[…]</p>
  204. <p>At its core, P2&nbsp;is organized, searchable knowledge. For example, we write up notes from every meeting, and tag attendees by name. I can search for any person’s name tag and pull up all conversation history related to the individual in question. <mark>It’s an invaluable resource.</mark></p>
  205. <p><cite><em><a href="https://distributed.blog/2020/06/18/distributed-faq-p2-automattic/">Distributed FAQ: How Did P2&nbsp;Become Automattic’s Signature Mode of Communication?</a></em> (<a href="/david/cache/2021/92cd5096092b0f66b72ad6e4084c17e4/">cache</a>)</cite></p>
  206. </blockquote>
  207. </details>
  208. <h2><a href="/david/2021/10/06/" title="Lien permanent vers cet article">Promotion</a> (2021-10-06)</h2>
  209. <details>
  210. <summary>Déplier pour lire le contenu de la publication</summary>
  211. <blockquote lang="en">
  212. <p>At most companies, it’s common for the person leading you to have experienced a promotion in taking on the role. At Automattic, <mark>we view taking on the team lead role as a focus change rather than as a promotion.</mark> This means people are welcome to step up into the lead role and step down without a change in salary. We’re all ultimately individual contributors at the end of the day!</p>
  213. <p><cite><em><a href="https://nomad.blog/2020/12/08/you-might-not-love-working-at-automattic-if/">You might not love working at Automattic if…</a></em> (<a href="/david/cache/2021/e7f354687d0d6c2b2d342b7edb144013/">cache</a>)</cite></p>
  214. </blockquote>
  215. <p>Beaucoup de choses très inspirantes dans cet article. J’apprécie que l’on puisse considérer que le rôle de <em>lead</em> (difficilement traduisible) soit temporaire et ne soit pas indexé sur le salaire. C’est accepter une certaine impermanence dans nos envies, nos appétences et nos expérimentations. C’est une façon de pouvoir se tromper sans que les conséquences ne soient rapidement critiques.</p>
  216. <p>J’ai l’impression de porter différentes casquettes actuellement sur les différents produits auxquels je participe et j’adore cette diversité. Une forme de <em>full stack</em> (<a href="/david/2021/03/28/" title="Smolstack">1</a>, <a href="/2021/06/23/">2</a>) mais en mode distribué où j’apprends des autres casquettes présentes dans les équipes.</p>
  217. <p>Pour moi, une promotion correspond au courage et à la confiance suffisante en soi de consentir à une casquette relativement inconnue, au moins pour un tour.</p>
  218. <p>Littéralement&nbsp;: pro-motion, être en faveur du mouvement.</p>
  219. <blockquote lang="en">
  220. <p>For example, I was a lead for 3.5&nbsp;years and was able to easily step away to pursue other work when an opportunity came up without a change in pay. <mark>I never approached leadership as being a “forever lead”</mark> which helped me make decisions that I knew I’d have to live out if down the line I was no longer a lead.</p>
  221. <p><cite><em>Ibid.</em></cite></p>
  222. </blockquote>
  223. </details>
  224. <h2><a href="/david/2021/09/23/" title="Lien permanent vers cet article">Dossier</a> (2021-09-23)</h2>
  225. <details>
  226. <summary>Déplier pour lire le contenu de la publication</summary>
  227. <blockquote lang="en">
  228. <p>It’s a difficult concept to get across, though. Directory structure isn’t just unintuitive to students — it’s <em>so</em> intuitive to professors that they have difficulty figuring out how to explain it. “Those of us who have been around a while <em>know</em> what a file is, but I was at a bit of a loss to explain it,” lamented one educator […] Others, meanwhile, believe it’s professors who need to adjust their thinking. […] Even professors who have incorporated directory structure into their courses suspect that they may be clinging to an approach that’s soon to be obsolete. […] His advice to fellow educators: Get ready. “This is not gonna go away,” he says. “You’re not gonna go back to the way things were. <mark>You have to accept it.</mark> The sooner that you accept that things change, the better.”</p>
  229. <p><cite><em><a href="https://www.theverge.com/22684730/students-file-folder-directory-structure-education-gen-z">Kids who grew up with search engines could change STEM education forever</a></em> (<a href="/david/cache/2021/f82b9c31388b1f42ddd9d4d7849d7c86/">cache</a>)</cite></p>
  230. </blockquote>
  231. <p>Un article fascinant qui interroge sur ce qui doit être transmis et ce qui doit évoluer par l’usage quitte à adapter les outils… et les modèles mentaux des générations précédentes. Ces derniers sont probablement les moins flexibles.</p>
  232. <p>Je me suis rendu compte que je classais beaucoup moins mes courriels, je suis passé d’une arborescence assez profonde à une demi-douzaine de dossiers. Je peux me le permettre car la recherche de Mail.app est très pertinente, en contrepartie cela me lie fortement à l’outil et dès que je teste une alternative je suis frustré par ce manque.</p>
  233. <p>Tristement, j’ai construit mes propres barreaux. Chaque génération est-elle condamnée à tenter de les transformer en échelles&#8239;?</p>
  234. <figure>
  235. <a href="#nuages"
  236. title="Cliquer pour une version haute résolution">
  237. <img src="/static/david/2021/nuages.jpg" alt="Des nuages dans le ciel."
  238. loading="lazy" width="2048" height="1366" />
  239. </a>
  240. <a href="#_" class="lightbox" id="nuages">
  241. <img src="/static/david/2021/nuages.jpg" alt="Des nuages dans le ciel."
  242. loading="lazy" width="2048" height="1366" />
  243. </a>
  244. <figcaption>Rester léger.</figcaption>
  245. </figure>
  246. <hr />
  247. <p>Réponse(s) de <a href="https://eldritch.cafe/@davidbruant/107020047121002118">David</a>&nbsp;:</p>
  248. <blockquote>
  249. <p>Ma croyance, c’est que les dossiers sur ordi sont un héritage de la manière dont les systèmes d’exploitation sont organisés (par fichier et dossier)<br />
  250. Et les premières interfaces utilisateurs ont reflété naïvement l’API du système d’exploitation</p>
  251. <p>Et c’était mieux que rien</p>
  252. <p>Et clairement, une fois que l’on peut chercher via une requête textuelle qui a une compréhension correcte des dates et du langage, la notion de dossier perd complètement son intérêt</p>
  253. <p>Déjà, le déplacement de «&nbsp;dossier&nbsp;» vers «&nbsp;label&nbsp;» que GMail a proposé a été un premier pas en avant libérateur pour les emails</p>
  254. <p>Le dossier, c’est une des solutions possibles au problème «&nbsp;j’ai besoin de retrouver une information&nbsp;»<br />
  255. Et il y en a beaucoup d’autres</p>
  256. <p>J’imagine que le dossier émerge dans les systèmes d’exploitation, parce qu’il faut trouver <em>une</em> solution au problème de retrouver ses infos et le rangement manuel dans des dossiers, c’est 1) assez familier comme modèle mental et 2) facile à implémenter (enfin j’imagine parce que je n’ai jamais implémenter un système de fichier… en tout cas, c’est beaucoup plus facile à implémenter qu’un système qui comprend le langage)</p>
  257. <p>Une des difficulté à implémenter autre chose que des dossiers (ou des labels), c’est que ça amène rapidement des problèmes de performance ou de pertinence</p>
  258. <p>Les dossiers, il n’y a pas de problème de performance (…et pour la pertinence, on délègue entièrement la responsabilité à l’utilisateur de créer/maintenir une arborescence qui lui est pertinente)</p>
  259. <p>Implémenter un système de recherche pertinent, ça demande une compréhension correcte du langage du contenu<br />
  260. …mais quel langage&#8239;?<br />
  261. parce qu’une recherche s’implémente différemment selon le langage<br />
  262. Et si on travaille dans plusieurs langues&#8239;?</p>
  263. <p>Et l’usage de la recherche devient une partie importante de l’expérience utilisateur</p>
  264. </blockquote>
  265. <p>Je tombe également sur&nbsp;: <a href="https://techcrunch.com/2021/09/29/google-introduces-a-new-way-to-search-that-combines-images-and-text-into-one-query/">Google introduces a new way to search that combines images and text into one query</a> (<a href="/david/cache/2021/b65dcd34bb1ea8d8b610aaf06a0b5902/">cache</a>).</p>
  266. </details>
  267. <h2><a href="/david/2021/08/19/" title="Lien permanent vers cet article">Définition</a> (2021-08-19)</h2>
  268. <details>
  269. <summary>Déplier pour lire le contenu de la publication</summary>
  270. <blockquote>
  271. <p>On pourrait distinguer des développeur·ses, designer‧ses, agilistes et coach dont c’est l’<em>activité</em> ou la <em>profession</em>, si leur travail nourrit directement une structure capitalistique et qui renforce le maillage néolibéral.</p>
  272. <p><cite><em><a href="https://oncletom.io/2021/08/16/victoire-professionnels/">La victoire des professionnels</a></em> (<a href="/david/cache/2021/1e65aa7484aa157870c2a1b735f36a26/">cache</a>)</cite></p>
  273. </blockquote>
  274. <p>Suivi de&nbsp;:</p>
  275. <blockquote>
  276. <p>(j’ouvre une parenthèse ici pour préciser que quand je dis que je «&nbsp;suis développeur web&nbsp;», j’ai l’impression que ça cache la valeur que j’apporte quand je réfléchis à ces questions de «&nbsp;résilience sociale&nbsp;» autour du logiciel que je créé)</p>
  277. <p><cite><em>David <a href="https://eldritch.cafe/@davidbruant/106777018282632259">sur Mastodon</a></em></cite></p>
  278. </blockquote>
  279. <p>Réflexions croisées qui viennent alimenter mes <a href="/david/2021/05/27/" title="Craftsman">propres explorations</a> plus ou <a href="/david/blog/2015/travail-transition/">moins</a> <a href="/david/blog/2015/pairmutation-travail/">récentes</a> sur le sujet. Ce besoin de définition est même assez <a href="/david/blog/2016/passion-definition/">récurrent</a> ici, le blog étant probablement une forme de définition en soi mais je m’égare et ça devient trop <em>meta</em>.</p>
  280. <p>«&nbsp;Pour qui, <a href="/david/stream/2018/04/04/">pour quoi</a> travaillons-nous&#8239;?&nbsp;» pour reprendre le titre de <a href="/david/2021/01/27/" title="Choix">Jacques Ellul</a>, avec quels espoirs plus ou moins communs engageons-nous notre attention, aspirons-nous à dédier notre fameuse «&nbsp;force de travail&nbsp;»&#8239;? J’ai l’impression d’avoir de moins en moins de réponses à tout cela, une définition peut rester floue, une identité aussi finalement, lorsqu’on est suffisamment en confiance. Peut-être qu’en dépassant cette dénomination, on s’élève, on se libère d’un poids à la fois social et culturel. <strong>«&nbsp;Je fais des trucs en équipe que j’espère utiles et qui parfois se retrouvent sur le Web&nbsp;»</strong>, c’est sûr que ça n’est pas très vendeur pour <a href="/david/2021/03/23/" title="Recrutement">obtenir un emploi</a> mais c’est peut-être ce qui se rapproche le plus de mon <em>activité</em>. En tout cas, ça se retrouve pas mal dans ce qui <a href="http://scopyleft.fr/">nous anime</a> depuis bientôt 9&nbsp;ans.</p>
  281. <p>Au niveau du «&nbsp;pour qui&nbsp;», il y a toujours cette tension à travailler pour un gouvernement, ce péché d’orgueil d’espérer faire moins pire que ce que ça pourrait être. J’imagine que l’Histoire est remplie de personnes bien intentionnées qui — avec ce même raisonnement — en sont arrivées à commettre les pires atrocités. Se pose peut-être davantage la question du «&nbsp;jusqu’à quand&nbsp;» dans ce cas là, savoir s’arrêter avant que la <em>collaboration</em> ne change de sens…</p>
  282. <blockquote>
  283. <p>Les gens veulent toujours quelque chose de plus qu’une joie immédiate ou que ce sentiment plus profond qu’on appelle le bonheur. C’est là un des secrets qui nous aident à façonner l’accomplissement de nos visées. Ce «&nbsp;petit quelque chose&nbsp;» exerce un pouvoir décuplé sur <mark>ceux qui ne savent lui attribuer un nom</mark> ou (comme c’est le plus souvent le cas) ne soupçonnent même pas son existence. La plupart des gens ne réagissent qu’inconsciemment à de telles forces cachées. De sorte que nous n’avons plus qu’à concevoir un «&nbsp;petit quelque chose&nbsp;» bien étudié et à lui donner une forme et une définition acceptables pour qu’on nous suive comme un seul homme.</p>
  284. <p><cite><em>Les secrets du pouvoir au Bene Gesserit</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
  285. </blockquote>
  286. <figure>
  287. <a href="#riviere-megantic"
  288. title="Cliquer pour une version haute résolution">
  289. <img src="/static/david/2021/riviere-megantic.jpg" alt="Une rivière en pause longue au Mont Mégantic."
  290. loading="lazy" width="2048" height="1536" />
  291. </a>
  292. <a href="#_" class="lightbox" id="riviere-megantic">
  293. <img src="/static/david/2021/riviere-megantic.jpg" alt="Une rivière en pause longue au Mont Mégantic."
  294. loading="lazy" width="2048" height="1536" />
  295. </a>
  296. <figcaption>Un flux d’idées, momentanément figé.</figcaption>
  297. </figure>
  298. </details>
  299. <h2><a href="/david/2021/07/26/" title="Lien permanent vers cet article">Dose 2</a> (2021-07-26)</h2>
  300. <details>
  301. <summary>Déplier pour lire le contenu de la publication</summary>
  302. <p><a href="/david/2021/05/24/" title="Dose 1">Suite</a> des aventures, deux mois plus tard.</p>
  303. <p>J’ai été vacciné <a href="https://twitter.com/vacccprogress">au moment où</a> (<a href="https://github.com/favstats/vacccprogress">code</a>)&nbsp;:</p>
  304. <ul>
  305. <li>1,6&#8239;% de l’Afrique&#8239;; 10,2&#8239;% de l’Asie&#8239;; 37,2&#8239;% de l’Europe&#8239;; 36,9&#8239;% de l’Amérique du Nord&#8239;; 9,9&#8239;% de l’Océanie&#8239;; 17,8&#8239;% de l’Amérique du Sud avaient <a href="https://twitter.com/vacccprogress/status/1419614855980634113">reçues une seconde dose</a>.</li>
  306. <li>2&#8239;122&nbsp;millions de personnes ont <a href="https://twitter.com/vacccprogress/status/1419614877690302467">déjà reçues une dose</a> dans le monde (soit 27,2&#8239;%) et 1&#8239;074&nbsp;millions une seconde dose (soit 13,8&#8239;%).</li>
  307. <li>Le Canada a dépassé la France en pourcentage de population vaccinée 2&nbsp;doses <a href="https://ourworldindata.org/grapher/share-people-fully-vaccinated-covid?country=CAN~FRA">le 1<sup>er</sup> juillet</a>, pour la première dose c’était le cas <a href="https://ourworldindata.org/grapher/share-people-vaccinated-covid?country=CAN~FRA">depuis le 29&nbsp;mars</a>.</li>
  308. <li>40,6&#8239;% des pays à haut revenus&#8239;; 14,9&#8239;% des pays à presque hauts revenus&#8239;; 5,3&#8239;% des pays à presque faibles revenus&#8239;; 0,2&#8239;% des pays à faibles revenus ont <a href="https://twitter.com/vacccprogress/status/1419614964118077441">reçu une seconde dose</a>&#8239;;</li>
  309. <li>48&#8239;% des <a href="https://cdn-contenu.quebec.ca/cdn-contenu/sante/documents/Problemes_de_sante/covid-19/20-210-382W_infographie_sommaire-executif.jpg">québécois·es de ma tranche d’âge</a> (infographie dynamique mise à jour quotidiennement), 61&#8239;% des québécois·es tout court ont reçu cette seconde dose (83&#8239;% des plus de 12&nbsp;ans vaccinables ont au moins reçu une dose).</li>
  310. </ul>
  311. <figure>
  312. <a href="#tableau_de_bord_2021-07-26"
  313. title="Cliquer pour une version haute résolution">
  314. <img src="/static/david/2021/tableau_de_bord_2021-07-26.png" alt="Tableau de bord des chiffres sur l’évolution de la Covid-19 et de sa vaccination au Québec"
  315. loading="lazy" width="1280" height="1106" />
  316. </a>
  317. <a href="#_" class="lightbox" id="tableau_de_bord_2021-07-26">
  318. <img src="/static/david/2021/tableau_de_bord_2021-07-26.png" alt="Tableau de bord des chiffres sur l’évolution de la Covid-19 et de sa vaccination au Québec"
  319. loading="lazy" width="1280" height="1106" />
  320. </a>
  321. <figcaption>Tableau toujours aussi intéressant pour comprendre la stratégie québécoise.</figcaption>
  322. </figure>
  323. <p>Au passage, en voulant récupérer ma <a href="https://covid19.quebec.ca/PreuveVaccinale/">preuve vaccinale</a>&nbsp;:</p>
  324. <blockquote>
  325. <p>Dû à un fort achalandage, le site d’émission de la preuve vaccinale et d’inscription au concours est temporairement non disponible.</p>
  326. </blockquote>
  327. <p>Sachant que c’est la mise en place d’une loterie qui a fait tomber le site, ça me fait glousser&nbsp;:</p>
  328. <blockquote>
  329. <p>Le lancement du concours «&nbsp;Gagner à être vacciné&nbsp;» a connu des ratés, dimanche [on est mardi]. Il fallait faire preuve de patience avant de réussir à s’y inscrire sur le site de quebec.ca.</p>
  330. <p>[…]</p>
  331. <p>Pour être admissible à un lot de 150&#8239;000 $ ou à une bourse d’études de 10&#8239;000 $, il faut avoir obtenu au moins sa première dose et s’inscrire par Internet en passant par le site quebec.ca/vaccincovid et sa section du concours Gagner à être vacciné.</p>
  332. <p><cite><em><a href="https://www.ledevoir.com/societe/620427/debut-de-l-inscription-a-la-loterie-vaccin-covid">Lancement laborieux pour la loterie vaccinale</a></em> (<a href="/david/cache/2021/b22e4e9595ac77a1d763789a3d23106a/">cache</a>)</cite></p>
  333. </blockquote>
  334. <p>C’est quand même pas de bol que la mesure incitative pour se faire vacciner fasse tomber le site qui permet de prendre rendez-vous pour se faire vacciner.</p>
  335. <hr />
  336. <p>Au niveau des effets secondaires sur les 48&nbsp;heures suivantes, un peu de fièvre/fatigue le lendemain qui m’a obligé à faire une sieste de 3&nbsp;heures et ensuite pas la grande forme les 24&nbsp;heures suivantes. Je me rassure en me disant que les corps jeunes sont davantage soumis aux effets secondaires 😇.</p>
  337. </details>
  338. <h2><a href="/david/2021/07/16/" title="Lien permanent vers cet article">Char</a> (2021-07-16)</h2>
  339. <details>
  340. <summary>Déplier pour lire le contenu de la publication</summary>
  341. <p><a href="https://www.antoine-augusti.fr/">Antoine</a> me demande un peu de contexte sur <a href="http://tmp.larlet.fr/ccmc/">Combien coûte mon char&#8239;?</a> et c’est l’occasion de revenir sur cette notion de <a href="/david/2021/02/15/" title="Comptabilité">comptabilité</a> et aussi pourquoi j’ai finalement fait ce choix.</p>
  342. <p>Avoir un véhicule motorisé n’est pas un plaisir, c’est même plutôt <a href="/david/2021/07/09/" title="Balle">un danger</a>. On a pu s’en passer avec le sourire pendant 4&nbsp;ans à Montréal mais on s’est un peu trouvés démunis lorsqu’il fallut accompagner l’enfant à l’école l’hiver alors que la prise des transports en commun devenait problématique #pandémie.</p>
  343. <h2 id="pourquoi-pas-le-velo">Pourquoi pas le vélo&#8239;? <a href="#pourquoi-pas-le-velo" title="Ancre vers cette partie">#</a></h2><p>Il y a 3&nbsp;mois pendant lesquels c’est critique en raison du froid et de ses conséquences (engelures, glissades, visibilité, etc) mais c’est surtout pour protéger le matériel que je ne retiens pas cette option. Le sel/sable déversé sur les routes et les voitures qui le projettent détérioreraient le matériel trop rapidement et j’en ai bien besoin les 9&nbsp;autres mois&#8239;! Peut-être qu’au moment où il y aura une piste cyclable sécurisée depuis le pallier jusqu’à l’école cela changera. <a href="https://montreal.ca/articles/implantation-de-voies-cyclables-dans-ahuntsic-cartierville-5150">Ça s’en vient</a> (<a href="/david/cache/2021/1bbae4b7e1e642fda7cbc70540b51710/">cache</a>) et je m’en réjouis.</p>
  344. <p>En imaginant devoir en changer tous les 2/3&nbsp;ans pour l’usure prématurée, j’ai beaucoup hésité avec un <em>fatbike</em> (à assistance électrique) mais l’enfant restait trop bas en arrière. Il faut voir les vagues de <em>sloche</em> qu’une voiture peut produire par ici.</p>
  345. <h2 id="pourquoi-une-grosse-et-vieille-voiture-thermique">Pourquoi une grosse et vieille voiture thermique&#8239;? <a href="#pourquoi-une-grosse-et-vieille-voiture-thermique" title="Ancre vers cette partie">#</a></h2><p>Je voulais le <a href="/david/2020/02/07/#cars">moins d’électronique</a> possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la ville. Il y a aussi le fait que les routes québécoises étant ce qu’elles sont, non seulement ça secoue pas mal mais ça devient rapidement dangereux si t’es obligé de slalomer entre les nids de foule #ironème. Enfin, il y a un côté militant à ne pas acheter un véhicule neuf. Il y a suffisamment de voitures sur cette planète, n’en déplaise aux <em>boomers</em> du quartier qui s’achètent la dernière Tesla pour avoir bonne conscience tout en revendant leur SUV à celleux qui n’en ont pas les moyens (et qui seront ensuite davantage taxés sinon c’est moins drôle).</p>
  346. <p>Autre point <em>positif</em>&nbsp;: elle chauffe et consomme beaucoup. Ce qui signifie que je rechigne à faire des longs trajets avec et que cela devient physiquement perceptible que je fais partie du problème si je la prends l’été. J’essaye également d’avoir la conduite la plus économe possible avec ce véhicule, d’autant que le prix de l’essence a augmenté de 40&#8239;% depuis son achat…</p>
  347. <h2 id="bilan-apres-9-mois">Bilan après 9&nbsp;mois&#8239;? <a href="#bilan-apres-9-mois" title="Ancre vers cette partie">#</a></h2><p>Je m’attendais à ce que ça nous coûte cher et je n’ai pas été déçu. Notamment car il y avait beaucoup de pièces rouillées (merci le sel) que je n’avais pas prises en considération comme étant des dépenses imminentes. J’aurais au moins appris un peu de mécanique… mais c’est clairement la catégorie des réparations qui plombe le budget.</p>
  348. <p>Cette comptabilité me permet aussi de comparer le coût avec celui potentiel d’une voiture louée pour quelques mois d’hiver. Ça pourrait devenir une option à moyen terme.</p>
  349. <p>Un point positif comparé à la location ponctuelle, c’est que ce soit moins la course pour aller chercher/ramener le véhicule, ce qui ajoutait un autre style de stress et de fatigue aux sorties. Je peux aussi partir plus tôt dans la journée, m’adapter à mon propre rythme.</p>
  350. <p><em>Note&nbsp;: si vous devez faire votre propre outil, je vous recommande d’attribuer une date à chacun des évènements, c’est la base mais je ne l’ai pas fait sur certaines écritures et je l’ai regretté par la suite. C’est notamment limitant pour des représentations graphiques pertinentes.</em></p>
  351. <blockquote>
  352. <p>La survie de l’individu, de l’espèce et de l’environnement, voilà ce qui motive l’être humain. <mark>On observera que l’ordre d’importance varie au cours de la vie.</mark> Qu’est-ce qui réclame le plus d’attention à un âge donné&#8239;? Le temps qu’il fait&#8239;? L’état de la digestion&#8239;? Éprouve-t-il (ou elle) réellement quelque chose pour moi&#8239;? Tous ces appétits variés que la chair est capable de ressentir et peut raisonnablement espérer satisfaire. Quelles autres choses pourraient avoir de l’importance&#8239;?</p>
  353. <p><cite><em>À Hwi Noree, La Voix de Leto II, Dar-es-Balat</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
  354. </blockquote>
  355. </details>
  356. <h2><a href="/david/2021/06/25/" title="Lien permanent vers cet article">Données</a> (2021-06-25)</h2>
  357. <details>
  358. <summary>Déplier pour lire le contenu de la publication</summary>
  359. <blockquote lang="en">
  360. <p>Perhaps then we’d understand how we can handle this data in a more responsible way. A metaphor that puts our personal experience at the forefront will help us find out where to draw lines in how our lives are stored and processed, and to understand that the lines will need to be different for different people. I don’t know what the right metaphor is - memory and history are the concepts I’ve been mulling over, but they have already been used in computing in ways that blur and dull them.</p>
  361. <p><mark>Maybe we should be very explicit, and refer to data as our lives.</mark> Imagine if a service had to ask you permission to ‘track your life’ or ‘share information about your life with other providers’. Already that feels grittier, more visceral, than just ‘data’.</p>
  362. <p><cite><em><a href="https://howtomeasureghosts.substack.com/p/data-isnt-oil-so-what-is-it">Data isn’t oil, so what is it?</a></em> (<a href="/david/cache/2021/68f3b87ebf1ae01bccc75fc648ac9201/">cache</a>)</cite></p>
  363. </blockquote>
  364. <p>Les données de nos vies, ou les évènements qui composent nos vies. L’historique de vos interactions avec autrui. Si tant est que nous soyons plus que la somme de ces micro-expériences.</p>
  365. <p>J’imagine alors à quoi pourrait correspondre le bouton de suppression de compte&nbsp;:</p>
  366. <p><q>Supprimer votre vie.</q></p>
  367. </details>
  368. <h2><a href="/david/2021/06/03/" title="Lien permanent vers cet article">Flux lisibles</a> (2021-06-03)</h2>
  369. <details>
  370. <summary>Déplier pour lire le contenu de la publication</summary>
  371. <blockquote lang="en">
  372. <p>Use web feeds to <strong>subscribe</strong> to websites and get the <strong>latest content in one place</strong>.</p>
  373. <p><strong>Feeds put you in control.</strong> It’s like subscribing to a podcast, or following a company on Facebook. You don’t need to pay or hand over your email address. You get the latest content without having to visit lots of sites, and without cluttering up your inbox. Had enough? Easy: unsubscribe from the feed.</p>
  374. <p>You just need a special app called a <strong>newsreader</strong>.</p>
  375. <p><cite><em><a href="https://aboutfeeds.com/">What is a feed? (a.k.a. RSS)</a></em> (<a href="/david/cache/2021/0086cb1d562c02cd96f9f2a38e5bcc42/">cache</a>)</cite></p>
  376. </blockquote>
  377. <p>Cela faisait un moment que je voulais expérimenter des choses à ce sujet. Et puis j’avais vu passer le rendu des flux de <a href="https://adactio.com/journal/rss">Jeremy Keith</a> ou <a href="https://interconnected.org/home/feed">Matt Webb</a> que je trouvais inspirants mais j’avais l’impression que c’était compliqué à mettre en place. Alors que le travail avait en fait été <a href="https://lepture.com/en/2019/rss-style-with-xsl">pas mal pré-mâché&#8239;!</a> (<a href="/david/cache/2021/40d98edeb7835abd7f9d4c1917e3ea5c/">cache</a>) Le rendu par défaut dans Firefox ressemblait à ça&nbsp;:</p>
  378. <figure>
  379. <a href="#rendu_flux_defaut"
  380. title="Cliquer pour une version haute résolution">
  381. <img src="/static/david/2021/rendu_flux_defaut.png" alt="Rendu par défaut d’un flux RSS dans Firefox"
  382. loading="lazy" width="1676" height="1444" />
  383. </a>
  384. <a href="#_" class="lightbox" id="rendu_flux_defaut">
  385. <img src="/static/david/2021/rendu_flux_defaut.png" alt="Rendu par défaut d’un flux RSS dans Firefox"
  386. loading="lazy" width="1676" height="1444" />
  387. </a>
  388. <figcaption>Non seulement c’est pas joli mais surtout c’est incompréhensible aux non-technicien·nes !</figcaption>
  389. </figure>
  390. <p>La feuille <abbr title="Extensible Stylesheet Language">XSL</abbr> de base est commentée et <a href="https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl">disponible ici</a>. L’exercice le plus difficile est d’adapter les valeurs pour que ça corresponde à votre flux, j’ai aussi enlevé la CSS par défaut pour mettre la mienne en ayant l’intuition que ça permettrait de maintenir une certaine cohérence avec la page d’où la personne vient. J’ai aussi fait en sorte d’utiliser la <a href="/david/2021/05/26/" title="Follow">notion de suivi</a> d’un flux/individu.</p>
  391. <p>Mon code <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/src/branch/master/david/log/feed.xsl">ressemble à ça</a> et permet d’obtenir le <a href="/david/log/">rendu suivant</a>&nbsp;:</p>
  392. <figure>
  393. <a href="#rendu_flux_style"
  394. title="Cliquer pour une version haute résolution">
  395. <img src="/static/david/2021/rendu_flux_style.png" alt="Rendu après transformation de mon flux RSS dans Firefox"
  396. loading="lazy" width="1668" height="1642" />
  397. </a>
  398. <a href="#_" class="lightbox" id="rendu_flux_style">
  399. <img src="/static/david/2021/rendu_flux_style.png" alt="Rendu après transformation de mon flux RSS dans Firefox"
  400. loading="lazy" width="1668" height="1642" />
  401. </a>
  402. <figcaption>Et voilà ! C’est quand même bien plus stylé 😎</figcaption>
  403. </figure>
  404. <p>J’ai une petite frustration que Firefox ne supporte pas la propriété <code>disable-output-escaping=&quot;yes&quot;</code> ce qui ne me permet pas d’avoir un rendu HTML satisfaisant lorsqu’on déplie les entrées (le plus frustrant étant que c’est implémenté chez Webkit…). J’imagine que je pourrais changer le format de mon flux pour ne pas avoir à faire cette conversion, par exemple avec du <code>CDATA</code>, à creuser.</p>
  405. <p>Il s’agit bien évidemment d’une première version et je vous encourage à me faire part de vos incompréhensions ou propositions d’amélioration pour le texte d’introduction. Je suis déjà bien content d’avoir pu mettre ça en place, c’est une frustration que je me traîne depuis… plus de 15&nbsp;ans&#8239;!</p>
  406. </details>
  407. <h2><a href="/david/2021/05/06/" title="Lien permanent vers cet article">Jour 1</a> (2021-05-06)</h2>
  408. <details>
  409. <summary>Déplier pour lire le contenu de la publication</summary>
  410. <blockquote>
  411. <p>Malgré la rigueur de ma vie ici, le verre d’eau sur la table me paraît encore a moitié plein… même s’il est plein de glace.</p>
  412. <p><cite><em>Encabanée</em>, Gabrielle Filteau-Chiba</cite></p>
  413. </blockquote>
  414. <p>Alors que je marche de nouveau dans la forêt, j’imagine une autre forme de partage. Plus proche de ce que pourrait proposer <a href="https://gather.town/">gather.town</a> mais en mode nature. Avec une notion de distance/temps(/météo?!) et la possibilité de consulter des images et des sons pendant un parcours libre sur une carte numérique reflétant une topographie bien physique. Je pourrais même me balader moi aussi sur cet espace à un moment donné pour échanger sur certains des artefacts partagés ou commenter une vidéo en direct.</p>
  415. <p>Cette idée fait son petit bout de chemin pendant que je trace le mien. Enfin, tracer est un bien grand mot, je me rends compte que je suis beaucoup plus en mode <em>camping</em> depuis que je fais des vidéos en utilisant des sentiers et emplacement aménagés. Le sac est plus lourd et le matériel plus fragile, je cède aisément à la facilité dans ces conditions.</p>
  416. <p>Je finis par m’arrêter au bord de l’un des multiples lacs qui ponctuent mon parcours ce jour-là. Ils annoncent des températures négatives dans la nuit, aussi j’essaye de me mettre un minimum à l’abri des arbres. Chaque mètre qui me sépare du lac m’éloigne également de la cacophonie nocturne qui s’en vient…</p>
  417. <p>En dépit de ma <a href="/david/2021/05/04/" title="Touriste">non-intention</a>, je ne résiste pas à l’envie de vous montrer quelques photos. En guise d’immersion du pauvre (on dit <abbr title="Produit Manuellement Vérifiable">MVP</abbr>), je vous propose d’activer la bande son suivante lors de la consultation (le volume est <em>crescendo</em> mais je ne l’ai pas retouché en post-production)&nbsp;:</p>
  418. <audio controls>
  419. <source src="/static/david/2021/sons-lac-cote-1.mp3" type="audio/mpeg">
  420. Votre navigateur ne semble pas supporter la balise HTML audio. Vous pouvez toujours la <a href="/static/david/2021/sons-lac-cote-1.mp3">télécharger ici</a> pour une écoute dans l’une de vos applications.
  421. </audio>
  422. <hr />
  423. <figure>
  424. <a href="#barrage"
  425. title="Cliquer pour une version haute résolution">
  426. <img src="/static/david/2021/barrage.jpg" alt="Un lac créé par un barrage de castor"
  427. loading="lazy" width="1600" height="1200" />
  428. </a>
  429. <a href="#_" class="lightbox" id="barrage">
  430. <img src="/static/david/2021/barrage.jpg" alt="Un lac créé par un barrage de castor"
  431. loading="lazy" width="1600" height="1200" />
  432. </a>
  433. <figcaption>J’aime lorsqu’on voit l’endroit exact où l’eau se déverse par-dessus le barrage des castors.</figcaption>
  434. </figure>
  435. <figure>
  436. <a href="#ruisseau"
  437. title="Cliquer pour une version haute résolution">
  438. <img src="/static/david/2021/ruisseau.jpg" alt="Un ruisseau au milieu de la forêt canadienne"
  439. loading="lazy" width="1600" height="1200" />
  440. </a>
  441. <a href="#_" class="lightbox" id="ruisseau">
  442. <img src="/static/david/2021/ruisseau.jpg" alt="Un ruisseau au milieu de la forêt canadienne"
  443. loading="lazy" width="1600" height="1200" />
  444. </a>
  445. <figcaption>La neige a fondue mais les lacs continuent de se déverser les uns dans les autres.</figcaption>
  446. </figure>
  447. <figure>
  448. <a href="#lichens"
  449. title="Cliquer pour une version haute résolution">
  450. <img src="/static/david/2021/lichens.jpg" alt="Des lichens sur un rocher"
  451. loading="lazy" width="1600" height="1200" />
  452. </a>
  453. <a href="#_" class="lightbox" id="lichens">
  454. <img src="/static/david/2021/lichens.jpg" alt="Des lichens sur un rocher"
  455. loading="lazy" width="1600" height="1200" />
  456. </a>
  457. <figcaption>Au printemps, c’est toute une diversité de petites pousses qui croissent sur les rochers.</figcaption>
  458. </figure>
  459. <figure>
  460. <a href="#grenouille"
  461. title="Cliquer pour une version haute résolution">
  462. <img src="/static/david/2021/grenouille.jpg" alt="Une petite grenouille sur un tronc"
  463. loading="lazy" width="1600" height="1200" />
  464. </a>
  465. <a href="#_" class="lightbox" id="grenouille">
  466. <img src="/static/david/2021/grenouille.jpg" alt="Une petite grenouille sur un tronc"
  467. loading="lazy" width="1600" height="1200" />
  468. </a>
  469. <figcaption>En parlant de trucs qui croassent, celle-ci et ses copines (!) se sont faites plaisir cette nuit-là…</figcaption>
  470. </figure>
  471. <figure>
  472. <a href="#reflet-coucher"
  473. title="Cliquer pour une version haute résolution">
  474. <img src="/static/david/2021/reflet-coucher.jpg" alt="Reflets dans le lac au coucher du soleil"
  475. loading="lazy" width="1600" height="1200" />
  476. </a>
  477. <a href="#_" class="lightbox" id="reflet-coucher">
  478. <img src="/static/david/2021/reflet-coucher.jpg" alt="Reflets dans le lac au coucher du soleil"
  479. loading="lazy" width="1600" height="1200" />
  480. </a>
  481. <figcaption>Ça semble être apaisant et calme mais le chant des divers insectes/batraciens/oiseaux alentours est à la limite du supportable (fin de la bande son).</figcaption>
  482. </figure>
  483. <hr />
  484. <p><mark>Note avant publication&nbsp;:</mark> je découvre qu’il existe une <a href="https://www12.statcan.gc.ca/census-recensement/2021/ref/soundtrack-bandesonore/index-fra.htm">Bande sonore du Recensement de 2021</a>, je me sens tellement dans la <em>hype</em> avec mes idées. Bientôt j’ajoute <em>grosshacker</em> sur mon CV. #PunIntended</p>
  485. </details>
  486. <h2><a href="/david/2021/03/07/" title="Lien permanent vers cet article">@World</a> (2021-03-07)</h2>
  487. <details>
  488. <summary>Déplier pour lire le contenu de la publication</summary>
  489. <blockquote lang="en">
  490. <p>When I write a certain kind of email — aka a blog post — why do I have to address it to someone? Why can’t I just address my thoughts to the world? Direct to the web for anyone and everyone? Rather than define the recipients, I just write and let the recipients find me.</p>
  491. <p>[…]</p>
  492. <p>This post you’re reading right now is the world’s first HEY World post. And I published it by <mark>simply emailing this text directly to world@hey.com</mark> from my jason@hey.com account. That was it.</p>
  493. <p><cite><em><a href="https://world.hey.com/jason/hey-world-b02a6f2e">&quot;Hey, World!&quot;</a></em> (<a href="/david/cache/2021/aeed011f624ca8954d97f5bc4b53a6e8/">cache</a>)</cite></p>
  494. </blockquote>
  495. <p>Plus que la publication via un courriel, ce qui m’intéresse(rait) dans cette approche c’est le fait de pouvoir faire une réponse à ce courriel en mettant le monde en copie. J’ai souvent des échanges privés qui pourraient être partagés et peut-être que si la barrière était un peu moins haute ça m’inciterait à la sauter.</p>
  496. <p>Cela se rapproche d’une archive de liste de discussion qui sert de commentaires, ce que j’avais expérimenté il y a quelques années mais l’intégration était fastidieuse. Peut-être qu’en créant une boite <abbr title="Internet Message Access Protocol">IMAP</abbr> dédiée cela pourrait aller plus loin qu’un générateur de blogs. Genre, des commentaires décentralisés. #RunningGag</p>
  497. <p>J’ai besoin de laisser mûrir cette idée.</p>
  498. </details>
  499. <h2><a href="/david/2021/03/04/" title="Lien permanent vers cet article">HTML-over-WebSockets</a> (2021-03-04)</h2>
  500. <details>
  501. <summary>Déplier pour lire le contenu de la publication</summary>
  502. <blockquote lang="en">
  503. <p>But this wasn’t terribly easy for many developers to grok at first. I sure didn’t. And the benefits weren’t exactly clear either. After years (decades, even) of wrapping our heads around the HTTP request cycle, to which all server-handled features must conform, <mark>adopting this WebSocket tech layer required a lot of head scratching</mark>. As with many clever new technologies or protocols, we needed a higher-level abstraction that provided something really effective for getting a new feature in front of a user, fast.</p>
  504. <p><cite><em><a href="https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/">The Future of Web Software Is HTML-over-WebSockets</a></em> (<a href="/david/cache/2021/a722bf15647dfe923d3c28b2e229098c/">cache</a>)</cite></p>
  505. </blockquote>
  506. <p>En ce moment, ça me gratte justement bien la tête. Je me retrouve <a href="https://benhoyt.com/writings/the-small-web-is-beautiful/">davantage dans cette approche</a> (<a href="/david/cache/2021/862d065d924906f327f8a95e23659295/">cache</a>) et j’ai presque du plaisir à utiliser <a href="https://stimulus.hotwire.dev/">Stimulus</a>, ça semble être le niveau de structuration et de non-abstraction dont j’ai besoin. J’ai aussi essayé <a href="https://turbo.hotwire.dev/">Turbo</a> (Frames) mais je n’ai pas été assez loin pour voir les avantages décrits dans l’article (et c’est trop jeune pour mon niveau de confiance)&nbsp;: j’ai fini par recoder juste ce qu’il me fallait avec Stimulus.</p>
  507. <p>J’apprécie le fait que ces ré-explorations donnent lieux à de nouvelles initiatives comme <a href="https://www.django-unicorn.com/">Django-Unicorn</a> ou <a href="https://sockpuppet.argpar.se/">Sockpuppet</a> pour ne citer que les déclinaisons dans l’écosystème Django. J’ai l’impression que c’est le compromis acceptable pour le vieux développeur que je suis&nbsp;: de la réactivité au niveau de l’interface pour les utilisateur·ices, de la logique et de la stabilité côté développement pour ma sénilité d’esprit.</p>
  508. <p>Attention si vous partez sur des WebSockets, j’ai <a href="https://httptoolkit.tech/blog/http-wtf/">récemment appris</a> (<a href="/david/cache/2021/cbd2101777421fa7549472859210a69c/">cache</a>) que les restrictions de type <abbr title="Cross-Origin Resource Sharing">CORS</abbr> ne sont pas du tout respectées.</p>
  509. <p>Note&nbsp;: je suis surpris qu’il n’y ait pas encore un projet intitulé <strong>RESTream</strong> dans le domaine 🙃🚎.</p>
  510. </details>
  511. <h2><a href="/david/2021/02/25/" title="Lien permanent vers cet article">Stabilisation</a> (2021-02-25)</h2>
  512. <details>
  513. <summary>Déplier pour lire le contenu de la publication</summary>
  514. <blockquote>
  515. <p>Hâtez-vous lentement, et sans perdre courage, vingt fois sur le métier stabilisez votre ouvrage.</p>
  516. <p><cite>Nicolas Boileau fait des vidéos</cite></p>
  517. </blockquote>
  518. <p>Suite à mes <a href="/david/2021/02/24/" title="Précipitation">récents déboires</a>, j’ai décidé de m’entrainer dans mon jardin (le parc à 250&nbsp;mètres de chez moi). Je constate qu’en captant des vidéos à 60&#8239;images par seconde puis en réduisant la vitesse en post-production à 24, cela me permet d’avoir un mouvement plus rapide et donc plus fluide. C’est une astuce connue mais je voulais vérifier les effets de bord, je vois deux inconvénients&nbsp;:</p>
  519. <ol>
  520. <li>Devoir penser à définir une vitesse d’obturateur de ~1/120&#8239;sec (contre ~1/48&#8239;sec à 24&#8239;images/sec) pour avoir des mouvements plus réalistes.</li>
  521. <li>Perdre le son, ça n’est pas critique pour un panoramique par exemple mais c’est à garder en mémoire selon la situation, avoir un capteur externe pourrait être pertinent mais la synchro sera de toute façon un problème.</li>
  522. </ol>
  523. <p>Aussi, pour cet exercice j’ai ajouté deux poignées et collé le boitier à mon corps afin d’augmenter la stabilité. En ajoutant encore un peu de poids, je pourrais probablement gagner encore un peu.</p>
  524. <p>C’était aussi l’occasion de tester un nouvel objectif grand angle totalement manuel, dédié à la captation cinématographique. Cette focale (~17&#8239;mm) semble me convenir pour ce type de prise de vue.</p>
  525. <p>Le résultat sur Vimeo&nbsp;: <a href="https://vimeo.com/516981493/bd0c3a6e23">Stabilisation</a>. Je vais essayer de publier mes entraînements sans prétention, ça me force à fluidifier ma chaîne de traitement.</p>
  526. </details>
  527. <h2><a href="/david/2021/02/14/" title="Lien permanent vers cet article">Bibliothèque</a> (2021-02-14)</h2>
  528. <details>
  529. <summary>Déplier pour lire le contenu de la publication</summary>
  530. <blockquote lang="en">
  531. <p>I know there’s lots of advice out there about considering your audience when you write, but when it comes to my personal site, I’d find that crippling. It would be one more admonishment from the inner critic whispering “no one’s interested in that”, “you have nothing new to add to this topic”, and “you’re not qualified to write about this.” If I’m writing for myself, then it’s easier to have fewer inhibitions. By treating everything as a scrappy note-to-self, I can avoid agonising about quality control …although I still spend far too long trying to come up with titles for posts.</p>
  532. <p>[…]</p>
  533. <p>If someone else gets some value from a quick blog post that I dash off here, that’s always a pleasant surprise. It’s a bonus. But it’s not my reason for writing. <mark>My website is primarily a tool and a library for myself.</mark> It just happens to also be public.</p>
  534. <p><cite><em><a href="https://adactio.com/journal/17821">Associative trails</a></em> (<a href="/david/cache/2021/27f60626eb789433d6e2619663bb79f0/">cache</a>)</cite></p>
  535. </blockquote>
  536. <p>J’aime cette notion de bibliothèque d’idées personnelle <em>et</em> publique. Aucun service à ma connaissance ne permet cela avec la garantie de conserver les données et de les indexer sur plusieurs décennies. Privilège de développeur que celui d’<em>être en capacité</em> de le faire grâce aux compétences permettant de transformer — et donc conserver — des données au cours du temps.</p>
  537. <p>Si vous devez un jour faire une recherche sur ce qui a été écrit ici, vous pouvez télécharger <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">l’archive du dépôt</a>, la charger dans n’importe quel éditeur de texte un peu compétent (comme <a href="https://www.sublimetext.com/">SublimeText</a>) et une recherche dans tous les fichiers devrait vous permettre de fouiller. C’est ce que j’utilise personnellement lorsque ma mémoire me fait défaut ou que je veux faire un lien interne.</p>
  538. <blockquote lang="en">
  539. <p>And I’m also reminded of how writers I love and respect maintain their own reservoirs of knowledge, complete with migratory paths down from the mountains.</p>
  540. <p>[…]</p>
  541. <p>And it’s interesting, right, this accretive note-taking and the process of taking core samples through the deep time of your own ideas. I’ve built something similar, not as consistently, but for about two decades too, and <mark>I keep all my notes in plain text</mark>, and all in the same searchable database.</p>
  542. <p><cite><em><a href="http://interconnected.org/home/2021/02/10/reservoirs">Memexes, mountain lakes, and the serendipity of old ideas</a></em> (<a href="/david/cache/2021/9b2e831c217bc1179c0f74c4fc363c11/">cache</a>)</cite></p>
  543. </blockquote>
  544. </details>
  545. <h2><a href="/david/2021/02/01/" title="Lien permanent vers cet article">Software</a> (2021-02-01)</h2>
  546. <details>
  547. <summary>Déplier pour lire le contenu de la publication</summary>
  548. <blockquote lang="en">
  549. <p>The right coding language, system architecture, or interface design will vary wildly from project to project. But <mark>there are characteristics particular to software that consistently cause traditional management practices to fail</mark>, while allowing small startups to succeed with a shoestring budget:</p>
  550. <ul>
  551. <li>Reusing good software is easy; it is what allows you to build good things quickly;</li>
  552. <li>Software is limited not by the amount of resources put into building it, but by how complex it can get before it breaks down; and</li>
  553. <li>The main value in software is not the code produced, but the knowledge accumulated by the people who produced it.</li>
  554. </ul>
  555. <p>Understanding these characteristics may not guarantee good outcomes, but it does help clarify why so many projects produce bad outcomes.</p>
  556. <p><cite><em><a href="https://www.csc.gov.sg/articles/how-to-build-good-software">How to Build Good Software</a></em> (<a href="/david/cache/2021/6be8b8649cd695b922a43d15f74d4773/">cache</a>)</cite></p>
  557. </blockquote>
  558. <p>Deux articles lus ce jour qui sont totalement dans mes réflexions du moment. Avoir de l’expérience dans le domaine dans lequel j’évolue, c’est se demander pourquoi est-ce qu’on y est encore et si on a vraiment appris un truc après toutes ces années. J’ai beaucoup de mal à répondre à ces deux questions, les réponses se mordent la queue et ça me donne parfois l’impression de tourner en rond.</p>
  559. <p>Mon activité (rémunérée) est un chaos. Et le seul moyen que j’ai trouvé de le rendre acceptable est de le réduire. Moins de dépendances, moins de hiérarchie, moins de variables, moins de boîtes noires. D’une certaine manière, moins d’attentes aussi.</p>
  560. <p>Une autre exploration est de <a href="/david/2020/12/13/#journal">consigner</a> mes doutes, mes motivations, mes erreurs, mes joies. Je n’ai aucune illusion quand au fait de reproduire ces expériences plus ou moins mal·heureuses — même après les avoir écrites — mais le fait de les avoir formulées, externalisées, est déjà une étape dans leur acceptation. Ainsi que les émotions qui vont avec.</p>
  561. <p>Je me demande rarement si je suis un «&nbsp;vrai&nbsp;» ingénieur. Je me demande davantage si je deviens un vrai humain à continuer cette activité. C’est peut-être ceci l’expérience&nbsp;: douter de plus en plus de l’utilité de ce que l’on produit… et de la façon d’y parvenir.</p>
  562. <blockquote lang="en">
  563. <p>Nobody I read in these arguments, not one single person, ever worked as a “real” engineer. At best they had some classical training in the classroom, but we all know that looks nothing like reality. <mark>Nobody in this debate had anything more than stereotypes to work with.</mark> The difference between the engineering in our heads and in reality has been noticed by others before, most visibly by Glenn Vanderburg. He read books on engineering to figure out the difference. But I wanted to go further.</p>
  564. <p><cite><em><a href="https://www.hillelwayne.com/post/crossover-project/are-we-really-engineers/">Are We Really Engineers?</a></em> (<a href="/david/cache/2021/6514143dca5d96bf9e751236b800fba5/">cache</a>)</cite></p>
  565. </blockquote>
  566. </details>
  567. <h2><a href="/david/2021/01/19/" title="Lien permanent vers cet article">Chaîne de capture</a> (2021-01-19)</h2>
  568. <details>
  569. <summary>Déplier pour lire le contenu de la publication</summary>
  570. <blockquote lang="en">
  571. <p>Pictures have always been a meaningful part of the human experience. From the first cave drawings, to sketches and paintings, to modern photography, we’ve mastered the art of recording what we see.</p>
  572. <p><mark>Cameras and the lenses inside them may seem a little mystifying.</mark> In this blog post I’d like to explain not only how they work, but also how adjusting a few tunable parameters can produce fairly different results</p>
  573. <p><cite><em><a href="https://ciechanow.ski/cameras-and-lenses/">Cameras and Lenses</a></em> (<a href="/david/cache/2021/ef2067bf42482ed7c48e1d166cde117a/">cache</a>)</cite></p>
  574. </blockquote>
  575. <p>En ce moment, je creuse un peu quelles chaînes est-ce que je consens à supporter pour produire de la vidéo. Cela me fait découvrir et réviser des fondamentaux d’optique mais aussi de technique numérique. <strong>Il faut aujourd’hui comprendre les deux pour capter une image exploitable.</strong> Et je ne parle même pas (encore) de la post-production.</p>
  576. <p>C’est un cheminement plaisant car on part d’un «&nbsp;simple&nbsp;» reflet de lumière pour arriver à une complexité numérique incroyable. L’œil et le cerveau sont des organes assez fascinants vus sous cet angle (<em>pun intended</em>).</p>
  577. <blockquote lang="en">
  578. <p>To understand what makes it so special, the first half of this post explains how a digital camera develops a photo. Then we go on to explain the strengths and weaknesses of traditional RAWs. Finally, we dive into what’s unique about ProRAW, how it changes the game, and its few remaining drawbacks.</p>
  579. <p><cite><em><a href="https://blog.halide.cam/understanding-proraw-4eed556d4c54">Understanding ProRAW</a></em> (<a href="/david/cache/2021/0c6966a8e9543b52c361ac6de68f08e4/">cache</a>)</cite></p>
  580. </blockquote>
  581. </details>
  582. <h2><a href="/david/2021/01/18/" title="Lien permanent vers cet article">Textcasts</a> (2021-01-18)</h2>
  583. <details>
  584. <summary>Déplier pour lire le contenu de la publication</summary>
  585. <blockquote>
  586. <p>It’s like podcasts — but for reading.</p>
  587. <p><cite><em><a href="https://netnewswire.com/">Free and Open Source RSS Reader for Mac and iOS</a></em> (<a href="/david/cache/2021/21d3daabe37170d236d2714df3b872fb/">cache</a>)</cite></p>
  588. </blockquote>
  589. <p>C’est assez marrant qu’un agrégateur que j’utilise depuis avant l’apparition des <em>podcasts</em> puisse se définir ainsi. Et justement, je rêve d’un agrégateur qui me permette de m’abonner à un <em>podcast</em> et d’en recevoir la version texte. <strong>J’ai essayé pas mal de pistes.</strong> Il y <a href="https://hyperaud.io/">en</a> <a href="https://trint.com/">a</a> <a href="https://www.descript.com/">des</a> <a href="https://www.simonsays.ai/">payantes</a> qui supportent plus ou moins bien le français. J’ai aussi <a href="https://mastodon.social/@dav/105458605863317409">tout un fil</a> où je tente de le faire avec des outils <em>open-source</em> (notamment <a href="https://deepspeech.readthedocs.io/en/latest/">Deepspeech</a> et <a href="https://alphacephei.com/vosk/">Vosk</a>) sans arriver à quoi que ce soit de potable.</p>
  590. <p>Si jamais vous avez le même problème et une solution utilisable-mais-pas-trop-chère, je prends. Il faudrait que je fasse un comparatif des différents services payants trouvés. Ça pourrait même faire un chouette épisode de <em>podcast</em> #ohWait.</p>
  591. </details>
  592. <h2><a href="/david/2021/01/15/" title="Lien permanent vers cet article">Artfevre</a> (2021-01-15)</h2>
  593. <details>
  594. <summary>Déplier pour lire le contenu de la publication</summary>
  595. <blockquote>
  596. <p>En Février il y a 28&nbsp;Jours. On vous propose d’utiliser chacun d’entre eux pour créer — de manière intensive et sans jugement — hors de notre <mark>zone de confort</mark>, et avec des contraintes imposées.</p>
  597. <p><cite><em><a href="https://artfevre.notmyidea.org/">Un février artistique&#8239;!</a></em> (<a href="/david/cache/2021/94923f2d3ecd28b40745665c9cbe8393/">cache</a>)</cite></p>
  598. </blockquote>
  599. <p>Je ne sais pas dans quoi est-ce que cela pourrait me mener et c’est ce qui m’intéresse. J’ai plein d’idées et je vais apprécier de me laisser guider par les thèmes et l’envie du moment. <strong>Merci Alexis pour l’invitation.</strong></p>
  600. <p>J’avais notamment été impressionné par le résultat de l’expérience d’Antoine&nbsp;:</p>
  601. <blockquote>
  602. <p>L’idée était venue presque par hasard. Profiter de deux mois dans une autre ville pour produire quelque chose. Avec une contrainte à s’imposer, et une certaine dimension de régularité. Le carnet comme support. Même si l’exploration de l’intime est souvent attirante l’écriture n’était pas une option viable à ce moment-là. Apprendre à dessiner. En deux mois. <mark>Chaque jour.</mark> Projet saugrenu dont il était facile de se détacher, au besoin.</p>
  603. <p><cite><em><a href="https://www.quaternum.net/2020/02/29/epuiser-la-pratique/">Épuiser la pratique</a></em> (<a href="/david/cache/2021/fd776407232cd6fd7627bac7dba39755/">cache</a>)</cite></p>
  604. </blockquote>
  605. </details>
  606. <h2><a href="/david/2021/01/13/" title="Lien permanent vers cet article">Long terme</a> (2021-01-13)</h2>
  607. <details>
  608. <summary>Déplier pour lire le contenu de la publication</summary>
  609. <blockquote lang="en">
  610. <p>So I wonder about the long-term effects not of lockdown itself, but the continuous <em>risk</em> of lockdown. Like, will you book a holiday for 6&nbsp;months time, or will you book simply the <em>option</em> to go somewhere? Would you ever start a business that had a reliance on in-person meetings, or a supply chain that wasn’t tolerant to an unexpected 3&nbsp;month stop? Of course not. How do you invest in friendships? <mark>Do you ever move far away from ageing parents if there’s a risk that planes won’t fly</mark> – or does distance no longer matter when you wouldn’t be able to meet in person anyway?</p>
  611. <p><cite><em><a href="http://interconnected.org/home/2020/04/20/continuous_partial_lockdown">Some rambling thoughts about the stuttering end of the last ice age and what lockdown means</a></em> (<a href="/david/cache/2021/44064d714aff0deac9f882cc429d8b9d/">cache</a>)</cite></p>
  612. </blockquote>
  613. <p>Je me faisais cette réflexion dernièrement que les symptômes grippaux n’auront plus jamais cette signification quasi-bénigne à laquelle nous étions habitu·é·es. Il y aura toujours la crainte d’une mutation, d’un nouveau variant, d’une n-ième transmission à l’humain, d’une complication imminente.</p>
  614. <p>Sous un autre angle, comment va-t-on vivre avec les personnes présentant des séquelles à long terme de la Covid&#8239;? Perte de mémoire, de concentration, fatigue chronique, aphasie, etc., nous découvrons <a href="https://www.nytimes.com/2020/12/04/health/covid-long-term-symptoms.html">peu</a> (<a href="/david/cache/2021/e2bbd325581e7ec27b5c8e92ca32ce69/">cache</a>) à <a href="https://www.thelancet.com/journals/lancet/article/PIIS0140-6736(20)32656-8/fulltext">peu</a> (<a href="/david/cache/2021/c177668b263f39d20788f002446d2a47/">cache</a>) les conséquences neurologiques à long terme.</p>
  615. <p><strong>De quelle solidarité va-t-on faire preuve auprès de ces survivant·e·s&#8239;?</strong></p>
  616. <blockquote lang="en">
  617. <p>“People seem to be going home, getting long-term effects, coming back in and dying. We see nearly 30&nbsp;per cent have been readmitted, and that’s a lot of people. The numbers are so large.</p>
  618. <p>“<mark>The message here is we really need to prepare for long Covid.</mark> It’s a mammoth task to follow up with these patients and the NHS is really pushed at the moment, but some sort of monitoring needs to be arranged.”</p>
  619. <p><cite><em><a href="https://www.telegraph.co.uk/news/2021/01/17/almost-third-recovered-covid-patients-return-hospital-five-months/">Almost a third of recovered Covid patients return to hospital in five months and one in eight die</a></em> (<a href="/david/cache/2021/46b31e34a075d66aa6e4b8d8c91bd535/">cache</a>)</cite></p>
  620. </blockquote>
  621. </details>
  622. <h2><a href="/david/2021/01/10/" title="Lien permanent vers cet article">Biologeek</a> (2021-01-10)</h2>
  623. <details>
  624. <summary>Déplier pour lire le contenu de la publication</summary>
  625. <blockquote>
  626. <p>I’ve never come across a subject so fractal in its complexity. It reminds me of computing that way. A day of programming might involve constructing an elaborate regular expression, investigating a file descriptor leak, debugging a race condition in the application you just wrote, and thinking through the interface of a module. Everywhere you look—the compiler, the shell, the CPU, the DOM—is an abstraction hiding lifetimes of work. <mark>Biology is like this, just much, much worse, because living systems aren’t intentionally designed.</mark> It’s all a big slop of global mutable state. Control is achieved by upregulating this thing while turning down the promoter of that thing’s repressor. You think you know how something works—like when I thought I had a handle on the neutrophil, an important front-line player in the innate immune system—only to learn that it comes in several flavors, and more are still being discovered, and some of them seem to do the opposite of the ones you thought you knew. Everything in biology is like this. It’s all exceptions to the rule.</p>
  627. <p><cite><em><a href="https://jsomers.net/i-should-have-loved-biology/">I should have loved biology</a></em> (<a href="/david/cache/2021/9c9968045ffe697a08dc13df854247f1/">cache</a>)</cite></p>
  628. </blockquote>
  629. <p>Il y a un engouement certain pour la biologie en ce moment et ça me fait plaisir de retomber dans ce domaine en mettant à jour de vieilles connaissances. <strong>Constater les avancées scientifiques en fonction de ses anciennes croyances.</strong> Se dire que tout cela est encore bien vivant… et inconnu&#8239;!</p>
  630. <p>Quelques articles particulièrement didactiques&nbsp;:</p>
  631. <ul>
  632. <li><a href="https://berthub.eu/articles/posts/amazing-dna/">comprendre l’ADN</a> (<a href="/david/cache/2021/1cb1c46e0a1adcd0917179a214a16e0a/">cache</a>) lorsqu’on est un·e développeu·r·se&#8239;;</li>
  633. <li>les <a href="https://www.nature.com/articles/d41586-020-01221-y">différentes méthodes employées pour créer à un vaccin</a> (<a href="/david/cache/2021/fe75ef80663602733dbe24cc717f257b/">cache</a>) avec de jolies illustrations&#8239;;</li>
  634. <li>où j’ai appris que <a href="https://nymag.com/intelligencer/2020/12/moderna-covid-19-vaccine-design.html">le vaccin Moderna a été créé le 13&nbsp;janvier… 2020 (!)</a> (<a href="/david/cache/2021/30069f97e4aa989a1d89fe8d88538da8/">cache</a>) et depuis on teste son usage et ses effets secondaires&#8239;;</li>
  635. <li>une <a href="https://www.nytimes.com/interactive/2020/04/03/science/coronavirus-genome-bad-news-wrapped-in-protein.html">analyse du génome du coronavirus</a> (<a href="/david/cache/2021/cfcd10768187ce1c3e598136cd8838b2/">cache</a>) séquencée et imagée qui permet de visualiser la forme — et donc la fonction — des protéines&#8239;;</li>
  636. <li>les <a href="https://graphics.reuters.com/HEALTH-CORONAVIRUS/EVOLUTION/yxmpjqkdzvr/index.html">différentes mutations du virus</a> (<a href="/david/cache/2021/3d3e8962a6319ee4d41a75b1cd5abd38/">cache</a>) au cours du temps et de l’espace&#8239;;</li>
  637. <li>pourquoi <a href="https://www.deplatformdisease.com/blog/no-really-mrna-vaccines-are-not-going-to-affect-your-dna">le virus à ARN ne va pas modifier votre ADN</a> (<a href="/david/cache/2021/388cf40eae756175ee87c9bf7a1548c4/">cache</a>) en l’état actuel des connaissances en biologie&#8239;;</li>
  638. <li>un <a href="https://edinburgh-genome-foundry.github.io/DnaChisel/">outil d’optimisation de séquences</a> (<a href="/david/cache/2021/e8ebcfcc0dbd4336a82f618a1bd1a818/">cache</a>) en Python ce qui permet par exemple <a href="https://berthub.eu/articles/posts/part-2-reverse-engineering-source-code-of-the-biontech-pfizer-vaccine/">d’optimiser un vaccin</a> (<a href="/david/cache/2021/5f1c22e9a41d209ff84218b3d6faf676/">cache</a>)&#8239;;</li>
  639. <li>quelqu’un qui analyse sa <a href="https://karpathy.github.io/2020/06/11/biohacking-lite/">perte de poids sous l’angle de la biologie</a> (<a href="/david/cache/2021/1039b631578007d23759a99c2238cda9/">cache</a>)&#8239;;</li>
  640. <li>on s’éloigne un peu de la biologie mais cette façon de <a href="http://interconnected.org/home/2020/09/01/microcovids">calculer son exposition en microCOVIDs</a> (<a href="/david/cache/2021/dcba97f9e4bd70b1a152b9498dc5711c/">cache</a>) est fascinante.</li>
  641. </ul>
  642. <p>Bonnes lectures&#8239;!</p>
  643. <blockquote>
  644. <p>Avant tout chose, le mentat doit être un généraliste, et non un spécialiste. Il est sage que, dans les moments importants, les décisions soient supervisées par des généralistes. Les experts et les spécialistes vous conduisent rapidement au chaos. Chasseurs de poux vétilleux, ils sont une source intarissable de chicaneries inutiles. Le mentat-généraliste, d’un autre côté, doit apporter un solide bon sens à ses décisions. Il ne doit pas se couper du courant principal des évènements de l’univers. Il doit être capable de déclarer&nbsp;: «&nbsp;Pour le moment, il n’y a pas de vrai mystère. Ceci est ce que nous voulons maintenant. <mark>Cela peut paraitre faux plus tard, mais nous ferons les corrections nécessaires quand le moment sera venu.</mark>&nbsp;»</p>
  645. <p>Le mentat-généraliste doit comprendre que tout ce que nous pouvons identifier comme étant notre univers fait simplement partie de phénomènes plus vastes. L’expert, au contraire, regarde en arrière, dans les catégories étroites de sa propre spécialité. Le généraliste, lui, regarde au loin&#8239;; <mark>il cherche des principes vivants</mark>, sachant pertinemment que de tels principes changent, qu’ils se développent.</p>
  646. <p>Le mentat-généraliste regarde les caractéristiques du changement lui-même. Il ne peut exister de catalogue permanent pour de tels changements, aucun traité ou manuel. C’est sans préconception qu’il faut les regarder, tout en se demandant&nbsp;: «&nbsp;Que fait cette chose&#8239;?&nbsp;»</p>
  647. <p><cite><em>Le Guide du Mentat</em>, <a href="/david/2020/12/21/#dune">Dune</a> III. Les enfants de Dune</cite></p>
  648. </blockquote>
  649. </details>
  650. <h2><a href="/david/2021/01/04/" title="Lien permanent vers cet article">Webing-lists</a> (2021-01-04)</h2>
  651. <details>
  652. <summary>Déplier pour lire le contenu de la publication</summary>
  653. <blockquote lang="en">
  654. <p><mark>Newsletters killed blogs</mark> because…</p>
  655. <ol>
  656. <li>They’re impossibly easy to publish.</li>
  657. <li>Your inbox is a notification stream.</li>
  658. <li>Writers can actually, ya know, get paid.</li>
  659. </ol>
  660. <p>Alternatively, websites today…</p>
  661. <ol>
  662. <li>Are difficult to make.</li>
  663. <li>Can’t notify people of new work.</li>
  664. <li>Aren’t able to pay writers easily.</li>
  665. </ol>
  666. <p><cite><em><a href="https://www.robinrendle.com/essays/newsletters">Newsletters</a></em> (<a href="/david/cache/2021/99c13c692ec7f2217311fdea482e8792/">cache</a>)</cite></p>
  667. </blockquote>
  668. <p>Il y a de petites graines dans ces réflexions. Ce qui est ironique c’est que les raisons évoquées sont d’ordre technique alors que techniquement elles ont été — plus ou moins bien — résolues. <strong>C’est l’usage qu’il manque.</strong> Et l’effet de mode (les deux étant liés de toute façon). Dans une liste de diffusion, il y a justement… la liste qui donne une métrique permettant à l’auteur·ice d’avoir un semblant de contrôle sur qui lit. Avec un <a href="/david/blog/2019/flux-rss/">flux RSS</a>, il est de plus en plus difficile de savoir qui lie<sup>*</sup> tellement tout cela se passe dans les boîtes noires que deviennent les réseaux sociaux.</p>
  669. <p>* on a là une différence importante également, l’impossibilité de lier vers un contenu qui a été envoyé par courriel, les listes de diffusion ne disposant pas toutes d’archives web.</p>
  670. <p>Aussi, mon navigateur est équipé d’extensions me permettant de bloquer l’enregistrement des mes actions relatives à une page. Ce n’est pas le cas de mon client email. C’est la <a href="/david/2020/02/07/#newsletters">raison pour laquelle</a> je me désabonne de beaucoup de listes de diffusion qui contiennent des liens destinés à me tracer. J’aimerais pouvoir dire à une personne que je l’ai lue et écoutée sans alimenter pour autant une usine à collecte de données personnelles. C’est peut-être là que réside l’innovation…</p>
  671. <p>Karl en parle aussi, le lendemain (des bienfaits d’une publication décalée 🙂)&nbsp;:</p>
  672. <blockquote>
  673. <p>L’email est un système de push et cela change beaucoup de choses. <mark>Il y a une notion d’intimité qui est importante et qui définit un plus grand contrôle.</mark> La newsletter n’atteint pas potentiellement tout le monde, uniquement ceux qui ont voulu s’inscrire (et potentiellement payer). Créer un site Web intime, c’est à dire gérer le contrôle d’accès est plus difficile.</p>
  674. <p><cite><em><a href="https://www.la-grange.net/2021/01/05/newsletter">cher vous</a></em> (<a href="/david/cache/2021/5f4b0220be54d83f711a78b356c73a68/">cache</a>)</cite></p>
  675. </blockquote>
  676. </details>
  677. </main>
  678. <hr>
  679. <footer>
  680. <p>
  681. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  682. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  683. </svg> Accueil</a> •
  684. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  685. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  686. </svg> Suivre</a> •
  687. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  688. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  689. </svg> Pro</a> •
  690. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  691. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  692. </svg> Email</a> •
  693. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  694. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  695. </svg> Légal</abbr>
  696. </p>
  697. <template id="theme-selector">
  698. <form>
  699. <fieldset>
  700. <legend><svg class="icon icon-brightness-contrast">
  701. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  702. </svg> Thème</legend>
  703. <label>
  704. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  705. </label>
  706. <label>
  707. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  708. </label>
  709. <label>
  710. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  711. </label>
  712. </fieldset>
  713. </form>
  714. </template>
  715. </footer>
  716. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  717. <script>
  718. function loadThemeForm(templateName) {
  719. const themeSelectorTemplate = document.querySelector(templateName)
  720. const form = themeSelectorTemplate.content.firstElementChild
  721. themeSelectorTemplate.replaceWith(form)
  722. form.addEventListener('change', (e) => {
  723. const chosenColorScheme = e.target.value
  724. localStorage.setItem('theme', chosenColorScheme)
  725. toggleTheme(chosenColorScheme)
  726. })
  727. const selectedTheme = localStorage.getItem('theme')
  728. if (selectedTheme && selectedTheme !== 'undefined') {
  729. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  730. }
  731. }
  732. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  733. window.addEventListener('load', () => {
  734. let hasDarkRules = false
  735. for (const styleSheet of Array.from(document.styleSheets)) {
  736. let mediaRules = []
  737. for (const cssRule of styleSheet.cssRules) {
  738. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  739. continue
  740. }
  741. // WARNING: Safari does not have/supports `conditionText`.
  742. if (cssRule.conditionText) {
  743. if (cssRule.conditionText !== prefersColorSchemeDark) {
  744. continue
  745. }
  746. } else {
  747. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  748. continue
  749. }
  750. }
  751. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  752. }
  753. // WARNING: do not try to insert a Rule to a styleSheet you are
  754. // currently iterating on, otherwise the browser will be stuck
  755. // in a infinite loop…
  756. for (const mediaRule of mediaRules) {
  757. styleSheet.insertRule(mediaRule.cssText)
  758. hasDarkRules = true
  759. }
  760. }
  761. if (hasDarkRules) {
  762. loadThemeForm('#theme-selector')
  763. }
  764. })
  765. </script>
  766. </body>
  767. </html>