Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 41KB

5 vuotta sitten
4 vuotta sitten
5 vuotta sitten
5 vuotta sitten
8 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
7 kuukautta sitten
7 kuukautta sitten
8 kuukautta sitten
8 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
4 vuotta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
10 kuukautta sitten
4 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
  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/14/" data-enthousiasme data-laboratoire data-sport title="Étiquettes : enthousiasme, laboratoire, sport.">Apex 2</a>,
  423. <a href="/david/2024/04/13/" data-dystopie data-lecture data-psychologie title="Étiquettes : dystopie, lecture, psychologie.">Fondation</a>,
  424. <a href="/david/2024/04/10/" data-communaute data-poesie data-psychologie title="Étiquettes : communauté, poésie, psychologie.">Weird</a>,
  425. <a href="/david/2024/04/08/" data-enthousiasme data-experience data-photographie title="Étiquettes : enthousiasme, expérience, photographie.">Éclipse</a>,
  426. <a href="/david/2024/04/07/" data-courage data-sport data-technique title="Étiquettes : courage, sport, technique.">Piscine</a>,
  427. <a href="/david/2024/04/05/" data-documentation data-experience data-psychologie title="Étiquettes : documentation, expérience, psychologie.">Productivité</a>,
  428. <a href="/david/2024/04/03/" data-equipe data-experience data-gratitude title="Étiquettes : équipe, expérience, gratitude.">Décision</a>,
  429. <a href="/david/2024/04/02/" data-commun data-opensource data-protopie title="Étiquettes : commun, opensource, protopie.">Porte</a>,
  430. <a href="/david/2024/03/30/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 2</a>,
  431. <a href="/david/2024/03/29/" data-experience data-foret data-partage title="Étiquettes : expérience, forêt, partage.">Jour 1</a>,
  432. <a href="/david/2024/03/28/" data-commun data-equipe data-protopie title="Étiquettes : commun, équipe, protopie.">Collectif</a>,
  433. <a href="/david/2024/03/26/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">GPX Viewer</a>,
  434. <a href="/david/2024/03/25/" data-dependance data-partage data-technique title="Étiquettes : dépendance, partage, technique.">Inclusion</a>,
  435. <a href="/david/2024/03/24/" data-courage data-lecture data-poesie title="Étiquettes : courage, lecture, poésie.">Cage</a>,
  436. <a href="/david/2024/03/23/" data-dependance data-psychologie data-technique title="Étiquettes : dépendance, psychologie, technique.">Intendant</a>,
  437. <a href="/david/2024/03/21/" data-communaute data-opensource data-technique title="Étiquettes : communauté, opensource, technique.">Fourchette</a>,
  438. <a href="/david/2024/03/20/" data-laboratoire data-opensource data-technique title="Étiquettes : laboratoire, opensource, technique.">PageCrypt</a>,
  439. <a href="/david/2024/03/19/" data-apprentissage data-enthousiasme data-technique title="Étiquettes : apprentissage, enthousiasme, technique.">Excitation</a>,
  440. <a href="/david/2024/03/18/" data-adaptation data-addiction data-evolution title="Étiquettes : adaptation, addiction, évolution.">Casquettes</a>,
  441. <a href="/david/2024/03/16/" data-aventure data-ecriture data-lecture title="Étiquettes : aventure, écriture, lecture.">Descriptions</a>,
  442. <a href="/david/2024/03/14/" data-deception data-enthousiasme data-sport title="Étiquettes : déception, enthousiasme, sport.">Montre 2</a>,
  443. <a href="/david/2024/03/13/" data-liens data-partage data-web title="Étiquettes : liens, partage, web.">Sérendipité</a>,
  444. <a href="/david/2024/03/12/" data-partage data-technique data-web title="Étiquettes : partage, technique, web.">Surligner</a>,
  445. <a href="/david/2024/03/11/" data-decentralisation data-dependance data-web title="Étiquettes : décentralisation, dépendance, web.">LoginWall</a>,
  446. <a href="/david/2024/03/10/" data-adaptation data-cinema data-lecture title="Étiquettes : adaptation, cinéma, lecture.">Dune</a>,
  447. <a href="/david/2024/03/09/" data-evolution data-identite data-poesie title="Étiquettes : évolution, identité, poésie.">Marque</a>,
  448. <a href="/david/2024/03/08/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Flow</a>,
  449. <a href="/david/2024/03/07/" data-commun data-deception data-web title="Étiquettes : commun, déception, web.">Sondages</a>,
  450. <a href="/david/2024/03/06/" data-apprentissage data-parentalite data-protopie title="Étiquettes : apprentissage, parentalité, protopie.">Vannerie</a>,
  451. <a href="/david/2024/03/05/" data-adaptation data-aventure data-psychologie title="Étiquettes : adaptation, aventure, psychologie.">Jour 2</a>,
  452. <a href="/david/2024/03/04/" data-dystopie data-foret data-solastalgia title="Étiquettes : dystopie, forêt, solastalgia.">Jour 1</a>,
  453. <a href="/david/2024/03/03/" data-dependance data-opensource data-parvenir title="Étiquettes : dépendance, opensource, parvenir.">Permanence</a>,
  454. <a href="/david/2024/03/02/" data-dependance data-sport data-technique title="Étiquettes : dépendance, sport, technique.">Montre</a>,
  455. <a href="/david/2024/03/01/" data-evolution data-laboratoire data-web title="Étiquettes : évolution, laboratoire, web.">Simple</a>,
  456. <a href="/david/2024/02/29/" data-commun data-deception data-psychologie title="Étiquettes : commun, déception, psychologie.">Wikipédia</a>,
  457. <a href="/david/2024/02/28/" data-documentation data-partage data-solastalgia title="Étiquettes : documentation, partage, solastalgia.">Dérèglement</a>,
  458. <a href="/david/2024/02/27/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Rédaction</a>,
  459. <a href="/david/2024/02/26/" data-parentalite data-poesie data-solastalgia title="Étiquettes : parentalité, poésie, solastalgia.">Galaxie</a>,
  460. <a href="/david/2024/02/25/" data-aventure data-foret data-gratitude title="Étiquettes : aventure, forêt, gratitude.">Jour 2</a>,
  461. <a href="/david/2024/02/24/" data-aventure data-foret data-sport title="Étiquettes : aventure, forêt, sport.">Jour 1</a>,
  462. <a href="/david/2024/02/23/" data-apprentissage data-processus data-web title="Étiquettes : apprentissage, processus, web.">Préparatifs</a>,
  463. <a href="/david/2024/02/22/" data-decision data-experience data-partage title="Étiquettes : décision, expérience, partage.">Responsabilité</a>,
  464. <a href="/david/2024/02/21/" data-dystopie data-ia data-psychologie title="Étiquettes : dystopie, IA, psychologie.">Cinéma</a>,
  465. <a href="/david/2024/02/20/" data-echanges data-laboratoire data-protopie title="Étiquettes : échanges, laboratoire, protopie.">Véhicule</a>,
  466. <a href="/david/2024/02/19/" data-apprentissage data-laboratoire data-web title="Étiquettes : apprentissage, laboratoire, web.">Injection</a>,
  467. <a href="/david/2024/02/18/" data-commun data-dependance data-technique title="Étiquettes : commun, dépendance, technique.">In·directions</a>,
  468. <a href="/david/2024/02/17/" data-ecriture data-lecture data-solastalgia title="Étiquettes : écriture, lecture, solastalgia.">Quotidien</a>,
  469. <a href="/david/2024/02/16/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">uMap 2</a>,
  470. <a href="/david/2024/02/15/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Licence</a>,
  471. <a href="/david/2024/02/14/" data-commun data-opendata data-technique title="Étiquettes : commun, opendata, technique.">GéoCodage</a>,
  472. <a href="/david/2024/02/13/" data-apprentissage data-processus data-protopie title="Étiquettes : apprentissage, processus, protopie.">Feutrage</a>,
  473. <a href="/david/2024/02/12/" data-apprentissage data-echanges data-photographie title="Étiquettes : apprentissage, échanges, photographie.">Renards</a>,
  474. <a href="/david/2024/02/11/" data-communaute data-opensource data-psychologie title="Étiquettes : communauté, opensource, psychologie.">Violence</a>,
  475. <a href="/david/2024/02/10/" data-accessibilite data-experience data-psychologie title="Étiquettes : accessibilité, expérience, psychologie.">Validisme</a>,
  476. <a href="/david/2024/02/09/" data-apprentissage data-decision data-opensource title="Étiquettes : apprentissage, décision, opensource.">Version</a>,
  477. <a href="/david/2024/02/08/" data-apprentissage data-equipe data-evolution title="Étiquettes : apprentissage, équipe, évolution.">Écoute</a>,
  478. <a href="/david/2024/02/07/" data-decision data-foret data-photographie title="Étiquettes : décision, forêt, photographie.">Écureuil</a>,
  479. <a href="/david/2024/02/06/" data-communaute data-equipe data-lecture title="Étiquettes : communauté, équipe, lecture.">Anneau</a>,
  480. <a href="/david/2024/02/05/" data-experience data-psychologie data-technique title="Étiquettes : expérience, psychologie, technique.">Jeu</a>,
  481. <a href="/david/2024/02/04/" data-apprentissage data-technique data-web title="Étiquettes : apprentissage, technique, web.">Tooltipopover</a>,
  482. <a href="/david/2024/02/03/" data-dependance data-opensource data-technique title="Étiquettes : dépendance, opensource, technique.">Archives</a>,
  483. <a href="/david/2024/02/02/" data-equipe data-processus data-protopie title="Étiquettes : équipe, processus, protopie.">Valeurs</a>,
  484. <a href="/david/2024/02/01/" data-accessibilite data-dystopie data-evolution title="Étiquettes : accessibilité, dystopie, évolution.">Vision</a>,
  485. <a href="/david/2024/01/31/" data-commun data-documentation data-partage title="Étiquettes : commun, documentation, partage.">Mécénat</a>,
  486. <a href="/david/2024/01/30/" data-apprentissage data-equipe data-processus title="Étiquettes : apprentissage, équipe, processus.">Équipe</a>,
  487. <a href="/david/2024/01/29/" data-echanges data-technique data-web title="Étiquettes : échanges, technique, web.">Déploiement</a>,
  488. <a href="/david/2024/01/28/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 2</a>,
  489. <a href="/david/2024/01/27/" data-experience data-foret data-parentalite title="Étiquettes : expérience, forêt, parentalité.">Jour 1</a>,
  490. <a href="/david/2024/01/26/" data-gratitude data-partage data-psychologie title="Étiquettes : gratitude, partage, psychologie.">Cargo</a>,
  491. <a href="/david/2024/01/25/" data-apprentissage data-equipe data-velo title="Étiquettes : apprentissage, équipe, vélo.">Stratégie</a>,
  492. <a href="/david/2024/01/24/" data-communaute data-equipe data-processus title="Étiquettes : communauté, équipe, processus.">Taille</a>,
  493. <a href="/david/2024/01/23/" data-commun data-experience data-processus title="Étiquettes : commun, expérience, processus.">Thèse</a>,
  494. <a href="/david/2024/01/22/" data-echanges data-experience data-gratitude title="Étiquettes : échanges, expérience, gratitude.">Légitimité</a>,
  495. <a href="/david/2024/01/21/" data-apprentissage data-foret data-protopie title="Étiquettes : apprentissage, forêt, protopie.">Bois</a>,
  496. <a href="/david/2024/01/20/" data-dependance data-evolution data-parentalite title="Étiquettes : dépendance, évolution, parentalité.">Extinction</a>,
  497. <a href="/david/2024/01/19/" data-accompagnement data-communaute data-echanges title="Étiquettes : accompagnement, communauté, échanges.">Marcher</a>,
  498. <a href="/david/2024/01/18/" data-commun data-decision data-opensource title="Étiquettes : commun, décision, opensource.">Open-source</a>,
  499. <a href="/david/2024/01/17/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Vieillesse</a>,
  500. <a href="/david/2024/01/16/" data-addiction data-evolution data-technique title="Étiquettes : addiction, évolution, technique.">Endorphines</a>,
  501. <a href="/david/2024/01/15/" data-addiction data-evolution data-sport title="Étiquettes : addiction, évolution, sport.">Rééducation</a>,
  502. <a href="/david/2024/01/14/" data-ecriture data-experience data-protopie title="Étiquettes : écriture, expérience, protopie.">Fiction</a>,
  503. <a href="/david/2024/01/13/" data-ecriture data-ia data-parvenir title="Étiquettes : écriture, IA, parvenir.">Wuwei</a>,
  504. <a href="/david/2024/01/12/" data-ecriture data-processus data-psychologie title="Étiquettes : écriture, processus, psychologie.">Personnel</a>,
  505. <a href="/david/2024/01/11/" data-evolution data-technique data-web title="Étiquettes : évolution, technique, web.">Impact</a>,
  506. <a href="/david/2024/01/10/" data-apprentissage data-ecriture data-ia title="Étiquettes : apprentissage, écriture, IA.">Écriture</a>,
  507. <a href="/david/2024/01/09/" data-accessibilite data-sport data-technique title="Étiquettes : accessibilité, sport, technique.">Blessure</a>,
  508. <a href="/david/2024/01/08/" data-processus data-solastalgia data-technique title="Étiquettes : processus, solastalgia, technique.">Liens</a>,
  509. <a href="/david/2024/01/07/" data-apprentissage data-communaute data-fediverse title="Étiquettes : apprentissage, communauté, fédiverse.">Dons</a>,
  510. <a href="/david/2024/01/06/" data-addiction data-processus data-sport title="Étiquettes : addiction, processus, sport.">Objectif</a>,
  511. <a href="/david/2024/01/05/" data-apprentissage data-decision data-equipe title="Étiquettes : apprentissage, décision, équipe.">Vocabulaire</a>,
  512. <a href="/david/2024/01/04/" data-decision data-parvenir data-propriete title="Étiquettes : décision, parvenir, propriété.">Repos</a>,
  513. <a href="/david/2024/01/03/" data-accompagnement data-ecriture data-web title="Étiquettes : accompagnement, écriture, web.">Appariement</a>,
  514. <a href="/david/2024/01/02/" data-experience data-technique data-web title="Étiquettes : expérience, technique, web.">Fondations</a>,
  515. <a href="/david/2024/01/01/" data-addiction data-experience data-protopie title="Étiquettes : addiction, expérience, protopie.">Dryear(s)</a>.
  516. </p>
  517. <p id="tags-2024">Ou par étiquettes :</p>
  518. <p>
  519. <a href="/david/2024/accessibilite/" data-tag="accessibilite" rel="tag">#accessibilité (3)</a>,
  520. <a href="/david/2024/accompagnement/" data-tag="accompagnement" rel="tag">#accompagnement (2)</a>,
  521. <a href="/david/2024/adaptation/" data-tag="adaptation" rel="tag">#adaptation (3)</a>,
  522. <a href="/david/2024/addiction/" data-tag="addiction" rel="tag">#addiction (5)</a>,
  523. <a href="/david/2024/apprentissage/" data-tag="apprentissage" rel="tag">#apprentissage (16)</a>,
  524. <a href="/david/2024/aventure/" data-tag="aventure" rel="tag">#aventure (4)</a>,
  525. <a href="/david/2024/cinema/" data-tag="cinema" rel="tag">#cinéma (1)</a>,
  526. <a href="/david/2024/commun/" data-tag="commun" rel="tag">#commun (11)</a>,
  527. <a href="/david/2024/communaute/" data-tag="communaute" rel="tag">#communauté (7)</a>,
  528. <a href="/david/2024/courage/" data-tag="courage" rel="tag">#courage (2)</a>,
  529. <a href="/david/2024/decentralisation/" data-tag="decentralisation" rel="tag">#décentralisation (1)</a>,
  530. <a href="/david/2024/deception/" data-tag="deception" rel="tag">#déception (3)</a>,
  531. <a href="/david/2024/decision/" data-tag="decision" rel="tag">#décision (8)</a>,
  532. <a href="/david/2024/dependance/" data-tag="dependance" rel="tag">#dépendance (8)</a>,
  533. <a href="/david/2024/documentation/" data-tag="documentation" rel="tag">#documentation (3)</a>,
  534. <a href="/david/2024/dystopie/" data-tag="dystopie" rel="tag">#dystopie (4)</a>,
  535. <a href="/david/2024/echanges/" data-tag="echanges" rel="tag">#échanges (5)</a>,
  536. <a href="/david/2024/ecriture/" data-tag="ecriture" rel="tag">#écriture (8)</a>,
  537. <a href="/david/2024/enthousiasme/" data-tag="enthousiasme" rel="tag">#enthousiasme (4)</a>,
  538. <a href="/david/2024/equipe/" data-tag="equipe" rel="tag">#équipe (9)</a>,
  539. <a href="/david/2024/evolution/" data-tag="evolution" rel="tag">#évolution (9)</a>,
  540. <a href="/david/2024/experience/" data-tag="experience" rel="tag">#expérience (17)</a>,
  541. <a href="/david/2024/fediverse/" data-tag="fediverse" rel="tag">#fédiverse (1)</a>,
  542. <a href="/david/2024/foret/" data-tag="foret" rel="tag">#forêt (9)</a>,
  543. <a href="/david/2024/gratitude/" data-tag="gratitude" rel="tag">#gratitude (4)</a>,
  544. <a href="/david/2024/ia/" data-tag="ia" rel="tag">#IA (3)</a>,
  545. <a href="/david/2024/identite/" data-tag="identite" rel="tag">#identité (1)</a>,
  546. <a href="/david/2024/laboratoire/" data-tag="laboratoire" rel="tag">#laboratoire (5)</a>,
  547. <a href="/david/2024/lecture/" data-tag="lecture" rel="tag">#lecture (6)</a>,
  548. <a href="/david/2024/liens/" data-tag="liens" rel="tag">#liens (1)</a>,
  549. <a href="/david/2024/opendata/" data-tag="opendata" rel="tag">#opendata (1)</a>,
  550. <a href="/david/2024/opensource/" data-tag="opensource" rel="tag">#opensource (10)</a>,
  551. <a href="/david/2024/parentalite/" data-tag="parentalite" rel="tag">#parentalité (5)</a>,
  552. <a href="/david/2024/partage/" data-tag="partage" rel="tag">#partage (9)</a>,
  553. <a href="/david/2024/parvenir/" data-tag="parvenir" rel="tag">#parvenir (3)</a>,
  554. <a href="/david/2024/photographie/" data-tag="photographie" rel="tag">#photographie (3)</a>,
  555. <a href="/david/2024/poesie/" data-tag="poesie" rel="tag">#poésie (4)</a>,
  556. <a href="/david/2024/processus/" data-tag="processus" rel="tag">#processus (10)</a>,
  557. <a href="/david/2024/propriete/" data-tag="propriete" rel="tag">#propriété (1)</a>,
  558. <a href="/david/2024/protopie/" data-tag="protopie" rel="tag">#protopie (9)</a>,
  559. <a href="/david/2024/psychologie/" data-tag="psychologie" rel="tag">#psychologie (14)</a>,
  560. <a href="/david/2024/solastalgia/" data-tag="solastalgia" rel="tag">#solastalgia (5)</a>,
  561. <a href="/david/2024/sport/" data-tag="sport" rel="tag">#sport (8)</a>,
  562. <a href="/david/2024/technique/" data-tag="technique" rel="tag">#technique (22)</a>,
  563. <a href="/david/2024/velo/" data-tag="velo" rel="tag">#vélo (1)</a>,
  564. <a href="/david/2024/web/" data-tag="web" rel="tag">#web (14)</a>.
  565. </p>
  566. <p>
  567. Les <a href="/david/blogroll/">liens des ami·es</a> avec leurs dernières publications 🤗.
  568. </p>
  569. <h2>Publications plus anciennes</h2>
  570. <p>
  571. J’ai publié
  572. sporadiquement en <a href="/david/2023/"
  573. title="Voir la liste de toutes les publications 2023">2023</a>
  574. ainsi qu’en <a href="/david/2022/"
  575. title="Voir la liste de toutes les publications 2022">2022</a>,
  576. (pres)quotidiennemment en <a href="/david/2021/"
  577. title="Voir la liste de toutes les publications 2021">2021</a> et
  578. hebdomadairement en <a href="/david/2020/"
  579. title="Voir la liste de toutes les publications 2020">2020</a>
  580. .
  581. </p>
  582. <p>
  583. Vous pouvez aussi consulter les différents
  584. <a href="/david/blog/">billets de blog</a> qui ont été rédigés de 2004 (!) à 2019
  585. ou les <a href="/david/stream/">entrées de journaux</a> relativement
  586. régulières entre 2009 et 2019.
  587. </p>
  588. <p>
  589. <em>
  590. Notez qu’avec un tel historique, certaines informations sont obsolètes et/ou
  591. plus cautionnées.
  592. </em>
  593. </p>
  594. <form action="/david/recherche/" method="get">
  595. <fieldset>
  596. <legend>Recherche</legend>
  597. <label for="input-search">Termes de votre recherche :</label>
  598. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  599. <input type="submit" value="Chercher">
  600. <p id="indexation-infos">
  601. <small>
  602. Seuls les contenus de ces 8 dernières années sont indexés.
  603. </small>
  604. </p>
  605. </fieldset>
  606. </form>
  607. <aside>
  608. <theme-toggle></theme-toggle>
  609. </aside>
  610. </article>
  611. <hr>
  612. <footer>
  613. <p>
  614. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  615. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  616. <a href="http://larlet.com"
  617. title="Go to my English profile"
  618. data-instant>Pro</a>
  619. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  620. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  621. </p>
  622. <template id="theme-selector">
  623. <form>
  624. <style type="text/css">
  625. fieldset div {
  626. text-align: center;
  627. }
  628. </style>
  629. <fieldset>
  630. <legend>Thème</legend>
  631. <div>
  632. <label>
  633. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  634. Auto
  635. </label>
  636. <label>
  637. <input type="radio" value="dark" name="chosen-color-scheme">
  638. Foncé
  639. </label>
  640. <label>
  641. <input type="radio" value="light" name="chosen-color-scheme">
  642. Clair
  643. </label>
  644. </div>
  645. </fieldset>
  646. </form>
  647. </template>
  648. </footer>
  649. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  650. <script>
  651. class ThemeToggle extends HTMLElement {
  652. constructor() {
  653. super()
  654. const themeSelectorTemplate = document.querySelector('#theme-selector')
  655. const form = themeSelectorTemplate.content.firstElementChild
  656. this.attachShadow({ mode: 'open' })
  657. this.shadowRoot.appendChild(form.cloneNode(true))
  658. }
  659. connectedCallback() {
  660. const form = this.shadowRoot.querySelector('form')
  661. form.addEventListener('change', (e) => {
  662. const chosenColorScheme = e.target.value
  663. localStorage.setItem('theme', chosenColorScheme)
  664. toggleTheme(chosenColorScheme)
  665. })
  666. const selectedTheme = localStorage.getItem('theme')
  667. if (selectedTheme && selectedTheme !== 'undefined') {
  668. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  669. }
  670. }
  671. }
  672. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  673. window.addEventListener('load', () => {
  674. let colorsLayer = undefined
  675. let hasDarkRules = false
  676. for (const styleSheet of Array.from(document.styleSheets)) {
  677. let mediaRules = []
  678. for (const layerRule of styleSheet.cssRules) {
  679. if (!(layerRule instanceof CSSLayerBlockRule)) {
  680. continue
  681. }
  682. if (layerRule.name === 'colors') {
  683. colorsLayer = layerRule
  684. }
  685. for (const cssRule of layerRule.cssRules) {
  686. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  687. continue
  688. }
  689. // WARNING: Safari does not have/supports `conditionText`.
  690. if (cssRule.conditionText) {
  691. if (cssRule.conditionText !== prefersColorSchemeDark) {
  692. continue
  693. }
  694. } else {
  695. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  696. continue
  697. }
  698. }
  699. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  700. }
  701. }
  702. // WARNING: do not try to insert a Rule to a styleSheet you are
  703. // currently iterating on, otherwise the browser will be stuck
  704. // in a infinite loop…
  705. for (const mediaRule of mediaRules) {
  706. // Safari requires the `0` second parameter (even if default).
  707. colorsLayer.insertRule(mediaRule.cssText, 0)
  708. hasDarkRules = true
  709. }
  710. }
  711. if (hasDarkRules) {
  712. if ('customElements' in window && !customElements.get('theme-toggle')) {
  713. customElements.define('theme-toggle', ThemeToggle)
  714. }
  715. }
  716. })
  717. </script>
  718. </body>
  719. </html>