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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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>Memexes, mountain lakes, and the serendipity of old ideas (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. <!-- 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. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="http://interconnected.org/home/2021/02/10/reservoirs">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Memexes, mountain lakes, and the serendipity of old ideas</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="http://interconnected.org/home/2021/02/10/reservoirs" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p class="measure-wide f6 f5-l lh-copy black-80">I’ve noticed that smart people keep notes, and in particular <em>use</em> their notes in a certain way, and it made me think of something I read recently about viruses.</p>
  71. <p class="measure-wide f6 f5-l lh-copy black-80">Where do new influenza outbreaks come from? From <em>Viruses, Plagues, and History</em> (<a href="/home/2020/12/28/books">as previously discussed</a>), one possibility is that <q>newly emerging viruses have actually remained hidden and unchanged somewhere but suddenly come forth to cause an epidemic.</q> There was an H1N1 outbreak in 1977 that was genetically identical to one that was causing epidemics in the 1950s. Where had it been?</p>
  72. <p class="measure-wide f6 f5-l lh-copy black-80">Here’s one idea about bird flu specifically:</p>
  73. <blockquote cite="https://uk.bookshop.org/books/viruses-plagues-and-history-past-present-and-future-9780190056780/9780190056780" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Michael B A Oldstone" data-title="Viruses, Plagues, and History">
  74. <p class="measure-wide f6 f5-l lh-copy black-80">[Zhang and colleagues] reported preservation of influenza A viral genes in ice and water from high altitude lakes that are frequently visited by migratory birds. Could influenza virus be preserved in lake ice that melts during spring warming as a source of infecting migratory birds?</p>
  75. </blockquote>
  76. <p class="measure-wide f6 f5-l lh-copy black-80">I am super taken by this concept of reservoirs, in this case frozen mountain lakes that are libraries of ancient viruses, in stasis, waiting for their time to come again – ready to be sipped by a briefly resting bird, perhaps after a decade, more!, and then down from the mountains into a city, and from there the world.</p>
  77. <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
  78. <p class="measure-wide f6 f5-l lh-copy black-80">I’m reminded of the European Renaissance, the beginning of the end of the “Dark Ages” that was catalysed (so the story goes) by the <a href="https://en.wikipedia.org/wiki/Transmission_of_the_Greek_Classics">transmission of the Greek Classics</a> <em>back</em> into Europe from Arab culture, where they’d been endemic for hundreds of years.</p>
  79. <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
  80. <p class="measure-wide f6 f5-l lh-copy black-80">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>
  81. <p class="measure-wide f6 f5-l lh-copy black-80"><strong>Cory Doctorow’s</strong> commentary on tech and society weaves the present day with historical perspective, and any public thinker would be proud to put out one of these pieces a week – but Doctorow puts out between two and four <em>every day</em> on his blog <a href="https://pluralistic.net">Pluralistic</a> and <a href="https://twitter.com/doctorow">on Twitter</a>, in addition to being a prolific author. He detailed his process recently: <a href="https://pluralistic.net/2021/01/13/two-decades/#hfbd">20 years a blogger.</a>.</p>
  82. <blockquote cite="https://pluralistic.net/2021/01/13/two-decades/" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Cory Doctorow" data-title="Pluralistic: 13 Jan 2021">
  83. <p class="measure-wide f6 f5-l lh-copy black-80">My composition is greatly aided both 20 years’ worth of mnemonic slurry of semi-remembered posts and the ability to search memex.craphound.com (the site where I’ve mirrored all my Boing Boing posts) easily.</p>
  84. <p class="measure-wide f6 f5-l lh-copy black-80">A huge, searchable database of decades of thoughts really simplifies the process of synthesis.</p>
  85. </blockquote>
  86. <p class="measure-wide f6 f5-l lh-copy black-80">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 I keep all my notes in plain text, and all in the same searchable database. I develop nascent ideas in part by typing in keywords, spelunking my own <a href="https://en.wikipedia.org/wiki/Memex">memex</a> for things I’ve previously spotted, connections I’ve made, turns of phrase… most of which I had forgotten, but there they are. And old ideas come back and get recombined and become fresh again. That database of notes is my greatest asset. It’s how I write here, and it’s also how I pretend to be clever when I’m working.</p>
  87. <p class="measure-wide f6 f5-l lh-copy black-80"><em>(If I were giving a single piece of advice to any creative starting out, it would be to start noting down everything that grabs your attention, and keep all your notes in one searchable place, as data that you can carry between whatever applications are faddy at the time because two decades is longer than almost any app is maintained, and grow that corpus over time. Don’t presumptively edit, don’t put time into organising, just accrete, and when you make connections, layer them in too, until eventually the whole thing composts down and starts outgassing brand new thoughts of its own.)</em></p>
  88. <p class="measure-wide f6 f5-l lh-copy black-80"><strong><a href="https://www.robinsloan.com">Robin Sloan</a></strong> - author, media inventor (my favourite Sloan incarnation), and <a href="https://fat.gold">olive oil/zine magnate</a> - also recently detailed his note-taking process: <a href="https://every.to/superorganizers/tasting-notes-with-robin-sloan-25629085">Tasting Notes with Robin Sloan</a>. He is serious about capturing everything, and also about using search and juxtaposition as part of his process: <q>For example, the keyword ‘empire’ would have brought me to both the entry about the man running an empire from his phone, and that one about the cymbal company founded during the Ottoman Empire.</q></p>
  89. <blockquote cite="https://every.to/superorganizers/tasting-notes-with-robin-sloan-25629085" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Robin Sloan" data-title="Tasting Notes with Robin Sloan (Superorganizers)">
  90. <p class="measure-wide f6 f5-l lh-copy black-80">I’ve created a system so random notes appear every time I open a browser tab.</p>
  91. <p class="measure-wide f6 f5-l lh-copy black-80">I like the idea of being presented and re-presented with my notations of things that were interesting to me at some point, but that in many cases I had forgotten about. The effect of surprise creates interesting and productive new connections in my brain.</p>
  92. <p class="measure-wide f6 f5-l lh-copy black-80">In order to do this, I’ve put some of my programming skills to work to engineer a kind of Rube Goldberg-y system: as I mentioned previously, I export my notes from nvALT into Simplenote, and just basically use that as a back-end database. That export then gets loaded into a server that I’ve set up to feed me a random note every time I open a blank browser tab.</p>
  93. </blockquote>
  94. <p class="measure-wide f6 f5-l lh-copy black-80">The empty browser tab as a crystal clear mountain lake!</p>
  95. <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white">
  96. <p class="measure-wide f6 f5-l lh-copy black-80">When I wrote my <a href="/home/2020/09/10/streak">15 personal rules for blogging</a> I realise now that I had a blind spot about how I keep notes and how I browse them. Doctorow and Sloan’s observations made me see how much I rely on my notes too… and also realise how I’ve neglected building my own deliberate migratory corridors from the past to the present.</p>
  97. <p class="measure-wide f6 f5-l lh-copy black-80">So here’s a start. <strong><a href="/home/on-this-day">This blog now has an On This Day page</a></strong>, which lists posts made on this day since 2007 (it goes back a week too). It’s a bit spartan, and I’m not sure yet how to make best use of it…</p>
  98. <p class="measure-wide f6 f5-l lh-copy black-80">…BUT, right now I can see</p>
  99. <p class="measure-wide f6 f5-l lh-copy black-80">And all of those are suddenly new to me again, and spark new thoughts.</p>
  100. <p class="measure-wide f6 f5-l lh-copy black-80">Naturally <a href="/home/on-this-day/feed">there’s an On This Day web feed too</a> so these posts appear in my newsreader each morning. Some personal serendipity to start the day.</p>
  101. </article>
  102. <hr>
  103. <footer>
  104. <p>
  105. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  106. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  107. </svg> Accueil</a> •
  108. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  109. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  110. </svg> Suivre</a> •
  111. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  112. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  113. </svg> Pro</a> •
  114. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  115. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  116. </svg> Email</a> •
  117. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  118. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  119. </svg> Légal</abbr>
  120. </p>
  121. <template id="theme-selector">
  122. <form>
  123. <fieldset>
  124. <legend><svg class="icon icon-brightness-contrast">
  125. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  126. </svg> Thème</legend>
  127. <label>
  128. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  129. </label>
  130. <label>
  131. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  132. </label>
  133. <label>
  134. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  135. </label>
  136. </fieldset>
  137. </form>
  138. </template>
  139. </footer>
  140. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  141. <script>
  142. function loadThemeForm(templateName) {
  143. const themeSelectorTemplate = document.querySelector(templateName)
  144. const form = themeSelectorTemplate.content.firstElementChild
  145. themeSelectorTemplate.replaceWith(form)
  146. form.addEventListener('change', (e) => {
  147. const chosenColorScheme = e.target.value
  148. localStorage.setItem('theme', chosenColorScheme)
  149. toggleTheme(chosenColorScheme)
  150. })
  151. const selectedTheme = localStorage.getItem('theme')
  152. if (selectedTheme && selectedTheme !== 'undefined') {
  153. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  154. }
  155. }
  156. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  157. window.addEventListener('load', () => {
  158. let hasDarkRules = false
  159. for (const styleSheet of Array.from(document.styleSheets)) {
  160. let mediaRules = []
  161. for (const cssRule of styleSheet.cssRules) {
  162. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  163. continue
  164. }
  165. // WARNING: Safari does not have/supports `conditionText`.
  166. if (cssRule.conditionText) {
  167. if (cssRule.conditionText !== prefersColorSchemeDark) {
  168. continue
  169. }
  170. } else {
  171. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  172. continue
  173. }
  174. }
  175. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  176. }
  177. // WARNING: do not try to insert a Rule to a styleSheet you are
  178. // currently iterating on, otherwise the browser will be stuck
  179. // in a infinite loop…
  180. for (const mediaRule of mediaRules) {
  181. styleSheet.insertRule(mediaRule.cssText)
  182. hasDarkRules = true
  183. }
  184. }
  185. if (hasDarkRules) {
  186. loadThemeForm('#theme-selector')
  187. }
  188. })
  189. </script>
  190. </body>
  191. </html>