Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 46KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  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 #documentation
  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 #documentation">
  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>#documentation</h1>
  117. <p>Publications relatives à cette étiquette</p>
  118. </hgroup>
  119. </header>
  120. <nav>
  121. <p>
  122. <a href="/david/" title="Aller à l’accueil">
  123. Accueil</a>
  124. <a rel="tags"
  125. href="/david/2024/#tags"
  126. title="Liste de toutes les étiquettes">
  127. Étiquettes</a>
  128. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  129. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  130. </p>
  131. </nav>
  132. <h2>
  133. <a href="/david/2024/05/20/" title="Lien permanent vers cet article">Stimulations</a> <time datetime="2024-05-20">20 mai 2024</time>
  134. </h2>
  135. <p><a href="/david/2024/05/12/" title="Alien">Je me suis demandé</a> en passant par la page sur le <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Stimming">Stimming</a> (<a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Auto-stimulation">Auto-stimulation</a> en français) après avoir couru s’il pouvait y avoir un lien avec les sports d’endurance. Je n’ai trouvé que <a data-link-domain="ncbi.nlm.nih.gov" href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8992823/">cet article</a> qui n’a pas été&nbsp;publié&nbsp;:</p>
  136. <blockquote lang="en">
  137. <p>Physical activity is beneficial for physical and mental health in the general population. Among autistic people, a range of physical and mental health conditions, particularly depression and anxiety, occur more frequently than in the general population. <mark>Physical activity interventions could help improve physical and mental health in autistic adults,</mark> but there is a lack of research in the area. The aim of this perspective article is to explore research into physical activity interventions for autistic adults, and identify gaps particularly in need of&nbsp;addressing.</p>
  138. </blockquote>
  139. <p>J’imagine que les mouvements de jambes à l’arrêt facilitent la récupération aussi d’une certaine&nbsp;manière&nbsp;😇.</p>
  140. <p><a href="/david/2024/04/13/#hr-148">Still</a> <a data-link-domain="relationalpsych.group" href="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd" hreflang="en"
  141. title="Consultation de l’article (anglais)">digging</a>
  142. <a href="/david/cache/2024/7f7afbfc0e4528838aadd7db4ba231cb/" hreflang="en"
  143. data-tippy data-description="Autism Assessment at Relational Psych involves comprehensive evaluations to diagnose Autism Spectrum Disorders (ASD). Our assessments are conducted by experienced professionals and are tailored to identify the unique needs and strengths of each individual."
  144. data-source="https://www.relationalpsych.group/articles/understanding-audhd-the-co-occurence-of-autism-and-adhd"
  145. data-date="2024-05-20"
  146. data-favicon="https://assets-global.website-files.com/638a47e8e6837e0de97565b0/63fc2dfc3efb72e41f561cf0_Exclude.png"
  147. data-domain="relationalpsych.group"
  148. ><svg xmlns="http://www.w3.org/2000/svg"
  149. width="24" height="24" viewBox="0 0 24 24" fill="none"
  150. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  151. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  152. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  153. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  154. </svg>
  155. <span class="sr-only">[archive]</span></a>&nbsp;⛏️.</p>
  156. <a href="#hr-160" title="Lien vers cette section de la page"><hr id="hr-160" /></a>
  157. <blockquote lang="en">
  158. <p>When you’re driving around in Google Maps, you’re piloting a spaceship in an ancient simulation of space&nbsp;warfare.</p>
  159. <p><cite><em><a data-link-domain="interconnected.org" href="https://interconnected.org/home/2024/05/17/arrow" hreflang="en"
  160. title="Consultation de l’article (anglais)">When you’re driving in Google Maps you’re re-enacting an ancient space combat sim</a>
  161. <a href="/david/cache/2024/37e471123bcb625e1ada602b1168a3dd/" hreflang="en"
  162. data-tippy data-description="Posted on Friday 17 May 2024. 1,259 words, 14 links. By Matt Webb."
  163. data-source="https://interconnected.org/home/2024/05/17/arrow"
  164. data-date="2024-05-20"
  165. data-favicon=""
  166. data-domain="interconnected.org"
  167. ><svg xmlns="http://www.w3.org/2000/svg"
  168. width="24" height="24" viewBox="0 0 24 24" fill="none"
  169. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  170. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  171. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  172. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  173. </svg>
  174. <span class="sr-only">[archive]</span></a></em></cite></p>
  175. </blockquote>
  176. <p>Matt Webb, un des meilleurs tisseurs du&nbsp;Web.</p>
  177. <a href="#hr-161" title="Lien vers cette section de la page"><hr id="hr-161" /></a>
  178. <blockquote>
  179. <p>Depuis quelques mois, je réalise des petites BD sur le même principe qu’Étymographie dans Le Combat syndicaliste, le journal de la CNT-F. <mark>Je les mets à l’occasion sur Instagram,</mark> mais je ne veux pas non plus totalement laisser mourir mon cher blog, d’autant qu’il y a peut-être une ou deux personnes qui y vont encore et boudent les réseaux sociaux, sait-on jamais… En voici donc&nbsp;trois</p>
  180. <p><cite><em><a data-link-domain="boutanox.blogspot.com" href="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html" hreflang=""
  181. title="Consultation de l’article">Mélanaïlourologos - Le Combat syndicaliste</a>
  182. <a href="/david/cache/2024/8a50a4b5f8ead46ca899437425315367/" hreflang=""
  183. data-tippy data-description="Depuis quelques mois, je réalise des petites BD sur le même principe qu'Étymographie dans Le Combat syndicaliste , le journal de la CNT-F ...."
  184. data-source="https://boutanox.blogspot.com/2024/04/melanailourologos-le-combat-syndicaliste.html"
  185. data-date="2024-05-20"
  186. data-favicon="https://boutanox.blogspot.com/favicon.ico"
  187. data-domain="boutanox.blogspot.com"
  188. ><svg xmlns="http://www.w3.org/2000/svg"
  189. width="24" height="24" viewBox="0 0 24 24" fill="none"
  190. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  191. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  192. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  193. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  194. </svg>
  195. <span class="sr-only">[archive]</span></a></em></cite></p>
  196. </blockquote>
  197. <p>Merci aux auteur·ices qui publient aussi sur le web (même si c’est sur Google en&nbsp;l’occurence…).</p>
  198. <a href="#hr-162" title="Lien vers cette section de la page"><hr id="hr-162" /></a>
  199. <blockquote lang="en">
  200. <p>Libraries are essential for democracy. We provide librarians and their communities the necessary skills <mark>to turn our ideals into action,</mark> focused on issues like privacy, intellectual freedom, and information&nbsp;democracy.</p>
  201. <p><cite><em><a data-link-domain="libraryfreedom.org" href="https://libraryfreedom.org/">We are Library Freedom&nbsp;Project </a></em></cite></p>
  202. </blockquote>
  203. <p>📚✊</p>
  204. <a href="#hr-163" title="Lien vers cette section de la page"><hr id="hr-163" /></a>
  205. <blockquote>
  206. <p>Je ne connais pas bien l’analyse transactionnelle, mais je m’en méfie un peu, surement plus par ignorance que par&nbsp;connaissance.</p>
  207. <p>Je trouve cependant que les différents «&nbsp;P&nbsp;» (Protection, Permission, Puissance) qui sont proposés sont intéressants quand il s’agit de parler de confiance, de légitimité et de collaboration. Je suis content de rencontrer ces&nbsp;termes.</p>
  208. <p><cite><em><a data-link-domain="blog.notmyidea.org" href="https://blog.notmyidea.org/oser-la-confiance.html" hreflang="fr"
  209. title="Consultation de l’article">Oser la confiance</a>
  210. <a href="/david/cache/2024/f0f339af451863ac8580a9fb65a58e99/" hreflang="fr"
  211. data-tippy data-description="On m’a conseillé ce livre, voici donc quelques notes."
  212. data-source="https://blog.notmyidea.org/oser-la-confiance.html"
  213. data-date="2024-05-20"
  214. data-favicon="https://blog.notmyidea.org/favicon-32x32.png"
  215. data-domain="blog.notmyidea.org"
  216. ><svg xmlns="http://www.w3.org/2000/svg"
  217. width="24" height="24" viewBox="0 0 24 24" fill="none"
  218. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  219. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  220. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  221. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  222. </svg>
  223. <span class="sr-only">[archive]</span></a></em></cite></p>
  224. </blockquote>
  225. <p>Cet article rai·ésonne <a href="/david/2024/05/13/" title="Tensions">particulièrement en ce moment</a>.</p>
  226. <a href="#hr-164" title="Lien vers cette section de la page"><hr id="hr-164" /></a>
  227. <blockquote>
  228. <p>Si je prends la parole aujourd’hui, c’est que je pense que mon parcours et mon cheminement intellectuel peuvent servir à d’autres confrères qui, je le sais, sont nombreux à être passés par mes différentes&nbsp;situations.</p>
  229. <p>Lorsque je suis entré en études d’ostéopathie, j’étais certain de commencer un cursus scientifique qui m’amènerait à être une profession de santé&nbsp;respectable.</p>
  230. <p><cite><em><a data-link-domain="scribe.rip" href="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871" hreflang="fr"
  231. title="Consultation de l’article">Ostéopathe, je n’en garderai que le nom</a>
  232. <a href="/david/cache/2024/b2c5ca7e92e2c0d461bc3c7da36e8d32/" hreflang="fr"
  233. data-tippy data-description="Cette rupture est symbolique. Mais les dérives sont quant à elles réelles. N’oubliez pas, ne pas se positionner, c’est cautionner."
  234. data-source="https://scribe.rip/@laurentlouat/ost%C3%A9opathe-je-nen-garderai-que-le-nom-fd14316bc871"
  235. data-date="2024-05-20"
  236. data-favicon="https://scribe.rip/favicon.ico"
  237. data-domain="scribe.rip"
  238. ><svg xmlns="http://www.w3.org/2000/svg"
  239. width="24" height="24" viewBox="0 0 24 24" fill="none"
  240. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  241. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  242. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  243. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  244. </svg>
  245. <span class="sr-only">[archive]</span></a></em></cite></p>
  246. </blockquote>
  247. <p>Merci aux personnes qui témoignent de&nbsp;l’intérieur.</p>
  248. <a href="#hr-165" title="Lien vers cette section de la page"><hr id="hr-165" /></a>
  249. <blockquote lang="en">
  250. <p>In our increasingly data-driven world, the ability to quickly and accurately access geospatial data can transform industries from public health to urban planning. Imagine being able to locate and analyze data from ‘within 10&nbsp;miles of the North Carolina coastline’ in mere seconds. Natural Language Geocoding makes this possible, <mark>bridging the gap between complex geospatial queries and user-friendly language.</mark> Let’s dive into how this innovative technology is changing the landscape of data analysis, making it more accessible and&nbsp;efficient.</p>
  251. <p><cite><em><a data-link-domain="element84.com" href="https://www.element84.com/machine-learning/natural-language-geocoding/" hreflang="en"
  252. title="Consultation de l’article (anglais)">Natural Language Geocoding</a>
  253. <a href="/david/cache/2024/7084f7b279604bc141fee03e01531eb7/" hreflang="en"
  254. data-tippy data-description="We discuss how natural language geocoding is changing the landscape of data analysis, making it more accessible and efficient."
  255. data-source="https://www.element84.com/machine-learning/natural-language-geocoding/"
  256. data-date="2024-05-20"
  257. data-favicon="https://www.element84.com/favicon-32x32.png?v=24e856d25e63af3f5b952cefe84a531f"
  258. data-domain="element84.com"
  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>L’AI s’immisce décidément partout. Je pensais naïvement être épargné dans ce domaine là. #enshAIttification (you saw it here&nbsp;first).</p>
  269. <a href="#hr-166" title="Lien vers cette section de la page"><hr id="hr-166" /></a>
  270. <blockquote lang="en">
  271. <p>A privacy-first, no-nonsense, super-fast <mark>blogging&nbsp;platform</mark></p>
  272. <p>No trackers, no javascript, no stylesheets. Just your&nbsp;words.</p>
  273. <p><cite><em><a data-link-domain="bearblog.dev" href="https://bearblog.dev/">ʕ•ᴥ•ʔ Bear&nbsp;Blog</a></em></cite></p>
  274. </blockquote>
  275. <a href="#hr-167" title="Lien vers cette section de la page"><hr id="hr-167" /></a>
  276. <blockquote>
  277. <p>Éducation sur le cannabis <mark>pour et par</mark> les Premières Nations, les Inuits et les&nbsp;Métis</p>
  278. <p><cite><em><a data-link-domain="nwaccannabised.ca" href="https://nwaccannabised.ca/fr">NWAC&nbsp;Cannabis</a></em></cite></p>
  279. </blockquote>
  280. <p>Je découvre au passage <a data-link-domain="deplume.ca" href="https://deplume.ca/">Design de Plume</a>.</p>
  281. <a href="#hr-168" title="Lien vers cette section de la page"><hr id="hr-168" /></a>
  282. <blockquote>
  283. <p>Peut-être que je viens de courir le 5k le plus rapide du reste de ma vie. 🏃💨</p>
  284. <p><cite><em><a data-link-domain="fedi.larlet.fr" href="https://fedi.larlet.fr/@david/111133899699614778">Sur masto</a>, le 26&nbsp;septembre&nbsp;2023</em></cite></p>
  285. </blockquote>
  286. <p>Ce pouet va mal&nbsp;vieillir&nbsp;🫀🦵.</p>
  287. <nav>
  288. <p>
  289. <a href="/david/2024/apprentissage/"
  290. title="Liste de tous les articles 2024 associés à cette étiquette"
  291. rel="tag">#apprentissage</a>
  292. <a href="/david/2024/documentation/"
  293. title="Liste de tous les articles 2024 associés à cette étiquette"
  294. rel="tag">#documentation</a>
  295. <a href="/david/2024/liens/"
  296. title="Liste de tous les articles 2024 associés à cette étiquette"
  297. rel="tag">#liens</a>
  298. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  299. </p>
  300. </nav>
  301. <h2>
  302. <a href="/david/2024/04/05/" title="Lien permanent vers cet article">Productivité</a> <time datetime="2024-04-05">5 avril 2024</time>
  303. </h2>
  304. <blockquote lang="en">
  305. <p>You see, the more I wrote about “productivity”, the more I found myself falling into a trap. <mark>It’s very difficult to write in this space without approaching the topic in a way that’s weirdly moralistic.</mark> It’s difficult to avoid implying that “being productive” is some sort of objectively virtuous behavior – and that conversely a lack of “productivity” is some sort of moral failing. I don’t believe this. Nor do I believe that we have any sort of imperative to be maximally-productive at work. You don’t need to “give 110%” to your job. You don’t “owe” your employer any sort of maximal time and&nbsp;attention.</p>
  306. <p>I do think that “productivity” is important, but it’s a more subtle importance. It’s not about being a nice little compliant worker drone and maximizing your contributions to capitalism! Productivity is important to me in the way that it contributes to feeling content and&nbsp;fulfilled.</p>
  307. <p><cite><em><a data-link-domain="jacobian.org" href="https://jacobian.org/2024/apr/4/not-writing-about-productivity/" hreflang="en"
  308. title="Consultation de l’article (anglais)">Why I’m Not Writing a Productivity Series</a>
  309. <a href="/david/cache/2024/10d2718395313e94f45ab8484bfc8d86/" hreflang="en"
  310. data-tippy data-description="I planned and started to write a series about personal productivity systems, but I’m abandoning the series. Here’s why."
  311. data-source="https://jacobian.org/2024/apr/4/not-writing-about-productivity/"
  312. data-date="2024-04-06"
  313. data-favicon="https://jacobian.org/favicon.ico"
  314. data-domain="jacobian.org"
  315. ><svg xmlns="http://www.w3.org/2000/svg"
  316. width="24" height="24" viewBox="0 0 24 24" fill="none"
  317. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  318. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  319. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  320. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  321. </svg>
  322. <span class="sr-only">[archive]</span></a></em></cite></p>
  323. </blockquote>
  324. <p>Il y a des tâches à l’état gazeux, qui remplissent tout le temps que l’on est prêt à leur&nbsp;laisser.</p>
  325. <p>Il y a des tâches à l’état liquide, qui vont se répandre dans tous les interstices de temps d’autres&nbsp;tâches.</p>
  326. <p>Il y a des tâches à l’état solide, que l’on peine à sup·porter et dont on a du mal à se&nbsp;défaire.</p>
  327. <p>Il y a des tâches qui sont des réactions en chaîne, dont il faut attendre le point de bascule en préparant les matières&nbsp;premières.</p>
  328. <p>La classification périodique des tâches, un autre moyen de les&nbsp;qualifier&#8239;?</p>
  329. <a href="#hr-143" title="Lien vers cette section de la page"><hr id="hr-143" /></a>
  330. <blockquote lang="en">
  331. <p>The fast, feature-rich, GPU based terminal&nbsp;emulator</p>
  332. <p><cite><em><a data-link-domain="sw.kovidgoyal.net" href="https://sw.kovidgoyal.net/kitty/">kitty</a></em></cite></p>
  333. </blockquote>
  334. <p>Je me demande souvent si d’autres outils me permettraient d’être plus efficace / rapide. C’est le temps d’apprentissage puis la robustesse de l’outil et la communauté (et son support) qui m’importent. J’ai aussi cette croyance qu’en altérant trop les outils par défaut, je vais être moins à même de pouvoir accompagner des personnes moins techniques lorsque l’occasion se&nbsp;présente.</p>
  335. <p>Aujourd’hui, j’ai repris à zéro mes <em>packages</em> de <a data-link-domain="sublimetext.com" href="https://www.sublimetext.com/">Sublime Text 4</a> car j’avais un <a data-link-domain="github.com" href="https://github.com/wbond/package_control/issues/1612">souci avec Package Control</a> et le <em>log</em> des 27&nbsp;paquets installés me masquait la vraie erreur. Je n’ai ensuite installé que <a data-link-domain="packagecontrol.io" href="https://packagecontrol.io/packages/LSP">LSP</a>, <a data-link-domain="packagecontrol.io" href="https://packagecontrol.io/packages/LSP-ruff">LSP-ruff</a> et <a data-link-domain="packagecontrol.io" href="https://packagecontrol.io/packages/LSP-rome">LSP-rome</a>. Peut-être que c’est suffisant à mes besoins actuels&#8239;? (Merci&nbsp;Rust.)</p>
  336. <p>Je suis toujours assez effaré par les performances de&nbsp;VSCodium…</p>
  337. <nav>
  338. <p>
  339. <a href="/david/2024/documentation/"
  340. title="Liste de tous les articles 2024 associés à cette étiquette"
  341. rel="tag">#documentation</a>
  342. <a href="/david/2024/experience/"
  343. title="Liste de tous les articles 2024 associés à cette étiquette"
  344. rel="tag">#expérience</a>
  345. <a href="/david/2024/psychologie/"
  346. title="Liste de tous les articles 2024 associés à cette étiquette"
  347. rel="tag">#psychologie</a>
  348. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  349. </p>
  350. </nav>
  351. <h2>
  352. <a href="/david/2024/02/28/" title="Lien permanent vers cet article">Dérèglement</a> <time datetime="2024-02-28">28 février 2024</time>
  353. </h2>
  354. <p>J’avais déjà remarqué leur départ très tardif en décembre. Hier soir, j’ai entendu mes premières bernaches. Demain matin, elles risquent d’avoir un petit peu&nbsp;frais…</p>
  355. <figure>
  356. <a href="/static/david/2024/2024-02-28-courbe-temperature.jpg"
  357. title="Cliquer pour une version haute résolution">
  358. <img
  359. src="/static/david/2024/2024-02-28-courbe-temperature.jpg"
  360. width="960" height="2079"
  361. srcset="/static/david/2024/2024-02-28-courbe-temperature.jpg 960w, /static/david/2024/2024-02-28-courbe-temperature_660x440.jpg 660w, /static/david/2024/2024-02-28-courbe-temperature_990x660.jpg 990w, /static/david/2024/2024-02-28-courbe-temperature_1320x880.jpg 1320w"
  362. sizes="min(100vw, calc(100vh * 960 / 2079))"
  363. loading="lazy"
  364. decoding="async"
  365. alt="Capture d’écran de la météo, les températures vont de 14°C à -13°C en moins de 12&nbsp;heures.">
  366. </a>
  367. <figcaption>#MeanwhileInCanada</figcaption>
  368. </figure>
  369. <a href="#hr-92" title="Lien vers cette section de la page"><hr id="hr-92" /></a>
  370. <p>Le même jour, j’intègre les <a data-link-domain="mistune.lepture.com" href="https://mistune.lepture.com/en/latest/directives.html#admonitions">admonitions</a> à un de nos outils interne et j’apprends qu’il est possible d’intégrer ce type de rendu pour le <a data-link-domain="github.com" href="https://github.com/orgs/community/discussions/16925"><em>markdown</em> servi par Microsoft Github</a> en lisant le <a data-link-domain="github.com" href="https://github.com/jgarber623/aria-collapsible">README de aria-collapsible</a>.</p>
  371. <p>Au passage, j’apprends beaucoup en lisant le code de <em>Web Components</em> en ce moment. Il y a une effervescence dans le domaine parmi des personnes qui ont un bon niveau de JS ainsi qu’une sensibilité à l’accessibilité de leurs productions. Ici par exemple, je découvre comment faire des composants relativement&nbsp;défensifs.</p>
  372. <a href="#hr-93" title="Lien vers cette section de la page"><hr id="hr-93" /></a>
  373. <blockquote lang="en">
  374. <p>Anyway, if you want to know some basic information about Passkeys I know a site you can check&nbsp;out.</p>
  375. <p><cite><em><a data-link-domain="chriscoyier.net" href="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/" hreflang="en"
  376. title="Consultation de l’article (anglais)">Where I’m at on the whole CSS-Tricks thing</a>
  377. <a href="/david/cache/2024/2cbc47f0ebded9d54fe6163fa4ea0667/" hreflang="en"
  378. data-tippy data-description="It was March 2022 when I sold CSS-Tricks to DigitalOcean. So it’s been just about 2 years now."
  379. data-source="https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/"
  380. data-date="2024-02-28"
  381. data-favicon="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><rect width=%22100%22 height=%22100%22 rx=%2220%22 fill=%22%23f8d773%22></rect><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>👨‍💻</text></svg>"
  382. data-domain="chriscoyier.net"
  383. ><svg xmlns="http://www.w3.org/2000/svg"
  384. width="24" height="24" viewBox="0 0 24 24" fill="none"
  385. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  386. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  387. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  388. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  389. </svg>
  390. <span class="sr-only">[archive]</span></a></em></cite></p>
  391. </blockquote>
  392. <p>Beaucoup d’honnêteté et… une belle ressource de perdue, ou en passe de l’être. <em>Tricky.</em></p>
  393. <a href="#hr-94" title="Lien vers cette section de la page"><hr id="hr-94" /></a>
  394. <blockquote lang="en">
  395. <p>Using <code>color-mix()</code>, we can adjust the tint/shade based on the background color, meaning <mark>we don’t need to manually select lighter/darker colors</mark> for those states. And because we’re using OKLCH, the variations will be perceptually uniform, <a data-link-domain="lea.verou.me" href="https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/#3.-lch-lightness-actually-means-something">unlike HSL</a>. This means that tints and shades will look consistent for any color we&nbsp;choose!</p>
  396. <p><cite><em><a data-link-domain="abeautifulsite.net" href="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/" hreflang="en"
  397. title="Consultation de l’article (anglais)">Better Buttons with color-mix() and Custom Properties</a>
  398. <a href="/david/cache/2024/b2ccbe813d97ba39ba64a1b6d14422dd/" hreflang="en"
  399. data-tippy data-description="Let the browser and OKLCH do the hard work of styling states."
  400. data-source="https://www.abeautifulsite.net/posts/better-buttons-with-color-mix-and-custom-properties/"
  401. data-date="2024-02-28"
  402. data-favicon="https://www.abeautifulsite.net/images/logos/leaf.svg"
  403. data-domain="abeautifulsite.net"
  404. ><svg xmlns="http://www.w3.org/2000/svg"
  405. width="24" height="24" viewBox="0 0 24 24" fill="none"
  406. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  407. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  408. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  409. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  410. </svg>
  411. <span class="sr-only">[archive]</span></a></em></cite></p>
  412. </blockquote>
  413. <p>Les personnes qui maîtrisent bien CSS vont avoir de plus en plus de valeur. À juste&nbsp;titre.</p>
  414. <nav>
  415. <p>
  416. <a href="/david/2024/documentation/"
  417. title="Liste de tous les articles 2024 associés à cette étiquette"
  418. rel="tag">#documentation</a>
  419. <a href="/david/2024/partage/"
  420. title="Liste de tous les articles 2024 associés à cette étiquette"
  421. rel="tag">#partage</a>
  422. <a href="/david/2024/solastalgia/"
  423. title="Liste de tous les articles 2024 associés à cette étiquette"
  424. rel="tag">#solastalgia</a>
  425. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  426. </p>
  427. </nav>
  428. <h2>
  429. <a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
  430. </h2>
  431. <p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p>
  432. <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p>
  433. <p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p>
  434. <blockquote>
  435. <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p>
  436. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  437. </blockquote>
  438. <blockquote>
  439. <p>Le prêt de main d’œuvre&nbsp;: l’entreprise met à disposition d’un organisme éligible au mécénat un ou plusieurs salariés. C’est l’organisme qui pilote la mission et qui peut faire figure d’autorité fonctionnelle dans ce cadre. Le temps et la fréquence du mécénat de compétences peuvent considérablement varier en fonction des besoins&nbsp;: il peut aussi bien s’agir d’une mission courte, même d’une seule demi-journée, que d’une mission plus longue voir d’un plein temps dans la limite de&nbsp;3&nbsp;ans.</p>
  440. <p><cite><em><a data-link-domain="cci.fr" href="https://www.cci.fr/actualites/le-mecenat-de-competences-comment-le-mettre-en-place-et-mobiliser-les-equipes">Source</a></em></cite></p>
  441. </blockquote>
  442. <p>Lorsque les dons sont effectués en nature, il est nécessaire de procéder à leur&nbsp;valorisation&nbsp;:</p>
  443. <ul>
  444. <li>pour le calcul de la réduction d’impôt que déclare&nbsp;l’entreprise&#8239;;</li>
  445. <li>pour la réintégration extra-comptable de la valeur du don par&nbsp;l’entreprise&#8239;;</li>
  446. <li>pour l’établissement du reçu fiscal par l’organisme bénéficiaire du&nbsp;don&#8239;;</li>
  447. <li>pour la détermination des éventuels contreparties remises à l’entreprise par l’organisme bénéficiaire du&nbsp;don.</li>
  448. </ul>
  449. <h2 id="comment-valoriser-un-don-au-titre-dun-mecenat-de-competence">Comment valoriser un don au titre d’un mécénat de compétence&#8239;? <a href="#comment-valoriser-un-don-au-titre-dun-mecenat-de-competence" title="Ancre vers cette partie">#</a></h2>
  450. <blockquote>
  451. <p>Pour chaque salarié mis à disposition, ce don est évalué à son coût de revient, à savoir la somme de sa rémunération et des charges sociales y afférentes dans la limite de trois fois le montant du plafond mentionné à l’article L. 241-3&nbsp;du code de la sécurité sociale (CSS), soit 10&#8239;284&#8239;€ par mois en&nbsp;2022.</p>
  452. <p><cite><em><a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Thematiques/Mecenat/Entreprises/Le-mecenat-en-nature-ou-en-competence">Source</a></em></cite></p>
  453. </blockquote>
  454. <p>Ce n’est donc <strong>pas un TJM</strong> mais un <em>coût de revient</em>.</p>
  455. <blockquote>
  456. <p>A la suite de l’adoption de la <a data-link-domain="legifrance.gouv.fr" href="https://www.legifrance.gouv.fr/jorf/id/JORFTEXT000043964778">loi du 24&nbsp;août 2021&nbsp;confortant le respect des principes de la République</a>, l’administration fiscale a rappelé que <mark>la valorisation du don relève de la seule responsabilité de l’entreprise mécène</mark> qu’il s’agisse d’un don sous forme de biens (dons alimentaires notamment), de services ou d’une mise à disposition de personnel. Un <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/2041-mec-sd_4032.pdf">nouveau modèle de reçu fiscal</a> a été publié le 10&nbsp;juin&nbsp;2022.</p>
  457. </blockquote>
  458. <h2 id="avantages-fiscaux">Avantages fiscaux <a href="#avantages-fiscaux" title="Ancre vers cette partie">#</a></h2>
  459. <blockquote>
  460. <p>Le mécénat de compétences ouvre droit à un avantage fiscal. Concrètement, comme pour toute action de mécénat, le «&nbsp;don&nbsp;» de compétences de l’entreprise ouvrira droit à une réduction d’impôts de 60% du montant du salaire chargé du salarié mis à disposition. Cet avantage est accessible à tous les types d’entreprises, sans montant minimum de&nbsp;don.</p>
  461. <p><cite><em><a data-link-domain="economie.gouv.fr" href="https://www.economie.gouv.fr/files/Guide-pratique-mecenat-competences-novembre2021.pdf">Source</a></em></cite></p>
  462. </blockquote>
  463. <h2 id="modele">Modèle <a href="#modele" title="Ancre vers cette partie">#</a></h2><p>Un modèle de <a data-link-domain="culture.gouv.fr" href="https://www.culture.gouv.fr/Media/Medias-creation-rapide/Modele-de-convention-de-mecenat-d-entreprise.docx">convention de mécénat</a>, <a data-link-domain="associations.gouv.fr" href="https://www.associations.gouv.fr/IMG/pdf/asso_mecenat_2021_v1b.pdf">un autre</a> et <a data-link-domain="occitanie.developpement-durable.gouv.fr" href="https://www.occitanie.developpement-durable.gouv.fr/IMG/pdf/ex_convention_mecenat_competences_cle065a53.pdf">encore un autre</a>.</p>
  464. <p>En synthèse, il&nbsp;faut&nbsp;:</p>
  465. <h3>Les&nbsp;coordonnées</h3>
  466. <p>Entre&nbsp;:</p>
  467. <p>L’entreprise …, statut, dont le siège social est au …,<br />
  468. Représentée par …, fonction,<br />
  469. Ci-après dénommée «&nbsp;le&nbsp;mécène&nbsp;»,</p>
  470. <p>Et</p>
  471. <p>L’association …, sise au …,<br />
  472. Représentée par son Président (&#8239;?), …<br />
  473. Ci-après dénommée&nbsp;«&nbsp;l’association&nbsp;»,</p>
  474. <p>Vu la loi n°2003-79&nbsp;du 1<sup>er</sup> août 2003&nbsp;relative au mécénat, aux associations et aux fondations et notamment les dispositions codifiées à l’article 238&nbsp;bis du code général des&nbsp;impôts.</p>
  475. <h3>(optionnel) Préambule&nbsp;(contexte)</h3>
  476. <ul>
  477. <li>objet du mécénat de l’entreprise, de la&nbsp;fondation…</li>
  478. <li>objet de l’association&nbsp;: présentation de sa mission/vocation générale, et laïus sur le
  479. projet qu’ils portent en commun avec l’entreprise le cas&nbsp;échéant</li>
  480. <li>rencontre de ces deux&nbsp;objets&#8239;?</li>
  481. </ul>
  482. <h3>Ce qui est&nbsp;convenu</h3>
  483. <p>Il est convenu et décidé ce qui&nbsp;suit&nbsp;:</p>
  484. <ul>
  485. <li>La présente convention a pour objet de définir les conditions du soutien à l’association pour le projet suivant&nbsp;: (descriptif de l’action ou de la&nbsp;manifestation)</li>
  486. <li>L’entreprise mécène s’engage à mettre à disposition le personnel suivant&nbsp;: représentant une valeur de … € sur la période de&nbsp;…</li>
  487. </ul>
  488. <blockquote>
  489. <p>Pour valoriser ce mécénat de compétences, l’entreprise s’engage à comptabiliser et à valoriser le temps passé sur la mission sus nommée, soit le nombre d’heures passées x salaire horaire chargé (son commissaire aux comptes devra valider ce montant de salaire&nbsp;chargé).</p>
  490. <p>L’association pourra ainsi remettre à l’entreprise un reçu fiscal précisant le nombre d’heures et le coût équivalent donné à&nbsp;l’association.</p>
  491. <p>Conformément à l’article 238bis du code général des impôts, ce don en temps donnera droit à une réduction d’impôt égale à 60&#8239;% du montant des sommes versées dans la limite de 0,5% du C.A. HT.</p>
  492. </blockquote>
  493. <h3>Conditions</h3>
  494. <ul>
  495. <li>(optionnel / à adapter) L’association s’engage à faire figurer le nom de l’entreprise donatrice sur les supports d’information de l’action ou de la&nbsp;manifestation.</li>
  496. <li>La présente convention est établie en vertu des dispositions de l’article 238&nbsp;bis du&nbsp;CGI</li>
  497. <li>La présente convention prendra effet à sa date de signature et prendra fin le&nbsp;….</li>
  498. </ul>
  499. <p>Dans le cas où l’une des parties ne respecterait pas ses obligations contractuelles, cette convention serait résiliée de plein droit. En cas de litige, les parties conviennent d’une conciliation à&nbsp;l’amiable.</p>
  500. <h3>Signatures</h3>
  501. <p>Date, lieu et signatures&nbsp;:<br />
  502. A … le …<br />
  503. Représentant de l’entreprise / Représentant de&nbsp;l’association</p>
  504. <nav>
  505. <p>
  506. <a href="/david/2024/commun/"
  507. title="Liste de tous les articles 2024 associés à cette étiquette"
  508. rel="tag">#commun</a>
  509. <a href="/david/2024/documentation/"
  510. title="Liste de tous les articles 2024 associés à cette étiquette"
  511. rel="tag">#documentation</a>
  512. <a href="/david/2024/partage/"
  513. title="Liste de tous les articles 2024 associés à cette étiquette"
  514. rel="tag">#partage</a>
  515. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  516. </p>
  517. </nav>
  518. <form action="/david/recherche/" method="get">
  519. <fieldset>
  520. <legend>Recherche</legend>
  521. <label for="input-search">Termes de votre recherche :</label>
  522. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  523. <input type="submit" value="Chercher">
  524. <p id="indexation-infos">
  525. <small>
  526. Seuls les contenus de ces 8 dernières années sont indexés.
  527. </small>
  528. </p>
  529. </fieldset>
  530. </form>
  531. <aside>
  532. <theme-toggle></theme-toggle>
  533. </aside>
  534. </article>
  535. <hr>
  536. <footer>
  537. <p>
  538. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  539. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  540. <a href="http://larlet.com"
  541. title="Go to my English profile"
  542. data-instant>Pro</a>
  543. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  544. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  545. </p>
  546. <template id="theme-selector">
  547. <form>
  548. <style type="text/css">
  549. fieldset div {
  550. text-align: center;
  551. }
  552. </style>
  553. <fieldset>
  554. <legend>Thème</legend>
  555. <div>
  556. <label>
  557. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  558. Auto
  559. </label>
  560. <label>
  561. <input type="radio" value="dark" name="chosen-color-scheme">
  562. Foncé
  563. </label>
  564. <label>
  565. <input type="radio" value="light" name="chosen-color-scheme">
  566. Clair
  567. </label>
  568. </div>
  569. </fieldset>
  570. </form>
  571. </template>
  572. </footer>
  573. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  574. <script>
  575. class ThemeToggle extends HTMLElement {
  576. constructor() {
  577. super()
  578. const themeSelectorTemplate = document.querySelector('#theme-selector')
  579. const form = themeSelectorTemplate.content.firstElementChild
  580. this.attachShadow({ mode: 'open' })
  581. this.shadowRoot.appendChild(form.cloneNode(true))
  582. }
  583. connectedCallback() {
  584. const form = this.shadowRoot.querySelector('form')
  585. form.addEventListener('change', (e) => {
  586. const chosenColorScheme = e.target.value
  587. localStorage.setItem('theme', chosenColorScheme)
  588. toggleTheme(chosenColorScheme)
  589. })
  590. const selectedTheme = localStorage.getItem('theme')
  591. if (selectedTheme && selectedTheme !== 'undefined') {
  592. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  593. }
  594. }
  595. }
  596. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  597. window.addEventListener('load', () => {
  598. let colorsLayer = undefined
  599. let hasDarkRules = false
  600. for (const styleSheet of Array.from(document.styleSheets)) {
  601. let mediaRules = []
  602. for (const layerRule of styleSheet.cssRules) {
  603. if (!(layerRule instanceof CSSLayerBlockRule)) {
  604. continue
  605. }
  606. if (layerRule.name === 'colors') {
  607. colorsLayer = layerRule
  608. }
  609. for (const cssRule of layerRule.cssRules) {
  610. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  611. continue
  612. }
  613. // WARNING: Safari does not have/supports `conditionText`.
  614. if (cssRule.conditionText) {
  615. if (cssRule.conditionText !== prefersColorSchemeDark) {
  616. continue
  617. }
  618. } else {
  619. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  620. continue
  621. }
  622. }
  623. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  624. }
  625. }
  626. // WARNING: do not try to insert a Rule to a styleSheet you are
  627. // currently iterating on, otherwise the browser will be stuck
  628. // in a infinite loop…
  629. for (const mediaRule of mediaRules) {
  630. // Safari requires the `0` second parameter (even if default).
  631. colorsLayer.insertRule(mediaRule.cssText, 0)
  632. hasDarkRules = true
  633. }
  634. }
  635. if (hasDarkRules) {
  636. if ('customElements' in window && !customElements.get('theme-toggle')) {
  637. customElements.define('theme-toggle', ThemeToggle)
  638. }
  639. }
  640. })
  641. </script>
  642. </body>
  643. </html>