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

3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
3 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  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>Suspension — David Larlet</title>
  13. <meta name="description" content="Et pourtant… En se mettant au vélo, des petits bourgeois blancs découvrent ce que ça fait, de se faire traiter comme de la merde, d’être mis en danger par des personnes bien protégées par leur position sociale. Le géographe Matthieu Adam témoigne de leur prise de conscience de cette « oppression systémique » maintenant qu’ils la subissent. Est-ce que ça va en faire des héros de la justice sociale, des alliés hors pair des classes exploitées ? Vu depuis les pistes cyclables parisiennes, ça n’en prend pas le chemin.">
  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="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Suspension</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/09/03/" title="Publication précédente : Pouvoir">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/09/05/" title="Publication suivante : Silence">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote>
  68. <p>Et pourtant… En se mettant au vélo, des petits bourgeois blancs découvrent ce que ça fait, de se faire traiter comme de la merde, d’être mis en danger par des personnes bien protégées par leur position sociale. Le géographe <a href="https://cyclops.hypotheses.org/author/cyclops">Matthieu Adam</a> témoigne de leur prise de conscience de cette «&nbsp;oppression systémique&nbsp;» maintenant qu’ils la subissent. Est-ce que ça va en faire des héros de la justice sociale, des alliés hors pair des classes exploitées&#8239;? Vu depuis les pistes cyclables parisiennes, ça n’en prend pas le chemin.</p>
  69. <p><cite><em><a href="https://blog.ecologie-politique.eu/post/Misere-du-cyclisme-urbain">Misère du cyclisme urbain</a></em> (<a href="/david/cache/2021/9b26314b7796086b9109da72993751b5/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p><em>Avertissement&nbsp;: je vais parler de matériel qui coûte indécemment cher.</em></p>
  72. <p>J’attendais d’avoir un peu de recul pour parler d’adaptations que j’ai pu faire sur mon vélo pour ménager mon corps vieillissant. Je rappelle que je suis dans un contexte où les chaussées sont soumises à des contraintes climatiques (et politiques) extrêmes. À tel point que mon vélo de triathlon en carbone reste au garage depuis 5&nbsp;ans… à part pour aller faire <a href="https://www.parcjeandrapeau.com/fr/circuit-gilles-villeneuve-montreal/">quelques tours de hamster</a> à l’occasion.</p>
  73. <p>J’ai <a href="https://konaworld.com/archive/2017/jake_the_snake.cfm">ce vélo</a> depuis 4&nbsp;ans, acheté en fin de saison en promo. On a connu ensemble toutes les météos possibles et imaginables et je suis bien content qu’il roule encore&#8239;! Les améliorations pour l’adapter à mon niveau de confort&nbsp;:</p>
  74. <ol>
  75. <li>Passer à des pneus en 38&#8239;mm — ce sont les plus larges qui rentrent dans la fourche — qui plus est <em>tubeless</em> pour ne pas avoir à trop les gonfler (sans risquer de pincer la chambre à air). Je sais que ça peut être beaucoup plus galère si tu arrives à crever quand même mais ça ne m’est pas encore arrivé, le scellant fait sa job.</li>
  76. <li>Suspendre la selle et le guidon <a href="https://redshiftsports.com/pages/shockstop">avec des élastomères</a> pour encaisser les chocs tout en restant sur un profil course. Ce changement est plus récent et j’ai hésité à changer complètement de vélo pour intégrer la suspension au cadre mais ça m’a semblé plus portable/durable ainsi. Je n’ai pas encore testé ce que ça donne par grand froid mais dans ces conditions ça ne me dérange pas que le vélo soit plus rigide.</li>
  77. <li>Changer de selle pour une <a href="https://infinitybikeseat.com/">version suspendue</a> également. Pour être plus précis, c’est la sensation d’être suspendu qui est assez unique et c’était un peu un coup de poker (vu le prix&#8239;!) mais j’en suis très content après 6&nbsp;mois d’utilisation (ouf&#8239;!).</li>
  78. </ol>
  79. <p>La combinaison de ces trois modifications me permet de prendre le vélo quotidiennement pour aller à l’école (~15&#8239;km, ~1000&#8239;km à l’année) sans avoir de cuissard. De faire des <a href="/david/2020/05/20/">escapades</a> plus lointaines. Mais aussi de faire les courses, aller à la bibliothèque, à la piscine, gravir la seule <a href="https://fr.wikipedia.org/wiki/Mont_Royal">montagne locale</a>, etc. C’est mon moyen de locomotion principal, de loin.</p>
  80. <p>L’autre point fort, c’est que je n’ai plus mal aux poignets ni au bas du dos qui, à force de contracter à chaque nid-de-foule, finissaient par induire une fatigue musculaire qui n’était pas liée à la puissance me permettant d’avancer. Je n’ai pas l’impression d’avoir perdu en efficacité — malgré la suspension — justement car ce gain est d’un ordre de grandeur au-dessus dans mon cas. Même si la transition s’est faite sur plusieurs mois, j’ai pu sentir l’évolution des douleurs et je commence à avoir fait suffisamment de sports pour savoir qu’il faut préserver ce qu’il nous reste le plus longtemps possible&nbsp;:-).</p>
  81. <blockquote>
  82. <p>Toutes les religions organisées ont à faire face à un problème commun, qui représente le point faible par où nous pouvons les pénétrer et les orienter selon nos propres besoins. Ce problème est&nbsp;: comment faire la distinction entre la révélation et l’<em>hubris</em>&#8239;?</p>
  83. <p><cite><em>Missionaria Protectiva, Enseignement pour les Initiés</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
  84. </blockquote>
  85. <figure>
  86. <a href="#jake-the-snake"
  87. title="Cliquer pour une version haute résolution">
  88. <img src="/static/david/2021/jake-the-snake.jpg" alt="Une photo du vélo incluant les modifications."
  89. loading="lazy" width="2048" height="1536" />
  90. </a>
  91. <a href="#_" class="lightbox" id="jake-the-snake">
  92. <img src="/static/david/2021/jake-the-snake.jpg" alt="Une photo du vélo incluant les modifications."
  93. loading="lazy" width="2048" height="1536" />
  94. </a>
  95. <figcaption>Sur la tige de selle, l’accroche pour le <a href="https://rideweehoo.com/">Weehoo</a> qui nous comble depuis plus d’un an.</figcaption>
  96. </figure>
  97. <nav>
  98. <p>
  99. <a href="/david/2021/materiel/"
  100. title="Liste de tous les articles associés à cette étiquette"
  101. >#matériel</a>
  102. <a href="/david/2021/technique/"
  103. title="Liste de tous les articles associés à cette étiquette"
  104. >#technique</a>
  105. <a href="/david/#tags"
  106. title="Liste de toutes les étiquettes existantes"
  107. ><svg class="icon icon-tags">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  109. </svg> tous ?</a>
  110. </p>
  111. </nav>
  112. <nav>
  113. <p class="center">
  114. <a rel="prev" href="/david/2021/09/03/" title="Publication précédente : Pouvoir">← Précédent</a> •
  115. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  116. • <a rel="next" href="/david/2021/09/05/" title="Publication suivante : Silence">Suivant →</a>
  117. </p>
  118. </nav>
  119. </article>
  120. <hr>
  121. <footer>
  122. <p>
  123. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  125. </svg> Accueil</a> •
  126. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  128. </svg> Suivre</a> •
  129. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  131. </svg> Pro</a> •
  132. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  133. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  134. </svg> Email</a> •
  135. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  136. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  137. </svg> Légal</abbr>
  138. </p>
  139. <template id="theme-selector">
  140. <form>
  141. <fieldset>
  142. <legend><svg class="icon icon-brightness-contrast">
  143. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  144. </svg> Thème</legend>
  145. <label>
  146. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  147. </label>
  148. <label>
  149. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  150. </label>
  151. <label>
  152. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  153. </label>
  154. </fieldset>
  155. </form>
  156. </template>
  157. </footer>
  158. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  159. <script>
  160. function loadThemeForm(templateName) {
  161. const themeSelectorTemplate = document.querySelector(templateName)
  162. const form = themeSelectorTemplate.content.firstElementChild
  163. themeSelectorTemplate.replaceWith(form)
  164. form.addEventListener('change', (e) => {
  165. const chosenColorScheme = e.target.value
  166. localStorage.setItem('theme', chosenColorScheme)
  167. toggleTheme(chosenColorScheme)
  168. })
  169. const selectedTheme = localStorage.getItem('theme')
  170. if (selectedTheme && selectedTheme !== 'undefined') {
  171. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  172. }
  173. }
  174. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  175. window.addEventListener('load', () => {
  176. let hasDarkRules = false
  177. for (const styleSheet of Array.from(document.styleSheets)) {
  178. let mediaRules = []
  179. for (const cssRule of styleSheet.cssRules) {
  180. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  181. continue
  182. }
  183. // WARNING: Safari does not have/supports `conditionText`.
  184. if (cssRule.conditionText) {
  185. if (cssRule.conditionText !== prefersColorSchemeDark) {
  186. continue
  187. }
  188. } else {
  189. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  190. continue
  191. }
  192. }
  193. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  194. }
  195. // WARNING: do not try to insert a Rule to a styleSheet you are
  196. // currently iterating on, otherwise the browser will be stuck
  197. // in a infinite loop…
  198. for (const mediaRule of mediaRules) {
  199. styleSheet.insertRule(mediaRule.cssText)
  200. hasDarkRules = true
  201. }
  202. }
  203. if (hasDarkRules) {
  204. loadThemeForm('#theme-selector')
  205. }
  206. })
  207. </script>
  208. </body>
  209. </html>