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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460
  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. Alimentation
  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="Je réfléchis beaucoup au nombre de Calories dont j’ai besoin sur une journée d’activités intensives. J’ai l’impression d’être autour de 3000-3500 — selon la température notamment. Il m’est difficile d’arriver à une telle quantité en restant en-dessous du kilo par jour et sans perdre l’appétit au cours du temps.">
  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>Alimentation</h1>
  136. <p>Le <time datetime="2024-04-22">22 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/20/"
  143. title="Publication précédente : Jour 1">← 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/04/23/"
  150. title="Publication suivante : 42">Suivant →</a>
  151. </p>
  152. </nav>
  153. <p>Je réfléchis beaucoup au nombre de <a data-link-domain="fr.wiktionary.org" href="https://fr.wiktionary.org/wiki/Calorie">Calories</a> dont j’ai besoin sur une journée d’activités intensives. J’ai l’impression d’être autour de 3000-3500 —&nbsp;selon la température notamment. Il m’est difficile d’arriver à une telle quantité en restant en-dessous du kilo par jour <em>et</em> sans perdre l’appétit au cours du&nbsp;temps.</p>
  154. <p>J’en suis à me dire que pour de la rando-course, il faut que j’expérimente une approche nutritive hybride aussi avec un petit déjeuner, un repas complet le soir et entre les deux des «&nbsp;collations&nbsp;» variées / équilibrées / hypercaloriques tous les 4-5&#8239;km par exemple. C’est très approximatif et à tester en conditions réelles bien sûr avant de&nbsp;ré-adapter.</p>
  155. <p>Je suis en train d’itérer sur ma propre recette de <a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Bannique">bannique</a>, tiraillé entre l’appropriation culturelle et la reconnaissance qu’il y a eu des siècles d’itérations avant moi… l’avantage d’une base relativement neutre étant de pouvoir la décliner en de multiples saveurs car le <em><a data-link-domain="fr.wikipedia.org" href="https://fr.wikipedia.org/wiki/Lembas">lembas</a></em> c’est un peu lassant au bout de quelques&nbsp;jours&#8239;!</p>
  156. <p>On va voir si j’arrive à perdre du poids —&nbsp;dans le sac seulement&nbsp;— avec cette stratégie. J’ai déjà l’impression d’être à bord du <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Nebuchadnezzar_(The_Matrix)">Nebuchadnezzar</a> lorsque je mange mon gruau le matin, je ne suis pas encore prêt à me retrouver dans <a data-link-domain="en.wikipedia.org" href="https://en.wikipedia.org/wiki/Soylent_(meal_replacement)">Soleil Vert</a>.</p>
  157. <a href="#hr-157" title="Lien vers cette section de la page"><hr id="hr-157" /></a>
  158. <blockquote lang="en">
  159. <p>Too often, I notice that the instinct to give feedback works to cut off that kind of exploration. We assume that the person who is the object of our feedback has something to learn and fail to notice the same thing about ourselves. We presume that if something uncomfortable or unexpected happens, <mark>it represents an opportunity (or even an obligation) to give feedback—rather than an opportunity to get curious,</mark> to inquire into what’s going&nbsp;on.</p>
  160. <p>We’ve funneled so much energy into feedback processes that I fear we’ve neglected more foundational skills: the ability to ask questions, to listen deeply, to see the things before us that we’re wont to&nbsp;ignore.</p>
  161. <p><cite><em><a data-link-domain="everythingchanges.us" href="https://everythingchanges.us/blog/what-you-see/" hreflang="en"
  162. title="Consultation de l’article (anglais)">What you see | everything changes</a>
  163. <a href="/david/cache/2024/1fc13a9dd6654dd40f95de0d7d657128/" hreflang="en"
  164. data-tippy data-description="Attending to your own attention."
  165. data-source="https://everythingchanges.us/blog/what-you-see/"
  166. data-date="2024-04-22"
  167. data-favicon="https://everythingchanges.us/favicon.ico"
  168. data-domain="everythingchanges.us"
  169. ><svg xmlns="http://www.w3.org/2000/svg"
  170. width="24" height="24" viewBox="0 0 24 24" fill="none"
  171. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  172. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  173. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  174. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  175. </svg>
  176. <span class="sr-only">[archive]</span></a></em></cite></p>
  177. </blockquote>
  178. <p>🤐</p>
  179. <a href="#hr-158" title="Lien vers cette section de la page"><hr id="hr-158" /></a>
  180. <blockquote>
  181. <p>Partout on dégaine l’adjectif «&nbsp;systémique&nbsp;» sauf là, où il serait pourtant bien utile. C’est pas un problème de personnes, c’est pas que les masculinités alternatives sont un modèle qui ne s’est pas encore assez diffusé, c’est parce que l’appartenance à une classe qui a des privilèges sur une autre produit quelque chose chez les dominants, une certaine répugnance à ne pas en profiter. Difficile dans ces conditions de se mettre au service du <mark>féminisme entendu comme l’émancipation des femmes et non comme une aventure de développement personnel</mark>&nbsp;[…]</p>
  182. <p><cite><em><a data-link-domain="blog.ecologie-politique.eu" href="https://blog.ecologie-politique.eu/post/Les-hommes-doux-sont-ils-l-avenir-du-feminisme" hreflang="fr"
  183. title="Consultation de l’article">Les hommes doux sont-ils l’avenir du féminisme&#8239;?</a>
  184. <a href="/david/cache/2024/ece1ee6687c7070e9bf39adb74294b8c/" hreflang="fr"
  185. data-tippy data-description="Même si lafemme est l’avenir de l’homme, c’est moins sur nous que sur les hommes que sont projetées nombre d’attentes concernant le recul espéré du sexisme. Comme si nous ne"
  186. data-source="https://blog.ecologie-politique.eu/post/Les-hommes-doux-sont-ils-l-avenir-du-feminisme"
  187. data-date="2024-04-22"
  188. data-favicon=""
  189. data-domain="blog.ecologie-politique.eu"
  190. ><svg xmlns="http://www.w3.org/2000/svg"
  191. width="24" height="24" viewBox="0 0 24 24" fill="none"
  192. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  193. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  194. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  195. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  196. </svg>
  197. <span class="sr-only">[archive]</span></a></em></cite></p>
  198. </blockquote>
  199. <p>Ça pique là où il faut que ça&nbsp;pique.</p>
  200. <a href="#hr-159" title="Lien vers cette section de la page"><hr id="hr-159" /></a>
  201. <blockquote lang="en">
  202. <p>Even if you decide not to post the comment or delete it after it is posted, the files are not deleted from GitHub’s CDN, and the download URLs continue to work&nbsp;forever.</p>
  203. <p>As the file’s URL contains the name of the repository the comment was created in, and as almost every software company uses GitHub, this flaw can allow threat actors to develop extraordinarily crafty and trustworthy&nbsp;lures.</p>
  204. <p><cite><em><a data-link-domain="bleepingcomputer.com" href="https://www.bleepingcomputer.com/news/security/github-comments-abused-to-push-malware-via-microsoft-repo-urls/" hreflang="en"
  205. title="Consultation de l’article (anglais)">GitHub comments abused to push malware via Microsoft repo URLs</a>
  206. <a href="/david/cache/2024/81659ceed4b37a8c94095c3b743fe13a/" hreflang="en"
  207. data-tippy data-description="A GitHub flaw, or possibly&nbsp;a design decision, is being abused by threat actors to distribute malware using URLs associated with a Microsoft repository, making the files appear trustworthy."
  208. data-source="https://www.bleepingcomputer.com/news/security/github-comments-abused-to-push-malware-via-microsoft-repo-urls/"
  209. data-date="2024-04-22"
  210. data-favicon="https://www.bleepstatic.com/favicon/bleeping.ico"
  211. data-domain="bleepingcomputer.com"
  212. ><svg xmlns="http://www.w3.org/2000/svg"
  213. width="24" height="24" viewBox="0 0 24 24" fill="none"
  214. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  215. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  216. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  217. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  218. </svg>
  219. <span class="sr-only">[archive]</span></a></em></cite></p>
  220. </blockquote>
  221. <p>Une astuce pour un hébergement d’images aux frais de Microsoft est en train d’être documentée. À juste titre, je n’avais pas conscience que l’URL était liée au dépôt ce qui ouvre pas mal de possibilités niveau&nbsp;sécurité.</p>
  222. <nav>
  223. <p>
  224. <a href="/david/2024/adaptation/"
  225. title="Liste de tous les articles 2024 associés à cette étiquette"
  226. rel="tag">#adaptation</a>
  227. <a href="/david/2024/laboratoire/"
  228. title="Liste de tous les articles 2024 associés à cette étiquette"
  229. rel="tag">#laboratoire</a>
  230. <a href="/david/2024/sport/"
  231. title="Liste de tous les articles 2024 associés à cette étiquette"
  232. rel="tag">#sport</a>
  233. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  234. </p>
  235. </nav>
  236. <nav>
  237. <p>
  238. <a rel="prev"
  239. href="/david/2024/04/20/"
  240. title="Publication précédente : Jour 1">← Précédent</a> •
  241. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  242. • <a rel="next"
  243. href="/david/2024/04/23/"
  244. title="Publication suivante : 42">Suivant →</a>
  245. </p>
  246. </nav>
  247. <form action="/david/recherche/" method="get">
  248. <fieldset>
  249. <legend>Recherche</legend>
  250. <label for="input-search">Termes de votre recherche :</label>
  251. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  252. <input type="submit" value="Chercher">
  253. <p id="indexation-infos">
  254. <small>
  255. Seuls les contenus de ces 8 dernières années sont indexés.
  256. </small>
  257. </p>
  258. </fieldset>
  259. </form>
  260. <aside>
  261. <theme-toggle></theme-toggle>
  262. </aside>
  263. </article>
  264. <hr>
  265. <footer>
  266. <p>
  267. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  268. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  269. <a href="http://larlet.com"
  270. title="Go to my English profile"
  271. data-instant>Pro</a>
  272. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  273. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  274. </p>
  275. <template id="theme-selector">
  276. <form>
  277. <style type="text/css">
  278. fieldset div {
  279. text-align: center;
  280. }
  281. </style>
  282. <fieldset>
  283. <legend>Thème</legend>
  284. <div>
  285. <label>
  286. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  287. Auto
  288. </label>
  289. <label>
  290. <input type="radio" value="dark" name="chosen-color-scheme">
  291. Foncé
  292. </label>
  293. <label>
  294. <input type="radio" value="light" name="chosen-color-scheme">
  295. Clair
  296. </label>
  297. </div>
  298. </fieldset>
  299. </form>
  300. </template>
  301. </footer>
  302. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  303. <script>
  304. class ThemeToggle extends HTMLElement {
  305. constructor() {
  306. super()
  307. const themeSelectorTemplate = document.querySelector('#theme-selector')
  308. const form = themeSelectorTemplate.content.firstElementChild
  309. this.attachShadow({ mode: 'open' })
  310. this.shadowRoot.appendChild(form.cloneNode(true))
  311. }
  312. connectedCallback() {
  313. const form = this.shadowRoot.querySelector('form')
  314. form.addEventListener('change', (e) => {
  315. const chosenColorScheme = e.target.value
  316. localStorage.setItem('theme', chosenColorScheme)
  317. toggleTheme(chosenColorScheme)
  318. })
  319. const selectedTheme = localStorage.getItem('theme')
  320. if (selectedTheme && selectedTheme !== 'undefined') {
  321. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  322. }
  323. }
  324. }
  325. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  326. window.addEventListener('load', () => {
  327. let colorsLayer = undefined
  328. let hasDarkRules = false
  329. for (const styleSheet of Array.from(document.styleSheets)) {
  330. let mediaRules = []
  331. for (const layerRule of styleSheet.cssRules) {
  332. if (!(layerRule instanceof CSSLayerBlockRule)) {
  333. continue
  334. }
  335. if (layerRule.name === 'colors') {
  336. colorsLayer = layerRule
  337. }
  338. for (const cssRule of layerRule.cssRules) {
  339. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  340. continue
  341. }
  342. // WARNING: Safari does not have/supports `conditionText`.
  343. if (cssRule.conditionText) {
  344. if (cssRule.conditionText !== prefersColorSchemeDark) {
  345. continue
  346. }
  347. } else {
  348. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  349. continue
  350. }
  351. }
  352. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  353. }
  354. }
  355. // WARNING: do not try to insert a Rule to a styleSheet you are
  356. // currently iterating on, otherwise the browser will be stuck
  357. // in a infinite loop…
  358. for (const mediaRule of mediaRules) {
  359. // Safari requires the `0` second parameter (even if default).
  360. colorsLayer.insertRule(mediaRule.cssText, 0)
  361. hasDarkRules = true
  362. }
  363. }
  364. if (hasDarkRules) {
  365. if ('customElements' in window && !customElements.get('theme-toggle')) {
  366. customElements.define('theme-toggle', ThemeToggle)
  367. }
  368. }
  369. })
  370. </script>
  371. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  372. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  373. <script>
  374. tippy('[data-tippy]', {
  375. content(reference) {
  376. reference.addEventListener('click', (e) => e.preventDefault())
  377. return `
  378. <h3 lang="fr">
  379. <img src="${reference.dataset.favicon}" loading="lazy">
  380. <a href="${reference.dataset.source}"
  381. >Article sur ${reference.dataset.domain}</a></h3>
  382. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  383. <div class="tippy-links" lang="fr">
  384. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  385. </div>
  386. `
  387. },
  388. allowHTML: true,
  389. interactive: true,
  390. delay: [150, 700],
  391. hideOnClick: false
  392. })
  393. </script>
  394. <script type="module">
  395. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  396. const markObserver = new IntersectionObserver((entries, observer) => {
  397. const computedStyle = getComputedStyle(document.documentElement)
  398. const markBackground = computedStyle.getPropertyValue('--mark-background')
  399. for (const entry of entries) {
  400. if (entry.intersectionRatio === 0) continue
  401. const markElement = entry.target
  402. markElement.style.backgroundColor = 'inherit'
  403. const annotation = annotate(
  404. markElement, {
  405. type: 'highlight',
  406. multiline: true,
  407. color: markBackground,
  408. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  409. animate: false
  410. }
  411. )
  412. annotation.show()
  413. observer.unobserve(markElement)
  414. }
  415. }, {threshold: 1.0})
  416. for (const markElement of document.querySelectorAll('mark')) {
  417. markObserver.observe(markElement)
  418. }
  419. </script>
  420. </body>
  421. </html>