Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

5 лет назад
4 лет назад
5 лет назад
5 лет назад
8 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
10 месяцев назад
10 месяцев назад
7 месяцев назад
7 месяцев назад
7 месяцев назад
7 месяцев назад
7 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
7 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
7 месяцев назад
7 месяцев назад
8 месяцев назад
7 месяцев назад
8 месяцев назад
8 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
4 лет назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
4 лет назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
4 лет назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
4 лет назад
10 месяцев назад
10 месяцев назад
10 месяцев назад
4 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782
  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. Accueil
  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="Voici l’espace personnel de David Larlet sur le Web.">
  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. <body data-instant-intensity="viewport-all">
  106. <article>
  107. <header>
  108. <hgroup>
  109. <h1>David Larlet</h1>
  110. <p>Avant Facebook, il y avait les sites perso.</p>
  111. </hgroup>
  112. </header>
  113. <h2>Bienvenue</h2>
  114. <p>
  115. Voici mon espace sur le Web.
  116. C’est un jardin pour faire pousser mes idées,
  117. une boîte à chaussure pour mes souvenirs,
  118. la forêt de mes réflexions plus ou moins enchevêtrées,
  119. les métaphores ne manquent pas.
  120. Je vous souhaite de vous y perdre, de revenir,
  121. d’engager des échanges, d’être en désaccord,
  122. d’improviser une rencontre
  123. et que l’on finisse par s’échanger nos meilleures recettes.
  124. </p>
  125. <p>
  126. Souvent je <a href="https://code.larlet.fr/">code</a>,
  127. parfois je vais <a href="https://nature.larlet.fr/">en forêt</a>
  128. et il m’arrive même de prendre <a href="https://media.larlet.fr/">des photos</a>.
  129. On peut papoter <a href="https://fedi.larlet.fr/@david">sur mastodon</a>
  130. ou <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">par courriel</a>.
  131. Vous pouvez <a href="/david/log/" title="Accès au flux RSS">suivre les publications</a>
  132. grâce au flux RSS/Atom (<a href="/david/blog/2019/flux-rss/">explications</a>).
  133. </p>
  134. <p lang="en">
  135. <em>
  136. Check out my
  137. <a href="http://larlet.com" data-instant>profile in English</a>🇨🇦
  138. for up-to-date professional informations.
  139. </em>
  140. </p>
  141. <h2>Publications 2024</h2>
  142. <style type="text/css">
  143. body [data-tag="accessibilite"]:hover,
  144. body [data-accessibilite]:hover,
  145. body:has([data-tag="accessibilite"]:hover) [data-accessibilite],
  146. body:has([data-accessibilite]:hover) [data-tag="accessibilite"] {
  147. background-color: var(--hover-tag-color);
  148. }
  149. body [data-tag="accompagnement"]:hover,
  150. body [data-accompagnement]:hover,
  151. body:has([data-tag="accompagnement"]:hover) [data-accompagnement],
  152. body:has([data-accompagnement]:hover) [data-tag="accompagnement"] {
  153. background-color: var(--hover-tag-color);
  154. }
  155. body [data-tag="adaptation"]:hover,
  156. body [data-adaptation]:hover,
  157. body:has([data-tag="adaptation"]:hover) [data-adaptation],
  158. body:has([data-adaptation]:hover) [data-tag="adaptation"] {
  159. background-color: var(--hover-tag-color);
  160. }
  161. body [data-tag="addiction"]:hover,
  162. body [data-addiction]:hover,
  163. body:has([data-tag="addiction"]:hover) [data-addiction],
  164. body:has([data-addiction]:hover) [data-tag="addiction"] {
  165. background-color: var(--hover-tag-color);
  166. }
  167. body [data-tag="apprentissage"]:hover,
  168. body [data-apprentissage]:hover,
  169. body:has([data-tag="apprentissage"]:hover) [data-apprentissage],
  170. body:has([data-apprentissage]:hover) [data-tag="apprentissage"] {
  171. background-color: var(--hover-tag-color);
  172. }
  173. body [data-tag="aventure"]:hover,
  174. body [data-aventure]:hover,
  175. body:has([data-tag="aventure"]:hover) [data-aventure],
  176. body:has([data-aventure]:hover) [data-tag="aventure"] {
  177. background-color: var(--hover-tag-color);
  178. }
  179. body [data-tag="cinema"]:hover,
  180. body [data-cinema]:hover,
  181. body:has([data-tag="cinema"]:hover) [data-cinema],
  182. body:has([data-cinema]:hover) [data-tag="cinema"] {
  183. background-color: var(--hover-tag-color);
  184. }
  185. body [data-tag="commun"]:hover,
  186. body [data-commun]:hover,
  187. body:has([data-tag="commun"]:hover) [data-commun],
  188. body:has([data-commun]:hover) [data-tag="commun"] {
  189. background-color: var(--hover-tag-color);
  190. }
  191. body [data-tag="communaute"]:hover,
  192. body [data-communaute]:hover,
  193. body:has([data-tag="communaute"]:hover) [data-communaute],
  194. body:has([data-communaute]:hover) [data-tag="communaute"] {
  195. background-color: var(--hover-tag-color);
  196. }
  197. body [data-tag="courage"]:hover,
  198. body [data-courage]:hover,
  199. body:has([data-tag="courage"]:hover) [data-courage],
  200. body:has([data-courage]:hover) [data-tag="courage"] {
  201. background-color: var(--hover-tag-color);
  202. }
  203. body [data-tag="decentralisation"]:hover,
  204. body [data-decentralisation]:hover,
  205. body:has([data-tag="decentralisation"]:hover) [data-decentralisation],
  206. body:has([data-decentralisation]:hover) [data-tag="decentralisation"] {
  207. background-color: var(--hover-tag-color);
  208. }
  209. body [data-tag="deception"]:hover,
  210. body [data-deception]:hover,
  211. body:has([data-tag="deception"]:hover) [data-deception],
  212. body:has([data-deception]:hover) [data-tag="deception"] {
  213. background-color: var(--hover-tag-color);
  214. }
  215. body [data-tag="decision"]:hover,
  216. body [data-decision]:hover,
  217. body:has([data-tag="decision"]:hover) [data-decision],
  218. body:has([data-decision]:hover) [data-tag="decision"] {
  219. background-color: var(--hover-tag-color);
  220. }
  221. body [data-tag="dependance"]:hover,
  222. body [data-dependance]:hover,
  223. body:has([data-tag="dependance"]:hover) [data-dependance],
  224. body:has([data-dependance]:hover) [data-tag="dependance"] {
  225. background-color: var(--hover-tag-color);
  226. }
  227. body [data-tag="documentation"]:hover,
  228. body [data-documentation]:hover,
  229. body:has([data-tag="documentation"]:hover) [data-documentation],
  230. body:has([data-documentation]:hover) [data-tag="documentation"] {
  231. background-color: var(--hover-tag-color);
  232. }
  233. body [data-tag="dystopie"]:hover,
  234. body [data-dystopie]:hover,
  235. body:has([data-tag="dystopie"]:hover) [data-dystopie],
  236. body:has([data-dystopie]:hover) [data-tag="dystopie"] {
  237. background-color: var(--hover-tag-color);
  238. }
  239. body [data-tag="echanges"]:hover,
  240. body [data-echanges]:hover,
  241. body:has([data-tag="echanges"]:hover) [data-echanges],
  242. body:has([data-echanges]:hover) [data-tag="echanges"] {
  243. background-color: var(--hover-tag-color);
  244. }
  245. body [data-tag="ecriture"]:hover,
  246. body [data-ecriture]:hover,
  247. body:has([data-tag="ecriture"]:hover) [data-ecriture],
  248. body:has([data-ecriture]:hover) [data-tag="ecriture"] {
  249. background-color: var(--hover-tag-color);
  250. }
  251. body [data-tag="enthousiasme"]:hover,
  252. body [data-enthousiasme]:hover,
  253. body:has([data-tag="enthousiasme"]:hover) [data-enthousiasme],
  254. body:has([data-enthousiasme]:hover) [data-tag="enthousiasme"] {
  255. background-color: var(--hover-tag-color);
  256. }
  257. body [data-tag="equipe"]:hover,
  258. body [data-equipe]:hover,
  259. body:has([data-tag="equipe"]:hover) [data-equipe],
  260. body:has([data-equipe]:hover) [data-tag="equipe"] {
  261. background-color: var(--hover-tag-color);
  262. }
  263. body [data-tag="evolution"]:hover,
  264. body [data-evolution]:hover,
  265. body:has([data-tag="evolution"]:hover) [data-evolution],
  266. body:has([data-evolution]:hover) [data-tag="evolution"] {
  267. background-color: var(--hover-tag-color);
  268. }
  269. body [data-tag="experience"]:hover,
  270. body [data-experience]:hover,
  271. body:has([data-tag="experience"]:hover) [data-experience],
  272. body:has([data-experience]:hover) [data-tag="experience"] {
  273. background-color: var(--hover-tag-color);
  274. }
  275. body [data-tag="fediverse"]:hover,
  276. body [data-fediverse]:hover,
  277. body:has([data-tag="fediverse"]:hover) [data-fediverse],
  278. body:has([data-fediverse]:hover) [data-tag="fediverse"] {
  279. background-color: var(--hover-tag-color);
  280. }
  281. body [data-tag="foret"]:hover,
  282. body [data-foret]:hover,
  283. body:has([data-tag="foret"]:hover) [data-foret],
  284. body:has([data-foret]:hover) [data-tag="foret"] {
  285. background-color: var(--hover-tag-color);
  286. }
  287. body [data-tag="gratitude"]:hover,
  288. body [data-gratitude]:hover,
  289. body:has([data-tag="gratitude"]:hover) [data-gratitude],
  290. body:has([data-gratitude]:hover) [data-tag="gratitude"] {
  291. background-color: var(--hover-tag-color);
  292. }
  293. body [data-tag="ia"]:hover,
  294. body [data-ia]:hover,
  295. body:has([data-tag="ia"]:hover) [data-ia],
  296. body:has([data-ia]:hover) [data-tag="ia"] {
  297. background-color: var(--hover-tag-color);
  298. }
  299. body [data-tag="identite"]:hover,
  300. body [data-identite]:hover,
  301. body:has([data-tag="identite"]:hover) [data-identite],
  302. body:has([data-identite]:hover) [data-tag="identite"] {
  303. background-color: var(--hover-tag-color);
  304. }
  305. body [data-tag="laboratoire"]:hover,
  306. body [data-laboratoire]:hover,
  307. body:has([data-tag="laboratoire"]:hover) [data-laboratoire],
  308. body:has([data-laboratoire]:hover) [data-tag="laboratoire"] {
  309. background-color: var(--hover-tag-color);
  310. }
  311. body [data-tag="lecture"]:hover,
  312. body [data-lecture]:hover,
  313. body:has([data-tag="lecture"]:hover) [data-lecture],
  314. body:has([data-lecture]:hover) [data-tag="lecture"] {
  315. background-color: var(--hover-tag-color);
  316. }
  317. body [data-tag="liens"]:hover,
  318. body [data-liens]:hover,
  319. body:has([data-tag="liens"]:hover) [data-liens],
  320. body:has([data-liens]:hover) [data-tag="liens"] {
  321. background-color: var(--hover-tag-color);
  322. }
  323. body [data-tag="opendata"]:hover,
  324. body [data-opendata]:hover,
  325. body:has([data-tag="opendata"]:hover) [data-opendata],
  326. body:has([data-opendata]:hover) [data-tag="opendata"] {
  327. background-color: var(--hover-tag-color);
  328. }
  329. body [data-tag="opensource"]:hover,
  330. body [data-opensource]:hover,
  331. body:has([data-tag="opensource"]:hover) [data-opensource],
  332. body:has([data-opensource]:hover) [data-tag="opensource"] {
  333. background-color: var(--hover-tag-color);
  334. }
  335. body [data-tag="parentalite"]:hover,
  336. body [data-parentalite]:hover,
  337. body:has([data-tag="parentalite"]:hover) [data-parentalite],
  338. body:has([data-parentalite]:hover) [data-tag="parentalite"] {
  339. background-color: var(--hover-tag-color);
  340. }
  341. body [data-tag="partage"]:hover,
  342. body [data-partage]:hover,
  343. body:has([data-tag="partage"]:hover) [data-partage],
  344. body:has([data-partage]:hover) [data-tag="partage"] {
  345. background-color: var(--hover-tag-color);
  346. }
  347. body [data-tag="parvenir"]:hover,
  348. body [data-parvenir]:hover,
  349. body:has([data-tag="parvenir"]:hover) [data-parvenir],
  350. body:has([data-parvenir]:hover) [data-tag="parvenir"] {
  351. background-color: var(--hover-tag-color);
  352. }
  353. body [data-tag="photographie"]:hover,
  354. body [data-photographie]:hover,
  355. body:has([data-tag="photographie"]:hover) [data-photographie],
  356. body:has([data-photographie]:hover) [data-tag="photographie"] {
  357. background-color: var(--hover-tag-color);
  358. }
  359. body [data-tag="poesie"]:hover,
  360. body [data-poesie]:hover,
  361. body:has([data-tag="poesie"]:hover) [data-poesie],
  362. body:has([data-poesie]:hover) [data-tag="poesie"] {
  363. background-color: var(--hover-tag-color);
  364. }
  365. body [data-tag="processus"]:hover,
  366. body [data-processus]:hover,
  367. body:has([data-tag="processus"]:hover) [data-processus],
  368. body:has([data-processus]:hover) [data-tag="processus"] {
  369. background-color: var(--hover-tag-color);
  370. }
  371. body [data-tag="propriete"]:hover,
  372. body [data-propriete]:hover,
  373. body:has([data-tag="propriete"]:hover) [data-propriete],
  374. body:has([data-propriete]:hover) [data-tag="propriete"] {
  375. background-color: var(--hover-tag-color);
  376. }
  377. body [data-tag="protopie"]:hover,
  378. body [data-protopie]:hover,
  379. body:has([data-tag="protopie"]:hover) [data-protopie],
  380. body:has([data-protopie]:hover) [data-tag="protopie"] {
  381. background-color: var(--hover-tag-color);
  382. }
  383. body [data-tag="psychologie"]:hover,
  384. body [data-psychologie]:hover,
  385. body:has([data-tag="psychologie"]:hover) [data-psychologie],
  386. body:has([data-psychologie]:hover) [data-tag="psychologie"] {
  387. background-color: var(--hover-tag-color);
  388. }
  389. body [data-tag="solastalgia"]:hover,
  390. body [data-solastalgia]:hover,
  391. body:has([data-tag="solastalgia"]:hover) [data-solastalgia],
  392. body:has([data-solastalgia]:hover) [data-tag="solastalgia"] {
  393. background-color: var(--hover-tag-color);
  394. }
  395. body [data-tag="sport"]:hover,
  396. body [data-sport]:hover,
  397. body:has([data-tag="sport"]:hover) [data-sport],
  398. body:has([data-sport]:hover) [data-tag="sport"] {
  399. background-color: var(--hover-tag-color);
  400. }
  401. body [data-tag="technique"]:hover,
  402. body [data-technique]:hover,
  403. body:has([data-tag="technique"]:hover) [data-technique],
  404. body:has([data-technique]:hover) [data-tag="technique"] {
  405. background-color: var(--hover-tag-color);
  406. }
  407. body [data-tag="velo"]:hover,
  408. body [data-velo]:hover,
  409. body:has([data-tag="velo"]:hover) [data-velo],
  410. body:has([data-velo]:hover) [data-tag="velo"] {
  411. background-color: var(--hover-tag-color);
  412. }
  413. body [data-tag="web"]:hover,
  414. body [data-web]:hover,
  415. body:has([data-tag="web"]:hover) [data-web],
  416. body:has([data-web]:hover) [data-tag="web"] {
  417. background-color: var(--hover-tag-color);
  418. }
  419. </style>
  420. <p>Liste des publications récentes en ordre anté-chronologique :</p>
  421. <p>
  422. <a href="/david/2024/04/08/" data-enthousiasme data-experience data-photographie title="Étiquettes : enthousiasme, expérience, photographie.">Éclipse</a>,
  423. <a href="/david/2024/04/07/" data-courage data-sport data-technique title="Étiquettes : courage, sport, technique.">Piscine</a>,
  424. <a href="/david/2024/04/05/" data-documentation data-experience data-psychologie title="Étiquettes : documentation, expérience, psychologie.">Productivité</a>,
  425. <a href="/david/2024/04/03/" data-equipe data-experience data-gratitude title="Étiquettes : équipe, expérience, gratitude.">Décision</a>,
  426. <a href="/david/2024/04/02/" data-commun data-opensource data-protopie title="Étiquettes : commun, opensource, protopie.">Porte</a>,
  427. <a href="/david/2024/03/30/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 2</a>,
  428. <a href="/david/2024/03/29/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 1</a>,
  429. <a href="/david/2024/03/28/" data-commun data-equipe data-protopie title="Étiquettes : commun, équipe, protopie.">Collectif</a>,
  430. <a href="/david/2024/03/26/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">GPX Viewer</a>,
  431. <a href="/david/2024/03/25/" data-dependance data-partage data-technique title="Étiquettes : dépendance, partage, technique.">Inclusion</a>,
  432. <a href="/david/2024/03/24/" data-courage data-lecture data-poesie title="Étiquettes : courage, lecture, poésie.">Cage</a>,
  433. <a href="/david/2024/03/23/" data-dependance data-psychologie data-technique title="Étiquettes : dépendance, psychologie, technique.">Intendant</a>,
  434. <a href="/david/2024/03/21/" data-communaute data-opensource data-technique title="Étiquettes : communauté, opensource, technique.">Fourchette</a>,
  435. <a href="/david/2024/03/20/" data-laboratoire data-opensource data-technique title="Étiquettes : laboratoire, opensource, technique.">PageCrypt</a>,
  436. <a href="/david/2024/03/19/" data-apprentissage data-enthousiasme data-technique title="Étiquettes : apprentissage, enthousiasme, technique.">Excitation</a>,
  437. <a href="/david/2024/03/18/" data-adaptation data-addiction data-evolution title="Étiquettes : adaptation, addiction, évolution.">Casquettes</a>,
  438. <a href="/david/2024/03/16/" data-aventure data-ecriture data-lecture title="Étiquettes : aventure, écriture, lecture.">Descriptions</a>,
  439. <a href="/david/2024/03/14/" data-deception data-enthousiasme data-sport title="Étiquettes : déception, enthousiasme, sport.">Montre 2</a>,
  440. <a href="/david/2024/03/13/" data-liens data-partage data-web title="Étiquettes : liens, partage, web.">Sérendipité</a>,
  441. <a href="/david/2024/03/12/" data-partage data-technique data-web title="Étiquettes : partage, technique, web.">Surligner</a>,
  442. <a href="/david/2024/03/11/" data-decentralisation data-dependance data-web title="Étiquettes : décentralisation, dépendance, web.">LoginWall</a>,
  443. <a href="/david/2024/03/10/" data-adaptation data-cinema data-lecture title="Étiquettes : adaptation, cinéma, lecture.">Dune</a>,
  444. <a href="/david/2024/03/09/" data-evolution data-identite data-poesie title="Étiquettes : évolution, identité, poésie.">Marque</a>,
  445. <a href="/david/2024/03/08/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Flow</a>,
  446. <a href="/david/2024/03/07/" data-commun data-deception data-web title="Étiquettes : commun, déception, web.">Sondages</a>,
  447. <a href="/david/2024/03/06/" data-apprentissage data-parentalite data-protopie title="Étiquettes : apprentissage, parentalité, protopie.">Vannerie</a>,
  448. <a href="/david/2024/03/05/" data-adaptation data-aventure data-psychologie title="Étiquettes : adaptation, aventure, psychologie.">Jour 2</a>,
  449. <a href="/david/2024/03/04/" data-dystopie data-foret data-solastalgia title="Étiquettes : dystopie, forêt, solastalgia.">Jour 1</a>,
  450. <a href="/david/2024/03/03/" data-dependance data-opensource data-parvenir title="Étiquettes : dépendance, opensource, parvenir.">Permanence</a>,
  451. <a href="/david/2024/03/02/" data-dependance data-sport data-technique title="Étiquettes : dépendance, sport, technique.">Montre</a>,
  452. <a href="/david/2024/03/01/" data-evolution data-laboratoire data-web title="Étiquettes : évolution, laboratoire, web.">Simple</a>,
  453. <a href="/david/2024/02/29/" data-commun data-deception data-psychologie title="Étiquettes : commun, déception, psychologie.">Wikipédia</a>,
  454. <a href="/david/2024/02/28/" data-documentation data-partage data-solastalgia title="Étiquettes : documentation, partage, solastalgia.">Dérèglement</a>,
  455. <a href="/david/2024/02/27/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Rédaction</a>,
  456. <a href="/david/2024/02/26/" data-parentalite data-poesie data-solastalgia title="Étiquettes : parentalité, poésie, solastalgia.">Galaxie</a>,
  457. <a href="/david/2024/02/25/" data-aventure data-foret data-gratitude title="Étiquettes : aventure, forêt, gratitude.">Jour 2</a>,
  458. <a href="/david/2024/02/24/" data-aventure data-foret data-sport title="Étiquettes : aventure, forêt, sport.">Jour 1</a>,
  459. <a href="/david/2024/02/23/" data-apprentissage data-processus data-web title="Étiquettes : apprentissage, processus, web.">Préparatifs</a>,
  460. <a href="/david/2024/02/22/" data-decision data-experience data-partage title="Étiquettes : décision, expérience, partage.">Responsabilité</a>,
  461. <a href="/david/2024/02/21/" data-dystopie data-ia data-psychologie title="Étiquettes : dystopie, IA, psychologie.">Cinéma</a>,
  462. <a href="/david/2024/02/20/" data-echanges data-laboratoire data-protopie title="Étiquettes : échanges, laboratoire, protopie.">Véhicule</a>,
  463. <a href="/david/2024/02/19/" data-apprentissage data-laboratoire data-web title="Étiquettes : apprentissage, laboratoire, web.">Injection</a>,
  464. <a href="/david/2024/02/18/" data-commun data-dependance data-technique title="Étiquettes : commun, dépendance, technique.">In·directions</a>,
  465. <a href="/david/2024/02/17/" data-ecriture data-lecture data-solastalgia title="Étiquettes : écriture, lecture, solastalgia.">Quotidien</a>,
  466. <a href="/david/2024/02/16/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">uMap 2</a>,
  467. <a href="/david/2024/02/15/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Licence</a>,
  468. <a href="/david/2024/02/14/" data-commun data-opendata data-technique title="Étiquettes : commun, opendata, technique.">GéoCodage</a>,
  469. <a href="/david/2024/02/13/" data-apprentissage data-processus data-protopie title="Étiquettes : apprentissage, processus, protopie.">Feutrage</a>,
  470. <a href="/david/2024/02/12/" data-apprentissage data-echanges data-photographie title="Étiquettes : apprentissage, échanges, photographie.">Renards</a>,
  471. <a href="/david/2024/02/11/" data-communaute data-opensource data-psychologie title="Étiquettes : communauté, opensource, psychologie.">Violence</a>,
  472. <a href="/david/2024/02/10/" data-accessibilite data-experience data-psychologie title="Étiquettes : accessibilité, expérience, psychologie.">Validisme</a>,
  473. <a href="/david/2024/02/09/" data-apprentissage data-decision data-opensource title="Étiquettes : apprentissage, décision, opensource.">Version</a>,
  474. <a href="/david/2024/02/08/" data-apprentissage data-equipe data-evolution title="Étiquettes : apprentissage, équipe, évolution.">Écoute</a>,
  475. <a href="/david/2024/02/07/" data-decision data-foret data-photographie title="Étiquettes : décision, forêt, photographie.">Écureuil</a>,
  476. <a href="/david/2024/02/06/" data-communaute data-equipe data-lecture title="Étiquettes : communauté, équipe, lecture.">Anneau</a>,
  477. <a href="/david/2024/02/05/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Jeu</a>,
  478. <a href="/david/2024/02/04/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">Tooltipopover</a>,
  479. <a href="/david/2024/02/03/" data-dependance data-opensource data-technique title="Étiquettes : dépendance, opensource, technique.">Archives</a>,
  480. <a href="/david/2024/02/02/" data-equipe data-processus data-protopie title="Étiquettes : équipe, processus, protopie.">Valeurs</a>,
  481. <a href="/david/2024/02/01/" data-accessibilite data-dystopie data-evolution title="Étiquettes : accessibilité, dystopie, évolution.">Vision</a>,
  482. <a href="/david/2024/01/31/" data-commun data-documentation data-partage title="Étiquettes : commun, documentation, partage.">Mécénat</a>,
  483. <a href="/david/2024/01/30/" data-apprentissage data-equipe data-processus title="Étiquettes : apprentissage, équipe, processus.">Équipe</a>,
  484. <a href="/david/2024/01/29/" data-echanges data-technique data-web title="Étiquettes : échanges, technique, web.">Déploiement</a>,
  485. <a href="/david/2024/01/28/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 2</a>,
  486. <a href="/david/2024/01/27/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 1</a>,
  487. <a href="/david/2024/01/26/" data-gratitude data-partage data-psychologie title="Étiquettes : gratitude, partage, psychologie.">Cargo</a>,
  488. <a href="/david/2024/01/25/" data-apprentissage data-equipe data-velo title="Étiquettes : apprentissage, équipe, vélo.">Stratégie</a>,
  489. <a href="/david/2024/01/24/" data-communaute data-equipe data-processus title="Étiquettes : communauté, équipe, processus.">Taille</a>,
  490. <a href="/david/2024/01/23/" data-commun data-experience data-processus title="Étiquettes : commun, expérience, processus.">Thèse</a>,
  491. <a href="/david/2024/01/22/" data-echanges data-experience data-gratitude title="Étiquettes : échanges, expérience, gratitude.">Légitimité</a>,
  492. <a href="/david/2024/01/21/" data-apprentissage data-foret data-protopie title="Étiquettes : apprentissage, forêt, protopie.">Bois</a>,
  493. <a href="/david/2024/01/20/" data-dependance data-evolution data-parentalite title="Étiquettes : dépendance, évolution, parentalité.">Extinction</a>,
  494. <a href="/david/2024/01/19/" data-accompagnement data-communaute data-echanges title="Étiquettes : accompagnement, communauté, échanges.">Marcher</a>,
  495. <a href="/david/2024/01/18/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Open-source</a>,
  496. <a href="/david/2024/01/17/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Vieillesse</a>,
  497. <a href="/david/2024/01/16/" data-addiction data-evolution data-technique title="Étiquettes : addiction, évolution, technique.">Endorphines</a>,
  498. <a href="/david/2024/01/15/" data-addiction data-evolution data-sport title="Étiquettes : addiction, évolution, sport.">Rééducation</a>,
  499. <a href="/david/2024/01/14/" data-ecriture data-experience data-protopie title="Étiquettes : écriture, expérience, protopie.">Fiction</a>,
  500. <a href="/david/2024/01/13/" data-ecriture data-ia data-parvenir title="Étiquettes : écriture, IA, parvenir.">Wuwei</a>,
  501. <a href="/david/2024/01/12/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Personnel</a>,
  502. <a href="/david/2024/01/11/" data-evolution data-technique data-web title="Étiquettes : évolution, technique, web.">Impact</a>,
  503. <a href="/david/2024/01/10/" data-apprentissage data-ecriture data-ia title="Étiquettes : apprentissage, écriture, IA.">Écriture</a>,
  504. <a href="/david/2024/01/09/" data-accessibilite data-sport data-technique title="Étiquettes : accessibilité, sport, technique.">Blessure</a>,
  505. <a href="/david/2024/01/08/" data-processus data-solastalgia data-technique title="Étiquettes : processus, solastalgia, technique.">Liens</a>,
  506. <a href="/david/2024/01/07/" data-apprentissage data-communaute data-fediverse title="Étiquettes : apprentissage, communauté, fédiverse.">Dons</a>,
  507. <a href="/david/2024/01/06/" data-addiction data-processus data-sport title="Étiquettes : addiction, processus, sport.">Objectif</a>,
  508. <a href="/david/2024/01/05/" data-apprentissage data-decision data-equipe title="Étiquettes : apprentissage, décision, équipe.">Vocabulaire</a>,
  509. <a href="/david/2024/01/04/" data-decision data-parvenir data-propriete title="Étiquettes : décision, parvenir, propriété.">Repos</a>,
  510. <a href="/david/2024/01/03/" data-accompagnement data-ecriture data-web title="Étiquettes : accompagnement, écriture, web.">Appariement</a>,
  511. <a href="/david/2024/01/02/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Fondations</a>,
  512. <a href="/david/2024/01/01/" data-addiction data-experience data-protopie title="Étiquettes : addiction, expérience, protopie.">Dryear(s)</a>.
  513. </p>
  514. <p id="tags-2024">Ou par étiquettes :</p>
  515. <p>
  516. <a href="/david/2024/accessibilite/" data-tag="accessibilite" rel="tag">#accessibilité (3)</a>,
  517. <a href="/david/2024/accompagnement/" data-tag="accompagnement" rel="tag">#accompagnement (2)</a>,
  518. <a href="/david/2024/adaptation/" data-tag="adaptation" rel="tag">#adaptation (3)</a>,
  519. <a href="/david/2024/addiction/" data-tag="addiction" rel="tag">#addiction (5)</a>,
  520. <a href="/david/2024/apprentissage/" data-tag="apprentissage" rel="tag">#apprentissage (16)</a>,
  521. <a href="/david/2024/aventure/" data-tag="aventure" rel="tag">#aventure (4)</a>,
  522. <a href="/david/2024/cinema/" data-tag="cinema" rel="tag">#cinéma (1)</a>,
  523. <a href="/david/2024/commun/" data-tag="commun" rel="tag">#commun (11)</a>,
  524. <a href="/david/2024/communaute/" data-tag="communaute" rel="tag">#communauté (6)</a>,
  525. <a href="/david/2024/courage/" data-tag="courage" rel="tag">#courage (2)</a>,
  526. <a href="/david/2024/decentralisation/" data-tag="decentralisation" rel="tag">#décentralisation (1)</a>,
  527. <a href="/david/2024/deception/" data-tag="deception" rel="tag">#déception (3)</a>,
  528. <a href="/david/2024/decision/" data-tag="decision" rel="tag">#décision (8)</a>,
  529. <a href="/david/2024/dependance/" data-tag="dependance" rel="tag">#dépendance (8)</a>,
  530. <a href="/david/2024/documentation/" data-tag="documentation" rel="tag">#documentation (3)</a>,
  531. <a href="/david/2024/dystopie/" data-tag="dystopie" rel="tag">#dystopie (3)</a>,
  532. <a href="/david/2024/echanges/" data-tag="echanges" rel="tag">#échanges (5)</a>,
  533. <a href="/david/2024/ecriture/" data-tag="ecriture" rel="tag">#écriture (8)</a>,
  534. <a href="/david/2024/enthousiasme/" data-tag="enthousiasme" rel="tag">#enthousiasme (3)</a>,
  535. <a href="/david/2024/equipe/" data-tag="equipe" rel="tag">#équipe (9)</a>,
  536. <a href="/david/2024/evolution/" data-tag="evolution" rel="tag">#évolution (9)</a>,
  537. <a href="/david/2024/experience/" data-tag="experience" rel="tag">#expérience (17)</a>,
  538. <a href="/david/2024/fediverse/" data-tag="fediverse" rel="tag">#fédiverse (1)</a>,
  539. <a href="/david/2024/foret/" data-tag="foret" rel="tag">#forêt (9)</a>,
  540. <a href="/david/2024/gratitude/" data-tag="gratitude" rel="tag">#gratitude (4)</a>,
  541. <a href="/david/2024/ia/" data-tag="ia" rel="tag">#IA (3)</a>,
  542. <a href="/david/2024/identite/" data-tag="identite" rel="tag">#identité (1)</a>,
  543. <a href="/david/2024/laboratoire/" data-tag="laboratoire" rel="tag">#laboratoire (4)</a>,
  544. <a href="/david/2024/lecture/" data-tag="lecture" rel="tag">#lecture (5)</a>,
  545. <a href="/david/2024/liens/" data-tag="liens" rel="tag">#liens (1)</a>,
  546. <a href="/david/2024/opendata/" data-tag="opendata" rel="tag">#opendata (1)</a>,
  547. <a href="/david/2024/opensource/" data-tag="opensource" rel="tag">#opensource (10)</a>,
  548. <a href="/david/2024/parentalite/" data-tag="parentalite" rel="tag">#parentalité (5)</a>,
  549. <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (9)</a>,
  550. <a href="/david/2024/parvenir/" data-tag="parvenir" rel="tag">#parvenir (3)</a>,
  551. <a href="/david/2024/photographie/" data-tag="photographie" rel="tag">#photographie (3)</a>,
  552. <a href="/david/2024/poesie/" data-tag="poesie" rel="tag">#poésie (3)</a>,
  553. <a href="/david/2024/processus/" data-tag="processus" rel="tag">#processus (10)</a>,
  554. <a href="/david/2024/propriete/" data-tag="propriete" rel="tag">#propriété (1)</a>,
  555. <a href="/david/2024/protopie/" data-tag="protopie" rel="tag">#protopie (9)</a>,
  556. <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (12)</a>,
  557. <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
  558. <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (7)</a>,
  559. <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (22)</a>,
  560. <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
  561. <a href="/david/2024/web/" data-tag="web" rel="tag">#web (14)</a>.
  562. </p>
  563. <p>
  564. Les <a href="/david/blogroll/">liens des ami·es</a> avec leurs dernières publications 🤗.
  565. </p>
  566. <h2>Publications plus anciennes</h2>
  567. <p>
  568. J’ai publié
  569. sporadiquement en <a href="/david/2023/"
  570. title="Voir la liste de toutes les publications 2023">2023</a>
  571. ainsi qu’en <a href="/david/2022/"
  572. title="Voir la liste de toutes les publications 2022">2022</a>,
  573. (pres)quotidiennemment en <a href="/david/2021/"
  574. title="Voir la liste de toutes les publications 2021">2021</a> et
  575. hebdomadairement en <a href="/david/2020/"
  576. title="Voir la liste de toutes les publications 2020">2020</a>
  577. .
  578. </p>
  579. <p>
  580. Vous pouvez aussi consulter les différents
  581. <a href="/david/blog/">billets de blog</a> qui ont été rédigés de 2004 (!) à 2019
  582. ou les <a href="/david/stream/">entrées de journaux</a> relativement
  583. régulières entre 2009 et 2019.
  584. </p>
  585. <p>
  586. <em>
  587. Notez qu’avec un tel historique, certaines informations sont obsolètes et/ou
  588. plus cautionnées.
  589. </em>
  590. </p>
  591. <form action="/david/recherche/" method="get">
  592. <fieldset>
  593. <legend>Recherche</legend>
  594. <label for="input-search">Termes de votre recherche :</label>
  595. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  596. <input type="submit" value="Chercher">
  597. <p id="indexation-infos">
  598. <small>
  599. Seuls les contenus de ces 8 dernières années sont indexés.
  600. </small>
  601. </p>
  602. </fieldset>
  603. </form>
  604. <aside>
  605. <theme-toggle></theme-toggle>
  606. </aside>
  607. </article>
  608. <hr>
  609. <footer>
  610. <p>
  611. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  612. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  613. <a href="http://larlet.com"
  614. title="Go to my English profile"
  615. data-instant>Pro</a>
  616. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  617. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  618. </p>
  619. <template id="theme-selector">
  620. <form>
  621. <style type="text/css">
  622. fieldset div {
  623. text-align: center;
  624. }
  625. </style>
  626. <fieldset>
  627. <legend>Thème</legend>
  628. <div>
  629. <label>
  630. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  631. Auto
  632. </label>
  633. <label>
  634. <input type="radio" value="dark" name="chosen-color-scheme">
  635. Foncé
  636. </label>
  637. <label>
  638. <input type="radio" value="light" name="chosen-color-scheme">
  639. Clair
  640. </label>
  641. </div>
  642. </fieldset>
  643. </form>
  644. </template>
  645. </footer>
  646. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  647. <script>
  648. class ThemeToggle extends HTMLElement {
  649. constructor() {
  650. super()
  651. const themeSelectorTemplate = document.querySelector('#theme-selector')
  652. const form = themeSelectorTemplate.content.firstElementChild
  653. this.attachShadow({ mode: 'open' })
  654. this.shadowRoot.appendChild(form.cloneNode(true))
  655. }
  656. connectedCallback() {
  657. const form = this.shadowRoot.querySelector('form')
  658. form.addEventListener('change', (e) => {
  659. const chosenColorScheme = e.target.value
  660. localStorage.setItem('theme', chosenColorScheme)
  661. toggleTheme(chosenColorScheme)
  662. })
  663. const selectedTheme = localStorage.getItem('theme')
  664. if (selectedTheme && selectedTheme !== 'undefined') {
  665. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  666. }
  667. }
  668. }
  669. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  670. window.addEventListener('load', () => {
  671. let colorsLayer = undefined
  672. let hasDarkRules = false
  673. for (const styleSheet of Array.from(document.styleSheets)) {
  674. let mediaRules = []
  675. for (const layerRule of styleSheet.cssRules) {
  676. if (!(layerRule instanceof CSSLayerBlockRule)) {
  677. continue
  678. }
  679. if (layerRule.name === 'colors') {
  680. colorsLayer = layerRule
  681. }
  682. for (const cssRule of layerRule.cssRules) {
  683. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  684. continue
  685. }
  686. // WARNING: Safari does not have/supports `conditionText`.
  687. if (cssRule.conditionText) {
  688. if (cssRule.conditionText !== prefersColorSchemeDark) {
  689. continue
  690. }
  691. } else {
  692. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  693. continue
  694. }
  695. }
  696. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  697. }
  698. }
  699. // WARNING: do not try to insert a Rule to a styleSheet you are
  700. // currently iterating on, otherwise the browser will be stuck
  701. // in a infinite loop…
  702. for (const mediaRule of mediaRules) {
  703. // Safari requires the `0` second parameter (even if default).
  704. colorsLayer.insertRule(mediaRule.cssText, 0)
  705. hasDarkRules = true
  706. }
  707. }
  708. if (hasDarkRules) {
  709. if ('customElements' in window && !customElements.get('theme-toggle')) {
  710. customElements.define('theme-toggle', ThemeToggle)
  711. }
  712. }
  713. })
  714. </script>
  715. </body>
  716. </html>