A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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>We’ve been waiting 20 years for this (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://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/">
  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>We’ve been waiting 20 years for this</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://thehistoryoftheweb.com/weve-been-waiting-20-years-for-this/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-02-06
  72. </p>
  73. </nav>
  74. <hr>
  75. <div class="h4 deck"><p>The indie web may be back. But if is, it is likely in a way we least expect.</p></div>
  76. <hr class="deck__rule"><p>In 2002, <em>Wired</em> published an article from blogger and political commentator Andrew Sullivan titled <em>The Blogging Revolution</em>. In his post, Sullivan argues that blogging is a fully realized alternative to traditional publications that shifts the “means of production” into the hands of individuals. He described blogging as a deeply personal and diverse collection of perspectives that, collectively, create something that borders on a revolution.</p>
  77. <blockquote class="wp-block-quote"><p>Poised between media, blogs can be as nuanced and well-sourced as traditional journalism, but they have the immediacy of talk radio. Amid it all, this much is clear: The phenomenon is real. Blogging is changing the media world and could, I think, foment a revolution in how journalism functions in our culture.</p></blockquote>
  78. <p>Sullivan’s prediction proved mostly accurate. Blogging spread everywhere and challenged traditional journalism norms. It gave rise to new voices, revolutionized and added a new style to online writing, and changed the way information moves through the world.</p>
  79. <p>But blogging was also eventually consumed by the channels that it was set up to challenge. Influential bloggers took jobs at mainstream media outlets, sparking a shift towards commercialization for a blogosphere increasingly influenced and beholden to ad revenue. Meanwhile, social media’s walled garden moved in on blogging’s territory, halting its ascendancy in the process.</p>
  80. <h2 class="wp-block-heading">The 20 Year Cycle</h2>
  81. <p><a href="https://theamag.com/6494/culture/will-personal-style-put-an-end-to-the-20-year-trend-cycle%EF%BF%BC/">With roots in the world of fashion</a>, there exists a cyclical principle suggesting that every two decades, previously popular trends “every 20 years or so the trends that were once popular will begin to be on the forefront again.” What’s old is new again. However, these recurring trends aren’t just rip-offs. They are remixed and reinterpreted through the lens of a new generation.</p>
  82. <p>We are, perhaps, in a 20 year resurgence for the indie web and blogging.</p>
  83. <h2 class="wp-block-heading">Blogging Revolution Redux</h2>
  84. <p>Anil Dash, no stranger to the art and mechanics of blogging himself, certainly thinks so. He recently <a href="https://www.rollingstone.com/culture/culture-commentary/internet-future-about-to-get-weird-1234938403/">penned an article entitled <em>The Internet is about to Get Weird Again</em></a>. Half predication, half call to action, Dash envisions a rejuvenated future for the web-one that is distinctly personal, multifaceted, and crucially, very, very weird.</p>
  85. <blockquote class="wp-block-quote"><p>There’s not going to be some new killer app that displaces Google or Facebook or Twitter with a love-powered alternative. But that’s because there shouldn’t be. There should be lots of different, human-scale alternative experiences on the internet that offer up home-cooked, locally-grown, ethically-sourced, code-to-table alternatives to the factory-farmed junk food of the internet. And they should be weird.</p></blockquote>
  86. <p>These are the kinds of predictions that have been made before, and it’s hard not to get at least a little caught up in Dash’s particular brand of enthusiasm. There is a very good chance he is right, though maybe not exactly how he imagines it. These types of predictions have been made before, both of the web’s coming boom and its supposedly inevitable end. But what these predictions get wrong is that the results are often a reinterpretation rather than a repeat.</p>
  87. <p><a href="https://www.garbageday.email/p/an-hour-of-ai-comedy-that-sucks">Writing in his blog, Ryan Broderick tempers expectations</a>. Or, at the very least, filters them through a more nuanced interpretation of the 20 year trend cycle.</p>
  88. <blockquote class="wp-block-quote"><p>I think the internet is cyclical and things do come back around again, but they tend not to really ever be exactly the same. Much of the 2000s internet was defined by connection speeds. So maybe another way to think about the return of Weird Internet is that the web of the 2020s is what the web of the 2000s would have <em>been</em> like if we all had 5G.</p></blockquote>
  89. <h2 class="wp-block-heading">The Appeal of Blogging: A Personal Reflection</h2>
  90. <p>Nevertheless, blogging has a certain appeal. <a href="https://www.tbray.org/ongoing/When/201x/2017/05/03/Blogging-in-2017">As Tim Bray wrote some five years ago</a>, already well into his own blog’s archives, he captures the essence of experiencing blogs rather well:</p>
  91. <blockquote class="wp-block-quote"><p>On blogs, I can read most of the long-form writing that’s worth reading about the art and craft of programming computers. Or I can follow most of the economists’ debates that are worth having. Or I can check out a new photographer every day and see new a way of seeing the world.</p></blockquote>
  92. <p>Blogging isn’t one thing and that’s kind of the point. It exists fractured by intention and it can be many things to many people. And now, 20 years after the last blogging revolution, something like a fractured digital presence is once again appealing</p>
  93. <h3 class="wp-block-heading">Personal over Popular</h3>
  94. <p>Especially when the aim isn’t acquiring followers, but to achieve something more intimate. <a href="https://keningzhu.com/journal/build-a-world-not-an-audience">Kening Zhu recently reflected</a> on how social media has led people into building an audience at massive scales, instead of cultivating a representation that truly reflects their identity.</p>
  95. <blockquote class="wp-block-quote"><p>I think, in this race to “build an audience,” somewhere in the process, something is missing, left behind — perhaps, a sense of humanity, or individual complexity, or truth, or intimacy.</p><p>I don’t want to feel like I’m just an email address, an IP address, or a potential “lead.” I want to feel fully seen. human.</p></blockquote>
  96. <p>This same sentiment is echoed in a deeply intimate rumination on the nature of blogging, <a href="https://www.henrikkarlsson.xyz/p/search-query"><em>A blog post is a very long and complex search query to find fascinating people and make them route interesting stuff to your inbox</em>, Henrik Karlsson</a> tracks a very different course for how information spreads. If we put words and ideas out into the web, it will distriute <em>simply because it is there</em>.</p>
  97. <blockquote class="wp-block-quote"><p>The pleasant parts of the internet seemed to be curated by human beings, not algorithms. For my writing to find its way in this netherworld, I needed to have a rough sense of how information flowed down there. The pattern was this: words flowed from the periphery to the centers. This was a surprisingly rapid stream. Then the words cascaded from the center down in a broader but slower stream to the periphery again.</p></blockquote>
  98. <p>Or put more simply: The social structure of the internet is shaped far more by humans than it is by algorithms. If we were to draw it on a map, it would look like a river, branching out in every direction.</p>
  99. <h2 class="wp-block-heading">A New Age of Blogging</h2>
  100. <p>How you choose to embark on that river is entirely up to you. But in the past year, and now more than ever, there are people that are embarking on a path of discovery once again.</p>
  101. <p>Maybe it’s plain old RSS (<a rel="noreferrer noopener" href="https://chriscoyier.net/2024/01/22/where-have-all-the-websites-gone/" target="_blank">which Chris Coyier will tell you, totally works</a>).</p>
  102. <p>Maybe it’s building a digital garden, which has gained traction all over the web, but perhaps no where more precisely defined <a rel="noreferrer noopener" href="https://maggieappleton.com/garden" target="_blank">than on Maggie Appleton’s site</a>.</p>
  103. <p>Maybe you could build a world, like Zhu recommends.</p>
  104. <p>But the blogging of today won’t look like the blogging of 2002. There are too many things that have changed. The web is bigger, It is more divisive and more complicated and the need for moderated discussion is great. As the blogging revolution is reflected through this new cycle, it will look like something different.</p>
  105. <p>And maybe what’s missing now is simply connection. <a href="https://www.theguardian.com/commentisfree/2023/dec/26/blogging-freedom-outdated-format">Simon Renyolds</a>:</p>
  106. <blockquote class="wp-block-quote"><p>Today, there are still plenty of active music blogs I enjoy reading. But what’s changed – what’s gone – is inter-blog communication. The argumentative back and forth, the pass-the-baton discussions that rippled across the scene, the spats and the feuds – these are things of the past</p></blockquote>
  107. </article>
  108. <hr>
  109. <footer>
  110. <p>
  111. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  113. </svg> Accueil</a> •
  114. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  115. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  116. </svg> Suivre</a> •
  117. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  118. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  119. </svg> Pro</a> •
  120. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  121. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  122. </svg> Email</a> •
  123. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  124. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  125. </svg> Légal</abbr>
  126. </p>
  127. <template id="theme-selector">
  128. <form>
  129. <fieldset>
  130. <legend><svg class="icon icon-brightness-contrast">
  131. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  132. </svg> Thème</legend>
  133. <label>
  134. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  135. </label>
  136. <label>
  137. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  138. </label>
  139. <label>
  140. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  141. </label>
  142. </fieldset>
  143. </form>
  144. </template>
  145. </footer>
  146. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  147. <script>
  148. function loadThemeForm(templateName) {
  149. const themeSelectorTemplate = document.querySelector(templateName)
  150. const form = themeSelectorTemplate.content.firstElementChild
  151. themeSelectorTemplate.replaceWith(form)
  152. form.addEventListener('change', (e) => {
  153. const chosenColorScheme = e.target.value
  154. localStorage.setItem('theme', chosenColorScheme)
  155. toggleTheme(chosenColorScheme)
  156. })
  157. const selectedTheme = localStorage.getItem('theme')
  158. if (selectedTheme && selectedTheme !== 'undefined') {
  159. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  160. }
  161. }
  162. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  163. window.addEventListener('load', () => {
  164. let hasDarkRules = false
  165. for (const styleSheet of Array.from(document.styleSheets)) {
  166. let mediaRules = []
  167. for (const cssRule of styleSheet.cssRules) {
  168. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  169. continue
  170. }
  171. // WARNING: Safari does not have/supports `conditionText`.
  172. if (cssRule.conditionText) {
  173. if (cssRule.conditionText !== prefersColorSchemeDark) {
  174. continue
  175. }
  176. } else {
  177. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  178. continue
  179. }
  180. }
  181. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  182. }
  183. // WARNING: do not try to insert a Rule to a styleSheet you are
  184. // currently iterating on, otherwise the browser will be stuck
  185. // in a infinite loop…
  186. for (const mediaRule of mediaRules) {
  187. styleSheet.insertRule(mediaRule.cssText)
  188. hasDarkRules = true
  189. }
  190. }
  191. if (hasDarkRules) {
  192. loadThemeForm('#theme-selector')
  193. }
  194. })
  195. </script>
  196. </body>
  197. </html>