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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
  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>Quarantaine — David Larlet</title>
  13. <meta name="description" content="Chaque fois que j’accède à une nouvelle connaissance, qu’un nouveau savoir irradie le reste de la journée, les limites de mon ignorance se repoussent d’autant plus. Lorsque j’hésite sur l’empreinte d’une loutre dans la neige, sur celle d’un ours dans la boue ou sur le nom d’une fleur dans les parage ; lorsque je découvre une cascade, une nouvelle sente dans les collines, un nouvel éboulis dans la montagne, comme lorsque je rencontre un aspect inédit de ma nature au détour du chemin, je sonde indirectement l’ampleur de mon innocence et comprends qu’il est souhaitable de ne pas tout savoir.">
  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>Quarantaine</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/04/14/" title="Publication précédente : Ressenti">← 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/04/26/" title="Publication suivante : R&amp;Day">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote>
  85. <p>Chaque fois que j’accède à une nouvelle connaissance, qu’un nouveau savoir irradie le reste de la journée, les limites de mon ignorance se repoussent d’autant plus. Lorsque j’hésite sur l’empreinte d’une loutre dans la neige, sur celle d’un ours dans la boue ou sur le nom d’une fleur dans les parage&#8239;; lorsque je découvre une cascade, une nouvelle sente dans les collines, un nouvel éboulis dans la montagne, comme lorsque je rencontre un aspect inédit de ma nature au détour du chemin, je sonde indirectement l’ampleur de mon innocence et comprends qu’il est souhaitable de ne pas tout&nbsp;savoir.</p>
  86. <p><cite><em>Dans les forêts de l’ours</em>, Rémi&nbsp;Huot</cite></p>
  87. </blockquote>
  88. <p>À l’intersection de la citation de papillote Révillon™, de positions paternalistes ascendantes et d’une suite d’aphorismes condescendants. Faute conscientisée, à moitié acceptée&#8239;? Une bonne partie a été écrite en marchant dans la forêt, ce qui explique la prédominance de la&nbsp;bouffe.</p>
  89. <ol>
  90. <li>La seule légitimité à avoir déjà fait le chemin est de savoir là où tu n’aurais pas voulu aller à&nbsp;l’époque.</li>
  91. <li>Les instincts… et les intestins savent, encore faut-il apprendre à les&nbsp;écouter.</li>
  92. <li>Un pantalon devenu trop petit ne sera plus utilisable. Jamais.</li>
  93. <li>Ta réalité est la stabilité nécessaire à ta survie dans un monde chaotique. Lorsque tu t’identifies à une représentation du monde, tu finis par créer les illusions te permettant de vivre dans ce monde&nbsp;là.</li>
  94. <li>On prend de mauvaises décisions lorsqu’on a faim. Mais aussi lorsqu’on n’a pas assez&nbsp;faim.</li>
  95. <li>Un bon matériel déçoit rarement. Il génère parfois une autre forme de déception. La&nbsp;sienne.</li>
  96. <li>Les pieds sont bien plus importants que ce que veut bien nous laisser penser la&nbsp;tête.</li>
  97. <li>On n’a qu’un seul corps. Et qu’un seul cœur. Un cœur ne sert pas à alimenter qu’un&nbsp;cerveau.</li>
  98. <li>La communication est si difficile que l’on a eu besoin d’inventer&nbsp;l’écriture.</li>
  99. <li>Accepter l’inacceptable est la seule façon de ne pas devenir&nbsp;fou.</li>
  100. <li>Expatriation, colonisation et intégration forment un triangle dont il est difficile de&nbsp;s’extraire.</li>
  101. <li>Les échecs sont un excellent moyen de trouver ses&nbsp;limites.</li>
  102. <li>L’argent nous fait croire qu’il y a un sommet à la chaîne alimentaire. La richesse se trouve dans&nbsp;l’écosystème.</li>
  103. <li>Si tu ne fais pas d’erreurs, tu n’es pas en train d’apprendre au rythme optimal. Et ce n’est pas si&nbsp;grave.</li>
  104. <li>Si tu vois le verre à moitié vide, tu as le pouvoir d’en changer la&nbsp;taille.</li>
  105. <li>Le talent, c’est ce que les hommes de pouvoir veulent bien te laisser&nbsp;exprimer.</li>
  106. <li>Si tu peux choisir un minimum tes insomnies, c’est pas&nbsp;mal.</li>
  107. <li>La gratitude n’est pas une attente de gratitude réciproque. C’est un&nbsp;don.</li>
  108. <li>Le beau n’est pas inclusif. On ne tire pas la gaussienne par un bout mais en poussant toute la&nbsp;cloche.</li>
  109. <li>Une lame mal affûtée est plus dangereuse qu’une lame bien affûtée, mais ça dépend surtout de qui s’en&nbsp;sert.</li>
  110. <li>Toujours se méfier des personnes proposant des solutions techniques à des problématiques humaines. Elles sont rapidement&nbsp;dangereuses.</li>
  111. <li>Lorsqu’on marche, on a moins conscience du bruit de ses propres&nbsp;pas.</li>
  112. <li>Dans chaque perle d’enfant il y a un grain de sable qui&nbsp;gratte.</li>
  113. <li>En mettant la barre trop haut, on a du mal à manier le&nbsp;gouvernail.</li>
  114. <li>Il n’y a pas de plus grand privilège que de pouvoir priver quelqu’un de son propre&nbsp;privilège.</li>
  115. <li>Partir en expédition sans connaître les forces et faiblesses de son matériel est&nbsp;hasardeux.</li>
  116. <li>Prendre des risques sans connaître les remèdes et poisons de son environnement est hasardeux&nbsp;aussi.</li>
  117. <li>Avancer ensemble, ce n’est pas forcément être côte à côte mais avoir la promesse de se retrouver à un&nbsp;moment.</li>
  118. <li>Si tu te préoccupes de ce que tu fuis ou de ce que tu tentes de rejoindre, tu perds l’intérêt du&nbsp;chemin.</li>
  119. <li>Dis-moi comment tu cuisines et je te dirai comment tu&nbsp;codes.</li>
  120. <li>Tu ne peux pas économiser pour ton voisin mais tu peux montrer une autre façon de&nbsp;vivre.</li>
  121. <li>Mieux vaut un chocolat de qualité qui soit aussi en&nbsp;quantité.</li>
  122. <li>Tu doutes de tout mais qui doute de&nbsp;toi&#8239;?</li>
  123. <li>La chance est une notion très relative qui nourrit le discours des&nbsp;envieux.</li>
  124. <li>Tu ne peux pas te rendre compte de la chaleur d’un feu avant de l’avoir&nbsp;quitté.</li>
  125. <li>Si tu es témoin du passage d’un pic, tu as probablement été acteur de son&nbsp;déclin.</li>
  126. <li>L’intelligence ce n’est pas d’empêcher l’accident mais d’éviter le&nbsp;sur-accident.</li>
  127. <li>Courir te permet de connaître ton corps. Marcher d’accepter ta tête. Arpenter d’apprivoiser ton&nbsp;âme.</li>
  128. <li>Ne pas terminer c’est une invitation à&nbsp;contribuer.</li>
  129. </ol>
  130. <p><a href="/david/stream/2018/10/31/">Et si</a> c’était <a href="https://jcfrog.com/mylife/index.html?bdate=23-04-1982&amp;lexp=80">maintenant</a>&#8239;?</p>
  131. <hr />
  132. <p>Et <a href="https://latitude77.org/">Aurélien</a> de m’envoyer il y a quelques&nbsp;jours&nbsp;:</p>
  133. <blockquote>
  134. <p>L’aphorisme, c’est le cache-sexe de l’absence de pensée. Quand on a un grand vide en soi […], quand on a une grande confusion d’esprit et une grande absence et de conviction et d’opinion et d’intelligence du regard sur les choses, et bien <mark>on masque cette abîme par des&nbsp;formules.</mark></p>
  135. <p><cite><em><a href="https://www.franceculture.fr/emissions/science-en-questions/quel-genre-de-science-est-la-geographie-selon-sylvain-tesson">Quel genre de science est la géographie, selon Sylvain&nbsp;Tesson</a></em></cite></p>
  136. </blockquote>
  137. <h2 id="vieilleries">Vieilleries <a href="#vieilleries" title="Ancre vers cette partie">#</a></h2>
  138. <blockquote lang="en">
  139. <p>🤔 If other people’s creative work happens because they stand on the shoulders of others, then kicking away your work just because you don’t like it any more is a fundamentally <mark>selfish act.</mark> And I find that a little more worthy of shame than most people’s old blog&nbsp;posts.</p>
  140. <p><cite><em><a href="http://www.dirtyfeed.org/2022/04/shame/">Shame. - Dirty Feed</a></em>&nbsp;(<a href="/david/cache/2022/9094f894455bccf9d9772fd5782ec782/">cache</a>)</cite></p>
  141. </blockquote>
  142. <blockquote>
  143. <p>🏠 Je suis contraint par ce système <mark>(contrainte choisie, heureuse)</mark>&nbsp;: c’est pour moi la seul façon d’avancer dans ce monde d’abondance apparente… Cela me permet de toucher du doigt la finitude des&nbsp;choses.</p>
  144. <p>Si j’applique ce principe d’auto-contrainte à l’habitat c’est avant tout sur la surface et non sur la composition des murs que ça se&nbsp;joue.</p>
  145. <p><cite><em><a href="https://david.mercereau.info/ode-aux-petites-maisons-cest-la-taille-qui-compte/">Ode aux petites maisons&nbsp;: C’est la taille qui compte&#8239;!</a></em>&nbsp;(<a href="/david/cache/2022/85dbf217709930ce1e6208ca4fd5bf60/">cache</a>)</cite></p>
  146. </blockquote>
  147. <blockquote lang="en">
  148. <p>🙇 I really appreciate you taking the time to read this — but I am only one Autistic voice. What I hope you’ll walk away with is an understanding that every Autistic person you interview will give you a unique perspective into what Autism is, how it manifests and what kinds of challenges it’s associated with. <mark>Each of these perspectives is as valid as any&nbsp;other.</mark></p>
  149. <p>[…] Nobody can prove their Autism to you. Nobody can take a blood test and say “Yep, Autistic!” Autism is a purely subjective experience that can manifest in <em>many very different ways</em>, and only some of those ways are medically recognized as “Autism”. It’s important to understand that unless you are Autistic you simply Will Not Understand Or Relate To certain Autistic experiences. That’s okay. We don’t understand or relate to all of yours. Embrace the chaos and allow us our&nbsp;truths!</p>
  150. <p><cite><em><a href="https://coda.io/@mykola-bilokonsky/public-neurodiversity-support-center/how-to-talk-about-autism-respectfully-84">How To Talk About Autism Respectfully</a></em>&nbsp;(<a href="/david/cache/2022/232df2405c016899b63a060ca2e23cbd/">cache</a>)</cite></p>
  151. </blockquote>
  152. <blockquote lang="en">
  153. <p>✍️ Just like programming, writing requires a lot of context that you hold in your short term memory. <mark>You need to recall a lot of details</mark> about the topic you are writing about, as well as your punch-line and the current state of the document. All this state takes time to load into memory, and is easily lost by distractions or context&nbsp;switching.</p>
  154. <p><cite><em><a href="https://www.heinrichhartmann.com/posts/writing/">Writing for Engineers</a></em>&nbsp;(<a href="/david/cache/2022/26b53a6e8889416c87357fd76cc5d951/">cache</a>)</cite></p>
  155. </blockquote>
  156. <blockquote lang="en">
  157. <p>💯 Don’t attach your identity to your code. Don’t attach anyone’s identity to their code. <mark>Realize that people are separate from the artifacts they produce.</mark> Don’t take code criticism personally but be very careful when criticizing others’&nbsp;code.</p>
  158. <p><cite><em><a href="https://alexewerlof.medium.com/my-guiding-principles-after-20-years-of-programming-a087dc55596c">My guiding principles after 20&nbsp;years of programming</a></em>&nbsp;(<a href="/david/cache/2022/d55dffd91db7452e76bf32f3dfc6446a/">cache</a>)</cite></p>
  159. </blockquote>
  160. <nav>
  161. <p class="center">
  162. <a rel="prev" href="/david/2022/04/14/" title="Publication précédente : Ressenti">← Précédent</a> •
  163. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  164. • <a rel="next" href="/david/2022/04/26/" title="Publication suivante : R&amp;Day">Suivant →</a>
  165. </p>
  166. </nav>
  167. </article>
  168. <hr>
  169. <footer>
  170. <p>
  171. <nobr>
  172. <a href="/david/" title="Aller à l’accueil"
  173. ><svg class="icon icon-home">
  174. <use
  175. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  176. ></use>
  177. </svg>
  178. Accueil</a
  179. >
  180. </nobr>
  181. <nobr>
  182. <a href="/david/log/" title="Accès au flux RSS"
  183. ><svg class="icon icon-rss2">
  184. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  185. </svg>
  186. Suivre</a
  187. >
  188. </nobr>
  189. <nobr>
  190. <a href="http://larlet.com" title="Go to my English profile" data-instant
  191. ><svg class="icon icon-user-tie">
  192. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  193. </svg>
  194. Pro</a
  195. >
  196. </nobr>
  197. <nobr>
  198. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  199. ><svg class="icon icon-mail">
  200. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  201. </svg>
  202. Email</a
  203. >
  204. </nobr>
  205. <nobr>
  206. <abbr
  207. class="nowrap"
  208. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  209. ><svg class="icon icon-hammer2">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  211. </svg>
  212. Légal</abbr
  213. >
  214. </nobr>
  215. </p>
  216. <template id="theme-selector">
  217. <form>
  218. <fieldset>
  219. <legend><svg class="icon icon-brightness-contrast">
  220. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  221. </svg> Thème</legend>
  222. <label>
  223. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  224. </label>
  225. <label>
  226. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  227. </label>
  228. <label>
  229. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  230. </label>
  231. </fieldset>
  232. </form>
  233. </template>
  234. </footer>
  235. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  236. <script>
  237. function loadThemeForm(templateName) {
  238. const themeSelectorTemplate = document.querySelector(templateName)
  239. const form = themeSelectorTemplate.content.firstElementChild
  240. themeSelectorTemplate.replaceWith(form)
  241. form.addEventListener('change', (e) => {
  242. const chosenColorScheme = e.target.value
  243. localStorage.setItem('theme', chosenColorScheme)
  244. toggleTheme(chosenColorScheme)
  245. })
  246. const selectedTheme = localStorage.getItem('theme')
  247. if (selectedTheme && selectedTheme !== 'undefined') {
  248. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  249. }
  250. }
  251. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  252. window.addEventListener('load', () => {
  253. let hasDarkRules = false
  254. for (const styleSheet of Array.from(document.styleSheets)) {
  255. let mediaRules = []
  256. for (const cssRule of styleSheet.cssRules) {
  257. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  258. continue
  259. }
  260. // WARNING: Safari does not have/supports `conditionText`.
  261. if (cssRule.conditionText) {
  262. if (cssRule.conditionText !== prefersColorSchemeDark) {
  263. continue
  264. }
  265. } else {
  266. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  267. continue
  268. }
  269. }
  270. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  271. }
  272. // WARNING: do not try to insert a Rule to a styleSheet you are
  273. // currently iterating on, otherwise the browser will be stuck
  274. // in a infinite loop…
  275. for (const mediaRule of mediaRules) {
  276. styleSheet.insertRule(mediaRule.cssText)
  277. hasDarkRules = true
  278. }
  279. }
  280. if (hasDarkRules) {
  281. loadThemeForm('#theme-selector')
  282. }
  283. })
  284. </script>
  285. </body>
  286. </html>