Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  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>Temps — David Larlet</title>
  13. <meta name="description" content="Lors de mes chevauchées précédentes, quand je rencontrais des habitants en vallée qui me demandaient en combien de temps avais-je franchi telle vallée ou telle montagne, et que, surpris par mes temps de passage, ils exprimaient le même grand étonnement devant tant de précaution, j’aimais leur répondre inlassablement qu’il eût été judicieux de mettre plus de temps encore.">
  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>Temps</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. • <a rel="next" href="/david/2022/03/23/" title="Publication suivante : Open-source">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote>
  85. <p>Lors de mes chevauchées précédentes, quand je rencontrais des habitants en vallée qui me demandaient en combien de temps avais-je franchi telle vallée ou telle montagne, et que, surpris par mes temps de passage, ils exprimaient le même grand étonnement devant tant de précaution, j’aimais leur répondre inlassablement qu’il eût été judicieux de mettre plus de temps&nbsp;encore.</p>
  86. <p><cite><em>Dans les forêts de l’ours</em>, Rémi&nbsp;Huot</cite></p>
  87. </blockquote>
  88. <p>L’arrivée des bernaches, se réveiller en écoutant des couples de cardinals, le retour des étourneaux aussi. Ce passage du blanc à la vie est d’une brutalité surprenante. Chaque année. Redécouverte de sons et de mouvements&nbsp;aussi.</p>
  89. <p>Avec une saisonnalité aussi marquée, c’est tout un écosystème qui sort de sa torpeur. Les vélos ressortent, le temps des échanges n’est plus dicté par la température, on envisage de sortir plus léger. Oui c’est cela, le manteau de l’hiver fond et on apprécie cette nouvelle&nbsp;légèreté.</p>
  90. <p>Lors de ma dernière sortie, j’ai passé un contrat avec les sapins, je les libère du poids de la neige et ils me libèrent de celui des&nbsp;hommes.</p>
  91. <hr />
  92. <p>Réflexion de camping d’hiver par -15°C&nbsp;: est-ce que l’homme est le seul animal à pouvoir se couvrir à la fois de laine <em>et</em> de plumes&#8239;? Cela étant dit, n’importe quel·le mésange ou <a href="https://media.larlet.fr/2022-renards-01.html">renard·e</a> est bien plus adapté·e à ces&nbsp;conditions…</p>
  93. <p>Trois jours plus tard, il fait 17°C à&nbsp;Montréal.</p>
  94. <hr />
  95. <p>J’ai décidé de faire une étagère au lieu de l’acheter. L’objectif est que le prix des outils + matières premières soit inférieur à celui de l’étagère neuve. Pour l’instant, c’est pas gagné, mais il y a une tel apaisement à raboter des planches (cliché++) que c’est peut-être «&nbsp;rentable&nbsp;» tout de même. Oh et puis ça ouvre des&nbsp;perspectives.</p>
  96. <p>Et c’est important les perspectives, ça crée d’autres temporalité. De celles qui donnent le&nbsp;sourire.</p>
  97. <hr />
  98. <p>On s’est fait accompagné par <a href="https://ricaud.me">Anthony</a> pour explorer Stimulus et TypeScript. C’était en fait beaucoup plus large que cela car on tourne immanquablement autour des bonnes pratiques, des performances, de l’accessibilité. Des trolls aussi. J’ai appris plein de choses et ça m’a ouvert d’autres façons de penser/aborder les choses techniques. Se dé·former en permanence, c’est ce qui me plait tant dans le&nbsp;web.</p>
  99. <hr />
  100. <p>J’ai lu <a href="https://fr.wikipedia.org/wiki/L%27Arabe_du_futur">L’Arabe du futur</a> et c’était douloureux. Entre la radicalisation d’un père et l’acceptation d’une mère, je ne sais pas ce qui m’a le plus crispé mais j’ai continué car j’avais besoin de comprendre les différences culturelles traitées. Et une culture ne se juge&nbsp;pas.</p>
  101. <p>J’ai enchaîné avec <a href="https://fr.wikipedia.org/wiki/L%27Odyss%C3%A9e_d%27Hakim">L’Odyssée d’Hakim</a> qui permet de suivre le parcours d’un réfugié/migrant syrien en comprenant tout ce qu’il perd, ce qu’il endure pour arriver dans un pays où il n’a pas eu la chance de naître. Et où il subira du racisme toute sa vie&nbsp;restante.</p>
  102. <p>Cela m’a mis le nez sur l’indécence de raconter des situations de prises de risques plus ou moins volontaires dans les forêts&nbsp;québécoises.</p>
  103. <hr />
  104. <p>Le vélo est l’une des plus belles inventions&nbsp;humaines.</p>
  105. <h2 id="fugit">Fugit <a href="#fugit" title="Ancre vers cette partie">#</a></h2>
  106. <blockquote>
  107. <p>✊ Ce n’est donc pas uniquement par principe éthique que nous sommes internationalistes mais aussi par stratégie révolutionnaire. Nous défendons donc la nécessité de créer des liens et des alliances entre les forces auto-organisées qui œuvrent pour l’émancipation de toutes et tous sans distinction. C’est ce que nous nommons l’internationalisme par le bas, l’internationalisme des&nbsp;peuples.</p>
  108. <p><cite><em><a href="https://cantinesyrienne.fr/ressources/les-peuples-veulent/guerre-en-ukraine-10-enseignements-syriens">Guerre en Ukraine&nbsp;: 10&nbsp;enseignements syriens</a></em>&nbsp;(<a href="/david/cache/2022/ad5756e74f5c976458c42eeb9e60707e/">cache</a>)</cite></p>
  109. </blockquote>
  110. <blockquote lang="en">
  111. <p>💚 Writing text that can be understood by as many people as possible seems like an obvious best practice. But from news media to legal guidance to academic research, the way we write often <mark>creates barriers</mark> to who can read&nbsp;it.</p>
  112. <p><cite><em><a href="https://pudding.cool/2022/02/plain/">What makes writing more readable?</a></em>&nbsp;(<a href="/david/cache/2022/0dc625e86fb8e680308250b1245f1086/">cache</a>)</cite></p>
  113. </blockquote>
  114. <blockquote lang="en">
  115. <p>🤔 Articulating ideas as simply as possible is attractive, not least because getting people to agree with us is attractive. But we have a tendency to overrate ideas that can be shared easily, with the most apparent advantages. By constant simplifying, we may be lulled into abridging our own ideas a little too much, and sooner or later our audience—or ourselves—might come to expect only these truncated thoughts. What is easy to explain is not necessarily what is best. What is easy to understand is not necessarily what is true. […]</p>
  116. <p>The archives of human cleverness are filled with blunders. When read in a good mood, history is a blooper reel. But it should not be lost on us that history never repeats, and modern technology enables ever more leverage. <mark>The more technology you can harness to commit an idea, and the faster your idea can spread, the greater the magnitude of something going wrong with a single decision.</mark> Scale is a capricious beast, one that becomes easier to summon and harder to predict. Be very careful when you let it in the house. […]</p>
  117. <p>p.s. “If you can’t explain it to a 6-year-old, you don’t understand it yourself.” — Another small disagreement, more implicit. You shouldn’t be so concerned about whether or not you understand something before you try to explain and share. Some things can only grow in the light of&nbsp;others.</p>
  118. <p><cite><em><a href="https://simonsarris.substack.com/p/long-distance-thinking">Long Distance Thinking</a></em>&nbsp;(<a href="/david/cache/2022/985e33814839a9c113720a5142caec0e/">cache</a>)</cite></p>
  119. </blockquote>
  120. <blockquote lang="en">
  121. <p>💯 We also need to question and seek to trim excesses in design which may look good in a design comp, but only serve to frustrate and impede people in practice. These excesses in development and design aren’t simply related, they depend on one another to exist. The more complex a design is, the more it will cost to develop it. Every interaction you simplify, every boondoggle you can remove, represents a benefit to the person who uses what you&nbsp;make.</p>
  122. <p>So make it&nbsp;boring.</p>
  123. <p><cite><em><a href="https://jlwagner.net/blog/make-it-boring/">Make it boring - jlwagner.net</a></em>&nbsp;(<a href="/david/cache/2022/9ad9f5ea367dbd74e4aeeb8471747247/">cache</a>)</cite></p>
  124. </blockquote>
  125. <blockquote lang="en">
  126. <p>🧑‍🚀 The supplementary question is how you build trust and help people feel confident enough to share their half-baked ideas with people they half know. It’s not <em>just</em> about bumping into people outside meetings, <mark>but repeated encounters to build familiarity</mark>, and the environment of the bar or the liminal quality of the corridors, and having gregarious friends and colleagues to connect conversations, and so on and so&nbsp;on.</p>
  127. <p><cite><em><a href="https://interconnected.org/home/2022/03/14/saloons">Workplace serendipity, invention, and lessons from Prohibition 1920-1933</a></em>&nbsp;(<a href="/david/cache/2022/a400ea6d0c196bbcaefbe1cc9af84fbb/">cache</a>)</cite></p>
  128. </blockquote>
  129. <blockquote>
  130. <p>🚗 On a construit un modèle de société où le rêve est d’ha­bi­ter dans une maison indi­vi­duelle sans vis-a-vis avec un grand jardin, avec une ou plusieurs grosse voitures et une route large qui nous amène à une grande ville juste à&nbsp;côté.</p>
  131. <p><mark>C’est ce modèle qu’il nous faut dépas­ser</mark>, et ça pren­dra bien plus que quelques années, que ce soit au niveau chan­ge­ment des menta­li­tés ou au niveau de l’or­ga­ni­sa­tion&nbsp;urbaine.</p>
  132. <p><cite><em><a href="https://n.survol.fr/n/on-ne-fera-pas-leconomie-de-parler-distance-des-logements">On ne fera pas l’économie de parler distance des logements</a></em>&nbsp;(<a href="/david/cache/2022/47b228aca2d77bc5e7eee35437655a8e/">cache</a>)</cite></p>
  133. </blockquote>
  134. <blockquote lang="en">
  135. <p>✍️ Maybe I’ll still change my mind some day, but currently I think the practice of publishing regularly keeps me honest. It can be awkward and embarrassing when I realised I no longer agree with what I wrote, but to have <mark>a public changelog of how I have evolved</mark> as a person is somewhat humbling and&nbsp;clarifying.</p>
  136. <p><cite><em><a href="https://winnielim.org/journal/writing-as-a-practice/">writing as a practice</a></em>&nbsp;(<a href="/david/cache/2022/6e3580538a14b52ac9cb5fd54dfa1384/">cache</a>)</cite></p>
  137. </blockquote>
  138. <nav>
  139. <p class="center">
  140. <a rel="prev" href="/david/2022/03/04/" title="Publication précédente : Régime">← Précédent</a> •
  141. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  142. • <a rel="next" href="/david/2022/03/23/" title="Publication suivante : Open-source">Suivant →</a>
  143. </p>
  144. </nav>
  145. </article>
  146. <hr>
  147. <footer>
  148. <p>
  149. <nobr>
  150. <a href="/david/" title="Aller à l’accueil"
  151. ><svg class="icon icon-home">
  152. <use
  153. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  154. ></use>
  155. </svg>
  156. Accueil</a
  157. >
  158. </nobr>
  159. <nobr>
  160. <a href="/david/log/" title="Accès au flux RSS"
  161. ><svg class="icon icon-rss2">
  162. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  163. </svg>
  164. Suivre</a
  165. >
  166. </nobr>
  167. <nobr>
  168. <a href="http://larlet.com" title="Go to my English profile" data-instant
  169. ><svg class="icon icon-user-tie">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  171. </svg>
  172. Pro</a
  173. >
  174. </nobr>
  175. <nobr>
  176. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  177. ><svg class="icon icon-mail">
  178. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  179. </svg>
  180. Email</a
  181. >
  182. </nobr>
  183. <nobr>
  184. <abbr
  185. class="nowrap"
  186. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  187. ><svg class="icon icon-hammer2">
  188. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  189. </svg>
  190. Légal</abbr
  191. >
  192. </nobr>
  193. </p>
  194. <template id="theme-selector">
  195. <form>
  196. <fieldset>
  197. <legend><svg class="icon icon-brightness-contrast">
  198. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  199. </svg> Thème</legend>
  200. <label>
  201. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  202. </label>
  203. <label>
  204. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  205. </label>
  206. <label>
  207. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  208. </label>
  209. </fieldset>
  210. </form>
  211. </template>
  212. </footer>
  213. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  214. <script>
  215. function loadThemeForm(templateName) {
  216. const themeSelectorTemplate = document.querySelector(templateName)
  217. const form = themeSelectorTemplate.content.firstElementChild
  218. themeSelectorTemplate.replaceWith(form)
  219. form.addEventListener('change', (e) => {
  220. const chosenColorScheme = e.target.value
  221. localStorage.setItem('theme', chosenColorScheme)
  222. toggleTheme(chosenColorScheme)
  223. })
  224. const selectedTheme = localStorage.getItem('theme')
  225. if (selectedTheme && selectedTheme !== 'undefined') {
  226. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  227. }
  228. }
  229. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  230. window.addEventListener('load', () => {
  231. let hasDarkRules = false
  232. for (const styleSheet of Array.from(document.styleSheets)) {
  233. let mediaRules = []
  234. for (const cssRule of styleSheet.cssRules) {
  235. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  236. continue
  237. }
  238. // WARNING: Safari does not have/supports `conditionText`.
  239. if (cssRule.conditionText) {
  240. if (cssRule.conditionText !== prefersColorSchemeDark) {
  241. continue
  242. }
  243. } else {
  244. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  245. continue
  246. }
  247. }
  248. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  249. }
  250. // WARNING: do not try to insert a Rule to a styleSheet you are
  251. // currently iterating on, otherwise the browser will be stuck
  252. // in a infinite loop…
  253. for (const mediaRule of mediaRules) {
  254. styleSheet.insertRule(mediaRule.cssText)
  255. hasDarkRules = true
  256. }
  257. }
  258. if (hasDarkRules) {
  259. loadThemeForm('#theme-selector')
  260. }
  261. })
  262. </script>
  263. </body>
  264. </html>