Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  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>Espoir — David Larlet</title>
  13. <meta name="description" content="In a sense, every hyperlink on the World Wide Web is little act of hope. Even though I know that when I link to something, it probably won’t last, I still harbour that hope.">
  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>Espoir</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/07/20/" title="Publication précédente : Jour 2">← Précédent</a> •
  60. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  61. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  62. </svg> Accueil</a>
  63. • <a rel="next" href="/david/2021/07/22/" title="Publication suivante : Vol d’eau">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote lang="en">
  68. <p>In a sense, every hyperlink on the World Wide Web is little act of hope. Even though I know that when I link to something, it probably won’t last, I still harbour that hope.</p>
  69. <p>If hyperlinks are built on hope, and the web is made of hyperlinks, then in a way, <mark>the World Wide Web is quite literally made out of hope.</mark></p>
  70. <p>I like that.</p>
  71. <p><cite><em><a href="https://adactio.com/journal/18292">Hope</a></em> (<a href="/david/cache/2021/d650cd3cc8831f1b28b6cc2f7eb0f9f7/">cache</a>)</cite></p>
  72. </blockquote>
  73. <p>J’aime bien ce raisonnement <em>et</em> j’ai perdu espoir il y a un moment en essayant de mettre en cache local les publications que je lie. Je me demande parfois ce qui freine les autres personnes sensibles à ce vieillissement des liens à mettre en place leur <a href="/david/blog/2018/caching-links/">propre solution</a> pour le faire.</p>
  74. <p>J’utilise <a href="https://git.larlet.fr/davidbgk/larlet-fr-david-cache/src/branch/master/cache.py">ce script</a> et je fais pas mal de travail manuellement ensuite pour que ça reste au moins lisible. Dans certains cas j’abandonne, notamment pour les images/graphiques qui ont besoin de JavaScript pour s’afficher… dans d’autres je prends le temps de faire des liens absolus ou des retouches sémantiques. Une forme de prise de soin de mes futur·es lecteur·ices (dont je fais partie&#8239;!) avec l’espoir que ça soit utile. Il faudra que je regarde le nombre de liens qui ne sont plus disponibles que <em>via</em> ma copie en fonction des années. C’est intéressant aussi pour pouvoir faire des recherches en <em>full-text</em> sur le dépôt dédié sans dépendre d’un historique de navigateur.</p>
  75. <p>En <a href="/david/stream/2015/01/05/">6&nbsp;ans</a>, je n’ai supprimé qu’une seule ressource sur ma proposition à l’auteur·e qui souhaitait faire disparaître un contenu. Aucune violation de copyright ou autre n’a été remontée. Si cela arrivait, je m’assurerais auparavant que ce contenu n’est pas dans le cache de Google ou dans la <a href="https://archive.org/web/">Wayback machine</a> 🤷.</p>
  76. <blockquote lang="en">
  77. <p>As a young man, I wanted to help make a new medium that would be a step forward from Gutenberg’s invention hundreds of years before.</p>
  78. <p>By building a Library of Everything in the digital age, I thought the opportunity was not just to make it available to everybody in the world, but to make it better–smarter than paper. By using computers, <mark>we could make the Library not just searchable, but organizable;</mark> make it so that you could navigate your way through millions, and maybe eventually billions of web pages.</p>
  79. <p><cite><em><a href="https://blog.archive.org/2021/07/21/reflections-as-the-internet-archive-turns-25/">Reflections as the Internet Archive turns 25</a></em> (<a href="/david/cache/2021/e23db6deddbc0ea74b73c960df2b193f/">cache</a>)</cite></p>
  80. </blockquote>
  81. <nav>
  82. <p>
  83. <a href="/david/2021/incompetence/"
  84. title="Liste de tous les articles associés à cette étiquette"
  85. >#incompétence</a>
  86. <a href="/david/2021/traces/"
  87. title="Liste de tous les articles associés à cette étiquette"
  88. >#traces</a>
  89. <a href="/david/2021/web/"
  90. title="Liste de tous les articles associés à cette étiquette"
  91. >#web</a>
  92. <a href="/david/#tags"
  93. title="Liste de toutes les étiquettes existantes"
  94. ><svg class="icon icon-tags">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
  96. </svg> tous ?</a>
  97. </p>
  98. </nav>
  99. <nav>
  100. <p class="center">
  101. <a rel="prev" href="/david/2021/07/20/" title="Publication précédente : Jour 2">← Précédent</a> •
  102. <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
  103. • <a rel="next" href="/david/2021/07/22/" title="Publication suivante : Vol d’eau">Suivant →</a>
  104. </p>
  105. </nav>
  106. </article>
  107. <hr>
  108. <footer>
  109. <p>
  110. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  111. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  112. </svg> Accueil</a> •
  113. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  115. </svg> Suivre</a> •
  116. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  118. </svg> Pro</a> •
  119. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  121. </svg> Email</a> •
  122. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  124. </svg> Légal</abbr>
  125. </p>
  126. <template id="theme-selector">
  127. <form>
  128. <fieldset>
  129. <legend><svg class="icon icon-brightness-contrast">
  130. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  131. </svg> Thème</legend>
  132. <label>
  133. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  134. </label>
  135. <label>
  136. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  137. </label>
  138. <label>
  139. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  140. </label>
  141. </fieldset>
  142. </form>
  143. </template>
  144. </footer>
  145. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  146. <script>
  147. function loadThemeForm(templateName) {
  148. const themeSelectorTemplate = document.querySelector(templateName)
  149. const form = themeSelectorTemplate.content.firstElementChild
  150. themeSelectorTemplate.replaceWith(form)
  151. form.addEventListener('change', (e) => {
  152. const chosenColorScheme = e.target.value
  153. localStorage.setItem('theme', chosenColorScheme)
  154. toggleTheme(chosenColorScheme)
  155. })
  156. const selectedTheme = localStorage.getItem('theme')
  157. if (selectedTheme && selectedTheme !== 'undefined') {
  158. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  159. }
  160. }
  161. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  162. window.addEventListener('load', () => {
  163. let hasDarkRules = false
  164. for (const styleSheet of Array.from(document.styleSheets)) {
  165. let mediaRules = []
  166. for (const cssRule of styleSheet.cssRules) {
  167. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  168. continue
  169. }
  170. // WARNING: Safari does not have/supports `conditionText`.
  171. if (cssRule.conditionText) {
  172. if (cssRule.conditionText !== prefersColorSchemeDark) {
  173. continue
  174. }
  175. } else {
  176. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  177. continue
  178. }
  179. }
  180. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  181. }
  182. // WARNING: do not try to insert a Rule to a styleSheet you are
  183. // currently iterating on, otherwise the browser will be stuck
  184. // in a infinite loop…
  185. for (const mediaRule of mediaRules) {
  186. styleSheet.insertRule(mediaRule.cssText)
  187. hasDarkRules = true
  188. }
  189. }
  190. if (hasDarkRules) {
  191. loadThemeForm('#theme-selector')
  192. }
  193. })
  194. </script>
  195. </body>
  196. </html>