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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  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>L’ombre d’une lampe (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://www.la-grange.net/2020/04/18/ombre">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>L’ombre d’une lampe</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://www.la-grange.net/2020/04/18/ombre" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <p><img src="https://www.la-grange.net/2020/01/11/6697-fenetre.jpg" alt="fenêtre et mur brisé" title="Fujisawa, Japon, 11 janvier 2020"/></p>
  69. <blockquote><p>Les vieilles villes de province ont des lisières délabrées. On voit s’y installer des gens tout droits sortis de la nature. Voici qu’apparaît un homme au visage incisif, émacié jusqu’à la tristesse, qui peut tout réparer, tout ajuster, mais dont la vie, jusqu’ici, fut mal ajustée. Pas d’objet fabriqué, depuis la poêle jusqu’au réveille-matin, qui, en son temps, ait échappé aux mains de cet homme. — Tchevengour - Andreï Platonov, urn:isbn:978-2221081440</p>
  70. </blockquote>
  71. <p>Hier soir, après avoir lu la préface, j’ai commencé la lecture de <a href="https://www.lisez.com/livre-grand-format/tchevengour/9782221081440">Tchevengour</a> par Andreï Platonov. Juste quelques lignes, le temps d’une infusion. Je vais aimer. Les premiers mots, je les répète plusieurs fois. Inlassable. La phrase prend sa place dans la diction. À voix haute, je me délecte. J’ai découvert l’auteur dans le livre <a href="https://editions-verdier.fr/livre/espace-et-labyrinthes/">Espace et labyrinthes</a> de Vassili Golovanov. Certains livres se révèlent par les lectures extasiées d’un roman, défilant la continuité d’histoires prises dans les lices d’une autre trame.</p>
  72. <p>5h00. Ce matin la pluie opacifie le réveil dans de vagues mouvements, hordes équines au galop à la recherche d’une chute. Je prépare le café dans ce brouhaha. J’imagine que la journée se vivra profonde, de l’intérieur, patiente et sans le jardin.</p>
  73. <p><img src="https://www.la-grange.net/2020/04/18/meteo.png" alt="graphe de la météo" title="Tsujido, Japon, 18 avril 2020"/></p>
  74. <p>Je relis quelques lignes de Tchevengour ; le récit se noircit, très vite, la Révolution et la famine. L’averse et l’aube étouffée dressent la toile dramatique de la lecture.</p>
  75. <p>La maison dort encore. J’écris dans l’ombre de ma lampe.</p>
  76. <p>5h30. Le galop s’est interrompu. Probablement une pause au bord de la rivière, les sabots plantés dans la boue, pour se désaltérer avant de reprendre la chevauchée.</p>
  77. <p>5h37. Quelques pas, elles ont redressé leurs têtes, alertes et rassasiées, l’onde reprend le chemin de la pente. Elles n’attendent plus que la bourrasque océane pour s’écheveler sur les terres grasses et noires. Là ! Je la perçois.</p>
  78. <p>7h59. Les avalanches rocailleuses joignent la cavalcade. les pins submergés frissonnent à chaque roulement. Le tremblement du monde est aérien.</p>
  79. <h2>sur le bord du chemin</h2>
  80. <ul>
  81. <li><a href="https://ishadeed.com/article/viewport-units/">Viewport units</a>. voici un guide très utile sur la notion des unités de viewport, avec le rappel d’un élément essentiel sur leurs différences avec les pourcentages. <blockquote><p><strong>Viewport units are based on the root element of the page</strong>, while the percentage is based on the container they are in. For that reason, they’re different from each other and each one has its use cases.</p>
  82. </blockquote>
  83. </li>
  84. <li>Essentiel, <a href="https://htmldom.dev/">javascript simple et sans framework</a>.</li>
  85. <li>Bonne journée pluvieuse pour démarrer ces <a href="https://www.youtube.com/playlist?list=PLvahqwMqN4M0GRkZY8WkLZMb6Z-W7qbLA">séries documentaires par Netflix</a> en libre accès sur YouTube.</li>
  86. <li><p>De la <a href="https://larlet.fr/david/2020/04/18/">transmission d’un projet informatique</a>. Souvent une entreprise va concevoir un produit de façon à garder son client captif. alors que nous aurions tous intérêt à permettre, par la documentation, la flexibilité, la simplicité du projet, l’indépendance des projets.</p>
  87. <blockquote><p>C’est du Python 3 annoté pour les types qui utilise Pyramid comme framework web. Rien de très exotique et c’est intentionnel considérant que nous souhaitions à un moment transmettre le produit.</p>
  88. </blockquote>
  89. <p>mais il y a peut-être aussi une responsabilité de la part du client à définir au départ de l’aventure. Sommes-nous là ensemble pour livrer un produit fini ou sommes-nous là ensemble pour définir un processus de création s’accompagnant d’outils et d’une philosophie de maintenance et de développement ? Ou pour reprendre la métaphore connue. Voulez-vous du poisson ? Ou apprenons-nous ensemble la technique de maille du filet, de la pêche et de la réparation de ce filet afin que les compétences partagées ne dépendent plus de la présence unique d’une personne dans le groupe.</p>
  90. <p>et comme le billet de David est ponctué de référence au kyūdō (弓道). Voici un passage de <cite>introduction à la culture japonaise</cite></p>
  91. <blockquote><p>« Comment dois-je tenir l’arc pour atteindre une telle distance ? » Et le maître de lui répondre : « Tirez comme d’habitude sans vous soucier de la cible. » Intrigué, il proteste : « Il faut bien viser tout de même ! » Mais le maître insiste encore pour qu’il ne vise pas, lui demandant de ne penser ni à la cible ni à l’atteindre, bref de ne penser à rien. « Vous n’avez qu’à tendre votre arc, lui dit-il, jusqu’à ce que la flèche parte. Il faut laisser la chose se faire. » — introduction à la culture japonaise, Hisayasu Nakagawa, urn:isbn:978-2130549529</p>
  92. </blockquote>
  93. </li>
  94. </ul>
  95. </article>
  96. </main>
  97. </article>
  98. <hr>
  99. <footer>
  100. <p>
  101. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  102. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  103. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  104. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  105. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  106. </p>
  107. <template id="theme-selector">
  108. <form>
  109. <fieldset>
  110. <legend>Thème</legend>
  111. <label>
  112. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  113. </label>
  114. <label>
  115. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  116. </label>
  117. <label>
  118. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  119. </label>
  120. </fieldset>
  121. </form>
  122. </template>
  123. </footer>
  124. <script type="text/javascript">
  125. function loadThemeForm(templateName) {
  126. const themeSelectorTemplate = document.querySelector(templateName)
  127. const form = themeSelectorTemplate.content.firstElementChild
  128. themeSelectorTemplate.replaceWith(form)
  129. form.addEventListener('change', (e) => {
  130. const chosenColorScheme = e.target.value
  131. localStorage.setItem('theme', chosenColorScheme)
  132. toggleTheme(chosenColorScheme)
  133. })
  134. const selectedTheme = localStorage.getItem('theme')
  135. if (selectedTheme && selectedTheme !== 'undefined') {
  136. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  137. }
  138. }
  139. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  140. window.addEventListener('load', () => {
  141. let hasDarkRules = false
  142. for (const styleSheet of Array.from(document.styleSheets)) {
  143. let mediaRules = []
  144. for (const cssRule of styleSheet.cssRules) {
  145. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  146. continue
  147. }
  148. // WARNING: Safari does not have/supports `conditionText`.
  149. if (cssRule.conditionText) {
  150. if (cssRule.conditionText !== prefersColorSchemeDark) {
  151. continue
  152. }
  153. } else {
  154. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  155. continue
  156. }
  157. }
  158. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  159. }
  160. // WARNING: do not try to insert a Rule to a styleSheet you are
  161. // currently iterating on, otherwise the browser will be stuck
  162. // in a infinite loop…
  163. for (const mediaRule of mediaRules) {
  164. styleSheet.insertRule(mediaRule.cssText)
  165. hasDarkRules = true
  166. }
  167. }
  168. if (hasDarkRules) {
  169. loadThemeForm('#theme-selector')
  170. }
  171. })
  172. </script>
  173. </body>
  174. </html>