Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

10 个月前
10 个月前
8 个月前
10 个月前
10 个月前
9 个月前
10 个月前
9 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
10 个月前
9 个月前
10 个月前
9 个月前
10 个月前
10 个月前
10 个月前
9 个月前
9 个月前
9 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
8 个月前
9 个月前
10 个月前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Endorphines</h1>
  138. <p>Le <time datetime="2024-01-16">16 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/15/"
  145. title="Publication précédente : Rééducation">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/01/17/"
  152. title="Publication suivante : Vieillesse">Suivant →</a>
  153. </p>
  154. </nav>
  155. <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>
  156. <p>Cela conclus peut-être mon journal de&nbsp;chialage.</p>
  157. <a href="#hr-33" title="Lien vers cette section de la page"><hr id="hr-33" /></a>
  158. <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>
  159. <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>
  160. <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>
  161. <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>
  162. <a href="#hr-34" title="Lien vers cette section de la page"><hr id="hr-34" /></a>
  163. <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>
  164. <a href="#hr-35" title="Lien vers cette section de la page"><hr id="hr-35" /></a>
  165. <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>
  166. <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>
  167. <blockquote lang="en">
  168. <p>If the new software no longer runs on old hardware, it is <mark>worse</mark> than the old&nbsp;software.</p>
  169. <p><cite><em><a data-link-domain="blog.jim-nielsen.com" href="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/" hreflang="en"
  170. title="Consultation de l’article (anglais)">Notes from “An approach to computing and sustainability inspired from permaculture” by Devine LuLinvega</a>
  171. <a href="/david/cache/2024/1f40a33f9c57a16d420eb0868a129e96/" hreflang="en"
  172. data-tippy data-description="Writing about the big beautiful mess that is making things for the world wide web."
  173. data-source="https://blog.jim-nielsen.com/2024/notes-from-computing-sustainably/"
  174. data-date="2024-01-15"
  175. data-favicon="https://blog.jim-nielsen.com/favicon.ico"
  176. data-domain="blog.jim-nielsen.com"
  177. ><svg xmlns="http://www.w3.org/2000/svg"
  178. width="24" height="24" viewBox="0 0 24 24" fill="none"
  179. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  180. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  181. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  182. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  183. </svg>
  184. <span class="sr-only">[archive]</span></a></em></cite></p>
  185. </blockquote>
  186. <nav>
  187. <p>
  188. <a href="/david/2024/addiction/"
  189. title="Liste de tous les articles 2024 associés à cette étiquette"
  190. rel="tag">#addiction</a>
  191. <a href="/david/2024/evolution/"
  192. title="Liste de tous les articles 2024 associés à cette étiquette"
  193. rel="tag">#évolution</a>
  194. <a href="/david/2024/technique/"
  195. title="Liste de tous les articles 2024 associés à cette étiquette"
  196. rel="tag">#technique</a>
  197. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  198. </p>
  199. </nav>
  200. <nav>
  201. <p>
  202. <a rel="prev"
  203. href="/david/2024/01/15/"
  204. title="Publication précédente : Rééducation">← Précédent</a> •
  205. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  206. • <a rel="next"
  207. href="/david/2024/01/17/"
  208. title="Publication suivante : Vieillesse">Suivant →</a>
  209. </p>
  210. </nav>
  211. <form action="/david/recherche/" method="get">
  212. <fieldset>
  213. <legend>Recherche</legend>
  214. <label for="input-search">Termes de votre recherche :</label>
  215. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  216. <input type="submit" value="Chercher">
  217. <p id="indexation-infos">
  218. <small>
  219. Seuls les contenus de ces 8 dernières années sont indexés.
  220. </small>
  221. </p>
  222. </fieldset>
  223. </form>
  224. <aside>
  225. <theme-toggle></theme-toggle>
  226. </aside>
  227. </article>
  228. <hr>
  229. <footer>
  230. <p>
  231. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  232. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  233. <a href="http://larlet.com"
  234. title="Go to my English profile"
  235. data-instant>Pro</a>
  236. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  237. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  238. </p>
  239. <template id="theme-selector">
  240. <form>
  241. <style type="text/css">
  242. fieldset div {
  243. text-align: center;
  244. }
  245. </style>
  246. <fieldset>
  247. <legend>Thème</legend>
  248. <div>
  249. <label>
  250. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  251. Auto
  252. </label>
  253. <label>
  254. <input type="radio" value="dark" name="chosen-color-scheme">
  255. Foncé
  256. </label>
  257. <label>
  258. <input type="radio" value="light" name="chosen-color-scheme">
  259. Clair
  260. </label>
  261. </div>
  262. </fieldset>
  263. </form>
  264. </template>
  265. </footer>
  266. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  267. <script>
  268. class ThemeToggle extends HTMLElement {
  269. constructor() {
  270. super()
  271. const themeSelectorTemplate = document.querySelector('#theme-selector')
  272. const form = themeSelectorTemplate.content.firstElementChild
  273. this.attachShadow({ mode: 'open' })
  274. this.shadowRoot.appendChild(form.cloneNode(true))
  275. }
  276. connectedCallback() {
  277. const form = this.shadowRoot.querySelector('form')
  278. form.addEventListener('change', (e) => {
  279. const chosenColorScheme = e.target.value
  280. localStorage.setItem('theme', chosenColorScheme)
  281. toggleTheme(chosenColorScheme)
  282. })
  283. const selectedTheme = localStorage.getItem('theme')
  284. if (selectedTheme && selectedTheme !== 'undefined') {
  285. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  286. }
  287. }
  288. }
  289. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  290. window.addEventListener('load', () => {
  291. let colorsLayer = undefined
  292. let hasDarkRules = false
  293. for (const styleSheet of Array.from(document.styleSheets)) {
  294. let mediaRules = []
  295. for (const layerRule of styleSheet.cssRules) {
  296. if (!(layerRule instanceof CSSLayerBlockRule)) {
  297. continue
  298. }
  299. if (layerRule.name === 'colors') {
  300. colorsLayer = layerRule
  301. }
  302. for (const cssRule of layerRule.cssRules) {
  303. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  304. continue
  305. }
  306. // WARNING: Safari does not have/supports `conditionText`.
  307. if (cssRule.conditionText) {
  308. if (cssRule.conditionText !== prefersColorSchemeDark) {
  309. continue
  310. }
  311. } else {
  312. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  313. continue
  314. }
  315. }
  316. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  317. }
  318. }
  319. // WARNING: do not try to insert a Rule to a styleSheet you are
  320. // currently iterating on, otherwise the browser will be stuck
  321. // in a infinite loop…
  322. for (const mediaRule of mediaRules) {
  323. // Safari requires the `0` second parameter (even if default).
  324. colorsLayer.insertRule(mediaRule.cssText, 0)
  325. hasDarkRules = true
  326. }
  327. }
  328. if (hasDarkRules) {
  329. if ('customElements' in window && !customElements.get('theme-toggle')) {
  330. customElements.define('theme-toggle', ThemeToggle)
  331. }
  332. }
  333. })
  334. </script>
  335. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  336. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  337. <script>
  338. tippy('[data-tippy]', {
  339. content(reference) {
  340. reference.addEventListener('click', (e) => e.preventDefault())
  341. return `
  342. <h3 lang="fr">
  343. <img src="${reference.dataset.favicon}" loading="lazy">
  344. <a href="${reference.dataset.source}"
  345. >Article sur ${reference.dataset.domain}</a></h3>
  346. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  347. <div class="tippy-links" lang="fr">
  348. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  349. </div>
  350. `
  351. },
  352. allowHTML: true,
  353. interactive: true,
  354. delay: [150, 700],
  355. hideOnClick: false
  356. })
  357. </script>
  358. <script type="module">
  359. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  360. const markObserver = new IntersectionObserver((entries, observer) => {
  361. const computedStyle = getComputedStyle(document.documentElement)
  362. const markBackground = computedStyle.getPropertyValue('--mark-background')
  363. for (const entry of entries) {
  364. if (entry.intersectionRatio === 0) continue
  365. const markElement = entry.target
  366. markElement.style.backgroundColor = 'inherit'
  367. const annotation = annotate(
  368. markElement, {
  369. type: 'highlight',
  370. multiline: true,
  371. color: markBackground,
  372. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  373. animate: false
  374. }
  375. )
  376. annotation.show()
  377. observer.unobserve(markElement)
  378. }
  379. }, {threshold: 1.0})
  380. for (const markElement of document.querySelectorAll('mark')) {
  381. markObserver.observe(markElement)
  382. }
  383. </script>
  384. </body>
  385. </html>