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 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>Bibliothèque — David Larlet</title>
  13. <meta name="description" content="I know there’s lots of advice out there about considering your audience when you write, but when it comes to my personal site, I’d find that crippling. It would be one more admonishment from the inner critic whispering “no one’s interested in that”, “you have nothing new to add to this topic”, and “you’re not qualified to write about this.” If I’m writing for myself, then it’s easier to have fewer inhibitions. By treating everything as a scrappy note-to-self, I can avoid agonising about quality control …although I still spend far too long trying to come up with titles for posts.">
  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>Bibliothèque</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2021/02/12/" title="Publication précédente : Beauté">← 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/02/15/" title="Publication suivante : Comptabilité">Suivant →</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <blockquote lang="en">
  68. <p>I know there’s lots of advice out there about considering your audience when you write, but when it comes to my personal site, I’d find that crippling. It would be one more admonishment from the inner critic whispering “no one’s interested in that”, “you have nothing new to add to this topic”, and “you’re not qualified to write about this.” If I’m writing for myself, then it’s easier to have fewer inhibitions. By treating everything as a scrappy note-to-self, I can avoid agonising about quality control …although I still spend far too long trying to come up with titles for posts.</p>
  69. <p>[…]</p>
  70. <p>If someone else gets some value from a quick blog post that I dash off here, that’s always a pleasant surprise. It’s a bonus. But it’s not my reason for writing. <mark>My website is primarily a tool and a library for myself.</mark> It just happens to also be public.</p>
  71. <p><cite><em><a href="https://adactio.com/journal/17821">Associative trails</a></em> (<a href="/david/cache/2021/27f60626eb789433d6e2619663bb79f0/">cache</a>)</cite></p>
  72. </blockquote>
  73. <p>J’aime cette notion de bibliothèque d’idées personnelle <em>et</em> publique. Aucun service à ma connaissance ne permet cela avec la garantie de conserver les données et de les indexer sur plusieurs décennies. Privilège de développeur que celui d’<em>être en capacité</em> de le faire grâce aux compétences permettant de transformer — et donc conserver — des données au cours du temps.</p>
  74. <p>Si vous devez un jour faire une recherche sur ce qui a été écrit ici, vous pouvez télécharger <a href="https://git.larlet.fr/davidbgk/larlet-fr-david">l’archive du dépôt</a>, la charger dans n’importe quel éditeur de texte un peu compétent (comme <a href="https://www.sublimetext.com/">SublimeText</a>) et une recherche dans tous les fichiers devrait vous permettre de fouiller. C’est ce que j’utilise personnellement lorsque ma mémoire me fait défaut ou que je veux faire un lien interne.</p>
  75. <blockquote lang="en">
  76. <p>And I’m also reminded of how writers I love and respect maintain their own reservoirs of knowledge, complete with migratory paths down from the mountains.</p>
  77. <p>[…]</p>
  78. <p>And it’s interesting, right, this accretive note-taking and the process of taking core samples through the deep time of your own ideas. I’ve built something similar, not as consistently, but for about two decades too, and <mark>I keep all my notes in plain text</mark>, and all in the same searchable database.</p>
  79. <p><cite><em><a href="http://interconnected.org/home/2021/02/10/reservoirs">Memexes, mountain lakes, and the serendipity of old ideas</a></em> (<a href="/david/cache/2021/9b2e831c217bc1179c0f74c4fc363c11/">cache</a>)</cite></p>
  80. </blockquote>
  81. <nav>
  82. <p>
  83. <a href="/david/2021/accessibilite/"
  84. title="Liste de tous les articles associés à cette étiquette"
  85. >#accessibilité</a>
  86. <a href="/david/2021/publication/"
  87. title="Liste de tous les articles associés à cette étiquette"
  88. >#publication</a>
  89. <a href="/david/2021/recherche/"
  90. title="Liste de tous les articles associés à cette étiquette"
  91. >#recherche</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/02/12/" title="Publication précédente : Beauté">← 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/02/15/" title="Publication suivante : Comptabilité">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>