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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
  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>
  13. Wuwei
  14. — David Larlet</title>
  15. <meta name="description" content="Le wuwei, dans le taoïsme, est d’ailleurs composé de deux idéogrammes : le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par non-agir ou non-intervention, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir ne pas est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être chinois.">
  16. <!-- That good ol' feed, subscribe :). -->
  17. <link rel="alternate"
  18. type="application/atom+xml"
  19. title="Feed"
  20. href="/david/log/">
  21. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  22. <link rel="apple-touch-icon"
  23. sizes="180x180"
  24. href="/static/david/icons2/apple-touch-icon.png">
  25. <link rel="icon"
  26. type="image/png"
  27. sizes="32x32"
  28. href="/static/david/icons2/favicon-32x32.png">
  29. <link rel="icon"
  30. type="image/png"
  31. sizes="16x16"
  32. href="/static/david/icons2/favicon-16x16.png">
  33. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  34. <link rel="mask-icon"
  35. href="/static/david/icons2/safari-pinned-tab.svg"
  36. color="#07486c">
  37. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  38. <meta name="msapplication-TileColor" content="#f7f7f7">
  39. <meta name="msapplication-config"
  40. content="/static/david/icons2/browserconfig.xml">
  41. <meta name="theme-color"
  42. content="#f7f7f7"
  43. media="(prefers-color-scheme: light)">
  44. <meta name="theme-color"
  45. content="#272727"
  46. media="(prefers-color-scheme: dark)">
  47. <!-- Is that even respected? Retrospectively? What a shAItshow…
  48. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  49. <meta name="robots" content="noai, noimageai">
  50. <!-- Documented, feel free to shoot an email. -->
  51. <link rel="stylesheet" href="/static/david/css/style_2024-01-13.css">
  52. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  53. <link rel="preload"
  54. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  55. as="font"
  56. type="font/woff2"
  57. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  58. crossorigin>
  59. <link rel="preload"
  60. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  61. as="font"
  62. type="font/woff2"
  63. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  64. crossorigin>
  65. <link rel="preload"
  66. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  67. as="font"
  68. type="font/woff2"
  69. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  70. crossorigin>
  71. <link rel="preload"
  72. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  73. as="font"
  74. type="font/woff2"
  75. media="(prefers-color-scheme: dark)"
  76. crossorigin>
  77. <link rel="preload"
  78. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  79. as="font"
  80. type="font/woff2"
  81. media="(prefers-color-scheme: dark)"
  82. crossorigin>
  83. <link rel="preload"
  84. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  85. as="font"
  86. type="font/woff2"
  87. media="(prefers-color-scheme: dark)"
  88. crossorigin>
  89. <script>
  90. function toggleTheme(themeName) {
  91. document.documentElement.classList.toggle(
  92. 'forced-dark',
  93. themeName === 'dark'
  94. )
  95. document.documentElement.classList.toggle(
  96. 'forced-light',
  97. themeName === 'light'
  98. )
  99. }
  100. const selectedTheme = localStorage.getItem('theme')
  101. if (selectedTheme !== 'undefined') {
  102. toggleTheme(selectedTheme)
  103. }
  104. </script>
  105. <body data-instant-intensity="viewport-all">
  106. <article>
  107. <header>
  108. <hgroup>
  109. <h1>Wuwei</h1>
  110. <p>Le <time datetime="2024-01-13">13 janvier 2024</time></p>
  111. </hgroup>
  112. </header>
  113. <nav>
  114. <p class="center">
  115. <a rel="prev"
  116. href="/david/2024/01/12/"
  117. title="Publication précédente : Personnel">← Précédent</a> •
  118. <nobr>
  119. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  120. </nobr>
  121. <nobr>
  122. <a href="/david/recherche/"
  123. title="Aller à la page de recherche"
  124. rel="search">Recherche</a>
  125. </nobr>
  126. • <a rel="next"
  127. href="/david/2024/01/14/"
  128. title="Publication suivante : Fiction">Suivant →</a>
  129. </p>
  130. </nav>
  131. <blockquote>
  132. <p>Le <em>wuwei</em>, dans le taoïsme, est d’ailleurs composé de deux idéogrammes&nbsp;: le rien et la volonté. Et on sait à quel point il faut beaucoup de volonté pour revendiquer davantage de rien. Il se traduit généralement par <em>non-agir</em> ou <em>non-intervention</em>, mais cela ne signifie pas pour autant rester les bras croisés en rejetant toute nouveauté, simplement de faire des choix éclairés et de ne pas forcer le cours des choses. Se fixer des limites, distinguer ce qui relève du progrès vers une vie bonne et décente de ce qui nous aliène, savoir <em>ne pas</em> est un art de vivre au quotidien. Et je ne peux m’empêcher de penser que Bartleby devait être&nbsp;chinois.</p>
  133. <p>Décliner l’usage de ce dont on n’a pas besoin, <mark>discerner parmi les technologies celles qui risquent de faire plus de mal que de bien,</mark> voilà qui manque cruellement à notre époque où l’on a oublié que parfois ne pas nuire vaut mieux qu’agir. Il y aurait pourtant un nombre incalculable d’applications pratiques du <em>wuwei</em>, de la géo-ingénierie à l’intelligence artificielle, tant de cas où il serait bon que l’espèce humaine sache se&nbsp;retenir.</p>
  134. <p><cite><em>Alors nous irons trouver la beauté ailleurs</em>, Corinne Morel&nbsp;Darleux</cite></p>
  135. </blockquote>
  136. <p>Cette année encore, ce sera pour moi le <em>non-usage</em> de l’<a data-link-domain="simonwillison.net" href="https://simonwillison.net/2024/Jan/7/call-it-ai/">intelligence artificielle</a> <a href="/david/cache/2024/3ea27fca4fabb81676fc1b98264f3bd8/" title="Copie locale au 2024-01-13">[archive]</a> explicite qui sera mon <em>wuwei</em>. Je précise le <q lang="fr">explicite</q> car il y en a déjà plein partout dans mon téléphone et ailleurs. J’ai peut-être une des dernières générations d’appareil photo qui ne va pas adapter l’image à une norme / culture apprise. Je suis curieux d’observer le nivellement (au sens moyenne, pas forcément par le bas) que vont provoquer les <abbr title="Large Language Model">LLM</abbr> dans le domaine, peut-être deviendra-t-il plus imperceptible qu’une <a data-link-domain="theverge.com" href="https://www.theverge.com/2023/3/13/23637401/samsung-fake-moon-photos-ai-galaxy-s21-s23-ultra">lune</a> <a href="/david/cache/2024/e990536ed88823f047296ea25a6b7933/" title="Copie locale au 2024-01-13">[archive]</a> ou une <a data-link-domain="theverge.com" href="https://www.theverge.com/2023/12/2/23985299/iphone-bridal-photo-three-poses-explanation-panorama-photoshop-generative-ai">mariée</a> <a href="/david/cache/2024/668d0f82ae65b0e94ea76145057759a7/" title="Copie locale au 2024-01-13">[archive]</a> mais il sera toujours&nbsp;là.</p>
  137. <p>Ce <strong>explicite</strong> correspond principalement pour moi à des <em>prompts</em> qui m’aideraient à coder. Je regarde ce qui se fait dans le domaine et j’en vois l’intérêt mais je vois aussi au détriment de tout ce que cela est rendu possible. Des humains-esclaves qui modèrent ce qui est généré d’un côté, des sources d’apprentissage non consenties —&nbsp;voire privées&nbsp;— et des ressources pharaoniques pour réussir à aligner 3&nbsp;fonctions qu’il faut ensuite comprendre et adapter de toute&nbsp;façon.</p>
  138. <p>Et puis il y a toute cette zone grise, je me sers par exemple de la reconnaissance de caractère intégrée à Photos.app de macOS pour retranscrire les citations depuis des photos de passages de livres. Auparavant, je les recopiais à la main. Est-ce que cela changeait ma manière de les&nbsp;ré-interpréter&#8239;?</p>
  139. <hr />
  140. <blockquote>
  141. <p>Il nous faut trouver de nouvelles manières littéraires susceptibles de percuter sans chercher à convaincre, et déjouer le didactisme qui veut à tout prix expliquer et instruire. Peut-être faudrait-il aller jusqu’à s’imposer comme contrainte de proscrire l’usage de certains mots afin de renouveler le&nbsp;genre.</p>
  142. <p>Écologie, capitalisme, croissance, nature, social, climat, peuple, vert, environnement, progrès, révolution, biodiversité, démocratie&nbsp;: la plupart d’entre eux ne manquerait à personne tant ils ont été dévoyés et usés jusqu’à la lie. Mais notre meilleure botte est sans doute de miser sur la capacité du sensible à <em>affecter</em>.</p>
  143. <p><mark>En littérature, c’est l’empathie qui amène à la réflexion et non l’inverse.</mark> Vous pouvez développer l’argumentaire le plus serré qui soit dans un livre, je doute fort que cela fasse changer quiconque d’avis. En revanche, donnez-nous un personnage à chérir, faites-nous partager son intimité, ses émois, ses douleurs et ses joies, et il nous sera bien plus aisé de prendre en compte son point de vue, à défaut de le&nbsp;partager.</p>
  144. <p><cite><em>Ibid.</em></cite></p>
  145. </blockquote>
  146. <p>De plus en plus tenté d’explorer cette piste. Je me <a href="/david/stream/2018/11/13/">souviens</a> <a href="/david/stream/2018/11/25/">avec</a> <a href="/david/stream/2018/11/27/">émotion</a> de ma lecture de <em>Professeur cherche élève ayant désir de sauver le monde</em> par Daniel&nbsp;Quinn.</p>
  147. <nav>
  148. <p>
  149. <a href="/david/2024/ecriture/"
  150. title="Liste de tous les articles 2024 associés à cette étiquette"
  151. rel="tag">#écriture</a>
  152. <a href="/david/2024/ia/"
  153. title="Liste de tous les articles 2024 associés à cette étiquette"
  154. rel="tag">#IA</a>
  155. <a href="/david/2024/parvenir/"
  156. title="Liste de tous les articles 2024 associés à cette étiquette"
  157. rel="tag">#parvenir</a>
  158. <a href="/david/#tags-2024" title="Liste de toutes les étiquettes 2024">tous ?</a>
  159. </p>
  160. </nav>
  161. <nav>
  162. <p class="center">
  163. <a rel="prev"
  164. href="/david/2024/01/12/"
  165. title="Publication précédente : Personnel">← Précédent</a> •
  166. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  167. • <a rel="next"
  168. href="/david/2024/01/14/"
  169. title="Publication suivante : Fiction">Suivant →</a>
  170. </p>
  171. </nav>
  172. <aside>
  173. <theme-toggle></theme-toggle>
  174. </aside>
  175. </article>
  176. <hr>
  177. <footer>
  178. <p>
  179. <nobr>
  180. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  181. </nobr>
  182. <nobr>
  183. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  184. </nobr>
  185. <nobr>
  186. <a href="http://larlet.com"
  187. title="Go to my English profile"
  188. data-instant>Pro</a>
  189. </nobr>
  190. <nobr>
  191. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  192. </nobr>
  193. <nobr>
  194. <abbr class="nowrap"
  195. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  196. </nobr>
  197. </p>
  198. <template id="theme-selector">
  199. <form>
  200. <style type="text/css">
  201. fieldset {
  202. text-align: center;
  203. }
  204. </style>
  205. <fieldset>
  206. <legend>Thème
  207. </legend>
  208. <label>
  209. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  210. Auto
  211. </label>
  212. <label>
  213. <input type="radio" value="dark" name="chosen-color-scheme">
  214. Foncé
  215. </label>
  216. <label>
  217. <input type="radio" value="light" name="chosen-color-scheme">
  218. Clair
  219. </label>
  220. </fieldset>
  221. </form>
  222. </template>
  223. </footer>
  224. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  225. <script>
  226. class ThemeToggle extends HTMLElement {
  227. constructor() {
  228. super()
  229. const themeSelectorTemplate = document.querySelector('#theme-selector')
  230. const form = themeSelectorTemplate.content.firstElementChild
  231. this.attachShadow({ mode: 'open' })
  232. this.shadowRoot.appendChild(form.cloneNode(true))
  233. }
  234. connectedCallback() {
  235. const form = this.shadowRoot.querySelector('form')
  236. form.addEventListener('change', (e) => {
  237. const chosenColorScheme = e.target.value
  238. localStorage.setItem('theme', chosenColorScheme)
  239. toggleTheme(chosenColorScheme)
  240. })
  241. const selectedTheme = localStorage.getItem('theme')
  242. if (selectedTheme && selectedTheme !== 'undefined') {
  243. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  244. }
  245. }
  246. }
  247. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  248. window.addEventListener('load', () => {
  249. let colorsLayer = undefined
  250. let hasDarkRules = false
  251. for (const styleSheet of Array.from(document.styleSheets)) {
  252. let mediaRules = []
  253. for (const layerRule of styleSheet.cssRules) {
  254. if (!(layerRule instanceof CSSLayerBlockRule)) {
  255. continue
  256. }
  257. if (layerRule.name === 'colors') {
  258. colorsLayer = layerRule
  259. }
  260. for (const cssRule of layerRule.cssRules) {
  261. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  262. continue
  263. }
  264. // WARNING: Safari does not have/supports `conditionText`.
  265. if (cssRule.conditionText) {
  266. if (cssRule.conditionText !== prefersColorSchemeDark) {
  267. continue
  268. }
  269. } else {
  270. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  271. continue
  272. }
  273. }
  274. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  275. }
  276. }
  277. // WARNING: do not try to insert a Rule to a styleSheet you are
  278. // currently iterating on, otherwise the browser will be stuck
  279. // in a infinite loop…
  280. for (const mediaRule of mediaRules) {
  281. // Safari requires the `0` second parameter (even if default).
  282. colorsLayer.insertRule(mediaRule.cssText, 0)
  283. hasDarkRules = true
  284. }
  285. }
  286. if (hasDarkRules) {
  287. if ('customElements' in window && !customElements.get('theme-toggle')) {
  288. customElements.define('theme-toggle', ThemeToggle)
  289. }
  290. }
  291. })
  292. </script>
  293. </body>
  294. </html>