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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997
  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 #écriture
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Publications relatives au tag #écriture">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  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>#écriture</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" data-no-instant>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/03/16/" title="Lien permanent vers cet article">Descriptions</a> <time datetime="2024-03-16">16 mars 2024</time>
  132. </h2>
  133. <blockquote>
  134. <p>Le crépuscule était tombé lorsqu’ils partirent enfin&nbsp;: rampant par-dessus le bord ouest du vallon, ils passèrent comme des fantômes dans le pays accidenté en bordure de la route. La Lune n’était plus qu’à trois nuits de son plein, mais elle ne devait pas franchir les Montagnes avant minuit ou presque, et le début de leur voyage se fit dans la plus grande obscurité. […]</p>
  135. <p><mark>Enfin, quand la nuit se fit vieille et que la fatigue les eut déjà rattrapés</mark>&nbsp;[…]</p>
  136. <p>Dès la tombée de la nuit, la terre s’étant évanouie en un gris informe, ils se remirent en route. […]</p>
  137. <p>Le jour était en train d’éclore, et ils virent que les Montagnes étaient à présent beaucoup plus distantes, fuyant vers l’est en une longue courbe qui se perdait à l’horizon. […]</p>
  138. <p>La lumière croissante leur révéla une terre déjà moins aride et moins ravagée. Les Montagnes se dressaient encore de façon menaçante sur leur gauche, mais la route du Sud était visible tout près d’eux, et elle s’éloignait à présent des racines noires des collines, obliquant vers l’ouest. […]</p>
  139. <p><cite><em>Le Seigneur des Anneaux</em>, J.R.R. Tolkien, traduction de Daniel&nbsp;Lauzon</cite></p>
  140. </blockquote>
  141. <p>Je ne sais pas si j’y suis plus sensible à <a href="/david/2024/02/06/" title="Anneau">cette relecture</a> ou s’il s’agit d’améliorations avec la nouvelle traduction mais je remarque des tournures de phrases qui m’inspirent pour raconter des aventures en nature. Le sujet devenant l’environnement pour traduire les contraintes qu’il&nbsp;impose.</p>
  142. <p>Puisqu’il faut s’éloigner du style de <a data-link-domain="comptoir.org" href="https://comptoir.org/2024/03/11/sylvain-tesson-les-vers-de-la-reaction/" hreflang="fr"
  143. title="Consultation de l’article">Sylvain Tesson</a>
  144. <a href="/david/cache/2024/d767413ad435c2d833e7d0711c40c370/" hreflang="fr"
  145. data-tippy data-description="La rentrée littéraire de ce début d’année 2024 fut marquée – comme presque chaque année désormais – par la parution d’un nouveau récit de voyage de Sylvain Tesson, doublé d’une polémique sur sa nom…"
  146. data-source="https://comptoir.org/2024/03/11/sylvain-tesson-les-vers-de-la-reaction/"
  147. data-date="2024-03-17"
  148. data-favicon="https://secure.gravatar.com/blavatar/d516daa7fb122f031098a3523884605516add46cc63f1940d3e69aa42056b5c2?s=32"
  149. data-domain="comptoir.org"
  150. ><svg xmlns="http://www.w3.org/2000/svg"
  151. width="24" height="24" viewBox="0 0 24 24" fill="none"
  152. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  153. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  154. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  155. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  156. </svg>
  157. <span class="sr-only">[archive]</span></a>…</p>
  158. <nav>
  159. <p>
  160. <a href="/david/2024/aventure/"
  161. title="Liste de tous les articles 2024 associés à cette étiquette"
  162. rel="tag">#aventure</a>
  163. <a href="/david/2024/ecriture/"
  164. title="Liste de tous les articles 2024 associés à cette étiquette"
  165. rel="tag">#écriture</a>
  166. <a href="/david/2024/lecture/"
  167. title="Liste de tous les articles 2024 associés à cette étiquette"
  168. rel="tag">#lecture</a>
  169. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  170. </p>
  171. </nav>
  172. <h2>
  173. <a href="/david/2024/02/27/" title="Lien permanent vers cet article">Rédaction</a> <time datetime="2024-02-27">27 février 2024</time>
  174. </h2>
  175. <blockquote>
  176. <p>Je suis curieux de savoir comment tu rédiges ces textes&#8239;! Tu prends des notes pendant tes excursions sur lesquelles tu te bases ou tu écris tout à chaud une fois chez toi&#8239;? Ou tu écris quelques jours après sur des souvenirs qui s’effritent déjà mais ça n’a pas&nbsp;d’importance&#8239;?&nbsp;🙂</p>
  177. <p><cite><em>Question de <a data-link-domain="social.bim.land" href="https://social.bim.land/@mlbiche">@mlbiche</a> sur&nbsp;masto</em></cite></p>
  178. </blockquote>
  179. <p>Il m’arrive de prendre des notes lors de sorties plus contemplatives (et moins risquées pour mes doigts&#8239;!) mais c’est assez rare. Je n’arrive pas à écrire une histoire en étant en train de la vivre, c’est comme de faire des vidéos, j’ai l’impression de trop me mettre en scène sinon. Lorsque le récit influe sur le déroulé, ça brise quelque chose au niveau de son authenticité et de mon&nbsp;ressenti.</p>
  180. <p>En général, je rédige cela à la maison, à chaud. Une fois que toutes les affaires ont été mises à sécher. Avec parfois des bribes qui s’agencent lors du long retour en voiture. Si j’attends plus de 24h, ce ne sont pas tant les souvenirs qui s’effritent que la motivation à les partager qui s’envole, ça m’est déjà arrivé plusieurs&nbsp;fois.</p>
  181. <a href="#hr-91" title="Lien vers cette section de la page"><hr id="hr-91" /></a>
  182. <blockquote>
  183. <p>Nos vies sont faites de métal incandescent.<br />
  184. Tant qu’elles rougeoient, nous en restons les forgerons.<br />
  185. Créateurs et inventeurs de&nbsp;nous-mêmes.</p>
  186. <p>Mais comme le métal du forgeron qui refroidit, comme la coulée de lave qui atteint l’extrémité de son expansion, nos vies se figent.<br />
  187. Ce n’est qu’à cet instant précis que l’on peut dire qui on a été. quand la coulée de la vie a pris sa forme&nbsp;définitive.</p>
  188. <p>D’ici je la contemple, cette vie. Ma vie.<br />
  189. Et je sais enfin qui je&nbsp;suis…</p>
  190. <p><cite><em>La saga de Grimr</em>, Jérémie&nbsp;Moreau</cite></p>
  191. </blockquote>
  192. <p>Rétrospective sous forme de <a data-link-domain="ut7.fr" href="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html" hreflang="en"
  193. title="Consultation de l’article (anglais)">Conseil</a>
  194. <a href="/david/cache/2024/f3974ec778551dd1c3134c8094c3372b/" hreflang="en"
  195. data-tippy data-description="Un conseil, c’est une réunion en cercle où les personnes se parlent et font l’expérience individuelle de ce que c’est que d’appartenir au groupe."
  196. data-source="https://www.ut7.fr/blog/2015/11/18/animer-vos-retrospectives-avec-le-conseil.html"
  197. data-date="2024-02-27"
  198. data-favicon="https://www.ut7.fr/favicon-192x192.png"
  199. data-domain="ut7.fr"
  200. ><svg xmlns="http://www.w3.org/2000/svg"
  201. width="24" height="24" viewBox="0 0 24 24" fill="none"
  202. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  203. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  204. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  205. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  206. </svg>
  207. <span class="sr-only">[archive]</span></a> aujourd’hui. Je suis de plus en plus tenté d’introduire une 6<sup>e</sup> étape qui serait autour du pardon. <q>Je te pardonne pour …, cela m’a permis d’apprendre … </q>. J’ai l’intuition que cela pourrait ajouter quelque chose pour un groupe relativement intime qui s’inscrit dans la&nbsp;durée.</p>
  208. <nav>
  209. <p>
  210. <a href="/david/2024/ecriture/"
  211. title="Liste de tous les articles 2024 associés à cette étiquette"
  212. rel="tag">#écriture</a>
  213. <a href="/david/2024/processus/"
  214. title="Liste de tous les articles 2024 associés à cette étiquette"
  215. rel="tag">#processus</a>
  216. <a href="/david/2024/psychologie/"
  217. title="Liste de tous les articles 2024 associés à cette étiquette"
  218. rel="tag">#psychologie</a>
  219. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  220. </p>
  221. </nav>
  222. <h2>
  223. <a href="/david/2024/02/17/" title="Lien permanent vers cet article">Quotidien</a> <time datetime="2024-02-17">17 février 2024</time>
  224. </h2>
  225. <p>S’il y a une chose qui a changé depuis que j’ai repris une écriture quotidienne c’est de ne presque plus regarder de films /&nbsp;séries.</p>
  226. <p>Vu la qualité des vidéos que <q lang="fr_ca">j’écoutais</q>, ça n’est vraiment pas une mauvaise&nbsp;chose.</p>
  227. <a href="#hr-74" title="Lien vers cette section de la page"><hr id="hr-74" /></a>
  228. <p>Outil du jour&nbsp;: <a data-link-domain="whocanuse.com" href="https://www.whocanuse.com">who can use</a>.</p>
  229. <p>Voir en direct la perception des personnes sous forme de boutons pour des couleurs données permet de lâcher prise et de se concentrer sur la lisibilité. Savoir que seules 68% des personnes ont la capacité à voir ce que je vois (peut-être) donne un autre sens à&nbsp;l’accessibilité.</p>
  230. <a href="#hr-75" title="Lien vers cette section de la page"><hr id="hr-75" /></a>
  231. <p>Découverte d’un nouveau <a data-link-domain="montreal.ca" href="https://montreal.ca/lieux/parc-nature-du-cap-saint-jacques">terrain de jeu en hiver</a>.</p>
  232. <p>Le nombre d’hivers où il sera encore possible de skier à Montréal sont comptés. Il fait probablement partie de la dernière génération à pouvoir le faire. Aujourd’hui, une dizaine de kilomètres à skis-de-fond-de-location-qui-ne-glissent-pas&nbsp;(sic).</p>
  233. <a href="#hr-76" title="Lien vers cette section de la page"><hr id="hr-76" /></a>
  234. <blockquote lang="en">
  235. <p>Most “news” is designed to trick us into giving our fucks to things that don’t deserve them or where they have no&nbsp;value.</p>
  236. <p><cite><em><a data-link-domain="patrickrhone.net" href="https://www.patrickrhone.net/the-fucks-and-how-we-give-them-a-manifesto/" hreflang="en"
  237. title="Consultation de l’article (anglais)">The Fucks and How We Give Them (A Manifesto)</a>
  238. <a href="/david/cache/2024/d890da6c22300e52daec05e9c5888784/" hreflang="en"
  239. data-tippy data-description="The older I get, the fewer fucks I’m willing to give."
  240. data-source="https://www.patrickrhone.net/the-fucks-and-how-we-give-them-a-manifesto/"
  241. data-date="2024-02-18"
  242. data-favicon="https://www.patrickrhone.net/favicon.ico"
  243. data-domain="patrickrhone.net"
  244. ><svg xmlns="http://www.w3.org/2000/svg"
  245. width="24" height="24" viewBox="0 0 24 24" fill="none"
  246. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  247. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  248. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  249. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  250. </svg>
  251. <span class="sr-only">[archive]</span></a></em></cite></p>
  252. </blockquote>
  253. <nav>
  254. <p>
  255. <a href="/david/2024/ecriture/"
  256. title="Liste de tous les articles 2024 associés à cette étiquette"
  257. rel="tag">#écriture</a>
  258. <a href="/david/2024/lecture/"
  259. title="Liste de tous les articles 2024 associés à cette étiquette"
  260. rel="tag">#lecture</a>
  261. <a href="/david/2024/solastalgia/"
  262. title="Liste de tous les articles 2024 associés à cette étiquette"
  263. rel="tag">#solastalgia</a>
  264. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  265. </p>
  266. </nav>
  267. <h2>
  268. <a href="/david/2024/01/14/" title="Lien permanent vers cet article">Fiction</a> <time datetime="2024-01-14">14 janvier 2024</time>
  269. </h2>
  270. <blockquote>
  271. <p>Ces <em>moments perspectivistes</em>, qu’ils soient activés par un voyage ou par une lecture, sont déroutants mais ils sont salutaires. Ils développent la capacité à comprendre d’autres points de vue que le sien ou, du moins, faute de comprendre, à toucher du doigt la multiplicité des rapports au monde et à accepter la relativité de nos perceptions. Le réel n’est pas un. Et on ne perd jamais en humanité à se mettre dans la peau de&nbsp;l’autre.</p>
  272. <p><mark>La fiction peut nous y aider, c’est le lieu par excellence de tous les possibles; saisissons-nous-en comme d’un terrain d’expérimentation.</mark> Tout n’a pas été écrit&nbsp;: tant que de l’inédit surgit, il reste de la place pour la création. Les mutations du monde nous obligent à repenser le fond comme la forme de nos récits. Il y a des sujets à traiter qui ne l’ont pas été par le passé, des questions qu’on ne s’était jamais posées, de nouveaux enjeux dont il faut s’emparer. Il y a des arcs littéraires à inventer qui ne suivent pas les schémas narratifs classiques et s’affranchissent du syndrome de la grande quête. On doit pouvoir brûler les étapes sans attendre le dénouement. On doit pouvoir brouiller les&nbsp;frontières.</p>
  273. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  274. </blockquote>
  275. <p><a href="/david/2024/01/13/" title="Wuwei">Suite</a> de mes lectures et de mes aspirations à écrire —&nbsp;et donc transmettre&nbsp;— différemment. Une autre forme de travail des idées consistant à décrire un à-venir enviable qu’il reste à construire, en commun, avec l’espoir que <q lang="fr">la fiction déplace la réalité</q>.</p>
  276. <p>De <a href="/david/2024/01/09/" title="Blessure">l’immobilisation</a> nait la&nbsp;créativité&#8239;?</p>
  277. <blockquote>
  278. <p>Je crois de plus en plus que nous devons nous entraîner à <em>habiter le trouble</em> comme l’a formulé Donna Haraway, c’est-à-dire à tenir «&nbsp;pour acquis que les modes d’ordre établis se sont effondrés ou sont en voie d’effondrement, et qu’il devient à la fois urgent et possible d’envisager autre chose&nbsp;». Vivre dans un monde en train de disparaître sans savoir ce qui va émerger n’est pas simple, mais <mark>il ne tient qu’à nous de nous ouvrir à d’autres géographies,</mark> d’autres cultures, à toucher aux confins civilisationnels pour imaginer «&nbsp;des façons plus florissantes, plus robustes, moins meurtrières de vivre les uns avec les autres&nbsp;», ailleurs, quand notre propre réalité nous fait&nbsp;défaut.</p>
  279. <p><cite><em>Ibid.</em></cite></p>
  280. </blockquote>
  281. <a href="#hr-30" title="Lien vers cette section de la page"><hr id="hr-30" /></a>
  282. <p>Je prends le temps de décliner le nouveau style pour les pages d’étiquettes 2024. Il va rester la page d’accueil, la plus difficile. Elle comporte actuellement&nbsp;270&nbsp;liens.</p>
  283. <p>Quelle éditorialisation proposer pour éviter la surcharge tout en facilitant l’exploration&#8239;? Offrir une boussole sans proposer de&nbsp;cap.</p>
  284. <blockquote lang="en">
  285. <p>When the right approach reveals itself, it feels obvious. <mark>But only in retrospect.</mark> <strong>Design is only obvious in retrospect.</strong> It takes iteration and discipline to get there. But when you do get there, it’s much easier to explain your design decisions to others. You know why the design is the right one and can frame your rationale in the context of the problem you are trying to&nbsp;solve.</p>
  286. <p><cite><em><a data-link-domain="lukew.com" href="https://lukew.com/ff/entry.asp?2036" hreflang="en"
  287. title="Consultation de l’article (anglais)">Until the Right Design Emerges…</a>
  288. <a href="/david/cache/2024/84f8caf3e7f7b3de9e18281749c3687f/" hreflang="en"
  289. data-tippy data-description="Too often, the process of design is cut short. When faced with user needs or product requirements, many designers draft a mockup or wireframe informed by what they've seen or experienced before"
  290. data-source="https://lukew.com/ff/entry.asp?2036"
  291. data-date="2024-01-13"
  292. data-favicon="https://static.lukew.com/lukew.ico"
  293. data-domain="lukew.com"
  294. ><svg xmlns="http://www.w3.org/2000/svg"
  295. width="24" height="24" viewBox="0 0 24 24" fill="none"
  296. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  297. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  298. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  299. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  300. </svg>
  301. <span class="sr-only">[archive]</span></a></em></cite></p>
  302. </blockquote>
  303. <p><a href="/david/2024/01/13/" title="Wuwei">Non</a>, pas <a data-link-domain="lukew.com" href="https://lukew.com/ff/entry.asp?2008" hreflang="en"
  304. title="Consultation de l’article (anglais)">cette direction</a>
  305. <a href="/david/cache/2024/ea2cfc9aa425a6967d2cacd9f96ceb9e/" hreflang="en"
  306. data-tippy data-description="Large language (AI) models allow us to rethink how to build software and design user interfaces. To that end, we made use of these new capabilities to create a different way of interacting with this site"
  307. data-source="https://lukew.com/ff/entry.asp?2008"
  308. data-date="2024-01-13"
  309. data-favicon="https://static.lukew.com/lukew.ico"
  310. data-domain="lukew.com"
  311. ><svg xmlns="http://www.w3.org/2000/svg"
  312. width="24" height="24" viewBox="0 0 24 24" fill="none"
  313. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  314. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  315. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  316. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  317. </svg>
  318. <span class="sr-only">[archive]</span></a> par&nbsp;contre.</p>
  319. <a href="#hr-31" title="Lien vers cette section de la page"><hr id="hr-31" /></a>
  320. <p>Découvertes culinaires du&nbsp;jour&nbsp;:</p>
  321. <ul>
  322. <li><a data-link-domain="cooked.wiki" href="https://cooked.wiki/">cooked.wiki</a> pour préfixer les recettes&nbsp;(merci <a data-link-domain="mastodon.tetaneutral.net" href="https://mastodon.tetaneutral.net/@newick/111749530608709450">@newick</a>)</li>
  323. <li><a data-link-domain="github.com" href="https://github.com/mealie-recipes/mealie">mealie</a> pour stocker les recettes (merci <a data-link-domain="mamot.fr" href="https://mamot.fr/@aspyrine">@aspyrine</a>)</li>
  324. </ul>
  325. <nav>
  326. <p>
  327. <a href="/david/2024/ecriture/"
  328. title="Liste de tous les articles 2024 associés à cette étiquette"
  329. rel="tag">#écriture</a>
  330. <a href="/david/2024/experience/"
  331. title="Liste de tous les articles 2024 associés à cette étiquette"
  332. rel="tag">#expérience</a>
  333. <a href="/david/2024/protopie/"
  334. title="Liste de tous les articles 2024 associés à cette étiquette"
  335. rel="tag">#protopie</a>
  336. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  337. </p>
  338. </nav>
  339. <h2>
  340. <a href="/david/2024/01/13/" title="Lien permanent vers cet article">Wuwei</a> <time datetime="2024-01-13">13 janvier 2024</time>
  341. </h2>
  342. <blockquote>
  343. <p>Le <em>wuwei</em>, dans le taoïsme, est d’ailleurs composé de deux idéogrammes&nbsp;: le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par <em>non-agir</em> ou <em>non-intervention</em>, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir <em>ne pas</em> est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être&nbsp;chinois.</p>
  344. <p>Décliner l’usage de ce dont on n’a pas besoin, <mark>discerner parmi les technologies celles qui risquent de faire plus de mal que de bien,</mark> voilà qui manque cruellement à notre époque où l’on a oublié que parfois ne pas nuire vaut mieux qu’agir. Il y aurait pourtant un nombre incalculable d’applications pratiques du <em>wuwei</em>, de la géo-ingénierie à l’intelligence artificielle, tant de cas où il serait bon que l’espèce humaine sache se&nbsp;retenir.</p>
  345. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  346. </blockquote>
  347. <p>Cette année encore, ce sera pour moi le <em>non-usage</em> de l’<a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Jan/7/call-it-ai/" hreflang="en"
  348. title="Consultation de l’article (anglais)">intelligence artificielle</a>
  349. <a href="/david/cache/2024/3ea27fca4fabb81676fc1b98264f3bd8/" hreflang="en"
  350. data-tippy data-description="Update 9th January 2024: This post was clumsily written and failed to make the point I wanted it to make. I’ve published a follow-up, What I should have said about …"
  351. data-source="https://simonwillison.net/2024/Jan/7/call-it-ai/"
  352. data-date="2024-01-13"
  353. data-favicon="https://simonwillison.net/favicon.ico"
  354. data-domain="simonwillison.net"
  355. ><svg xmlns="http://www.w3.org/2000/svg"
  356. width="24" height="24" viewBox="0 0 24 24" fill="none"
  357. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  358. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  359. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  360. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  361. </svg>
  362. <span class="sr-only">[archive]</span></a> explicite qui sera mon <em>wuwei</em>. Je précise le <q lang="fr">explicite</q> car il y en a déjà plein partout dans mon téléphone et ailleurs. J’ai peut-être une des dernières générations d’appareil photo qui ne va pas adapter l’image à une norme / culture apprise. Je suis curieux d’observer le nivellement (au sens moyenne, pas forcément par le bas) que vont provoquer les <abbr title="Large Language Model">LLM</abbr> dans le domaine, peut-être deviendra-t-il plus imperceptible qu’une <a data-link-domain="theverge.com" href="https://www.theverge.com/2023/3/13/23637401/samsung-fake-moon-photos-ai-galaxy-s21-s23-ultra" hreflang="en"
  363. title="Consultation de l’article (anglais)">lune</a>
  364. <a href="/david/cache/2024/e990536ed88823f047296ea25a6b7933/" hreflang="en"
  365. data-tippy data-description="A Reddit post has revealed just how much post-processing the Galaxy S23’s camera applies when it detects it’s taking a photo of the Moon, inserting extra detail that isn’t present in reality."
  366. data-source="https://www.theverge.com/2023/3/13/23637401/samsung-fake-moon-photos-ai-galaxy-s21-s23-ultra"
  367. data-date="2024-01-13"
  368. data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
  369. data-domain="theverge.com"
  370. ><svg xmlns="http://www.w3.org/2000/svg"
  371. width="24" height="24" viewBox="0 0 24 24" fill="none"
  372. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  373. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  374. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  375. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  376. </svg>
  377. <span class="sr-only">[archive]</span></a> ou une <a data-link-domain="theverge.com" href="https://www.theverge.com/2023/12/2/23985299/iphone-bridal-photo-three-poses-explanation-panorama-photoshop-generative-ai" hreflang="en"
  378. title="Consultation de l’article (anglais)">mariée</a>
  379. <a href="/david/cache/2024/668d0f82ae65b0e94ea76145057759a7/" hreflang="en"
  380. data-tippy data-description="Tessa Coates’ picture of one moment showing her in three different poses isn’t an iPhone Live Photo glitch or Photoshop; it’s multiple pictures stitched in “pano” mode."
  381. data-source="https://www.theverge.com/2023/12/2/23985299/iphone-bridal-photo-three-poses-explanation-panorama-photoshop-generative-ai"
  382. data-date="2024-01-13"
  383. data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
  384. data-domain="theverge.com"
  385. ><svg xmlns="http://www.w3.org/2000/svg"
  386. width="24" height="24" viewBox="0 0 24 24" fill="none"
  387. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  388. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  389. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  390. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  391. </svg>
  392. <span class="sr-only">[archive]</span></a> mais il sera toujours&nbsp;là.</p>
  393. <p>Ce <strong>explicite</strong> correspond principalement pour moi à des <em>prompts</em> qui m’aideraient à coder. Je regarde ce qui se fait dans le domaine et j’en vois l’intérêt mais je vois aussi au détriment de tout ce que cela est rendu possible. Des humains-esclaves qui modèrent ce qui est généré d’un côté, des sources d’apprentissage non consenties —&nbsp;voire privées&nbsp;— et des ressources pharaoniques pour réussir à aligner 3&nbsp;fonctions qu’il faut ensuite comprendre et adapter de toute&nbsp;façon.</p>
  394. <p>Et puis il y a toute cette zone grise, je me sers par exemple de la reconnaissance de caractère intégrée à Photos.app de macOS pour retranscrire les citations depuis des photos de passages de livres. Auparavant, je les recopiais à la main. Est-ce que cela changeait ma manière de les&nbsp;ré-interpréter&#8239;?</p>
  395. <a href="#hr-29" title="Lien vers cette section de la page"><hr id="hr-29" /></a>
  396. <blockquote>
  397. <p>Il nous faut trouver de nouvelles manières littéraires susceptibles de percuter sans chercher à convaincre, et déjouer le didactisme qui veut à tout prix expliquer et instruire. Peut-être faudrait-il aller jusqu’à s’imposer comme contrainte de proscrire l’usage de certains mots afin de renouveler le&nbsp;genre.</p>
  398. <p>Écologie, capitalisme, croissance, nature, social, climat, peuple, vert, environnement, progrès, révolution, biodiversité, démocratie&nbsp;: la plupart d’entre eux ne manquerait à personne tant ils ont été dévoyés et usés jusqu’à la lie. Mais notre meilleure botte est sans doute de miser sur la capacité du sensible à <em>affecter</em>.</p>
  399. <p><mark>En littérature, c’est l’empathie qui amène à la réflexion et non l’inverse.</mark> Vous pouvez développer l’argumentaire le plus serré qui soit dans un livre, je doute fort que cela fasse changer quiconque d’avis. En revanche, donnez-nous un personnage à chérir, faites-nous partager son intimité, ses émois, ses douleurs et ses joies, et il nous sera bien plus aisé de prendre en compte son point de vue, à défaut de le&nbsp;partager.</p>
  400. <p><cite><em>Ibid.</em></cite></p>
  401. </blockquote>
  402. <p>De plus en plus tenté d’explorer cette piste. Je me <a href="/david/stream/2018/11/13/">souviens</a> <a href="/david/stream/2018/11/25/">avec</a> <a href="/david/stream/2018/11/27/">émotion</a> de ma lecture de <em>Professeur cherche élève ayant désir de sauver le monde</em> par Daniel&nbsp;Quinn.</p>
  403. <nav>
  404. <p>
  405. <a href="/david/2024/ecriture/"
  406. title="Liste de tous les articles 2024 associés à cette étiquette"
  407. rel="tag">#écriture</a>
  408. <a href="/david/2024/ia/"
  409. title="Liste de tous les articles 2024 associés à cette étiquette"
  410. rel="tag">#IA</a>
  411. <a href="/david/2024/parvenir/"
  412. title="Liste de tous les articles 2024 associés à cette étiquette"
  413. rel="tag">#parvenir</a>
  414. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  415. </p>
  416. </nav>
  417. <h2>
  418. <a href="/david/2024/01/12/" title="Lien permanent vers cet article">Personnel</a> <time datetime="2024-01-12">12 janvier 2024</time>
  419. </h2>
  420. <blockquote>
  421. <p>Mes lieux de lecture et d’écriture sont très associés. J’écris parce que je&nbsp;lis.</p>
  422. <p>J’écris de deux&nbsp;façons.</p>
  423. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/11/pourquoi" hreflang="fr"
  424. title="Consultation de l’article">je ne sais pas pourquoi</a>
  425. <a href="/david/cache/2024/87c468a4eddabe5d2c28e902d7f17504/" hreflang="fr"
  426. data-tippy data-description=""
  427. data-source="https://www.la-grange.net/2024/01/11/pourquoi"
  428. data-date="2024-01-11"
  429. data-favicon="https://www.la-grange.net/favicon.ico"
  430. data-domain="la-grange.net"
  431. ><svg xmlns="http://www.w3.org/2000/svg"
  432. width="24" height="24" viewBox="0 0 24 24" fill="none"
  433. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  434. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  435. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  436. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  437. </svg>
  438. <span class="sr-only">[archive]</span></a></em></cite></p>
  439. </blockquote>
  440. <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" hreflang="fr"
  441. title="Consultation de l’article">définition par ici</a>
  442. <a href="/david/cache/2024/89dbef9daef24f311b6401cef62f5855/" hreflang="fr"
  443. data-tippy data-description="Une chaise, un lit, un canapé, une baignoire, une place de métro, un banc dans un parc, un muret. Un fauteuil à roulettes, une file d’attente, une branche, une buche, un abri de tramway, une marche d’escalier. Une plage, un kiosque, un socle de statue, un recoin de cafétéria."
  444. data-source="https://tw5.immateriel.fr/wiki/immateriel/b/YXGEDFB"
  445. data-date="2024-01-11"
  446. data-favicon="https://tw5.immateriel.fr/wiki/immateriel/b/favicon.ico"
  447. data-domain="tw5.immateriel.fr"
  448. ><svg xmlns="http://www.w3.org/2000/svg"
  449. width="24" height="24" viewBox="0 0 24 24" fill="none"
  450. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  451. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  452. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  453. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  454. </svg>
  455. <span class="sr-only">[archive]</span></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>
  456. <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/" hreflang="en"
  457. title="Consultation de l’article (anglais)">compost</a>
  458. <a href="/david/cache/2024/5030196507bcf3e06162e9eaed40abbe/" hreflang="en"
  459. data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
  460. data-source="https://blog.jim-nielsen.com/2023/blogging-and-compositing/"
  461. data-date="2024-01-11"
  462. data-favicon="https://blog.jim-nielsen.com/favicon.ico"
  463. data-domain="blog.jim-nielsen.com"
  464. ><svg xmlns="http://www.w3.org/2000/svg"
  465. width="24" height="24" viewBox="0 0 24 24" fill="none"
  466. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  467. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  468. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  469. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  470. </svg>
  471. <span class="sr-only">[archive]</span></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>
  472. <blockquote lang="en">
  473. <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>
  474. <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>
  475. <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>
  476. <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>
  477. <p><cite><em><a data-link-domain="keningzhu.com" href="https://keningzhu.com/journal/build-a-world-not-an-audience" hreflang="en"
  478. title="Consultation de l’article (anglais)">build a world, not an audience</a>
  479. <a href="/david/cache/2024/cd2fda3dae5d89990f73fbdaa1c3b491/" hreflang="en"
  480. data-tippy data-description="don’t chase your audience, let them find your world."
  481. data-source="https://keningzhu.com/journal/build-a-world-not-an-audience"
  482. data-date="2024-01-11"
  483. data-favicon="https://images.squarespace-cdn.com/content/v1/51e8148de4b01c1eb79c1977/1547586234044-PLNK9XVHXBYWZ5A1673H/favicon.ico?format=100w"
  484. data-domain="keningzhu.com"
  485. ><svg xmlns="http://www.w3.org/2000/svg"
  486. width="24" height="24" viewBox="0 0 24 24" fill="none"
  487. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  488. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  489. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  490. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  491. </svg>
  492. <span class="sr-only">[archive]</span></a></em></cite></p>
  493. </blockquote>
  494. <a href="#hr-26" title="Lien vers cette section de la page"><hr id="hr-26" /></a>
  495. <blockquote lang="en">
  496. <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>
  497. <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>
  498. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/the-personality-of-a-personal-website" hreflang="en"
  499. title="Consultation de l’article (anglais)">The personality of a personal website</a>
  500. <a href="/david/cache/2024/e5c1ca8e3beeb0d256a064832c3566aa/" hreflang="en"
  501. data-tippy data-description="With his “ I am a poem I am not software” post Robin touched on an interesting problem related to personal websites. I’m not going to summarise …"
  502. data-source="https://manuelmoreale.com/the-personality-of-a-personal-website"
  503. data-date="2024-01-11"
  504. data-favicon="https://manuelmoreale.com/favicon.ico"
  505. data-domain="manuelmoreale.com"
  506. ><svg xmlns="http://www.w3.org/2000/svg"
  507. width="24" height="24" viewBox="0 0 24 24" fill="none"
  508. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  509. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  510. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  511. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  512. </svg>
  513. <span class="sr-only">[archive]</span></a></em></cite></p>
  514. </blockquote>
  515. <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/" hreflang="fr"
  516. title="Consultation de l’article">vraiment fidèle</a>
  517. <a href="/david/cache/2024/09c0739036ea4a8b6c985e127fe7e3c8/" hreflang="fr"
  518. data-tippy data-description="J’aurais pu m’en rendre compte il y a vingt ans, mais il me manquait le recul de deux décennies."
  519. data-source="https://thom4.net/2023/02/01/carnets/"
  520. data-date="2024-01-11"
  521. data-favicon="https://thom4.net/assets/favicon-32x32.png"
  522. data-domain="thom4.net"
  523. ><svg xmlns="http://www.w3.org/2000/svg"
  524. width="24" height="24" viewBox="0 0 24 24" fill="none"
  525. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  526. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  527. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  528. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  529. </svg>
  530. <span class="sr-only">[archive]</span></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>
  531. <a href="#hr-27" title="Lien vers cette section de la page"><hr id="hr-27" /></a>
  532. <blockquote lang="en">
  533. <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>
  534. <p><cite><a data-link-domain="erinkissane.com" href="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow" hreflang="en"
  535. title="Consultation de l’article (anglais)">Tomorrow &amp; Tomorrow &amp; Tomorrow</a>
  536. <a href="/david/cache/2024/62bf3ce6ef66e39b7f250a6123d92e66/" hreflang="en"
  537. data-tippy data-description="We realize then that it is just the patterns of events in space which are repeating in the building or the town: and nothing else."
  538. data-source="https://erinkissane.com/tomorrow-and-tomorrow-and-tomorrow"
  539. data-date="2024-01-11"
  540. data-favicon=""
  541. data-domain="erinkissane.com"
  542. ><svg xmlns="http://www.w3.org/2000/svg"
  543. width="24" height="24" viewBox="0 0 24 24" fill="none"
  544. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  545. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  546. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  547. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  548. </svg>
  549. <span class="sr-only">[archive]</span></a></cite></p>
  550. </blockquote>
  551. <p>En rebond de la <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/" hreflang="fr"
  552. title="Consultation de l’article">découverte d’Antoine</a>
  553. <a href="/david/cache/2024/34fec23081019abd741e0578b050c40e/" hreflang="fr"
  554. data-tippy data-description="Je découvre (très) tardivement ce _mantra_, ou plutôt ce positionnement récursif et infini : les pratiques modèlent les outils qui modèlent les pratiques etc."
  555. data-source="https://www.quaternum.net/2024/01/08/tools-shape-practices-shape-tools/"
  556. data-date="2024-01-11"
  557. data-favicon=""
  558. data-domain="quaternum.net"
  559. ><svg xmlns="http://www.w3.org/2000/svg"
  560. width="24" height="24" viewBox="0 0 24 24" fill="none"
  561. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  562. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  563. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  564. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  565. </svg>
  566. <span class="sr-only">[archive]</span></a>. Une autre façon d’être&nbsp;dé·formé.</p>
  567. <a href="#hr-28" title="Lien vers cette section de la page"><hr id="hr-28" /></a>
  568. <p>Deux outils autour de la transformation de&nbsp;vidéos&nbsp;:</p>
  569. <ul>
  570. <li><a data-link-domain="ybouane.com" href="https://ybouane.com/ffmpeg-ui">FFMPEG&nbsp;UI</a></li>
  571. <li><a data-link-domain="mifi.no" href="https://mifi.no/losslesscut/">LosslessCut</a></li>
  572. </ul>
  573. <nav>
  574. <p>
  575. <a href="/david/2024/ecriture/"
  576. title="Liste de tous les articles 2024 associés à cette étiquette"
  577. rel="tag">#écriture</a>
  578. <a href="/david/2024/processus/"
  579. title="Liste de tous les articles 2024 associés à cette étiquette"
  580. rel="tag">#processus</a>
  581. <a href="/david/2024/psychologie/"
  582. title="Liste de tous les articles 2024 associés à cette étiquette"
  583. rel="tag">#psychologie</a>
  584. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  585. </p>
  586. </nav>
  587. <h2>
  588. <a href="/david/2024/01/10/" title="Lien permanent vers cet article">Écriture</a> <time datetime="2024-01-10">10 janvier 2024</time>
  589. </h2>
  590. <blockquote lang="en">
  591. <p>And, I’ll assume we all agree that owning your own website is a <em>good thing</em>, and we all want more people to do&nbsp;it.</p>
  592. <p>But here’s the thing: we need more tools for it. We need simpler tools for it. And we need to make installing and using them <em>trivially simple</em>.</p>
  593. <p>We need more self-hosted platforms for personal publishing that <em>aren’t Wordpress</em>. <mark>And don’t point me to Hugo or Netlify or Eleventy or all those things - all of them are great, but none of them are simple enough.</mark> We need web publishing tools that do not require users to open the Terminal <em>at all</em>. And we need lots of&nbsp;them.</p>
  594. <p>We need a whole <em>galaxy</em> of&nbsp;options.</p>
  595. <p><cite><em><a data-link-domain="gilest.org" href="https://gilest.org/indie-easy.html" hreflang="en"
  596. title="Consultation de l’article (anglais)">Let’s make the indie web easier</a>
  597. <a href="/david/cache/2024/faa1d8cae94da6838ff9351e5df791ca/" hreflang="en"
  598. data-tippy data-description=""
  599. data-source="https://gilest.org/indie-easy.html"
  600. data-date="2024-01-09"
  601. data-favicon="https://gilest.org/favicon.ico"
  602. data-domain="gilest.org"
  603. ><svg xmlns="http://www.w3.org/2000/svg"
  604. width="24" height="24" viewBox="0 0 24 24" fill="none"
  605. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  606. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  607. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  608. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  609. </svg>
  610. <span class="sr-only">[archive]</span></a></em></cite></p>
  611. </blockquote>
  612. <p>Quelques étoiles dans la&nbsp;galaxie&nbsp;:</p>
  613. <ul>
  614. <li><a data-link-domain="atelier.scribouilli.org" href="https://atelier.scribouilli.org/">Scribouilli</a> (<a data-link-domain="github.com" href="https://github.com/Scribouilli/scribouilli">code</a>) par <a data-link-domain="lechappeebelle.team" href="https://lechappeebelle.team/">L’Échappée Belle</a>&#8239;;</li>
  615. <li><a data-link-domain="write.as" href="https://write.as/">Write.as</a> (<a data-link-domain="writefreely.org" href="https://writefreely.org/">open-source</a>) est le plus proche que je pourrais conseiller avec un support commercial de <a data-link-domain="musing.studio" href="https://musing.studio/">Musing Studio</a>&#8239;;</li>
  616. <li><a data-link-domain="masto.host" href="https://masto.host/">mastohost</a> —&nbsp;que <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/">j’utilise</a>&nbsp;— permet d’avoir son propre domaine aussi sans vraiment de connaissance technique, le support est&nbsp;réactif&#8239;;</li>
  617. <li><a data-link-domain="carrd.co" href="https://carrd.co/">Carrd</a> est revenu plusieurs fois dans ma bulle ces derniers&nbsp;temps&#8239;;</li>
  618. <li><a data-link-domain="pika.page" href="https://pika.page/">Pika</a> aussi avec une saveur plus&nbsp;humaine.</li>
  619. </ul>
  620. <p>Il y a une bonne liste dans <a data-link-domain="mastodon.social" href="https://mastodon.social/@matthiasott/111557355056827064">cette discussion</a> et une autre <a data-link-domain="robertkingett.com" href="https://robertkingett.com/links/">par ici</a> (section <q lang="en">Managed Static site hosts or Blogging platforms</q>).</p>
  621. <a href="#hr-21" title="Lien vers cette section de la page"><hr id="hr-21" /></a>
  622. <blockquote lang="en">
  623. <p>Among its suggestions: write a longer headline; split a six-sentence paragraph up because it’s “too long”; and replace “too complex” words like “invariably,” “notoriety,” and “modification.” Dozens of sentences were flagged as being confusing (I disagree) — and it really hated em dashes. I rewrote my prose over and over, but it didn’t seem to satisfy my robot grader. I finally chose one thought per sentence, broke up paragraphs, and replaced words with suggested keywords to get rid of the red dots signaling&nbsp;problems.</p>
  624. <p><mark>The result feels like an AI summary of my story</mark> — at any moment, a paragraph could start with “In conclusion…” or “The next thing to consider is…” The nuance, voice, and unexpected twists and turns have been snuffed out. I’m sure some people would prefer this uncomplicated, beat-by-beat version of the story, but it’s gone from being a story written by a real person to a clinical, stiff series of&nbsp;sentences.</p>
  625. <p><cite><em><a data-link-domain="theverge.com" href="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization" hreflang="en"
  626. title="Consultation de l’article (anglais)">The Perfect Web Page</a>
  627. <a href="/david/cache/2024/3debc675a055d691b32c7d6904531eb4/" hreflang="en"
  628. data-tippy data-description="How the internet reshaped itself around Google’s search algorithms — and into a world where websites look the same."
  629. data-source="https://www.theverge.com/c/23998379/google-search-seo-algorithm-webpage-optimization"
  630. data-date="2024-01-09"
  631. data-favicon="https://cdn.vox-cdn.com/uploads/chorus_asset/file/23989695/favicon_32x32.png"
  632. data-domain="theverge.com"
  633. ><svg xmlns="http://www.w3.org/2000/svg"
  634. width="24" height="24" viewBox="0 0 24 24" fill="none"
  635. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  636. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  637. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  638. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  639. </svg>
  640. <span class="sr-only">[archive]</span></a></em></cite></p>
  641. </blockquote>
  642. <p>Un article de TheVerge qui risque de ne pas être très bien référencé. Le moment où l’on s’adapte pour nourrir les robots n’est pas nouveau, on a «&nbsp;juste&nbsp;» mis une nouvelle étiquette dessus en 2023&nbsp;qui permet aux robots / algorithmes de se battre entre eux de manière&nbsp;explicite.</p>
  643. <p>Pas sûr de vouloir <a data-link-domain="darkvisitors.com" href="https://darkvisitors.com/robots-txt-builder">entrer sur le ring</a> sans m’épuiser très&nbsp;vite.</p>
  644. <blockquote lang="en">
  645. <p>I propose <mark>Data Luddism</mark> as a radical response to the productive power of big data and predictive algorithms. My starting point is not the Romantic neo-Luddism of Kirkpatrick Sale but the historical Luddism of 1811-1816, and the Luddites' own rhetoric regarding their resistance to 'obnoxious&nbsp;machines'.</p>
  646. <p><cite><em><a data-link-domain="danmcquillan.org" href="https://www.danmcquillan.org/dataluddism.html" hreflang="en"
  647. title="Consultation de l’article (anglais)">Data Luddism</a>
  648. <a href="/david/cache/2024/b1da1249f2db388d7e84d6ad23c2fc5d/" hreflang="en"
  649. data-tippy data-description=""
  650. data-source="https://www.danmcquillan.org/dataluddism.html"
  651. data-date="2024-01-09"
  652. data-favicon=""
  653. data-domain="danmcquillan.org"
  654. ><svg xmlns="http://www.w3.org/2000/svg"
  655. width="24" height="24" viewBox="0 0 24 24" fill="none"
  656. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  657. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  658. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  659. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  660. </svg>
  661. <span class="sr-only">[archive]</span></a></em></cite></p>
  662. </blockquote>
  663. <a href="#hr-22" title="Lien vers cette section de la page"><hr id="hr-22" /></a>
  664. <blockquote lang="en">
  665. <p>The <code>everything</code> package and its 3,000+ sub-packages have caused a Denial of Service (DOS) for anyone who installs it. We’re talking about storage space running out and system resource&nbsp;exhaustion.</p>
  666. <p>But that’s not all. The creator took their prank to the next level by setting up http://everything.npm.lol, showcasing the chaos they unleashed. They even included a meme from Skyrim, adding some humor (or mockery, depending on your perspective) to the&nbsp;situation.</p>
  667. <p><cite><em><a data-link-domain="socket.dev" href="https://socket.dev/blog/when-everything-becomes-too-much" hreflang="en"
  668. title="Consultation de l’article (anglais)">When “Everything” Becomes Too Much: The npm Package Chaos of 2024</a>
  669. <a href="/david/cache/2024/4a56aa5497e68df0c5bb1d5331203219/" hreflang="en"
  670. data-tippy data-description="An NPM user named PatrickJS launched a troll campaign with a package called everything, which depends on all public npm packages."
  671. data-source="https://socket.dev/blog/when-everything-becomes-too-much"
  672. data-date="2024-01-09"
  673. data-favicon="https://socket.dev/favicon-32x32.png"
  674. data-domain="socket.dev"
  675. ><svg xmlns="http://www.w3.org/2000/svg"
  676. width="24" height="24" viewBox="0 0 24 24" fill="none"
  677. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  678. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  679. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  680. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  681. </svg>
  682. <span class="sr-only">[archive]</span></a></em></cite></p>
  683. </blockquote>
  684. <p><code>npm install lol</code> 🤣</p>
  685. <p>En <a data-link-domain="jop2024.lol" href="https://jop2024.lol/">parlant de lol</a>…</p>
  686. <a href="#hr-23" title="Lien vers cette section de la page"><hr id="hr-23" /></a>
  687. <blockquote>
  688. <p>Si les fictions, celles qu’on s’invente, celles que nous souffle notre inconscient comme celles qu’on lit, ont un rôle majeur à jouer dans la fabrique de notre rapport au monde, alors voilà qui plaide pour redoubler d’ardeur quand il s’agit de nourrir soigneusement nos imaginaires. Quand on voit les déferlements de violence et le virilisme qui caractérisent les héros modernes, on ne peut que s’interroger sur le type de rapport au monde que cela crée. C’est la raison pour laquelle <mark>la bataille culturelle passe aussi par la création de nouvelles utopies,</mark> ni niaises ni naïves, qui puissent donner d’autres matières à rêver qu’un monde dévasté et peuplé de soldats&nbsp;augmentés.</p>
  689. <p>[…] Nous avons besoin d’autres cadres de pensée dans lesquels évoluer. Nous avons besoin d’<em>ailleurs culturels</em> pour sortir de l’ornière et nous&nbsp;dérouter.</p>
  690. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  691. </blockquote>
  692. <p>Nous accueillons une nouvelle personne chez Scopyleft, l’occasion de former une <a href="/david/2021/03/17/">nouvelle équipe</a>. Ces <em>ailleurs culturels</em> doivent pouvoir être partagés et inspirer pour réussir à&nbsp;essaimer.</p>
  693. <p>C’est l’une de mes frustrations à ne plus <a href="/david/2021/01/26/">participer à des regroupements</a>, ne pas partager par ce biais là les expériences menées depuis 11&nbsp;ans en matière d’horizontalité et de travail en&nbsp;commun·s.</p>
  694. <a href="#hr-24" title="Lien vers cette section de la page"><hr id="hr-24" /></a>
  695. <blockquote lang="en">
  696. <p>So when we wonder where all the websites have gone, know it’s the <em>curators</em> we’re nostalgic for because the curators showed us the best the web had to offer once upon a time. And the curators— the tenders, aggregators, collectors, and connectors— can bring us back to something better. Because it’s still out there, we just have to find&nbsp;it.</p>
  697. <p>Here’s the best part. <mark>You can be that curator right now, at this very moment.</mark> You can start to rebuild the interconnectivity that made the web fun to explore. And you don’t need to be a computer scientist to do&nbsp;it.</p>
  698. <p><cite><em><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/" hreflang="en"
  699. title="Consultation de l’article (anglais)">Where have all the websites gone?</a>
  700. <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"
  701. data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."
  702. data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"
  703. data-date="2024-01-09"
  704. data-favicon="https://www.fromjason.xyz/img/favicon.png"
  705. data-domain="fromjason.xyz"
  706. ><svg xmlns="http://www.w3.org/2000/svg"
  707. width="24" height="24" viewBox="0 0 24 24" fill="none"
  708. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  709. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  710. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  711. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  712. </svg>
  713. <span class="sr-only">[archive]</span></a></em></cite></p>
  714. </blockquote>
  715. <p>Dixième jour que j’ai l’impression de faire des billets trop longs. Beaucoup d’éparpillement suite à un cumul d’onglets ouverts, parfois depuis bien longtemps. Ça vous laisse un petit exercice de <q lang="en">curation</q> vous&nbsp;aussi&nbsp;:).</p>
  716. <nav>
  717. <p>
  718. <a href="/david/2024/apprentissage/"
  719. title="Liste de tous les articles 2024 associés à cette étiquette"
  720. rel="tag">#apprentissage</a>
  721. <a href="/david/2024/ecriture/"
  722. title="Liste de tous les articles 2024 associés à cette étiquette"
  723. rel="tag">#écriture</a>
  724. <a href="/david/2024/ia/"
  725. title="Liste de tous les articles 2024 associés à cette étiquette"
  726. rel="tag">#IA</a>
  727. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  728. </p>
  729. </nav>
  730. <h2>
  731. <a href="/david/2024/01/03/" title="Lien permanent vers cet article">Appariement</a> <time datetime="2024-01-03">3 janvier 2024</time>
  732. </h2>
  733. <p>Je me réveille avec une envie d’expérimentations typographiques. Après une nuit de réflexion, ce sera <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/century-supra/">Century Supra</a> qui fera la paire avec <a data-link-domain="mbtype.com" href="https://mbtype.com/fonts/concourse/">Concourse</a> pour du <em>sans serif</em> (oui, je suis fan du travail de Matthew Butterick depuis très longtemps). Il va falloir que je m’habitue à ce que mon édition dans iA&nbsp;Writer ne ressemble plus au rendu sur la prévisualisation du&nbsp;site.</p>
  734. <p>Au niveau de la taille, j’ai enfin l’occasion de tester un <a data-link-domain="utopia.fyi" href="https://utopia.fyi/blog/css-modular-scales">échelle modulaire</a> et c’est suffisamment adaptatif pour le moment. Il faudra que je retravaille certains espacements mais je n’en suis pas encore à cette étape. Je ne comprends pas encore tout à fait la formule et j’arrive à vivre&nbsp;avec.</p>
  735. <p>Je me rappelle aussi qu’un des intérêts que j’avais trouvé aux <em>CSS&nbsp;layers</em> c’est de pouvoir mieux documenter la CSS alors je sors les styles en ligne de l’itération d’hier pour avoir une feuille dédiée dont je commence à documenter les différentes&nbsp;sections.</p>
  736. <p>Je m’amuse comme un petit fou même si la CSS fait subitement&nbsp;350&nbsp;lignes.</p>
  737. <a href="#hr-4" title="Lien vers cette section de la page"><hr id="hr-4" /></a>
  738. <blockquote>
  739. <p><mark>Je crois qu’on écrit pour créer un monde dans lequel on puisse vivre.</mark> Je ne pouvais vivre dans aucun de ceux qui m’étaient proposés&nbsp;: le monde de mes parents, le monde de la guerre, le monde de la politique. Il me fallait créer un monde à moi, comme un climat, un pays, une atmosphère, où je puisse respirer, régner et me régénérer lorsque j’étais détruite par la&nbsp;vie.</p>
  740. <p><cite><em>Journal 1947-1955</em>, Anaïs&nbsp;Nin</cite></p>
  741. </blockquote>
  742. <p>L’introduction de <em>Alors nous irons trouver la beauté ailleurs</em> par Corinne Morel Darleux m’aura suffit pour&nbsp;aujourd’hui&nbsp;🙂.</p>
  743. <a href="#hr-5" title="Lien vers cette section de la page"><hr id="hr-5" /></a>
  744. <p>On a couru 10&#8239;km avec l’enfant. À ce rythme là, je ne sais pas si je vais pouvoir suivre longtemps&#8239;! La récompense a été de croiser un renard urbain de vraiment très près, moins de 5&nbsp;mètres, que l’on a bien eu le temps d’observer vu qu’il courrait vers nous. Par contre un flasque de plus de 10&nbsp;ans s’est percée dans ma poche pendant la course, j’étais bien trempé avec du vent. Il faisait&nbsp;-6°C.</p>
  745. <p>Tout ça pour aller chercher un bidon d’huile pour la transmission de la&nbsp;voiture.</p>
  746. <nav>
  747. <p>
  748. <a href="/david/2024/accompagnement/"
  749. title="Liste de tous les articles 2024 associés à cette étiquette"
  750. rel="tag">#accompagnement</a>
  751. <a href="/david/2024/ecriture/"
  752. title="Liste de tous les articles 2024 associés à cette étiquette"
  753. rel="tag">#écriture</a>
  754. <a href="/david/2024/web/"
  755. title="Liste de tous les articles 2024 associés à cette étiquette"
  756. rel="tag">#web</a>
  757. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  758. </p>
  759. </nav>
  760. <form action="/david/recherche/" method="get">
  761. <fieldset>
  762. <legend>Recherche</legend>
  763. <label for="input-search">Termes de votre recherche :</label>
  764. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  765. <input type="submit" value="Chercher">
  766. <p id="indexation-infos">
  767. <small>
  768. Seuls les contenus de ces 8 dernières années sont indexés.
  769. </small>
  770. </p>
  771. </fieldset>
  772. </form>
  773. <aside>
  774. <theme-toggle></theme-toggle>
  775. </aside>
  776. </article>
  777. <hr>
  778. <footer>
  779. <p>
  780. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  781. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  782. <a href="http://larlet.com"
  783. title="Go to my English profile"
  784. data-instant>Pro</a>
  785. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  786. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  787. </p>
  788. <template id="theme-selector">
  789. <form>
  790. <style type="text/css">
  791. fieldset div {
  792. text-align: center;
  793. }
  794. </style>
  795. <fieldset>
  796. <legend>Thème</legend>
  797. <div>
  798. <label>
  799. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  800. Auto
  801. </label>
  802. <label>
  803. <input type="radio" value="dark" name="chosen-color-scheme">
  804. Foncé
  805. </label>
  806. <label>
  807. <input type="radio" value="light" name="chosen-color-scheme">
  808. Clair
  809. </label>
  810. </div>
  811. </fieldset>
  812. </form>
  813. </template>
  814. </footer>
  815. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  816. <script>
  817. class ThemeToggle extends HTMLElement {
  818. constructor() {
  819. super()
  820. const themeSelectorTemplate = document.querySelector('#theme-selector')
  821. const form = themeSelectorTemplate.content.firstElementChild
  822. this.attachShadow({ mode: 'open' })
  823. this.shadowRoot.appendChild(form.cloneNode(true))
  824. }
  825. connectedCallback() {
  826. const form = this.shadowRoot.querySelector('form')
  827. form.addEventListener('change', (e) => {
  828. const chosenColorScheme = e.target.value
  829. localStorage.setItem('theme', chosenColorScheme)
  830. toggleTheme(chosenColorScheme)
  831. })
  832. const selectedTheme = localStorage.getItem('theme')
  833. if (selectedTheme && selectedTheme !== 'undefined') {
  834. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  835. }
  836. }
  837. }
  838. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  839. window.addEventListener('load', () => {
  840. let colorsLayer = undefined
  841. let hasDarkRules = false
  842. for (const styleSheet of Array.from(document.styleSheets)) {
  843. let mediaRules = []
  844. for (const layerRule of styleSheet.cssRules) {
  845. if (!(layerRule instanceof CSSLayerBlockRule)) {
  846. continue
  847. }
  848. if (layerRule.name === 'colors') {
  849. colorsLayer = layerRule
  850. }
  851. for (const cssRule of layerRule.cssRules) {
  852. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  853. continue
  854. }
  855. // WARNING: Safari does not have/supports `conditionText`.
  856. if (cssRule.conditionText) {
  857. if (cssRule.conditionText !== prefersColorSchemeDark) {
  858. continue
  859. }
  860. } else {
  861. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  862. continue
  863. }
  864. }
  865. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  866. }
  867. }
  868. // WARNING: do not try to insert a Rule to a styleSheet you are
  869. // currently iterating on, otherwise the browser will be stuck
  870. // in a infinite loop…
  871. for (const mediaRule of mediaRules) {
  872. // Safari requires the `0` second parameter (even if default).
  873. colorsLayer.insertRule(mediaRule.cssText, 0)
  874. hasDarkRules = true
  875. }
  876. }
  877. if (hasDarkRules) {
  878. if ('customElements' in window && !customElements.get('theme-toggle')) {
  879. customElements.define('theme-toggle', ThemeToggle)
  880. }
  881. }
  882. })
  883. </script>
  884. </body>
  885. </html>