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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  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. Apocalypse
  14. — David Larlet</title>
  15. <meta name="description" content="Lorsque je reste assis ou marche dans la forêt, je ne suis pas un « sujet » en train d’observer des « objets ». En entrant dans le mandala, je suis pris dans des réseaux de communication, des maillages de relations. Que j’en sois conscient ou non, je mets en branle ces réseaux en effarouchant un cerf, en faisant sursauter un tamia ou en marchant sur une feuille verte. Il n’est pas possible d’observer le milieu en en étant dissocié.">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/triplicate_t3_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/triplicate_t3_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/triplicate_t3_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick"
  106. data-instant-intensity="viewport-all">
  107. <article>
  108. <header>
  109. <h1>Apocalypse</h1>
  110. </header>
  111. <nav>
  112. <p class="center">
  113. <a rel="prev"
  114. href="/david/2023/06/06/"
  115. title="Publication précédente : Réponse(s)">← Précédent</a> •
  116. <nobr>
  117. <a href="/david/" title="Aller à l’accueil" rel="up">
  118. <svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  120. </svg>
  121. Accueil</a>
  122. </nobr>
  123. <nobr>
  124. <a href="/david/recherche/"
  125. title="Aller à la page de recherche"
  126. rel="search">
  127. <svg class="icon icon-search">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"></use>
  129. </svg>
  130. Recherche</a>
  131. </nobr>
  132. • <a rel="next"
  133. href="/david/2023/06/19/"
  134. title="Publication suivante : Village">Suivant →</a>
  135. </p>
  136. </nav>
  137. <hr>
  138. <blockquote>
  139. <p>Lorsque je reste assis ou marche dans la forêt, je ne suis pas un «&nbsp;sujet&nbsp;» en train d’observer des «&nbsp;objets&nbsp;». En entrant dans le mandala, je suis pris dans des réseaux de communication, des maillages de relations. Que j’en sois conscient ou non, je mets en branle ces réseaux en effarouchant un cerf, en faisant sursauter un tamia ou en marchant sur une feuille verte. Il n’est pas possible d’observer le milieu en en étant&nbsp;dissocié.</p>
  140. <p>Les réseaux exercent également une influence sur moi. Chaque inspiration introduit dans mon organisme des centaines de molécules en suspension dans l’air. Ces molécules constituent l’arôme des bois, la senteur combinée de milliers de créatures. Certains arômes sont si agréables à l’homme qu’il les a domestiqués pour en extraire des «&nbsp;parfums&nbsp;». Un de ces parfums au moins, le jasmonate, est un signal d’alarme chimique, qui avertit les autres plantes d’un danger. Peut-être notre esthétique olfactive reflète-t-elle un désir de participer à la lutte de la&nbsp;nature&#8239;?</p>
  141. <p>Mais les parfums sont l’exception. La plupart des molécules de la forêt court-circuitent mon odorat et se dissolvent directement dans mon sang, pénétrant dans mon corps et mon esprit sans que j’en aie conscience. Les effets de cette imprégnation chimique de notre organisme par les arômes végétaux ont été très peu étudiés. La science occidentale ne s’est pas abaissée à prendre au sérieux l’idée que la forêt, ou son absence, puisse faire partie de notre être. Pourtant les amoureux de la forêt savent très bien que les arbres influent sur notre état d’esprit. Les Japonais ont nommé cette connaissance et en ont fait une pratique, <em>shinrin-yoku</em>, «&nbsp;se baigner dans l’air de la forêt&nbsp;». Il semble que le fait de participer à la communauté d’information du mandala apporte un certain bien-être dans le cœur chimique de notre&nbsp;organisme.</p>
  142. <p><cite><em>Un an dans la vie d’une forêt</em>, David G. Haskell</cite></p>
  143. </blockquote>
  144. <p>La couleur du ciel de cette semaine est peut-être la nouvelle lueur du ciel en été&nbsp;: jaune, cendrée, atypique. Mortelle.</p>
  145. <p>J’ai déjà un filtre sur mon robinet (une partie de mes conduites sont en plomb, encore courant à Montréal), est-ce qu’il va bientôt me falloir un filtre à air pour pouvoir respirer sainement&#8239;? La sélection privilégio-capitaliste est en&nbsp;marche.</p>
  146. <p>Comment pleure-t-on (de rire&#8239;?) devant un film lorsqu’on porte un masque de ski&#8239;? Est-ce qu’un casque de <em>Spatial Computing</em> permettra de protéger ses yeux de la fumée&#8239;? Et si cela devenait la seule façon de voir un ciel bleu&#8239;? Peut-être que <a href="/david/blog/2016/si-cest-gratuit/">la symbiose</a> devra faire partie de nos conditions de survie dans la fournaise que nous&nbsp;créons.</p>
  147. <p>Nous n’avons plus le temps pour des outils numériques individualistes. Nous n’avons plus le temps. Pour <a href="https://fr.wikipedia.org/wiki/Notre_maison_br%C3%BBle_et_nous_regardons_ailleurs">paraphraser</a> un autre escroc&nbsp;présidentiel&nbsp;:</p>
  148. <blockquote>
  149. <p>Notre forêt brûle et nous mettons des&nbsp;masques.</p>
  150. </blockquote>
  151. <nav>
  152. <p>
  153. <a href="/david/2023/foret/"
  154. title="Liste de tous les articles 2023 associés à cette étiquette"
  155. rel="tag">#forêt</a>
  156. <a href="/david/2023/solastalgia/"
  157. title="Liste de tous les articles 2023 associés à cette étiquette"
  158. rel="tag">#solastalgia</a>
  159. <a href="/david/2023/tristesse/"
  160. title="Liste de tous les articles 2023 associés à cette étiquette"
  161. rel="tag">#tristesse</a>
  162. <a href="/david/#tags-2023" title="Liste de toutes les étiquettes 2023">
  163. <svg class="icon icon-tags">
  164. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
  165. </svg>
  166. tous ?</a>
  167. </p>
  168. </nav>
  169. <nav>
  170. <p class="center">
  171. <a rel="prev"
  172. href="/david/2023/06/06/"
  173. title="Publication précédente : Réponse(s)">← Précédent</a> •
  174. <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
  175. • <a rel="next"
  176. href="/david/2023/06/19/"
  177. title="Publication suivante : Village">Suivant →</a>
  178. </p>
  179. </nav>
  180. </article>
  181. <hr>
  182. <footer>
  183. <p>
  184. <nobr>
  185. <a href="/david/" title="Aller à l’accueil">
  186. <svg class="icon icon-home">
  187. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"></use>
  188. </svg>
  189. Accueil</a>
  190. </nobr>
  191. <nobr>
  192. <a href="/david/log/" title="Accès au flux RSS">
  193. <svg class="icon icon-rss2">
  194. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  195. </svg>
  196. Suivre</a>
  197. </nobr>
  198. <nobr>
  199. <a href="http://larlet.com"
  200. title="Go to my English profile"
  201. data-instant>
  202. <svg class="icon icon-user-tie">
  203. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  204. </svg>
  205. Pro</a>
  206. </nobr>
  207. <nobr>
  208. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">
  209. <svg class="icon icon-mail">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  211. </svg>
  212. Email</a>
  213. </nobr>
  214. <nobr>
  215. <abbr class="nowrap"
  216. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">
  217. <svg class="icon icon-hammer2">
  218. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  219. </svg>
  220. Légal</abbr>
  221. </nobr>
  222. </p>
  223. <template id="theme-selector">
  224. <form>
  225. <fieldset>
  226. <legend>
  227. <svg class="icon icon-brightness-contrast">
  228. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  229. </svg>
  230. Thème
  231. </legend>
  232. <label>
  233. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  234. Auto
  235. </label>
  236. <label>
  237. <input type="radio" value="dark" name="chosen-color-scheme">
  238. Foncé
  239. </label>
  240. <label>
  241. <input type="radio" value="light" name="chosen-color-scheme">
  242. Clair
  243. </label>
  244. </fieldset>
  245. </form>
  246. </template>
  247. </footer>
  248. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  249. <script>
  250. function loadThemeForm(templateName) {
  251. const themeSelectorTemplate = document.querySelector(templateName)
  252. const form = themeSelectorTemplate.content.firstElementChild
  253. themeSelectorTemplate.replaceWith(form)
  254. form.addEventListener('change', (e) => {
  255. const chosenColorScheme = e.target.value
  256. localStorage.setItem('theme', chosenColorScheme)
  257. toggleTheme(chosenColorScheme)
  258. })
  259. const selectedTheme = localStorage.getItem('theme')
  260. if (selectedTheme && selectedTheme !== 'undefined') {
  261. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  262. }
  263. }
  264. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  265. window.addEventListener('load', () => {
  266. let hasDarkRules = false
  267. for (const styleSheet of Array.from(document.styleSheets)) {
  268. let mediaRules = []
  269. for (const cssRule of styleSheet.cssRules) {
  270. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  271. continue
  272. }
  273. // WARNING: Safari does not have/supports `conditionText`.
  274. if (cssRule.conditionText) {
  275. if (cssRule.conditionText !== prefersColorSchemeDark) {
  276. continue
  277. }
  278. } else {
  279. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  280. continue
  281. }
  282. }
  283. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  284. }
  285. // WARNING: do not try to insert a Rule to a styleSheet you are
  286. // currently iterating on, otherwise the browser will be stuck
  287. // in a infinite loop…
  288. for (const mediaRule of mediaRules) {
  289. styleSheet.insertRule(mediaRule.cssText)
  290. hasDarkRules = true
  291. }
  292. }
  293. if (hasDarkRules) {
  294. loadThemeForm('#theme-selector')
  295. }
  296. })
  297. </script>
  298. </body>
  299. </html>