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

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  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>Vrac — David Larlet</title>
  13. <!-- That good ol' feed, subscribe :). -->
  14. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  15. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  16. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  17. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  18. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  19. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  20. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  21. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  22. <meta name="msapplication-TileColor" content="#f0f0ea">
  23. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- Documented, feel free to shoot an email. -->
  26. <link rel="stylesheet" href="/static/david/css/style_2020-04-25.css">
  27. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  28. <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>
  29. <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>
  30. <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>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  35. <article>
  36. <h1>Vrac</h1>
  37. <nav>
  38. <p class="center">
  39. <a rel="prev" href="/david/2020/05/26/" title="Publication précédente : Covidoudou">←</a> •
  40. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  41. • <a rel="next" href="/david/2020/06/18/" title="Publication suivante : Mouvements">→</a>
  42. </p>
  43. </nav>
  44. <hr>
  45. <p><em>Plein de trucs car je manque de temps pour faire moins.</em></p>
  46. <h2 id="passivite">Passivité <a href="#passivite" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  47. <blockquote lang="en">
  48. <p>Most of my actions lately have been very passive. Listening. Watching. <mark>Because my actions are passive, they are indistinguishable from silence.</mark> That’s not good. Silence can be interpreted as acquiescence, acceptance. That’s not what I intend …but my intentions don’t matter.</p>
  49. <p><cite><em><a href="https://adactio.com/journal/16986">Intent</a></em> (<a href="/david/cache/2020/50cdcad7054aa6777687db43157b9f0f/">cache</a>)</cite></p>
  50. </blockquote>
  51. <p>Difficile de s’exprimer en ce moment. Entre les injonctions au silence pour laisser de l’espace et l’invitation à faire un pas de côté qui ressemblerait à de l’indifférence, il n’y a qu’une différence d’intention et d’interprétation.</p>
  52. <p>Ma croyance de dominant/oppresseur est — <a href="/david/2020/03/20/#souvenir">toujours</a> — que le dialogue reste nécessaire malgré tout.</p>
  53. <h2 id="ephemere">Éphémère <a href="#ephemere" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  54. <blockquote>
  55. <p>Une civilisation humaine complexe, en fait, produit toujours elle-même les germes de son propre déclin et de sa propre disparition, et comme nous l’avons déjà vu, elle le fait à travers les mêmes processus qui sous-tendent son ascension et son succès. En d’autres termes, une civilisation humaine complexe n’est pas censée être durable, car elle ne peut pas l’être.</p>
  56. <p><cite><em><a href="https://www.pauljorion.com/blog/2020/05/17/le-coronavirus-et-le-sort-de-la-civilisation-industrielle-par-paul-arbair/">Le coronavirus et le sort de la civilisation industrielle, par Paul Arbair</a></em> (<a href="/david/cache/2020/46bb95c9d128d4ca05d8b5746cf3f4e7/">cache</a>)</cite></p>
  57. </blockquote>
  58. <p>Toutes les espèces sont éphémères, c’est une question de temps. Pas toutes ne créent les conditions de leur propre déclin par contre. #EnTouteModestie c’est peut-être même une première dont on pourrait être fiers.</p>
  59. <p><em>Humain (n, m) : espèce ayant eu l’impact d’une comète sur sa propre planète.</em></p>
  60. <h2 id="nucleaire">Nucléaire <a href="#nucleaire" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  61. <blockquote>
  62. <p>Chaque calorie tirée de la pêche ou de la cueillette, chaque photon assimilé par le corps est dépensé pour pêcher, cueillir, puiser l’eau et couper le bois. L’homme des bois est une machine de recyclage énergétique. Le recours aux forêts est recours à soi-même. Privé de voiture, l’ermite marche. Privé de supermarché, il pêche. Privé de chaudière, son bras fend le bois. Le principe de non-délégation concerne aussi l’esprit : <mark>privé de télé, il ouvre un livre</mark>. […] Le communisme de la cabane consiste à refuser les intermédiaires. L’ermite sait d’où vient son bois, son eau, la chair de ce qu’il mange et la fleur d’églantier qui parfume sa table. Le principe de proximité guide sa vie. Il refuse de vivre dans l’abstraction du progrès et de ponctionner une énergie dont il ignore tout. Être moderne : refuser de se préoccuper de l’origine des bienfaits du progrès.</p>
  63. <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>
  64. </blockquote>
  65. <p>Je sors de 8 heures sans électricité, probablement en raison de la chute d’un arbre vu la violence des vents. Un bon moyen de réévaluer sa dépendance à l’énergie, d’apprendre à vivre avec un approvisionnement non continu. Peut-être <a href="https://www.youtube.com/watch?v=nUz_L8AfGbI">notre futur</a> d’après <a href="/david/2020/12/15/#jean-marc-jancovici">Jean-Marc Jancovici</a> qui considère le nucléaire comme étant la moins pire solution pour accompagner la décroissance énergétique qui s’en vient (vers 1 h 29 min).</p>
  66. <p>Au détour d’un <em>pouet</em> à ce sujet, <a href="https://mastodon.fedi.quebec/@waglo">Robin Millette</a> me propose de <a href="https://www.youtube.com/watch?v=JaF-fq2Zn7I">regarder Bill Gates</a> au sujet de <a href="https://en.wikipedia.org/wiki/TerraPower">TerraPower</a>. C’est malheureusement au point mort <a href="https://www.reuters.com/article/us-terrapower-china-idUSKCN1OV1S5">pour des raisons politiques</a> (<a href="/david/cache/2020/1f01bec376e6423e9ea08aef6af23a34/">cache</a>).</p>
  67. <p><em>L’énergie est plus que jamais politique.</em></p>
  68. <h2 id="langue">Langue <a href="#langue" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Suite à cet <a href="/david/2020/03/20#panic">épisode de panique</a>, j’ai pas mal réfléchi à la meilleure façon de déclarer la langue des citations. Je ne voulais pas trop m’éloigner de la syntaxe <a href="https://commonmark.org/">CommonMark</a> tout en faisant en sorte que ça reste élégant et lisible si jamais un jour je change d’outil d’édition/génération. Je suis arrivé avec <a href="https://mistune.readthedocs.io/">Mistune</a> à <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/commit/be771a47c935853380df34eb6e7a31f100e407f7">préfixer la citation avec la langue entre crochets</a> et je m’en suis tenu à la langue anglaise car c’est la seule que je cite en dehors du français. Il sera temps d’itérer en fonction du besoin.</p>
  69. <p>Plus intéressant que le résultat, c’est le cheminement. J’ai considéré dans un premier temps des commentaires HTML du style <code>&lt;!-- lang:en --&gt;</code> en début de citation mais ça faisait pas mal de caractères. Je suis ensuite passé par des <em>x-tags</em> du genre <code>&lt;x-attr&gt;lang:en&lt;/x-attr&gt;</code> ou même uniquement en attribut mais c’était encore verbeux.</p>
  70. <p><em>La solution actuelle me semble être plus explicite.</em></p>
  71. <h2 id="flamme">Flamme <a href="#flamme" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  72. <blockquote>
  73. <p>Quelques pages du <em>Neveu de Rameau</em> finissent par prendre. Pas la première fois que Diderot déclenche des incendies. Une flamme anémique s’élève d’un petit tas d’écorce râpée, séchée contre ma peau. Le feu, pauvre animal blessé par l’orage. Je le fais grandir brindille par brindille. La flamme vacille, j’ai des émotions de réanimateur cardiaque. Elle gonfle, c’est la victoire. Je souffle à m’en étourdir et obtiens un brasier.</p>
  74. <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>
  75. </blockquote>
  76. <p>C’est un plaisir de voir <a href="https://www.la-grange.net/">La Grange</a> partager à nouveau quotidiennement, tout en douceur.</p>
  77. <p>Cela m’é<em>meuh</em> beaucoup.</p>
  78. <h2 id="re-mark-able">Re-mark-able <a href="#re-mark-able" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Suite des aventures du <a href="/david/2020/02/21/#surlignage">surlignage</a>, j’ai finalement <a href="https://git.larlet.fr/davidbgk/larlet-fr-david/commit/9bb4c063d328ffb090f00c7a81ec8cecc2aa643c">adopté le double égal</a> qui n’est pas standard mais qui est le rendu proposé par mon éditeur actuel. Là aussi, des choix techniques pour un confort d’édition qui vont probablement me revenir dans les dents un jour. Il sera toujours temps de convertir les données… une façon de les maintenir vivantes (?).</p>
  79. <figure>
  80. <img src="/static/david/2020/capture_citation_iawriter.png"
  81. alt="Capture d’écran de l’éditeur iaWriter pour une citation"
  82. loading="lazy" width="1280" height="807" />
  83. <figcaption>Ce que ça donne dans iaWriter avec la langue en préfixe + le surlignage en double égal.</figcaption>
  84. </figure>
  85. <h2 id="confiance">Confiance <a href="#confiance" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  86. <blockquote lang="en">
  87. <p>For whatever reason, we put trust in code that is in a centralized registry. We don’t even think about it. Not only that, we trust that that code has fully vetted all of its dependencies and that those are to be trusted to.</p>
  88. <p><cite><em><a href="https://kitsonkelly.com/posts/deno-is-a-browser-for-code/">Deno is a Browser for Code</a></em> (<a href="/david/cache/2020/e0ed8bab5c145d37065c607deace5bff/">cache</a>)</cite></p>
  89. </blockquote>
  90. <p>Je n’étais pas plus que ça intéressé par <a href="https://deno.land/">Deno</a> avant cet article. Maintenant, je suis curieux :-).</p>
  91. <p>Pas tant du concept mais de l’adoption par la communauté. Pouvoir observer si une nouvelle fois Microsoft va pouvoir racheter l’espace centralisateur (coucou Github, coucou NPM).</p>
  92. <h2 id="experimentations">Expérimentations <a href="#experimentations" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  93. <blockquote>
  94. <p>Nous avons besoin d’expérimentations. <mark>Et ce n’est pas la Suède qui expérimente ici. Ce sont les autres.</mark> Nous n’avons jamais paralysé des sociétés et des économies à ce point et il nous faudra beaucoup de temps avant de comprendre les effets d’une action aussi radicale.</p>
  95. <p>Je pense que tout le monde, et surtout tous ceux qui, dans le monde entier, ont opté pour une approche assez agressive, devraient être heureux que la Suède ait emprunté une autre voie.</p>
  96. <p><cite><em><a href="https://www.contrepoints.org/2020/04/28/370150-coronavirus-letonnante-politique-de-la-suede">Coronavirus : l’étonnante politique de la Suède</a></em> (<a href="/david/cache/2020/0fd34b15eca024dc3997303386b7476e/">cache</a>)</cite></p>
  97. </blockquote>
  98. <p>Même si le résultat <a href="/david/2020/05/18/#ouverture">m’est frustrant</a>, je suis content que nous ayons pu expérimenter autre chose, l’espace de quelques mois.</p>
  99. <p>J’ai l’impression que cela a pu ouvrir d’autres chemins de pensées. Je m’autorise à discerner un réveil plus profond, sur le moyen terme.</p>
  100. <p><em>Une fois la <a href="https://nota-bene.org/Sideration">sidération</a> (<a href="/david/cache/2020/f26b817a24cf4f4698a71310f6d87ff8/">cache</a>) passée.</em></p>
  101. <h2 id="echec">Échec <a href="#echec" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  102. <blockquote>
  103. <p>Faut-il à tout prix gagner les bois si l’on refuse son temps ? On peut trouver silence dans ses voûtes intérieures.</p>
  104. <p>On peut aussi fermer les yeux : <mark>la paupière est l’écran le plus efficace entre soi et le monde.</mark></p>
  105. <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>
  106. </blockquote>
  107. <p>Je n’ai pas pris le temps de raconter ma dernière escapade <a href="/david/bushcraft/">en forêt</a>. C’est dommage car pour une fois ça s’est plutôt mal passé : pas la météo attendue et surtout difficulté à fermer les yeux sur ce monde l’espace de 48 heures.</p>
  108. <p><em>Si ma seule soupape se bouche, ça va exploser…</em></p>
  109. <blockquote>
  110. <p>À la manière de ces ésotériques guénoniens obsédés par l’identification de « l’âge d’or », nous sommes quelques âmes nomades qui cherchons par tous les moyens à revivre les moments intenses de nos existences. […] Tout ce que nous entreprenons découlerait d’une inspiration éphémère, intangible. Une fraction de seconde fonderait l’existence. Les bouddhistes nomment <em>Satori</em> ces instants où la conscience entrevoit quelque chose. À peine né, le surgissement s’évanouit. À l’aveugle, on chercher à le ramener. On voudrait ressusciter la sensation disparue.</p>
  111. <p><cite><em>Ibid.</em></cite></p>
  112. </blockquote>
  113. <nav>
  114. <p class="center">
  115. <a rel="prev" href="/david/2020/05/26/" title="Publication précédente : Covidoudou">←</a> •
  116. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  117. • <a rel="next" href="/david/2020/06/18/" title="Publication suivante : Mouvements">→</a>
  118. </p>
  119. </nav>
  120. </article>
  121. <hr>
  122. <footer>
  123. <p>
  124. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  125. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  126. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  127. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  128. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  129. </p>
  130. <template id="theme-selector">
  131. <form>
  132. <fieldset>
  133. <legend>Thème</legend>
  134. <label>
  135. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  136. </label>
  137. <label>
  138. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  139. </label>
  140. <label>
  141. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  142. </label>
  143. </fieldset>
  144. </form>
  145. </template>
  146. </footer>
  147. <script src="/static/david/js/instantpage-3.0.0.min.js" type="module" defer></script>
  148. <script type="text/javascript">
  149. /* This is a work in progress with Anthony https://ricaud.me */
  150. // TODISCUSS:
  151. // 1. give a way for the user to close that chooser?
  152. // 2. store preferences? Done using localStorage
  153. // 3. create the template from scratch in JS?
  154. // 4. how to make it generic? (no need for forced-dark/light existing rules)
  155. // Results from a Poll: https://mastodon.social/@dav/104093540923157521
  156. // Avoir un moyen de changer de thème d'un site à la main :
  157. // 49% => Utile
  158. // 23% => Pas utile
  159. // 9% => So 2000
  160. // 19% => Je veux le même
  161. // After 24 hours and 43 votes
  162. // A bit hard to interpret, I guess people wanting it found it useful too!
  163. function toggleTheme(themeName) {
  164. document.body.classList.toggle('forced-dark', themeName === 'dark')
  165. document.body.classList.toggle('forced-light', themeName === 'light')
  166. }
  167. function loadThemeForm(templateName) {
  168. const themeSelectorTemplate = document.querySelector(templateName)
  169. const form = themeSelectorTemplate.content.firstElementChild
  170. themeSelectorTemplate.replaceWith(form)
  171. form.addEventListener('change', (e) => {
  172. const chosenColorScheme = e.target.value
  173. localStorage.setItem('theme', chosenColorScheme)
  174. toggleTheme(chosenColorScheme)
  175. })
  176. const selectedTheme = localStorage.getItem('theme')
  177. if (selectedTheme !== 'undefined') {
  178. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  179. toggleTheme(selectedTheme)
  180. }
  181. }
  182. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  183. window.addEventListener('load', () => {
  184. let hasDarkRules = false
  185. for (const styleSheet of Array.from(document.styleSheets)) {
  186. let mediaRules = []
  187. for (const cssRule of styleSheet.cssRules) {
  188. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  189. continue
  190. }
  191. // WARNING: Safari does not have/supports `conditionText`.
  192. if (cssRule.conditionText) {
  193. if (cssRule.conditionText !== prefersColorSchemeDark) {
  194. continue
  195. }
  196. } else {
  197. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  198. continue
  199. }
  200. }
  201. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  202. }
  203. // WARNING: do not try to insert a Rule to a styleSheet you are
  204. // currently iterating on, otherwise the browser will be stuck
  205. // in a infinite loop…
  206. for (const mediaRule of mediaRules) {
  207. styleSheet.insertRule(mediaRule.cssText)
  208. hasDarkRules = true
  209. }
  210. }
  211. if (hasDarkRules) {
  212. loadThemeForm('#theme-selector')
  213. }
  214. })
  215. </script>
  216. </body>
  217. </html>