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

index.html 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  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>Char — David Larlet</title>
  13. <meta name="description" content="Antoine me demande un peu de contexte sur Combien coûte mon char ? et c’est l’occasion de revenir sur cette notion de comptabilité et aussi pourquoi j’ai finalement fait ce choix.">
  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>Char</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/07/15/" title="Publication précédente : Nocturne">← 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/07/17/" title="Publication suivante : Long terme">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <p><a href="https://www.antoine-augusti.fr/">Antoine</a> me demande un peu de contexte sur <a href="http://tmp.larlet.fr/ccmc/">Combien coûte mon char&#8239;?</a> et c’est l’occasion de revenir sur cette notion de <a href="/david/2021/02/15/" title="Comptabilité">comptabilité</a> et aussi pourquoi j’ai finalement fait ce choix.</p>
  68. <p>Avoir un véhicule motorisé n’est pas un plaisir, c’est même plutôt <a href="/david/2021/07/09/" title="Balle">un danger</a>. On a pu s’en passer avec le sourire pendant 4&nbsp;ans à Montréal mais on s’est un peu trouvés démunis lorsqu’il fallut accompagner l’enfant à l’école l’hiver alors que la prise des transports en commun devenait problématique #pandémie.</p>
  69. <h2 id="pourquoi-pas-le-velo">Pourquoi pas le vélo&#8239;? <a href="#pourquoi-pas-le-velo" title="Ancre vers cette partie">#</a></h2><p>Il y a 3&nbsp;mois pendant lesquels c’est critique en raison du froid et de ses conséquences (engelures, glissades, visibilité, etc) mais c’est surtout pour protéger le matériel que je ne retiens pas cette option. Le sel/sable déversé sur les routes et les voitures qui le projettent détérioreraient le matériel trop rapidement et j’en ai bien besoin les 9&nbsp;autres mois&#8239;! Peut-être qu’au moment où il y aura une piste cyclable sécurisée depuis le pallier jusqu’à l’école cela changera. <a href="https://montreal.ca/articles/implantation-de-voies-cyclables-dans-ahuntsic-cartierville-5150">Ça s’en vient</a> (<a href="/david/cache/2021/1bbae4b7e1e642fda7cbc70540b51710/">cache</a>) et je m’en réjouis.</p>
  70. <p>En imaginant devoir en changer tous les 2/3&nbsp;ans pour l’usure prématurée, j’ai beaucoup hésité avec un <em>fatbike</em> (à assistance électrique) mais l’enfant restait trop bas en arrière. Il faut voir les vagues de <em>sloche</em> qu’une voiture peut produire par ici.</p>
  71. <h2 id="pourquoi-une-grosse-et-vieille-voiture-thermique">Pourquoi une grosse et vieille voiture thermique&#8239;? <a href="#pourquoi-une-grosse-et-vieille-voiture-thermique" title="Ancre vers cette partie">#</a></h2><p>Je voulais le <a href="/david/2020/02/07/#cars">moins d’électronique</a> possible et plutôt prendre un vieux véhicule robuste qui me permette de sortir d’un banc de neige et peut-être à terme de la ville. Il y a aussi le fait que les routes québécoises étant ce qu’elles sont, non seulement ça secoue pas mal mais ça devient rapidement dangereux si t’es obligé de slalomer entre les nids de foule #ironème. Enfin, il y a un côté militant à ne pas acheter un véhicule neuf. Il y a suffisamment de voitures sur cette planète, n’en déplaise aux <em>boomers</em> du quartier qui s’achètent la dernière Tesla pour avoir bonne conscience tout en revendant leur SUV à celleux qui n’en ont pas les moyens (et qui seront ensuite davantage taxés sinon c’est moins drôle).</p>
  72. <p>Autre point <em>positif</em>&nbsp;: elle chauffe et consomme beaucoup. Ce qui signifie que je rechigne à faire des longs trajets avec et que cela devient physiquement perceptible que je fais partie du problème si je la prends l’été. J’essaye également d’avoir la conduite la plus économe possible avec ce véhicule, d’autant que le prix de l’essence a augmenté de 40&#8239;% depuis son achat…</p>
  73. <h2 id="bilan-apres-9-mois">Bilan après 9&nbsp;mois&#8239;? <a href="#bilan-apres-9-mois" title="Ancre vers cette partie">#</a></h2><p>Je m’attendais à ce que ça nous coûte cher et je n’ai pas été déçu. Notamment car il y avait beaucoup de pièces rouillées (merci le sel) que je n’avais pas prises en considération comme étant des dépenses imminentes. J’aurais au moins appris un peu de mécanique… mais c’est clairement la catégorie des réparations qui plombe le budget.</p>
  74. <p>Cette comptabilité me permet aussi de comparer le coût avec celui potentiel d’une voiture louée pour quelques mois d’hiver. Ça pourrait devenir une option à moyen terme.</p>
  75. <p>Un point positif comparé à la location ponctuelle, c’est que ce soit moins la course pour aller chercher/ramener le véhicule, ce qui ajoutait un autre style de stress et de fatigue aux sorties. Je peux aussi partir plus tôt dans la journée, m’adapter à mon propre rythme.</p>
  76. <p><em>Note&nbsp;: si vous devez faire votre propre outil, je vous recommande d’attribuer une date à chacun des évènements, c’est la base mais je ne l’ai pas fait sur certaines écritures et je l’ai regretté par la suite. C’est notamment limitant pour des représentations graphiques pertinentes.</em></p>
  77. <blockquote>
  78. <p>La survie de l’individu, de l’espèce et de l’environnement, voilà ce qui motive l’être humain. <mark>On observera que l’ordre d’importance varie au cours de la vie.</mark> Qu’est-ce qui réclame le plus d’attention à un âge donné&#8239;? Le temps qu’il fait&#8239;? L’état de la digestion&#8239;? Éprouve-t-il (ou elle) réellement quelque chose pour moi&#8239;? Tous ces appétits variés que la chair est capable de ressentir et peut raisonnablement espérer satisfaire. Quelles autres choses pourraient avoir de l’importance&#8239;?</p>
  79. <p><cite><em>À Hwi Noree, La Voix de Leto II, Dar-es-Balat</em>, <em><a href="/david/2020/12/21/#dune">Dune</a> V. Les Hérétiques de Dune</em>, Frank Herbert</cite></p>
  80. </blockquote>
  81. <nav>
  82. <p>
  83. <a href="/david/2021/anxiete/"
  84. title="Liste de tous les articles associés à cette étiquette"
  85. >#anxiété</a>
  86. <a href="/david/2021/capitalocene/"
  87. title="Liste de tous les articles associés à cette étiquette"
  88. >#capitalocène</a>
  89. <a href="/david/2021/recherche/"
  90. title="Liste de tous les articles associés à cette étiquette"
  91. >#recherche</a>
  92. <a href="/david/#tags"
  93. title="Liste de toutes les étiquettes existantes"
  94. ><svg class="icon icon-tags">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  96. </svg> tous ?</a>
  97. </p>
  98. </nav>
  99. <nav>
  100. <p class="center">
  101. <a rel="prev" href="/david/2021/07/15/" title="Publication précédente : Nocturne">← Précédent</a> •
  102. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  103. • <a rel="next" href="/david/2021/07/17/" title="Publication suivante : Long terme">Suivant →</a>
  104. </p>
  105. </nav>
  106. </article>
  107. <hr>
  108. <footer>
  109. <p>
  110. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  111. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  112. </svg> Accueil</a> •
  113. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  115. </svg> Suivre</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  118. </svg> Pro</a> •
  119. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  121. </svg> Email</a> •
  122. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  124. </svg> Légal</abbr>
  125. </p>
  126. <template id="theme-selector">
  127. <form>
  128. <fieldset>
  129. <legend><svg class="icon icon-brightness-contrast">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  131. </svg> Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  146. <script>
  147. function loadThemeForm(templateName) {
  148. const themeSelectorTemplate = document.querySelector(templateName)
  149. const form = themeSelectorTemplate.content.firstElementChild
  150. themeSelectorTemplate.replaceWith(form)
  151. form.addEventListener('change', (e) => {
  152. const chosenColorScheme = e.target.value
  153. localStorage.setItem('theme', chosenColorScheme)
  154. toggleTheme(chosenColorScheme)
  155. })
  156. const selectedTheme = localStorage.getItem('theme')
  157. if (selectedTheme && selectedTheme !== 'undefined') {
  158. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  159. }
  160. }
  161. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  162. window.addEventListener('load', () => {
  163. let hasDarkRules = false
  164. for (const styleSheet of Array.from(document.styleSheets)) {
  165. let mediaRules = []
  166. for (const cssRule of styleSheet.cssRules) {
  167. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  168. continue
  169. }
  170. // WARNING: Safari does not have/supports `conditionText`.
  171. if (cssRule.conditionText) {
  172. if (cssRule.conditionText !== prefersColorSchemeDark) {
  173. continue
  174. }
  175. } else {
  176. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  177. continue
  178. }
  179. }
  180. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  181. }
  182. // WARNING: do not try to insert a Rule to a styleSheet you are
  183. // currently iterating on, otherwise the browser will be stuck
  184. // in a infinite loop…
  185. for (const mediaRule of mediaRules) {
  186. styleSheet.insertRule(mediaRule.cssText)
  187. hasDarkRules = true
  188. }
  189. }
  190. if (hasDarkRules) {
  191. loadThemeForm('#theme-selector')
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>