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

index.html 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  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>Fediverse (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="https://bastianallgeier.com/notes/fediverse">
  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>Fediverse</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-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://bastianallgeier.com/notes/fediverse" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>I joined Mastodon in 2018. It was one of many days on Twitter that felt like it’s finally enough. I don’t exactly remember why. Twitter has been my social home on the internet since 2008 and it boosted my career in many ways. I made a lot of friends there. Some online friends turned into offline friends, into friends for life. But Twitter changed over the years.</p>
  71. <p>I started to feel anxious whenever I scrolled my timeline. The lovely conversations with friendly human beings vanished. They where replaced by retweets and breaking news and the ever growing search for attention. The world through the lense of Twitter started to look darker and darker every day.</p>
  72. <p>The promise of a new social home with the old friendly vibes seemed exciting. But my friends from Twitter only stayed around for a bit and then returned to Twitter – and so did I. We repeated this process a couple times. Whenever something went terribly wrong on Twitter, a group of refugees gave Mastodon another try, but it didn't work out.</p>
  73. <p>Then recently Musk bought Twitter to push through his crude ideas of free speech.</p>
  74. <p>A lot of us turned up on Mastodon once more and this time it was different. More activity, more conversations, more group effort to really make it work this time.</p>
  75. <p>Oh wow, what a difference it made. Suddenly there was this old Twitter vibe. Real conversations. Real people. Interesting content. A feeling of a warm welcoming group. No algorithm to mess around with our timelines. No troll army to destory every tiny bit of peace. Yes, Mastodon is rough around the edges. Many parts are not intuitive. But this roughness somehow added to the positive experience for me.</p>
  76. <p>This could really work! I was hesitant for days. It seemed to good to be true. Surely soon everyone would be gone again, right? Or if they stayed, the positivity would soon be replaced by the same bleakness that we all got so used to on the bird site.</p>
  77. <p>It’s still early. This wave of refugees has just arrived. We don’t know what the future will bring. But there are a lot of things that are different on Mastodon and it takes a while to understand them.</p>
  78. <p>Mastodon is in many ways similar to email. It's not just one big platform. There are different servers (instances) and you can choose your home. My first email address was a freenet.de address back in the 90s. A horrible cheap German provider. I moved to various email addresses over the years and ended up with my own domain and email address once I started as a professional designer and developer. I think of my current <a href="https://mastodon.social/@bastianallgeier">mastodon.social</a> address in a similar way. I'm still figuring this out. It's very likely not going to be my last place in the fediverse. At some point I want to have my own server, connected to my own domain. @bastian@social.bastianallgier.com or something like that.</p>
  79. <p>But that's the exciting part about it. The architecture below makes it impossible to be owned by just one company. A single server can become huge. mastodon.social is currently the biggest one as far as I know. I think of it like I think about Gmail. It's an easy entry point for Mastodon, just like Gmail is a very easy entry point for email. But you can always move to a different place.</p>
  80. <p>This fundamentally changes the power structures and the future perspective. Some individual cannot simply grab this and turn it into a hobby project for sociopathic billionaires. A company cannot get behind it and start exploting it commercially. The network has many ways to defend itself from such potential attacks.</p>
  81. <p>Sounds pretty good for a new home if you ask me.</p>
  82. <p>But there are actually more built-in mechanisms for a healthy social environment. Spending time on Mastodon makes it obvious that the founder, developers, server admins and users of Mastodon put a lot of time and effort into keeping this place welcoming.</p>
  83. <ul>
  84. <li>No algorithm for your timeline</li>
  85. <li>Content warnings to avoid doom scrolling</li>
  86. <li>an intentional lack of features that could lead to attention boosting</li>
  87. <li>verification through domains or by running your own instance</li>
  88. <li>a general culture to add alternative text to images</li>
  89. <li>human server administrators and not just algorithms that monitor and ban bad actors</li>
  90. <li>the principles of federation that can exclude entire servers if they risk the peace of the network</li>
  91. </ul>
  92. <p>Mastodon is quite obviously built around the idea to not repeat the same mistakes that led to the current state of social media.</p>
  93. <p>But as much as I would just love to leave my Twitter life behind for good, there are things that I'm concerned about. The decentralized architecture of the fediverse comes at a cost. <a href="https://ar.al/2022/11/09/is-the-fediverse-about-to-get-fryed-or-why-every-toot-is-also-a-potential-denial-of-service-attack/">This article by Aral Balkan</a> shows pretty drastically what this means for popular accounts or viral posts.</p>
  94. <p>In an ideal version of the fediverse, the majority of users and organisations would run their own instances. This would make the network very resilient, make verification a no-brainer (see above) and the load would be shared fairly.</p>
  95. <p>Right now, there’s a high risk of burning through the financial means of the team behind a popular instance – as well as burning them out mentally because of the work load. That’s less than ideal as a foundation for a healthy new home.</p>
  96. <p>Looking at Aral's post made me also realize how potentially wasteful this is from an environmental perspective when Mastodon starts to become more popular. It's hard to compare it to a platform like Twitter. Those are just black boxes. We have to "trust" their own sustainability reports if they have any. But it's likely that a centralized platform can operate more efficiently when lots of users interact with each other.</p>
  97. <p>If the utopia of a healthy, democratic social network in 2022 is real, I believe that the Mastodon community needs answers for those aspects as well. I don't think it's unsolvable and I don't even think it's an argument against Mastodon. The transparency of Mastodon just highlights a problem that is normally hidden behind walled gardens.</p>
  98. <p>Mastodon’s federated approach to healthier interactions is a second chance to get social media right. The transparency of Mastodon's architecture is a chance to become aware of the footprint of our digital lives.</p>
  99. <p>When more personal instances lead to a more resilient network, we need more modest instances. Spinning up a VPS seems to be such a no-brainer in today's world of one-click CI workflows, serverless functions, edge computing and scaleable cloud solutions. But who's ever thinking about all the computational power we are simply firing up daily and all the terabytes of data we send around the globe for mundane tasks as if it was nothing.</p>
  100. <p>Mastodon instances are monsters in their current form and it makes sense because they can potentially host tens of thousands of users. But I believe that there needs to be a 1-person or small team alternative. Something that's light and humble.</p>
  101. <p>But it's not just about the resource-hunger of instances. Thinking about our social interactions as potentially wasteful computational tasks: how much of this do we really need?</p>
  102. <p>After 14 years on Twitter, <a href="https://mastodon.social/@bastianallgeier/109308360571103988">I went kind of viral</a> for the first time on Mastodon two days ago. Isn't it ironic? That post is just a fun little piece of Twitter nostalgia. The following conversations were really interesting and it was mind-blowing to see how much positive activity there was on Mastodon. But after reading Aral's post I almost feel bad about it. How much trouble did I cause behind the scenes? How many of those sidekiq jobs had to be created and how many people had to wait for more important notifications to arrive?</p>
  103. <p>In hindsight, I wish there were more mechanisms to avoid certain types of interactions. For instance, I really don't need all those likes. I don't want to cause tons of background jobs just for a vanity stat. This is a rough concept, but it would have been kind of nice to stop the wave of reactions at a certain point without removing the post. It gets really tricky here. What is a meaningful interaction and what could be avoided? There's already the possibility to post something just for your followers, but sometimes this isn't what you want. It's a balance between reaching a bigger audience and interacting with them and yet kind of finding a modest approach to avoid such viral scenarios.</p>
  104. <p>Maybe all of this seems overblown. Discussing sidekiq processes is probably just a plastic straw discussion while millions post videos on TikTok and Youtube every day. (Apropos: there's another popular Mastodon post about why you should not upload videos directly to Mastodon instances)</p>
  105. <p>But I feel like we are reaching a shift in society. We are in a state in which our form of living is obviously no longer working out. You have to invest a lot of energy to ignore the multiple crises we are in. Thus more and more people are looking for solutions. Mastodon could be a potential solution to the social media crisis – at least for some. It could be a home for those who are not just looking away. I've seen lots of scientists, climate activists and journalists move over in the last days. It has the potential to form new connections and move groups forward that have been stuck in Twitter hell for too long. But in my opinion this will also lead to higher expectations about the platform.</p>
  106. <p>Despite growing pains and potential problems, I think this could be one of the most interesting movements on the web in recent years. Let's see where it goes.</p>
  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>