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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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>notes (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/07/10/notes-train">
  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>notes</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/07/10/notes-train" 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/2023/07/10/0797-batiment-visage.jpg" alt="bâtiments avec deux signes blancs. L'ensemble donne un peu l'impression d'un visage.">
  77. <figcaption>Cupertino, États-Unis, 10 juillet 2023</figcaption>
  78. </figure>
  79. <blockquote>
  80. <p>From the point of view of scientific objectivity the stereotypes were inaccurate conclusions derived from unsound methods.<br>
  81. — The Myth Of The Lazy Native, Syed Hussein Alatas, urn:isbn:978-967-0311-97-5</p>
  82. </blockquote>
  83. <p><a href="https://www.la-grange.net/2023/07/09/western">Hier</a>, je mentionnais que je partagerais mes notes de train. Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L'ennui permet l'étincelle des rêveries, tout comme la nuit la profondeur des rêves. Mes notes sont de plus en plus souvent en anglais et quand je les recopie, je dois souvent me traduire.</p>
  84. <ul>
  85. <li>Two men walking naked on Castro with their hands covering their penises.</li>
  86. <li>Sometimes I like unpretentious food. Often?</li>
  87. <li>Amère-ika (avec un jeu de mot sur le calmar)</li>
  88. <li>Caltrain. 1 hour between trains.</li>
  89. <li>Flooding the streets with trees. Keep half the road only. J'aimerais tant reboiser les villes, que chacun des axes ne soient que des corridors verts.</li>
  90. <li>I want to be able to quote a podcast like I quote the part of a webpage with automatic transcribing of the text to insert in a blog post with references to the podcast source.</li>
  91. <li>From cloudy San-Francisco to Sunnyvale.</li>
  92. <li>When we cover the land with concrete, we kill the subterranean world. No water.</li>
  93. <li>My eyes are faster than my camera.</li>
  94. <li>Caltrain. Some cars with a lot of space for bikes. That’s cool. Personne ne prend le train et pourtant, il y a des systèmes comme ce wagon réservé aux vélos.</li>
  95. <li>A childhood in the Silicon Valley suburb. Qu'est-ce que cela signifie ? Comment l'enfant voit le monde une fois toute son enfance passée dans une banlieue avec très peu de confrontations urbaines. De larges espaces entre les maisons, le parfum des eucalyptus et du camphrier, des trottoirs de béton, des jardins privés devant chaque maison. Un mall tous les dix ou vingt pâtés de maisons et des autoroutes.</li>
  96. <li>Worse it’s possible to imagine because of the American feeding through movies and tv series.</li>
  97. <li>Being offline is a treat.</li>
  98. </ul>
  99. <hr>
  100. <p>Plus de trois ans que je me demande si je dois changer mousse mon vélo parce que le cadre est un peu trop petit. Le 20 janvier prochain (2024), il aura 10 ans. Et puis je n’arrive pas à m’y résoudre car mousse fonctionne très bien depuis 10 ans. Et que c'est cela le plaisir d'un vélo et de ce geste écologique, celui de pouvoir l'utiliser, le réparer pendant très, <strong>très</strong> longtemps. Je vois de nombreux vélos que je trouve attirant, mais au final il n'y a rien qui ne justifie un nouveal achat pour remplacer ce vélo qui fonctionne. Il me faudra lui faire une réparation de 10 ans, cela semble un choix plus judicieux et du coup plus écologique.</p>
  101. <hr>
  102. <p>Je remarque une fourmi sur le mur. Elle est 50 fois plus grande que sa taille réelle à cause de son ombre.</p>
  103. <hr>
  104. <p><a href="https://jvns.ca/blog/2023/07/08/open-sourcing-the-nginx-playground/">I’m not very good at open source</a>.</p>
  105. <p>Il y a souvent un prix social et émotionnel à partager les choses en ligne.</p>
  106. <blockquote>
  107. <p>The README is mostly an extended apology for the developer experience and note that the project is unmaintained.</p>
  108. </blockquote>
  109. <p>Je crois que c'est une bonne attitude.</p>
  110. </article>
  111. <hr>
  112. <footer>
  113. <p>
  114. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  116. </svg> Accueil</a> •
  117. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  119. </svg> Suivre</a> •
  120. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  122. </svg> Pro</a> •
  123. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  125. </svg> Email</a> •
  126. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  127. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  128. </svg> Légal</abbr>
  129. </p>
  130. <template id="theme-selector">
  131. <form>
  132. <fieldset>
  133. <legend><svg class="icon icon-brightness-contrast">
  134. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  135. </svg> Thème</legend>
  136. <label>
  137. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  138. </label>
  139. <label>
  140. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  141. </label>
  142. <label>
  143. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  144. </label>
  145. </fieldset>
  146. </form>
  147. </template>
  148. </footer>
  149. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  150. <script>
  151. function loadThemeForm(templateName) {
  152. const themeSelectorTemplate = document.querySelector(templateName)
  153. const form = themeSelectorTemplate.content.firstElementChild
  154. themeSelectorTemplate.replaceWith(form)
  155. form.addEventListener('change', (e) => {
  156. const chosenColorScheme = e.target.value
  157. localStorage.setItem('theme', chosenColorScheme)
  158. toggleTheme(chosenColorScheme)
  159. })
  160. const selectedTheme = localStorage.getItem('theme')
  161. if (selectedTheme && selectedTheme !== 'undefined') {
  162. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  163. }
  164. }
  165. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  166. window.addEventListener('load', () => {
  167. let hasDarkRules = false
  168. for (const styleSheet of Array.from(document.styleSheets)) {
  169. let mediaRules = []
  170. for (const cssRule of styleSheet.cssRules) {
  171. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  172. continue
  173. }
  174. // WARNING: Safari does not have/supports `conditionText`.
  175. if (cssRule.conditionText) {
  176. if (cssRule.conditionText !== prefersColorSchemeDark) {
  177. continue
  178. }
  179. } else {
  180. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  181. continue
  182. }
  183. }
  184. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  185. }
  186. // WARNING: do not try to insert a Rule to a styleSheet you are
  187. // currently iterating on, otherwise the browser will be stuck
  188. // in a infinite loop…
  189. for (const mediaRule of mediaRules) {
  190. styleSheet.insertRule(mediaRule.cssText)
  191. hasDarkRules = true
  192. }
  193. }
  194. if (hasDarkRules) {
  195. loadThemeForm('#theme-selector')
  196. }
  197. })
  198. </script>
  199. </body>
  200. </html>