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

9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721
  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 #lecture
  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 #lecture">
  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. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. details[open] summary {
  109. display: none;
  110. }
  111. </style>
  112. <body data-instant-intensity="viewport-all">
  113. <article>
  114. <header>
  115. <hgroup>
  116. <h1>#lecture</h1>
  117. <p>Publications relatives à cette étiquette</p>
  118. </hgroup>
  119. </header>
  120. <nav>
  121. <p>
  122. <a href="/david/" title="Aller à l’accueil">
  123. Accueil</a>
  124. <a rel="tags"
  125. href="/david/2024/#tags"
  126. title="Liste de toutes les étiquettes">
  127. Étiquettes</a>
  128. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  129. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  130. </p>
  131. </nav>
  132. <h2>
  133. <a href="/david/2024/05/13/" title="Lien permanent vers cet article">Tensions</a> <time datetime="2024-05-13">13 mai 2024</time>
  134. </h2>
  135. <blockquote>
  136. <p>Décadence sans cesse accentuée, dont on peut mesurer les résultats&nbsp;: toutes les souffrances dont l’humanité a été la victime peuvent être imputées au seul fait que, dans toute l’histoire de la Galaxie, nul homme, avant Hari Seldon et quelques rares disciples après lui, ne fut véritablement capable de comprendre son semblable. <mark>Chaque être humain vivait derrière un mur impénétrable, un brouillard étouffant, en dehors duquel nul autre que lui n’existait.</mark> Parfois, quelques faibles signaux émergeaient des ténèbres de la profonde caverne où chacun se trouvait enfoui et leurs mains d’aveugles se rapprochaient les unes des autres, à tâtons. Et cependant, parce qu’ils ne se connaissaient pas l’un l’autre, parce qu’ils ne pouvaient se comprendre, parce qu’ils n’osaient pas se faire mutuellement confiance et nourrissaient depuis leur plus tendre enfance les terreurs et l’insécurité nées de cet ultime isolement, ils éprouvaient cette crainte de l’homme traqué par l’homme, cette sauvage rapacité de l’homme pour&nbsp;l’homme.</p>
  137. <p>Pendant des dizaines de milliers d’années, les pieds avaient foulé cette boue qui collait à leurs semelles et maintenait au niveau du cloaque leurs âmes qui, pendant un temps équivalent, avaient été dignes de la fraternité des&nbsp;étoiles.</p>
  138. <p>D’instinct, l’Homme avait pourtant tout tenté pour s’affranchir du langage articulé. La sémantique, la logique symbolique, la psychanalyse&nbsp;: autant de méthodes par lesquelles il avait été possible d’affiner, voire de transcender la&nbsp;parole.</p>
  139. <p><cite><em>Fondation 1</em>, Isaac Asimov, traduit de l’américain par Jean Rosenthal et Pierre Billon, complété et harmonisé par Philippe&nbsp;Gindre</cite></p>
  140. </blockquote>
  141. <p>Les tensions sont un gros frein à l’écriture dans mon cas. Même si je parle de choses assez intimes par ici, je n’oserais pas exposer l’intimité des autres. D’autant qu’il s’agirait de ma <a href="/david/2024/05/12/" title="Alien">propre</a> interprétation de notre&nbsp;communication.</p>
  142. <p><em>Alors comment&nbsp;faire&#8239;?</em></p>
  143. <p>Ce sont aussi des moments où il m’est difficile d’écrire sur quelque chose d’autre en attendant que ça passe/évolue. Je vais essayer de garder cette délicatesse en me confinant au silence pour&nbsp;l’instant.</p>
  144. <p>PS&nbsp;: j’essaye de déguster cette première lecture de <a href="/david/2024/04/13/" title="Fondation">Fondation</a>&nbsp;😋.</p>
  145. <blockquote>
  146. <p>«&nbsp;[…] Vos professeurs n’ont plus rien à vous apprendre, désormais. Le moment est venu pour vous, et quelques-uns de vos condisciples, de commencer votre apprentissage. Tout vous destine à&nbsp;l’Oratoriat.&nbsp;»</p>
  147. <p>Mouvements divers de l’autre côté de la&nbsp;table.</p>
  148. <p>«&nbsp;Voyons, voyons, reprenez votre sang-froid. Vous aviez formé l’espoir de vous qualifier pour ce poste. Vous avez craint de ne pas posséder les qualités requises. En réalité, l’espoir et la peur sont des faiblesses. Vous saviez parfaitement que vos capacités étaient suffisantes, et cependant vous hésitez à l’admettre, dans la crainte d’être taxé de présomption, ce qui serait une cause d’élimination.<br />
  149. Ça n’a aucun sens&#8239;! L’homme le plus stupide est celui qui n’est pas conscient de sa sagesse. La conscience même que vous avez de vos qualités n’est qu’un point de plus en votre&nbsp;faveur.&nbsp;»</p>
  150. <p>Détente de l’autre côté de la&nbsp;table.</p>
  151. <p>«&nbsp;Exactement. Maintenant vous vous sentez mieux et vous avez abaissé votre garde. Vous êtes plus apte à vous concentrer et plus apte à comprendre. <mark>Souvenez-vous que, pour atteindre à une véritable efficacité, il n’est pas nécessaire de maintenir votre esprit enfermé sous une chape de plomb.</mark> De vous trouver ainsi sur la défensive, un sondeur mental avisé tirera autant d’enseignements que si vous lui livriez un esprit sans défense. J’estime au contraire qu’il sied de cultiver une innocence, une conscience de ses atouts personnels, une candeur consciente et sans égoïsme qui ne laisse plus rien de caché. Mon esprit vous est largement ouvert. Qu’il en soit de même pour chacun de&nbsp;nous.</p>
  152. <p>«&nbsp;Ce n’est pas chose facile que d’être orateur, poursuivit-il. Avant tout, il n’est pas aisé d’être psychohistorien, et le meilleur des psychohistoriens ne possède pas nécessairement les qualités requises pour faire un bon Orateur. Il existe à ce point de vue une distinction. Un Orateur doit non seulement être rompu aux subtilités mathématiques du plan Seldon, mais avoir foi en lui et en ses destinées. Il doit aimer le Plan d’un amour sincère et sans partage. […]&nbsp;»</p>
  153. <p><cite><em>Fondation 1</em>, Isaac Asimov, traduit de l’américain par Jean Rosenthal et Pierre Billon, complété et harmonisé par Philippe&nbsp;Gindre</cite></p>
  154. </blockquote>
  155. <nav>
  156. <p>
  157. <a href="/david/2024/ecriture/"
  158. title="Liste de tous les articles 2024 associés à cette étiquette"
  159. rel="tag">#écriture</a>
  160. <a href="/david/2024/lecture/"
  161. title="Liste de tous les articles 2024 associés à cette étiquette"
  162. rel="tag">#lecture</a>
  163. <a href="/david/2024/psychologie/"
  164. title="Liste de tous les articles 2024 associés à cette étiquette"
  165. rel="tag">#psychologie</a>
  166. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  167. </p>
  168. </nav>
  169. <h2>
  170. <a href="/david/2024/04/13/" title="Lien permanent vers cet article">Fondation</a> <time datetime="2024-04-13">13 avril 2024</time>
  171. </h2>
  172. <blockquote>
  173. <p>— A mesure que Trantor devient plus spécialisée, dit Gaal, elle devient plus vulnérable, moins apte à se défendre. Qui plus est, à mesure que s’y développe l’administration centrale de l’Empire, la planète devient une proie plus enviable. Étant donné les difficultés croissantes que soulève le problème de la succession impériale, les querelles toujours plus violentes qui opposent les grandes familles les unes aux autres, le sentiment de la responsabilité envers la société va s’affaiblissant.<br />
  174. — C’est suffisant. Et quelles sont les probabilités numériques de destruction totale d’ici trois siècles&#8239;?<br />
  175. — Je ne saurais vous le dire.<br />
  176. — […] Le chiffre exact est 92,5&#8239;%.<br />
  177. — Voilà donc pourquoi on vous appelle Cassandre Seldon, dit Gaal. Je n’ai rien vu de tout cela dans les publications scientifiques.<br />
  178. — On ne peut pas publier des choses pareilles, voyons. <mark>Vous ne pensez tout de même pas que l’Empire irait révéler ainsi sa faiblesse.</mark> C’est la base de la psychohistoire la plus&nbsp;élémentaire.</p>
  179. <p><cite><em>Fondation 1</em>, Isaac Asimov, traduit de l’américain par Jean Rosenthal et Pierre Billon, complété et harmonisé par Philippe&nbsp;Gindre</cite></p>
  180. </blockquote>
  181. <p>Après un <a href="/david/2024/02/06/" title="Anneau">séjour en terre du milieu</a>, me voici sur <em>Trantor</em>. Je ne l’ai jamais lu mais c’est la série TV qui m’a donné envie de&nbsp;creuser.</p>
  182. <p>L’interprétation de ce passage est laissée comme&nbsp;exercice.</p>
  183. <blockquote>
  184. <p>D’après une ou deux personnes bien informées, je suis un genre de geek de tout. Un Sheldon en herbe, mais&nbsp;sociable.</p>
  185. <p><cite><em><a data-link-domain="nota-bene.org" href="https://nota-bene.org/Geek-de-tout" hreflang="fr"
  186. title="Consultation de l’article">Geek de tout | nota-bene.org</a>
  187. <a href="/david/cache/2024/e4ca68d300ca1572c2a41b6e2887c663/" hreflang="fr"
  188. data-tippy data-description="Un inventaire à la Prévert, pour rire."
  189. data-source="https://nota-bene.org/Geek-de-tout"
  190. data-date="2024-04-14"
  191. data-favicon="https://nota-bene.org/squelettes/favicon.ico"
  192. data-domain="nota-bene.org"
  193. ><svg xmlns="http://www.w3.org/2000/svg"
  194. width="24" height="24" viewBox="0 0 24 24" fill="none"
  195. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  196. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  197. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  198. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  199. </svg>
  200. <span class="sr-only">[archive]</span></a></em></cite></p>
  201. </blockquote>
  202. <a href="#hr-148" title="Lien vers cette section de la page"><hr id="hr-148" /></a>
  203. <blockquote lang="en">
  204. <p>I’ve found I personally have three <em>states</em> of&nbsp;being…</p>
  205. <ul>
  206. <li><strong>Hyperfocus</strong>, where I’m deeply focused on one thing and phenomenally&nbsp;productive.</li>
  207. <li><strong>Physical</strong>, where I have lots of energy, but little mental&nbsp;focus.</li>
  208. <li><strong>Burnt out</strong>, where both my mental and physical energy are&nbsp;low.</li>
  209. </ul>
  210. <p>Your states of being might be different. These are three I tend to operate in most&nbsp;frequently.</p>
  211. <p><cite><em><a data-link-domain="adhdftw.com" href="https://adhdftw.com/follow-your-adhd-flow/" hreflang="en"
  212. title="Consultation de l’article (anglais)">Follow your ADHD flow</a>
  213. <a href="/david/cache/2024/3d60afcca78959bd637ac725d0a7fc7e/" hreflang="en"
  214. data-tippy data-description="One of the most things that’s had the biggest impact on my ability to be happy and fulfilled has been working with my ADHD instead of trying to fight against it."
  215. data-source="https://adhdftw.com/follow-your-adhd-flow/"
  216. data-date="2024-04-14"
  217. data-favicon="https://adhdftw.com/img/favicon.ico"
  218. data-domain="adhdftw.com"
  219. ><svg xmlns="http://www.w3.org/2000/svg"
  220. width="24" height="24" viewBox="0 0 24 24" fill="none"
  221. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  222. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  223. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  224. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  225. </svg>
  226. <span class="sr-only">[archive]</span></a></em></cite></p>
  227. </blockquote>
  228. <p>Peut-être que cette notion de <a href="/david/2024/03/08/" title="Flow">flow</a> n’est pas si anodine en fait&nbsp;🤔. La communauté sur Discord évoque notamment l’importance de l’exercice comme outil de canalisation et <a href="/david/2024/04/14/">ce dernier mois</a> je ne peux que constater à quel point c’est vrai <em>pour moi</em>. J’ai un peu de mal avec les étiquettes d’auto-défintion/enfermement mais je constate aussi que pour beaucoup de personnes cela permet de reconsidérer ses propres fondations pour s’accepter et mieux se re·connaître&nbsp;ainsi.</p>
  229. <p>Une identité n’est pas une suite d’acronymes mais plutôt une suite d’explorations et de compréhensions de ce que signifient ces acronymes dans sa propre façon&nbsp;d’être&#8239;?</p>
  230. <nav>
  231. <p>
  232. <a href="/david/2024/dystopie/"
  233. title="Liste de tous les articles 2024 associés à cette étiquette"
  234. rel="tag">#dystopie</a>
  235. <a href="/david/2024/lecture/"
  236. title="Liste de tous les articles 2024 associés à cette étiquette"
  237. rel="tag">#lecture</a>
  238. <a href="/david/2024/psychologie/"
  239. title="Liste de tous les articles 2024 associés à cette étiquette"
  240. rel="tag">#psychologie</a>
  241. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  242. </p>
  243. </nav>
  244. <h2>
  245. <a href="/david/2024/03/24/" title="Lien permanent vers cet article">Cage</a> <time datetime="2024-03-24">24 mars 2024</time>
  246. </h2>
  247. <blockquote>
  248. <p>«&nbsp;Serai-je toujours choisie&#8239;? dit-elle avec amertume. Serai-je toujours laissée derrière quand les cavaliers partiront, pour garder la maison pendant qu’ils se couvrent de gloire, et veiller à ce que le repas et le lit soient prêts à leur&nbsp;retour&#8239;?&nbsp;»</p>
  249. <p>«&nbsp;Un jour viendra bientôt, peut-être, où nul ne rentrera, dit-il. Alors, il y aura besoin de courage sans gloire, car nul ne se souviendra des exploits accomplis dans l’ultime défense de vos foyers. Mais ces exploits n’auront pas été moins vaillants pour être restés sans&nbsp;éloges.&nbsp;»</p>
  250. <p>Et elle répondit: «&nbsp;Tout cela revient à dire&nbsp;: vous êtes une femme, et votre place est à la maison. Mais quand les hommes seront morts au combat, dans l’honneur, vous pourrez brûler avec elle, car les hommes n’auront plus besoin d’un toit. Mais je suis de la Maison d’Eorl, et non une femme servante. Je puis monter à cheval, je sais manier l’épée&#8239;; et je ne crains ni la souffrance, ni la&nbsp;mort.&nbsp;»</p>
  251. <p>«&nbsp;Que craignez-vous donc, madame&#8239;?&nbsp;»&nbsp;demanda-t-il.</p>
  252. <p>«&nbsp;<mark>Une cage</mark>, dit-elle. Vivre derrière des barreaux, jusqu’à ce que l’habitude et la vieillesse s’en accommodent, et que l’espoir d’accomplir de hauts faits soit au-delà de tout souvenir et de toute&nbsp;envie.&nbsp;»</p>
  253. <p><cite><em>Le Seigneur des Anneaux</em>, J.R.R. Tolkien, traduction de Daniel&nbsp;Lauzon</cite></p>
  254. </blockquote>
  255. <p>Il s’agit de mon extrait favori de la trilogie. <em>Éowyn forever&nbsp;&lt;3.</em></p>
  256. <a href="#hr-132" title="Lien vers cette section de la page"><hr id="hr-132" /></a>
  257. <blockquote>
  258. <p>Bref, il s’agit de modéliser le mieux possible les <strong>besoins éditoriaux</strong> pour ensuite – <em>et seulement ensuite&#8239;!</em> – réunir les ingrédients techniques. (On voit souvent le contraire arriver en pratique&nbsp;: on plaque des solutions existantes sans nécessairement tenir compte des spécificités propres à un problème, un contexte, une communauté.) Il existe souvent plusieurs solutions possibles, plusieurs morceaux de code différents qui produisent, à première vue, un effet similaire&#8239;; <mark>sauf que les démarches ne se valent pas toutes,</mark> et c’est justement en tenant compte du contexte particulier qu’on peut trouver chaussure à son pied (ou à celui des&nbsp;autres).</p>
  259. <p><cite><em><a data-link-domain="lobrassard.net" href="https://www.lobrassard.net/carnet/2024-03-22-ecrire-coder-editorial.html" hreflang="fr"
  260. title="Consultation de l’article">Écrire ou coder l’éditorial</a>
  261. <a href="/david/cache/2024/bb9ae7eeac8484bf3e675d196b8dc8b9/" hreflang="fr"
  262. data-tippy data-description="Carnet de recherche de Louis-Olivier Brassard."
  263. data-source="https://www.lobrassard.net/carnet/2024-03-22-ecrire-coder-editorial.html"
  264. data-date="2024-03-25"
  265. data-favicon="data:;base64,iVBORw0KGgo="
  266. data-domain="lobrassard.net"
  267. ><svg xmlns="http://www.w3.org/2000/svg"
  268. width="24" height="24" viewBox="0 0 24 24" fill="none"
  269. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  270. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  271. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  272. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  273. </svg>
  274. <span class="sr-only">[archive]</span></a></em></cite></p>
  275. </blockquote>
  276. <p>CSS ⨯ Grec ancien ⨯&nbsp;poésie.</p>
  277. <a href="#hr-133" title="Lien vers cette section de la page"><hr id="hr-133" /></a>
  278. <blockquote lang="en">
  279. <p>In principle, these modern pages that burn a ton of CPU when loading could be doing pre-work that means that later interactions on the page are faster and cheaper than on the pages that do less up-front work (this is a common argument in favor of these kinds of pages), <mark>but that’s not the case for pages tested, which are slower</mark> to load initially, slower on subsequent loads, and slower after they’ve&nbsp;loaded.</p>
  280. <p><cite><em><a data-link-domain="danluu.com" href="https://danluu.com/slow-device/" hreflang="en"
  281. title="Consultation de l’article (anglais)">How web bloat impacts users with slow devices</a>
  282. <a href="/david/cache/2024/a988555163e09729b925dbf715ce256c/" hreflang="en"
  283. data-tippy data-description="More of the web is becoming inaccessible to people with low-end devices even if they have high-end connections."
  284. data-source="https://danluu.com/slow-device/"
  285. data-date="2024-03-25"
  286. data-favicon="data:;base64,="
  287. data-domain="danluu.com"
  288. ><svg xmlns="http://www.w3.org/2000/svg"
  289. width="24" height="24" viewBox="0 0 24 24" fill="none"
  290. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  291. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  292. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  293. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  294. </svg>
  295. <span class="sr-only">[archive]</span></a></em></cite></p>
  296. </blockquote>
  297. <p>L’article déprimant du jour que devraient lire tou·tes les dévelopeur·euses avec leurs processeurs MX et leurs&nbsp;iPhones.</p>
  298. <p><em>Je l’ai&nbsp;lu.</em></p>
  299. <nav>
  300. <p>
  301. <a href="/david/2024/courage/"
  302. title="Liste de tous les articles 2024 associés à cette étiquette"
  303. rel="tag">#courage</a>
  304. <a href="/david/2024/lecture/"
  305. title="Liste de tous les articles 2024 associés à cette étiquette"
  306. rel="tag">#lecture</a>
  307. <a href="/david/2024/poesie/"
  308. title="Liste de tous les articles 2024 associés à cette étiquette"
  309. rel="tag">#poésie</a>
  310. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  311. </p>
  312. </nav>
  313. <h2>
  314. <a href="/david/2024/03/16/" title="Lien permanent vers cet article">Descriptions</a> <time datetime="2024-03-16">16 mars 2024</time>
  315. </h2>
  316. <blockquote>
  317. <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>
  318. <p><mark>Enfin, quand la nuit se fit vieille et que la fatigue les eut déjà rattrapés</mark>&nbsp;[…]</p>
  319. <p>Dès la tombée de la nuit, la terre s’étant évanouie en un gris informe, ils se remirent en route. […]</p>
  320. <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>
  321. <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>
  322. <p><cite><em>Le Seigneur des Anneaux</em>, J.R.R. Tolkien, traduction de Daniel&nbsp;Lauzon</cite></p>
  323. </blockquote>
  324. <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>
  325. <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"
  326. title="Consultation de l’article">Sylvain Tesson</a>
  327. <a href="/david/cache/2024/d767413ad435c2d833e7d0711c40c370/" hreflang="fr"
  328. 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…"
  329. data-source="https://comptoir.org/2024/03/11/sylvain-tesson-les-vers-de-la-reaction/"
  330. data-date="2024-03-17"
  331. data-favicon="https://secure.gravatar.com/blavatar/d516daa7fb122f031098a3523884605516add46cc63f1940d3e69aa42056b5c2?s=32"
  332. data-domain="comptoir.org"
  333. ><svg xmlns="http://www.w3.org/2000/svg"
  334. width="24" height="24" viewBox="0 0 24 24" fill="none"
  335. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  336. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  337. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  338. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  339. </svg>
  340. <span class="sr-only">[archive]</span></a>…</p>
  341. <nav>
  342. <p>
  343. <a href="/david/2024/aventure/"
  344. title="Liste de tous les articles 2024 associés à cette étiquette"
  345. rel="tag">#aventure</a>
  346. <a href="/david/2024/ecriture/"
  347. title="Liste de tous les articles 2024 associés à cette étiquette"
  348. rel="tag">#écriture</a>
  349. <a href="/david/2024/lecture/"
  350. title="Liste de tous les articles 2024 associés à cette étiquette"
  351. rel="tag">#lecture</a>
  352. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  353. </p>
  354. </nav>
  355. <h2>
  356. <a href="/david/2024/03/10/" title="Lien permanent vers cet article">Dune</a> <time datetime="2024-03-10">10 mars 2024</time>
  357. </h2>
  358. <p>Je crois bien n’être allé que 3&nbsp;fois dans une salle de cinéma ces 10&nbsp;dernières années. Et puis l’occasion s’est présentée, sans prévenir, aujourd’hui. J’avais <a href="/david/2021/10/18/">quelques retenues sur la première partie</a> mais j’attendais quand même avec impatience la suite. Et j’avais réussi à ne pas trop regarder les bandes annonces, ni les&nbsp;critiques.</p>
  359. <p><em>Note&nbsp;: ça va forcément divulgâcher un peu dans la&nbsp;suite.</em></p>
  360. <p>L’adaptation est bonne, le défi était de taille et —&nbsp;en dépit des quelques ajustements qui piquent un peu le <em>fan</em> que je suis (surtout vers la fin&#8239;!)&nbsp;— la scénarisation est cohérente. Ce qui n’était pas une mince affaire car encore une fois la temporalité n’est pas évidente et rendre l’évolution des personnages visible avec tout ce qui est censé se passer dans leur tête requiert des redéfinitions et des&nbsp;raccourcis.</p>
  361. <p>Mon erreur a probablement été de choisir de l’IMAX alors que c’était Hans “<a data-link-domain="20k.org" href="https://www.20k.org/episodes/boojstrikesback">booj</a>” Zimmer aux platines. Autant dire que le siège a vibré la moitié du film&#8239;! Au-delà de la bande originale, le son a vraiment été travaillé mais je crois que c’était un peu trop pour mes vieilles oreilles plus vraiment adaptées à de tels volumes. Il y a des moments où j’ai même trouvé que ça altérait la compréhension des dialogues… j’avais un peu l’impression de me noyer dans la volonté im·mer·sive alors que l’on est en plein désert. Je doute de retourner dans une salle de si&nbsp;tôt.</p>
  362. <p>Tout ce qui tourne autour des vers est bien fait, j’avais toujours eu du mal à me faire ma propre représentation des tailles et interactions à la lecture et là ça me semble être respecté / réaliste. Idem pour les <em>Sietchs</em>, c’est fidèle à la projection mentale que je pouvais m’en faire, même si l’on n’en voit pas grand chose au final. J’ai particulièrement apprécié le choix de faire une <em>Chani</em> forte qui est davantage consciente des enjeux et des répercutions. La jalousie aurait mérité d’être plus subtile, la différence entre la femme (politique) de Paul et sa compagne (amoureuse) est vraiment explicite dans le&nbsp;livre.</p>
  363. <p>Paul Muad’dib perd un peu trop d’eau à mon goût au cours de nombreuses scènes. Il était probablement plus difficile de transmettre des émotions&nbsp;sèches&nbsp;(?).</p>
  364. <p>Pour finir sur une note positive, l’image bien sûr. C’est à la limite du trop <em>et</em> c’est magnifique au niveau des différents tableaux qui s’enchaînent avec leurs propres couleurs, cinématiques et points de vues. On sent le travail de recherche sans qu’il ne devienne complètement distrayant. J’y serai d’autant plus attentif lors d’un second visionnage, chez moi, en choisissant le volume&nbsp;sonore.</p>
  365. <p>Je ne vois pas comment est-ce qu’il ne pourrait pas y avoir une troisième partie. À voir comment / si ça raccroche les wagons des livres. J’aurais presque envie que ça explore sa propre branche. <em>Dune&nbsp;multi·vers·e&#8239;!</em></p>
  366. <nav>
  367. <p>
  368. <a href="/david/2024/adaptation/"
  369. title="Liste de tous les articles 2024 associés à cette étiquette"
  370. rel="tag">#adaptation</a>
  371. <a href="/david/2024/cinema/"
  372. title="Liste de tous les articles 2024 associés à cette étiquette"
  373. rel="tag">#cinéma</a>
  374. <a href="/david/2024/lecture/"
  375. title="Liste de tous les articles 2024 associés à cette étiquette"
  376. rel="tag">#lecture</a>
  377. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  378. </p>
  379. </nav>
  380. <h2>
  381. <a href="/david/2024/02/17/" title="Lien permanent vers cet article">Quotidien</a> <time datetime="2024-02-17">17 février 2024</time>
  382. </h2>
  383. <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>
  384. <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>
  385. <a href="#hr-74" title="Lien vers cette section de la page"><hr id="hr-74" /></a>
  386. <p>Outil du jour&nbsp;: <a data-link-domain="whocanuse.com" href="https://www.whocanuse.com">who can use</a>.</p>
  387. <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>
  388. <a href="#hr-75" title="Lien vers cette section de la page"><hr id="hr-75" /></a>
  389. <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>
  390. <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>
  391. <a href="#hr-76" title="Lien vers cette section de la page"><hr id="hr-76" /></a>
  392. <blockquote lang="en">
  393. <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>
  394. <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"
  395. title="Consultation de l’article (anglais)">The Fucks and How We Give Them (A Manifesto)</a>
  396. <a href="/david/cache/2024/d890da6c22300e52daec05e9c5888784/" hreflang="en"
  397. data-tippy data-description="The older I get, the fewer fucks I’m willing to give."
  398. data-source="https://www.patrickrhone.net/the-fucks-and-how-we-give-them-a-manifesto/"
  399. data-date="2024-02-18"
  400. data-favicon="https://www.patrickrhone.net/favicon.ico"
  401. data-domain="patrickrhone.net"
  402. ><svg xmlns="http://www.w3.org/2000/svg"
  403. width="24" height="24" viewBox="0 0 24 24" fill="none"
  404. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  405. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  406. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  407. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  408. </svg>
  409. <span class="sr-only">[archive]</span></a></em></cite></p>
  410. </blockquote>
  411. <nav>
  412. <p>
  413. <a href="/david/2024/ecriture/"
  414. title="Liste de tous les articles 2024 associés à cette étiquette"
  415. rel="tag">#écriture</a>
  416. <a href="/david/2024/lecture/"
  417. title="Liste de tous les articles 2024 associés à cette étiquette"
  418. rel="tag">#lecture</a>
  419. <a href="/david/2024/solastalgia/"
  420. title="Liste de tous les articles 2024 associés à cette étiquette"
  421. rel="tag">#solastalgia</a>
  422. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  423. </p>
  424. </nav>
  425. <h2>
  426. <a href="/david/2024/02/06/" title="Lien permanent vers cet article">Anneau</a> <time datetime="2024-02-06">6 février 2024</time>
  427. </h2>
  428. <blockquote>
  429. <p>«&nbsp;J’aurais voulu que cela n’ait pas à arriver de mon temps&nbsp;», dit Frodo.<br />
  430. «&nbsp;Moi aussi, dit Gandalf, et il en va de même pour tout ceux qui vivent en de pareils temps. Mais il ne leur appartient pas de décider. Tout ce qu’il nous appartient de décider, c’est <mark>ce que nous comptons faire du temps qui nous est imparti.</mark>&nbsp;»</p>
  431. <p><cite><em>Le seigneur des anneaux</em>, J.R.R. Tolkien</cite></p>
  432. </blockquote>
  433. <p>Me voilà reparti pour un tour au départ <strong>du</strong> Comté, cette fois avec la nouvelle traduction de Daniel Lauzon. Ça pique un peu au niveau des noms, forcément.</p>
  434. <p>Je vais moins publier ces prochains&nbsp;jours&nbsp;😇.</p>
  435. <blockquote>
  436. <p><em>Tout ce qui est or ne brille pas,</em><br />
  437. <em>Ne sont pas perdus tout ceux qui vagabondent&#8239;;</em><br />
  438. <em>Ce qui est vieux mais fort ne se flétrit pas,</em><br />
  439. <em>Le gel n’atteint pas les racines&nbsp;profondes.</em></p>
  440. <p><cite><em>Ibid.</em></cite></p>
  441. </blockquote>
  442. <a href="#hr-68" title="Lien vers cette section de la page"><hr id="hr-68" /></a>
  443. <blockquote lang="en">
  444. <p>The webring is a directory of neighbor websites and&nbsp;portfolios.</p>
  445. <p>This is an attempt to <strong>inspire artists and developers to create and maintain their own personal website,</strong> and share traffic organically among each other. The ring’s aim is to promote the creation of hand crafted diaries, wikis, bookmarks and&nbsp;portfolios.</p>
  446. <p><cite><em><a data-link-domain="wiki.xxiivv.com" href="https://wiki.xxiivv.com/site/webring.html" hreflang="en"
  447. title="Consultation de l’article (anglais)">XXIIVV - webring</a>
  448. <a href="/david/cache/2024/842e88c947068b81c9b9d6218c600dd2/" hreflang="en"
  449. data-tippy data-description="The Webring, like we are in the 2000s."
  450. data-source="https://wiki.xxiivv.com/site/webring.html"
  451. data-date="2024-02-06"
  452. data-favicon="https://wiki.xxiivv.com/media/services/icon.png"
  453. data-domain="wiki.xxiivv.com"
  454. ><svg xmlns="http://www.w3.org/2000/svg"
  455. width="24" height="24" viewBox="0 0 24 24" fill="none"
  456. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  457. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  458. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  459. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  460. </svg>
  461. <span class="sr-only">[archive]</span></a></em></cite></p>
  462. </blockquote>
  463. <p>C’est marrant de voir ressurgir d’anciennes pratiques. Il y a un côté vintage, ou reprise d’une ancienne chanson populaire. Avec ce questionnement récurrent&nbsp;: <q>N’a-t-on vraiment rien inventé de mieux depuis&#8239;?</q> (Ah si, maintenant il faut avoir un compte Microsauron Github pour accéder à&nbsp;l’anneau.)</p>
  464. <p><em>Écrit-il en relisant pour la x-ième fois le même&nbsp;livre.</em></p>
  465. <blockquote lang="en">
  466. <p>With roots in the world of fashion, there exists a cyclical principle suggesting that every two decades, previously popular trends “every 20&nbsp;years or so the trends that were once popular will begin to be on the forefront again.” What’s old is new again. However, <mark>these recurring trends aren’t just rip-offs.</mark> They are remixed and reinterpreted through the lens of a new&nbsp;generation.</p>
  467. <p>We are, perhaps, in a 20&nbsp;year resurgence for the indie web and&nbsp;blogging.</p>
  468. <p><cite><em><a data-link-domain="thehistoryoftheweb.com" href="https://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/" hreflang="en"
  469. title="Consultation de l’article (anglais)">We’ve been waiting 20&nbsp;years for this</a>
  470. <a href="/david/cache/2024/155c5458fcbfb1450f19bc0d268c871e/" hreflang="en"
  471. data-tippy data-description="The indie web may be back. But if is, it is likely in a way we least expect."
  472. data-source="https://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/"
  473. data-date="2024-02-06"
  474. data-favicon="https://ik.imagekit.io/aoi3fgebjgr/wp-content/uploads/2017/09/cropped-thotw-logo-square-1-32x32.jpg"
  475. data-domain="thehistoryoftheweb.com"
  476. ><svg xmlns="http://www.w3.org/2000/svg"
  477. width="24" height="24" viewBox="0 0 24 24" fill="none"
  478. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  479. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  480. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  481. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  482. </svg>
  483. <span class="sr-only">[archive]</span></a></em></cite></p>
  484. </blockquote>
  485. <nav>
  486. <p>
  487. <a href="/david/2024/communaute/"
  488. title="Liste de tous les articles 2024 associés à cette étiquette"
  489. rel="tag">#communauté</a>
  490. <a href="/david/2024/equipe/"
  491. title="Liste de tous les articles 2024 associés à cette étiquette"
  492. rel="tag">#équipe</a>
  493. <a href="/david/2024/lecture/"
  494. title="Liste de tous les articles 2024 associés à cette étiquette"
  495. rel="tag">#lecture</a>
  496. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  497. </p>
  498. </nav>
  499. <form action="/david/recherche/" method="get">
  500. <fieldset>
  501. <legend>Recherche</legend>
  502. <label for="input-search">Termes de votre recherche :</label>
  503. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  504. <input type="submit" value="Chercher">
  505. <p id="indexation-infos">
  506. <small>
  507. Seuls les contenus de ces 8 dernières années sont indexés.
  508. </small>
  509. </p>
  510. </fieldset>
  511. </form>
  512. <aside>
  513. <theme-toggle></theme-toggle>
  514. </aside>
  515. </article>
  516. <hr>
  517. <footer>
  518. <p>
  519. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  520. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  521. <a href="http://larlet.com"
  522. title="Go to my English profile"
  523. data-instant>Pro</a>
  524. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  525. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  526. </p>
  527. <template id="theme-selector">
  528. <form>
  529. <style type="text/css">
  530. fieldset div {
  531. text-align: center;
  532. }
  533. </style>
  534. <fieldset>
  535. <legend>Thème</legend>
  536. <div>
  537. <label>
  538. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  539. Auto
  540. </label>
  541. <label>
  542. <input type="radio" value="dark" name="chosen-color-scheme">
  543. Foncé
  544. </label>
  545. <label>
  546. <input type="radio" value="light" name="chosen-color-scheme">
  547. Clair
  548. </label>
  549. </div>
  550. </fieldset>
  551. </form>
  552. </template>
  553. </footer>
  554. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  555. <script>
  556. class ThemeToggle extends HTMLElement {
  557. constructor() {
  558. super()
  559. const themeSelectorTemplate = document.querySelector('#theme-selector')
  560. const form = themeSelectorTemplate.content.firstElementChild
  561. this.attachShadow({ mode: 'open' })
  562. this.shadowRoot.appendChild(form.cloneNode(true))
  563. }
  564. connectedCallback() {
  565. const form = this.shadowRoot.querySelector('form')
  566. form.addEventListener('change', (e) => {
  567. const chosenColorScheme = e.target.value
  568. localStorage.setItem('theme', chosenColorScheme)
  569. toggleTheme(chosenColorScheme)
  570. })
  571. const selectedTheme = localStorage.getItem('theme')
  572. if (selectedTheme && selectedTheme !== 'undefined') {
  573. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  574. }
  575. }
  576. }
  577. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  578. window.addEventListener('load', () => {
  579. let colorsLayer = undefined
  580. let hasDarkRules = false
  581. for (const styleSheet of Array.from(document.styleSheets)) {
  582. let mediaRules = []
  583. for (const layerRule of styleSheet.cssRules) {
  584. if (!(layerRule instanceof CSSLayerBlockRule)) {
  585. continue
  586. }
  587. if (layerRule.name === 'colors') {
  588. colorsLayer = layerRule
  589. }
  590. for (const cssRule of layerRule.cssRules) {
  591. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  592. continue
  593. }
  594. // WARNING: Safari does not have/supports `conditionText`.
  595. if (cssRule.conditionText) {
  596. if (cssRule.conditionText !== prefersColorSchemeDark) {
  597. continue
  598. }
  599. } else {
  600. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  601. continue
  602. }
  603. }
  604. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  605. }
  606. }
  607. // WARNING: do not try to insert a Rule to a styleSheet you are
  608. // currently iterating on, otherwise the browser will be stuck
  609. // in a infinite loop…
  610. for (const mediaRule of mediaRules) {
  611. // Safari requires the `0` second parameter (even if default).
  612. colorsLayer.insertRule(mediaRule.cssText, 0)
  613. hasDarkRules = true
  614. }
  615. }
  616. if (hasDarkRules) {
  617. if ('customElements' in window && !customElements.get('theme-toggle')) {
  618. customElements.define('theme-toggle', ThemeToggle)
  619. }
  620. }
  621. })
  622. </script>
  623. </body>
  624. </html>