A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  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>ce qui est passé (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/2023/01/07/passe">
  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>ce qui est passé</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/2023/01/07/passe" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <figure>
  74. <img src="https://www.la-grange.net/2023/01/07/7962D-plantes.jpg" alt="plantes au ras de l'eau.">
  75. <figcaption>Yumenoshima, Japon, 7 janvier 2023</figcaption>
  76. </figure>
  77. <blockquote>
  78. <p>Je n'ai jamais pensé, voilà, je suis une femme qui écrit. Je ne suis pas une femme qui écrit, je suis quelqu'un qui écrit. Mais quelqu'un qui a une histoire de femme, différente de celle d'un homme.<br>
  79. — Le vrai lieu, Annie Ernaux, urn:isbn:978-2-07-277965-7</p>
  80. </blockquote>
  81. <p>Nous sommes allés découvrir <a href="https://www.yumenoshima.jp">Yumenoshima</a> (une des îles artificielles de Tokyo).</p>
  82. <ul>
  83. <li><p>Le <a href="http://d5f.org/en">musée du Daigo Fukuryu Maru</a>, un bâteau de pêche au thon japonais qui fût irradié par la retombée des cendres d'un test d'explosion nucléaire par les États-Unis dans le Pacifique près de Bikini, le 1er mars 1954. Le musée expose le bateau mais également raconte l'histoire de tous les pêcheurs à son bord, des populations victimes des essais nucléaires. La France est le 3eme en nombre de tests en plein air derrière les États-Unis et la Russie.</p>
  84. </li>
  85. <li><p>Le <a href="https://www.yumenoshima.jp/botanicalhall">jardin botanique</a> est un lieu de paie et de plénitude pour moi. J'adopte le pas lent dans la serre tropicale afin de bien sentir sous le masque les parfums humides, la mousse, l'eau sur la végétation. L'hiver enveloppe le verre de la serre, et j'ai une furieuse envie de déménager en Asie du Sud-Est. Le parfum est un élixir.
  86. <figure>
  87. <img src="https://www.la-grange.net/2023/01/07/7958D-serre.jpg" alt="Intérieur de la serre du jardin botanique.">
  88. <figcaption>Yumenoshima, Japon, 7 janvier 2023</figcaption>
  89. </figure>
  90. </p>
  91. </li>
  92. <li><p>Découverte aussi de la <a href="https://casica.tokyo/">boutique Casica</a> qui a un restaurant dans un espace très beau. Ils ont l'intelligence de publier les <a href="https://arkhe.jp/recipe_tag/menu/">recettes complètes de leur menu</a> sur leur site Web.<br>
  93. <figure>
  94. <img src="https://www.la-grange.net/2023/01/07/7932D-repas.jpg" alt="Plateau repas en bois avec différentes assiettes et mets.">
  95. <figcaption>Yumenoshima, Japon, 7 janvier 2023</figcaption>
  96. </figure>
  97. <figure>
  98. <img src="https://www.la-grange.net/2023/01/07/7948D-plantes.jpg" alt="Plantes d'appartement.">
  99. <figcaption>Yumenoshima, Japon, 7 janvier 2023</figcaption>
  100. </figure>
  101. </p>
  102. </li>
  103. </ul>
  104. <hr>
  105. <p><a href="https://n.survol.fr/n/jonglage-de-notifications">Tout comme Éric</a>, je suis un grand fan du <a href="https://slack.com/help/articles/360025446073-Guide-to-Slack-notifications">système de notifications de Slack</a>.</p>
  106. <blockquote>
  107. <p>Je jongle. Ouvrir une noti­fi­ca­tion c’est le risque de la voir dispa­raitre. Ne pas la trai­ter en urgence c’est risquer de l’ou­blier ou ne pas réus­sir à remettre la main dessus. La lais­ser c’est l’avoir en atten­tion perma­nente et risquer de ne pas voir quelque chose qu’on aime­rait trai­ter immé­dia­te­ment.</p>
  108. </blockquote>
  109. <p>Ce système de pouvoir lire et en même temps <strong>marquer le message en rappel pour plus tard</strong> est essentiel. Le système pourrait être améliorer avec une vraie liste tabulaire.</p>
  110. <p>J'ai découvert récemment que mail.app pouvait créer des rappels aussi.</p>
  111. <p><img src="https://www.la-grange.net/2023/01/07/mail-rappel.png" alt="copie d'écran de la fonctionnalité dans mail.app."></p>
  112. <p>Il stocke les messages dans un onglet rappel très pratique.</p>
  113. <p><img src="https://www.la-grange.net/2023/01/07/mail-rappel-tab.png" alt="Copie d'écran de l'onglet rappel."></p>
  114. <p>Ma technique courante, par habitude, est de marquer avec un drapeau et d'afficher les non-lus et les mails avec drapeaux. Je vais tenter d'utiliser un peu plus le système de rappel dans mail.app.</p>
  115. <hr>
  116. <p>Petit café du matin dans la rue commerçante de Sugamo.</p>
  117. <hr>
  118. <p>La vieille écriture ou l'écriture qui vieillit mal. Il y a un caractère ethnologique et historique de ce que l'on lit. Stéphane partage <a href="https://nota-bene.org/Philip-K-Dick-Nouvelles-completes-volume-1-1947-1953">ces réflexions sur les nouvelles de Dick</a>.</p>
  119. <blockquote>
  120. <p>Il y a pas mal de choses surannées chez Dick. Je l’ai toujours vu comme mon contemporain (pensez, j’ai commencé à le lire très peu de temps après sa mort), et quand on compte sur les doigts, les nouvelles ont tout de même 70 ans. Le temps de deux ou trois générations, au fond.</p>
  121. </blockquote>
  122. <p>Je ne l'ai jamais lu. Mais j'ai un sentiment similaire à la re-lecture des trucs-en-vracs de Gotlieb, qu'il tire de mes étagères. Il regarde avec amusement. Je ne trouve plus cela drôle et de trop nombreuses fois très sexiste, un humour potache qui ne me touche plus du tout.</p>
  123. <hr>
  124. <p>Des carnets de dessins à en saliver : <a href="https://www.thisiscolossal.com/2023/01/mattias-adolfsson-sketchbook-41/">Detailed Illustrations Brim with Manic Mayhem in Mattias Adolfsson’s Exuberant Sketchbooks</a>.</p>
  125. <p><img src="https://www.la-grange.net/2023/01/07/adolfsson1-4.jpg" alt="Planche de dessin à l'aquarelle représentant de la nourriture au Japon."></p>
  126. <hr>
  127. <p>Maintenant que je vis à Tokyo, Jimbocho est à <a href="https://www.rome2rio.com/map/Sugamo-Station/Jimb%C5%8Dch%C5%8D-Station#r/Subway/s/0">5 encablures de la station de Sugamo (9 minutes)</a>. Je devrais aller traîner plus souvent dans le quartier des livres d'occasion. Un <a href="https://www3.nhk.or.jp/news/html/20230106/k10013937441000.html">article de NHK couvre l'histoire de Nobuaki Abe (79 ans) et de son magasin dédié aux livres étrangers</a> (aka non japonais dans le contexte du Japon) : <a href="http://www.subun-so.com/">Subun-so book store</a></p>
  128. <p>Le magasin a un site Web, mais ils ne mettent pas la totalité de leur collection en ligne. Le propriétaire du magasin veut que les gens viennent toujours découvrir les livres dans le magasin, plutôt qu'un achat déshumanisé sur le Web. Il y a toujours ce moment de chasse au trésor dans un magasin de livres d'occasion.</p>
  129. <p>Il raconte aussi la belle histoire d'un étudiant venant tous les jours pour copier un livre dont il avait besoin pour écrire sa thèse mais pas l'argent nécessaire pour l'acheter. Le livre éventuellement fût donné à l'étudiant. Des années plus tard, l'étudiant finalement devint professeur d'université. Mais leurs relations continua. Et un jour quand le magasin fût déménagé, il offra un cadeau en retour pour la générosité du propriétaire qui avait toujours refusé d'être remboursé. Cela me rappelle les <a href="https://www.la-grange.net/2022/12/17/css-grid">livres piratés du quartier de Jimbocho</a> que j'ai découverts le 17 décembre dernier.</p>
  130. <p>Il explique également que le temps de curation pour évaluer le prix d'un livre peut parfois prendre beaucoup de temps. Et qu'un prix élevé détermine à la fois un état impeccable sans aucune page manquante et le travail d'expertise qui a été réalisé pour évaluer le livre.</p>
  131. <hr>
  132. <p>Un site de <a href="https://www.kosho.or.jp/wppost/plg_WpPost_post.php?postid=76">recherche des livres de l'association de vendeurs de livres anciens</a>.</p>
  133. <hr>
  134. <p><a href="https://floss.social/@pieq/109645565392544332">Port du masque</a>. Le choix de réponse possible de David me surprend. Est-ce pour générer de la réaction ? ou est-ce par oubli de la normalité de porter un masque ? En tout cas pour Taiwan et le Japon, rien d'étonnant, de voir une personne porter un masque, que ce soit maintenant ou pre-COVID.</p>
  135. </article>
  136. <hr>
  137. <footer>
  138. <p>
  139. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  140. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  141. </svg> Accueil</a> •
  142. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  143. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  144. </svg> Suivre</a> •
  145. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  146. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  147. </svg> Pro</a> •
  148. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  149. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  150. </svg> Email</a> •
  151. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  153. </svg> Légal</abbr>
  154. </p>
  155. <template id="theme-selector">
  156. <form>
  157. <fieldset>
  158. <legend><svg class="icon icon-brightness-contrast">
  159. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  160. </svg> Thème</legend>
  161. <label>
  162. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  163. </label>
  164. <label>
  165. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  166. </label>
  167. <label>
  168. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  169. </label>
  170. </fieldset>
  171. </form>
  172. </template>
  173. </footer>
  174. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  175. <script>
  176. function loadThemeForm(templateName) {
  177. const themeSelectorTemplate = document.querySelector(templateName)
  178. const form = themeSelectorTemplate.content.firstElementChild
  179. themeSelectorTemplate.replaceWith(form)
  180. form.addEventListener('change', (e) => {
  181. const chosenColorScheme = e.target.value
  182. localStorage.setItem('theme', chosenColorScheme)
  183. toggleTheme(chosenColorScheme)
  184. })
  185. const selectedTheme = localStorage.getItem('theme')
  186. if (selectedTheme && selectedTheme !== 'undefined') {
  187. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  188. }
  189. }
  190. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  191. window.addEventListener('load', () => {
  192. let hasDarkRules = false
  193. for (const styleSheet of Array.from(document.styleSheets)) {
  194. let mediaRules = []
  195. for (const cssRule of styleSheet.cssRules) {
  196. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  197. continue
  198. }
  199. // WARNING: Safari does not have/supports `conditionText`.
  200. if (cssRule.conditionText) {
  201. if (cssRule.conditionText !== prefersColorSchemeDark) {
  202. continue
  203. }
  204. } else {
  205. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  206. continue
  207. }
  208. }
  209. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  210. }
  211. // WARNING: do not try to insert a Rule to a styleSheet you are
  212. // currently iterating on, otherwise the browser will be stuck
  213. // in a infinite loop…
  214. for (const mediaRule of mediaRules) {
  215. styleSheet.insertRule(mediaRule.cssText)
  216. hasDarkRules = true
  217. }
  218. }
  219. if (hasDarkRules) {
  220. loadThemeForm('#theme-selector')
  221. }
  222. })
  223. </script>
  224. </body>
  225. </html>