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

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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>
  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>Bikepacking — David Larlet</title>
  13. <meta name="description" content="Osons les mots : une aventure urbaine.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Bikepacking</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a rel="prev" href="/david/2020/05/18/" title="Publication précédente : Relance">←</a> •
  59. <a href="/david/" title="Aller à l’accueil">🏠</a>
  60. • <a rel="next" href="/david/2020/05/26/" title="Publication suivante : Covidoudou">→</a>
  61. </p>
  62. </nav>
  63. <hr>
  64. <main>
  65. <p><em>Osons les mots : une aventure urbaine.</em></p>
  66. <h2 id="recit">Récit <a href="#recit" title="Ancre vers cette partie">#</a></h2>
  67. <blockquote>
  68. <p>L’homme libre possède le temps. L’homme qui maîtrise l’espace est simplement puissant. En ville, les minutes, les heures, les années nous échappent. Elles coulent de la plaie du temps blessé. <mark>Dans la cabane, le temps se calme.</mark> Il se couche à vos pieds en vieux chien gentil et, soudain, on ne sait même plus qu’il est là. Je suis libre parce que mes jours le sont.</p>
  69. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  70. </blockquote>
  71. <p>Je n’étais pas allé <a href="/david/bushcraft/">en forêt</a> depuis presque trois mois. En parallèle de quoi, je m’étais engagé sur un truc dont il faudra que je vous <a href="/david/2020/05/26/">parle prochainement</a> qui était très prenant. Bref, je manquais de temps. Je me suis quand même accordé 24 heures dans la forêt en partant depuis chez moi à <a href="#materiel">vélo</a>. Cela faisait un moment que je voulais tenter d’aller jusqu’au <a href="https://www.sepaq.com/pq/oka/">Parc national d’Oka</a> et quoi de mieux que de profiter de sa dernière journée de <strong>fermeture</strong> pour aller y faire un tour ?</p>
  72. <p>Me voilà donc en selle vers 14 heures sous un soleil assez violent après avoir reconnu une bonne partie du parcours l’avant-veille (ne jamais faire ça). L’objectif est d’arriver le plus loin possible sans trop transpirer, mission accomplie… jusqu’à la dernière montée, snif. Une cinquantaine de kilomètres plus loin, je m’approche de la forêt et je décide de rentrer dedans à pied en espérant trouver deux arbres pour accrocher mon <a href="#hamac">hamac</a>. Je suis rapidement assailli par une nuée de mouches noires : <strong>mon pire cauchemar dans ce pays</strong>.</p>
  73. <p>Du mieux que je peux, je tente de trouver un chemin et je tombe sur un sentier qui devient praticable à vélo. Ouf ! Il faut impérativement que je trouve un terrain à découvert pour échapper aux mouches. Si vous suivez, vous remarquerez que c’est difficilement compatible avec une nuit en hamac ! Je distingue une éclaircie au loin et je tombe sur… un marais. Il va me falloir choisir mes <a href="https://en.wikipedia.org/wiki/Talk%3AQuebec_French_lexicon#Slang_terms">bibittes</a> préférées pour ces prochaines heures. Ça ressemble à une sortie galère. <em>Joie.</em></p>
  74. <p>Et tout à coup, je découvre une structure qui va me sauver mon séjour :</p>
  75. <figure>
  76. <img src="/static/david/2020/plateforme.jpg"
  77. alt="Une plateforme en bois"
  78. loading="lazy" width="960" height="960" />
  79. <figcaption>Ma tour de gué pour quelques heures.</figcaption>
  80. </figure>
  81. <p>À chaque étage, je perds quelques mouches noires et moustiques, arrivé au sommet je me retrouve seul, peinard. En bonus, les poutres semblent être assez solides pour supporter un hamac. Je monte le vélo et je souffle un bon coup. Le temps de me rendre compte que ce point d’observation est splendide et me permet d’observer une diversité de volatiles impressionnante. <em>Double-combo-yay!</em></p>
  82. <figure>
  83. <img src="/static/david/2020/marais.jpg"
  84. alt="Le marais"
  85. loading="lazy" width="1280" height="960" />
  86. <figcaption>Fenêtre avec vue.</figcaption>
  87. </figure>
  88. <p>Bon, l’inconvénient d’un marais, c’est que c’est tout sauf silencieux. C’est même carrément cacophonique. Et toute la nuit durant. Heureusement que j’étais suffisamment épuisé par les journées précédentes. Je vous mets quand même deux vidéos de une minute chacune pour avoir une idée de l’ambiance soir et matin (entre les deux c’est un gentil dégradé), pour une expérience proche du réel vous pouvez monter le son :</p>
  89. <video controls>
  90. <source src="/static/david/2020/marais_ambiance_soir.mp4" type="video/mp4">
  91. <source src="/static/david/2020/marais_ambiance_soir.webm" type="video/webm"> <p>Je suis désolé mais votre navigateur/OS ne semble pas supporter cette vidéo aux formats proposés (ou j’ai foiré un truc). Vous pouvez toujours <a href="/static/david/2020/marais_ambiance_soir.mp4">la télécharger</a>.</p>
  92. </video>
  93. <video controls>
  94. <source src="/static/david/2020/marais_ambiance_matin.mp4" type="video/mp4">
  95. <source src="/static/david/2020/marais_ambiance_matin.webm" type="video/webm"> <p>Je suis désolé mais votre navigateur/OS ne semble pas supporter cette vidéo aux formats proposés (ou j’ai foiré un truc). Vous pouvez toujours <a href="/static/david/2020/marais_ambiance_matin.mp4">la télécharger</a>.</p>
  96. </video>
  97. <p>Cela reste une expérience formidable que je suis bien content d’avoir vécue. Avoir passé ces quelques heures suspendu, j’avais l’impression d’être perché dans mon hamac à 10 mètres de hauteur. C’était limite — mais alors limite — du <em>glamping</em>.</p>
  98. <p>Le retour s’est fait par des sentiers bien sympathiques avec leurs lots de boue et d’escaliers sinon c’est trop facile.</p>
  99. <figure>
  100. <img src="/static/david/2020/single_track.jpg"
  101. alt="Un vélo dans la forêt"
  102. loading="lazy" width="960" height="960" />
  103. <figcaption>Un <em>single track</em> en bon français.</figcaption>
  104. </figure>
  105. <p>Quelques heures plus tard, me revoilà chez moi à 10 heures du matin. Épuisé mais heureux. Finalement, vingt heures auront suffit pour avoir l’impression de vivre une aventure sans trop de carbone dépensé. Pas pire.</p>
  106. <h2 id="materiel">Matériel <a href="#materiel" title="Ancre vers cette partie">#</a></h2><figure>
  107. <img src="/static/david/2020/bikepacking.jpg"
  108. alt="Un vélo devant un lac avec un autre vélo (pour enfant) devant"
  109. loading="lazy" width="960" height="960" />
  110. <figcaption>Quand on fait du <em>bikepacking</em>, il faut absolument prendre son vélo en photo (le mien est en haut).</figcaption>
  111. </figure>
  112. <p>Je n’avais pas beaucoup d’options pour ranger des affaires mais je ne voulais pas prendre de sac à dos. Aussi, j’ai mis :</p>
  113. <ul>
  114. <li>tout ce qui était volumineux mais léger (les trucs pour dormir) à l’avant sur un porte-bagage que j’avais,</li>
  115. <li>toute l’eau possible dans le cadre (3 litres au total, ça m’a suffit pour les 20 heures en revenant modérément déshydraté),</li>
  116. <li>des barres dans la première pochette de cadre,</li>
  117. <li>des outils dans la secondes en cas de crevaison</li>
  118. <li>et tout le reste dans la sacoche de selle (nourriture, habits, autres).</li>
  119. </ul>
  120. <p>J’arrivais à soulever l’ensemble pour franchir des obstacles, c’est un détail non négligeable. Si vous n’arrivez pas bien à voir les sacoches, voici une photo avec plus de contraste :</p>
  121. <figure>
  122. <img src="/static/david/2020/bikepacking2.jpg"
  123. alt="Un vélo dans la forêt"
  124. loading="lazy" width="1024" height="1024" />
  125. <figcaption>J’ai aussi pris des photos qui ne sont pas mon nombril hein.</figcaption>
  126. </figure>
  127. <h2 id="traces">Traces <a href="#traces" title="Ancre vers cette partie">#</a></h2>
  128. <blockquote>
  129. <p>Il est dangereux d’ouvrir un livre. La retraite est révolte. Gagner sa cabane, c’est disparaître des écrans de contrôle. <mark>L’ermite s’efface. Il n’envoie plus de traces numériques, plus de signaux numériques, plus d’impulsions bancaires.</mark> Il se défait de toute identité. Il pratique un <em>hacking</em> à l’envers, sort du grand jeu. Nul besoin d’ailleurs de gagner la forêt. L’ascétisme révolutionnaire se pratique en milieu urbain. La <em>société de consommation</em> offre le choix de s’y conformer. Il suffit d’un peu de discipline. Dans l’abondance, libre aux uns de vivre en poussah mais libre aux autres de jouer les moines et de se tenir amaigris dans le murmure des livres. Ceux-ci recourent alors aux forêts intérieures sans quitter leur appartement.</p>
  130. <p><cite><em><a href="/david/2020/12/21/#dans-les-forets-de-siberie">Dans les forêts de Sibérie</a></em>, Sylvain Tesson</cite></p>
  131. </blockquote>
  132. <p>Je vais avoir du mal à vous fournir une trace/carte car je pratique le #LeaveNoTrace numérique. Au pire, s’il m’arrive de me perdre, je découvre d’autres endroits. Avec une trace, je ne pense pas que j’aurais pu atterrir à cet endroit par exemple. <em>L’aventure commence là où la carte s’arrête.</em></p>
  133. <p>En gros, en suivant les pistes cyclables tout le long depuis Montréal on peut facilement se rendre au <a href="https://www.sepaq.com/pq/oka/">Parc national d’Oka</a> et la dernière portion est fabuleuse. Jusqu’à présent, il était possible de trouver de l’eau sur le parcours mais depuis la COVID toutes les fontaines à eau ont été fermées, pensez à emporter une bonne quantité et/ou un filtre.</p>
  134. <p>Pour ma part, j’avais filtré une réserve d’eau issue du marais en dernier recours mais j’ai pu finalement m’en passer.</p>
  135. <h2 id="hamac">Hamac <a href="#hamac" title="Ancre vers cette partie">#</a></h2><p>L’objectif de cette sortie, c’était aussi de savoir si j’allais être capable de dormir dans un hamac pour des sorties plus longues. C’est une chose dont je rêve depuis très très longtemps mais je suis toujours limité par le fait de dormir principalement sur le côté. J’avais regardé du côté des solutions comme <a href="https://www.amokequipment.com/products/draumr-hammock">Draumr</a> mais c’était lourd et contraignant (c’est volumineux et il faut le bon matelas). Et cette année, je suis tombé sur le <a href="https://www.eaglesnestoutfittersinc.com/shop/skylite-hammock/">SkyLite™ de chez ENO</a> qui me redonnait espoir.</p>
  136. <figure>
  137. <img src="/static/david/2020/hamac.jpg"
  138. alt="Un hamac sur une plateforme dans les arbres"
  139. loading="lazy" width="960" height="960" />
  140. <figcaption>Juste ce qu’il faut d’espace</figcaption>
  141. </figure>
  142. <p>Le bilan après cette première nuit est mitigé mais il y avait tellement de facteurs qu’il m’est difficile d’avoir un avis objectif. J’ai quand même réussi à dormir sans avoir trop mal aux jambes le lendemain matin et en dormant une bonne partie de la nuit sur les côtés, ça reste une victoire sur ce plan là. Je me doutais que l’<em>underquilt</em> (partie du duvet qui se place sous le hamac pour éviter la compression) serait moins pertinent avec cette configuration et effectivement c’était limite. Je me demande toujours si sans rien en dessous les moustiques arriveraient à me piquer ou non…</p>
  143. <p>La réponse au prochain épisode !</p>
  144. <h2 id="adieu">Adieu <a href="#adieu" title="Ancre vers cette partie">#</a></h2>
  145. <blockquote>
  146. <p><em>[Juste avant de partir dans la forêt.]</em><br />
  147. — Adieu Papa.<br />
  148. — Ah ?!<br />
  149. — Bin oui, je t’aime bien mais vu que tu vas aller en prison quand la police va te trouver dans la forêt…</p>
  150. </blockquote>
  151. <p>La pression, quelle pression ?</p>
  152. </main>
  153. <nav>
  154. <p class="center">
  155. <a rel="prev" href="/david/2020/05/18/" title="Publication précédente : Relance">←</a> •
  156. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  157. • <a rel="next" href="/david/2020/05/26/" title="Publication suivante : Covidoudou">→</a>
  158. </p>
  159. </nav>
  160. </article>
  161. <hr>
  162. <footer>
  163. <p>
  164. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  165. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  166. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  167. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  168. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  169. </p>
  170. <template id="theme-selector">
  171. <form>
  172. <fieldset>
  173. <legend>Thème</legend>
  174. <label>
  175. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  176. </label>
  177. <label>
  178. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  179. </label>
  180. <label>
  181. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  182. </label>
  183. </fieldset>
  184. </form>
  185. </template>
  186. </footer>
  187. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  188. <script type="text/javascript">
  189. function loadThemeForm(templateName) {
  190. const themeSelectorTemplate = document.querySelector(templateName)
  191. const form = themeSelectorTemplate.content.firstElementChild
  192. themeSelectorTemplate.replaceWith(form)
  193. form.addEventListener('change', (e) => {
  194. const chosenColorScheme = e.target.value
  195. localStorage.setItem('theme', chosenColorScheme)
  196. toggleTheme(chosenColorScheme)
  197. })
  198. const selectedTheme = localStorage.getItem('theme')
  199. if (selectedTheme && selectedTheme !== 'undefined') {
  200. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  201. }
  202. }
  203. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  204. window.addEventListener('load', () => {
  205. let hasDarkRules = false
  206. for (const styleSheet of Array.from(document.styleSheets)) {
  207. let mediaRules = []
  208. for (const cssRule of styleSheet.cssRules) {
  209. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  210. continue
  211. }
  212. // WARNING: Safari does not have/supports `conditionText`.
  213. if (cssRule.conditionText) {
  214. if (cssRule.conditionText !== prefersColorSchemeDark) {
  215. continue
  216. }
  217. } else {
  218. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  219. continue
  220. }
  221. }
  222. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  223. }
  224. // WARNING: do not try to insert a Rule to a styleSheet you are
  225. // currently iterating on, otherwise the browser will be stuck
  226. // in a infinite loop…
  227. for (const mediaRule of mediaRules) {
  228. styleSheet.insertRule(mediaRule.cssText)
  229. hasDarkRules = true
  230. }
  231. }
  232. if (hasDarkRules) {
  233. loadThemeForm('#theme-selector')
  234. }
  235. })
  236. </script>
  237. </body>
  238. </html>