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 34KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  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. Étiquette #processus
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #processus">
  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_2024-01-19.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_a_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/century_supra_ot_b_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/century_supra_ot_b_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/century_supra_ot_b_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 data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#processus</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search">Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/01/24/" title="Lien permanent vers cet article">Taille</a> <time datetime="2024-01-24">24 janvier 2024</time>
  132. </h2>
  133. <p>On me demande quelle est la taille souhaitable pour <a data-link-domain="scopyleft.fr" href="http://scopyleft.fr/">Scopyleft</a>.</p>
  134. <p>Il y a plusieurs réponses / contraintes à&nbsp;cela&nbsp;:</p>
  135. <ul>
  136. <li>il faudrait que tout le monde puisse être visible dans notre outil de visio (Whereby à ce&nbsp;jour)&#8239;;</li>
  137. <li>il faudrait que chacun·e ait un temps de parole suffisant sur une réunion d’une heure (aujourd’hui, ce serait&nbsp;7&#8239;min&nbsp;30)&#8239;;</li>
  138. <li>il faudrait pouvoir avoir des interactions en binôme avec chaque personne sur un rythme&nbsp;hebdomadaire.</li>
  139. </ul>
  140. <p>Et surtout, nous n’avons pas de volonté de croître plus que ça. Lorsqu’on veut faire des choses qui dépassent nos capacités, il y a les coopératives&nbsp;amies.</p>
  141. <a href="#hr-46" title="Lien vers cette section de la page"><hr id="hr-46" /></a>
  142. <blockquote lang="en">
  143. <p>Further, if we have learned anything in the last 3&nbsp;years as an industry, it should be to strive for building small, highly efficient teams and avoiding bloated, overstaffed organizations at all costs. Larger teams move slower, create more incidental complexity, and are much more susceptible to the layoffs we’ve all been suffering through. <mark>Engineering leaders would be well served to focus on hiring smaller teams</mark> and providing them with sufficient time and support to create simple solutions that generate business&nbsp;value.</p>
  144. <p><cite><em><a data-link-domain="blog.testdouble.com" href="https://blog.testdouble.com/posts/2024-01-24-plea-for-lean/">Echoing Wirth’s plea for lean software</a> <a href="/david/cache/2024/82b88d48d8043d79425ce8afd8dff42e/" title="Copie locale au 2024-01-24">[archive]</a></em></cite></p>
  145. </blockquote>
  146. <p>Tout est&nbsp;dit.</p>
  147. <a href="#hr-47" title="Lien vers cette section de la page"><hr id="hr-47" /></a>
  148. <blockquote>
  149. <p>La nuit est rassurante<br />
  150. tout est perdu<br />
  151. plus besoin de chercher<br />
  152. nos morceaux éparpillés<br />
  153. nous voilà réunis<br />
  154. par nos&nbsp;obscurités</p>
  155. <p><cite><em><a data-link-domain="etc-iste.blogspot.com" href="http://etc-iste.blogspot.com/2024/01/reunuit.html">Réunuit</a></em></cite></p>
  156. </blockquote>
  157. <nav>
  158. <p>
  159. <a href="/david/2024/communaute/"
  160. title="Liste de tous les articles 2024 associés à cette étiquette"
  161. rel="tag">#communauté</a>
  162. <a href="/david/2024/equipe/"
  163. title="Liste de tous les articles 2024 associés à cette étiquette"
  164. rel="tag">#équipe</a>
  165. <a href="/david/2024/processus/"
  166. title="Liste de tous les articles 2024 associés à cette étiquette"
  167. rel="tag">#processus</a>
  168. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  169. </p>
  170. </nav>
  171. <h2>
  172. <a href="/david/2024/01/23/" title="Lien permanent vers cet article">Thèse</a> <time datetime="2024-01-23">23 janvier 2024</time>
  173. </h2>
  174. <blockquote>
  175. <p>Cette thèse porte sur les processus d’édition en considérant qu’ils sont constitutifs de la production du sens et qu’ils reflètent des visions du monde plurielles. Nous considérons le phénomène de fabrique d’édition comme un acte éditorial qui comprend autant la formalisation d’un texte <mark>que la constitution des outils permettant ce travail.</mark> Les dimensions techniques de l’édition sont ainsi imbriquées, telles que la construction de procédés de fabrication et de production de formes, d’objets et d’artefacts que sont les livres, ou telles que des opérations sur le texte comme l’architecture des contenus, la structuration sémantique et la composition&nbsp;typographique.</p>
  176. <p><cite><em><a data-link-domain="these.quaternum.net" href="https://these.quaternum.net/">Fabriquer des éditions
  177. Éditer des fabriques - Reconfiguration des processus techniques éditoriaux et nouveaux modèles épistémologiques</a></em>, Antoine&nbsp;Fauchié</cite></p>
  178. </blockquote>
  179. <p>J’assiste en direct à une soutenance de thèse pour la première fois de ma vie. Il s’agit d’un exercice moins facile que ce que je m’imaginais mais pas toutes les soutenances ne se font dans un tel contexte si j’ai bien réussi à lire entre les lignes. En tout cas, j’étais impressionné par la pertinence des réponses d’Antoine à chaud et sa faculté à recentrer les&nbsp;discussions.</p>
  180. <p>Les questions que j’aurais aimé&nbsp;poser&nbsp;:</p>
  181. <ol>
  182. <li>Comment transformer ces fabriques de logiciels <em>open-source</em> en communs numériques impliquant une gouvernance partagée&#8239;? Comment sont impliquées les différentes parties&nbsp;prenantes&#8239;?</li>
  183. <li>Quelle est la littéracie numérique nécessaire pour devenir auteur·ice aujourd’hui&#8239;? Quelle est l’in·accessibilité de ces fabriques sous cet angle&nbsp;là&#8239;?</li>
  184. <li>Le rôle de l’éditeur·ice devient-il également celui d’un·e accompagnateur·ice technique&#8239;? Quelle part pour l’éthique dans ce choix&nbsp;d’intermédiaire&#8239;?</li>
  185. </ol>
  186. <p>Niveau technique, dommage qu’il ne soit pas possible de faire référence à des passages particuliers vu qu’ils sont déjà numérotés dans la version HTML (mais en&nbsp;CSS).</p>
  187. <p><mark>@nnotation(contexte)</mark>&nbsp;: J’ai <a href="/david/2023/12/08/">participé au développement</a> d’une partie des outils présentés dans la thèse et on se connait depuis un moment avec&nbsp;Antoine.</p>
  188. <a href="#hr-45" title="Lien vers cette section de la page"><hr id="hr-45" /></a>
  189. <blockquote>
  190. <p>La sociologie parle de «&nbsp;dépossession économique&nbsp;» et de «&nbsp;dépossession culturelle&nbsp;» pour nommer la manière dont la société limite les capacités d’accès à certaines ressources et les expériences qu’elles rendent possibles. Ne pourrait-on pas suggérer qu’il y a aussi, à côté de ces deux phénomènes, ce que l’on pourrait désigner comme des mécanismes de dépossession existentielle&#8239;? Subir la forme-de-vie qui s’empare de nous et nous fait être ce que nous sommes, c’est subir sa vie et subir certains modes d’existence alors que d’autres auraient pu beaucoup mieux nous convenir et nous rendre plus heureux. C’est même, en un sens, se faire voler son existence par la société et les autres — et peut-être même par soi-même, par une certaine version de&nbsp;soi-même.</p>
  191. <p><mark>Nous ne devons jamais, comme dit Adorno, confondre ce que nous sommes et ce que la société a fait de nous.</mark> Nous ne sommes pas de toute éternité ce que nous avons été amenés à devenir. Il n’y a donc pas de projet qui vise à mettre en place une analytique oppositionnelle de l’ordre social et de notre inscription à l’intérieur de celui-ci qui pourrait faire l’économie d’une investigation de l’existence — d’une interrogation sur les formes de la vie et le tissu relationnel qui nous&nbsp;constitue.</p>
  192. <p><cite><em>Une aspiration au dehors</em>, Geoffroy de&nbsp;Lagasnerie</cite></p>
  193. </blockquote>
  194. <p>D’une certaine manière, je vis une <em>dépossession existentielle</em> choisie en assistant à cet exercice après avoir bifurqué d’une carrière&nbsp;universitaire.</p>
  195. <p>Merci Antoine pour&nbsp;l’invitation.</p>
  196. <nav>
  197. <p>
  198. <a href="/david/2024/commun/"
  199. title="Liste de tous les articles 2024 associés à cette étiquette"
  200. rel="tag">#commun</a>
  201. <a href="/david/2024/experience/"
  202. title="Liste de tous les articles 2024 associés à cette étiquette"
  203. rel="tag">#expérience</a>
  204. <a href="/david/2024/processus/"
  205. title="Liste de tous les articles 2024 associés à cette étiquette"
  206. rel="tag">#processus</a>
  207. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  208. </p>
  209. </nav>
  210. <h2>
  211. <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
  212. </h2>
  213. <blockquote>
  214. <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
  215. <p>J’écris de deux&nbsp;façons.</p>
  216. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/11/pourquoi">je ne sais pas pourquoi</a> <a href="/david/cache/2024/87c468a4eddabe5d2c28e902d7f17504/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  217. </blockquote>
  218. <p>Karl nous parle de ses moments / lieux d’écriture et de lecture. Je me suis souvent posé cette question et je reconnais des <abbr title="Où Lire, Où Écrire.">oloés</abbr> communs (une <a data-link-domain="tw5.immateriel.fr" href="https://tw5.immateriel.fr/wiki/immateriel/b/YXGEDFB">définition par ici</a> <a href="/david/cache/2024/89dbef9daef24f311b6401cef62f5855/" title="Copie locale au 2024-01-11">[archive]</a>). Mes moments et lieux sont beaucoup plus traditionnels, c’est principalement le soir et dans mon bureau-chambre. Mais il n’y a pas de règle stricte pour autant. Parfois, l’envie d’écrire va être trop forte lors d’une lecture en cours de journée, d’autres fois je vais me réveiller tôt et commencer à écrire dans ma tête depuis mon lit ou sous la douche. Une idée peut arriver et/ou s’étirer en faisant du sport ou dans des contextes&nbsp;routiniers.</p>
  219. <p>Et puis il y a l’écriture qui appelle une autre écriture, ce moment de <a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2023/blogging-and-compositing/">compost</a> <a href="/david/cache/2024/5030196507bcf3e06162e9eaed40abbe/" title="Copie locale au 2024-01-11">[archive]</a> où l’on sent qu’il y avait une deuxième vie possible à cette réflexion. Un autre <a href="/david/stream/2018/04/07/">tour de spirale</a>.</p>
  220. <blockquote lang="en">
  221. <p><strong>marketing feels like a layer of veneer, full of shiny promises in order to reel you in, where the goal is to collect you — as a part of an&nbsp;“audience.”</strong></p>
  222. <p>but I think, in this race to “build an audience,” somewhere in the process, something is missing, left behind — perhaps, a sense of humanity, or individual complexity, or truth, or&nbsp;intimacy.</p>
  223. <p>I don’t want to feel like I’m just an email address, an IP address, or a potential “lead.” I want to feel fully seen. human.</p>
  224. <p>[…] instead of “building an audience,” build a world. <mark>build a digital garden-ecosystem, that exists</mark> — first and primarily — <em>for itself</em>. a world that doesn’t need likes, traffic, subscribers, or clicks — in order to validate its&nbsp;existence.</p>
  225. <p><cite><em><a data-link-domain="keningzhu.com" href="https://keningzhu.com/journal/build-a-world-not-an-audience">build a world, not an audience</a> <a href="/david/cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  226. </blockquote>
  227. <a href="#hr-26" title="Lien vers cette section de la page"><hr id="hr-26" /></a>
  228. <blockquote lang="en">
  229. <p>These are all very interesting questions but for me, the more pressing question is a slightly different one: which <em>you</em> is your personal site representing? We often don’t pay too much attention to this but <mark>we all have different ways of being&nbsp;ourselves.</mark></p>
  230. <p>So which one of these should my site represent? Should my site be the personal site of the Manu freelance web developer, with his interests in digital typography, minimal design, and simple websites? Or should represent the slightly competitive on the basketball court Manu, who doesn’t really care all that much about winning but is concerned about having fun? Or maybe it should represent Manu the romantic partner, with all his worry about the practical aspects of life but also full of affection for his partner? The list goes on and&nbsp;on.</p>
  231. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/the-personality-of-a-personal-website">The personality of a personal website</a> <a href="/david/cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/" title="Copie locale au 2024-01-11">[archive]</a></em></cite></p>
  232. </blockquote>
  233. <p>Je m’interroge souvent sur ce que j’essaye de cacher ici. Ce que cela raconte de ma personnalité, si l’image retournée est <a data-link-domain="thom4.net" href="https://thom4.net/2023/02/01/carnets/">vraiment fidèle</a> <a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" title="Copie locale au 2024-01-11">[archive]</a> après tout. L’écriture en ligne reste une forme d’expression qui s’attend au regard des autres. Si j’entretiens un journal <em>extime</em> depuis tant d’années c’est bien qu’il y a un enjeu à ce niveau&nbsp;là.</p>
  234. <a href="#hr-27" title="Lien vers cette section de la page"><hr id="hr-27" /></a>
  235. <blockquote lang="en">
  236. <p>We shape our structures and afterward our structures shape us, but the <em>we</em> of the first clause and the <em>us</em> of the second <mark>are not the&nbsp;same.</mark></p>
  237. <p><cite><a data-link-domain="erinkissane.com" href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow">Tomorrow &amp; Tomorrow &amp; Tomorrow</a> <a href="/david/cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/" title="Copie locale au 2024-01-11">[archive]</a></cite></p>
  238. </blockquote>
  239. <p>En rebond de la <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/">découverte d’Antoine</a> <a href="/david/cache/2024/34fec23081019abd741e0578b050c40e/" title="Copie locale au 2024-01-11">[archive]</a>. Une autre façon d’être&nbsp;dé·formé.</p>
  240. <a href="#hr-28" title="Lien vers cette section de la page"><hr id="hr-28" /></a>
  241. <p>Deux outils autour de la transformation de&nbsp;vidéos&nbsp;:</p>
  242. <ul>
  243. <li><a data-link-domain="ybouane.com" href="https://ybouane.com/ffmpeg-ui">FFMPEG&nbsp;UI</a></li>
  244. <li><a data-link-domain="mifi.no" href="https://mifi.no/losslesscut/">LosslessCut</a></li>
  245. </ul>
  246. <nav>
  247. <p>
  248. <a href="/david/2024/ecriture/"
  249. title="Liste de tous les articles 2024 associés à cette étiquette"
  250. rel="tag">#écriture</a>
  251. <a href="/david/2024/processus/"
  252. title="Liste de tous les articles 2024 associés à cette étiquette"
  253. rel="tag">#processus</a>
  254. <a href="/david/2024/psychologie/"
  255. title="Liste de tous les articles 2024 associés à cette étiquette"
  256. rel="tag">#psychologie</a>
  257. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  258. </p>
  259. </nav>
  260. <h2>
  261. <a href="/david/2024/01/08/" title="Lien permanent vers cet article">Liens</a> <time datetime="2024-01-08">8 janvier 2024</time>
  262. </h2>
  263. <p>Je décide de tester d’ajouter le domaine du lien après la lien, j’ai souvent besoin de cette information avant de cliquer sur un lien. Pour cela je charge le domaine en Python grâce à la flexibilité de <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/">mistune</a> et je m’en sers ensuite en CSS pour l’afficher&nbsp;dynamiquement&nbsp;:</p>
  264. <pre><code>a[data-link-domain]::after {
  265. content: &quot; [&quot; attr(data-link-domain) &quot;]&quot;;
  266. font-size: smaller;
  267. color: var(--link-color-domain);
  268. }
  269. </code></pre>
  270. <p>Je fais aussi des tests de soulignement avec un gradient qui irait de la couleur du lien principal à celle du&nbsp;domaine&nbsp;:</p>
  271. <pre><code>a {
  272. text-decoration-skip-ink: auto;
  273. text-decoration-thickness: calc(var(--fluid-0) / 10);
  274. position: relative;
  275. }
  276. a::before {
  277. content: '';
  278. width: 100%;
  279. position: absolute;
  280. left: 0;
  281. bottom: -1px;
  282. height: calc(var(--fluid-0) / 10);
  283. background: linear-gradient(
  284. to right,
  285. var(--link-color),
  286. var(--link-color-domain)
  287. );
  288. }
  289. </code></pre>
  290. <p>Mais au final je jette car je perds la partie <code>skip-ink</code> que je trouve chouette comme évolution de rendu possible. Toujours cet équilibre complexité / expérience /&nbsp;accessibilité.</p>
  291. <p>Plus tard, je commence l’implémentation de l’archivage des liens distants. J’ai pas mal d’idées mais je sais qu’il ne faut pas que je prenne trop de retard dans la récupération sinon je ne vais pas avoir l’énergie pour reprendre l’historique. Ce sera probablement l’occasion de faire un autre <em>Web Component</em> dédié. En suivant les recommandations <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111703611010197838">sur masto</a>, je les nomme <code>archive</code> pour le moment et je conserve la date de récupération de l’article car c’est une information importante. J’adapterai le style plus&nbsp;tard.</p>
  292. <p>Il faut que j’améliore cette automatisation car c’est assez fastidieux pour le moment, beaucoup de retouches manuelles pour obtenir un article lisible selon les sources. Je vais aussi réduire le nombre de liens que j’archive, les sources techniques ont probablement moins d’intérêt dans la&nbsp;durée.</p>
  293. <p>Chaque lien distant prend une longueur non négligeable suite à ces deux&nbsp;ajouts&nbsp;🤔.</p>
  294. <a href="#hr-17" title="Lien vers cette section de la page"><hr id="hr-17" /></a>
  295. <blockquote>
  296. <p>Ce billet illustre la loi qui dit “Moins un blog est mis à jour, plus il y a de probabilité que ce qui y est publié a pour sujet les aspects techniques dudit&nbsp;blog”.</p>
  297. <p><cite><em><a data-link-domain="blog.professeurjoachim.com" href="https://blog.professeurjoachim.com/billet/2024-01-05-ma-page-now-ou-plutot-en-ce-moment">Ma page /now (ou plutôt /en-ce-moment)</a> <a href="/david/cache/2024/076169df8a4bd9dde9a4637c6b306dff/" title="Copie locale au 2024-01-07">[archive]</a></em></cite></p>
  298. </blockquote>
  299. <p>J’ai ri. Je n’ai jamais fait une telle page car je sais que je n’arriverais pas à la maintenir à jour. Je galère déjà avec mon <a data-link-domain="larlet.com" href="https://larlet.com/">profil pro</a>.</p>
  300. <blockquote lang="en">
  301. <p>I also started noticing when people do this subconiously. For example, most software engineers I know hate blogging, but <mark>they like building their own blog engine to make blogging more pleasant</mark> (I’m very guilty of this&nbsp;too).</p>
  302. <p>Kent Beck nailed it: “for each desired change, make the change easy (warning: this may be hard), then make the easy&nbsp;change”.</p>
  303. <p><cite><em><a data-link-domain="frantic.im" href="https://frantic.im/opening-mail/">Opening Mail</a> <a href="/david/cache/2024/7a223e552e8a8e3e11c759cbc5bc3ffa/" title="Copie locale au 2024-01-07">[archive]</a></em></cite></p>
  304. </blockquote>
  305. <p>Note&nbsp;: cette année, je ne ferai aucun lien vers 𝕏 (twitter.com) depuis mes&nbsp;articles.</p>
  306. <a href="#hr-18" title="Lien vers cette section de la page"><hr id="hr-18" /></a>
  307. <p>L’hiver commence maintenant le 7&nbsp;janvier à Montréal. Phénomène météorologique exceptionnel <em>et</em> tendance&nbsp;climatique.</p>
  308. <nav>
  309. <p>
  310. <a href="/david/2024/processus/"
  311. title="Liste de tous les articles 2024 associés à cette étiquette"
  312. rel="tag">#processus</a>
  313. <a href="/david/2024/solastalgia/"
  314. title="Liste de tous les articles 2024 associés à cette étiquette"
  315. rel="tag">#solastalgia</a>
  316. <a href="/david/2024/technique/"
  317. title="Liste de tous les articles 2024 associés à cette étiquette"
  318. rel="tag">#technique</a>
  319. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  320. </p>
  321. </nav>
  322. <h2>
  323. <a href="/david/2024/01/06/" title="Lien permanent vers cet article">Objectif</a> <time datetime="2024-01-06">6 janvier 2024</time>
  324. </h2>
  325. <p>C’est fou comme le fait de se donner un objectif (sportif) change la donne en terme de motivation. Pour cette année, ce sera la <em>Traversée de Charlevoix</em>. Je vais essayer de documenter le processus de&nbsp;préparation.</p>
  326. <a href="#hr-10" title="Lien vers cette section de la page"><hr id="hr-10" /></a>
  327. <p>Au détour d’un vieux&nbsp;chalet&nbsp;:</p>
  328. <figure>
  329. <a href="/static/david/2024/2024-01-05-la-recherche-sida.jpg"
  330. title="Cliquer pour une version haute résolution">
  331. <img
  332. src="/static/david/2024/2024-01-05-la-recherche-sida.jpg"
  333. width="4032" height="3024"
  334. srcset="/static/david/2024/2024-01-05-la-recherche-sida.jpg 4032w, /static/david/2024/2024-01-05-la-recherche-sida_660x440.jpg 660w, /static/david/2024/2024-01-05-la-recherche-sida_990x660.jpg 990w, /static/david/2024/2024-01-05-la-recherche-sida_1320x880.jpg 1320w"
  335. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  336. loading="lazy"
  337. decoding="async"
  338. alt="Photo du Magazine «&nbsp;La Recherche&nbsp;» (couverture)">
  339. </a>
  340. <figcaption>La Recherche, juin 1985. Les mécanismes biologiques autour du SIDA étaient en cours de&nbsp;découverte.</figcaption>
  341. </figure>
  342. <p>D’autres temps, d’autres&nbsp;démons.</p>
  343. <a href="#hr-11" title="Lien vers cette section de la page"><hr id="hr-11" /></a>
  344. <p>Le dossier spécial sur la voiture électrique se terminait&nbsp;ainsi&nbsp;:</p>
  345. <blockquote>
  346. <p>Nous sommes loin des anticipations du début des années 1970&nbsp;qui attribuaient au véhicule électrique 7&nbsp;à 10&#8239;% du parc automobile à l’horizon 1990-1995. L’avenir même du véhicule, du moins en ce qui concerne l’étendue de son champ d’utilisation, demeure incertain. Celle-ci sera fonction des progrès qui seront réalisés sur les générateurs électrochimiques. Les filières potentiellement les plus performantes (filières chaudes, filières organiques, piles à combustibles) n’en sont encore qu’au stade de la recherche appliquée ou du développement et quelques-unes au stade de la recherche fondamentale. Mais des progrès sont enregistrés et les raisons profondes de poursuivre l’effort demeurent. <mark>Si une volonté politique s’affirme et parvient à motiver les premiers utilisateurs potentiels</mark> (administrations et grands organismes publics), on peut espérer voir sortir les premières séries industrielles de véhicules au début de la prochaine&nbsp;décennie.</p>
  347. </blockquote>
  348. <p>D’autres époques, mêmes utopies. Je vois de plus en plus de gros véhicules électriques, j’ai même croisé une JEEP l’autre fois. Tristesse du rêve&nbsp;américain.</p>
  349. <a href="#hr-12" title="Lien vers cette section de la page"><hr id="hr-12" /></a>
  350. <blockquote>
  351. <p>J’aime bien l’expression «&nbsp;sans nom&nbsp;» (genre une galère sans nom, une injustice sans nom)<br />
  352. Ça fait un peu eldritchien pour moi, genre quelque chose de si terrible qu’on ne peut pas le nommer, qu’on ne peut pas concevoir&nbsp;entièrement</p>
  353. <p>Mais aussi ça me donne l’impression que si je nomme les choses ça va régler une partie du problème c’est&nbsp;fun</p>
  354. <p>«&nbsp;ma vie était une galère sans nom c’était terrible. Bha je l’ai appelé bob et du coup depuis ça&nbsp;va&nbsp;»</p>
  355. <p><cite><a data-link-domain="pipou.academy" href="https://pipou.academy/@tiphaine/111629699683457788">@tiphaine@pipou.academy</a></cite></p>
  356. </blockquote>
  357. <nav>
  358. <p>
  359. <a href="/david/2024/addiction/"
  360. title="Liste de tous les articles 2024 associés à cette étiquette"
  361. rel="tag">#addiction</a>
  362. <a href="/david/2024/processus/"
  363. title="Liste de tous les articles 2024 associés à cette étiquette"
  364. rel="tag">#processus</a>
  365. <a href="/david/2024/sport/"
  366. title="Liste de tous les articles 2024 associés à cette étiquette"
  367. rel="tag">#sport</a>
  368. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  369. </p>
  370. </nav>
  371. <form action="/david/recherche/" method="get">
  372. <fieldset>
  373. <legend>Recherche</legend>
  374. <label for="input-search">Termes de votre recherche :</label>
  375. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  376. <input type="submit" value="Chercher">
  377. <p id="indexation-infos">
  378. <small>
  379. Seuls les contenus de ces 8 dernières années sont indexés.
  380. </small>
  381. </p>
  382. </fieldset>
  383. </form>
  384. <aside>
  385. <theme-toggle></theme-toggle>
  386. </aside>
  387. </article>
  388. <hr>
  389. <footer>
  390. <p>
  391. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  392. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  393. <a href="http://larlet.com"
  394. title="Go to my English profile"
  395. data-instant>Pro</a>
  396. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  397. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  398. </p>
  399. <template id="theme-selector">
  400. <form>
  401. <style type="text/css">
  402. fieldset div {
  403. text-align: center;
  404. }
  405. </style>
  406. <fieldset>
  407. <legend>Thème</legend>
  408. <div>
  409. <label>
  410. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  411. Auto
  412. </label>
  413. <label>
  414. <input type="radio" value="dark" name="chosen-color-scheme">
  415. Foncé
  416. </label>
  417. <label>
  418. <input type="radio" value="light" name="chosen-color-scheme">
  419. Clair
  420. </label>
  421. </div>
  422. </fieldset>
  423. </form>
  424. </template>
  425. </footer>
  426. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  427. <script>
  428. class ThemeToggle extends HTMLElement {
  429. constructor() {
  430. super()
  431. const themeSelectorTemplate = document.querySelector('#theme-selector')
  432. const form = themeSelectorTemplate.content.firstElementChild
  433. this.attachShadow({ mode: 'open' })
  434. this.shadowRoot.appendChild(form.cloneNode(true))
  435. }
  436. connectedCallback() {
  437. const form = this.shadowRoot.querySelector('form')
  438. form.addEventListener('change', (e) => {
  439. const chosenColorScheme = e.target.value
  440. localStorage.setItem('theme', chosenColorScheme)
  441. toggleTheme(chosenColorScheme)
  442. })
  443. const selectedTheme = localStorage.getItem('theme')
  444. if (selectedTheme && selectedTheme !== 'undefined') {
  445. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  446. }
  447. }
  448. }
  449. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  450. window.addEventListener('load', () => {
  451. let colorsLayer = undefined
  452. let hasDarkRules = false
  453. for (const styleSheet of Array.from(document.styleSheets)) {
  454. let mediaRules = []
  455. for (const layerRule of styleSheet.cssRules) {
  456. if (!(layerRule instanceof CSSLayerBlockRule)) {
  457. continue
  458. }
  459. if (layerRule.name === 'colors') {
  460. colorsLayer = layerRule
  461. }
  462. for (const cssRule of layerRule.cssRules) {
  463. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  464. continue
  465. }
  466. // WARNING: Safari does not have/supports `conditionText`.
  467. if (cssRule.conditionText) {
  468. if (cssRule.conditionText !== prefersColorSchemeDark) {
  469. continue
  470. }
  471. } else {
  472. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  473. continue
  474. }
  475. }
  476. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  477. }
  478. }
  479. // WARNING: do not try to insert a Rule to a styleSheet you are
  480. // currently iterating on, otherwise the browser will be stuck
  481. // in a infinite loop…
  482. for (const mediaRule of mediaRules) {
  483. // Safari requires the `0` second parameter (even if default).
  484. colorsLayer.insertRule(mediaRule.cssText, 0)
  485. hasDarkRules = true
  486. }
  487. }
  488. if (hasDarkRules) {
  489. if ('customElements' in window && !customElements.get('theme-toggle')) {
  490. customElements.define('theme-toggle', ThemeToggle)
  491. }
  492. }
  493. })
  494. </script>
  495. </body>
  496. </html>