Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

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