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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
  1. <!DOCTYPE html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Étiquette #parentalité
  14. — David Larlet</title>
  15. <meta name="description" content="Publications relatives au tag #parentalité">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2024-02-03.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <style type="text/css">
  106. details[open] summary {
  107. display: none;
  108. }
  109. </style>
  110. <body data-instant-intensity="viewport-all">
  111. <article>
  112. <header>
  113. <hgroup>
  114. <h1>#parentalité</h1>
  115. <p>Publications relatives à cette étiquette</p>
  116. </hgroup>
  117. </header>
  118. <nav>
  119. <p>
  120. <a href="/david/" title="Aller à l’accueil">
  121. Accueil</a>
  122. <a rel="tags"
  123. href="/david/2024/#tags"
  124. title="Liste de toutes les étiquettes">
  125. Étiquettes</a>
  126. <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a>
  127. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  128. </p>
  129. </nav>
  130. <h2>
  131. <a href="/david/2024/02/26/" title="Lien permanent vers cet article">Galaxie</a> <time datetime="2024-02-26">26 février 2024</time>
  132. </h2>
  133. <p>Anecdote du jour qui met le sourire de bon&nbsp;matin.</p>
  134. <figure>
  135. <a href="/static/david/2024/2024-02-26-neige-galaxie.jpg"
  136. title="Cliquer pour une version haute résolution">
  137. <img
  138. src="/static/david/2024/2024-02-26-neige-galaxie.jpg"
  139. width="4032" height="3024"
  140. srcset="/static/david/2024/2024-02-26-neige-galaxie.jpg 4032w, /static/david/2024/2024-02-26-neige-galaxie_660x440.jpg 660w, /static/david/2024/2024-02-26-neige-galaxie_990x660.jpg 990w, /static/david/2024/2024-02-26-neige-galaxie_1320x880.jpg 1320w"
  141. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  142. loading="lazy"
  143. decoding="async"
  144. alt="De la neige qui tombe à gros flocon.">
  145. </a>
  146. <figcaption>L’espace d’un instant, par la&nbsp;fenêtre.</figcaption>
  147. </figure>
  148. <blockquote>
  149. <p>— Oh la belle neige&#8239;!<br />
  150. —&nbsp;Il pleut des étoiles, la galaxie est en train de tomber.<br />
  151. —&nbsp;❤️</p>
  152. </blockquote>
  153. <a href="#hr-89" title="Lien vers cette section de la page"><hr id="hr-89" /></a>
  154. <blockquote lang="en">
  155. <p>CSS Variable Groups is a way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party&nbsp;components.</p>
  156. <p><cite><em><a data-link-domain="lea.verou.me" href="https://lea.verou.me/docs/var-groups/" hreflang="en"
  157. title="Consultation de l’article (anglais)">Proposal: CSS Variable Groups</a>
  158. <a href="/david/cache/2024/0cc2e9c6b29f8326b2ff628f64e22888/" hreflang="en"
  159. data-tippy data-description="CSS Variable Groups is a way to define multiple properties under the same namespace"
  160. data-source="https://lea.verou.me/docs/var-groups/"
  161. data-date="2024-02-27"
  162. data-favicon="https://lea.verou.me/mark.svg"
  163. data-domain="lea.verou.me"
  164. ><svg xmlns="http://www.w3.org/2000/svg"
  165. width="24" height="24" viewBox="0 0 24 24" fill="none"
  166. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  167. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  168. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  169. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  170. </svg>
  171. <span class="sr-only">[archive]</span></a></em></cite></p>
  172. </blockquote>
  173. <p>Heureusement que Lea Verou <a href="/david/2024/02/18/" title="In·directions">me lit</a> et traduit ça en proposition de <a data-link-domain="github.com" href="https://github.com/w3c/csswg-drafts/issues/9992">standardisation</a> en quelques jours au lieu de chialer&nbsp;😅🙇. Trop&nbsp;hâte&#8239;!</p>
  174. <a href="#hr-90" title="Lien vers cette section de la page"><hr id="hr-90" /></a>
  175. <blockquote lang="en">
  176. <p><mark>Maybe that’s ok.</mark> The amount of power you give plugin authors is a delicate balance. Giving them too much power could impact the stability of your project. But giving them too little power makes it hard for them to solve their problems — in that case you might as well not have&nbsp;plugins.</p>
  177. <p><cite><em><a data-link-domain="css-tricks.com" href="https://css-tricks.com/designing-a-javascript-plugin-system/" hreflang="en"
  178. title="Consultation de l’article (anglais)">Designing a JavaScript Plugin System</a>
  179. <a href="/david/cache/2024/d9c30865dde8c88394ba054836a18ae3/" hreflang="en"
  180. data-tippy data-description="WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too."
  181. data-source="https://css-tricks.com/designing-a-javascript-plugin-system/"
  182. data-date="2024-02-27"
  183. data-favicon="https://css-tricks.com/favicon.svg"
  184. data-domain="css-tricks.com"
  185. ><svg xmlns="http://www.w3.org/2000/svg"
  186. width="24" height="24" viewBox="0 0 24 24" fill="none"
  187. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  188. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  189. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  190. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  191. </svg>
  192. <span class="sr-only">[archive]</span></a></em></cite></p>
  193. </blockquote>
  194. <p>Problématique du jour&nbsp;: comment concevoir un système de <em>plugins</em> qui soit le bon compromis entre flexibilité et stabilité&#8239;? Ce n’est pas si évident, encore plus dans un écosystème aussi évolutif que&nbsp;JavaScript.</p>
  195. <nav>
  196. <p>
  197. <a href="/david/2024/parentalite/"
  198. title="Liste de tous les articles 2024 associés à cette étiquette"
  199. rel="tag">#parentalité</a>
  200. <a href="/david/2024/poesie/"
  201. title="Liste de tous les articles 2024 associés à cette étiquette"
  202. rel="tag">#poésie</a>
  203. <a href="/david/2024/solastalgia/"
  204. title="Liste de tous les articles 2024 associés à cette étiquette"
  205. rel="tag">#solastalgia</a>
  206. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  207. </p>
  208. </nav>
  209. <h2>
  210. <a href="/david/2024/01/28/" title="Lien permanent vers cet article">Jour&nbsp;2</a> <time datetime="2024-01-28">28 janvier 2024</time>
  211. </h2>
  212. <p>Même avec la nourriture suspendue, les souris on fait un sacré raffut. Elles devaient elles aussi avoir trop chaud. Après avoir dormi avec 2&nbsp;fenêtres ouvertes, il fait tout de même 18°C au réveil. Parfait pour notre gruau de camping (seconde tradition avec les nouilles instantanées), cette fois à la neige&nbsp;fondue.</p>
  213. <p>On prend le temps d’aller faire un petit tour à skis sur le lac car c’est une première pour l’enfant. On suit des traces de lapins qui nous mènent à un point d’eau liquide qui est un point de concentration de la faune locale. Si on avait su avant, on aurait peut-être pris le risque de s’en approcher avec nos gourdes. C’est peut-être mieux de ne pas l’avoir su&nbsp;avant.</p>
  214. <figure>
  215. <a href="/static/david/2024/2024-01-28-lac-foret.jpg"
  216. title="Cliquer pour une version haute résolution">
  217. <img
  218. src="/static/david/2024/2024-01-28-lac-foret.jpg"
  219. width="3024" height="4032"
  220. srcset="/static/david/2024/2024-01-28-lac-foret.jpg 3024w, /static/david/2024/2024-01-28-lac-foret_660x440.jpg 660w, /static/david/2024/2024-01-28-lac-foret_990x660.jpg 990w, /static/david/2024/2024-01-28-lac-foret_1320x880.jpg 1320w"
  221. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  222. loading="lazy"
  223. decoding="async"
  224. alt="Un lac gelé avec la forêt en arrière plan.">
  225. </a>
  226. <figcaption>Une bonne ambiance hivernale mais sans la fraîcheur de la&nbsp;saison.</figcaption>
  227. </figure>
  228. <p>Une fois le matériel rangé, on repart. Cette fois j’ai resserré le système de tractage improvisé avec des tuyaux en PVC de la <em>pulka</em>. Et j’ai aussi troqué les peaux complètes pour des demi-peaux, ça me permet de glisser un peu plus dans les descentes mais quand même pas trop. Difficile de ne pas forcer sur la cheville lorsqu’on est contraint par l’étroitesse du chemin. Bon puis il y a vraiment trop d’arbres dans ces&nbsp;forêts&nbsp;:p.</p>
  229. <p>On s’amuse vraiment sur ce retour et je suis obligé d’imposer des pauses pour ne pas arriver dans le même état que la veille (et me faire semer). L’enfant serait partant pour ne pas s’arrêter du tout, ça fait plaisir. On prend confiance et on enchaîne les bosses. Nos seules traces de la veille aident pas mal. Les conditions sont vraiment chaudes pour la&nbsp;saison.</p>
  230. <figure>
  231. <a href="/static/david/2024/2024-01-28-neige-collante.jpg"
  232. title="Cliquer pour une version haute résolution">
  233. <img
  234. src="/static/david/2024/2024-01-28-neige-collante.jpg"
  235. width="4032" height="3024"
  236. srcset="/static/david/2024/2024-01-28-neige-collante.jpg 4032w, /static/david/2024/2024-01-28-neige-collante_660x440.jpg 660w, /static/david/2024/2024-01-28-neige-collante_990x660.jpg 990w, /static/david/2024/2024-01-28-neige-collante_1320x880.jpg 1320w"
  237. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  238. loading="lazy"
  239. decoding="async"
  240. alt="De la neige qui pend d’un arbre.">
  241. </a>
  242. <figcaption>Lorsqu’on me demande si la neige était&nbsp;collante.</figcaption>
  243. </figure>
  244. <p>Nous sommes progressivement rejoints par les skieur·euses qui descendent à travers les arbres et à une centaine de mètres de la voiture, il y a un passage plus difficile que les autres&nbsp;: une pente qui arrive sur un pont. On passe sur le côté pour être retenus par la neige fraîche mais la <em>pulka</em> décide de faire le drapeau et de prendre la «&nbsp;piste&nbsp;» tapée principale. J’essaye de la rattraper tant bien que mal tout en attendant / prenant soin de l’enfant et je me retrouve dans le décor. Encore. Ce n’est pas tant la chute que de forcer pour s’extraire de la neige tout en étant harnaché et les skis empêtrés dans les arbres qui me fait forcer sur les mauvais tendons… si près du but c’est&nbsp;rageant&nbsp;😔.</p>
  245. <p>Une sortie haute en émotions. Je vais maintenant pouvoir prendre le temps de soigner cette <a href="/david/2024/01/09/" title="Blessure">blessure</a>&nbsp;correctement.</p>
  246. <nav>
  247. <p>
  248. <a href="/david/2024/experience/"
  249. title="Liste de tous les articles 2024 associés à cette étiquette"
  250. rel="tag">#expérience</a>
  251. <a href="/david/2024/foret/"
  252. title="Liste de tous les articles 2024 associés à cette étiquette"
  253. rel="tag">#forêt</a>
  254. <a href="/david/2024/parentalite/"
  255. title="Liste de tous les articles 2024 associés à cette étiquette"
  256. rel="tag">#parentalité</a>
  257. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  258. </p>
  259. </nav>
  260. <h2>
  261. <a href="/david/2024/01/27/" title="Lien permanent vers cet article">Jour&nbsp;1</a> <time datetime="2024-01-27">27 janvier 2024</time>
  262. </h2>
  263. <p>De la pluie verglaçante depuis 2&nbsp;jours. Une cheville pas encore opérationnelle. Mais de l’envie et une réservation depuis deux mois pour une première sortie hivernale en refuge. Ensemble. La route pour y aller est déjà épique et des flocons gros comme des pastèques s’écrasent sur le pare-brise. Il est rare au Québec de suivre un <em>pickup</em> qui ne dépasse pas les 70&#8239;km/h sur&nbsp;l’autoroute.</p>
  264. <p>C’est aussi la première sortie pour la <em>pulka</em> ramenée de France cet été. Le temps de charger et de se préparer, la neige est déjà moins intense. Néanmoins, dès les premières centaines de mètres, je sens bien que ça va être galère. La montée est vraiment pentue et les skis-raquettes de l’enfant ne sont pas adaptés à ces conditions ce qui le rend <del>pénible</del> ronchon. De mon côté, avec les peaux complètes ça passe mais je force énormément car je dois bien avoir 35&#8239;kg à tracter derrière. On fait au moins deux kilomètres comme ça… avant de se rendre compte que l’on est sur la montée de ski de randonnée de la Montagne&nbsp;Noire&#8239;!</p>
  265. <figure>
  266. <a href="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  267. title="Cliquer pour une version haute résolution">
  268. <img
  269. src="/static/david/2024/2024-01-27-enfant-qui-skie.jpg"
  270. width="3024" height="4032"
  271. srcset="/static/david/2024/2024-01-27-enfant-qui-skie.jpg 3024w, /static/david/2024/2024-01-27-enfant-qui-skie_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-qui-skie_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-qui-skie_1320x880.jpg 1320w"
  272. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  273. loading="lazy"
  274. decoding="async"
  275. alt="Un enfant en train de skier sur un chemin.">
  276. </a>
  277. <figcaption>Avant que tout ne&nbsp;dérape.</figcaption>
  278. </figure>
  279. <p>Grosse erreur d’orientation qui nous coûte cher&nbsp;: impossible de descendre par cette montée et couper par la forêt serait très hasardeux, sans compter mon état. L’heure tourne et on finit par descendre en ayant déchaussé tous les deux. Deux paires de skis en plus à retenir à bout de bras en ayant le choix entre un chemin de 30&nbsp;cm de large tapé qui glisse ou un mètre de poudreuse tout autour. C’est un peu casse patte, juste ce qu’il me fallait pour une rééducation&nbsp;active&nbsp;😬.</p>
  280. <figure>
  281. <a href="/static/david/2024/2024-01-27-attache-pulka.jpg"
  282. title="Cliquer pour une version haute résolution">
  283. <img
  284. src="/static/david/2024/2024-01-27-attache-pulka.jpg"
  285. width="2320" height="3088"
  286. srcset="/static/david/2024/2024-01-27-attache-pulka.jpg 2320w, /static/david/2024/2024-01-27-attache-pulka_660x440.jpg 660w, /static/david/2024/2024-01-27-attache-pulka_990x660.jpg 990w, /static/david/2024/2024-01-27-attache-pulka_1320x880.jpg 1320w"
  287. sizes="min(100vw, calc(100vh * 2320 / 3088))"
  288. loading="lazy"
  289. decoding="async"
  290. alt="La pulka visible depuis mon entre-jambe.">
  291. </a>
  292. <figcaption>Un point de vue&nbsp;discutable.</figcaption>
  293. </figure>
  294. <p>Quasi-retour au point de départ, à deux doigts d’abandonner vue l’énergie que l’on vient de dépenser&nbsp;: <q lang="fr">c’est pas la grosse marrade</q>. Une pause bienvenue et le chemin loupé qui semble accueillant me font hésiter tout de même. Je prends finalement la décision d’y aller car dans mon souvenir c’est accessible (si on ne se trompe pas de sentier…). Prise de risque assez élevée au passage, il ne faut pas d’autres erreurs ou problèmes sur le trajet ou on va finir à la frontale (au mieux). Difficile de savoir jusqu’où est-ce que ça va être tracé&nbsp;aussi.</p>
  295. <p>Ce nouveau chemin est beaucoup plus adapté à notre niveau (de forme). Le système d’attache de la <em>pulka</em> est loin d’être optimal mais ça passe, même entre les arbres. L’enfant prend confiance et s’amuse dans les descentes. On arrive enfin au refuge sans encombres, il est 15&#8239;h passé et on n’a pas mangé, à peine bu 200&nbsp;ml depuis le départ… il va falloir recharger les corps avant demain sinon ça va&nbsp;piquer.</p>
  296. <figure>
  297. <a href="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  298. title="Cliquer pour une version haute résolution">
  299. <img
  300. src="/static/david/2024/2024-01-27-dessins-cartes.jpg"
  301. width="3024" height="4032"
  302. srcset="/static/david/2024/2024-01-27-dessins-cartes.jpg 3024w, /static/david/2024/2024-01-27-dessins-cartes_660x440.jpg 660w, /static/david/2024/2024-01-27-dessins-cartes_990x660.jpg 990w, /static/david/2024/2024-01-27-dessins-cartes_1320x880.jpg 1320w"
  303. sizes="min(100vw, calc(100vh * 3024 / 4032))"
  304. loading="lazy"
  305. decoding="async"
  306. alt="Des cartes dessinées à la bougie visible en fond.">
  307. </a>
  308. <figcaption>Le dessin à la bougie, c’est mieux à&nbsp;deux.</figcaption>
  309. </figure>
  310. <p>Heureusement, cet endroit est assez fabuleux et il y a une ambiance brumeuse qui lui donne un aspect féérique. Une fois repus, on va faire un tour sur le lac en contrebas. Il sautille sur le chemin (moi pas) et semble déjà avoir oublié les péripéties de la matinée. On passe une bonne soirée à faire des cadavre-exquis et à dessiner des cartes. Il fait 27°C dans le refuge, on supporte nos caleçons mais c’est un peu limite pour aller chercher la neige à faire&nbsp;fondre&#8239;!</p>
  311. <figure>
  312. <a href="/static/david/2024/2024-01-27-enfant-lac.jpg"
  313. title="Cliquer pour une version haute résolution">
  314. <img
  315. src="/static/david/2024/2024-01-27-enfant-lac.jpg"
  316. width="4032" height="3024"
  317. srcset="/static/david/2024/2024-01-27-enfant-lac.jpg 4032w, /static/david/2024/2024-01-27-enfant-lac_660x440.jpg 660w, /static/david/2024/2024-01-27-enfant-lac_990x660.jpg 990w, /static/david/2024/2024-01-27-enfant-lac_1320x880.jpg 1320w"
  318. sizes="min(100vw, calc(100vh * 4032 / 3024))"
  319. loading="lazy"
  320. decoding="async"
  321. alt="Un enfant sur un lac gelé (le lac, pas l’enfant).">
  322. </a>
  323. <figcaption>Un enfant sur un lac gelé (le lac, pas l’enfant). Il est 17h17. Je crois que j’aime de plus en plus les photos qui ont du&nbsp;grain.</figcaption>
  324. </figure>
  325. <p>Vu le bruit que font les souris alors qu’il y a encore de la lumière, la nuit risque de ne pas être de tout repos… On s’endort au son du poêle qui&nbsp;craque.</p>
  326. <nav>
  327. <p>
  328. <a href="/david/2024/experience/"
  329. title="Liste de tous les articles 2024 associés à cette étiquette"
  330. rel="tag">#expérience</a>
  331. <a href="/david/2024/foret/"
  332. title="Liste de tous les articles 2024 associés à cette étiquette"
  333. rel="tag">#forêt</a>
  334. <a href="/david/2024/parentalite/"
  335. title="Liste de tous les articles 2024 associés à cette étiquette"
  336. rel="tag">#parentalité</a>
  337. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  338. </p>
  339. </nav>
  340. <h2>
  341. <a href="/david/2024/01/20/" title="Lien permanent vers cet article">Extinction</a> <time datetime="2024-01-20">20 janvier 2024</time>
  342. </h2>
  343. <blockquote lang="en">
  344. <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement&nbsp;metrics.</p>
  345. <p>One important thing to note; <mark>websites aren’t extinct.</mark> In fact, you’re on one now! Uploading your own words is ancient technology but still&nbsp;works.</p>
  346. <p><cite><em><a data-link-domain="daverupert.com" href="https://daverupert.com/2024/01/where-have-all-the-websites-gone/" hreflang="en"
  347. title="Consultation de l’article (anglais)">Where have all the flowers gone?</a>
  348. <a href="/david/cache/2024/7136e0810bfa42c4a9ca798a55cd2d53/" hreflang="en"
  349. data-tippy data-description="A post from Jason Velazquez called “Where have all the websites gone?” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos."
  350. data-source="https://daverupert.com/2024/01/where-have-all-the-websites-gone/"
  351. data-date="2024-01-19"
  352. data-favicon="https://daverupert.com/favicon.ico"
  353. data-domain="daverupert.com"
  354. ><svg xmlns="http://www.w3.org/2000/svg"
  355. width="24" height="24" viewBox="0 0 24 24" fill="none"
  356. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  357. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  358. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  359. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  360. </svg>
  361. <span class="sr-only">[archive]</span></a></em></cite></p>
  362. </blockquote>
  363. <p>En réponse à <q lang="en"><a data-link-domain="fromjason.xyz" href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/" hreflang="en"
  364. title="Consultation de l’article (anglais)">Where have all the websites gone?</a>
  365. <a href="/david/cache/2024/c3272392d462da90874d32841e5caac8/" hreflang="en"
  366. data-tippy data-description="It feels like all the cool websites from the late 2000s are gone. But maybe we are looking at this the wrong way. Maybe it is us who vanished."
  367. data-source="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/"
  368. data-date="2024-01-09"
  369. data-favicon="https://www.fromjason.xyz/img/favicon.png"
  370. data-domain="fromjason.xyz"
  371. ><svg xmlns="http://www.w3.org/2000/svg"
  372. width="24" height="24" viewBox="0 0 24 24" fill="none"
  373. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  374. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  375. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  376. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  377. </svg>
  378. <span class="sr-only">[archive]</span></a></q> que j’ai <a href="/david/2024/01/10/#hr-24">déjà cité</a>. Peut-être que la capacité à publier est toujours là mais que nous avons <a href="/david/2024/01/12/#hr-27">trop changé</a> pour être capables de perdurer dans cette pratique. 2024&nbsp;pourrait me faire mentir car je vois une certaine effervescence dans mon agrégateur. On va bien voir si ça dure. On va bien voir si <em>je</em>&nbsp;dure.</p>
  379. <p><em>Guidé par le besoin, je suis en train d’automatiser des ancres sur mes <code>&lt;hr&gt;</code>, fausse bonne idée&#8239;? En affinant un peu le style ça me convient pour&nbsp;l’instant.</em></p>
  380. <a href="#hr-40" title="Lien vers cette section de la page"><hr id="hr-40" /></a>
  381. <blockquote>
  382. <p>public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML&nbsp;archives.</p>
  383. <p>public-inbox spawned around three main&nbsp;ideas:</p>
  384. <ul>
  385. <li>Publicly accessible and archived communication is essential to Free Software&nbsp;development.</li>
  386. <li>Contributing to Free Software projects should not require the use of non-Free services or&nbsp;software.</li>
  387. <li><mark>Graphical user interfaces should not be required for text-based communication.</mark> Users may have broken graphics drivers, limited eyesight, or be unable to afford modern&nbsp;hardware.</li>
  388. </ul>
  389. <p>public-inbox aims to be easy-to-deploy and manage; encouraging projects to run their own instances with minimal&nbsp;overhead.</p>
  390. <p><cite><em><a data-link-domain="public-inbox.org" href="https://public-inbox.org/README.html" hreflang="en"
  391. title="Consultation de l’article (anglais)">public-inbox - an &quot;archives first&quot; approach to mailing lists</a>
  392. <a href="/david/cache/2024/30b40ff8034212e070dc7daf2b9406e9/" hreflang="en"
  393. data-tippy data-description="public-inbox implements the sharing of an email inbox via git to complement or replace traditional mailing lists. Readers may read via NNTP, IMAP, POP3, Atom feeds or HTML archives."
  394. data-source="https://public-inbox.org/README.html"
  395. data-date="2024-01-19"
  396. data-favicon="https://public-inbox.org/favicon.ico"
  397. data-domain="public-inbox.org"
  398. ><svg xmlns="http://www.w3.org/2000/svg"
  399. width="24" height="24" viewBox="0 0 24 24" fill="none"
  400. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  401. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  402. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  403. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  404. </svg>
  405. <span class="sr-only">[archive]</span></a></em></cite></p>
  406. </blockquote>
  407. <p>D’une certaine manière, l’<a data-link-domain="github.com" href="https://github.com/jgm/pandoc/issues/9250">extinction de voix des un·es</a> fait mon bonheur de découverte aujourd’hui. J’espère que le réflexe ne sera pas de passer de <em>Google Groups</em> à <em>Microsoft Github Discussions</em> par&nbsp;commodité.</p>
  408. <a href="#hr-41" title="Lien vers cette section de la page"><hr id="hr-41" /></a>
  409. <blockquote>
  410. <p>… ça veut dire qu’en vrai, les droits humains, tu t’en fiches pas&nbsp;mal.</p>
  411. <p>Et que tu es juste <mark>un peu raciste</mark>.</p>
  412. <p><cite><em><a data-link-domain="emmaclit.com" href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture&nbsp;fronçaise</a></em></cite></p>
  413. </blockquote>
  414. <p>Voilà.</p>
  415. <a href="#hr-42" title="Lien vers cette section de la page"><hr id="hr-42" /></a>
  416. <figure>
  417. <a href="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
  418. title="Cliquer pour une version haute résolution">
  419. <img
  420. src="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg"
  421. width="3024" height="3024"
  422. srcset="/static/david/2024/2024-01-19-ski-de-fond-nocturne.jpg 3024w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_660x440.jpg 660w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_990x660.jpg 990w, /static/david/2024/2024-01-19-ski-de-fond-nocturne_1320x880.jpg 1320w"
  423. sizes="min(100vw, calc(100vh * 3024 / 3024))"
  424. loading="lazy"
  425. decoding="async"
  426. alt="Un enfant de dos dans des traces de ski de fond classique à la tombée du jour">
  427. </a>
  428. <figcaption>-16°C, rien de mieux pour démarrer une fin de semaine qu’une sortie ski dans notre jardin après&nbsp;l’école.</figcaption>
  429. </figure>
  430. <p>Cette photo est floue, c’est devenu tellement rare avec un téléphone (<em>OK&nbsp;Boomer</em>&nbsp;:p). Les couleurs étaient superbes et une fois les mains réchauffées c’était une ambiance très agréable. On n’a pas croisé grand monde. La rééducation active continue tranquillement son&nbsp;chemin.</p>
  431. <nav>
  432. <p>
  433. <a href="/david/2024/dependance/"
  434. title="Liste de tous les articles 2024 associés à cette étiquette"
  435. rel="tag">#dépendance</a>
  436. <a href="/david/2024/evolution/"
  437. title="Liste de tous les articles 2024 associés à cette étiquette"
  438. rel="tag">#évolution</a>
  439. <a href="/david/2024/parentalite/"
  440. title="Liste de tous les articles 2024 associés à cette étiquette"
  441. rel="tag">#parentalité</a>
  442. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  443. </p>
  444. </nav>
  445. <form action="/david/recherche/" method="get">
  446. <fieldset>
  447. <legend>Recherche</legend>
  448. <label for="input-search">Termes de votre recherche :</label>
  449. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  450. <input type="submit" value="Chercher">
  451. <p id="indexation-infos">
  452. <small>
  453. Seuls les contenus de ces 8 dernières années sont indexés.
  454. </small>
  455. </p>
  456. </fieldset>
  457. </form>
  458. <aside>
  459. <theme-toggle></theme-toggle>
  460. </aside>
  461. </article>
  462. <hr>
  463. <footer>
  464. <p>
  465. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  466. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  467. <a href="http://larlet.com"
  468. title="Go to my English profile"
  469. data-instant>Pro</a>
  470. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  471. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  472. </p>
  473. <template id="theme-selector">
  474. <form>
  475. <style type="text/css">
  476. fieldset div {
  477. text-align: center;
  478. }
  479. </style>
  480. <fieldset>
  481. <legend>Thème</legend>
  482. <div>
  483. <label>
  484. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  485. Auto
  486. </label>
  487. <label>
  488. <input type="radio" value="dark" name="chosen-color-scheme">
  489. Foncé
  490. </label>
  491. <label>
  492. <input type="radio" value="light" name="chosen-color-scheme">
  493. Clair
  494. </label>
  495. </div>
  496. </fieldset>
  497. </form>
  498. </template>
  499. </footer>
  500. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  501. <script>
  502. class ThemeToggle extends HTMLElement {
  503. constructor() {
  504. super()
  505. const themeSelectorTemplate = document.querySelector('#theme-selector')
  506. const form = themeSelectorTemplate.content.firstElementChild
  507. this.attachShadow({ mode: 'open' })
  508. this.shadowRoot.appendChild(form.cloneNode(true))
  509. }
  510. connectedCallback() {
  511. const form = this.shadowRoot.querySelector('form')
  512. form.addEventListener('change', (e) => {
  513. const chosenColorScheme = e.target.value
  514. localStorage.setItem('theme', chosenColorScheme)
  515. toggleTheme(chosenColorScheme)
  516. })
  517. const selectedTheme = localStorage.getItem('theme')
  518. if (selectedTheme && selectedTheme !== 'undefined') {
  519. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  520. }
  521. }
  522. }
  523. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  524. window.addEventListener('load', () => {
  525. let colorsLayer = undefined
  526. let hasDarkRules = false
  527. for (const styleSheet of Array.from(document.styleSheets)) {
  528. let mediaRules = []
  529. for (const layerRule of styleSheet.cssRules) {
  530. if (!(layerRule instanceof CSSLayerBlockRule)) {
  531. continue
  532. }
  533. if (layerRule.name === 'colors') {
  534. colorsLayer = layerRule
  535. }
  536. for (const cssRule of layerRule.cssRules) {
  537. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  538. continue
  539. }
  540. // WARNING: Safari does not have/supports `conditionText`.
  541. if (cssRule.conditionText) {
  542. if (cssRule.conditionText !== prefersColorSchemeDark) {
  543. continue
  544. }
  545. } else {
  546. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  547. continue
  548. }
  549. }
  550. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  551. }
  552. }
  553. // WARNING: do not try to insert a Rule to a styleSheet you are
  554. // currently iterating on, otherwise the browser will be stuck
  555. // in a infinite loop…
  556. for (const mediaRule of mediaRules) {
  557. // Safari requires the `0` second parameter (even if default).
  558. colorsLayer.insertRule(mediaRule.cssText, 0)
  559. hasDarkRules = true
  560. }
  561. }
  562. if (hasDarkRules) {
  563. if ('customElements' in window && !customElements.get('theme-toggle')) {
  564. customElements.define('theme-toggle', ThemeToggle)
  565. }
  566. }
  567. })
  568. </script>
  569. </body>
  570. </html>