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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  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>plaisir d'ébauche (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/06/ebauche">
  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>plaisir d'ébauche</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/06/ebauche" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-07
  72. </p>
  73. </nav>
  74. <hr>
  75. <figure>
  76. <img src="https://www.la-grange.net/2024/01/06/3008-furikake.jpg" alt="Feuilles de céleri et de persil, finement hâchées avec du zeste de citron.">
  77. <figcaption>Komagome, Japon, 6 janvier 2024</figcaption>
  78. </figure>
  79. <blockquote>
  80. <p>À Lubok Sayong, tout venait en un seul exemplaire: la rue principale, le rond-point, le feu rouge, le commissariat de police, la caserne des pompiers et son unique camion, le bureau de poste, la station-service, la tour de l'horloge, le supermarché, le cinéma, le Kentucky Fried Chicken, l'école malaise, la chinoise, celle des Tamouls, et même un pensionnat chrétien pour jeunes filles, histoire de faire bonne mesure. Nous avions un gîte d'État, infesté de cafards, et un hôtel deux étoiles avec un bar-grill au rez-de-chaussée, le Hemingway. L'hôtel proposait des chambres avec ou sans petit déjeuner, climatisées ou non, avec ou sans eau chaude; quant au bar, pas sûr que le romancier américain y eût trouvé les cocktails à son goût.<br>
  81. — La somme de nos folies, Shih-Li Kow, urn:isbn:9-791038-702059</p>
  82. </blockquote>
  83. <p>Quand je cuisine, je range et nettoie l'espace du travail. Je prends les ingrédients et les prépare. J'ai le plaisir de l'ébauche tout autant que celui du goût. J'aime la beauté du moment où je réalise le plat, le travail qui construit son élaboration, les parfums frais, l'esthétique des végétaux et des épices.</p>
  84. <p>Le plaisir est très similaire à celui de couper le bois à La Grange qui sera utilisé pour le feu dans la cheminée. Bien que la chaleur du feu m'apaise, la coupe des branches trop longues, le ramassage des brindilles, les copeaux et la sciure m'extasient.</p>
  85. <hr>
  86. <p>Le code n'est pas disponible mais l'<a href="https://optional.is/required/2024/01/05/week-672-673/">allusion du projet</a> dans le dernier bilan hebdomadaire (<a href="https://optional.is/required/category/weeknotes/">weeknotes</a>) de Brian Suda semble intéressant.</p>
  87. <blockquote>
  88. <p>Reusing all the PHP code to <strong>create SVG pages and converting them into a PDF</strong>, we’re working on another puzzle book suitable for print-on-demand.</p>
  89. </blockquote>
  90. <p>Je me demande souvent si je devrais passer à des notes hebdomadaires, mais cela transformerait beaucoup plus le plaisir en rapport de travail. Étrange. La notion de semaine est quelque chose qui régule tellement la vie dans un rythme 5-2 qu'elle devient uniquement l'objet, le marqueur d'une vie organisée autour de l'activité professionnelle. Imaginez juste un instant que ce soit 5 jours d'activités personnelles pour 2 jours de travail. La nature même de la semaine changerait. Ou imaginons même qu'il n'y ait plus de structures du tout. J'entends déjà la vague des « oui, mais… » Justement, j'insiste « oui, mais pourquoi pas… » afin de comprendre quels sont les changements que cela pourraît provoquer sur notre temps et notre espace.</p>
  91. <hr>
  92. <p>Je <a href="/2024/01/02/ekiden">partageais</a> il y a quelques jours le podcast de Anne Savelli, <a href="https://annesavelli.fr/podcast/article/je-n-ai-pas-le-temps-d-ecrire">Je n'ai pas le temps d'écrire</a>. Cela a plu à <a href="https://mamot.fr/@emmanuelc/111699241144740226">Emmanuel</a>, mais cela a créé une tension pour <a href="https://mastodon.cloud/@notabene@piaille.fr/111699035262924101">Stéphane</a>. Avoir le temps de transcrire de faire passer les mots de l'oral à l'écrit est plus facile aujourd'hui qu'il ne l'était hier. Je ne sais pas comment Anne Savelli travaille son podcast. Lit-elle un texte écrit ? Ou improvise-t-elle ? La transcription textuelle est en effet essentielle pour nombre de personnes et pas uniquement pour les personnes avec des difficultés auditives. Mais je n'ai pas non plus d'expériences dans ce domaine. J'ai <a href="https://mastodon.cloud/@karlcow/111706701151267236">commencé à chercher de l'information</a>.</p>
  93. <blockquote>
  94. <p>Comment réalise-t-on la transcription d'un podcast à l'écrit sans trop d'efforts ? Est-ce qu'il y a des outils, des techniques, des choses à faire et ne pas faire ? Les gamelles qu'on peut essuyer en le faisant ?</p>
  95. </blockquote>
  96. <p><a href="https://floss.social/@pieq/111706731693792167">Pierre</a> a essayé <a href="https://github.com/openai/whisper">Whisper</a></p>
  97. <blockquote>
  98. <p>J'ai essayé <a href="https://github.com/openai/whisper">Whisper</a> il y a quelques temps et j'ai été assez impressionné. Ça permet de faire 90% du boulot. Comme un OCR pour l'écrit, il faut ensuite relire et corriger des choses, mais par exemple le modèle est capable de différencier différentes personnes parlant, donc même pour ça c'est pratique.</p>
  99. </blockquote>
  100. <p>Cela m'a mis la puce à l'oreille, j'ai cherché encore un peu et je suis tombé sur ce TIL récent de Simon Willison : <a href="https://til.simonwillison.net/macos/quick-whisper-youtube">Grabbing a transcript of a short snippet of a YouTube video with MacWhisper</a></p>
  101. <p>Je télécharge la <a href="https://goodsnooze.gumroad.com/l/macwhisper">version gratuite de MacWhisper</a>. Et j'installe le modèle multi-lingues small pour la version gratuite.</p>
  102. <p>Et puis je me dirige vers le site de Anne et dans le html je trouve le lien vers le fichier audio.</p>
  103. <pre><code>&lt;mediaelementwrapper
  104. id="mejs-16e57a799d4bf5f22a9cf6c9f37ecef4-0"&gt;
  105. &lt;audio
  106. class="mejs mejs-1258 done"
  107. data-id="16e57a799d4bf5f22a9cf6c9f37ecef4"
  108. src="https://annesavelli.fr/IMG/mp3/faites_entrer_l_e_criture_1er_e_pisode.mp3"
  109. type="audio/mpeg"
  110. preload="none"
  111. data-mejsoptions="{&amp;quot;alwaysShowControls&amp;quot;: true,&amp;quot;loop&amp;quot;:false,&amp;quot;audioWidth&amp;quot;:&amp;quot;100%&amp;quot;,&amp;quot;duration&amp;quot;:1516}"
  112. id="mejs-16e57a799d4bf5f22a9cf6c9f37ecef4-0_html5"&gt;
  113. &lt;/audio&gt;
  114. &lt;/mediaelementwrapper&gt;
  115. </code></pre>
  116. <p>Je réalise une copie locale et une fois téléchargé, je glisse-dépose le fichier sur MacWhisper.</p>
  117. <p><img src="https://www.la-grange.net/2024/01/06/macwhisper-anne.png" alt="fenêtre de l'application en cours de transcription d'un fichier audio affichant le texte du contenu audio."></p>
  118. <p>Une fois la transcription terminée, je peux enregistrer le <a href="/2024/01/06/temps-ecrire-anne.txt">fichier texte du podcast</a> avec la fonction export en mode paragraphe. (non corrigé, brut).</p>
  119. <p>Je suis impressioné.</p>
  120. <hr>
  121. <figure>
  122. <img src="https://www.la-grange.net/2024/01/06/3007-congee.jpg" alt="Pot avec céleri coupé, du riz et des morceaux de poulet.">
  123. <figcaption>Komagome, Japon, 6 janvier 2024</figcaption>
  124. </figure>
  125. <p>Je prépare un congee au poulet et céleri, avec citron et persil. Délicieux pour les soirées d'hiver froides.</p>
  126. <figure>
  127. <img src="https://www.la-grange.net/2024/01/06/3015-congee.jpg" alt="Assiette de congee.">
  128. <figcaption>Komagome, Japon, 6 janvier 2024</figcaption>
  129. </figure>
  130. <hr>
  131. <p><a href="https://nicolasbouliane.com/blog/duty-to-document">Partager ce que l'on apprend</a></p>
  132. <blockquote>
  133. <p>If you learn something the hard way, share your findings with others. You have blazed a new trail; now you must mark it for your fellow travellers. Sharing knowledge is an unreasonably effective way of helping others.</p>
  134. </blockquote>
  135. <hr>
  136. <p><a href="https://nota-bene.org/Impact-des-partages-et-des-partages-de-partages">Impact des partages et des partages de partages</a></p>
  137. <blockquote>
  138. <p>Pour avoir moi aussi un jour posé des limites à ma vie dans un but d’écologie, je me retrouve dans ces réflexions. J’ai été très climaticide faute de savoir, pendant longtemps. J’ai vu la Chine, Hawaii, l’Islande. Entre autres. J’ai aussi, pour le boulot ou l’amour, pris l’avion peut-être une centaine de fois dans ma vie.</p>
  139. </blockquote>
  140. <hr>
  141. <p><a href="https://www.nottoolateclimate.com/_files/ugd/c8ef46_ff209e95f1f94336b40c02ad2c78aee7.pdf">Give Your Own Life a Tune-Up</a> (pdf)</p>
  142. <blockquote>
  143. <p>It is absolutely good to reduce your climate impact through what you buy, eat, and do; how you travel; and other things you have control over. But there are two important things to consider: <strong>one is that we can’t get to where we need to go just by everyone staying home and being careful about what they eat or getting on a bike</strong>. We need big change and we need it fast, and we will only get there by public engagement and collective effort. The other is that the fossil-fuel industry campaigned to get people to think about their own climate footprints to try to convince us that we’re the problem and focus on ourselves instead of on them and system change.</p>
  144. </blockquote>
  145. <hr>
  146. <p><a href="https://nicolasbouliane.com/blog/calm-tech">Calm tech</a></p>
  147. <blockquote>
  148. <p>But an important aspect is missing from Amber’s manifesto: calm requires trust. A quiet street only creates calm in a safe neighbourhood, and the tech industry definitely isn’t one of those.</p>
  149. </blockquote>
  150. <hr>
  151. <p><a href="https://remue.net/ressusciter-des-mots-et-des-figures-effacees">patrimoine et matrimoine</a> par <a href="https://www.auroreevain.com/">Aurore Évain</a>.</p>
  152. <blockquote>
  153. <p>Raconter l’histoire de ces mots permet de démontrer que leur disparition n’est pas un simple effet de l’usage, mais la conséquence d’un effacement volontaire, politique et institutionnel de ces féminins, qui s’est accompagné d’une masculinisation plus globale de la langue, avec entre autres la généralisation de l’accord au masculin, du fait qu’il était alors considéré comme « le genre le plus noble ». Tout ceci participe d’une instrumentalisation idéologique et sexiste du langage, survenue au XVIIe siècle, et confiée à l’Académie française.</p>
  154. </blockquote>
  155. <hr>
  156. <p><a href="https://www.nature.com/articles/d41586-022-04412-x">Degrowth can work — here’s how science can help</a></p>
  157. <p>L'article donne des voies sur les besoins de la décroissance mais aussi donne des chemins pour y parvenir comme s'extraire de la dépendance à la croissance.</p>
  158. <blockquote>
  159. <p>Economies today depend on growth in several ways. Welfare is often funded by tax revenues. Private pension providers rely on stock-market growth for financial returns. Firms cite projected growth to attract investors. Researchers need to identify and address such ‘growth dependencies’ on a sector-by-sector basis.</p>
  160. </blockquote>
  161. <p>Leur 5 points d'action :</p>
  162. <ul>
  163. <li>Remove dependencies on growth</li>
  164. <li>Fund public services</li>
  165. <li>Manage working-time reductions</li>
  166. <li>Reshape provisioning systems</li>
  167. <li>Political feasibility and opposition</li>
  168. </ul>
  169. </article>
  170. <hr>
  171. <footer>
  172. <p>
  173. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  174. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  175. </svg> Accueil</a> •
  176. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  178. </svg> Suivre</a> •
  179. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  181. </svg> Pro</a> •
  182. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  183. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  184. </svg> Email</a> •
  185. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  186. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  187. </svg> Légal</abbr>
  188. </p>
  189. <template id="theme-selector">
  190. <form>
  191. <fieldset>
  192. <legend><svg class="icon icon-brightness-contrast">
  193. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  194. </svg> Thème</legend>
  195. <label>
  196. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  197. </label>
  198. <label>
  199. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  200. </label>
  201. <label>
  202. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  203. </label>
  204. </fieldset>
  205. </form>
  206. </template>
  207. </footer>
  208. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  209. <script>
  210. function loadThemeForm(templateName) {
  211. const themeSelectorTemplate = document.querySelector(templateName)
  212. const form = themeSelectorTemplate.content.firstElementChild
  213. themeSelectorTemplate.replaceWith(form)
  214. form.addEventListener('change', (e) => {
  215. const chosenColorScheme = e.target.value
  216. localStorage.setItem('theme', chosenColorScheme)
  217. toggleTheme(chosenColorScheme)
  218. })
  219. const selectedTheme = localStorage.getItem('theme')
  220. if (selectedTheme && selectedTheme !== 'undefined') {
  221. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  222. }
  223. }
  224. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  225. window.addEventListener('load', () => {
  226. let hasDarkRules = false
  227. for (const styleSheet of Array.from(document.styleSheets)) {
  228. let mediaRules = []
  229. for (const cssRule of styleSheet.cssRules) {
  230. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  231. continue
  232. }
  233. // WARNING: Safari does not have/supports `conditionText`.
  234. if (cssRule.conditionText) {
  235. if (cssRule.conditionText !== prefersColorSchemeDark) {
  236. continue
  237. }
  238. } else {
  239. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  240. continue
  241. }
  242. }
  243. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  244. }
  245. // WARNING: do not try to insert a Rule to a styleSheet you are
  246. // currently iterating on, otherwise the browser will be stuck
  247. // in a infinite loop…
  248. for (const mediaRule of mediaRules) {
  249. styleSheet.insertRule(mediaRule.cssText)
  250. hasDarkRules = true
  251. }
  252. }
  253. if (hasDarkRules) {
  254. loadThemeForm('#theme-selector')
  255. }
  256. })
  257. </script>
  258. </body>
  259. </html>