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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418
  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. Jour 1
  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="There’s a difference between knowing the path and walking the path.">
  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>Jour 1</h1>
  136. <p>Le <time datetime="2024-05-04">4 mai 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/23/"
  143. title="Publication précédente : 42">← 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/05/05/"
  150. title="Publication suivante : Jour 2">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote lang="en">
  154. <p>There’s a difference between knowing the path and walking the&nbsp;path.</p>
  155. <p><cite>Morpheus, donnant des conseils Komoot à&nbsp;Néo.</cite></p>
  156. </blockquote>
  157. <p>Réveil à 5h30. <a href="/david/2024/04/20/" title="Jour 1">Encore.</a> En route vers la forêt Ouareau. Encore. Cette fois avec un peu moins d’ambition /&nbsp;orgueil.</p>
  158. <p>Niveau confiance, elle est assez haute tout de même car j’ai réussi à trottiner 24km la fin de semaine précédente. En bémol, je suis allé faire du tennis la veille et j’ai un peu mal au&nbsp;dos.</p>
  159. <p>Niveau matériel, j’ai réussi à faire descendre le sac à 7&nbsp;kilos (sans eau) et je teste pour l’occasion un sac-gilet adapté à la course qui soit robuste et permette de transporter une&nbsp;tente.</p>
  160. <p>Le départ est très rapide, l’envie est bien là, la frustration des «&nbsp;échecs&nbsp;» précédents aussi. Je me rends bien compte que je ne vais pas pouvoir tenir toute la journée comme ça. Je mets une heure de moins que lors de ma précédente tentative dans la neige&#8239;! Je prends le sac de nourriture dédié à la prochaine section et je m’attaque au mont 107. C’est le sommet de la sortie et déjà je me félicite d’avoir renoncé l’autre fois car le chemin est un torrent de fonte bien raide. Le reste de la journée viendra me confirmer la validité de ce&nbsp;choix.</p>
  161. <p>Je tente de petites foulées dans la descente et ça semble passer sans trop balloter en arrière. Je ne sais pas si c’est le format de sac ou son poids mais la différence en terme de mobilité est flagrante. J’apprécie ce sentiment de liberté physique. Notamment car ça glisse beaucoup avec l’humidité ambiante. Je découvre des sentiers que je n’avais pas encore arpentés et des points de vue… dans le&nbsp;nuage.</p>
  162. <p>Après une douzaine de kilomètres, je rejoins une piste forestière sur 2/3&#8239;km, l’occasion de voir si je suis encore capable de courir (oui&#8239;!). J’essaye vraiment de rester économe car le chemin restant pourrait être encore long, je n’ai pas de plan très précis cette fois-ci, je veux retrouver cette flexibilité que la trace numérique vient contenir. Je m’arrête lorsque je suis fatigué et je fais des détours si j’ai&nbsp;envie.</p>
  163. <p>La rivière Ouareau était en crue et je ne peux qu’observer les dégâts que cela a produit sur le «&nbsp;Sentier des murmures&nbsp;» qui porte assez mal son nom en cette saison. La plupart des ponts non arrimés ont bougé et/ou sont difficilement praticables. Cette partie qui devait être roulante est entrecoupée de crochets pour ne pas finir dans l’eau. J’arrive néanmoins à un premier emplacement que j’aime beaucoup mais le bruit de la rivière est trop important pour que je puisse dormir à ses côtés. Il y a une différence entre bruit blanc et eaux&nbsp;blanches&#8239;!</p>
  164. <p>Je décide de remonter jusqu’à l’abri 3&nbsp;côtés que je convoitais la fois précédente. Cela rajoute quelques kilomètres mais c’est aussi la possibilité de dormir au sec qui m’attire car la météo est incertaine. En arrivant en face de cet endroit, je tombe nez à nez avec une quinzaine de tentes, ce que je n’avais jamais croisé auparavant dans aucune de mes sorties. Un club de kayak est venu profiter des eaux en crue pour le weekend. J’allonge encore de quelques kilomètres, j’ai trop besoin de ma&nbsp;tranquillité…</p>
  165. <p>Je décide d’aller jusqu’au lac bœuf auquel j’avais <a href="/david/2024/02/24/" title="Jour 1">rendu visite</a> il y a quelques mois. C’est un nouvel emplacement alors j’ai l’espoir qu’il soit libre et c’est le cas. Curieusement, je ne me sens pas épuisé mais j’appréhende tout de même le retour avec la fatigue. Ma montre m’indique 24&#8239;km à l’arrivée après plus de 7&nbsp;heures d’effort et environ 1000&nbsp;mètres de dénivelé. La carte comptabilise 25,5&#8239;km. Qui croire&#8239;? Est-ce vraiment important&#8239;? Je me réjouis d’être arrivé et d’explorer les différentes possibilités de couchage. Je vois le soleil pour la première fois de la&nbsp;journée.</p>
  166. <p>Le printemps québécois reste une saison très bruyante, surtout aux abords des lacs. Entre les oiseaux et les insectes, c’est la cacophonie <strong>toute la nuit</strong>. Je suis très content d’avoir opté pour une tente fermée après avoir beaucoup hésité, la moustiquaire se retrouve constellée de bibittes après seulement une quinzaine de&nbsp;minutes.</p>
  167. <p>Côté <a href="/david/2024/04/22/" title="Alimentation">alimentation</a>, cette nouvelle stratégie qui consiste à manger en permanence est une réussite. Par contre, il va falloir que je me fasse mes propres compositions car celles du commerce sont vraiment pas terribles. J’avais l’espoir que des choses aient changé au cours de ces 10&nbsp;dernières années. Pareil pour les plats lyophilisés, deuxième fois que je trouve ça horrible. Rendez-moi ma semoule et mes nouilles&nbsp;instantanées&#8239;!</p>
  168. <figure>
  169. <a href="/static/david/2024/2024-05-04-bonheur-boules.jpg"
  170. title="Cliquer pour une version haute résolution">
  171. <img
  172. src="/static/david/2024/2024-05-04-bonheur-boules.jpg"
  173. width="2922" height="2922"
  174. srcset="/static/david/2024/2024-05-04-bonheur-boules.jpg 2922w, /static/david/2024/2024-05-04-bonheur-boules_660x440.jpg 660w, /static/david/2024/2024-05-04-bonheur-boules_990x660.jpg 990w, /static/david/2024/2024-05-04-bonheur-boules_1320x880.jpg 1320w"
  175. sizes="min(100vw, calc(100vh * 2922 / 2922))"
  176. loading="lazy"
  177. decoding="async"
  178. alt="Photo du livre «&nbsp;Le bonheur est dans les boules&nbsp;» emprunté à la bibliothèque.">
  179. </a>
  180. <figcaption>Le bonheur est dans les boules. #OhWait</figcaption>
  181. </figure>
  182. <nav>
  183. <p>
  184. <a href="/david/2024/aventure/"
  185. title="Liste de tous les articles 2024 associés à cette étiquette"
  186. rel="tag">#aventure</a>
  187. <a href="/david/2024/foret/"
  188. title="Liste de tous les articles 2024 associés à cette étiquette"
  189. rel="tag">#forêt</a>
  190. <a href="/david/2024/sport/"
  191. title="Liste de tous les articles 2024 associés à cette étiquette"
  192. rel="tag">#sport</a>
  193. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  194. </p>
  195. </nav>
  196. <nav>
  197. <p>
  198. <a rel="prev"
  199. href="/david/2024/04/23/"
  200. title="Publication précédente : 42">← Précédent</a> •
  201. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  202. • <a rel="next"
  203. href="/david/2024/05/05/"
  204. title="Publication suivante : Jour 2">Suivant →</a>
  205. </p>
  206. </nav>
  207. <form action="/david/recherche/" method="get">
  208. <fieldset>
  209. <legend>Recherche</legend>
  210. <label for="input-search">Termes de votre recherche :</label>
  211. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  212. <input type="submit" value="Chercher">
  213. <p id="indexation-infos">
  214. <small>
  215. Seuls les contenus de ces 8 dernières années sont indexés.
  216. </small>
  217. </p>
  218. </fieldset>
  219. </form>
  220. <aside>
  221. <theme-toggle></theme-toggle>
  222. </aside>
  223. </article>
  224. <hr>
  225. <footer>
  226. <p>
  227. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  228. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  229. <a href="http://larlet.com"
  230. title="Go to my English profile"
  231. data-instant>Pro</a>
  232. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  233. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  234. </p>
  235. <template id="theme-selector">
  236. <form>
  237. <style type="text/css">
  238. fieldset div {
  239. text-align: center;
  240. }
  241. </style>
  242. <fieldset>
  243. <legend>Thème</legend>
  244. <div>
  245. <label>
  246. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  247. Auto
  248. </label>
  249. <label>
  250. <input type="radio" value="dark" name="chosen-color-scheme">
  251. Foncé
  252. </label>
  253. <label>
  254. <input type="radio" value="light" name="chosen-color-scheme">
  255. Clair
  256. </label>
  257. </div>
  258. </fieldset>
  259. </form>
  260. </template>
  261. </footer>
  262. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  263. <script>
  264. class ThemeToggle extends HTMLElement {
  265. constructor() {
  266. super()
  267. const themeSelectorTemplate = document.querySelector('#theme-selector')
  268. const form = themeSelectorTemplate.content.firstElementChild
  269. this.attachShadow({ mode: 'open' })
  270. this.shadowRoot.appendChild(form.cloneNode(true))
  271. }
  272. connectedCallback() {
  273. const form = this.shadowRoot.querySelector('form')
  274. form.addEventListener('change', (e) => {
  275. const chosenColorScheme = e.target.value
  276. localStorage.setItem('theme', chosenColorScheme)
  277. toggleTheme(chosenColorScheme)
  278. })
  279. const selectedTheme = localStorage.getItem('theme')
  280. if (selectedTheme && selectedTheme !== 'undefined') {
  281. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  282. }
  283. }
  284. }
  285. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  286. window.addEventListener('load', () => {
  287. let colorsLayer = undefined
  288. let hasDarkRules = false
  289. for (const styleSheet of Array.from(document.styleSheets)) {
  290. let mediaRules = []
  291. for (const layerRule of styleSheet.cssRules) {
  292. if (!(layerRule instanceof CSSLayerBlockRule)) {
  293. continue
  294. }
  295. if (layerRule.name === 'colors') {
  296. colorsLayer = layerRule
  297. }
  298. for (const cssRule of layerRule.cssRules) {
  299. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  300. continue
  301. }
  302. // WARNING: Safari does not have/supports `conditionText`.
  303. if (cssRule.conditionText) {
  304. if (cssRule.conditionText !== prefersColorSchemeDark) {
  305. continue
  306. }
  307. } else {
  308. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  309. continue
  310. }
  311. }
  312. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  313. }
  314. }
  315. // WARNING: do not try to insert a Rule to a styleSheet you are
  316. // currently iterating on, otherwise the browser will be stuck
  317. // in a infinite loop…
  318. for (const mediaRule of mediaRules) {
  319. // Safari requires the `0` second parameter (even if default).
  320. colorsLayer.insertRule(mediaRule.cssText, 0)
  321. hasDarkRules = true
  322. }
  323. }
  324. if (hasDarkRules) {
  325. if ('customElements' in window && !customElements.get('theme-toggle')) {
  326. customElements.define('theme-toggle', ThemeToggle)
  327. }
  328. }
  329. })
  330. </script>
  331. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  332. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  333. <script>
  334. tippy('[data-tippy]', {
  335. content(reference) {
  336. reference.addEventListener('click', (e) => e.preventDefault())
  337. return `
  338. <h3 lang="fr">
  339. <img src="${reference.dataset.favicon}" loading="lazy">
  340. <a href="${reference.dataset.source}"
  341. >Article sur ${reference.dataset.domain}</a></h3>
  342. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  343. <div class="tippy-links" lang="fr">
  344. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  345. </div>
  346. `
  347. },
  348. allowHTML: true,
  349. interactive: true,
  350. delay: [150, 700],
  351. hideOnClick: false
  352. })
  353. </script>
  354. <script type="module">
  355. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  356. const markObserver = new IntersectionObserver((entries, observer) => {
  357. const computedStyle = getComputedStyle(document.documentElement)
  358. const markBackground = computedStyle.getPropertyValue('--mark-background')
  359. for (const entry of entries) {
  360. if (entry.intersectionRatio === 0) continue
  361. const markElement = entry.target
  362. markElement.style.backgroundColor = 'inherit'
  363. const annotation = annotate(
  364. markElement, {
  365. type: 'highlight',
  366. multiline: true,
  367. color: markBackground,
  368. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  369. animate: false
  370. }
  371. )
  372. annotation.show()
  373. observer.unobserve(markElement)
  374. }
  375. }, {threshold: 1.0})
  376. for (const markElement of document.querySelectorAll('mark')) {
  377. markObserver.observe(markElement)
  378. }
  379. </script>
  380. </body>
  381. </html>