A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  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>Network effect (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://bastianallgeier.com/notes/network-effect">
  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>Network effect</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://bastianallgeier.com/notes/network-effect" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>Sometimes thoughts are formed by many tiny little sparks.</p>
  74. <p>Yesterday, I saw <a href="https://mastodon.macstories.net/@viticci/109537318987385011">Frederico Viticci’s post</a> about how he subscribed to a Pixelfed profile in Mastodon. There’s a form of excitement in his post that seems to resonate with a lot of people who liked or boosted it.</p>
  75. <blockquote>
  76. <p>Here's one of the many beautiful things about Mastodon and the Fediverse: I saw that @johnvoorhees opened a Pixelfed profile. That service is powered by federation too. So here's what I did:</p>
  77. <p>Now John's photo feed is another account, from a completely different service, that I follow on my Mastodon. I love this.</p>
  78. </blockquote>
  79. <p>Just imagine you could subscribe to an Instagram profile on Twitter.</p>
  80. <p>A couple of days ago, we announced on our various social media channels for <a href="https://getkirby.com">Kirby</a> that <a href="https://twitter.com/getkirby/status/1602268429095944192">we are leaving Twitter</a>. One of our users on <a href="https://discord.com/channels/525634039965679616/1052154430759391263/1052559108072546315">Discord</a> wrote:</p>
  81. <blockquote>
  82. <p>As much as Kirby may think Mastodon is the solution to the Twitter fiasco, I feel the platform has it's own issues and it's something I don't wish to participate in.</p>
  83. </blockquote>
  84. <p>Fair enough. But I thought this was interesting. I’ve seen this notion about Mastodon a lot recently. People think of it as a platform. A direct Twitter competitor. Just another social media thing that will have its own problems and will eventually follow the same path of all the other big social networks.</p>
  85. <p>There’s a lot of wisdom in being careful after all we’ve seen happening to Twitter in the past weeks. There’s even more than enough reason to be cynical about any future form of social media. Mastodon is being praised a lot right now and it will most definitely not be a magic healing potion for all our social problems.</p>
  86. <p>But Mastodon is not a platform. Mastodon is just a tiny part of a concept many have been dreaming about and working on for years. Social media started on the wrong foot. The idea for the read/write web has always been different. Our digital identities weren’t supposed to end up in something like Twitter or Facebook or Instagram.</p>
  87. <p>Decentralisation, Federation, The Indie Web: There were many groups silently working on solving the broken architecture of our digital social networks and communication channels – long, long before the "web 3" dudes tried to reframe it as their genius new idea.</p>
  88. <p>I’ve been a part of this for many years until I gave up hope. How would you compete against the VC money, the technical and economical benefits of centralised platforms? It was a fight between David and Gloiath. But now Mastodon could be the stone.</p>
  89. <p>The timing seems right. A lot of us have been burnt by social media, even before Musk. But he’s now directing his boring flame thrower at it. He’s not the only key though. The web 3 bubble mostly burst as well. There’s no new promised land to be found in the blockchain. The metaverse is obviously a bad joke. The notion of genius billionaires, who will move humanity forward with their philantrophic projects breaks even for the most optimistic fans.</p>
  90. <p>At the same time, we need such global social structures more than ever.</p>
  91. <p>We need safe digital spaces for minorities, for activists, for journalists, for scientists – for those who truly move us forward.</p>
  92. <p>Twitter seemed to be such a place for a while. But it was never built for that. A privately owned space can never be a public town hall. It is good that we all have to brutally understand this right now.</p>
  93. <p>The Fediverse has a built-in promise. Nobody can own it. You can be a part of it. That has always been the revolutionary concept of the internet and it's applied to social media here.</p>
  94. <p>Mastodon is a door to the Fediverse. Many doors are currently being opened.</p>
  95. <p>There’s now a true chance that we can own our digital identities and interact with them in the open for the first time. This could be revolutionary.</p>
  96. <p>The network effect has always been the biggest obstacle for this revolution and now we get a glimpse of it. The more people join the Fediverse, the more useful it will become.</p>
  97. <p>This can already be seen in the last weeks since the Twitter exodus started.</p>
  98. <p>Folks work on <a href="https://gotosocial.org/">smaller, simpler alternatives to Mastodon instances</a>, on <a href="https://tapbots.social/@ivory">new clients</a>, on new tools and services. New servers sprout like mushrooms. The space is currently buzzing with excitement. Those who see the potential of it invest their passion and their time.</p>
  99. <p>Mark Jardine wrote an <a href="https://tapbots.social/@mark/109524033562967560">emotional thread</a> about what the changes at Twitter meant for his work on Tweetbot and his family. They are now pivoting to create a Mastodon client and this comment stood out particularly.</p>
  100. <blockquote>
  101. <p>Building an app for an open and decentralized social platform felt so refreshing. Inspirational! I haven't been so excited designing something in a long time. With Tweetbot, we were always fighting with the API limitations while knowing in the back of our minds that someday the API could be taken away. I didn't realize it then, but that killed a lot of our excitement and enthusiasm. With <a href="https://tapbots.social/@ivory">@ivory</a>, we are just ecstatic every single day.</p>
  102. </blockquote>
  103. <p>The network effect changes everything. It creates substance and opportunities.</p>
  104. <p>Those opportunities of course come with risks. We will see spam and bots, attacks and blatant attempts to exploit this space. We will see the same shit that we’ve seen so many times before. There will be very dark parts of the Fediverse. There will be issues we cannot even imagine yet.</p>
  105. <p>But there’s one major difference to all the problem’s we've witnessed with social media so far. It will stay an open space that we can co-design. Even though Eugen Rochko now seems to be a super nice guy, he has all the freedom to abandon Mastodon, make some bad decisions or to do a hard right turn and follow Elon. It doesn’t matter. Always remember that Mastodon is just one door. You no longer like this door? Open another one. Mastodon is not THE platform.</p>
  106. <p>The Fediverse will grow and diversify. It’s already visible in the last weeks. Popular servers have been overloaded, new servers joined. A lot of people got so fascinated by the concept that they started their own private servers, which is fantastic. Hell, even simple websites can join. You can decide to be an active part or a passive part. It really doesn’t matter.</p>
  107. <p>There will be beautiful islands and terrible swamps in the Fediverse. Small peaceful villages and crowed, ugly cities with a Starbucks at every corner.</p>
  108. <p>I said it in my post that inspired this article: No traditional social media platform will be able to compete with this anymore once the network effects kick in here. And it’s looking very good at the moment.</p>
  109. </article>
  110. <hr>
  111. <footer>
  112. <p>
  113. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  114. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  115. </svg> Accueil</a> •
  116. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  117. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  118. </svg> Suivre</a> •
  119. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  120. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  121. </svg> Pro</a> •
  122. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  123. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  124. </svg> Email</a> •
  125. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  127. </svg> Légal</abbr>
  128. </p>
  129. <template id="theme-selector">
  130. <form>
  131. <fieldset>
  132. <legend><svg class="icon icon-brightness-contrast">
  133. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  134. </svg> Thème</legend>
  135. <label>
  136. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  137. </label>
  138. <label>
  139. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  140. </label>
  141. <label>
  142. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  143. </label>
  144. </fieldset>
  145. </form>
  146. </template>
  147. </footer>
  148. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  149. <script>
  150. function loadThemeForm(templateName) {
  151. const themeSelectorTemplate = document.querySelector(templateName)
  152. const form = themeSelectorTemplate.content.firstElementChild
  153. themeSelectorTemplate.replaceWith(form)
  154. form.addEventListener('change', (e) => {
  155. const chosenColorScheme = e.target.value
  156. localStorage.setItem('theme', chosenColorScheme)
  157. toggleTheme(chosenColorScheme)
  158. })
  159. const selectedTheme = localStorage.getItem('theme')
  160. if (selectedTheme && selectedTheme !== 'undefined') {
  161. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  162. }
  163. }
  164. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  165. window.addEventListener('load', () => {
  166. let hasDarkRules = false
  167. for (const styleSheet of Array.from(document.styleSheets)) {
  168. let mediaRules = []
  169. for (const cssRule of styleSheet.cssRules) {
  170. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  171. continue
  172. }
  173. // WARNING: Safari does not have/supports `conditionText`.
  174. if (cssRule.conditionText) {
  175. if (cssRule.conditionText !== prefersColorSchemeDark) {
  176. continue
  177. }
  178. } else {
  179. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  180. continue
  181. }
  182. }
  183. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  184. }
  185. // WARNING: do not try to insert a Rule to a styleSheet you are
  186. // currently iterating on, otherwise the browser will be stuck
  187. // in a infinite loop…
  188. for (const mediaRule of mediaRules) {
  189. styleSheet.insertRule(mediaRule.cssText)
  190. hasDarkRules = true
  191. }
  192. }
  193. if (hasDarkRules) {
  194. loadThemeForm('#theme-selector')
  195. }
  196. })
  197. </script>
  198. </body>
  199. </html>