Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 59KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798
  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>
  13. Tag #web
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #web">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  111. data-instant-intensity="viewport-all">
  112. <header>
  113. <h1>Publications relatives au tag #web</h1>
  114. </header>
  115. <nav>
  116. <p class="center">
  117. <a href="/david/" title="Aller à l’accueil">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. • <a rel="tags"
  123. href="/david/#tags-2023"
  124. title="Liste de toutes les étiquettes">
  125. <svg class="icon icon-tags">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  127. </svg>
  128. Étiquettes</a>
  129. </p>
  130. </nav>
  131. <hr>
  132. <main>
  133. <p>Les plus récentes en premier, les 3 premières sont dépliées et ensuite c’est à la demande, bonne exploration !</p>
  134. <h2>
  135. <a href="/david/2023/12/08/" title="Lien permanent vers cet article">Développement(s)</a> (2023-12-08)
  136. </h2>
  137. <p>J’ai un peu de mal ces temps-ci à dire que je suis un développeur car j’ai l’impression de passer énormément d’énergie à faire d’autres choses. Lorsqu’on me demande ce que je fais, je dis «&nbsp;des trucs, de-ci de-là…&nbsp;», rien de bien grandiloquent. Une bonne partie de mes journées est passée dans la gestion de Scopyleft (au sens très large), une autre à interagir avec les équipes avec lesquelles je travaille. Et puis parfois, l’après-midi ou le soir, lorsqu’il n’y a ni grève, ni neige, ni journée pédagogique, ni covid, ni flemme, il m’arrive de coder des&nbsp;trucs.</p>
  138. <h2 id="anthologie-palatine">Anthologie Palatine <a href="#anthologie-palatine" title="Ancre vers cette partie">#</a></h2><figure>
  139. <a href="/static/david/2023/2023-12-08-anthologie-palatine.jpg"
  140. title="Cliquer pour une version haute résolution">
  141. <img
  142. src="/static/david/2023/2023-12-08-anthologie-palatine.jpg"
  143. width="2862" height="2124"
  144. srcset="/static/david/2023/2023-12-08-anthologie-palatine.jpg 2862w, /static/david/2023/2023-12-08-anthologie-palatine_660x440.jpg 660w, /static/david/2023/2023-12-08-anthologie-palatine_990x660.jpg 990w, /static/david/2023/2023-12-08-anthologie-palatine_1320x880.jpg 1320w"
  145. sizes="min(100vw, calc(100vh * 2862 / 2124))"
  146. loading="lazy"
  147. decoding="async"
  148. alt="Capture d’écran du produit">
  149. </a>
  150. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  151. </figure>
  152. <p>Projet de longue date avec la <a href="https://www.ecrituresnumeriques.ca/">Chaire du Canada sur les écritures numériques</a> qui consiste à rendre possible le parcours et l’analyse de <a href="https://anthologiagraeca.org/">textes en Grec ancien</a>. C’est un peu en pause depuis le début de l’année mais j’ai pris beaucoup de plaisir à échanger / pairer techniquement avec Sarah (de Scopyleft) sur ces&nbsp;évolutions.</p>
  153. <p>Participer à de la recherche par l’angle du développement est <del>un des moyens d’être bien payé</del> une façon de garder un pied dans un domaine qui me fait mouliner le cerveau pour autre chose que le profit des&nbsp;autres.</p>
  154. <h2 id="pressoir">Pressoir <a href="#pressoir" title="Ancre vers cette partie">#</a></h2><figure>
  155. <a href="/static/david/2023/2023-12-08-ateliers-sens-public.jpg"
  156. title="Cliquer pour une version haute résolution">
  157. <img
  158. src="/static/david/2023/2023-12-08-ateliers-sens-public.jpg"
  159. width="2288" height="2122"
  160. srcset="/static/david/2023/2023-12-08-ateliers-sens-public.jpg 2288w, /static/david/2023/2023-12-08-ateliers-sens-public_660x440.jpg 660w, /static/david/2023/2023-12-08-ateliers-sens-public_990x660.jpg 990w, /static/david/2023/2023-12-08-ateliers-sens-public_1320x880.jpg 1320w"
  161. sizes="min(100vw, calc(100vh * 2288 / 2122))"
  162. loading="lazy"
  163. decoding="async"
  164. alt="Capture d’écran du produit">
  165. </a>
  166. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  167. </figure>
  168. <p>Toujours avec la <a href="https://www.ecrituresnumeriques.ca/">Chaire du Canada sur les écritures numériques</a>, parce qu’on apprécie bien de travailler ensemble, on a fait il y a quelques années un outil permettant de générer des livres numériques à partir de sources en <em>markdown</em>.</p>
  169. <p>Cela a donné lieu à <a href="https://ateliers.sens-public.org/">deux</a> <a href="http://parcoursnumeriques-pum.ca/">collections</a> enrichies de contenus numériques (vidéos, etc).</p>
  170. <figure>
  171. <a href="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg"
  172. title="Cliquer pour une version haute résolution">
  173. <img
  174. src="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg"
  175. width="2310" height="2108"
  176. srcset="/static/david/2023/2023-12-08-presses-universitaires-montreal.jpg 2310w, /static/david/2023/2023-12-08-presses-universitaires-montreal_660x440.jpg 660w, /static/david/2023/2023-12-08-presses-universitaires-montreal_990x660.jpg 990w, /static/david/2023/2023-12-08-presses-universitaires-montreal_1320x880.jpg 1320w"
  177. sizes="min(100vw, calc(100vh * 2310 / 2108))"
  178. loading="lazy"
  179. decoding="async"
  180. alt="Capture d’écran du produit">
  181. </a>
  182. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  183. </figure>
  184. <p>Depuis l’automne, on assume d’avoir fait un <a href="https://gitlab.huma-num.fr/ecrinum/pressoir-cli/">Générateur de Livres Statiques</a> et on essaye de le rendre plus polyvalent / autonome. C’est un exercice de recherche qui va vers une dé-GAFAM-isation et qui m’intéresse <a href="/david/biologeek/archives/20060119-open-articles-liberez-votre-savoir/">depuis un bout de&nbsp;temps…</a></p>
  185. <h2 id="stylo">Stylo <a href="#stylo" title="Ancre vers cette partie">#</a></h2><figure>
  186. <a href="/static/david/2023/2023-12-08-stylo-export.jpg"
  187. title="Cliquer pour une version haute résolution">
  188. <img
  189. src="/static/david/2023/2023-12-08-stylo-export.jpg"
  190. width="2302" height="1770"
  191. srcset="/static/david/2023/2023-12-08-stylo-export.jpg 2302w, /static/david/2023/2023-12-08-stylo-export_660x440.jpg 660w, /static/david/2023/2023-12-08-stylo-export_990x660.jpg 990w, /static/david/2023/2023-12-08-stylo-export_1320x880.jpg 1320w"
  192. sizes="min(100vw, calc(100vh * 2302 / 1770))"
  193. loading="lazy"
  194. decoding="async"
  195. alt="Capture d’écran du produit">
  196. </a>
  197. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  198. </figure>
  199. <p>Puisque j’en suis sur la recherche, j’ai aussi contribué modestement à l’éditeur de texte <a href="https://stylo.huma-num.fr/">Stylo</a> pour la partie export. Cela m’a fait plonger dans l’univers de <a href="https://gitlab.huma-num.fr/ecrinum/stylo/pandoc-api">Pandoc</a> (et Docker), de la bibliographie académique et puis j’ai refait des API et j’aime bien&nbsp;ça.</p>
  200. <h2 id="labrri">LABRRI <a href="#labrri" title="Ancre vers cette partie">#</a></h2><figure>
  201. <a href="/static/david/2023/2023-12-08-labrri.jpg"
  202. title="Cliquer pour une version haute résolution">
  203. <img
  204. src="/static/david/2023/2023-12-08-labrri.jpg"
  205. width="2446" height="2028"
  206. srcset="/static/david/2023/2023-12-08-labrri.jpg 2446w, /static/david/2023/2023-12-08-labrri_660x440.jpg 660w, /static/david/2023/2023-12-08-labrri_990x660.jpg 990w, /static/david/2023/2023-12-08-labrri_1320x880.jpg 1320w"
  207. sizes="min(100vw, calc(100vh * 2446 / 2028))"
  208. loading="lazy"
  209. decoding="async"
  210. alt="Capture d’écran du produit">
  211. </a>
  212. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  213. </figure>
  214. <p>Pour finir côté recherche, j’ai accompagné le <a href="https://labrri.net/">LABRRI</a> dans l’analyse et la mise en forme de leurs données autour de situations interculturelles au Québec. C’est en interagissant avec des personnes peu/pas techniques que j’ai l’impression de progresser aujourd’hui. Cela permet de revoir les contraintes, l’autonomie, la consommation des ressources, les outils déjà en place. Cette prise de recul est nécessaire pour un avenir&nbsp;frugal.</p>
  215. <p>Le sujet en lui-même est une façon de m’intégrer au Québec en analysant le prisme des incompréhensions culturelles qu’il peut parfois y&nbsp;avoir.</p>
  216. <h2 id="croix-rouge">Croix-Rouge <a href="#croix-rouge" title="Ancre vers cette partie">#</a></h2><figure>
  217. <a href="/static/david/2023/2023-12-08-croix-rouge-aime.jpg"
  218. title="Cliquer pour une version haute résolution">
  219. <img
  220. src="/static/david/2023/2023-12-08-croix-rouge-aime.jpg"
  221. width="2340" height="2124"
  222. srcset="/static/david/2023/2023-12-08-croix-rouge-aime.jpg 2340w, /static/david/2023/2023-12-08-croix-rouge-aime_660x440.jpg 660w, /static/david/2023/2023-12-08-croix-rouge-aime_990x660.jpg 990w, /static/david/2023/2023-12-08-croix-rouge-aime_1320x880.jpg 1320w"
  223. sizes="min(100vw, calc(100vh * 2340 / 2124))"
  224. loading="lazy"
  225. decoding="async"
  226. alt="Capture d’écran du produit">
  227. </a>
  228. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  229. </figure>
  230. <p>On a mis en place un outil pour qu’un lieu d’accueil et d’orientation puisse donner des formations à des mineurs étrangers avec <a href="https://www.maiwann.net/">Maïtané</a> et c’était émotionnellement intense. Beaucoup de <a href="/david/2023/02/18/" title="Quiz">remises en questions techniques</a> personnelles mais surtout de réflexions sur quelles sont les véritables héroïnes de ce&nbsp;monde…</p>
  231. <p>Un des enjeux était de voir ce que l’on arrivait à produire avec un budget très restreint (pour le domaine). Il y aurait de la matière pour un article&nbsp;dédié.</p>
  232. <h2 id="outils-scopyleft">Outils scopyleft <a href="#outils-scopyleft" title="Ancre vers cette partie">#</a></h2><figure>
  233. <a href="/static/david/2023/2023-12-08-outils-scopyleft.jpg"
  234. title="Cliquer pour une version haute résolution">
  235. <img
  236. src="/static/david/2023/2023-12-08-outils-scopyleft.jpg"
  237. width="2430" height="2124"
  238. srcset="/static/david/2023/2023-12-08-outils-scopyleft.jpg 2430w, /static/david/2023/2023-12-08-outils-scopyleft_660x440.jpg 660w, /static/david/2023/2023-12-08-outils-scopyleft_990x660.jpg 990w, /static/david/2023/2023-12-08-outils-scopyleft_1320x880.jpg 1320w"
  239. sizes="min(100vw, calc(100vh * 2430 / 2124))"
  240. loading="lazy"
  241. decoding="async"
  242. alt="Capture d’écran du produit">
  243. </a>
  244. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  245. </figure>
  246. <p>J’ai produit et maintenu une quinzaine d’outils pour <a href="http://scopyleft.fr/">Scopyleft</a> au cours de l’année. C’est beaucoup et je m’en suis rendu compte au moment où j’ai dû faire une page pour en faire la liste car on avait du mal à nous y retrouver&#8239;! Plus que les outils en eux-mêmes, c’est la structuration et l’aide qu’ils ont pu apporter à des moments critiques qui me&nbsp;réjouit.</p>
  247. <p>J’ai aussi développé pas mal de bouts de code relatifs à l’automatisation / vérification des sous-traitant·es qui sont de plus en plus nombreuses avec le <a href="https://www.data.gouv.fr/fr/datasets/realisation-de-services-publics-numeriques-en-mode-produit-coordonnes-par-le-programme-interministeriel-beta-gouv/">marché public</a> que l’on a remporté il y a quelques années. Extraire et vérifier des données issues de PDF provenant de l’administration ou d’outils de comptabilité n’est pas une mince&nbsp;affaire…</p>
  248. <h2 id="umap">uMap <a href="#umap" title="Ancre vers cette partie">#</a></h2><figure>
  249. <a href="/static/david/2023/2023-12-08-umap-anct.jpg"
  250. title="Cliquer pour une version haute résolution">
  251. <img
  252. src="/static/david/2023/2023-12-08-umap-anct.jpg"
  253. width="2472" height="2124"
  254. srcset="/static/david/2023/2023-12-08-umap-anct.jpg 2472w, /static/david/2023/2023-12-08-umap-anct_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-anct_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-anct_1320x880.jpg 1320w"
  255. sizes="min(100vw, calc(100vh * 2472 / 2124))"
  256. loading="lazy"
  257. decoding="async"
  258. alt="Capture d’écran du produit">
  259. </a>
  260. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  261. </figure>
  262. <p>Au printemps dernier, Yohan m’a motivé pour que l’on transforme un logiciel open-source en commun tout en se faisant financer par l’État. Je dois avouer que j’étais un peu dubitatif mais j’ai tenté le coup. Quelques mois après, on a une <a href="https://umap.incubateur.anct.gouv.fr/">instance souveraine</a> en production, des centaines d’<em>issues</em> traitées, un <a href="https://umap-project.org/">site dédié</a> avec une possibilité de financement participatif, des mises à jour régulières, des réflexions de fond avec la communauté, un financement par <a href="https://nlnet.nl/">NLnet</a>, etc.</p>
  263. <p>Pari tellement réussi qu’on a décidé de me passer en mécénat de compétences avec Scopyleft pour les derniers mois de l’année. Il faudra que je fasse un billet&nbsp;dédié.</p>
  264. <figure>
  265. <a href="/static/david/2023/2023-12-08-umap-project.jpg"
  266. title="Cliquer pour une version haute résolution">
  267. <img
  268. src="/static/david/2023/2023-12-08-umap-project.jpg"
  269. width="2462" height="2108"
  270. srcset="/static/david/2023/2023-12-08-umap-project.jpg 2462w, /static/david/2023/2023-12-08-umap-project_660x440.jpg 660w, /static/david/2023/2023-12-08-umap-project_990x660.jpg 990w, /static/david/2023/2023-12-08-umap-project_1320x880.jpg 1320w"
  271. sizes="min(100vw, calc(100vh * 2462 / 2108))"
  272. loading="lazy"
  273. decoding="async"
  274. alt="Capture d’écran du produit">
  275. </a>
  276. <figcaption>Capture d’écran du&nbsp;produit.</figcaption>
  277. </figure>
  278. <hr />
  279. <p>La plupart de ces sites sont statiques ou <a href="/david/2023/09/13/" title="Documentation">semynamiques</a>, sans faire appel à NPM.&nbsp;Vous n’avez pas idée d’à quel point cela me tranquillise et augmente mon efficacité en terme de maintenance sur le long&nbsp;terme.</p>
  280. <h2>
  281. <a href="/david/2023/09/23/" title="Lien permanent vers cet article">Éco-conception</a> (2023-09-23)
  282. </h2>
  283. <blockquote>
  284. <p>De mon temps on disait pas «&nbsp;écoconception&nbsp;» on disait juste «&nbsp;appliquer les prérequis basiques du métier de dev&nbsp;» et on n’était pas plus&nbsp;malheureux.</p>
  285. <p>S’il vous faut une formation pour vous empêcher d’afficher 10&#8239;Mo d’images sur votre homepage et d’empiler 50&nbsp;frameworks JS pour faire un formulaire, <mark>c’est peut-être que votre titre initial de «&nbsp;dev full stack senior&nbsp;» était légèrement usurpé.</mark> Et si l’interopérabilité, la rétrocompatibilité, l’amélioration progressive, l’accessibilité et les perfs sont pour vous de nouvelles compétences tendance à faire valoir sur un CV, je suis navré de vous annoncer que vous étiez jusque ici un&nbsp;escroc.</p>
  286. <p><cite><a href="https://mastodon.social/@STPo/111101966708210843">STPo sur&nbsp;mastodon</a></cite></p>
  287. </blockquote>
  288. <p>Ce n’est pas vraiment un secret que je fasse partie de la team vieux-rageux-qui-lève-ses-poings-vers-le-ciel (et surtout les yeux&nbsp;🙄) lorsqu’on parle de technique et de web. Le pire étant que plus le temps passe et plus j’ai le sentiment que cette profession se crée sa propre utilité. Il faudrait que je lise <em>Bullshit Jobs</em> pour être certain de ne pas dire n’importe quoi mais je crois bien que ça s’en rapproche de plus en plus. Ou alors j’en prends davantage&nbsp;conscience.</p>
  289. <p>Et ça m’embête autant que de jardiner dans mon petit potager bio tout en vivant au milieu d’une zone commerciale géante bariolée de publicités et traversée par des <abbr title="sport utility vehicle">SUV</abbr> et autres <em>pickups</em>. Toute ressemblance avec ma dissonance cognitive actuelle serait bien évidemment&nbsp;fortuite.</p>
  290. <p>En ce moment, à 15h50, j’écoute les enfants à la fenêtre préparer la chanson de l’année où <a href="https://www.lafabriqueculturelle.tv/capsules/14586/le-grand-rendez-vous-de-fanny-bloom-et-l-osm-une-chanson-a-l-ecole-les-journees-de-la-culture">Fanny Bloom leur demande de planter des arbres</a> alors qu’il y a une file de voitures de plus de 2&nbsp;tonnes qui attendent la sortie de leurs chers bambins. Tout ça pour s’éviter de faire quelques centaines de mètres à&nbsp;pied.</p>
  291. <p>Je crois que c’est ça l’éco-conception sur le web&nbsp;: réduire la taille d’une image afin de réduire son empreinte carbone tout en ayant demandé à un <abbr title="Large Language Model">LLM</abbr> de l’avoir&nbsp;générée.</p>
  292. <hr />
  293. <blockquote lang="en">
  294. <p>🎯 However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own technical decisions and how those decisions can also contribute to the disappearance of web’s <em>culture</em> of&nbsp;openness.</p>
  295. <p>Inadvertently (for the most part) technical trends and decisions in web development in <mark>the last two decades have lead to what we term a “Technical Enclosure” of the web,</mark> a processes whereby technical decisions chip away at the #ViewSource affordance that Cory Doctorow discusses in the opening quote of this article, an affordance that existed as a commons for early web&nbsp;developers.</p>
  296. <p><cite><em><a href="https://htmx.org/essays/right-click-view-source/">The #ViewSource Affordance</a></em>&nbsp;(<a href="/david/cache/2023/2782723c95c98a22087e9954b07a8fba/">cache</a>)</cite></p>
  297. </blockquote>
  298. <blockquote lang="en">
  299. <p>🤗 I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, <mark>I like to do my part</mark> which is why I try hard to not collect and keep any data about&nbsp;you.</p>
  300. <p><cite><em><a href="https://manuelmoreale.com/i-don-t-want-your-data">I don’t want your data</a></em>&nbsp;(<a href="/david/cache/2023/73f0ab0b4336be702e863205bd1bbace/">cache</a>)</cite></p>
  301. </blockquote>
  302. <blockquote lang="en">
  303. <p>🧑‍⚕️ We in software, sadly, tend to be in the treatments business, not in the patients business. <mark>We’re Big Pharma.</mark> And in the same way that Big Pharma invests massively in persuading us that we have the illness their potion cures, we have a tendency to try to get the customer’s problem to fit our solution. And so it is that “productivity” tends to be about the potion, and not the&nbsp;patient.</p>
  304. <p><cite><em><a href="https://codemanship.wordpress.com/2023/09/25/the-illusion-of-developer-productivity-opens-the-door-to-snake-oil/">The Illusion Of Developer “Productivity” Opens The Door To Snake Oil</a></em>&nbsp;(<a href="/david/cache/2023/d048e59b323783f6de3b03bda43a02cc/">cache</a>)</cite></p>
  305. </blockquote>
  306. <blockquote>
  307. <p>💜 Quand il laisse couler l’eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l’oubli n’efface les derniers sourires jusqu’à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d’un ancêtre dont les cendres sont peut-être encore sur le coin d’une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l’évasion d’une enfance&nbsp;heureuse&#8239;?</p>
  308. <p><cite><em><a href="https://www.la-grange.net/2023/03/15/envers">endroit de l’envers</a></em>&nbsp;(<a href="/david/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/">cache</a>)</cite></p>
  309. </blockquote>
  310. <h2>
  311. <a href="/david/2023/09/09/" title="Lien permanent vers cet article">Blogroll</a> (2023-09-09)
  312. </h2>
  313. <blockquote>
  314. <p>Je lie cinq blogs person­nels, choi­sis arbi­trai­re­ment et sans hiérar­chie, avec une phrase sur pourquoi ils me sont impor­tants, en choi­sis­sant un billet précis que j’ai aimé y trou­ver&nbsp;[…]</p>
  315. <p><cite><em><a href="https://n.survol.fr/n/la-blogchain">La blogchain - Carnet de notes</a></em>&nbsp;(<a href="/david/cache/2023/543d854b54593b8bf1adc2c491468bca/">cache</a>)</cite></p>
  316. </blockquote>
  317. <p>Je partageais sur Mastodon l’initiative d’Alex Sirac d’avoir fait un·e <a href="https://blogroll.fr/"><em>blogroll</em></a> et en explorant le site je me rends compte qu’<a href="https://blogroll.fr/articles-recents/">il y a une forme de <em>planet</em></a> et ça m’a rappelé de doux souvenirs. Je me souviens d’avoir mis ça en place sur cet espace à un moment, ça m’a rendu nostalgique 5&nbsp;minutes… et j’ai passé les deux heures suivantes à le coder en mode statique&nbsp;:-). Merci-pas-merci&nbsp;Alex&#8239;!</p>
  318. <p>Il y a donc maintenant <a href="/david/blogroll/">une page de blogroll</a> sur ce site avec les deux derniers billets publiés par personne listée. J’espère que j’arriverai à maintenir une page qui représente mes lectures réelles. Elle est loin d’être exhaustive car j’ai 150&nbsp;flux de personnes dans mon agrégateur. J’avais plus envie d’encourager la diversité des&nbsp;publications.</p>
  319. <p>J’ai rencontré deux problèmes durant cette&nbsp;expérience&nbsp;:</p>
  320. <ul>
  321. <li><strong>humain</strong>&nbsp;: certaines personnes souhaitent ne publier certains billets que par le biais de leur flux, est-ce qu’un agrégateur public ne va pas à l’encontre de cette&nbsp;volonté&#8239;?</li>
  322. <li><strong>technique</strong>&nbsp;: une proportion non négligeable de flux ne sont pas valides / standards, j’ai signalé cela à certain·es auteur·ices. Un <a href="https://validator.w3.org/feed/">outil existe</a> de la part du W3C pour effectuer cette&nbsp;vérification.</li>
  323. </ul>
  324. <p>Je me suis aussi demandé si c’était pertinent de faire comme Éric le propose avec un billet d’entrée particulier. C’est ce que <a href="https://www.hypothermia.fr/liens/">fait Eli</a> par exemple et j’avais trouvé ça chouette et plus stimulant qu’une simple liste, je garde ça dans un coin de tête. Je sais aussi d’expérience qu’il ne faut pas que je me prenne trop la tête si je veux garder une liste à jour sinon je vais vite avoir la flemme. Peut-être que je fais suffisamment de liens externes dans mes&nbsp;publications.</p>
  325. <p><del>J’aimerais également prendre le temps de faire une liste des articles techniques qui ont compté pour moi, à l’instar de <a href="https://ericwbailey.website/formative-posts/">Eric W. Bailey</a> et <a href="https://esif.dev/">tant</a> <a href="https://wdrl.info/evergreen/">d’autres</a>.</del> Bon, en fait <a href="/david/stream/2019/12/27/">je l’ai déjà faite</a>, parfois ma mémoire numérique m’aide mais me rappelle que <a href="/david/stream/2018/04/07/">la spirale</a> n’est peut-être pas compatible avec la vieillesse, oups&nbsp;😅. J’aime bien l’idée de la <a href="https://gilest.org/shoebox.html">boîte à chaussures</a>&nbsp;(<a href="/david/cache/2023/462022ad2f27ff57387e9d0f49e96bad/">cache</a>) aussi, avec la crainte que ce musée des <em>vaporwares</em> ne soit un peu trop&nbsp;déprimant.</p>
  326. <hr />
  327. <p>Mot du jour&nbsp;: <a href="https://fr.wikipedia.org/wiki/Eucatastrophe">Eucatastrophe</a> (j’ai arraché deux dents&nbsp;aujourd’hui).</p>
  328. <h2>
  329. <a href="/david/2023/02/28/" title="Lien permanent vers cet article">AlgoRSSithme</a> (2023-02-28)
  330. </h2>
  331. <details>
  332. <summary>Déplier pour lire le contenu de la publication</summary>
  333. <blockquote lang="en">
  334. <p>This is why RSS feeds are amazing: nobody can get into your feed or be prioritized in it unless you say&nbsp;so.</p>
  335. <p><cite><em><a href="https://notes.jim-nielsen.com/#2023-02-27T0915">Enshittification - Jim Nielsen’s Notes</a></em>&nbsp;(<a href="/david/cache/2023/941b67353ff151e5da55c691f6e9161b/">cache</a>)</cite></p>
  336. </blockquote>
  337. <p>L’usage fait qu’il n’y a pas d’algorithme derrière un flux RSS ou un agrégateur mais il pourrait en être&nbsp;autrement.</p>
  338. <p>Les auteur·ices choisissent de mettre les x derniers articles dans leur flux mais ce n’est en fait que la <em>dernière</em> entrée qui est pertinente (en prenant l’hypothèse que l’agrégateur rafraichit plus vite que le rythme de publication). Tout le reste pourrait être choisi selon un algorithme car concernerait les personnes qui n’ont pas encore d’articles dans leur&nbsp;cache.</p>
  339. <p>Je pourrais par exemple choisir d’avoir le dernier article ainsi qu’une dizaine d’articles soigneusement sélectionnés pour motiver les nouvelles personnes inscrites à conserver ce flux (au même titre que les messages épinglés sur un compte mastodon), d’autant qu’il est <a href="/david/log/">affiché chez moi</a> (pour <a href="/david/2021/06/03/">rappel</a>).</p>
  340. <p>Je pourrais aussi tous les mois faire sortir un ancien article que j’aime bien et qui apparaitrait probablement en dernier/très loin dans votre agrégateur mais si vous êtes en RSS Zéro (je suis sûr que c’est un truc), ça pourrait le rendre visible et vous donner envie d’aller y jeter un&nbsp;œil.</p>
  341. <p>De l’autre côté du flux, l’agrégateur pourrait faire de même et aller repêcher de vieux billets non lus, ne pas afficher tous les articles lors de l’ajout d’un nouveau flux, mettre certaines publications de sources plus populaires en avant, etc.</p>
  342. <p>Ce n’est pas le format qui empêche d’y mettre une logique de dévelopeur·euse (aussi appelé algorithme), mais les outils qui le génèrent et qui l’exploitent. C’est relativement étonnant que personne n’ait encore pris le temps de saccager&nbsp;ça.</p>
  343. <p>Oups…</p>
  344. <hr />
  345. <blockquote>
  346. <p>💜 L’idée derrière cela, c’est de pouvoir accéder à <mark>de la papeterie facile à imprimer</mark> et à photocopier, tout en profitant de belles illustrations. Pour l’instant, je pense partager mes propres illustrations ainsi qu’une liste de liens pour les ressources d’autres personnes. […] J’aimerais que cette boutique soit le début d’une réflexion commune sur le partage de l’art et&nbsp;l’artisanat.</p>
  347. <p><cite><em><a href="https://la-papeterie-libre.fr/">La Papeterie&nbsp;Libre</a></em></cite></p>
  348. </blockquote>
  349. <blockquote lang="en">
  350. <p>🤦 It seems ChatGPT is wrongly recommending us for “reverse phone number lookup” - ie the ability to determine the location of a mobile phone solely based on the number. <mark>This is not a service we provide.</mark> It is not a service we have ever provided, nor a service we have any plans to provide. Indeed, it is a not a service we are technically capable of&nbsp;providing.</p>
  351. <p><cite><em><a href="https://blog.opencagedata.com/post/dont-believe-chatgpt">Don’t believe ChatGPT - we do NOT offer a “phone lookup” service</a></em>&nbsp;(<a href="/david/cache/2023/0568befa90d2b39c0694d4c7ffc3cd73/">cache</a>)</cite></p>
  352. </blockquote>
  353. <blockquote lang="en">
  354. <p>👍 The best time to leave Github was before it was acquired by Microsoft. The second-best time is <mark>now.</mark> Sooner or later, you will be forced out of Github like we, oldies, were forced out of Sourceforge. Better leaving while you are free to do it on your own&nbsp;terms…</p>
  355. <p><cite><em><a href="https://ploum.net/2023-02-22-leaving-github.html">We need to talk about your Github addiction</a></em>&nbsp;(<a href="/david/cache/2023/afa0aae212698b71118868d36d50a747/">cache</a>)</cite></p>
  356. </blockquote>
  357. <blockquote lang="en">
  358. <p>💅 You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are safe to follow every&nbsp;time.</p>
  359. <p><cite><em><a href="https://anthonyhobday.com/sideprojects/saferules/">Visual design rules you can safely follow every time</a></em>&nbsp;(<a href="/david/cache/2023/61f52848924157701ed66c85d67f3536/">cache</a>)</cite></p>
  360. </blockquote>
  361. <blockquote>
  362. <p>🤗 Je fais tout ça sans la contrainte de maintenance, car je ne développe que des prototypes de logiciels. C’est <mark>une sorte d’exutoire</mark> pour se libérer l’esprit des projets qui me traînent dans la&nbsp;tête.</p>
  363. <p><cite><em><a href="https://marienfressinaud.fr/farandole-de-projets.html">Farandole de projets</a></em>&nbsp;(<a href="/david/cache/2023/392138accbdaee722a669834da5f1a8d/">cache</a>)</cite></p>
  364. </blockquote>
  365. <blockquote lang="en">
  366. <p>🧠 You could even think of this home stream as what in literature is called a “stream of consciousness”: <mark>a constant stream of the multitudinous thoughts and feelings which pass through the mind of a narrator.</mark> Your website is a way for you to share your stream of consciousness, that temporary and subjective and highly biased snippet of the universe, with everyone else, including your future self. In all its&nbsp;multitudes.</p>
  367. <p><cite><em><a href="https://matthiasott.com/notes/streams-of-consciousness">Streams of Consciousness</a></em>&nbsp;(<a href="/david/cache/2023/328b56a2ee2e291dabc8f63a0013cc7a/">cache</a>)</cite></p>
  368. </blockquote>
  369. </details>
  370. <h2>
  371. <a href="/david/2023/02/18/" title="Lien permanent vers cet article">Quiz</a> (2023-02-18)
  372. </h2>
  373. <details>
  374. <summary>Déplier pour lire le contenu de la publication</summary>
  375. <blockquote>
  376. <p>On aimerait pouvoir faire des&nbsp;quiz.</p>
  377. </blockquote>
  378. <p>Il y a 20&nbsp;ans, j’aurais commencé à modéliser cela dans une base de données relationnelles avec les bons index et&nbsp;tout.</p>
  379. <p>Il y a 15&nbsp;ans, j’aurais essayé de représenter cela avec des données liées et du RDF pour une réutilisation&nbsp;sémantique.</p>
  380. <p>Il y a 10&nbsp;ans, je me serais demandé si ça pouvait rentrer dans Redis ou MongoDB et à quel point ça passerait à&nbsp;l’échelle.</p>
  381. <p>Il y a 5&nbsp;ans, j’aurais imaginé une API pour pouvoir généraliser l’usage et décliner plusieurs services&nbsp;équivalents.</p>
  382. <p><strong>Et aujourd’hui&nbsp;alors&#8239;?</strong></p>
  383. <p>Je commence par me demander comment est-ce que les utilisateur·ices vont pouvoir saisir ces données et devenir&nbsp;autonomes.</p>
  384. <p>Je n’envisage pas qu’iels puissent saisir du HTML —&nbsp;qui plus est valide et accessible&nbsp;— pour concevoir ce quiz. Je me demande quelle serait la structure la plus logique pour déterminer les réponses possibles et mentionner la bonne. Il y a un enjeu de <em>feedback</em> immédiat lors de la rédaction, par exemple en <em>CommonMark</em> un peu étendu dans un <em>pad</em> ou un forge <em>git</em>. J’imagine une structure qui ressemble&nbsp;à&nbsp;:</p>
  385. <pre><code>Le consentement c’est :
  386. * [ ] Demander la permission
  387. * [x] S’assurer à tout moment que l’autre↩
  388. est à l’aise et désire ce qu’on lui fait
  389. * [ ] Peut se donner avec un peu de pression
  390. </code></pre>
  391. <p>C’est ensuite à moi de convertir cette structure plate, textuelle, relativement compréhensible en un formulaire web interactif. C’est le seul moment où la technique entre en jeux avec des dépendances aussi minimalistes que&nbsp;possible.</p>
  392. <p>Ce qui a changé en 20&nbsp;ans, c’est que j’ai pris conscience que la pérennité d’une donnée tient à l’autonomie que l’on peut donner aux personnes qui vont s’assurer de son évolution. La «&nbsp;bonne&nbsp;» modélisation est celle qui est explicite et non réservée à une élite de&nbsp;dévelopeur·euses.</p>
  393. <p>Entre l’<em>User eXperience</em> (UX) et la <em>Developer eXperience</em> (DX), il y aurait peut-être la <em>Maintenance eXperience</em> (MX)&#8239;? Et dans ce contexte, l’autonomie vis-à-vis des données est cruciale. Ce n’est peut-être pas techniquement très propre, c’est difficile à mettre en valeur sur un CV ou dans une conférence, c’est même aux antipodes de la mode&nbsp;actuelle.</p>
  394. <p>Mais c’est là où je positionne ma valeur aujourd’hui. De la cathédrale qu’il faut reconstruire tous les 2&nbsp;ans au refuge qui ne nécessite que quelques planches et clous en maintenance annuelle pour qu’une poignée de personnes y trouvent du réconfort. Et soient en capacité de participer à l’effort&nbsp;commun.</p>
  395. <hr />
  396. <p>Bandes-dessinées de la&nbsp;semaine&nbsp;:</p>
  397. <ul>
  398. <li><a href="https://editions-sarbacane.com/bd/rene-e-aux-bois-dormants">René.e aux bois dormants</a> de Elene&nbsp;Usdin.</li>
  399. <li><a href="https://ecosociete.org/livres/megantic-un-train-dans-la-nuit">Mégantic, un train dans la nuit</a> de Anne-Marie Saint-Cerny et Christian&nbsp;Quesnel.</li>
  400. </ul>
  401. <p>Je ne sais pas si c’est le fait de résider sur ces territoires mais les deux m’ont pas mal affecté. L’héritage de la colonisation en étant sur les lieux colonisés est encore plus difficile à&nbsp;porter.</p>
  402. <hr />
  403. <p>Film de la semaine&nbsp;: <a href="https://en.wikipedia.org/wiki/The_Menu_(2022_film)">The Menu</a> (essayez de ne pas vous&nbsp;divulgâcher…).</p>
  404. <hr />
  405. <blockquote lang="en">
  406. <p>💯 Always remember that although a subset of the JavaScript community can be very loud, they represent a paltry portion of the web as a whole. This means that when they say something like “Best practices don’t actually work”—what they mean is “Best practices don’t actually work for a small subset of less than 5&nbsp;percent of the&nbsp;web”.</p>
  407. <p><cite><em><a href="https://andy-bell.co.uk/the-extremely-loud-minority/">The (extremely) loud minority</a></em>&nbsp;(<a href="/david/cache/2023/78d79db0da7f60c48a02cfd088885085/">cache</a>)</cite></p>
  408. </blockquote>
  409. <blockquote lang="en">
  410. <p>🐦 Spinners are the dumbest progress&nbsp;bar.</p>
  411. <p><cite><em><a href="https://interconnected.org/home/2023/02/10/progress">A notification center for progress bars that sounds like birdsong</a></em>&nbsp;(<a href="/david/cache/2023/29dac969af1faa8ba0338a2e7e59ebbd/">cache</a>)</cite></p>
  412. </blockquote>
  413. </details>
  414. <h2>
  415. <a href="/david/2023/02/09/" title="Lien permanent vers cet article">Allumage</a> (2023-02-09)
  416. </h2>
  417. <details>
  418. <summary>Déplier pour lire le contenu de la publication</summary>
  419. <p>Démarrer un nouveau projet avec une nouvelle équipe est un sentiment qui m’est incroyable. J’ai passé mon année 2022&nbsp;à faire —&nbsp;entre autres&nbsp;— des petits produits pour Scopyleft et je ne réalise que maintenant à quel point ça me permet de démarrer plus rapidement aujourd’hui pour un site que l’on fait avec <a href="https://www.maiwann.net/">Maïtané</a> pour la&nbsp;Croix-Rouge.</p>
  420. <p>La structure est toujours un peu la même&nbsp;: des contenus dans du markdown, du déploiement continu de fichiers HTML statiques en utilisant l’intégration continue et l’hébergement de GitLab. Une URL de démonstration dès le premier <em>commit</em>. À partir de là, on peut rajouter des traductions, des images, une navigation particulière mais la base est l’affaire d’un copier-coller de quelques fichiers et d’une centaine de lignes de&nbsp;Python.</p>
  421. <p>Soigner l’allumage technique, c’est avoir plus de temps pour réfléchir à l’accessibilité des données et à l’autonomie des personnes qui vont maintenir le site, c’est permettre de s’adapter aux besoins du public sans être contraint par un cadre, c’est prendre le temps de s’intéresser au problème <em>métier</em> à résoudre. C’est prendre confiance dans de petits outils résilients et&nbsp;frugaux.</p>
  422. <p>Que mon eXpérience de Développeur (DX) s’en trouve être améliorée car j’aspire à cultiver de petits bonsaïs numériques n’est qu’un effet de&nbsp;bord.</p>
  423. <hr />
  424. <blockquote lang="en">
  425. <p>🦕 I have been using it from day one of this blog (né Year II before <abbr title="Loïc Le Meur, coucou Loïc , long time no see!">LLM</abbr>).</p>
  426. <p><cite><em><a href="https://www.padawan.info/en/2023/02/the-content-management-system-of-my-dreams-part-1-a-little-bit-of-history.html">The Content Management System of my Dreams (part 1) - A little bit of history</a></em>&nbsp;(<a href="/david/cache/2023/65169d7164c8bf5790a224d45a95adb7/">cache</a>)</cite></p>
  427. </blockquote>
  428. <blockquote lang="en">
  429. <p>🧱 Think very hard about that word. What exactly is <em>dynamic</em> on your home page? Are you speaking about that Top News thingy? How often do they change? <mark>Are you doing this to satisfy yourself</mark> (some content editors have the same proclivity than developers to throw a tantrum because their new content does not appear instantaneously on the site)? Is this a business requirement or a real need of your&nbsp;users?</p>
  430. <p><cite><em><a href="https://www.padawan.info/en/2023/02/the-content-management-system-of-my-dreams-part-2-the-trouble-with-dynamic-publishing.html">The Content Management System of my Dreams (part 2) - The trouble with dynamic publishing</a></em>&nbsp;(<a href="/david/cache/2023/f8b7c3246cf1d4e06c735ee163be32a0/">cache</a>)</cite></p>
  431. </blockquote>
  432. <blockquote lang="en">
  433. <p>🧭 Since <mark>every direction is technically “North”</mark> from here, we use a grid overlay, to bring some semblance of order to our surroundings. The prevailing winds here come from “Grid&nbsp;North”.</p>
  434. <p><cite><em><a href="https://brr.fyi/posts/south-pole-topography">South Pole Topography</a></em>&nbsp;(<a href="/david/cache/2023/f9e282fb545b5c1f50dfa1c0d98c50e3/">cache</a>)</cite></p>
  435. </blockquote>
  436. </details>
  437. <h2>
  438. <a href="/david/2023/02/03/" title="Lien permanent vers cet article">Chargement</a> (2023-02-03)
  439. </h2>
  440. <details>
  441. <summary>Déplier pour lire le contenu de la publication</summary>
  442. <blockquote lang="en">
  443. <p>If you are familiar with how the web is built, what happened is pretty obvious: A website that over-relies on JavaScript to power its experience had its logic collide with one or more other errant pieces of logic that it summons. This created a&nbsp;deadlock.</p>
  444. <p>If you do not make digital experiences for a living, what happened is not obvious at all. All you see is <mark>a tiny fake loading spinner that never&nbsp;stops.</mark></p>
  445. <p><cite><em><a href="https://ericwbailey.website/published/modern-health-frameworks-performance-and-harm/">Modern Health, frameworks, performance, and harm</a></em>&nbsp;(<a href="/david/cache/2023/7469f181ef4b031f59ae69356af16e28/">cache</a>)</cite></p>
  446. </blockquote>
  447. <p>Je suis le témoin d’un web cassé au quotidien. J’utilise <a href="https://addons.mozilla.org/en-US/firefox/addon/umatrix/">uMatrix</a> en bloquant toutes les requêtes qui ne sont pas sur le domaine consulté. Il est assez triste de constater le manque de résilience de la plupart des&nbsp;sites.</p>
  448. <p>Parfois, la consultation d’un article de blog n’est pas possible à cause de cela. Le contenu n’est même pas dans le HTML… ou une erreur JavaScript en masque&nbsp;l’affichage.</p>
  449. <p>La fragilité est devenue la norme car plus personne ne sait se servir des fondations du&nbsp;Web.</p>
  450. <hr />
  451. <p>Bande son du moment&nbsp;: <a href="https://www.youtube-nocookie.com/embed/Lm_2LCDmpXU">SEVDALIZA - DARKEST&nbsp;HOUR</a></p>
  452. <hr />
  453. <blockquote lang="en">
  454. <p>🏎️ I guess what I’m winding up to say here is <mark>developer experience really isn’t important</mark>—especially when frameworks haven’t even got the absolute baseline experience anywhere near where it needs to be to service a world wide web. A world wide web that’s accessed with slow, expensive connections and cheap, underperforming hardware. How about taking a bit of “DX” on the chin to focus instead on “why are we using this framework that potentially excludes the majority of&nbsp;users?”.</p>
  455. <p><cite><em><a href="https://andy-bell.co.uk/speed-for-who/">Speed for who? | Andy Bell</a></em>&nbsp;(<a href="/david/cache/2023/f7957bdde7af740e322756668784d355/">cache</a>)</cite></p>
  456. </blockquote>
  457. <blockquote>
  458. <p>🤗 Préciser notre mission, c’est rediscuter ensemble l’ordonnanceur qu’on ramènera tou⋅tes à la maison&nbsp;: quelles priorités, quelles actions, et comment s’insèrent-elles dans la tapisserie que nous brodons&nbsp;ensemble.</p>
  459. <p><cite><em><a href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs">La mission de Deuxfleurs</a></em>&nbsp;(<a href="/david/cache/2023/a0ccec7acb932e4155960c1c88d65eff/">cache</a>)</cite></p>
  460. </blockquote>
  461. <blockquote lang="en">
  462. <p>🙇 Thinking that people are stupid is not thinking. <mark>Understanding them&nbsp;is.</mark></p>
  463. <p>I never want to debate, but if I had to, I would hope to lose. I don’t want to convince anyone of my existing perspective. I would rather be convinced of theirs. It’s more interesting to assume that they are&nbsp;right.</p>
  464. <p><cite><em><a href="https://sive.rs/led">I want to lose every debate.</a></em>&nbsp;(<a href="/david/cache/2023/f85d5742bb188e4b25d627b78413fbac/">cache</a>)</cite></p>
  465. </blockquote>
  466. </details>
  467. <h2>
  468. <a href="/david/2023/01/30/" title="Lien permanent vers cet article">Lecture</a> (2023-01-30)
  469. </h2>
  470. <details>
  471. <summary>Déplier pour lire le contenu de la publication</summary>
  472. <blockquote lang="en">
  473. <p>Reading is a technology that works. And it works in part by immersing the reader in the text itself. The lack of video / music / pop-up ads / crypto tokens / mini-games aren’t a problem to be solve. <mark>The lack of those thing is the feature.</mark> Books are engaging precisely <em>because</em> they lack those&nbsp;things.</p>
  474. <p><cite><em><a href="https://countercraft.substack.com/p/maybe-the-book-doesnt-need-to-disrupted">Maybe the Book Doesn’t Need to Be “Disrupted” in the First Place?</a></em>&nbsp;(<a href="/david/cache/2023/04ad9e0f254b2d6111aef95102654f7d/">cache</a>)</cite></p>
  475. </blockquote>
  476. <p>Pour avoir modestement participé à la publication de certains ouvrages sur les <a href="http://ateliers.sens-public.org/">Ateliers de Sens-Public</a> ou les <a href="http://www.parcoursnumeriques-pum.ca/">Parcours numériques</a> des Presses de l’Université de Montréal, cette publication me fait pas mal cogiter. Je me raccroche au fait qu’il y ait différents publics pour différentes lectures et pour différents types d’ouvrages&nbsp;aussi.</p>
  477. <p>Ironiquement, je ne lis que des livres sur papier mais je lis tellement d’articles sur mon écran que la limite est floue et qu’il faudrait commencer par définir ce que l’on entend par «&nbsp;lecture&nbsp;» et&nbsp;«&nbsp;livre&nbsp;».</p>
  478. <p>Ce qu’il me manque avec un support papier, c’est de pouvoir facilement consigner des passages (par exemple pour usage/recopie ici) mais depuis que la reconnaissance de texte est automatisée dans macOS Photos ça va beaucoup plus vite de prendre la page en photo pour y revenir plus tard et ça n’interrompt pas tant mon flux de&nbsp;lecture.</p>
  479. <p>Quelques questions pour toi&nbsp;lecteur·ice&nbsp;:</p>
  480. <ul>
  481. <li>Est-ce que tu lis ce blog sur une&nbsp;liseuse&#8239;?</li>
  482. <li>Est-ce qu’un format particulier&nbsp;t’aiderait&#8239;?</li>
  483. <li>Est-ce qu’un recueil annuel/périodique serait&nbsp;pertinent&#8239;?</li>
  484. <li>Est-ce que le format ePub permettrait d’avoir des liens vers les articles en cache tout en ayant une navigation fluide&#8239;? (Est-ce&nbsp;nécessaire&#8239;?)</li>
  485. </ul>
  486. <hr />
  487. <blockquote>
  488. <p>🧡 Information importante&nbsp;: ce prototype ne restera en ligne qu’au maximum pendant&nbsp;2&nbsp;mois.</p>
  489. <p>Il est extrêmement court.<br />
  490. Il est extrêmement simple.<br />
  491. Il est extrêmement rudimentaire.<br />
  492. Mais il est terminé, et c’est le plus&nbsp;important.</p>
  493. <p><cite><em><a href="https://marienfressinaud.fr/exploratrices.html">Exploratrices, un prototype de jeu vidéo</a></em>&nbsp;(<a href="/david/cache/2023/3cffe9d9946878273e050e9d35d9bf9e/">cache</a>)</cite></p>
  494. </blockquote>
  495. </details>
  496. <h2>
  497. <a href="/david/2023/01/26/" title="Lien permanent vers cet article">Décentralisation</a> (2023-01-26)
  498. </h2>
  499. <details>
  500. <summary>Déplier pour lire le contenu de la publication</summary>
  501. <p>Je suis allé voir <a href="https://equalit.ie/">eQualitie</a> hier, ça m’a fait rechercher toutes les initiatives que je connaissais de «&nbsp;suites&nbsp;»&nbsp;décentralisées&nbsp;:</p>
  502. <ul>
  503. <li><a href="https://labriqueinter.net/">LaBriqueInter.net</a></li>
  504. <li><a href="https://yunohost.org/">YunoHost</a></li>
  505. <li><a href="https://www.kiwix.org/">Kiwix</a></li>
  506. <li><a href="https://www.bibliosansfrontieres.org/ideas-box/">IDEAS&nbsp;BOX</a></li>
  507. <li><a href="https://www.bibliosansfrontieres.org/nos-actions/des-outils/ideas-cube/">IDEAS&nbsp;CUBE</a></li>
  508. <li><a href="https://coolify.io/">Coolify</a></li>
  509. <li><a href="https://sandstorm.io/">Sandstorm</a></li>
  510. <li><a href="https://nextcloud.com/">Nextcloud</a></li>
  511. <li><a href="https://www.frama.space/abc/fr/">Frama.space</a></li>
  512. <li><a href="https://www.cloudron.io/">Cloudron</a> (merci&nbsp;Sébastien&#8239;!)</li>
  513. <li><a href="https://freedombox.org/">FreedomBox</a> (merci&nbsp;Alexandre&#8239;!)</li>
  514. <li><a href="https://indiehosters.net/liiibre/">Liiibre</a> (merci&nbsp;Maïa&#8239;!)</li>
  515. <li><a href="https://zourit.net/">Zourit.net</a> (merci&nbsp;Clailou&#8239;!)</li>
  516. <li><a href="https://caprover.com/">CapRover</a> (plus technique, merci&nbsp;Pierre&#8239;!)</li>
  517. <li><a href="https://hostux.network/">Hostux</a> (merci&nbsp;Xav’&#8239;!)</li>
  518. </ul>
  519. <p>Si vous en avez d’autres, j’accepte les&nbsp;suggestions&#8239;!</p>
  520. <p>Je prends cette liste comme une réinvention récurrente, itérative et diversifiée. On pourrait le voir comme une dispersion des efforts, je l’envisage comme un b(r)ouillon d’idées nécessaire à une exploration saine. <span lang=en>“There Are Plenty of AlternativeS”</span> comme ils&nbsp;disent.</p>
  521. <hr />
  522. <blockquote lang="en">
  523. <p>🌳 That is why owning a domain (and publishing your content there) is like planting a tree: it’s value that starts small and grows. The best time to own a domain and publish your content there was 20&nbsp;years ago. The second best time is&nbsp;today.</p>
  524. <p><cite><em><a href="https://blog.jim-nielsen.com/2023/best-time-to-own-a-domain/">The Best Time to Own a Domain Was 20&nbsp;Years Ago; The Second Best Time Is Today</a></em>&nbsp;(<a href="/david/cache/2023/576a604fce44b337a38425c021b3b0b3/">cache</a>)</cite></p>
  525. </blockquote>
  526. <blockquote>
  527. <p>🤔 La pensée n’est peut-être qu’une bizarrerie de la nature offerte à une espèce, comme elle fait ces bois de ruminants rares ou disparus que l’on voit dans les muséums&nbsp;: armes ou parures si curieusement étendues, bouclées ou spiralées, ou si rameuses qu’elles sont plus nuisibles encore qu’inutiles à l’animal qu’elles&nbsp;couronnent.</p>
  528. <p>Pourquoi pas&#8239;? Pourquoi non&#8239;? Notre tête est chargée de questions et d’idées qui se prennent dans l’enchevêtrement de la forêt des faits, et nous retient embarrassés, orgueilleux de l’être, condamnés à bramer des poèmes et des hypothèses, –&nbsp;fiers et&nbsp;désespérés.</p>
  529. <p><cite><em>Mauvaises pensées et autres</em>, Paul&nbsp;Valéry</cite></p>
  530. </blockquote>
  531. <blockquote>
  532. <p>🥲 <em>[En attendant chez l'orthodontiste]</em><br />
  533. — Papa, tu as un téléphone, tu n’as pas besoin de t’ennuyer avec moi par&nbsp;compassion.</p>
  534. </blockquote>
  535. </details>
  536. <h2>
  537. <a href="/david/2023/01/06/" title="Lien permanent vers cet article">Toile</a> (2023-01-06)
  538. </h2>
  539. <details>
  540. <summary>Déplier pour lire le contenu de la publication</summary>
  541. <blockquote lang="en">
  542. <p>I realised when I think of something it doesn’t exist as a single entity. A thought is linked to a million other thoughts, to the past and to the future. I remember too much, relate too much, <mark>connect too much,</mark> and I project too much. I thought this was “normal” until I met my partner. She doesn’t think much about the future or the past – she’s a much happier person compared to&nbsp;me.</p>
  543. <p><cite><em><a href="https://winnielim.org/journal/my-mind-is-full-of-webs/">my mind is full of webs</a></em>&nbsp;(<a href="/david/cache/2023/e1a26da20c603d214d0f844d5836569e/">cache</a>)</cite></p>
  544. </blockquote>
  545. <p>Il y a tellement de choses qui me font réagir (ré-penser plutôt&#8239;?) dans les écrits de Winnie Lim. Elle joue toujours avec la corde sensible qui crée un lien à la fois fragile et pourtant si résistant, je me l’imagine comme un fil de toile d’araignée entre nous. Difficile à décrire et pas forcément réciproque. De temps en temps, je m’aventure dessus et je vais me désaltérer de quelques gouttes de rosée. Je suis reconnaissant de ces partages qui viennent alimenter mes propres&nbsp;réflexions.</p>
  546. <blockquote lang="en">
  547. <p>But I do not want my webs to be truncated or forgotten. <mark>I do not wish to forget,</mark> or I wouldn’t have become obsessed with archival. I like noticing and preserving the connections. They become opportunities for learning and becoming, if I manage to detach enough from&nbsp;them.</p>
  548. <p><cite><em>Ibid.</em></cite></p>
  549. </blockquote>
  550. <figure>
  551. <a href="/static/david/2023/2023-01-06-toile-gouttes.jpg"
  552. title="Cliquer pour une version haute résolution">
  553. <img
  554. src="/static/david/2023/2023-01-06-toile-gouttes.jpg"
  555. width="1512" height="2016"
  556. srcset="/static/david/2023/2023-01-06-toile-gouttes.jpg 1512w, /static/david/2023/2023-01-06-toile-gouttes_660x440.jpg 660w, /static/david/2023/2023-01-06-toile-gouttes_990x660.jpg 990w, /static/david/2023/2023-01-06-toile-gouttes_1320x880.jpg 1320w"
  557. sizes="min(100vw, calc(100vh * 1512 / 2016))"
  558. loading="lazy"
  559. decoding="async"
  560. alt="Une toile d’araignée avec des gouttes de rosée et en arrière plan, flou, des immeubles de l’autre côté de la Rivière des Prairies">
  561. </a>
  562. <figcaption>Parc Louis-Hébert, Montréal, 2 novembre&nbsp;2022.</figcaption>
  563. </figure>
  564. <details>
  565. <summary>Et pendant ce temps là de l’autre côté de la rue&nbsp;:</summary>
  566. <figure>
  567. <a href="/static/david/2023/2023-01-06-toile-soleil.jpg"
  568. title="Cliquer pour une version haute résolution">
  569. <img
  570. src="/static/david/2023/2023-01-06-toile-soleil.jpg"
  571. width="2016" height="1512"
  572. srcset="/static/david/2023/2023-01-06-toile-soleil.jpg 2016w, /static/david/2023/2023-01-06-toile-soleil_660x440.jpg 660w, /static/david/2023/2023-01-06-toile-soleil_990x660.jpg 990w, /static/david/2023/2023-01-06-toile-soleil_1320x880.jpg 1320w"
  573. sizes="min(100vw, calc(100vh * 2016 / 1512))"
  574. loading="lazy"
  575. decoding="async"
  576. alt="Un parc pour enfant à contre-jour avec le soleil qui se lève dans le brouillard et qui forme une jolie étoile">
  577. </a>
  578. <figcaption>Une toile de soleil&nbsp;!</figcaption>
  579. </figure>
  580. </details>
  581. </details>
  582. </main>
  583. <hr>
  584. <footer>
  585. <p>
  586. <nobr>
  587. <a href="/david/" title="Aller à l’accueil">
  588. <svg class="icon icon-home">
  589. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  590. </svg>
  591. Accueil</a>
  592. </nobr>
  593. <nobr>
  594. <a href="/david/log/" title="Accès au flux RSS">
  595. <svg class="icon icon-rss2">
  596. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  597. </svg>
  598. Suivre</a>
  599. </nobr>
  600. <nobr>
  601. <a href="http://larlet.com"
  602. title="Go to my English profile"
  603. data-instant>
  604. <svg class="icon icon-user-tie">
  605. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  606. </svg>
  607. Pro</a>
  608. </nobr>
  609. <nobr>
  610. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  611. <svg class="icon icon-mail">
  612. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  613. </svg>
  614. Email</a>
  615. </nobr>
  616. <nobr>
  617. <abbr class="nowrap"
  618. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  619. <svg class="icon icon-hammer2">
  620. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  621. </svg>
  622. Légal</abbr>
  623. </nobr>
  624. </p>
  625. <template id="theme-selector">
  626. <form>
  627. <fieldset>
  628. <legend>
  629. <svg class="icon icon-brightness-contrast">
  630. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  631. </svg>
  632. Thème
  633. </legend>
  634. <label>
  635. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  636. Auto
  637. </label>
  638. <label>
  639. <input type="radio" value="dark" name="chosen-color-scheme">
  640. Foncé
  641. </label>
  642. <label>
  643. <input type="radio" value="light" name="chosen-color-scheme">
  644. Clair
  645. </label>
  646. </fieldset>
  647. </form>
  648. </template>
  649. </footer>
  650. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  651. <script>
  652. function loadThemeForm(templateName) {
  653. const themeSelectorTemplate = document.querySelector(templateName)
  654. const form = themeSelectorTemplate.content.firstElementChild
  655. themeSelectorTemplate.replaceWith(form)
  656. form.addEventListener('change', (e) => {
  657. const chosenColorScheme = e.target.value
  658. localStorage.setItem('theme', chosenColorScheme)
  659. toggleTheme(chosenColorScheme)
  660. })
  661. const selectedTheme = localStorage.getItem('theme')
  662. if (selectedTheme && selectedTheme !== 'undefined') {
  663. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  664. }
  665. }
  666. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  667. window.addEventListener('load', () => {
  668. let hasDarkRules = false
  669. for (const styleSheet of Array.from(document.styleSheets)) {
  670. let mediaRules = []
  671. for (const cssRule of styleSheet.cssRules) {
  672. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  673. continue
  674. }
  675. // WARNING: Safari does not have/supports `conditionText`.
  676. if (cssRule.conditionText) {
  677. if (cssRule.conditionText !== prefersColorSchemeDark) {
  678. continue
  679. }
  680. } else {
  681. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  682. continue
  683. }
  684. }
  685. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  686. }
  687. // WARNING: do not try to insert a Rule to a styleSheet you are
  688. // currently iterating on, otherwise the browser will be stuck
  689. // in a infinite loop…
  690. for (const mediaRule of mediaRules) {
  691. styleSheet.insertRule(mediaRule.cssText)
  692. hasDarkRules = true
  693. }
  694. }
  695. if (hasDarkRules) {
  696. loadThemeForm('#theme-selector')
  697. }
  698. })
  699. </script>
  700. </body>
  701. </html>