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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  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. Endorphines
  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="J’ai remis les pieds sur des skis (de fond). J’ai une piste à 150 mètres de chez moi et c’était probablement les plus critiques. Je me suis déjà tordu la cheville plusieurs fois sur ce trajet. Mais une fois dans les traces les sensations étaient bonnes et l’entorse (tapeée) n’a pas couiné. Le mollet un peu plus mais je me demande si ce n’est pas à force de compenser en boitant.">
  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. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Endorphines</h1>
  136. <p>Le <time datetime="2024-01-16">16 janvier 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/01/15/"
  143. title="Publication précédente : Rééducation">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/01/17/"
  150. title="Publication suivante : Vieillesse">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>J’ai remis les pieds sur des skis (de fond). J’ai une piste à 150&nbsp;mètres de chez moi et c’était probablement les plus critiques. Je me suis déjà tordu la cheville plusieurs fois sur ce trajet. Mais une fois dans les traces les sensations étaient bonnes et l’entorse (<em>tape</em>ée) n’a pas couiné. Le mollet un peu plus mais je me demande si ce n’est pas à force de compenser en&nbsp;boitant.</p>
  154. <p>Cela conclus peut-être mon journal de&nbsp;chialage.</p>
  155. <a href="#hr-33" title="Lien vers cette section de la page"><hr id="hr-33" /></a>
  156. <p>Hier soir, je travaillais sur la <a href="/david/">page d’accueil</a> en voulant donner davantage d’espace à la recherche qui passe également en pied de page (qui est un&nbsp;chantier).</p>
  157. <p>Et puis ce matin <a data-link-domain="nicolas-hoizey.com" href="https://nicolas-hoizey.com/">Nicolas H.</a> m’indique que mon flux est cassé. Je répare cette histoire de caractère invisible qui casse le <em>parsing</em> du contenu HTML (intégrer une <a data-link-domain="validator.w3.org" href="https://validator.w3.org/feed/">validation</a> pourrait s’avérer être utile). Et je pousse les modifications qui contiennent la page d’accueil en chantier. Tant pis, au moins c’est&nbsp;fait.</p>
  158. <p>Il y a dorénavant 54&nbsp;liens sur cette page, j’ai besoin de revoir des choses mais au moins il commence à y avoir une cohérence sur le thème de l’année et ses pages générées. Le chemin continue de me donner le&nbsp;sourire.</p>
  159. <p>Je constate au passage que la <a href="/david/recherche/">page de recherche</a> fait 2&#8239;Mo (700&#8239;Ko à télécharger), désindexer des années ou explorer des <a data-link-domain="pagefind.app" href="https://pagefind.app/">alternatives</a>&#8239;? J’aime bien me dire que mes écrits de ces 8&nbsp;dernières années tiennent sur&nbsp;2&nbsp;disquettes.</p>
  160. <a href="#hr-34" title="Lien vers cette section de la page"><hr id="hr-34" /></a>
  161. <p>Vidéo du jour&nbsp;: <a data-link-domain="video.blast-info.fr" href="https://video.blast-info.fr/w/9885ed4e-386b-4b3b-bcb5-dc2e454939e6">DRY JANUARY, ÉCOLOGIE&nbsp;: POURQUOI LE POUVOIR A-T-IL SI PEUR DE LA SOBRIÉTÉ&#8239;?</a> (désolé pour les cris, ça semble être le style de&nbsp;BLAST&nbsp;🙃).</p>
  162. <a href="#hr-35" title="Lien vers cette section de la page"><hr id="hr-35" /></a>
  163. <p>On creuse les <a data-link-domain="MDN" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap"><code>importmap</code></a> pour <a data-link-domain="umap-project.org" href="https://umap-project.org/fr/">uMap</a> en ce moment. Un peu contraints par un passage aux modules JS qui supporte mal la minification + invalidation du cache. Il y a des choses intéressantes dans les possibilités que ça offre mais c’est du&nbsp;Baseline™2023.</p>
  164. <p>Si un produit accueille moins de personnes lors de mon départ que lors de mon arrivée, j’ai probablement mal fait mon travail&#8239;? <em>À&nbsp;méditer.</em></p>
  165. <blockquote lang="en">
  166. <p>If the new software no longer runs on old hardware, it is <mark>worse</mark> than the old&nbsp;software.</p>
  167. <p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/" hreflang="en"
  168. title="Consultation de l’article (anglais)">Notes from “An approach to computing and sustainability inspired from permaculture” by Devine LuLinvega</a>
  169. <a href="/david/cache/2024/1f40a33f9c57a16d420eb0868a129e96/" hreflang="en"
  170. data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
  171. data-source="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/"
  172. data-date="2024-01-15"
  173. data-favicon="https://blog.jim-nielsen.com/favicon.ico"
  174. data-domain="blog.jim-nielsen.com"
  175. ><svg xmlns="http://www.w3.org/2000/svg"
  176. width="24" height="24" viewBox="0 0 24 24" fill="none"
  177. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  178. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  179. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  180. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  181. </svg>
  182. <span class="sr-only">[archive]</span></a></em></cite></p>
  183. </blockquote>
  184. <nav>
  185. <p>
  186. <a href="/david/2024/addiction/"
  187. title="Liste de tous les articles 2024 associés à cette étiquette"
  188. rel="tag">#addiction</a>
  189. <a href="/david/2024/evolution/"
  190. title="Liste de tous les articles 2024 associés à cette étiquette"
  191. rel="tag">#évolution</a>
  192. <a href="/david/2024/technique/"
  193. title="Liste de tous les articles 2024 associés à cette étiquette"
  194. rel="tag">#technique</a>
  195. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  196. </p>
  197. </nav>
  198. <nav>
  199. <p>
  200. <a rel="prev"
  201. href="/david/2024/01/15/"
  202. title="Publication précédente : Rééducation">← Précédent</a> •
  203. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  204. • <a rel="next"
  205. href="/david/2024/01/17/"
  206. title="Publication suivante : Vieillesse">Suivant →</a>
  207. </p>
  208. </nav>
  209. <form action="/david/recherche/" method="get">
  210. <fieldset>
  211. <legend>Recherche</legend>
  212. <label for="input-search">Termes de votre recherche :</label>
  213. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  214. <input type="submit" value="Chercher">
  215. <p id="indexation-infos">
  216. <small>
  217. Seuls les contenus de ces 8 dernières années sont indexés.
  218. </small>
  219. </p>
  220. </fieldset>
  221. </form>
  222. <aside>
  223. <theme-toggle></theme-toggle>
  224. </aside>
  225. </article>
  226. <hr>
  227. <footer>
  228. <p>
  229. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  230. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  231. <a href="http://larlet.com"
  232. title="Go to my English profile"
  233. data-instant>Pro</a>
  234. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  235. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  236. </p>
  237. <template id="theme-selector">
  238. <form>
  239. <style type="text/css">
  240. fieldset div {
  241. text-align: center;
  242. }
  243. </style>
  244. <fieldset>
  245. <legend>Thème</legend>
  246. <div>
  247. <label>
  248. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  249. Auto
  250. </label>
  251. <label>
  252. <input type="radio" value="dark" name="chosen-color-scheme">
  253. Foncé
  254. </label>
  255. <label>
  256. <input type="radio" value="light" name="chosen-color-scheme">
  257. Clair
  258. </label>
  259. </div>
  260. </fieldset>
  261. </form>
  262. </template>
  263. </footer>
  264. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  265. <script>
  266. class ThemeToggle extends HTMLElement {
  267. constructor() {
  268. super()
  269. const themeSelectorTemplate = document.querySelector('#theme-selector')
  270. const form = themeSelectorTemplate.content.firstElementChild
  271. this.attachShadow({ mode: 'open' })
  272. this.shadowRoot.appendChild(form.cloneNode(true))
  273. }
  274. connectedCallback() {
  275. const form = this.shadowRoot.querySelector('form')
  276. form.addEventListener('change', (e) => {
  277. const chosenColorScheme = e.target.value
  278. localStorage.setItem('theme', chosenColorScheme)
  279. toggleTheme(chosenColorScheme)
  280. })
  281. const selectedTheme = localStorage.getItem('theme')
  282. if (selectedTheme && selectedTheme !== 'undefined') {
  283. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  284. }
  285. }
  286. }
  287. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  288. window.addEventListener('load', () => {
  289. let colorsLayer = undefined
  290. let hasDarkRules = false
  291. for (const styleSheet of Array.from(document.styleSheets)) {
  292. let mediaRules = []
  293. for (const layerRule of styleSheet.cssRules) {
  294. if (!(layerRule instanceof CSSLayerBlockRule)) {
  295. continue
  296. }
  297. if (layerRule.name === 'colors') {
  298. colorsLayer = layerRule
  299. }
  300. for (const cssRule of layerRule.cssRules) {
  301. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  302. continue
  303. }
  304. // WARNING: Safari does not have/supports `conditionText`.
  305. if (cssRule.conditionText) {
  306. if (cssRule.conditionText !== prefersColorSchemeDark) {
  307. continue
  308. }
  309. } else {
  310. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  311. continue
  312. }
  313. }
  314. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  315. }
  316. }
  317. // WARNING: do not try to insert a Rule to a styleSheet you are
  318. // currently iterating on, otherwise the browser will be stuck
  319. // in a infinite loop…
  320. for (const mediaRule of mediaRules) {
  321. // Safari requires the `0` second parameter (even if default).
  322. colorsLayer.insertRule(mediaRule.cssText, 0)
  323. hasDarkRules = true
  324. }
  325. }
  326. if (hasDarkRules) {
  327. if ('customElements' in window && !customElements.get('theme-toggle')) {
  328. customElements.define('theme-toggle', ThemeToggle)
  329. }
  330. }
  331. })
  332. </script>
  333. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  334. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  335. <script>
  336. tippy('[data-tippy]', {
  337. content(reference) {
  338. reference.addEventListener('click', (e) => e.preventDefault())
  339. return `
  340. <h3 lang="fr">
  341. <img src="${reference.dataset.favicon}" loading="lazy">
  342. <a href="${reference.dataset.source}"
  343. >Article sur ${reference.dataset.domain}</a></h3>
  344. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  345. <div class="tippy-links" lang="fr">
  346. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  347. </div>
  348. `
  349. },
  350. allowHTML: true,
  351. interactive: true,
  352. delay: [150, 700],
  353. hideOnClick: false
  354. })
  355. </script>
  356. </body>
  357. </html>