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

10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753
  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 #communauté
  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 #communauté">
  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>#communauté</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/04/10/" title="Lien permanent vers cet article">Weird</a> <time datetime="2024-04-10">10 avril 2024</time>
  134. </h2>
  135. <blockquote lang="en">
  136. <p><em>Say the weird&nbsp;thing.</em></p>
  137. <p>Okay, I’ll&nbsp;play.</p>
  138. <p>The self is an&nbsp;illusion.</p>
  139. <p>I’m a meat sack with electricity flying through&nbsp;space.</p>
  140. <p>I am the natural consequence of every action from the Big Bang to&nbsp;today.</p>
  141. <p>I don’t have free&nbsp;will.</p>
  142. <p>Most of what my brain does is done in the dark of my attention and even when I am making conscious choices I did not choose to become the type of person who would choose that choice over&nbsp;another.</p>
  143. <p>We created god because we got smart enough to realize that we were gonna die. Evolution rewarded religion because dogmatic bonded communities with a shared myth had ways of tending to one another in ways that other tribes&nbsp;didn’t.</p>
  144. <p>We are the product of superstitious ancestors who survived better because they believed in supernatural elements and that they made them more likely to&nbsp;survive.</p>
  145. <p>All we know is that there is consciousness and we are no closer to solving the hard problem of consciousness than when we first phrased it. And objects and consciousness which we cannot know if they are real because our brain is limited by its own perception of reality. And when we try to observe what is real, what is real&nbsp;changes.</p>
  146. <p>Our brain is doing so much that it created shortcuts so that you are not aware of most of it. And our brains are so wired into towards culting that even when we leave religion, we create a religion out of whatever our thing is: astrology, politics, whatever.</p>
  147. <p>These evolutionary shortcuts worked when we were small tribes but now that our trews are bumping into each other, it will be the machine that destroys&nbsp;ourselves.</p>
  148. <p>We have a 180&nbsp;catalog brain biases that tends towards simplicity over complexity, loyalty to our tribes, the illusion of the self and all of that is not compatible to what we know about the modern&nbsp;world.</p>
  149. <p>Anyone who accepts all this will inevitably be alone. There is a lot of lip service to leaving the matrix but in reality it’s very&nbsp;lonely.</p>
  150. <p>The machine of evolution that says to survive at all costs and all of the shortcuts that created that survival will eventually be a machine that eats itself. Individuals can remove themselves to some degree but <mark>if you try to change the world, you will inevitably become a cult and you will become the monster that you were trying to&nbsp;destroy.</mark></p>
  151. <p>And even with all of that, there’s a way to structure with meaning and purpose and experiencing being, and being able to pop your head up in this universe, and check out what is going on where you still are glad you got to be alive, and it probably takes a little bit of privilege because you have to die so many times to get there and it’s very&nbsp;hard.</p>
  152. <p>And in the end the only benefit that you get is that you know that you’re playing in reality which is little more than a shared hallucination rather than being in a delusion and not knowing that you&nbsp;are.</p>
  153. <p>Invite me to your next party! ✌️</p>
  154. <p><cite>@nononsensespirituality, <a data-link-domain="mamot.fr" href="https://mamot.fr/@jcfrog/112245851038854526">via masto</a>, que l’on retrouve <a data-link-domain="instagram.com" href="https://www.instagram.com/nononsensespirituality/reel/C5SRDzTLqAh/">aussi sur&nbsp;Instagram</a></cite></p>
  155. </blockquote>
  156. <p>Bienvenue dans mon cerveau&nbsp;😅.</p>
  157. <a href="#hr-146" title="Lien vers cette section de la page"><hr id="hr-146" /></a>
  158. <blockquote>
  159. <p>The Swolf is a composite measurement in sports swimming that reflects how fast and <mark>how efficiently somebody is swimming.</mark> In contrast, time per distance (speed) neglects swimming technique, and the number of swimming strokes per lap neglects the purpose of competitive swimming: Covering a given distance in the shortest&nbsp;time.</p>
  160. <p><cite><a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Swolf">Swolf</a></cite></p>
  161. </blockquote>
  162. <p>Découverte du jour grâce à la montre&nbsp;: la mesure du Swolf en natation. Voilà un calcul qui m’intéresse davantage que la&nbsp;vitesse.</p>
  163. <p>J’ai fait mon premier kilomètre (avec pauses) de l’année. Mon Swolf actuel a l’air de tourner autour de 40-45&nbsp;lorsque je ne suis pas trop dérangé par les autres nageur·euses, on va voir si ça évolue ces prochains&nbsp;mois.</p>
  164. <a href="#hr-147" title="Lien vers cette section de la page"><hr id="hr-147" /></a>
  165. <blockquote>
  166. <p>The other maintainer suddenly&nbsp;disappeared.</p>
  167. <p><cite><a data-link-domain="github.com" href="https://github.com/tukaani-project/xz/commit/77a294d98a9d2d48f7e4ac273711518bf689f5c4">Update maintainer and author&nbsp;info.</a></cite></p>
  168. </blockquote>
  169. <p>Le <em>commit</em> du&nbsp;jour.</p>
  170. <nav>
  171. <p>
  172. <a href="/david/2024/communaute/"
  173. title="Liste de tous les articles 2024 associés à cette étiquette"
  174. rel="tag">#communauté</a>
  175. <a href="/david/2024/poesie/"
  176. title="Liste de tous les articles 2024 associés à cette étiquette"
  177. rel="tag">#poésie</a>
  178. <a href="/david/2024/psychologie/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#psychologie</a>
  181. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  182. </p>
  183. </nav>
  184. <h2>
  185. <a href="/david/2024/03/21/" title="Lien permanent vers cet article">Fourchette</a> <time datetime="2024-03-21">21 mars 2024</time>
  186. </h2>
  187. <p><em><a href="/david/2024/03/19/" title="Excitation">Suite</a> des <a href="/david/2024/03/20/" title="PageCrypt">aventures</a>.</em></p>
  188. <p>Un peu <a data-link-domain="gitlab.com" href="https://gitlab.com/davidbgk/page-crypt-web-component#pagecrypt-web-component">plus de documentation</a> (<a data-link-domain="davidbgk.gitlab.io" href="https://davidbgk.gitlab.io/page-crypt-web-component/">la démo</a> servant aussi d’introduction). Une <a data-link-domain="gitlab.com" href="https://gitlab.com/davidbgk/page-crypt-web-component/-/blob/main/LICENSE">licence AGPLv3</a> qui soit <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt?tab=AGPL-3.0-1-ov-file#readme">compatible avec l’implémentation principale</a> dont je m’inspire. Je ne sais pas trop si c’est un <em>fork</em> au final, c’est assez hybride comme nouvelle branche, j’ai plus l’impression d’une&nbsp;convergence.</p>
  189. <p>J’ai surtout travaillé sur l’intégration du formulaire de saisie du mot de passe qui se situe maintenant dans le <em>Web Component</em>. Je voulais privilégier la simplicité d’usage, ce qui implique de prendre quelques raccourcis. J’ai beaucoup hésité à utiliser <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog">un élément <code>&lt;dialog&gt;</code></a> pour le formulaire mais j’ai préféré rester&nbsp;basique.</p>
  190. <p>Il y a encore du travail mais la base me semble utilisable. C’est en essayant de l’intégrer par ailleurs que je vais me rendre compte de tous les défauts&nbsp;actuels.</p>
  191. <a href="#hr-128" title="Lien vers cette section de la page"><hr id="hr-128" /></a>
  192. <p><a data-link-domain="redis.io" href="https://redis.io/">Redis</a> a maintenant un <em>fork</em>&nbsp;: <a data-link-domain="codeberg.org" href="https://codeberg.org/redict/redict">redict</a> suite à un <a data-link-domain="github.com" href="https://github.com/redis/redis-doc/commit/69921f506c02f65606498cfb4c083c6d8f91f125">changement de licence</a> qui n’est plus tout à fait open-source, du moins tel que défini par <a data-link-domain="opensource.org" href="https://opensource.org/">l’OSI</a>.</p>
  193. <a href="#hr-129" title="Lien vers cette section de la page"><hr id="hr-129" /></a>
  194. <p>En ayant repris un entraînement physique assez intensif pour récupérer une forme acceptable (car <a href="/david/2024/01/09/" title="Blessure">j’ai quand même été immobilisé</a> un moment), je me rends compte que ça prend un temps non&nbsp;négligeable.</p>
  195. <p>Un peu par hasard, je commence un traitement AKiLEiNE TANO(+NOK). On va voir si ça permet de gagner du temps dans la préparation des pieds, retours dans un&nbsp;mois.</p>
  196. <p>J’ai aussi réduit mon coup de fourchette car le printemps s’en vient et je vais moins avoir besoin de me protéger du froid. Même si cette sortie course du jour par -15°C en ressenti était&nbsp;piquante&#8239;!</p>
  197. <nav>
  198. <p>
  199. <a href="/david/2024/communaute/"
  200. title="Liste de tous les articles 2024 associés à cette étiquette"
  201. rel="tag">#communauté</a>
  202. <a href="/david/2024/opensource/"
  203. title="Liste de tous les articles 2024 associés à cette étiquette"
  204. rel="tag">#opensource</a>
  205. <a href="/david/2024/technique/"
  206. title="Liste de tous les articles 2024 associés à cette étiquette"
  207. rel="tag">#technique</a>
  208. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  209. </p>
  210. </nav>
  211. <h2>
  212. <a href="/david/2024/02/11/" title="Lien permanent vers cet article">Violence</a> <time datetime="2024-02-11">11 février 2024</time>
  213. </h2>
  214. <p>Il y a une forme de violence à dire —&nbsp;de manière plus ou moins directe&nbsp;— à des personnes que les outils numériques qu’elles utilisent ne sont pas appropriés. D’autant plus en ne proposant pas d’alternative réellement&nbsp;utilisable&nbsp;:&nbsp;</p>
  215. <ul>
  216. <li>dans le contexte de littératie numérique de la&nbsp;personne,</li>
  217. <li>dans le contexte culturel du groupe de travail autour de la&nbsp;personne,</li>
  218. <li>dans les priorités actuelles du groupe pour lequel l’informatique reste un outil&nbsp;et/ou</li>
  219. <li>dans la situation de détresse en&nbsp;cours.</li>
  220. </ul>
  221. <p>Si la <em>ré</em>-action est inappropriée, c’est peut-être que l’action initiale ne l’était pas non&nbsp;plus…</p>
  222. <nav>
  223. <p>
  224. <a href="/david/2024/communaute/"
  225. title="Liste de tous les articles 2024 associés à cette étiquette"
  226. rel="tag">#communauté</a>
  227. <a href="/david/2024/opensource/"
  228. title="Liste de tous les articles 2024 associés à cette étiquette"
  229. rel="tag">#opensource</a>
  230. <a href="/david/2024/psychologie/"
  231. title="Liste de tous les articles 2024 associés à cette étiquette"
  232. rel="tag">#psychologie</a>
  233. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  234. </p>
  235. </nav>
  236. <h2>
  237. <a href="/david/2024/02/06/" title="Lien permanent vers cet article">Anneau</a> <time datetime="2024-02-06">6 février 2024</time>
  238. </h2>
  239. <blockquote>
  240. <p>«&nbsp;J’aurais voulu que cela n’ait pas à arriver de mon temps&nbsp;», dit Frodo.<br />
  241. «&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>
  242. <p><cite><em>Le seigneur des anneaux</em>, J.R.R. Tolkien</cite></p>
  243. </blockquote>
  244. <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>
  245. <p>Je vais moins publier ces prochains&nbsp;jours&nbsp;😇.</p>
  246. <blockquote>
  247. <p><em>Tout ce qui est or ne brille pas,</em><br />
  248. <em>Ne sont pas perdus tout ceux qui vagabondent&#8239;;</em><br />
  249. <em>Ce qui est vieux mais fort ne se flétrit pas,</em><br />
  250. <em>Le gel n’atteint pas les racines&nbsp;profondes.</em></p>
  251. <p><cite><em>Ibid.</em></cite></p>
  252. </blockquote>
  253. <a href="#hr-68" title="Lien vers cette section de la page"><hr id="hr-68" /></a>
  254. <blockquote lang="en">
  255. <p>The webring is a directory of neighbor websites and&nbsp;portfolios.</p>
  256. <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>
  257. <p><cite><em><a data-link-domain="wiki.xxiivv.com" href="https://wiki.xxiivv.com/site/webring.html" hreflang="en"
  258. title="Consultation de l’article (anglais)">XXIIVV - webring</a>
  259. <a href="/david/cache/2024/842e88c947068b81c9b9d6218c600dd2/" hreflang="en"
  260. data-tippy data-description="The Webring, like we are in the 2000s."
  261. data-source="https://wiki.xxiivv.com/site/webring.html"
  262. data-date="2024-02-06"
  263. data-favicon="https://wiki.xxiivv.com/media/services/icon.png"
  264. data-domain="wiki.xxiivv.com"
  265. ><svg xmlns="http://www.w3.org/2000/svg"
  266. width="24" height="24" viewBox="0 0 24 24" fill="none"
  267. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  268. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  269. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  270. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  271. </svg>
  272. <span class="sr-only">[archive]</span></a></em></cite></p>
  273. </blockquote>
  274. <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>
  275. <p><em>Écrit-il en relisant pour la x-ième fois le même&nbsp;livre.</em></p>
  276. <blockquote lang="en">
  277. <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>
  278. <p>We are, perhaps, in a 20&nbsp;year resurgence for the indie web and&nbsp;blogging.</p>
  279. <p><cite><em><a data-link-domain="thehistoryoftheweb.com" href="https://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/" hreflang="en"
  280. title="Consultation de l’article (anglais)">We’ve been waiting 20&nbsp;years for this</a>
  281. <a href="/david/cache/2024/155c5458fcbfb1450f19bc0d268c871e/" hreflang="en"
  282. data-tippy data-description="The indie web may be back. But if is, it is likely in a way we least expect."
  283. data-source="https://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/"
  284. data-date="2024-02-06"
  285. data-favicon="https://ik.imagekit.io/aoi3fgebjgr/wp-content/uploads/2017/09/cropped-thotw-logo-square-1-32x32.jpg"
  286. data-domain="thehistoryoftheweb.com"
  287. ><svg xmlns="http://www.w3.org/2000/svg"
  288. width="24" height="24" viewBox="0 0 24 24" fill="none"
  289. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  290. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  291. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  292. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  293. </svg>
  294. <span class="sr-only">[archive]</span></a></em></cite></p>
  295. </blockquote>
  296. <nav>
  297. <p>
  298. <a href="/david/2024/communaute/"
  299. title="Liste de tous les articles 2024 associés à cette étiquette"
  300. rel="tag">#communauté</a>
  301. <a href="/david/2024/equipe/"
  302. title="Liste de tous les articles 2024 associés à cette étiquette"
  303. rel="tag">#équipe</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  308. </p>
  309. </nav>
  310. <h2>
  311. <a href="/david/2024/01/24/" title="Lien permanent vers cet article">Taille</a> <time datetime="2024-01-24">24 janvier 2024</time>
  312. </h2>
  313. <p>On me demande quelle est la taille souhaitable pour <a data-link-domain="scopyleft.fr" href="http://scopyleft.fr/">Scopyleft</a>.</p>
  314. <p>Il y a plusieurs réponses / contraintes à&nbsp;cela&nbsp;:</p>
  315. <ul>
  316. <li>il faudrait que tout le monde puisse être visible dans notre outil de visio (Whereby à ce&nbsp;jour)&#8239;;</li>
  317. <li>il faudrait que chacun·e ait un temps de parole suffisant sur une réunion d’une heure (aujourd’hui, ce serait&nbsp;7&#8239;min&nbsp;30)&#8239;;</li>
  318. <li>il faudrait pouvoir avoir des interactions en binôme avec chaque personne sur un rythme&nbsp;hebdomadaire.</li>
  319. </ul>
  320. <p>Et surtout, nous n’avons pas de volonté de croître plus que ça. Lorsqu’on veut faire des choses qui dépassent nos capacités, il y a les coopératives&nbsp;amies.</p>
  321. <a href="#hr-46" title="Lien vers cette section de la page"><hr id="hr-46" /></a>
  322. <blockquote lang="en">
  323. <p>Further, if we have learned anything in the last 3&nbsp;years as an industry, it should be to strive for building small, highly efficient teams and avoiding bloated, overstaffed organizations at all costs. Larger teams move slower, create more incidental complexity, and are much more susceptible to the layoffs we’ve all been suffering through. <mark>Engineering leaders would be well served to focus on hiring smaller teams</mark> and providing them with sufficient time and support to create simple solutions that generate business&nbsp;value.</p>
  324. <p><cite><em><a data-link-domain="blog.testdouble.com" href="https://blog.testdouble.com/posts/2024-01-24-plea-for-lean/" hreflang="en"
  325. title="Consultation de l’article (anglais)">Echoing Wirth’s plea for lean software</a>
  326. <a href="/david/cache/2024/82b88d48d8043d79425ce8afd8dff42e/" hreflang="en"
  327. data-tippy data-description="Niklaus Wirth's plea for lean software is even more valid today."
  328. data-source="https://blog.testdouble.com/posts/2024-01-24-plea-for-lean/"
  329. data-date="2024-01-24"
  330. data-favicon="https://cdn-blog.testdouble.com/img/favicon-dark.619c13e6bf2653dacd018c2ab016f32247574e7396f1bfe3ae0798f55f7ea079.png"
  331. data-domain="blog.testdouble.com"
  332. ><svg xmlns="http://www.w3.org/2000/svg"
  333. width="24" height="24" viewBox="0 0 24 24" fill="none"
  334. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  335. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  336. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  337. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  338. </svg>
  339. <span class="sr-only">[archive]</span></a></em></cite></p>
  340. </blockquote>
  341. <p>Tout est&nbsp;dit.</p>
  342. <a href="#hr-47" title="Lien vers cette section de la page"><hr id="hr-47" /></a>
  343. <blockquote>
  344. <p>La nuit est rassurante<br />
  345. tout est perdu<br />
  346. plus besoin de chercher<br />
  347. nos morceaux éparpillés<br />
  348. nous voilà réunis<br />
  349. par nos&nbsp;obscurités</p>
  350. <p><cite><em><a data-link-domain="etc-iste.blogspot.com" href="http://etc-iste.blogspot.com/2024/01/reunuit.html">Réunuit</a></em></cite></p>
  351. </blockquote>
  352. <nav>
  353. <p>
  354. <a href="/david/2024/communaute/"
  355. title="Liste de tous les articles 2024 associés à cette étiquette"
  356. rel="tag">#communauté</a>
  357. <a href="/david/2024/equipe/"
  358. title="Liste de tous les articles 2024 associés à cette étiquette"
  359. rel="tag">#équipe</a>
  360. <a href="/david/2024/processus/"
  361. title="Liste de tous les articles 2024 associés à cette étiquette"
  362. rel="tag">#processus</a>
  363. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  364. </p>
  365. </nav>
  366. <h2>
  367. <a href="/david/2024/01/19/" title="Lien permanent vers cet article">Marcher</a> <time datetime="2024-01-19">19 janvier 2024</time>
  368. </h2>
  369. <blockquote lang="en">
  370. <p>A walk-and-talk is a moveable salon. A small group of people walk together for a week, having casual conversations side-by-side during most of the day. In the evening the group sits down to an intense hours-long discussion centered on a daily chosen topic by those present. A moderator keeps the conversation on that day’s single topic to sharpen it and make it&nbsp;memorable.</p>
  371. <p><mark>To focus on conversations while walking,</mark> participants carry only day-packs, and eat locally prepared meals. The walks are not strenuous and to keep it even more inspiring, they take place in storied environments that are walker-friendly, such as footpaths in England, Japan, and Spain. By the end of the week, every person present has walked about 100&#8239;km and has had deep conversations with all the&nbsp;others.</p>
  372. <p><cite><em><a data-link-domain="craigmod.com" href="https://craigmod.com/ridgeline/176/" hreflang="en"
  373. title="Consultation de l’article (anglais)">The Walk and Talk: Everything We Know</a>
  374. <a href="/david/cache/2024/877ad04fd329c26c80113e15dec540df/" hreflang="en"
  375. data-tippy data-description="Kevin Kelly and my notes detailing everything we've learned walking and talking these past six years"
  376. data-source="https://craigmod.com/ridgeline/176/"
  377. data-date="2024-01-18"
  378. data-favicon="https://craigmod.com/images/favicons/favicon-196x196.png"
  379. data-domain="craigmod.com"
  380. ><svg xmlns="http://www.w3.org/2000/svg"
  381. width="24" height="24" viewBox="0 0 24 24" fill="none"
  382. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  383. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  384. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  385. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  386. </svg>
  387. <span class="sr-only">[archive]</span></a></em></cite></p>
  388. </blockquote>
  389. <p>C’est peu de dire que ce format m’intéresse et je l’ai envisagé à plusieurs reprises en France, notamment autour du Mont-Blanc. J’ai l’impression que la Traversée de Charlevoix serait un chemin assez idéal compte tenu des <a data-link-domain="traverseedecharlevoix.qc.ca" href="https://www.traverseedecharlevoix.qc.ca/services-offerts/">services proposés</a> s’il s’agit de s’en tenir au format décrit (transport des&nbsp;bagages).</p>
  390. <p>Le faire une première fois de manière rapide en solo cette année m’aiderait certainement —&nbsp;en plus d’en faire la reconnaissance&nbsp;— à l’envisager sur un rythme beaucoup plus doux en étant accompagné par la&nbsp;suite.</p>
  391. <a href="#hr-38" title="Lien vers cette section de la page"><hr id="hr-38" /></a>
  392. <blockquote lang="en">
  393. <p>Going forward I plan to version the projects I work on in a way that communicates <em>how much effort I expect a user will need to spend to adopt the new version.</em> I’m going to refer to that scheme as <strong>Intended Effort Versioning (EffVer for short)</strong>.</p>
  394. <p><cite><em><a data-link-domain="jacobtomlinson.dev" href="https://jacobtomlinson.dev/effver/" hreflang="en"
  395. title="Consultation de l’article (anglais)">EffVer: Version your code by the effort required to upgrade</a>
  396. <a href="/david/cache/2024/fd6eda56671045e0c1e2d215e07f1a6f/" hreflang="en"
  397. data-tippy data-description="Version numbers are hard to get right. Semantic Versioning (SemVer) communicates backward compatibility via version numbers which often lead to a false sense of security and broken promises."
  398. data-source="https://jacobtomlinson.dev/effver/"
  399. data-date="2024-01-18"
  400. data-favicon=""
  401. data-domain="jacobtomlinson.dev"
  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. <p>Il faudrait que je rende explicite ma façon de décompter les crédits (facturés) dans <a href="/david/2022/12/15/">mes journaux</a> car la notion d’effort / pénibilité y est présente, ce n’est pas qu’une question de temps. Ça m’aide notamment à vérifier qu’une journée n’est pas trop intense et n’a pas consommé toutes mes <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Th%C3%A9orie_des_cuill%C3%A8res">cuillères</a>, sociales surtout, ce qui peut avoir des conséquences sur les jours&nbsp;suivants…</p>
  412. <a href="#hr-39" title="Lien vers cette section de la page"><hr id="hr-39" /></a>
  413. <blockquote>
  414. <p>il</p>
  415. <p>suffit<br />
  416. parfois d’<br />
  417. être&nbsp;là</p>
  418. <p>pour que<br />
  419. quelqu’un nous&nbsp;voit</p>
  420. <p><cite><em><a data-link-domain="clairesohem.com" href="https://clairesohem.com/blog/2024/01/10-12-2023-2/">10&#8239;12&#8239;2023</a></em></cite></p>
  421. </blockquote>
  422. <nav>
  423. <p>
  424. <a href="/david/2024/accompagnement/"
  425. title="Liste de tous les articles 2024 associés à cette étiquette"
  426. rel="tag">#accompagnement</a>
  427. <a href="/david/2024/communaute/"
  428. title="Liste de tous les articles 2024 associés à cette étiquette"
  429. rel="tag">#communauté</a>
  430. <a href="/david/2024/echanges/"
  431. title="Liste de tous les articles 2024 associés à cette étiquette"
  432. rel="tag">#échanges</a>
  433. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  434. </p>
  435. </nav>
  436. <h2>
  437. <a href="/david/2024/01/07/" title="Lien permanent vers cet article">Dons</a> <time datetime="2024-01-07">7 janvier 2024</time>
  438. </h2>
  439. <blockquote>
  440. <p>Plus que 3&nbsp;jours pour décider de l’usage de vos #impôts en donnant à des&nbsp;#assos&#8239;!</p>
  441. <p>Vu le succès de <a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/109605598029237063">l’opération l’an dernier</a>, je relance le doublement des dons en cette fin d’année 2023, avec un plafond plus élevé&#8239;! 🤑💞</p>
  442. <p>Donnez à une des assos ci-dessous, publiez votre reçu en réponse, <mark>je double votre don.</mark>&nbsp;[…]</p>
  443. <p><cite><a data-link-domain="piaille.fr" href="https://piaille.fr/@mattisg/111652988498506725">@mattisg@piaille.fr</a></cite></p>
  444. </blockquote>
  445. <p>Admirable. C’est la deuxième année que nous arrivons à faire des dons avec Scopyleft et ça me met en joie. Cela m’a même motivé pour en faire à titre&nbsp;personnel.</p>
  446. <p>Une forme d’impôt volontaire qui ne termine pas / <a href="/david/2024/01/01/" title="Dryear(s)">plus</a> à la <a data-link-domain="saq.com" href="https://www.saq.com/">SAQ</a>.</p>
  447. <a href="#hr-13" title="Lien vers cette section de la page"><hr id="hr-13" /></a>
  448. <p>Pensée (genrée) du jour&nbsp;: un bon développeur fait bien la cuisine, un très bon développeur fait la vaisselle après avoir fait la&nbsp;cuisine.</p>
  449. <p>Il y a une métaphore au niveau du soin, du partage et de la maintenance à peine&nbsp;déguisée.</p>
  450. <a href="#hr-14" title="Lien vers cette section de la page"><hr id="hr-14" /></a>
  451. <p>Masto comme un <a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111709177849752316">espace de discussion</a>, le blog comme un espace de synthèse&nbsp;: il me faut un sélecteur de thème clair / foncé car c’est utile à plusieurs personnes. C’est faible comme test utilisateur·ice mais c’est déjà ça. Et puis j’ai découvert plein de&nbsp;pratiques&#8239;!</p>
  452. <p>Je décline le sélecteur de thème que l’<a href="/david/2020/06/25/#paillasse">on avait fait en 2020</a> avec <a data-link-domain="ricaud.me" href="https://ricaud.me/blog/">Anthony</a> mais cette fois sous la forme d’un <em>Web Component</em>. Je me suis pris les pieds dans le tapis car les <em>layers</em> en CSS ajoutent un niveau d’indentation dans la logique (et changent la spécificité mais c’est le&nbsp;but&#8239;!).</p>
  453. <p>Je ne sais pas encore quel style lui donner. J’en profite pour mettre en place le changement subtil de police pour le thème foncé (plus <em>light</em>, ironiquement). J’ai l’espoir que ce type d’adaptation aide les astigmates… à arriver jusqu’au sélecteur de&nbsp;thème&nbsp;😅.</p>
  454. <p><em>Bientôt 500&nbsp;lignes de&nbsp;CSS.</em></p>
  455. <a href="#hr-15" title="Lien vers cette section de la page"><hr id="hr-15" /></a>
  456. <blockquote>
  457. <p>Une fois la transcription terminée, je peux enregistrer le fichier texte du podcast avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
  458. <p>Je suis&nbsp;impressionné.</p>
  459. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/01/06/ebauche" hreflang="fr"
  460. title="Consultation de l’article">plaisir d’ébauche</a>
  461. <a href="/david/cache/2024/d75afc90a9d3c3b5a56b69446795fbb5/" hreflang="fr"
  462. data-tippy data-description=""
  463. data-source="https://www.la-grange.net/2024/01/06/ebauche"
  464. data-date="2024-01-07"
  465. data-favicon="https://www.la-grange.net/favicon.ico"
  466. data-domain="la-grange.net"
  467. ><svg xmlns="http://www.w3.org/2000/svg"
  468. width="24" height="24" viewBox="0 0 24 24" fill="none"
  469. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  470. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  471. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  472. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  473. </svg>
  474. <span class="sr-only">[archive]</span></a></em></cite></p>
  475. </blockquote>
  476. <p>Ce&nbsp;titre&nbsp;:)</p>
  477. <p>La transcription des <em>podcast</em> serait très importante pour moi car je n’arrive pas à en écouter un plus de 2&nbsp;minutes sans être à la peine (imaginez-moi au téléphone… ou en visio sans vidéo). J’avais fait des <a href="/david/2021/01/18/">essais il y a 3&nbsp;ans</a> déjà qui n’étaient pas concluant mais peut-être que l’IA s’en sort mieux aujourd’hui. En tout cas, ça semble être le cas sur cet essai. Il faut que je prenne le temps de transformer ces murmures en mots, j’ai l’impression de passer à côté de beaucoup de choses&nbsp;inspirantes.</p>
  478. <a href="#hr-16" title="Lien vers cette section de la page"><hr id="hr-16" /></a>
  479. <blockquote lang="en">
  480. <p>We evaluate APIs only on the basis of merit in the context of providing superior search engine results. Considering company x founder political views is not a factor in this evaluation. <mark>Politics finding its way into tech is one of the reason we do not have innovation any&nbsp;more.</mark></p>
  481. <p>We are primarily in the business of search and we’d like to stay focused on&nbsp;that.</p>
  482. <p><cite><em><a data-link-domain="kagifeedback.org" href="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6" hreflang="en"
  483. title="Consultation de l’article (anglais)">Vlad (admin Kagi) répondant</a>
  484. <a href="/david/cache/2024/d236f33cf82727313d17cb23bf36a395/" hreflang="en"
  485. data-tippy data-description="Brave, as you know, is led by Brendan Eich. s homophobia is so disgusting that he was forced to resign as the leader..."
  486. data-source="https://kagifeedback.org/d/2808-reconsider-your-partnership-with-brave/6"
  487. data-date="2024-01-07"
  488. data-favicon="https://kagifeedback.org/assets/favicon-bmwk4ltf.png"
  489. data-domain="kagifeedback.org"
  490. ><svg xmlns="http://www.w3.org/2000/svg"
  491. width="24" height="24" viewBox="0 0 24 24" fill="none"
  492. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  493. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  494. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  495. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  496. </svg>
  497. <span class="sr-only">[archive]</span></a> à «&nbsp;Reconsider your partnership with&nbsp;Brave&nbsp;»</em></cite></p>
  498. </blockquote>
  499. <p>À un moment l’année dernière, j’ai essayé Kagi et j’ai failli franchir le pas du payant. Je suis bien content de ne pas l’avoir fait car je m’en serais mordu les doigts aujourd’hui. Dans l’idéal, un moteur de recherche serait objectif mais un algorithme comporte toujours les biais de ses créateur·ices. Et vu la population qui code aujourd’hui, autant dire que c’est mal barré. Le fait qu’un administrateur de Kagi puisse être aussi naïf sur le sujet est assez&nbsp;terrible.</p>
  500. <p><a data-link-domain="theverge.com" href="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy" hreflang="en"
  501. title="Consultation de l’article (anglais)">Pas de politique au travail</a>
  502. <a href="/david/cache/2024/b80f5159ee7ac70bcaa6a9fde16c2408/" hreflang="en"
  503. data-tippy data-description="Basecamp announced it would ban “societal and political discussions” at work. But the hardest conversations at work were about the company itself. Platformer’s Casey Newton spoke with half a dozen employees about the controversy."
  504. data-source="https://www.theverge.com/2021/4/27/22406673/basecamp-political-speech-policy-controversy"
  505. data-date="2024-01-07"
  506. data-favicon="https://www.theverge.com/icons/favicon_32x32.png"
  507. data-domain="theverge.com"
  508. ><svg xmlns="http://www.w3.org/2000/svg"
  509. width="24" height="24" viewBox="0 0 24 24" fill="none"
  510. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  511. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  512. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  513. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  514. </svg>
  515. <span class="sr-only">[archive]</span></a> est ma nouvelle&nbsp;cryptonite.</p>
  516. <nav>
  517. <p>
  518. <a href="/david/2024/apprentissage/"
  519. title="Liste de tous les articles 2024 associés à cette étiquette"
  520. rel="tag">#apprentissage</a>
  521. <a href="/david/2024/communaute/"
  522. title="Liste de tous les articles 2024 associés à cette étiquette"
  523. rel="tag">#communauté</a>
  524. <a href="/david/2024/fediverse/"
  525. title="Liste de tous les articles 2024 associés à cette étiquette"
  526. rel="tag">#fédiverse</a>
  527. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  528. </p>
  529. </nav>
  530. <form action="/david/recherche/" method="get">
  531. <fieldset>
  532. <legend>Recherche</legend>
  533. <label for="input-search">Termes de votre recherche :</label>
  534. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  535. <input type="submit" value="Chercher">
  536. <p id="indexation-infos">
  537. <small>
  538. Seuls les contenus de ces 8 dernières années sont indexés.
  539. </small>
  540. </p>
  541. </fieldset>
  542. </form>
  543. <aside>
  544. <theme-toggle></theme-toggle>
  545. </aside>
  546. </article>
  547. <hr>
  548. <footer>
  549. <p>
  550. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  551. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  552. <a href="http://larlet.com"
  553. title="Go to my English profile"
  554. data-instant>Pro</a>
  555. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  556. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  557. </p>
  558. <template id="theme-selector">
  559. <form>
  560. <style type="text/css">
  561. fieldset div {
  562. text-align: center;
  563. }
  564. </style>
  565. <fieldset>
  566. <legend>Thème</legend>
  567. <div>
  568. <label>
  569. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  570. Auto
  571. </label>
  572. <label>
  573. <input type="radio" value="dark" name="chosen-color-scheme">
  574. Foncé
  575. </label>
  576. <label>
  577. <input type="radio" value="light" name="chosen-color-scheme">
  578. Clair
  579. </label>
  580. </div>
  581. </fieldset>
  582. </form>
  583. </template>
  584. </footer>
  585. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  586. <script>
  587. class ThemeToggle extends HTMLElement {
  588. constructor() {
  589. super()
  590. const themeSelectorTemplate = document.querySelector('#theme-selector')
  591. const form = themeSelectorTemplate.content.firstElementChild
  592. this.attachShadow({ mode: 'open' })
  593. this.shadowRoot.appendChild(form.cloneNode(true))
  594. }
  595. connectedCallback() {
  596. const form = this.shadowRoot.querySelector('form')
  597. form.addEventListener('change', (e) => {
  598. const chosenColorScheme = e.target.value
  599. localStorage.setItem('theme', chosenColorScheme)
  600. toggleTheme(chosenColorScheme)
  601. })
  602. const selectedTheme = localStorage.getItem('theme')
  603. if (selectedTheme && selectedTheme !== 'undefined') {
  604. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  605. }
  606. }
  607. }
  608. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  609. window.addEventListener('load', () => {
  610. let colorsLayer = undefined
  611. let hasDarkRules = false
  612. for (const styleSheet of Array.from(document.styleSheets)) {
  613. let mediaRules = []
  614. for (const layerRule of styleSheet.cssRules) {
  615. if (!(layerRule instanceof CSSLayerBlockRule)) {
  616. continue
  617. }
  618. if (layerRule.name === 'colors') {
  619. colorsLayer = layerRule
  620. }
  621. for (const cssRule of layerRule.cssRules) {
  622. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  623. continue
  624. }
  625. // WARNING: Safari does not have/supports `conditionText`.
  626. if (cssRule.conditionText) {
  627. if (cssRule.conditionText !== prefersColorSchemeDark) {
  628. continue
  629. }
  630. } else {
  631. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  632. continue
  633. }
  634. }
  635. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  636. }
  637. }
  638. // WARNING: do not try to insert a Rule to a styleSheet you are
  639. // currently iterating on, otherwise the browser will be stuck
  640. // in a infinite loop…
  641. for (const mediaRule of mediaRules) {
  642. // Safari requires the `0` second parameter (even if default).
  643. colorsLayer.insertRule(mediaRule.cssText, 0)
  644. hasDarkRules = true
  645. }
  646. }
  647. if (hasDarkRules) {
  648. if ('customElements' in window && !customElements.get('theme-toggle')) {
  649. customElements.define('theme-toggle', ThemeToggle)
  650. }
  651. }
  652. })
  653. </script>
  654. </body>
  655. </html>