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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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>Silence — David Larlet</title>
  13. <meta name="description" content="Il s’agit là de deux dimensions de la solitude, qui sont toutes deux importantes. La première consiste à être seul physiquement. La seconde, a être capable d’être vous-même et de rester centré au beau milieu d’un groupe. C’est parce que vous êtes en paix dans la solitude que vous pouvez être en communion avec le monde. Je me sens relié à vous parce que je suis vraiment moi-même. C’est simple : pour pouvoir vous relier au monde, vous devez d’abord revenir en vous et vous relier à vous-même.">
  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>Silence</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/07/23/" title="Publication précédente : Origines">← 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/09/03/" title="Publication suivante : Bifurquer">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote>
  85. <p>Il s’agit là de deux dimensions de la solitude, qui sont toutes deux importantes. La première consiste à être seul physiquement. La seconde, a être capable d’être vous-même et de rester centré au beau milieu d’un groupe. <mark>C’est parce que vous êtes en paix dans la solitude que vous pouvez être en communion avec le monde.</mark> Je me sens relié à vous parce que je suis vraiment moi-même. C’est simple&nbsp;: pour pouvoir vous relier au monde, vous devez d’abord revenir en vous et vous relier à&nbsp;vous-même.</p>
  86. <p><cite><em>Les bienfaits du silence</em>, Thich Nhat&nbsp;Hanh</cite></p>
  87. </blockquote>
  88. <p>Peu d’écriture ces derniers temps. Peu de projets facturés/facturables aussi. Un été au ralenti qui me permet de rapatrier des <a href="https://code.larlet.fr/">bouts de code chez moi</a>, de faire un peu plus de sport et d’être davantage présent pour les personnes qui content une histoire&nbsp;commune.</p>
  89. <p>Beaucoup de lectures, quelques croquis et pas mal de parties de UNO. À me demander si je suis éco-anxieux ou <a href="https://www.youtube-nocookie.com/embed/CrKmxPkV2jY">éco-furieux</a> de voir l’Europe cramer. À me demander quand est-ce que le peuple va s’embraser pour de&nbsp;bon.</p>
  90. <p>Et de regarder tout cela depuis mon île, où il fait pas mal vivre. Entouré de piscines et de climatisations, de <abbr title="Sport Utility Vehicles">SUV</abbr> et de <em>pickups</em> démesurés, de souffleuses et de tondeuses à gazon. <em>Everything is&nbsp;fine!</em></p>
  91. <p>La grenouille se sent au mieux dans sa cocotte minute. Le poisson rouge attendra l’été prochain pour s’indigner. Les dents des vautours n’ont jamais été aussi longues… mais chut, je me&nbsp;tais.</p>
  92. <p>Mot du&nbsp;mois&nbsp;:</p>
  93. <blockquote>
  94. <p><strong><a href="https://fr.wikipedia.org/wiki/Baizuo">Baizuo</a></strong> (白左, báizuǒ, abrégé de 白人左派, báirén zuǒpài, litt. «&nbsp;gauche blanche&nbsp;») est un néologisme chinois péjoratif désignant une personne occidentale naïve ou hypocrite, qui ne militerait pour la paix et l’égalité que pour satisfaire un sentiment de supériorité morale. Son progressisme et son sens du politiquement correct favoriseraient l’émergence de valeurs rétrogrades. Arrogant et condescendant, le baizuo se poserait en&nbsp;sauveur.</p>
  95. </blockquote>
  96. <h2 id="un-peu-de-bruit">Un peu de bruit <a href="#un-peu-de-bruit" title="Ancre vers cette partie">#</a></h2>
  97. <blockquote>
  98. <p>💯 Le bruit me fatigue. Je perds des points de&nbsp;vie.</p>
  99. <p><cite><em><a href="https://thom4.net/2022/08/23/bruits/">☕️ Journal&nbsp;: Bruits</a></em>&nbsp;(<a href="/david/cache/2022/15e68cfef2b2b0a461019c28a4269135/">cache</a>)</cite></p>
  100. </blockquote>
  101. <blockquote>
  102. <p>🥹 Parler, c’est s’exposer à beaucoup de choses. Le silence, c’est hyper… C’est hyper cool. C’était trop bien de me taire pendant&nbsp;10&nbsp;ans…</p>
  103. <p><cite><em><a href="https://www.youtube-nocookie.com/embed/vWcV8ZPBEDg">L’interview exclusive de Mélanie Diam’s sur&nbsp;Brut</a></em></cite></p>
  104. </blockquote>
  105. <blockquote lang="en">
  106. <p>🤔 If you repeated what you did today 365&nbsp;more times will you be where you want to be next&nbsp;year?</p>
  107. <p><cite><em><a href="https://kk.org/thetechnium/103-bits-of-advice-i-wish-i-had-known/">103&nbsp;Bits of Advice I Wish I Had Known</a></em>&nbsp;(<a href="/david/cache/2022/3e2fe7a3e11df2b7ef1ac497e8687ad7/">cache</a>)</cite></p>
  108. </blockquote>
  109. <blockquote>
  110. <p>😮 Les adolescent.e.s admirent les adultes (vraiment&#8239;!), comme des personnes responsables qui les guident et les protègent. <mark>Iels voient les politiciens comme les adultes des adultes.</mark> [Note: cette expression m’a bouleversée.] Voir des politiciens qui savent ce qui se passe mais qui n’agissent pas, et des adultes autour d’eux qui font de même, les perturbe&nbsp;profondément.</p>
  111. <p><cite><em><a href="https://jksteinberger.medium.com/un-jeune-d%C3%A9sespoir-ed9df9de150d">Un jeune désespoir</a></em>&nbsp;(<a href="/david/cache/2022/566023401a0e4735828a469104ebd2c7/">cache</a>)</cite></p>
  112. </blockquote>
  113. <blockquote lang="en">
  114. <p>🚧 The most impactful mitigation strategy is to accept that lossiness exists. <mark>Simply adopting the mindset that signal loss is normal shifts your attention in ways that start to reduce it.</mark> Most miscommunication happens because we aren’t aware of the potential for it, or because we presume it’s unlikely rather than the default state of affairs. If you are <em>aware</em> of the likelihood that some of what you say is getting lost—and, conversely, that you aren’t hearing or absorbing everything that other people are trying to tell you—you are already three-quarters of the way to reducing the signal loss down to something sustainable, if not&nbsp;inconsequential.</p>
  115. <p>[…]</p>
  116. <p>Adopting the mindset that lossiness is a fact of life has another benefit: that of beginning to see communication not as simply a transference but as a generative space. That is, we often think of communication as simply moving understanding from one place to another, the way we might move electrons from a substation to a home. This assumption is behind a lot of otherwise well-intentioned efforts to reduce or even eliminate synchronous communication, as it can seem wholly inefficient compared with other methods. But the best communication makes way for something new to emerge in the exchange. It’s not passive but generative, not mere delivery but a creative&nbsp;transformation.</p>
  117. <p><cite><em><a href="https://aworkinglibrary.com/writing/all-communication-is-lossy">All communication is lossy</a></em>&nbsp;(<a href="/david/cache/2022/d38ffcc7cf91cf1eb52c8a15f66f32fc/">cache</a>)</cite></p>
  118. </blockquote>
  119. <blockquote>
  120. <p>✊ Détricoter, tirer des fils et ouvrir des possibles, se donner de la force en imaginant concrètement les bouleversements à notre portée, avec ce qui résisterait. Notre parti pris est d’imaginer un monde où les choses ne seraient pas si simples, où elles nous blesseraient et nous accableraient comme on l’éprouve déjà si souvent… mais où nous serions suffisamment ensemble <em>pour que ça tienne</em>&nbsp;: en d’autres termes, <mark>imaginer une révolution qui durerait toujours</mark> dix ou vingt ans plus tard, inventive, contradictoire et belle, à la fois modeste et&nbsp;ambitieuse.</p>
  121. <p><cite><em><a href="https://antemonde.org/textes/postface-batir-aussi/">Postface&nbsp;: Construire sur les ruines du système&nbsp;: vers une technologie libératrice&#8239;?</a></em>&nbsp;(<a href="/david/cache/2022/c0a9e157313301d9299e4bba31b485bf/">cache</a>)</cite></p>
  122. </blockquote>
  123. <blockquote lang="en">
  124. <p>🤩 We grew up on the web; it’s nostalgic. We’ve also seen how it’s changed over time. […]</p>
  125. <p>While we still intend on building web sites, our goal is to experiment with new ways to encourage human communication and&nbsp;collaboration.</p>
  126. <p><cite><em><a href="https://hey.prose.sh/">team pico’s blog</a></em>&nbsp;(<a href="/david/cache/2022/30fa9a24a052e993533639e7c19ccd04/">cache</a>)</cite></p>
  127. </blockquote>
  128. <blockquote>
  129. <p>🌲 Cela fait quelques jours que nous sommes arrivés à Tvaian, je m’applique à ne rien faire, je voudrais même essayer d’arrêter de penser. Ce matin, je me dis qu’il faut surtout que je cesse de vouloir — comprendre guérir voir savoir prévoir tout de suite. <mark>Au fond des bois gelés, on ne «&nbsp;trouve&nbsp;» pas de réponses&nbsp;:</mark> on apprend d’abord à suspendre son raisonnement et à se laisser prendre par le rythme, celui de la vie qui s’organise pour rester vivants dans une forêt en hiver. J’essaie de trouver en moi un silence aussi profond que celui des grands arbres dehors qui se tiennent immobiles et verticaux dans le&nbsp;froid.</p>
  130. <p><cite><em>croire aux fauves</em>, nastassja&nbsp;martin</cite></p>
  131. </blockquote>
  132. <blockquote>
  133. <p>🤗 Je fais ce que je peux.<br />
  134. Avec mes silences et le reste.<br />
  135. Avec mes peurs de bête.<br />
  136. Avec mes cris d’enfant qui ne débordent plus.<br />
  137. Je fais ce que je peux.<br />
  138. Dans ce petit bain de cruauté et de lumière.<br />
  139. Dans les éclats de sucre et de mensonge.<br />
  140. Dans la délicatesse.<br />
  141. Dans la violence du temps qui piétine nos rêves.<br />
  142. Dans nos petits pataugements précieux.<br />
  143. Un matin après l’autre.<br />
  144. Un oubli après l’autre.<br />
  145. Un mot sur le suivant.<br />
  146. Je fais comme tout le monde.<br />
  147. Avec le ciel et sans les&nbsp;dieux.</p>
  148. <p><cite>Thomas Vinau, découvert <a href="https://mamot.fr/@Vesper/108787164194833679">sur masto</a>, pas retrouvé <a href="http://etc-iste.blogspot.com/">sur le site de&nbsp;l’auteur</a></cite></p>
  149. </blockquote>
  150. <nav>
  151. <p class="center">
  152. <a rel="prev" href="/david/2022/07/23/" title="Publication précédente : Origines">← Précédent</a> •
  153. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  154. • <a rel="next" href="/david/2022/09/03/" title="Publication suivante : Bifurquer">Suivant →</a>
  155. </p>
  156. </nav>
  157. </article>
  158. <hr>
  159. <footer>
  160. <p>
  161. <nobr>
  162. <a href="/david/" title="Aller à l’accueil"
  163. ><svg class="icon icon-home">
  164. <use
  165. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  166. ></use>
  167. </svg>
  168. Accueil</a
  169. >
  170. </nobr>
  171. <nobr>
  172. <a href="/david/log/" title="Accès au flux RSS"
  173. ><svg class="icon icon-rss2">
  174. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  175. </svg>
  176. Suivre</a
  177. >
  178. </nobr>
  179. <nobr>
  180. <a href="http://larlet.com" title="Go to my English profile" data-instant
  181. ><svg class="icon icon-user-tie">
  182. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  183. </svg>
  184. Pro</a
  185. >
  186. </nobr>
  187. <nobr>
  188. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  189. ><svg class="icon icon-mail">
  190. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  191. </svg>
  192. Email</a
  193. >
  194. </nobr>
  195. <nobr>
  196. <abbr
  197. class="nowrap"
  198. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  199. ><svg class="icon icon-hammer2">
  200. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  201. </svg>
  202. Légal</abbr
  203. >
  204. </nobr>
  205. </p>
  206. <template id="theme-selector">
  207. <form>
  208. <fieldset>
  209. <legend><svg class="icon icon-brightness-contrast">
  210. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  211. </svg> Thème</legend>
  212. <label>
  213. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  214. </label>
  215. <label>
  216. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  217. </label>
  218. <label>
  219. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  220. </label>
  221. </fieldset>
  222. </form>
  223. </template>
  224. </footer>
  225. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  226. <script>
  227. function loadThemeForm(templateName) {
  228. const themeSelectorTemplate = document.querySelector(templateName)
  229. const form = themeSelectorTemplate.content.firstElementChild
  230. themeSelectorTemplate.replaceWith(form)
  231. form.addEventListener('change', (e) => {
  232. const chosenColorScheme = e.target.value
  233. localStorage.setItem('theme', chosenColorScheme)
  234. toggleTheme(chosenColorScheme)
  235. })
  236. const selectedTheme = localStorage.getItem('theme')
  237. if (selectedTheme && selectedTheme !== 'undefined') {
  238. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  239. }
  240. }
  241. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  242. window.addEventListener('load', () => {
  243. let hasDarkRules = false
  244. for (const styleSheet of Array.from(document.styleSheets)) {
  245. let mediaRules = []
  246. for (const cssRule of styleSheet.cssRules) {
  247. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  248. continue
  249. }
  250. // WARNING: Safari does not have/supports `conditionText`.
  251. if (cssRule.conditionText) {
  252. if (cssRule.conditionText !== prefersColorSchemeDark) {
  253. continue
  254. }
  255. } else {
  256. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  257. continue
  258. }
  259. }
  260. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  261. }
  262. // WARNING: do not try to insert a Rule to a styleSheet you are
  263. // currently iterating on, otherwise the browser will be stuck
  264. // in a infinite loop…
  265. for (const mediaRule of mediaRules) {
  266. styleSheet.insertRule(mediaRule.cssText)
  267. hasDarkRules = true
  268. }
  269. }
  270. if (hasDarkRules) {
  271. loadThemeForm('#theme-selector')
  272. }
  273. })
  274. </script>
  275. </body>
  276. </html>