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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581
  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. <meta name="description" content="Publications relatives au tag #opensource">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2024-02-03.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#opensource</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/02/15/" title="Lien permanent vers cet article">Licence</a> <time datetime="2024-02-15">15 février 2024</time>
  132. </h2>
  133. <blockquote lang="en">
  134. <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>
  135. <p><cite><em><a data-link-domain="opensource.org" href="https://opensource.org/meeting-minutes/minutes20090304/" hreflang="en"
  136. title="Consultation de l’article (anglais)">OSI Board Meeting Minutes, Wednesday, March 4, 2009</a>
  137. <a href="/david/cache/2024/90e6434dbda21f9d18ad8fa53c822b47/" hreflang="en"
  138. 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…"
  139. data-source="https://opensource.org/meeting-minutes/minutes20090304/"
  140. data-date="2024-02-17"
  141. 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"
  142. data-domain="opensource.org"
  143. ><svg xmlns="http://www.w3.org/2000/svg"
  144. width="24" height="24" viewBox="0 0 24 24" fill="none"
  145. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  146. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  147. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  148. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  149. </svg>
  150. <span class="sr-only">[archive]</span></a></em></cite></p>
  151. </blockquote>
  152. <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>
  153. <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>
  154. <blockquote lang="en">
  155. <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>
  156. <p><cite><em><a data-link-domain="fsf.org" href="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3" hreflang="en"
  157. title="Consultation de l’article (anglais)">The fundamentals of the AGPLv3</a>
  158. <a href="/david/cache/2024/036789c955419215be9d88c6823b55aa/" hreflang="en"
  159. 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."
  160. data-source="https://www.fsf.org/bulletin/2021/fall/the-fundamentals-of-the-agplv3"
  161. data-date="2024-02-17"
  162. data-favicon="https://www.fsf.org/favicon.ico"
  163. data-domain="fsf.org"
  164. ><svg xmlns="http://www.w3.org/2000/svg"
  165. width="24" height="24" viewBox="0 0 24 24" fill="none"
  166. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  167. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  168. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  169. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  170. </svg>
  171. <span class="sr-only">[archive]</span></a></em></cite></p>
  172. </blockquote>
  173. <a href="#hr-72" title="Lien vers cette section de la page"><hr id="hr-72" /></a>
  174. <blockquote>
  175. <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>
  176. <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"
  177. title="Consultation de l’article">Crise des opioïdes&nbsp;: pourquoi il ne faut ni l’oublier ni l’ignorer</a>
  178. <a href="/david/cache/2024/1929f7183f694c7abeafeddb891fcf50/" hreflang="fr"
  179. 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."
  180. data-source="https://basta.media/crise-des-opioides-pourquoi-il-ne-faut-ni-oublier-ni-ignorer"
  181. data-date="2024-02-17"
  182. data-favicon="https://basta.media/squelettes/basta/favicon/favicon.svg?1634019699"
  183. data-domain="basta.media"
  184. ><svg xmlns="http://www.w3.org/2000/svg"
  185. width="24" height="24" viewBox="0 0 24 24" fill="none"
  186. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  187. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  188. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  189. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  190. </svg>
  191. <span class="sr-only">[archive]</span></a></em></cite></p>
  192. </blockquote>
  193. <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>
  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/decision/"
  200. title="Liste de tous les articles 2024 associés à cette étiquette"
  201. rel="tag">#décision</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/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  206. </p>
  207. </nav>
  208. <h2>
  209. <a href="/david/2024/02/11/" title="Lien permanent vers cet article">Violence</a> <time datetime="2024-02-11">11 février 2024</time>
  210. </h2>
  211. <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>
  212. <ul>
  213. <li>dans le contexte de littératie numérique de la&nbsp;personne,</li>
  214. <li>dans le contexte culturel du groupe de travail autour de la&nbsp;personne,</li>
  215. <li>dans les priorités actuelles du groupe pour lequel l’informatique reste un outil&nbsp;et/ou</li>
  216. <li>dans la situation de détresse en&nbsp;cours.</li>
  217. </ul>
  218. <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>
  219. <nav>
  220. <p>
  221. <a href="/david/2024/communaute/"
  222. title="Liste de tous les articles 2024 associés à cette étiquette"
  223. rel="tag">#communauté</a>
  224. <a href="/david/2024/opensource/"
  225. title="Liste de tous les articles 2024 associés à cette étiquette"
  226. rel="tag">#opensource</a>
  227. <a href="/david/2024/psychologie/"
  228. title="Liste de tous les articles 2024 associés à cette étiquette"
  229. rel="tag">#psychologie</a>
  230. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  231. </p>
  232. </nav>
  233. <h2>
  234. <a href="/david/2024/02/09/" title="Lien permanent vers cet article">Version</a> <time datetime="2024-02-09">9 février 2024</time>
  235. </h2>
  236. <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>
  237. <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"
  238. title="Consultation de l’article (anglais)">la motivation</a>
  239. <a href="/david/cache/2024/959374400b4bb6d58c74116ffd08281b/" hreflang="en"
  240. data-tippy data-description="Realistic versioning for modern software."
  241. data-source="https://yolover.org/"
  242. data-date="2024-02-09"
  243. data-favicon="https://yolover.org/favicon.png"
  244. data-domain="yolover.org"
  245. ><svg xmlns="http://www.w3.org/2000/svg"
  246. width="24" height="24" viewBox="0 0 24 24" fill="none"
  247. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  248. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  249. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  250. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  251. </svg>
  252. <span class="sr-only">[archive]</span></a> pour les personnes qui vont développer et maintenir le&nbsp;produit.</p>
  253. <p>Je caricature mais on est&nbsp;vendredi.</p>
  254. <nav>
  255. <p>
  256. <a href="/david/2024/apprentissage/"
  257. title="Liste de tous les articles 2024 associés à cette étiquette"
  258. rel="tag">#apprentissage</a>
  259. <a href="/david/2024/decision/"
  260. title="Liste de tous les articles 2024 associés à cette étiquette"
  261. rel="tag">#décision</a>
  262. <a href="/david/2024/opensource/"
  263. title="Liste de tous les articles 2024 associés à cette étiquette"
  264. rel="tag">#opensource</a>
  265. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  266. </p>
  267. </nav>
  268. <h2>
  269. <a href="/david/2024/02/03/" title="Lien permanent vers cet article">Archives</a> <time datetime="2024-02-03">3 février 2024</time>
  270. </h2>
  271. <blockquote lang="en">
  272. <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>
  273. <p><cite><em><a data-link-domain="arstechnica.com" href="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/" hreflang="en"
  274. title="Consultation de l’article (anglais)">Google will no longer back up the Internet: Cached webpages are dead</a>
  275. <a href="/david/cache/2024/75c7b6350ba18a5a11ee3bbf8b3b64be/" hreflang="en"
  276. data-tippy data-description="Google Search will no longer make site backups while crawling the web."
  277. data-source="https://arstechnica.com/gadgets/2024/02/google-search-kills-off-cached-webpages/"
  278. data-date="2024-02-03"
  279. data-favicon="https://cdn.arstechnica.net/wp-content/themes/ars/assets/img/material-ars-db41652381.png"
  280. data-domain="arstechnica.com"
  281. ><svg xmlns="http://www.w3.org/2000/svg"
  282. width="24" height="24" viewBox="0 0 24 24" fill="none"
  283. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  284. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  285. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  286. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  287. </svg>
  288. <span class="sr-only">[archive]</span></a></em></cite></p>
  289. </blockquote>
  290. <p><em>(rires)</em></p>
  291. <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>
  292. <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>
  293. <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>
  294. <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>
  295. <a href="#hr-62" title="Lien vers cette section de la page"><hr id="hr-62" /></a>
  296. <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>
  297. <p>J’arrive à la solution&nbsp;suivante&nbsp;:</p>
  298. <pre><code>on run {input, parameters}
  299. tell application &quot;Terminal&quot;
  300. do script &quot;cd ~/sonos &amp;&amp; sonos Chambre play_dir '&quot; &amp; (POSIX path of input) &amp; &quot;'&quot;
  301. end tell
  302. return input
  303. end run
  304. </code></pre>
  305. <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>
  306. <a href="#hr-63" title="Lien vers cette section de la page"><hr id="hr-63" /></a>
  307. <blockquote lang="en">
  308. <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>
  309. <p><cite><em><a data-link-domain="drab.robino.dev" href="https://drab.robino.dev/" hreflang="en"
  310. title="Consultation de l’article (anglais)">drab - A Headless Custom Element Library</a>
  311. <a href="/david/cache/2024/2a1235215c277ebb8a0e9acb7ffd91e0/" hreflang="en"
  312. data-tippy data-description="A headless custom element library."
  313. data-source="https://drab.robino.dev/"
  314. data-date="2024-02-03"
  315. data-favicon="https://drab.robino.dev/favicon.svg"
  316. data-domain="drab.robino.dev"
  317. ><svg xmlns="http://www.w3.org/2000/svg"
  318. width="24" height="24" viewBox="0 0 24 24" fill="none"
  319. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  320. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  321. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  322. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  323. </svg>
  324. <span class="sr-only">[archive]</span></a></em></cite></p>
  325. </blockquote>
  326. <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>
  327. <a href="#hr-64" title="Lien vers cette section de la page"><hr id="hr-64" /></a>
  328. <blockquote lang="en">
  329. <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>
  330. <p><cite><em><a data-link-domain="brettscott.substack.com" href="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier" hreflang="en"
  331. title="Consultation de l’article (anglais)">Tech doesn’t make our lives easier. It makes them faster</a>
  332. <a href="/david/cache/2024/9750840b448f07a2f2594bb25da23836/" hreflang="en"
  333. 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"
  334. data-source="https://brettscott.substack.com/p/tech-doesnt-make-our-lives-easier"
  335. data-date="2024-02-03"
  336. 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"
  337. data-domain="brettscott.substack.com"
  338. ><svg xmlns="http://www.w3.org/2000/svg"
  339. width="24" height="24" viewBox="0 0 24 24" fill="none"
  340. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  341. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  342. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  343. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  344. </svg>
  345. <span class="sr-only">[archive]</span></a></em></cite></p>
  346. </blockquote>
  347. <p>Un bon article à lire après 24h de galères&nbsp;techniques&nbsp;😅.</p>
  348. <nav>
  349. <p>
  350. <a href="/david/2024/dependance/"
  351. title="Liste de tous les articles 2024 associés à cette étiquette"
  352. rel="tag">#dépendance</a>
  353. <a href="/david/2024/opensource/"
  354. title="Liste de tous les articles 2024 associés à cette étiquette"
  355. rel="tag">#opensource</a>
  356. <a href="/david/2024/technique/"
  357. title="Liste de tous les articles 2024 associés à cette étiquette"
  358. rel="tag">#technique</a>
  359. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  360. </p>
  361. </nav>
  362. <h2>
  363. <a href="/david/2024/01/18/" title="Lien permanent vers cet article">Open-source</a> <time datetime="2024-01-18">18 janvier 2024</time>
  364. </h2>
  365. <p>Deux phrases du&nbsp;jour&nbsp;:</p>
  366. <ol>
  367. <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>
  368. <li><q lang="fr">uMap est-il un produit ou un commun&#8239;?</q>, en réunion&nbsp;interne</li>
  369. </ol>
  370. <p>Faute de temps, le développement est laissé comme exercice aux&nbsp;lecteur·ices.</p>
  371. <nav>
  372. <p>
  373. <a href="/david/2024/commun/"
  374. title="Liste de tous les articles 2024 associés à cette étiquette"
  375. rel="tag">#commun</a>
  376. <a href="/david/2024/decision/"
  377. title="Liste de tous les articles 2024 associés à cette étiquette"
  378. rel="tag">#décision</a>
  379. <a href="/david/2024/opensource/"
  380. title="Liste de tous les articles 2024 associés à cette étiquette"
  381. rel="tag">#opensource</a>
  382. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  383. </p>
  384. </nav>
  385. <form action="/david/recherche/" method="get">
  386. <fieldset>
  387. <legend>Recherche</legend>
  388. <label for="input-search">Termes de votre recherche :</label>
  389. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  390. <input type="submit" value="Chercher">
  391. <p id="indexation-infos">
  392. <small>
  393. Seuls les contenus de ces 8 dernières années sont indexés.
  394. </small>
  395. </p>
  396. </fieldset>
  397. </form>
  398. <aside>
  399. <theme-toggle></theme-toggle>
  400. </aside>
  401. </article>
  402. <hr>
  403. <footer>
  404. <p>
  405. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  406. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  407. <a href="http://larlet.com"
  408. title="Go to my English profile"
  409. data-instant>Pro</a>
  410. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  411. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  412. </p>
  413. <template id="theme-selector">
  414. <form>
  415. <style type="text/css">
  416. fieldset div {
  417. text-align: center;
  418. }
  419. </style>
  420. <fieldset>
  421. <legend>Thème</legend>
  422. <div>
  423. <label>
  424. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  425. Auto
  426. </label>
  427. <label>
  428. <input type="radio" value="dark" name="chosen-color-scheme">
  429. Foncé
  430. </label>
  431. <label>
  432. <input type="radio" value="light" name="chosen-color-scheme">
  433. Clair
  434. </label>
  435. </div>
  436. </fieldset>
  437. </form>
  438. </template>
  439. </footer>
  440. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  441. <script>
  442. class ThemeToggle extends HTMLElement {
  443. constructor() {
  444. super()
  445. const themeSelectorTemplate = document.querySelector('#theme-selector')
  446. const form = themeSelectorTemplate.content.firstElementChild
  447. this.attachShadow({ mode: 'open' })
  448. this.shadowRoot.appendChild(form.cloneNode(true))
  449. }
  450. connectedCallback() {
  451. const form = this.shadowRoot.querySelector('form')
  452. form.addEventListener('change', (e) => {
  453. const chosenColorScheme = e.target.value
  454. localStorage.setItem('theme', chosenColorScheme)
  455. toggleTheme(chosenColorScheme)
  456. })
  457. const selectedTheme = localStorage.getItem('theme')
  458. if (selectedTheme && selectedTheme !== 'undefined') {
  459. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  460. }
  461. }
  462. }
  463. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  464. window.addEventListener('load', () => {
  465. let colorsLayer = undefined
  466. let hasDarkRules = false
  467. for (const styleSheet of Array.from(document.styleSheets)) {
  468. let mediaRules = []
  469. for (const layerRule of styleSheet.cssRules) {
  470. if (!(layerRule instanceof CSSLayerBlockRule)) {
  471. continue
  472. }
  473. if (layerRule.name === 'colors') {
  474. colorsLayer = layerRule
  475. }
  476. for (const cssRule of layerRule.cssRules) {
  477. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  478. continue
  479. }
  480. // WARNING: Safari does not have/supports `conditionText`.
  481. if (cssRule.conditionText) {
  482. if (cssRule.conditionText !== prefersColorSchemeDark) {
  483. continue
  484. }
  485. } else {
  486. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  487. continue
  488. }
  489. }
  490. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  491. }
  492. }
  493. // WARNING: do not try to insert a Rule to a styleSheet you are
  494. // currently iterating on, otherwise the browser will be stuck
  495. // in a infinite loop…
  496. for (const mediaRule of mediaRules) {
  497. // Safari requires the `0` second parameter (even if default).
  498. colorsLayer.insertRule(mediaRule.cssText, 0)
  499. hasDarkRules = true
  500. }
  501. }
  502. if (hasDarkRules) {
  503. if ('customElements' in window && !customElements.get('theme-toggle')) {
  504. customElements.define('theme-toggle', ThemeToggle)
  505. }
  506. }
  507. })
  508. </script>
  509. </body>
  510. </html>