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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  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>Where have all the flowers gone? (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://daverupert.com/2024/01/where-have-all-the-websites-gone/">
  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>Where have all the flowers gone?</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://daverupert.com/2024/01/where-have-all-the-websites-gone/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-01-19
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>A post from Jason Velazquez called “<a href="https://www.fromjason.xyz/p/notebook/where-have-all-the-websites-gone/">Where have all the websites gone?</a>” crossed my socials. It’s a good lament about the dearth of interesting content on the internet and how we’re stuck in the same boring content silos.</p>
  76. <p>The question reminded me of a song by Pete Seeger called “<em>Where have all the flowers gone?</em>” In the song Pete wonders aloud about the flowers now missing from the field…</p>
  77. <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code data-lang="html">[Verse 1]
  78. Where have all the flowers gone?
  79. Long time passing
  80. Where have all the flowers gone?
  81. Long time ago
  82. Where have all the flowers gone?
  83. The girls have picked them, every one
  84. Oh, when will you ever learn?
  85. Oh, when will you ever learn?
  86. </code></pre></div></div>
  87. <p>We find out that the girls have picked all the flowers. All of them. That’s a bit excessive. Why? The second verse explores the young girls’ situation…</p>
  88. <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code data-lang="html">[Verse 2]
  89. Where have all the young girls gone?
  90. Long time passing
  91. Where have all the young girls gone?
  92. Long time ago
  93. Where have all the young girls gone?
  94. They've taken husbands, every one
  95. Oh, when will you ever learn?
  96. Oh, when will you ever learn?
  97. </code></pre></div></div>
  98. <p>The girls got married, good for them! That’s a natural part of growing up. But what of the husbands and how are they connected to the missing flowers? Did they use all the flowers for their weddings? The third verse answers this question.</p>
  99. <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code data-lang="html">[Verse 3]
  100. Where have all the young men gone?
  101. Long time passing
  102. Where have all the young men gone?
  103. Long time ago
  104. Where have all the young men gone?
  105. They're all in uniform
  106. Oh, when will you ever learn?
  107. Oh, when will you ever learn?
  108. </code></pre></div></div>
  109. <p>The young men, dressed in uniform, went off to war. The flowers were, presumably, for their funerals. Pete sure knew how to tell a story.</p>
  110. <p>So where have all the websites gone? Well, the people who make them have all gone to war for the capitalist machine. They grew up and got jobs. A natural part of growing up. Silos came and plucked their voices. Invasive memes and short form content grew in their place. Hustle overtook leisure. Harassment overtook openness. Influence overtook creativity. An economy of interestingness replaced by one of followers, likes, and engagement metrics.</p>
  111. <p>One important thing to note; websites aren’t extinct. In fact, you’re on one now! Uploading your own words is ancient technology but still works.</p>
  112. <p>I loved Jason’s point about the curators and it illuminated something I don’t think I fully understood before. Curators and aggregators are integral to the ecosystem. If we all create, steal, and regurgitate the same content then we only reinforce our own echo chamber. Aggregators bridge subcultures in a world of content bubbles and subreddits. They share curios from the web you may have missed, subverting the FOMO-based dopamine addiction machine using RSS. They find beauty in the mundane and surface wisdom from obscure writings. That is valuable, worth more than gold.</p>
  113. <p><a href="https://robinrendle.com/notes/i-am-a-poem-i-am-not-software/">We are poems, not software</a> and in need of a reforestation of our curators. To paraphrase Mr. Rogers in these dire times, “Look for the aggregators…”</p>
  114. </article>
  115. <hr>
  116. <footer>
  117. <p>
  118. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  120. </svg> Accueil</a> •
  121. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  122. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  123. </svg> Suivre</a> •
  124. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  125. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  126. </svg> Pro</a> •
  127. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  128. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  129. </svg> Email</a> •
  130. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  131. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  132. </svg> Légal</abbr>
  133. </p>
  134. <template id="theme-selector">
  135. <form>
  136. <fieldset>
  137. <legend><svg class="icon icon-brightness-contrast">
  138. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  139. </svg> Thème</legend>
  140. <label>
  141. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  142. </label>
  143. <label>
  144. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  145. </label>
  146. <label>
  147. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  148. </label>
  149. </fieldset>
  150. </form>
  151. </template>
  152. </footer>
  153. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  154. <script>
  155. function loadThemeForm(templateName) {
  156. const themeSelectorTemplate = document.querySelector(templateName)
  157. const form = themeSelectorTemplate.content.firstElementChild
  158. themeSelectorTemplate.replaceWith(form)
  159. form.addEventListener('change', (e) => {
  160. const chosenColorScheme = e.target.value
  161. localStorage.setItem('theme', chosenColorScheme)
  162. toggleTheme(chosenColorScheme)
  163. })
  164. const selectedTheme = localStorage.getItem('theme')
  165. if (selectedTheme && selectedTheme !== 'undefined') {
  166. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  167. }
  168. }
  169. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  170. window.addEventListener('load', () => {
  171. let hasDarkRules = false
  172. for (const styleSheet of Array.from(document.styleSheets)) {
  173. let mediaRules = []
  174. for (const cssRule of styleSheet.cssRules) {
  175. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  176. continue
  177. }
  178. // WARNING: Safari does not have/supports `conditionText`.
  179. if (cssRule.conditionText) {
  180. if (cssRule.conditionText !== prefersColorSchemeDark) {
  181. continue
  182. }
  183. } else {
  184. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  185. continue
  186. }
  187. }
  188. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  189. }
  190. // WARNING: do not try to insert a Rule to a styleSheet you are
  191. // currently iterating on, otherwise the browser will be stuck
  192. // in a infinite loop…
  193. for (const mediaRule of mediaRules) {
  194. styleSheet.insertRule(mediaRule.cssText)
  195. hasDarkRules = true
  196. }
  197. }
  198. if (hasDarkRules) {
  199. loadThemeForm('#theme-selector')
  200. }
  201. })
  202. </script>
  203. </body>
  204. </html>