A place to cache linked articles (think custom and personal wayback machine)
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 14KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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>je ne sais pas pourquoi (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  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. <!-- Is that even respected? Retrospectively? What a shAItshow…
  28. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  29. <meta name="robots" content="noai, noimageai">
  30. <!-- Documented, feel free to shoot an email. -->
  31. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  32. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  33. <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>
  34. <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>
  35. <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>
  36. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  37. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  38. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  39. <script>
  40. function toggleTheme(themeName) {
  41. document.documentElement.classList.toggle(
  42. 'forced-dark',
  43. themeName === 'dark'
  44. )
  45. document.documentElement.classList.toggle(
  46. 'forced-light',
  47. themeName === 'light'
  48. )
  49. }
  50. const selectedTheme = localStorage.getItem('theme')
  51. if (selectedTheme !== 'undefined') {
  52. toggleTheme(selectedTheme)
  53. }
  54. </script>
  55. <meta name="robots" content="noindex, nofollow">
  56. <meta content="origin-when-cross-origin" name="referrer">
  57. <!-- Canonical URL for SEO purposes -->
  58. <link rel="canonical" href="https://www.la-grange.net/2024/01/11/pourquoi">
  59. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  60. <article>
  61. <header>
  62. <h1>je ne sais pas pourquoi</h1>
  63. </header>
  64. <nav>
  65. <p class="center">
  66. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  67. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  68. </svg> Accueil</a> •
  69. <a href="https://www.la-grange.net/2024/01/11/pourquoi" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-11
  72. </p>
  73. </nav>
  74. <hr>
  75. <figure>
  76. <img src="https://www.la-grange.net/2024/01/09/3045-glace.jpg" alt="Cubes de glace étalés sur la chaussée à côté de boîte en plastique et d'un poteau rouge. La glace a un peu fondu.">
  77. <figcaption>Roppongi, Japon, 9 janvier 2024</figcaption>
  78. </figure>
  79. <blockquote>
  80. <p>Je ne savais pas de quoi il parlait, mais je n'ai rien demandé.
  81. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059</p>
  82. </blockquote>
  83. <p>J'ai écouté Anne Savelli sur <a href="https://podcasts.apple.com/fr/podcast/faites-entrer-l%C3%A9criture/id1717321704?i=1000635653447">les lieux d'écriture/lecture</a>. Elles les appellent OLOÉs pour « Où Lire, Où Écrire. »</p>
  84. <p>Mes lieux de lecture et d'écriture sont très associés. J'écris parce que je lis.</p>
  85. <p>J'écris de deux façons.</p>
  86. <p>Des mots, des phrases écrites au stylo sur le papier, ou bien écrites sur le clavier de l'outil électronique le plus proche de moi. Je n'écris presque pas avec ma voix. Je n'enregistre pas ma voix pour dicter mes mots, sauf peut-être en de rares occasions mais pour que le son devienne texte aussitôt, transformé automatiquement par l'appareil. La voix n'existe pas. Elle est juste le filtre entre ma pensée et l'écrit.</p>
  87. <p>Des photos, j'écris presque tous les jours comme cela. Mes yeux lisent les environnements que je croise. Et les pensées sont spontanées. Il est très rare que je ne pense pas à ce que je vois. Je ne suis pas dans l'unique regard mais bien souvent dans le tissage du regard. Je prends aussi souvent une photographie comme l'ancre visuelle d'une pensée, d'une idée. Étonnament, celles-ci vivent très longtemps. Je peux écrire six mois après une photo et me souvenir du fil de pensées qui avait déclenché la photographie.</p>
  88. <p>J'écris donc beaucoup en marchant, parfois à vélo. C'est pour cela que je n'aime pas vraiment la voiture. Je lis beaucoup en train, mais pas dans l'avion. Je ne sais pas pourquoi. Pour lire dans le train, il faut que je sois seul. Avec la famille, ce n'est plus possible. Je ne sais pas pourquoi. Je peux écrire en famille avec les mots et les photos, même quand nous marchons. Je ne sais pas pourquoi. Mais j'écris mieux quand je suis seul, vraiment seul. Mais je peux écrire avec la foule si je suis pseudo-anonyme.</p>
  89. <p>Je ne peux pas lire dans le lit. Je n'aime pas le lit. Je dors peu dans le lit. Enfin je dors dans le lit, mais quand je suis fatigué. Je me lève aussitôt les paupières ouvertes. Je n'ai pas le plaisir de la grasse matinée. Je peux dormir dans le canapé, sur le tatami, sur le sol dur, sur le sable, dans la forêt, mais pas dans le lit, sauf quand je suis fatigué et que je dors. Je n'écris pas non plus dans le lit, puisque je dors pas trop longtemps.</p>
  90. <p>Je lis rarement dans le bain, mais je peux écouter une émission de radio. Mais je ne suis pas heureux, car si j'ai besoin de prendre une note sur ce qui vient d'être dit, il me faut sortir du bain. Et je ne peux pas prendre de photos des mots à la radio. Le bain chaud à la japonaise demande à ce que l'on ferme les yeux. On ne s'y lave pas. On l'a fait avant. On se laisse bouillonner. Mais parfois au sento ou au onsen, j'ai furieusement envie d'écrire parce qu'il y a les gens autour de moi, leurs corps, leurs attitudes, leurs rythmes et là ça m'agite la cafetière. Non, il faut fermer les yeux pour s'isoler et ne pas écrire.</p>
  91. <p>J'aime lire et écrire dans les cafés. Je ne suis pas une femme. Tout le monde me fout la paix. Le privilège du mâle blanc. Ce n'est pas toujours vrai. Je me souviens de cette jeune femme dans un café à Montréal qui visitait la ville. 20 ans déjà. Il n'y avait plus de place dans le café ma table avait encore une chaise. Et elle m'a demandé si j'étais un écrivain et si elle pouvait s'assoir. Elle venait de Taiwan. Elle écrivait aussi. J'ai arrêté d'écrire. Nous avons parlé de lieux en lieux jusqu'au petit matin pour écrire plus tard ce que nous nous sommes racontés.</p>
  92. <p>Je peux lire ou écrire dans un endroit très bruyant, mais je ne peux pas parler. Le bruit m'isole. Il me rend incommunicado. Mes lèvres ne peuvent pas bouger, les sons ne peuvent pas sortir. Tout à l'intérieur de soi, enfin seul pour écrire.</p>
  93. <p>Un jour il faudra que je parle de mes oloés.</p>
  94. <figure>
  95. <img src="https://www.la-grange.net/2024/01/08/3042-jouet.jpg" alt="Jouet en forme de bébé en plastique mou et salle et probablement éclaté sur le sol.">
  96. <figcaption>Sugamo, Japon, 8 janvier 2024</figcaption>
  97. </figure>
  98. <hr>
  99. <p>J'ai commencé à lire <a href="https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/">Let’s learn how modern JavaScript frameworks work by building one</a>. Mais il me manque quelque chose. Peut-être une visualisation ? et de meilleurs exemples.</p>
  100. <hr>
  101. <p>Dans Carbone 14, récemment, il y avait une <a href="https://podcasts.apple.com/fr/podcast/sapiens-sa-naissance-sa-conqu%C3%AAte-du-monde/id300710648?i=1000640745006">émission sur l'homo sapiens et autres hominidés</a>. On parle souvent de l'humain façonnant son environnement et de l'humain s'ajustant à son environnement. L'invité parlait d'une intimité plus grande en parlant d'adaptation et d'ajustement à l'environnement façonné par l'humain. En transformant son environnement, nous nous transformons nous-même dans le même temps.</p>
  102. </article>
  103. <hr>
  104. <footer>
  105. <p>
  106. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  107. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  108. </svg> Accueil</a> •
  109. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  110. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  111. </svg> Suivre</a> •
  112. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  113. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  114. </svg> Pro</a> •
  115. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  117. </svg> Email</a> •
  118. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  120. </svg> Légal</abbr>
  121. </p>
  122. <template id="theme-selector">
  123. <form>
  124. <fieldset>
  125. <legend><svg class="icon icon-brightness-contrast">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  127. </svg> Thème</legend>
  128. <label>
  129. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  130. </label>
  131. <label>
  132. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  133. </label>
  134. <label>
  135. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  136. </label>
  137. </fieldset>
  138. </form>
  139. </template>
  140. </footer>
  141. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  142. <script>
  143. function loadThemeForm(templateName) {
  144. const themeSelectorTemplate = document.querySelector(templateName)
  145. const form = themeSelectorTemplate.content.firstElementChild
  146. themeSelectorTemplate.replaceWith(form)
  147. form.addEventListener('change', (e) => {
  148. const chosenColorScheme = e.target.value
  149. localStorage.setItem('theme', chosenColorScheme)
  150. toggleTheme(chosenColorScheme)
  151. })
  152. const selectedTheme = localStorage.getItem('theme')
  153. if (selectedTheme && selectedTheme !== 'undefined') {
  154. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  155. }
  156. }
  157. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  158. window.addEventListener('load', () => {
  159. let hasDarkRules = false
  160. for (const styleSheet of Array.from(document.styleSheets)) {
  161. let mediaRules = []
  162. for (const cssRule of styleSheet.cssRules) {
  163. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  164. continue
  165. }
  166. // WARNING: Safari does not have/supports `conditionText`.
  167. if (cssRule.conditionText) {
  168. if (cssRule.conditionText !== prefersColorSchemeDark) {
  169. continue
  170. }
  171. } else {
  172. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  173. continue
  174. }
  175. }
  176. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  177. }
  178. // WARNING: do not try to insert a Rule to a styleSheet you are
  179. // currently iterating on, otherwise the browser will be stuck
  180. // in a infinite loop…
  181. for (const mediaRule of mediaRules) {
  182. styleSheet.insertRule(mediaRule.cssText)
  183. hasDarkRules = true
  184. }
  185. }
  186. if (hasDarkRules) {
  187. loadThemeForm('#theme-selector')
  188. }
  189. })
  190. </script>
  191. </body>
  192. </html>