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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420
  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. Apex 2
  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="Bon allez, retour après un mois, autant dire que je manque de recul.">
  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>Apex 2</h1>
  136. <p>Le <time datetime="2024-04-14">14 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/13/"
  143. title="Publication précédente : Fondation">← 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. </p>
  149. </nav>
  150. <p><em>Bon allez, retour <a href="/david/2024/03/14/" title="Montre 2">après un mois</a>, autant dire que je manque de&nbsp;recul.</em></p>
  151. <p>Je l’ai porté tous les jours, et même la nuit, ce qui ne m’était jamais arrivé auparavant. C’est à la fois la légèreté (42&nbsp;grammes&#8239;!) et le bracelet très confortable (et qui sèche vite) qui permettent cela. La possibilité d’inverser le cadran de la montre pour avoir les boutons à l’opposé du poignet me correspond bien dans mes peurs à ce niveau là aussi. Côté ergonomie, j’adore qu’il n’y ait que 3&nbsp;boutons, la roulette est un peu lente à mon goût par&nbsp;contre.</p>
  152. <p>Niveau motivation, je m’y attendais mais pas dans cette proportion là, j’ai fait énormément de sport(s) ce dernier mois. J’ai enregistré une cinquantaine d’activités mais je consigne aussi les aller-retours à l’école en vélo car je voulais vraiment identifier les moments de «&nbsp;récupération active&nbsp;». Il y en a d’autres que j’ai loupé donc ça compense. J’ai redécouvert ma <em>pain cave</em> à cette occasion mais ça fera l’objet d’un billet distinct. J’ai redécouvert mes douleurs d’usure&nbsp;aussi…</p>
  153. <p>Je suis surpris qu’il n’y ait pas un mode pour générer des activités <em>a posteriori</em> vu que tout est consigné au quotidien, même avec une fréquence de rafraichissement moindre qu’en effort explicite ça serait intéressant pour éviter d’avoir à y penser. Encore plus surprenant&nbsp;: il n’est pas possible de changer un type d’activité après coup, ce qui me serait très utile quand je suis avec l’enfant car je ne sais jamais quand une marche va se transformer en course (et <em>vice versa</em>).</p>
  154. <p>Le GPS est suffisamment précis pour mon usage (vs. double fréquence), ce qui m’avait beaucoup fait hésité avec la version Pro. Je suis très content d’avoir parié sur des taille / poids qui me conviennent davantage. En contrepartie, la batterie tient pour 2 <a href="/david/2024/03/29/" title="Jour 1">longs</a> <a href="/david/2024/03/30/" title="Jour 2">jours</a> de randonnée, pas beaucoup plus. Un câble de plus à transporter, c’est acceptable. Niveau orientation, c’est pas mal fait, chaque déviation émet un son+vibration avec la distance et le chemin / direction pour rattraper. Je n’ai pas trouvé / cherché s’il était possible de lui dire que la déviation était intentionnelle en cours d’exercice. J’ai la crainte que ça sonne à un moment où je suis un animal selon le contexte… probablement un paramètre à&nbsp;trouver.</p>
  155. <p>J’ai redécouvert les zones d’effort, le seuil, la VMA, la charge d’entrainement et toutes ces choses là. C’était geekement plaisant de jouer avec ces données. Il y aussi celles relatives au sommeil qui me font réfléchir (pendant les insomnies par&nbsp;exemple&nbsp;🙃).</p>
  156. <blockquote>
  157. <p>Il faut que j’apprenne à ne pas courir <em>contre</em> mais <em>avec</em> la montre. <mark>J’ai trop tendance à pousser</mark> alors qu’elle sait bien à mon poignet que mon cœur ne va pas&nbsp;suivre.</p>
  158. <p>Il y a du travail à faire pour transformer un jugement en&nbsp;allié.</p>
  159. <p><cite><a href="/david/2024/03/14/" title="Montre 2">Auto-citation</a></cite></p>
  160. </blockquote>
  161. <p>Bon sur ce plan là, je n’ai pas été très bon. J’ai l’impression de ne pas attendre suffisamment entre deux efforts <em>et</em> en même temps il y a un autre panneau qui donne le moment optimal pour retourner s’entrainer et qui contredit celui-ci. Il faut que je prenne le temps de mieux me réécouter à ce&nbsp;niveau.</p>
  162. <figure>
  163. <a href="/static/david/2024/2024-04-14-recuperation.jpg"
  164. title="Cliquer pour une version haute résolution">
  165. <img
  166. src="/static/david/2024/2024-04-14-recuperation.jpg"
  167. width="960" height="2079"
  168. srcset="/static/david/2024/2024-04-14-recuperation.jpg 960w, /static/david/2024/2024-04-14-recuperation_660x440.jpg 660w, /static/david/2024/2024-04-14-recuperation_990x660.jpg 990w, /static/david/2024/2024-04-14-recuperation_1320x880.jpg 1320w"
  169. sizes="min(100vw, calc(100vh * 960 / 2079))"
  170. loading="lazy"
  171. decoding="async"
  172. alt="Panneau de Récupération de l’application COROS.">
  173. </a>
  174. <figcaption>Suis-je vraiment en situation de fatigue / à 50% de mes capacités sur la majorité de mes sessions&nbsp;?!</figcaption>
  175. </figure>
  176. <p>Je suis frustré par les capacités limitées de récupération des données (automatisée). J’ai le sentiment qu’il faut passer par une autre plateforme tierce, ou synchroniser à des «&nbsp;services&nbsp;» comme Strava, pour y avoir accès et ça me frustre. Je <a href="/david/2024/03/19/#hr-124">l’évoquais par ici</a>. Sur des données de santé, ça me fait bien suer de sortir des serveurs de collecte que je tolère déjà à moitié. Autre déception&nbsp;: ces outils sont vraiment faits pour être personnels et il n’y a pas de mode «&nbsp;prêt&nbsp;» pour une activité. La seule option trouvée pour ne pas fausser les statistiques personnelles semble être de supprimer l’activité après avoir récupéré les&nbsp;données.</p>
  177. <p>Le prédic(a)teur de course qui m’annonçait initialement un marathon à 5h, j’avoue, ça pique un peu. Et peut-être que ça a participé à ma motivation aussi&nbsp;🤷. On apprend à mutuellement se connaître, on verra dans six mois une fois les courbes&nbsp;stabilisées.</p>
  178. <p>Niveau montre connectée, je pensais désactiver les notifications dès le premier jour et en fait c’est assez pratique pour trier ce qui est de l’information et ce qui demande une interaction. C’est sûr que je pourrais mieux filtrer à la base mais la plupart des outils ne permettent pas d’avoir une telle granularité. Cela m’a d’une certaine manière éloigné de mon temps d’écran de téléphone (un peu moins) indispensable. J’apprécie de pouvoir mettre des alarmes qui vibrent et qui ne dérangent vraiment que moi, surtout pour les&nbsp;réveils.</p>
  179. <p>J’ai fait trois <a href="/david/2024/04/07/" title="Piscine">séances</a> de <a href="/david/2024/04/10/#hr-146">piscine</a> pour l’instant et c’est vraiment chouette d’avoir des chiffres à ce sujet, je pense que ça peut m’aider à progresser dans ce domaine. Je n’ai pas suffisamment repris le vélo pour voir si c’est pertinent dans ce contexte aussi. C’est une montre qui est quand même très orientée course dans l’ensemble, le couplage avec un <a data-link-domain="coros.ca" href="https://coros.ca/coros-pod2">Pod 2</a> est probablement un moyen d’aller plus loin dans l’amélioration de la foulée notamment. À voir si je creuse cet aspect, j’ai déjà de quoi&nbsp;faire.</p>
  180. <p>Je ne sais toujours pas à quoi cela sert de connaître le nombre de ses pas <em>estimés</em> par jour. Encore moins le nombre d’étages… les <em>watchfaces</em> par contre c’est marrant (au début&#8239;?). Dans l’ensemble ça dépasse mes attentes qui étaient assez élevée, c’est rare. N’hésitez pas si vous avez des questions spécifiques auxquelles je peux&nbsp;répondre.</p>
  181. <blockquote>
  182. <p><em>[Aujourd’hui, en allant à la piscine en courant]</em><br />
  183. — Pfiou, j’ai pas encore bien récupéré depuis vendredi…<br />
  184. — Ah je me disais bien que tu étais à la traîne, je pensais que c’était juste la vieillesse.<br />
  185. —&nbsp;🫠</p>
  186. </blockquote>
  187. <p>Difficile de vivre avec un <del>athlète élite</del> enfant de 10&nbsp;ans&nbsp;parfois.</p>
  188. <nav>
  189. <p>
  190. <a href="/david/2024/enthousiasme/"
  191. title="Liste de tous les articles 2024 associés à cette étiquette"
  192. rel="tag">#enthousiasme</a>
  193. <a href="/david/2024/laboratoire/"
  194. title="Liste de tous les articles 2024 associés à cette étiquette"
  195. rel="tag">#laboratoire</a>
  196. <a href="/david/2024/sport/"
  197. title="Liste de tous les articles 2024 associés à cette étiquette"
  198. rel="tag">#sport</a>
  199. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  200. </p>
  201. </nav>
  202. <nav>
  203. <p>
  204. <a rel="prev"
  205. href="/david/2024/04/13/"
  206. title="Publication précédente : Fondation">← Précédent</a> •
  207. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  208. </p>
  209. </nav>
  210. <form action="/david/recherche/" method="get">
  211. <fieldset>
  212. <legend>Recherche</legend>
  213. <label for="input-search">Termes de votre recherche :</label>
  214. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  215. <input type="submit" value="Chercher">
  216. <p id="indexation-infos">
  217. <small>
  218. Seuls les contenus de ces 8 dernières années sont indexés.
  219. </small>
  220. </p>
  221. </fieldset>
  222. </form>
  223. <aside>
  224. <theme-toggle></theme-toggle>
  225. </aside>
  226. </article>
  227. <hr>
  228. <footer>
  229. <p>
  230. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  231. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  232. <a href="http://larlet.com"
  233. title="Go to my English profile"
  234. data-instant>Pro</a>
  235. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  236. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  237. </p>
  238. <template id="theme-selector">
  239. <form>
  240. <style type="text/css">
  241. fieldset div {
  242. text-align: center;
  243. }
  244. </style>
  245. <fieldset>
  246. <legend>Thème</legend>
  247. <div>
  248. <label>
  249. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  250. Auto
  251. </label>
  252. <label>
  253. <input type="radio" value="dark" name="chosen-color-scheme">
  254. Foncé
  255. </label>
  256. <label>
  257. <input type="radio" value="light" name="chosen-color-scheme">
  258. Clair
  259. </label>
  260. </div>
  261. </fieldset>
  262. </form>
  263. </template>
  264. </footer>
  265. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  266. <script>
  267. class ThemeToggle extends HTMLElement {
  268. constructor() {
  269. super()
  270. const themeSelectorTemplate = document.querySelector('#theme-selector')
  271. const form = themeSelectorTemplate.content.firstElementChild
  272. this.attachShadow({ mode: 'open' })
  273. this.shadowRoot.appendChild(form.cloneNode(true))
  274. }
  275. connectedCallback() {
  276. const form = this.shadowRoot.querySelector('form')
  277. form.addEventListener('change', (e) => {
  278. const chosenColorScheme = e.target.value
  279. localStorage.setItem('theme', chosenColorScheme)
  280. toggleTheme(chosenColorScheme)
  281. })
  282. const selectedTheme = localStorage.getItem('theme')
  283. if (selectedTheme && selectedTheme !== 'undefined') {
  284. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  285. }
  286. }
  287. }
  288. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  289. window.addEventListener('load', () => {
  290. let colorsLayer = undefined
  291. let hasDarkRules = false
  292. for (const styleSheet of Array.from(document.styleSheets)) {
  293. let mediaRules = []
  294. for (const layerRule of styleSheet.cssRules) {
  295. if (!(layerRule instanceof CSSLayerBlockRule)) {
  296. continue
  297. }
  298. if (layerRule.name === 'colors') {
  299. colorsLayer = layerRule
  300. }
  301. for (const cssRule of layerRule.cssRules) {
  302. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  303. continue
  304. }
  305. // WARNING: Safari does not have/supports `conditionText`.
  306. if (cssRule.conditionText) {
  307. if (cssRule.conditionText !== prefersColorSchemeDark) {
  308. continue
  309. }
  310. } else {
  311. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  312. continue
  313. }
  314. }
  315. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  316. }
  317. }
  318. // WARNING: do not try to insert a Rule to a styleSheet you are
  319. // currently iterating on, otherwise the browser will be stuck
  320. // in a infinite loop…
  321. for (const mediaRule of mediaRules) {
  322. // Safari requires the `0` second parameter (even if default).
  323. colorsLayer.insertRule(mediaRule.cssText, 0)
  324. hasDarkRules = true
  325. }
  326. }
  327. if (hasDarkRules) {
  328. if ('customElements' in window && !customElements.get('theme-toggle')) {
  329. customElements.define('theme-toggle', ThemeToggle)
  330. }
  331. }
  332. })
  333. </script>
  334. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  335. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  336. <script>
  337. tippy('[data-tippy]', {
  338. content(reference) {
  339. reference.addEventListener('click', (e) => e.preventDefault())
  340. return `
  341. <h3 lang="fr">
  342. <img src="${reference.dataset.favicon}" loading="lazy">
  343. <a href="${reference.dataset.source}"
  344. >Article sur ${reference.dataset.domain}</a></h3>
  345. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  346. <div class="tippy-links" lang="fr">
  347. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  348. </div>
  349. `
  350. },
  351. allowHTML: true,
  352. interactive: true,
  353. delay: [150, 700],
  354. hideOnClick: false
  355. })
  356. </script>
  357. <script type="module">
  358. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  359. const markObserver = new IntersectionObserver((entries, observer) => {
  360. const computedStyle = getComputedStyle(document.documentElement)
  361. const markBackground = computedStyle.getPropertyValue('--mark-background')
  362. for (const entry of entries) {
  363. if (entry.intersectionRatio === 0) continue
  364. const markElement = entry.target
  365. markElement.style.backgroundColor = 'inherit'
  366. const annotation = annotate(
  367. markElement, {
  368. type: 'highlight',
  369. multiline: true,
  370. color: markBackground,
  371. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  372. animate: false
  373. }
  374. )
  375. annotation.show()
  376. observer.unobserve(markElement)
  377. }
  378. }, {threshold: 1.0})
  379. for (const markElement of document.querySelectorAll('mark')) {
  380. markObserver.observe(markElement)
  381. }
  382. </script>
  383. </body>
  384. </html>