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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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>lentement le bouillon du quotidien (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/12/01/bouillon">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>lentement le bouillon du quotidien</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/12/01/bouillon" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <figure>
  69. <img src="https://www.la-grange.net/2020/11/28/9753-mailbox.jpg" alt="Boite aux lettres rouillée"/>
  70. <figcaption>Kamakura, Japon, 28 novembre 2020</figcaption>
  71. </figure>
  72. <blockquote>
  73. <p>Chaque jour apporte sa <em>nouveauté technique</em> et le lot d'<em>obsolescences</em> et de <em>caducités</em> qui l'accompagne inévitablement : obsolescence des techniques existantes ainsi dépassées, caducité des situations sociales qu'elles avaient rendues possibles : hommes, régions, professions, savoirs, patrimoines de toutes natures qui doivent s'adapter ou disparaître.<br/>
  74. — La technique et le temps - Bernard Stiegler, urn:isbn:978-2-213-70087-8</p>
  75. </blockquote>
  76. <p>David dans <a href="https://larlet.fr/david/2020/12/01/#contre-societe">Contre-société</a></p>
  77. <blockquote>
  78. <p>Lire de relativement vieux ouvrages a cet inconvénient de donner le sentiment d’être dans un monde qui n’évolue que très lentement. Les espérances et utopies d’aujourd’hui étaient déjà celles d’hier et d’avant-hier. <strong>Comment continuer à y croire ?</strong></p>
  79. </blockquote>
  80. <p>Thomas <a href="https://oncletom.io/2020/12/01/comment-continuer-a-y-croire/">répond</a> :</p>
  81. <blockquote>
  82. <p>Un jour j’ai arrêté de me dire “mais à quoi bon ?”, quand j’ai arrêté d’avoir “l’attente d’un monde meilleur”. Quand j’ai arrêté de vouloir le changer à un niveau qui me dépasse. Quand je me suis focalisé sur ce que je donne autour de moi (géographiquement parlant), et comment ce bout s’intègre dans d’autres mille-feuilles (administratif, historico-culturel). Quand j’ai commencé à dédier du temps et de l’argent à des choses qui ont trait à la vie, au vivant.</p>
  83. </blockquote>
  84. <p>Et il poursuit avec :</p>
  85. <blockquote>
  86. <p>Choisir son combat est aussi un truc bourgeois — au sens où j’en ai le choix, que je n’en hérite pas, et qu’y mettre de l’énergie m’emmènera peut-être “plus loin dans ma vie”. Un combat qui n’est pas choisi permet à peine de s’en dépêtrer. C’est celui que je vis avec la catastrophe écologique de notre société.</p>
  87. </blockquote>
  88. <p>Devons-nous sentir une forme de découragement face à la lenteur ? Et sans lenteur, et avec le pouvoir d'aligner le monde à nos croyances, nous nous précipitons dans chute autoritaire, celle de la dérive de la pensée rigide, celle du couteau, de la bombe, de la coupe blanche.</p>
  89. <p>Bien sûr, ce n'est pas là le fil de pensée de David.</p>
  90. <p>Changer le monde sans le détruire prend beaucoup de temps.</p>
  91. <p>Le potier dans son geste répété façonne la terre pour lui donner forme. La haie plantée prendra plusieurs années à quelques dizaines d'années pour que les champs soient protégés des vents, que la belette y trouve son espace intime, et que le rouge gorge y définisse un refuge. Et alors la haie est plus grande que nous. Elle n'est plus ce que nous avons créé. Elle devient le témoin de ces générations qu'elle engendre. La haie n'est plus le patrimoine du domaine, mais nous devenons membre de l'écosystème de la haie au même titre que tous les animaux et végétaux qui la cotoîe.</p>
  92. <p>Alors moi-même, je me demande ce qui compte. Est-ce bien de changer le monde ou d'adopter des gestes, de malaxer les moments d'abandon pour y créer non pas du croire, mais pour se donner à la forme du participer en éveillant nos sens au monde. Nous composons avec chaque chose et avec nos propres contraintes individuelles. Nous n'existons pas dans la vacuité mais bien dans le bouillonnement du parfum de l'humus et les trajectoires désordonnées de la pluie.</p>
  93. <p>Et cet ordinateur…</p>
  94. <h2>sur le bord du chemin</h2>
  95. <ul>
  96. <li><p><a href="https://www.figma.com/blog/when-fonts-fall/">polices de caractères sur le Web</a>. Comment cela fonctionne-t-il ?</p>
  97. </li>
  98. <li><p><a href="https://erik-engheim.medium.com/why-is-apples-m1-chip-so-fast-3262b158cba2">Why is Apple’s M1 Chip So Fast?</a></p>
  99. </li>
  100. <li><p><a href="https://www.reuters.com/article/unilever-newzealand/unilever-to-try-out-four-day-working-week-in-new-zealand-idUSL1N2IG2DF">Progrès social</a></p>
  101. <blockquote>
  102. <p>Unilever said all 81 staff members at its offices across New Zealand will be able to participate in the trial, which starts next week and will run for 12 months until December next year.</p>
  103. </blockquote>
  104. <p>Quand je travaillais à l'IUFM de Paris, j'avais négocié quelque chose un peu similaire. La différence de travailler 4 jours par semaine à la place de cinq est énorme en termes de qualité et de bien être (à condition bien sûr d'avoir un salaire décent, mais cela existe quelque soit le nombre de jours travaillés.)</p>
  105. </li>
  106. <li><p><a href="https://radicle.xyz/">Intéressant ?</a>. A decentralized app for code collaboration. Une explication <a href="https://docs.radicle.xyz/docs/what-is-radicle.html">plus complète dans la documentation</a>.</p>
  107. <blockquote>
  108. <p>The network is powered by a peer-to-peer replication protocol built on Git, called Radicle Link. Radicle Link extends Git with peer-to-peer discovery by disseminating data via a process called gossip. That is, participants in the network share and spread data they are "interested" in by keeping redundant copies locally and sharing, otherwise known as "replicating", their local data with selected peers. By leveraging Git's smart transfer protocol, Radicle Link keeps Git's efficiency when it comes to data replication while offering global decentralized repository storage through the peer-to-peer networking layer.</p>
  109. </blockquote>
  110. </li>
  111. <li><p><a href="https://www.theatlantic.com/magazine/archive/2020/12/whitewashing-the-great-depression/616936/">Whitewashing the Great Depression</a></p>
  112. <blockquote>
  113. <p>What’s my point? Each of the subjects in each of these pictures, produced by Farm Security Administration photographers, appears to be white. Although the photographers who worked for the FSA took many pictures of people of color—in the streets, in the fields, out of work—the Great Depression’s main victims, as Americans came to visualize them, were white. And this collective portrait has contributed to the misbegotten idea, still current, that the soul of America, the real American type, is rural and white.</p>
  114. </blockquote>
  115. </li>
  116. </ul>
  117. </main>
  118. </article>
  119. <hr>
  120. <footer>
  121. <p>
  122. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  123. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  124. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  125. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  126. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  127. </p>
  128. <template id="theme-selector">
  129. <form>
  130. <fieldset>
  131. <legend>Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script type="text/javascript">
  146. function loadThemeForm(templateName) {
  147. const themeSelectorTemplate = document.querySelector(templateName)
  148. const form = themeSelectorTemplate.content.firstElementChild
  149. themeSelectorTemplate.replaceWith(form)
  150. form.addEventListener('change', (e) => {
  151. const chosenColorScheme = e.target.value
  152. localStorage.setItem('theme', chosenColorScheme)
  153. toggleTheme(chosenColorScheme)
  154. })
  155. const selectedTheme = localStorage.getItem('theme')
  156. if (selectedTheme && selectedTheme !== 'undefined') {
  157. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  158. }
  159. }
  160. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  161. window.addEventListener('load', () => {
  162. let hasDarkRules = false
  163. for (const styleSheet of Array.from(document.styleSheets)) {
  164. let mediaRules = []
  165. for (const cssRule of styleSheet.cssRules) {
  166. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  167. continue
  168. }
  169. // WARNING: Safari does not have/supports `conditionText`.
  170. if (cssRule.conditionText) {
  171. if (cssRule.conditionText !== prefersColorSchemeDark) {
  172. continue
  173. }
  174. } else {
  175. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  176. continue
  177. }
  178. }
  179. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  180. }
  181. // WARNING: do not try to insert a Rule to a styleSheet you are
  182. // currently iterating on, otherwise the browser will be stuck
  183. // in a infinite loop…
  184. for (const mediaRule of mediaRules) {
  185. styleSheet.insertRule(mediaRule.cssText)
  186. hasDarkRules = true
  187. }
  188. }
  189. if (hasDarkRules) {
  190. loadThemeForm('#theme-selector')
  191. }
  192. })
  193. </script>
  194. </body>
  195. </html>