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.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025
  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 #opensource
  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 #opensource">
  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>#opensource</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/02/" title="Lien permanent vers cet article">Porte</a> <time datetime="2024-04-02">2 avril 2024</time>
  134. </h2>
  135. <blockquote lang="en">
  136. <p>For me, the two big lessons from #XZ were first, the lack of resources supporting crucial Open-Source infrastructure, but then and especially, the demonstration that the attackers are numerous, skilled <em>and patient</em>. We already knew about numerous and skilled but this episode, where the attacker was already well-embedded in the project by May 2022, opened a few eyes, including&nbsp;mine.</p>
  137. <p>The advantage, to various flavors of malefactor, of subverting core pieces of Open-Source infrastructure, is incalculable. <mark>#XZ was the one we caught; how many have we&nbsp;missed?</mark></p>
  138. <p><cite><em><a data-link-domain="tbray.org" href="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI" hreflang="en"
  139. title="Consultation de l’article (anglais)">ongoing by Tim Bray · OSQI</a>
  140. <a href="/david/cache/2024/8ffe1e30cd3dd6446468bd6d03550457/" hreflang="en"
  141. data-tippy data-description=""
  142. data-source="https://www.tbray.org/ongoing/When/202x/2024/04/01/OSQI"
  143. data-date="2024-04-04"
  144. data-favicon="https://www.tbray.org/favicon.ico"
  145. data-domain="tbray.org"
  146. ><svg xmlns="http://www.w3.org/2000/svg"
  147. width="24" height="24" viewBox="0 0 24 24" fill="none"
  148. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  149. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  150. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  151. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  152. </svg>
  153. <span class="sr-only">[archive]</span></a></em></cite></p>
  154. </blockquote>
  155. <p>J’ai laissé le web 2&nbsp;jours et hop, une <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Porte_d%C3%A9rob%C3%A9e">porte dérobée</a> a été fermée à temps. C’est <a data-link-domain="boehs.org" href="https://boehs.org/node/everything-i-know-about-the-xz-backdoor" hreflang="en"
  156. title="Consultation de l’article (anglais)">la chronologie</a>
  157. <a href="/david/cache/2024/b4d0d377662e30cef4e944448d41338c/" hreflang="en"
  158. data-tippy data-description="Please note: This is being updated in real-time. The intent is to make sense of lots of simultaneous discoveries"
  159. data-source="https://boehs.org/node/everything-i-know-about-the-xz-backdoor"
  160. data-date="2024-04-04"
  161. data-favicon="https://boehs.org/favicon.ico"
  162. data-domain="boehs.org"
  163. ><svg xmlns="http://www.w3.org/2000/svg"
  164. width="24" height="24" viewBox="0 0 24 24" fill="none"
  165. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  166. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  167. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  168. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  169. </svg>
  170. <span class="sr-only">[archive]</span></a> qui est surprenante dans sa durée et pose immédiatement la question de savoir s’il s’agit d’une exception ou s’il y a déjà des portes un peu partout, exploitées par plus ou moins de&nbsp;monde.</p>
  171. <p>Lorsqu’on voit ce que <a href="/david/2024/03/28/#hr-140">sont prêts à faire les GAFAM+</a>, je n’ai aucun doute sur le fait qu’ils se rueraient sur de telles «&nbsp;opportunités&nbsp;». On parle souvent de malveillance dans ces cas là, je pense que l’on peut facilement mettre tout ce qui est <em>growth hacking</em> et <em>marketing</em> dans ce&nbsp;périmètre.</p>
  172. <p>Pour en revenir à des OSQI (Open Source Quality Institutes) nationaux, cela me rappelle des initiatives comme <a data-link-domain="copiepublique.fr" href="https://copiepublique.fr/">copie publique</a> ou cette idée de <a href="/david/2023/01/11/">MécénatDeCompétencesPublic</a>&#8239;.</p>
  173. <p>Transformer l’Open-Source en bien commun est peut-être le chantier de la décennie à venir. J’espère en faire partie à mon&nbsp;échelle.</p>
  174. <blockquote lang="en">
  175. <p>Tuesday, Hans-Christoph Steiner, a longtime developer of F-Droid, explained that a very similar situation nearly led F-Droid to push an update that would have introduced a security vulnerability into the product three years ago: “Three years ago, F-Droid had a similar kind of attempt as the Xz backdoor,” he posted on Mastodon. “A new contributor submitted a merge request to improve the search, which was oft requested but the maintainers hadn’t found time to work on. There was also pressure from other random accounts to merge it. In the end, it became clear that it added a SQL injection vulnerability. In this case, we managed to catch it before it was merged. Since similar tactics were used, I think it’s relevant&nbsp;now.”</p>
  176. <p>Other open source developers and security experts have pointed to the dynamic of bullying and the general reliance on a small number of volunteer developers. They explained that it’s a problem across much of the open source software ecosystem, and is definitely a problem for the large tech companies and infrastructure who rely on these often volunteer-led projects to build their for-profit software on top&nbsp;of.</p>
  177. <p><cite><em><a data-link-domain="404media.co" href="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/" hreflang="en"
  178. title="Consultation de l’article (anglais)">Bullying in Open Source Software Is a Massive Security Vulnerability</a>
  179. <a href="/david/cache/2024/14da9039de50c54f159f333ea3dc73f1/" hreflang="en"
  180. data-tippy data-description="The Xz backdoor and a near miss on the F-Droid app store show how the entitled attitude of some people in the open source community can be used to push malicious or insecure code."
  181. data-source="https://www.404media.co/xz-backdoor-bullying-in-open-source-software-is-a-massive-security-vulnerability/"
  182. data-date="2024-04-04"
  183. data-favicon="https://www.404media.co/content/images/size/w256h256/format/png/2023/08/favicon-3.svg"
  184. data-domain="404media.co"
  185. ><svg xmlns="http://www.w3.org/2000/svg"
  186. width="24" height="24" viewBox="0 0 24 24" fill="none"
  187. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  188. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  189. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  190. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  191. </svg>
  192. <span class="sr-only">[archive]</span></a></em></cite></p>
  193. </blockquote>
  194. <nav>
  195. <p>
  196. <a href="/david/2024/commun/"
  197. title="Liste de tous les articles 2024 associés à cette étiquette"
  198. rel="tag">#commun</a>
  199. <a href="/david/2024/opensource/"
  200. title="Liste de tous les articles 2024 associés à cette étiquette"
  201. rel="tag">#opensource</a>
  202. <a href="/david/2024/protopie/"
  203. title="Liste de tous les articles 2024 associés à cette étiquette"
  204. rel="tag">#protopie</a>
  205. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  206. </p>
  207. </nav>
  208. <h2>
  209. <a href="/david/2024/03/21/" title="Lien permanent vers cet article">Fourchette</a> <time datetime="2024-03-21">21 mars 2024</time>
  210. </h2>
  211. <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>
  212. <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>
  213. <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>
  214. <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>
  215. <a href="#hr-128" title="Lien vers cette section de la page"><hr id="hr-128" /></a>
  216. <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>
  217. <a href="#hr-129" title="Lien vers cette section de la page"><hr id="hr-129" /></a>
  218. <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>
  219. <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>
  220. <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>
  221. <nav>
  222. <p>
  223. <a href="/david/2024/communaute/"
  224. title="Liste de tous les articles 2024 associés à cette étiquette"
  225. rel="tag">#communauté</a>
  226. <a href="/david/2024/opensource/"
  227. title="Liste de tous les articles 2024 associés à cette étiquette"
  228. rel="tag">#opensource</a>
  229. <a href="/david/2024/technique/"
  230. title="Liste de tous les articles 2024 associés à cette étiquette"
  231. rel="tag">#technique</a>
  232. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  233. </p>
  234. </nav>
  235. <h2>
  236. <a href="/david/2024/03/20/" title="Lien permanent vers cet article">PageCrypt</a> <time datetime="2024-03-20">20 mars 2024</time>
  237. </h2>
  238. <p><a href="/david/2024/03/19/" title="Excitation">J’y ai passé ma soirée</a> mais j’ai un <a data-link-domain="davidbgk.gitlab.io" href="https://davidbgk.gitlab.io/page-crypt-web-component/">truc qui fonctionne pour une démo</a>. Ça ressemble beaucoup à un <em>patchwork</em> de bouts de code récupérés <a data-link-domain="maxlaumeister.com" href="https://www.maxlaumeister.com/pagecrypt/">ici</a> et <a data-link-domain="github.com" href="https://github.com/Greenheart/pagecrypt">là</a> puis <a data-link-domain="github.com" href="https://github.com/MaxLaumeister/PageCrypt/blob/master/python/encrypt.py">aussi là</a> pour la partie&nbsp;Python.</p>
  239. <p>Il y a encore pas mal de travail —&nbsp;notamment pour rendre la page suffisamment accessible&nbsp;— mais au moins la partie crypto / boîte noire semble fonctionner à la fois du côté génération en Python et consommation en JS. C’est la partie qui me faisait un peu peur et sur laquelle j’ai un peu patiné car c’est bien au-delà de mes compétences et que je ne veux pas prendre l’initiative de trop adapter sans comprendre les enjeux niveau&nbsp;sécurité.</p>
  240. <p>Le dépôt est <a data-link-domain="gitlab.com" href="https://gitlab.com/davidbgk/page-crypt-web-component">par ici</a>. Il faut encore que je décide si le formulaire pour le mot de passe devient un <em>web component</em> dédié et/ou un sous-composant, je ne suis pas satisfait du couplage implicite actuel. Itération, itération.</p>
  241. <p>En bonus, il est possible d’accéder directement au contenu de la page en mettant le mot de passe en ancre de l’URL. J’ai appris au passage que ce fragment d’URL n’était pas transmis dans la requête et ne restait que dans l’historique du&nbsp;navigateur.</p>
  242. <p><em>Si tu n’as pas honte de ton premier commit, tout ça… la suite&nbsp;demain.</em></p>
  243. <a href="#hr-125" title="Lien vers cette section de la page"><hr id="hr-125" /></a>
  244. <blockquote>
  245. <p>Les mots ont un impact et, inconsciemment, quand vous ne les utilisez pas dans la bonne manière, vous minimisez mon handicap et donc vous faites moins d'effort que&nbsp;nécessaire.</p>
  246. <p>Autre point, dit-on «&nbsp;personne en situation en handicap&nbsp;» ou «&nbsp;personne&nbsp;handicapée&#8239;?&nbsp;»</p>
  247. <p>Là, encore, il y a une&nbsp;subtilité.</p>
  248. <p>Je vais à un événement tech où les conférences ne sont pas sous-titrées. Je suis en situation de handicap puisque les conférences ne me sont pas du tout&nbsp;accessibles.</p>
  249. <p>Je vais à un événement tech où les conférences sont toutes sous-titrées. Je ne suis pas en situation de handicap puisque les conférences me sont totalement&nbsp;accessibles.</p>
  250. <p>Voici la différence. <mark>Être en situation de handicap, c’est subir la situation faute&nbsp;d’accessibilité.</mark></p>
  251. <p><cite><em><a data-link-domain="emmanuelle-aboaf.netlify.app" href="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots" hreflang="fr"
  252. title="Consultation de l’article">N’ayez pas peur des mots</a>
  253. <a href="/david/cache/2024/5201efaa6fe6a80f69647a354c9afd18/" hreflang="fr"
  254. data-tippy data-description="Les mots ont un impact et pourtant ils ne sont pas utilisés en tant que tels. Le mot handicapé·e n’est pas un gros mot, pas plus que les mots sourd·e et aveugle. Malheureusement, certaines personnes n’osent pas les dire par peur de vexer ou en pensant que ça ne se dit pas. Cependant, en ne les disant pas, vous créez un tabou. Je vous partage mes réflexions sur le sujet à travers cet article."
  255. data-source="https://emmanuelle-aboaf.netlify.app/blog/article/n-ayez-pas-peur-des-mots"
  256. data-date="2024-03-20"
  257. data-favicon="https://emmanuelle-aboaf.netlify.app/blog/article/favicon-32x32.png"
  258. data-domain="emmanuelle-aboaf.netlify.app"
  259. ><svg xmlns="http://www.w3.org/2000/svg"
  260. width="24" height="24" viewBox="0 0 24 24" fill="none"
  261. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  262. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  263. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  264. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  265. </svg>
  266. <span class="sr-only">[archive]</span></a></em></cite></p>
  267. </blockquote>
  268. <p>Cette page ne contient pas le contenu du HTML qui s’affiche et ça me rend triste car j’en apprécie le contenu qui m’apprend des choses / me fait&nbsp;réfléchir.</p>
  269. <p>Un autre angle de&nbsp;l’accessibilité&#8239;?</p>
  270. <a href="#hr-126" title="Lien vers cette section de la page"><hr id="hr-126" /></a>
  271. <blockquote lang="en">
  272. <p>So don’t publish for the&nbsp;world.</p>
  273. <p>When I write something here on my website, I’m not thinking about the world reading it. That would be paralyzing. I do sometimes imagine that one person is reading it; someone just like me who hasn’t yet had this particular thought, or come up with that particular&nbsp;idea.</p>
  274. <p>I’m writing for myself. <mark>I write to figure out what I think.</mark> I also publish mostly for myself—a public archive for future me. But if what I publish just happens to connect with one other person, I’m&nbsp;glad.</p>
  275. <p><cite><em><a data-link-domain="adactio.com" href="https://adactio.com/journal/20996" hreflang="en"
  276. title="Consultation de l’article (anglais)">What the world needs</a>
  277. <a href="/david/cache/2024/318dd7526e11f9476c9cbc88eb3f2b9b/" hreflang="en"
  278. data-tippy data-description="Write for yourself."
  279. data-source="https://adactio.com/journal/20996"
  280. data-date="2024-03-20"
  281. data-favicon="https://adactio.com/icon.png"
  282. data-domain="adactio.com"
  283. ><svg xmlns="http://www.w3.org/2000/svg"
  284. width="24" height="24" viewBox="0 0 24 24" fill="none"
  285. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  286. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  287. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  288. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  289. </svg>
  290. <span class="sr-only">[archive]</span></a></em></cite></p>
  291. </blockquote>
  292. <a href="#hr-127" title="Lien vers cette section de la page"><hr id="hr-127" /></a>
  293. <blockquote lang="en">
  294. <p>My goal, for this digital place I’m creating, is to make you go away. And that’s not because I want to be left alone but because <mark>I hope to help you discover new digital places to explore.</mark> If I see you again, it’s because you decided to come back, and not because you got lost and trapped inside the digital walls I&nbsp;erected.</p>
  295. <p><cite><em><a data-link-domain="manuelmoreale.com" href="https://manuelmoreale.com/digital-walled-gardens" hreflang="en"
  296. title="Consultation de l’article (anglais)">Digital walled gardens</a>
  297. <a href="/david/cache/2024/812f09bae33b395819539fd2c4693fe2/" hreflang="en"
  298. data-tippy data-description="The concept of a walled garden is not a new one in the digital world. It’s just a fancier, less aggressive way to describe a closed ecosystem or a …"
  299. data-source="https://manuelmoreale.com/digital-walled-gardens"
  300. data-date="2024-03-20"
  301. data-favicon="https://manuelmoreale.com/favicon.ico"
  302. data-domain="manuelmoreale.com"
  303. ><svg xmlns="http://www.w3.org/2000/svg"
  304. width="24" height="24" viewBox="0 0 24 24" fill="none"
  305. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  306. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  307. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  308. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  309. </svg>
  310. <span class="sr-only">[archive]</span></a></em></cite></p>
  311. </blockquote>
  312. <p>🌱</p>
  313. <nav>
  314. <p>
  315. <a href="/david/2024/laboratoire/"
  316. title="Liste de tous les articles 2024 associés à cette étiquette"
  317. rel="tag">#laboratoire</a>
  318. <a href="/david/2024/opensource/"
  319. title="Liste de tous les articles 2024 associés à cette étiquette"
  320. rel="tag">#opensource</a>
  321. <a href="/david/2024/technique/"
  322. title="Liste de tous les articles 2024 associés à cette étiquette"
  323. rel="tag">#technique</a>
  324. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  325. </p>
  326. </nav>
  327. <h2>
  328. <a href="/david/2024/03/03/" title="Lien permanent vers cet article">Permanence</a> <time datetime="2024-03-03">3 mars 2024</time>
  329. </h2>
  330. <blockquote lang="en">
  331. <p>Eventually, I started asking myself: <mark><em>why am I promising permanence?</em></mark> The answer crept up on me: <em>because permanence is better than nothing.</em> Without the momentum of obligation, I didn’t trust myself to begin anything in&nbsp;earnest.</p>
  332. <p>The thing is, it never worked. The half-life of obligation is short; the half-life of guilt is long. Promises never saved one of my side projects, but they clogged many nights and weekends with the gunk of regret. Something had to&nbsp;change.</p>
  333. <p><cite><em><a data-link-domain="dianaberlin.com" href="https://dianaberlin.com/posts/no-more-forever-projects" hreflang="en"
  334. title="Consultation de l’article (anglais)">No more forever projects</a>
  335. <a href="/david/cache/2024/4c8a04c4c0e928bd78f22db77425bb47/" hreflang="en"
  336. data-tippy data-description="It took me a long time to see past forever projects. I told myself that making promises gave beginnings gravity. I labeled my newsletter &nbsp;a “lifelong project” not long after I started it. I called /mentoring a “movement” the day I announced it. Commitment marked a project as something w"
  337. data-source="https://dianaberlin.com/posts/no-more-forever-projects"
  338. data-date="2024-03-03"
  339. data-favicon="https://images.squarespace-cdn.com/content/v1/598927e3bebafbda588a07e2/1504459315187-9G9MSVDRY4HEGXNT8JAL/favicon.ico"
  340. data-domain="dianaberlin.com"
  341. ><svg xmlns="http://www.w3.org/2000/svg"
  342. width="24" height="24" viewBox="0 0 24 24" fill="none"
  343. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  344. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  345. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  346. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  347. </svg>
  348. <span class="sr-only">[archive]</span></a></em></cite></p>
  349. </blockquote>
  350. <p>Je vais aller m’enforester avec cette question. Le refuge ne va pas être accessible via la piste de ski (de fond), plus assez de&nbsp;neige.</p>
  351. <p>Un 3&nbsp;mars, au nord de&nbsp;Montréal.</p>
  352. <a href="#hr-97" title="Lien vers cette section de la page"><hr id="hr-97" /></a>
  353. <blockquote>
  354. <p>Ces chaleurs extrêmes de 2023&nbsp;ont moins à voir avec le développement d’El Niño qu’avec les conditions anticycloniques de la zone. <em>«&nbsp;On a observé une baisse des vents assez forte sur l’Atlantique Nord,</em> explique Christophe Cassou. <em>Or quand il y a moins de vent, il y a moins d’évaporation, ce qui conduit à un réchauffement des eaux de surface. Ces eaux chauffent aussi car elles se mélangent moins avec les eaux plus profondes et plus&nbsp;froides.&nbsp;»</em></p>
  355. <p>Aujourd’hui, cette configuration météorologique a disparu mais les eaux de surface de l’Atlantique Nord continuent de battre des records de chaleur à cause du phénomène El Niño, qui a fini par réchauffer progressivement les eaux de l’océan pendant&nbsp;l’hiver.</p>
  356. <p><cite><em><a data-link-domain="lemonde.fr" href="https://www.lemonde.fr/les-decodeurs/article/2024/03/03/climat-pourquoi-les-temperatures-battent-tous-les-records-depuis-la-mi-2023_6219806_4355770.html" hreflang="fr"
  357. title="Consultation de l’article">Climat&nbsp;: pourquoi les températures battent tous les records depuis la mi-2023</a>
  358. <a href="/david/cache/2024/6fc45aab6c9584cbb6f55ef70a685d01/" hreflang="fr"
  359. data-tippy data-description="L’année 2023 a été classée comme la plus chaude enregistrée depuis 1850, avec 14,98 °C de moyenne sur l’ensemble du globe. La tendance continue en 2024. Le principal coupable : le réchauffement lié aux gaz à effet de serre d’origine humaine."
  360. data-source="https://www.lemonde.fr/les-decodeurs/article/2024/03/03/climat-pourquoi-les-temperatures-battent-tous-les-records-depuis-la-mi-2023_6219806_4355770.html"
  361. data-date="2024-03-03"
  362. data-favicon="https://www.lemonde.fr/dist/assets/img/logos/pwa-180.png"
  363. data-domain="lemonde.fr"
  364. ><svg xmlns="http://www.w3.org/2000/svg"
  365. width="24" height="24" viewBox="0 0 24 24" fill="none"
  366. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  367. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  368. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  369. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  370. </svg>
  371. <span class="sr-only">[archive]</span></a></em></cite></p>
  372. </blockquote>
  373. <p>Les Décodeurs m’offrent une grille de lecture des phénomènes en cours&nbsp;intéressante.</p>
  374. <a href="#hr-98" title="Lien vers cette section de la page"><hr id="hr-98" /></a>
  375. <blockquote lang="en">
  376. <p>From pragma directives, to async scripts, to stylesheets, to open graph tags, it’s easy to mess up and can have consequences. Capo.js will show you the <a data-link-domain="rviscomi.github.io" href="https://rviscomi.github.io/capo.js/user/rules/">specific order of elements</a> to make your <code>&lt;head&gt;</code> and your page a little (or a lotta) bit&nbsp;faster.</p>
  377. <p><cite><em><a data-link-domain="frontendmasters.com" href="https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/" hreflang="en"
  378. title="Consultation de l’article (anglais)">Capo.js: A five minute web performance boost</a>
  379. <a href="/david/cache/2024/a122504621c3c5318c0bdee38ef4479b/" hreflang="en"
  380. data-tippy data-description="You want a quick web performance win at work that’s sure to get you a promotion? Want it to only take five minutes? Then I got you. Capo.js is a tool to get your <head> in order. It’s based o…"
  381. data-source="https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/"
  382. data-date="2024-03-03"
  383. data-favicon="https://frontendmasters.com/favicon-32x32.png"
  384. data-domain="frontendmasters.com"
  385. ><svg xmlns="http://www.w3.org/2000/svg"
  386. width="24" height="24" viewBox="0 0 24 24" fill="none"
  387. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  388. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  389. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  390. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  391. </svg>
  392. <span class="sr-only">[archive]</span></a></em></cite></p>
  393. </blockquote>
  394. <p>Il est aussi possible d’<a data-link-domain="rviscomi.github.io" href="https://rviscomi.github.io/capo.js/user/demo/">utiliser la démo</a> sans installer aucun JS en copiant du HTML ou en pointant vers une page. J’ai du mal à évaluer à quel point c’est pertinent pour cet espace, peut-être davantage dans des <a data-link-domain="tonsky.me" href="https://tonsky.me/blog/js-bloat/" hreflang="en"
  395. title="Consultation de l’article (anglais)">contextes sans prise de soin</a>
  396. <a href="/david/cache/2024/ad911ebf7ba5523ef0be1bdd599f7623/" hreflang="en"
  397. data-tippy data-description="What is the average size of JavaScript code downloaded per website? Fuck around and find out!"
  398. data-source="https://tonsky.me/blog/js-bloat/"
  399. data-date="2024-03-03"
  400. data-favicon="https://tonsky.me/i/favicon.png"
  401. data-domain="tonsky.me"
  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> qui semblent être la norme&nbsp;aujourd’hui.</p>
  410. <a href="#hr-99" title="Lien vers cette section de la page"><hr id="hr-99" /></a>
  411. <blockquote>
  412. <p>Rêve de la nuit&nbsp;dernière</p>
  413. <p><cite><em><a data-link-domain="la-grange.net" href="https://www.la-grange.net/2024/02/20/reve" hreflang="fr"
  414. title="Consultation de l’article">rêve - Carnets Web de La Grange</a>
  415. <a href="/david/cache/2024/24716a84007189a332fd8db3e5ff4c05/" hreflang="fr"
  416. data-tippy data-description=""
  417. data-source="https://www.la-grange.net/2024/02/20/reve"
  418. data-date="2024-03-03"
  419. data-favicon="https://www.la-grange.net/favicon.ico"
  420. data-domain="la-grange.net"
  421. ><svg xmlns="http://www.w3.org/2000/svg"
  422. width="24" height="24" viewBox="0 0 24 24" fill="none"
  423. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  424. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  425. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  426. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  427. </svg>
  428. <span class="sr-only">[archive]</span></a></em></cite></p>
  429. </blockquote>
  430. <p>💚</p>
  431. <nav>
  432. <p>
  433. <a href="/david/2024/dependance/"
  434. title="Liste de tous les articles 2024 associés à cette étiquette"
  435. rel="tag">#dépendance</a>
  436. <a href="/david/2024/opensource/"
  437. title="Liste de tous les articles 2024 associés à cette étiquette"
  438. rel="tag">#opensource</a>
  439. <a href="/david/2024/parvenir/"
  440. title="Liste de tous les articles 2024 associés à cette étiquette"
  441. rel="tag">#parvenir</a>
  442. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  443. </p>
  444. </nav>
  445. <h2>
  446. <a href="/david/2024/02/16/" title="Lien permanent vers cet article">uMap 2</a> <time datetime="2024-02-16">16 février 2024</time>
  447. </h2>
  448. <blockquote lang="en">
  449. <p>But it’s deeper that that. Open source is <em>good for humanity</em>. It’s only slightly hyperbolic to say that <mark>open source is one of the most notable collective successes</mark> of humankind as a species! It’s one of the few places where essentially all of humanity works together on something that benefits everyone. A world without open source would be substantially worse than the world we live&nbsp;in.</p>
  450. <p><cite><em><a data-link-domain="jacobian.org" href="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/" hreflang="en"
  451. title="Consultation de l’article (anglais)">Paying people to work on open source is good actually</a>
  452. <a href="/david/cache/2024/ad0648259b032d4d0e5a9e6220c3c71e/" hreflang="en"
  453. data-tippy data-description="If you have a problem with maintainers getting paid then you have a problem with me and I suggest you let that one marinate."
  454. data-source="https://jacobian.org/2024/feb/16/paying-maintainers-is-good/"
  455. data-date="2024-02-17"
  456. data-favicon="https://jacobian.org/favicon.ico"
  457. data-domain="jacobian.org"
  458. ><svg xmlns="http://www.w3.org/2000/svg"
  459. width="24" height="24" viewBox="0 0 24 24" fill="none"
  460. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  461. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  462. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  463. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  464. </svg>
  465. <span class="sr-only">[archive]</span></a></em></cite></p>
  466. </blockquote>
  467. <p>J’ai déjà parlé <a href="/david/2024/01/18/" title="Open-source">d’open-source</a>, de <a href="/david/2024/01/31/" title="Mécénat">mécénat</a>, de <a href="/david/2024/02/09/" title="Version">versions</a>, de <a href="/david/2024/02/15/" title="Licence">licences</a>, mais comment se passe une <em>release</em> de produit&nbsp;open-source&#8239;?</p>
  468. <p>On commence à avoir affiné et <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/release/">documenté le processus</a>, on a <a data-link-domain="github.com" href="https://github.com/umap-project/umap-deploy-osmfr">des scripts dédiés</a> pour arriver à cela lorsque le moment est venu et nous sommes pour l’instant 2&nbsp;à pouvoir faire cela de bout en bout avec <a data-link-domain="yohanboniface.me" href="https://yohanboniface.me/">Yohan</a>. C’est peu mais c’est aussi +100% par rapport à l’année&nbsp;dernière…</p>
  469. <p>Nous n’étions pas très loin de repousser encore une fois la version&nbsp;2&nbsp;car il y avait un dernier changement majeur à faire passer. Tiraillés, nous avons repoussé cela à une version&nbsp;3&nbsp;quitte à ce qu’elle arrive prochainement. Franchir cette barrière psychologique était important pour la suite. Le faire en visio de bout en bout (comme une bonne partie de nos interactions sur le produit) était enthousiasmant. En bonus, c’était un vendredi&nbsp;après-midi.</p>
  470. <p>Voilà donc <a data-link-domain="docs.umap-project.org" href="https://docs.umap-project.org/en/master/changelog/#200-2024-02-16">un <em>changelog</em></a> déjà bien chargé. Nous nous sommes rendu compte au cours du processus que le versionnement était davantage pertinent pour les mainteneur·euses que pour les utilisateur·ices. Les fonctionnalités sont ajoutées au compte-goutte mais il faut prévenir les personnes qui vont mettre à jour l’outil de ce qui pourrait coincer lors du déploiement. Certains changements ont été volontaires (modules ESM =&gt; support navigateurs), d’autres contraints (fin du support de l’authification OpenStreetMap OAuth1), d’autres subis (Django&nbsp;5 =&gt; Python 3.10). Un beau&nbsp;mélange.</p>
  471. <p>Je ne vais rien annoncer pour une version&nbsp;3&nbsp;car ce serait ajouter une pression inutile et même si on a des intuitions tout est loin d’être priorisé. Dans mes motivations <em>personnelles</em>&nbsp;:</p>
  472. <ul>
  473. <li>aller vers une amélioration de&nbsp;l’accessibilité&#8239;;</li>
  474. <li>voir les <a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/tag/umap.html">explorations d’Alexis</a> prendre&nbsp;forme&#8239;;</li>
  475. <li>clarifier les lieux de support / documentation en participant&nbsp;davantage.</li>
  476. </ul>
  477. <blockquote lang="en">
  478. <p>We have to accept the world as it is – even if it’s not the world we want. This means we have to be okay with the idea that maintainers need to be paid. Far too often I see arguments like: “<mark>maintainers shouldn’t be paid by private companies because the government should be supporting them.</mark>” Sure, this sounds great – but <em>governments aren’t doing this!</em> So this argument reduces to “open source maintainers shouldn’t be paid”. I can’t get on board with&nbsp;that.</p>
  479. <p><cite><em>Ibid.</em></cite></p>
  480. </blockquote>
  481. <p>Étant actuellement payé par l’Agence nationale de la cohésion des territoires pour participer à de l’<em>open-source</em>, je ne peux qu’approuver cette partie de la citation et être heureux de me trouver là où je suis. Les exceptions existent grâce à une conjonction de volontés, de privilèges et de coups de&nbsp;bol.</p>
  482. <a href="#hr-73" title="Lien vers cette section de la page"><hr id="hr-73" /></a>
  483. <blockquote lang="en">
  484. <p><a data-link-domain="github.com" href="https://github.com/astral-sh/uv">uv</a> represents a milestone in our pursuit of a “<a data-link-domain="blog.rust-lang.org" href="https://blog.rust-lang.org/2016/05/05/cargo-pillars.html#pillars-of-cargo">Cargo for Python</a>”: a comprehensive Python project and package manager that’s fast, reliable, and easy to&nbsp;use.</p>
  485. <p><cite><em><a data-link-domain="astral.sh" href="https://astral.sh/blog/uv" hreflang="en"
  486. title="Consultation de l’article (anglais)">uv: Python packaging in Rust</a>
  487. <a href="/david/cache/2024/359df603dbf60e8476027b2eb26cb7ce/" hreflang="en"
  488. data-tippy data-description="uv is an extremely fast Python package installer and resolver, designed as a drop-in alternative to pip and pip-tools."
  489. data-source="https://astral.sh/blog/uv"
  490. data-date="2024-02-17"
  491. data-favicon="https://astral.sh/static/favicon-32x32.png"
  492. data-domain="astral.sh"
  493. ><svg xmlns="http://www.w3.org/2000/svg"
  494. width="24" height="24" viewBox="0 0 24 24" fill="none"
  495. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  496. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  497. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  498. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  499. </svg>
  500. <span class="sr-only">[archive]</span></a></em></cite></p>
  501. </blockquote>
  502. <p>Un futur de Python se dessine et j’en apprécie les&nbsp;esquisses.</p>
  503. <nav>
  504. <p>
  505. <a href="/david/2024/commun/"
  506. title="Liste de tous les articles 2024 associés à cette étiquette"
  507. rel="tag">#commun</a>
  508. <a href="/david/2024/decision/"
  509. title="Liste de tous les articles 2024 associés à cette étiquette"
  510. rel="tag">#décision</a>
  511. <a href="/david/2024/opensource/"
  512. title="Liste de tous les articles 2024 associés à cette étiquette"
  513. rel="tag">#opensource</a>
  514. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  515. </p>
  516. </nav>
  517. <h2>
  518. <a href="/david/2024/02/15/" title="Lien permanent vers cet article">Licence</a> <time datetime="2024-02-15">15 février 2024</time>
  519. </h2>
  520. <blockquote lang="en">
  521. <p>Title: WTFPL Submission: http://crynwr.com/cgi-bin/ezmlm-cgi?17:mss:634:200902:aglgcgbhmfcheffmdgon License: http://sam.zoy.org/wtfpl/ Comments: It’s no different from dedication to the public domain. Author has submitted license approval request — author is free to make public domain dedication. Although he agrees with the recommendation, Mr. Michlmayr notes that <mark>public domain doesn’t exist in Europe.</mark> Recommend: Reject</p>
  522. <p><cite><em><a data-link-domain="opensource.org" href="https://opensource.org/meeting-minutes/minutes20090304/" hreflang="en"
  523. title="Consultation de l’article (anglais)">OSI Board Meeting Minutes, Wednesday, March 4, 2009</a>
  524. <a href="/david/cache/2024/90e6434dbda21f9d18ad8fa53c822b47/" hreflang="en"
  525. data-tippy data-description="Quorum reached and meeting called to order 08:10 am PST. Attendees Mr. Michael Tiemann, President Ms. Danese Cooper, Secretary and Treasurer Mr. Harshad Gune, Director Mr. Martin Michlmayr, Directo…"
  526. data-source="https://opensource.org/meeting-minutes/minutes20090304/"
  527. data-date="2024-02-17"
  528. data-favicon="https://i0.wp.com/opensource.org/wp-content/uploads/2023/01/cropped-cropped-OSI_Horizontal_Logo_0-e1674081292667.png?fit=32%2C32&ssl=1"
  529. data-domain="opensource.org"
  530. ><svg xmlns="http://www.w3.org/2000/svg"
  531. width="24" height="24" viewBox="0 0 24 24" fill="none"
  532. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  533. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  534. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  535. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  536. </svg>
  537. <span class="sr-only">[archive]</span></a></em></cite></p>
  538. </blockquote>
  539. <p>Nous sommes <a data-link-domain="github.com" href="https://github.com/umap-project/umap/pull/1605">passés</a> de la licence <a data-link-domain="wtfpl.net" href="http://www.wtfpl.net/">WTFPL</a> à <a data-link-domain="gnu.org" href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a> pour uMap à partir de la version&nbsp;2 (à venir). Notamment car elle n’était pas acceptable pour l’<a data-link-domain="opensource.org" href="https://opensource.org/">OSI</a> ce qui nous posait des problèmes pour obtenir des financements européen ou pour bénéficier des plans <em>open-source</em> de services comme <a data-link-domain="browserstack.com" href="https://www.browserstack.com/open-source">BrowserStack</a>.</p>
  540. <p>Le seul service qui a accepté la licence WTFPL sans broncher est <a data-link-domain="sentry.io" href="https://sentry.io/for/open-source/">Sentry</a>, ceci en un temps&nbsp;record.</p>
  541. <blockquote lang="en">
  542. <p>Simply put, the AGPLv3 is effectively the GPLv3, but with an additional licensing term that ensures that users who interact <mark>over a network</mark> with modified versions of the program can receive the source code for that&nbsp;program.</p>
  543. <p><cite><em><a data-link-domain="fsf.org" href="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3" hreflang="en"
  544. title="Consultation de l’article (anglais)">The fundamentals of the AGPLv3</a>
  545. <a href="/david/cache/2024/036789c955419215be9d88c6823b55aa/" hreflang="en"
  546. data-tippy data-description="The GNU Affero General Public License version 3 (AGPLv3) is the most protective of computer user freedom, yet it remains the most misunderstood of the GNU family of licenses."
  547. data-source="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3"
  548. data-date="2024-02-17"
  549. data-favicon="https://www.fsf.org/favicon.ico"
  550. data-domain="fsf.org"
  551. ><svg xmlns="http://www.w3.org/2000/svg"
  552. width="24" height="24" viewBox="0 0 24 24" fill="none"
  553. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  554. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  555. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  556. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  557. </svg>
  558. <span class="sr-only">[archive]</span></a></em></cite></p>
  559. </blockquote>
  560. <a href="#hr-72" title="Lien vers cette section de la page"><hr id="hr-72" /></a>
  561. <blockquote>
  562. <p>La prévalence des drogues chinoises, et synthétiques en général, sur le marché a eu des conséquences au Mexique voisin. Dans une vidéo de fin 2020, The Intercept montre que la baisse drastique de demande en héroïne au profit du fentanyl a des conséquences humaines considérables. «&nbsp;Les cultivateurs de pavot au Mexique doivent se résoudre à migrer pour travailler ou se tourner vers le crime organisé&nbsp;», raconte le média, partageant des témoignages de personnes précaires encore appauvries par la&nbsp;situation.</p>
  563. <p><cite><em><a data-link-domain="basta.media" href="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer" hreflang="fr"
  564. title="Consultation de l’article">Crise des opioïdes&nbsp;: pourquoi il ne faut ni l’oublier ni l’ignorer</a>
  565. <a href="/david/cache/2024/1929f7183f694c7abeafeddb891fcf50/" hreflang="fr"
  566. data-tippy data-description="Aux États-Unis, le nombre de morts par overdose dépasse celui des décès sur la route. La crise des opioïdes, déclarée dans les années 2010, touche aussi de plein fouet le Canada. Et le phénomène dépasse les frontières nord-américaines."
  567. data-source="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer"
  568. data-date="2024-02-17"
  569. data-favicon="https://basta.media/squelettes/basta/favicon/favicon.svg?1634019699"
  570. data-domain="basta.media"
  571. ><svg xmlns="http://www.w3.org/2000/svg"
  572. width="24" height="24" viewBox="0 0 24 24" fill="none"
  573. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  574. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  575. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  576. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  577. </svg>
  578. <span class="sr-only">[archive]</span></a></em></cite></p>
  579. </blockquote>
  580. <p>Je n’avais pas encore pris conscience de tous les enjeux socio-économico-géopolitiques de ces nouvelles drogues. Il y a des guerres qui sont moins médiatisées que&nbsp;d’autres.</p>
  581. <nav>
  582. <p>
  583. <a href="/david/2024/commun/"
  584. title="Liste de tous les articles 2024 associés à cette étiquette"
  585. rel="tag">#commun</a>
  586. <a href="/david/2024/decision/"
  587. title="Liste de tous les articles 2024 associés à cette étiquette"
  588. rel="tag">#décision</a>
  589. <a href="/david/2024/opensource/"
  590. title="Liste de tous les articles 2024 associés à cette étiquette"
  591. rel="tag">#opensource</a>
  592. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  593. </p>
  594. </nav>
  595. <h2>
  596. <a href="/david/2024/02/11/" title="Lien permanent vers cet article">Violence</a> <time datetime="2024-02-11">11 février 2024</time>
  597. </h2>
  598. <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>
  599. <ul>
  600. <li>dans le contexte de littératie numérique de la&nbsp;personne,</li>
  601. <li>dans le contexte culturel du groupe de travail autour de la&nbsp;personne,</li>
  602. <li>dans les priorités actuelles du groupe pour lequel l’informatique reste un outil&nbsp;et/ou</li>
  603. <li>dans la situation de détresse en&nbsp;cours.</li>
  604. </ul>
  605. <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>
  606. <nav>
  607. <p>
  608. <a href="/david/2024/communaute/"
  609. title="Liste de tous les articles 2024 associés à cette étiquette"
  610. rel="tag">#communauté</a>
  611. <a href="/david/2024/opensource/"
  612. title="Liste de tous les articles 2024 associés à cette étiquette"
  613. rel="tag">#opensource</a>
  614. <a href="/david/2024/psychologie/"
  615. title="Liste de tous les articles 2024 associés à cette étiquette"
  616. rel="tag">#psychologie</a>
  617. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  618. </p>
  619. </nav>
  620. <h2>
  621. <a href="/david/2024/02/09/" title="Lien permanent vers cet article">Version</a> <time datetime="2024-02-09">9 février 2024</time>
  622. </h2>
  623. <p>Il y a cette appréhension à sortir une version&nbsp;2&nbsp;qui est bloquante sur pas mal de projets / produits / outils. Réduire ses ambitions quitte à planifier les versions 3&nbsp;et 4&nbsp;par la même occasion est un moyen de faire baisser la pression de ses propres attentes. Ce n’est plus <strong>l</strong>’évènement mais <em>un</em> évènement parmi les suivants qui vient s’intégrer dans une dynamique plus&nbsp;globale.</p>
  624. <p>Il y a d’un côté l’<a href="/david/2024/01/19/#hr-38">effort pour les personnes qui vont l’utiliser</a> et de l’autre <a data-link-domain="yolover.org" href="https://yolover.org/" hreflang="en"
  625. title="Consultation de l’article (anglais)">la motivation</a>
  626. <a href="/david/cache/2024/959374400b4bb6d58c74116ffd08281b/" hreflang="en"
  627. data-tippy data-description="Realistic versioning for modern software."
  628. data-source="https://yolover.org/"
  629. data-date="2024-02-09"
  630. data-favicon="https://yolover.org/favicon.png"
  631. data-domain="yolover.org"
  632. ><svg xmlns="http://www.w3.org/2000/svg"
  633. width="24" height="24" viewBox="0 0 24 24" fill="none"
  634. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  635. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  636. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  637. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  638. </svg>
  639. <span class="sr-only">[archive]</span></a> pour les personnes qui vont développer et maintenir le&nbsp;produit.</p>
  640. <p>Je caricature mais on est&nbsp;vendredi.</p>
  641. <nav>
  642. <p>
  643. <a href="/david/2024/apprentissage/"
  644. title="Liste de tous les articles 2024 associés à cette étiquette"
  645. rel="tag">#apprentissage</a>
  646. <a href="/david/2024/decision/"
  647. title="Liste de tous les articles 2024 associés à cette étiquette"
  648. rel="tag">#décision</a>
  649. <a href="/david/2024/opensource/"
  650. title="Liste de tous les articles 2024 associés à cette étiquette"
  651. rel="tag">#opensource</a>
  652. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  653. </p>
  654. </nav>
  655. <h2>
  656. <a href="/david/2024/02/03/" title="Lien permanent vers cet article">Archives</a> <time datetime="2024-02-03">3 février 2024</time>
  657. </h2>
  658. <blockquote lang="en">
  659. <p>Google will no longer be keeping a backup of the entire Internet. Google Search’s “cached” links have long been an alternative way to load a website that was down or had changed, but now the company is killing them off. Google “Search Liaison” Danny Sullivan confirmed the feature removal in an X post, saying the feature “was meant for helping people access pages when way back, you often couldn’t depend on a page loading. These days, <mark>things have greatly improved.</mark> So, it was decided to retire&nbsp;it.”</p>
  660. <p><cite><em><a data-link-domain="arstechnica.com" href="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/" hreflang="en"
  661. title="Consultation de l’article (anglais)">Google will no longer back up the Internet: Cached webpages are dead</a>
  662. <a href="/david/cache/2024/75c7b6350ba18a5a11ee3bbf8b3b64be/" hreflang="en"
  663. data-tippy data-description="Google Search will no longer make site backups while crawling the web."
  664. data-source="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/"
  665. data-date="2024-02-03"
  666. data-favicon="https://cdn.arstechnica.net/wp-content/themes/ars/assets/img/material-ars-db41652381.png"
  667. data-domain="arstechnica.com"
  668. ><svg xmlns="http://www.w3.org/2000/svg"
  669. width="24" height="24" viewBox="0 0 24 24" fill="none"
  670. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  671. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  672. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  673. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  674. </svg>
  675. <span class="sr-only">[archive]</span></a></em></cite></p>
  676. </blockquote>
  677. <p><em>(rires)</em></p>
  678. <p>Forcément en lisant ça un samedi matin, j’étais immédiatement motivé pour améliorer la façon dont j’archive les liens par ici. À commencer par des méta-données qui permettraient d’avoir une prévisualisation des liens un peu&nbsp;enrichie.</p>
  679. <p>Je me dis que je ne dois pas être le seul à essayer d’extraire des informations des pages. Et j’en trouve pas mal&nbsp;: <a data-link-domain="github.com" href="https://github.com/gri38/hyperlink_preview">hyperlink_preview</a>, <a data-link-domain="github.com" href="https://github.com/scrapinghub/extruct">extruct</a> ou <a data-link-domain="github.com" href="https://github.com/seanbreckenridge/url_cache">url_cache</a> pour ne citer qu’eux. Cela me met sur la piste de <a data-link-domain="github.com" href="https://github.com/michaelhelmick/lassie">Lassie</a> qui semble extraire ce que j’aimerais avoir&nbsp;: une image ou favicon, potentiellement une description, ainsi qu’une langue. Jake Lazaroff m’avait <a href="/david/2024/02/01/#hr-60">depuis répondu</a> qu’il génère en fait ses vignettes au moment de la <a data-link-domain="gist.github.com" href="https://gist.github.com/jakelazaroff/36b9665efe02870576acfc033171d6bf">construction du site</a>. Je ne veux pas totalement suivre cette approche car je ne veux pas stocker d’images additionnelles mais je vais essayer d’avoir une solution&nbsp;hybride.</p>
  680. <p>Cela m’embête de plus en plus de coupler le générateur de site aux (méta-)données des archives. <em>À&nbsp;méditer.</em></p>
  681. <p>Pour ce qui est de l’interface, ça attendra un autre jour. J’ai tout de même ajouté des attributs <code>hreflang</code> et la bonne langue dans les pages d’archives, un truc qui me grattait depuis un bout de&nbsp;temps.</p>
  682. <a href="#hr-62" title="Lien vers cette section de la page"><hr id="hr-62" /></a>
  683. <p>Cela fait <a href="/david/2020/02/07/#sonos">bien longtemps</a> que je regrette d’avoir acheté des enceintes Sonos. Hier —&nbsp;encore une fois frustré par l’application proposée par défaut&nbsp;— je découvre <a data-link-domain="github.com" href="https://github.com/SoCo/SoCo">SoCo</a> ainsi que <a data-link-domain="github.com" href="https://github.com/avantrec/soco-cli">soco-cli</a> après quelques recherches. Je passe ensuite la soirée à batailler avec Automator pour pouvoir faire un clic-droit sur un dossier local et que ça me lise les fichiers FLAC qui sont&nbsp;dedans.</p>
  684. <p>J’arrive à la solution&nbsp;suivante&nbsp;:</p>
  685. <pre><code>on run {input, parameters}
  686. tell application &quot;Terminal&quot;
  687. do script &quot;cd ~/sonos &amp;&amp; sonos Chambre play_dir '&quot; &amp; (POSIX path of input) &amp; &quot;'&quot;
  688. end tell
  689. return input
  690. end run
  691. </code></pre>
  692. <p>Ce n’est pas très élégant et je n’ai pas réussi à faire en sorte que ça se lance dans iTerm mais au moins ça joue de la&nbsp;musique.</p>
  693. <a href="#hr-63" title="Lien vers cette section de la page"><hr id="hr-63" /></a>
  694. <blockquote lang="en">
  695. <p><strong>drab</strong> focuses on providing JavaScript functionality where it’s most useful. Many of the elements are helpful wrappers <mark>around browser APIs.</mark> Here are some of the features of the&nbsp;library.</p>
  696. <p><cite><em><a data-link-domain="drab.robino.dev" href="https://drab.robino.dev/" hreflang="en"
  697. title="Consultation de l’article (anglais)">drab - A Headless Custom Element Library</a>
  698. <a href="/david/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/" hreflang="en"
  699. data-tippy data-description="A headless custom element library."
  700. data-source="https://drab.robino.dev/"
  701. data-date="2024-02-03"
  702. data-favicon="https://drab.robino.dev/favicon.svg"
  703. data-domain="drab.robino.dev"
  704. ><svg xmlns="http://www.w3.org/2000/svg"
  705. width="24" height="24" viewBox="0 0 24 24" fill="none"
  706. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  707. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  708. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  709. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  710. </svg>
  711. <span class="sr-only">[archive]</span></a></em></cite></p>
  712. </blockquote>
  713. <p>Le futur qui se dessine à ce sujet est <em>très</em> stimulant. Cela fait 15&nbsp;ans qu’il y a une production de masse de code JS qui n’est ni réutilisable, ni interopérable. J’ai bon espoir que ce soit en train de&nbsp;changer.</p>
  714. <a href="#hr-64" title="Lien vers cette section de la page"><hr id="hr-64" /></a>
  715. <blockquote lang="en">
  716. <p>When trying to defend this, economists typically claim that we have unlimited desire for new stuff. Apparently, rather than dedicating the time gains from technology to leisure, we pour it into making more stuff for ourselves. This is bogus. People do have a limited desire for new things, because dedicating yourself to endless production (and consumption) comes at the expense of hanging out with your family, friends and pets, or doing stuff like walking in the wilderness or surfing the waves. What people actually desire is a balance of many things, but <mark>the system we’re stuck in has unlimited desire for one direction only.</mark> That’s because it’s a vortex unleashed by humans who no longer know how to stop&nbsp;it.</p>
  717. <p><cite><em><a data-link-domain="brettscott.substack.com" href="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier" hreflang="en"
  718. title="Consultation de l’article (anglais)">Tech doesn’t make our lives easier. It makes them faster</a>
  719. <a href="/david/cache/2024/9750840b448f07a2f2594bb25da23836/" hreflang="en"
  720. data-tippy data-description="Supposedly technologies like AI and digital payments make our lives easier. In reality convenience is an illusion used to sell us automation-driven acceleration"
  721. data-source="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier"
  722. data-date="2024-02-03"
  723. data-favicon="https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fd3d5b3dd-9c2b-4f8c-a2b7-f39933be1d53%2Ffavicon-16x16.png"
  724. data-domain="brettscott.substack.com"
  725. ><svg xmlns="http://www.w3.org/2000/svg"
  726. width="24" height="24" viewBox="0 0 24 24" fill="none"
  727. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  728. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  729. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  730. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  731. </svg>
  732. <span class="sr-only">[archive]</span></a></em></cite></p>
  733. </blockquote>
  734. <p>Un bon article à lire après 24h de galères&nbsp;techniques&nbsp;😅.</p>
  735. <nav>
  736. <p>
  737. <a href="/david/2024/dependance/"
  738. title="Liste de tous les articles 2024 associés à cette étiquette"
  739. rel="tag">#dépendance</a>
  740. <a href="/david/2024/opensource/"
  741. title="Liste de tous les articles 2024 associés à cette étiquette"
  742. rel="tag">#opensource</a>
  743. <a href="/david/2024/technique/"
  744. title="Liste de tous les articles 2024 associés à cette étiquette"
  745. rel="tag">#technique</a>
  746. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  747. </p>
  748. </nav>
  749. <h2>
  750. <a href="/david/2024/01/18/" title="Lien permanent vers cet article">Open-source</a> <time datetime="2024-01-18">18 janvier 2024</time>
  751. </h2>
  752. <p>Deux phrases du&nbsp;jour&nbsp;:</p>
  753. <ol>
  754. <li><q lang="en">Open Source is the Right to Repair, for software.</q>, <a data-link-domain="macaw.social" href="https://macaw.social/@andypiper/111774169944729337">sur&nbsp;masto</a></li>
  755. <li><q lang="fr">uMap est-il un produit ou un commun&#8239;?</q>, en réunion&nbsp;interne</li>
  756. </ol>
  757. <p>Faute de temps, le développement est laissé comme exercice aux&nbsp;lecteur·ices.</p>
  758. <nav>
  759. <p>
  760. <a href="/david/2024/commun/"
  761. title="Liste de tous les articles 2024 associés à cette étiquette"
  762. rel="tag">#commun</a>
  763. <a href="/david/2024/decision/"
  764. title="Liste de tous les articles 2024 associés à cette étiquette"
  765. rel="tag">#décision</a>
  766. <a href="/david/2024/opensource/"
  767. title="Liste de tous les articles 2024 associés à cette étiquette"
  768. rel="tag">#opensource</a>
  769. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  770. </p>
  771. </nav>
  772. <form action="/david/recherche/" method="get">
  773. <fieldset>
  774. <legend>Recherche</legend>
  775. <label for="input-search">Termes de votre recherche :</label>
  776. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  777. <input type="submit" value="Chercher">
  778. <p id="indexation-infos">
  779. <small>
  780. Seuls les contenus de ces 8 dernières années sont indexés.
  781. </small>
  782. </p>
  783. </fieldset>
  784. </form>
  785. <aside>
  786. <theme-toggle></theme-toggle>
  787. </aside>
  788. </article>
  789. <hr>
  790. <footer>
  791. <p>
  792. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  793. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  794. <a href="http://larlet.com"
  795. title="Go to my English profile"
  796. data-instant>Pro</a>
  797. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  798. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  799. </p>
  800. <template id="theme-selector">
  801. <form>
  802. <style type="text/css">
  803. fieldset div {
  804. text-align: center;
  805. }
  806. </style>
  807. <fieldset>
  808. <legend>Thème</legend>
  809. <div>
  810. <label>
  811. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  812. Auto
  813. </label>
  814. <label>
  815. <input type="radio" value="dark" name="chosen-color-scheme">
  816. Foncé
  817. </label>
  818. <label>
  819. <input type="radio" value="light" name="chosen-color-scheme">
  820. Clair
  821. </label>
  822. </div>
  823. </fieldset>
  824. </form>
  825. </template>
  826. </footer>
  827. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  828. <script>
  829. class ThemeToggle extends HTMLElement {
  830. constructor() {
  831. super()
  832. const themeSelectorTemplate = document.querySelector('#theme-selector')
  833. const form = themeSelectorTemplate.content.firstElementChild
  834. this.attachShadow({ mode: 'open' })
  835. this.shadowRoot.appendChild(form.cloneNode(true))
  836. }
  837. connectedCallback() {
  838. const form = this.shadowRoot.querySelector('form')
  839. form.addEventListener('change', (e) => {
  840. const chosenColorScheme = e.target.value
  841. localStorage.setItem('theme', chosenColorScheme)
  842. toggleTheme(chosenColorScheme)
  843. })
  844. const selectedTheme = localStorage.getItem('theme')
  845. if (selectedTheme && selectedTheme !== 'undefined') {
  846. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  847. }
  848. }
  849. }
  850. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  851. window.addEventListener('load', () => {
  852. let colorsLayer = undefined
  853. let hasDarkRules = false
  854. for (const styleSheet of Array.from(document.styleSheets)) {
  855. let mediaRules = []
  856. for (const layerRule of styleSheet.cssRules) {
  857. if (!(layerRule instanceof CSSLayerBlockRule)) {
  858. continue
  859. }
  860. if (layerRule.name === 'colors') {
  861. colorsLayer = layerRule
  862. }
  863. for (const cssRule of layerRule.cssRules) {
  864. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  865. continue
  866. }
  867. // WARNING: Safari does not have/supports `conditionText`.
  868. if (cssRule.conditionText) {
  869. if (cssRule.conditionText !== prefersColorSchemeDark) {
  870. continue
  871. }
  872. } else {
  873. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  874. continue
  875. }
  876. }
  877. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  878. }
  879. }
  880. // WARNING: do not try to insert a Rule to a styleSheet you are
  881. // currently iterating on, otherwise the browser will be stuck
  882. // in a infinite loop…
  883. for (const mediaRule of mediaRules) {
  884. // Safari requires the `0` second parameter (even if default).
  885. colorsLayer.insertRule(mediaRule.cssText, 0)
  886. hasDarkRules = true
  887. }
  888. }
  889. if (hasDarkRules) {
  890. if ('customElements' in window && !customElements.get('theme-toggle')) {
  891. customElements.define('theme-toggle', ThemeToggle)
  892. }
  893. }
  894. })
  895. </script>
  896. </body>
  897. </html>