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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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>Elfes — David Larlet</title>
  13. <meta name="description" content="The second (“Elvish”) strategy may sound passive, and in that way inferior or defeatist, but it isn’t. Allowing the problem to solve itself is frowned upon and not even considered to be “real solving” by most humans: “And what did you do? What was your role? How did you save the world?” Humans (at least, us in the modern West) are obsessed with their own sense of agency. Everybody wants to save the world these days, but nobody seems to be interested in doing it slowly, by allowing the world to save itself, even if it is the most effective and efficient solution. Hesse’s Siddhartha isn’t joking when he is saying that all he can do is “think, wait and fast” and it is quite enough to accomplish almost anything. Slow is good, not just because it takes less effort (often it doesn’t), but because it achieves what it was meant to achieve.">
  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>Elfes</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/08/29/" title="Publication précédente : Artistes">← 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/08/31/" title="Publication suivante : Abstraction">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote lang="en">
  68. <p>The second (“Elvish”) strategy may sound passive, and in that way inferior or defeatist, but it isn’t. Allowing the problem to solve itself is frowned upon and not even considered to be “real solving” by most humans: “And what did you do? What was your role? How did you save the world?” Humans (at least, us in the modern West) are obsessed with their own sense of agency. <mark>Everybody wants to save the world these days, but nobody seems to be interested in doing it slowly, by allowing the world to save itself, even if it is the most effective and efficient solution.</mark> Hesse’s Siddhartha isn’t joking when he is saying that all he can do is “think, wait and fast” and it is quite enough to accomplish almost anything. Slow is good, not just because it takes less effort (often it doesn’t), but because it achieves what it was meant to achieve.</p>
  69. <p><cite><em><a href="https://essays.georgestrakhov.com/elvish/">Towards a more Elvish vision for Technology</a></em> (<a href="/david/cache/2021/d314c611a907c9273ac48dfbfd940a8d/">cache</a>)</cite></p>
  70. </blockquote>
  71. <p>Ça peut sembler un peu perché au début mais en fait il y a des choses inspirantes dans cette lecture. Je suis toujours fasciné par ce qui pourrait se produire si on vivait beaucoup plus longtemps. Quels changements dans nos sociétés deviendraient enviable&#8239;? Quelles actions deviendraient naturelles&#8239;? Quels seraient alors les crimes reconnus comme tels&#8239;?</p>
  72. <hr />
  73. <p>En parallèle, je tombe sur cette citation sous forme de mème&nbsp;:</p>
  74. <blockquote lang="en">
  75. <p>When people travel to the past, they worry about radically changing the present by doing something small.<br />
  76. Few people think they can radically change the future by doing something small in the present.</p>
  77. </blockquote>
  78. <hr />
  79. <p><mark>Le lendemain</mark>, la voisine qui doit avoir la soixantaine et qui vient de s’acheter une voiture électrique&nbsp;:</p>
  80. <blockquote>
  81. <p>— C’est probablement ma dernière alors il faut bien se faire plaisir…</p>
  82. </blockquote>
  83. <p>Que répondre.</p>
  84. <hr />
  85. <blockquote>
  86. <p>Après une rupture biographique — un deuil, une maladie grave, une rupture amoureuse dévastatrice —, on attend avec impatience le retour à la vie «&nbsp;normale&nbsp;». Nos proches aussi guettent les signes d’un «&nbsp;mieux&nbsp;». Mais on ne revient pas à la vie d’avant. Comme nous l’enseigne le philosophe et médecin Georges Canguilhem, dans son analyse sur le normal et le pathologique, il n’y a pas, après la maladie, de <em>restitutio ad integrum</em>, de retour à l’état antérieur. <mark>Ce qui est vrai pour la maladie l’est sans doute pour d’autres types de ruptures.</mark> Il y a des séquelles, des traces, des stigmates, il reste l’empreinte, la marque de l’arrachement, de la perte. Quelque chose s’est brisé, qui empêche le même type de projections, d’enthousiasme, de confiance.</p>
  87. <p>[…]</p>
  88. <p>On ne recommence pas de zéro, on est marqué par une certaine gravité, grevé par le vécu douloureux. Le retour à la vie normale ne va pas de soi. «&nbsp;Comment puis-je commencer quelque chose avec tout cet hier à l’intérieur de moi&#8239;?&nbsp;» s’interroge Leonard Cohen dans <em>Beautiful Losers</em>.</p>
  89. <p><cite><em>Rupture(s)</em>, Claire Marin</cite></p>
  90. </blockquote>
  91. <nav>
  92. <p>
  93. <a href="/david/2021/anxiete/"
  94. title="Liste de tous les articles associés à cette étiquette"
  95. >#anxiété</a>
  96. <a href="/david/2021/rythme/"
  97. title="Liste de tous les articles associés à cette étiquette"
  98. >#rythme</a>
  99. <a href="/david/#tags"
  100. title="Liste de toutes les étiquettes existantes"
  101. ><svg class="icon icon-tags">
  102. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  103. </svg> tous ?</a>
  104. </p>
  105. </nav>
  106. <nav>
  107. <p class="center">
  108. <a rel="prev" href="/david/2021/08/29/" title="Publication précédente : Artistes">← Précédent</a> •
  109. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  110. • <a rel="next" href="/david/2021/08/31/" title="Publication suivante : Abstraction">Suivant →</a>
  111. </p>
  112. </nav>
  113. </article>
  114. <hr>
  115. <footer>
  116. <p>
  117. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  119. </svg> Accueil</a> •
  120. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  122. </svg> Suivre</a> •
  123. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  125. </svg> Pro</a> •
  126. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  128. </svg> Email</a> •
  129. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  131. </svg> Légal</abbr>
  132. </p>
  133. <template id="theme-selector">
  134. <form>
  135. <fieldset>
  136. <legend><svg class="icon icon-brightness-contrast">
  137. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  138. </svg> Thème</legend>
  139. <label>
  140. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  141. </label>
  142. <label>
  143. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  144. </label>
  145. <label>
  146. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  147. </label>
  148. </fieldset>
  149. </form>
  150. </template>
  151. </footer>
  152. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  153. <script>
  154. function loadThemeForm(templateName) {
  155. const themeSelectorTemplate = document.querySelector(templateName)
  156. const form = themeSelectorTemplate.content.firstElementChild
  157. themeSelectorTemplate.replaceWith(form)
  158. form.addEventListener('change', (e) => {
  159. const chosenColorScheme = e.target.value
  160. localStorage.setItem('theme', chosenColorScheme)
  161. toggleTheme(chosenColorScheme)
  162. })
  163. const selectedTheme = localStorage.getItem('theme')
  164. if (selectedTheme && selectedTheme !== 'undefined') {
  165. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  166. }
  167. }
  168. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  169. window.addEventListener('load', () => {
  170. let hasDarkRules = false
  171. for (const styleSheet of Array.from(document.styleSheets)) {
  172. let mediaRules = []
  173. for (const cssRule of styleSheet.cssRules) {
  174. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  175. continue
  176. }
  177. // WARNING: Safari does not have/supports `conditionText`.
  178. if (cssRule.conditionText) {
  179. if (cssRule.conditionText !== prefersColorSchemeDark) {
  180. continue
  181. }
  182. } else {
  183. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  184. continue
  185. }
  186. }
  187. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  188. }
  189. // WARNING: do not try to insert a Rule to a styleSheet you are
  190. // currently iterating on, otherwise the browser will be stuck
  191. // in a infinite loop…
  192. for (const mediaRule of mediaRules) {
  193. styleSheet.insertRule(mediaRule.cssText)
  194. hasDarkRules = true
  195. }
  196. }
  197. if (hasDarkRules) {
  198. loadThemeForm('#theme-selector')
  199. }
  200. })
  201. </script>
  202. </body>
  203. </html>