Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 18KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  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>Mastodon — David Larlet</title>
  13. <meta name="description" content="For those of us who have been using Mastodon for a while (I started my own Mastodon server 4 years ago), this week has been overwhelming. I’ve been thinking of metaphors to try to understand why I’ve found it so upsetting. This is supposed to be what we wanted, right? Yet it feels like something else. Like when you’re sitting in a quiet carriage softly chatting with a couple of friends and then an entire platform of football fans get on at Jolimont Station after their team lost. They don’t usually catch trains and don’t know the protocol. They assume everyone on the train was at the game or at least follows football. They crowd the doors and complain about the seat configuration.">
  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. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  53. <article>
  54. <header>
  55. <h1>Mastodon</h1>
  56. </header>
  57. <nav>
  58. <p class="center">
  59. <a rel="prev" href="/david/2022/10/18/" title="Publication précédente : Esclavage">← Précédent</a> •
  60. <nobr>
  61. <a href="/david/" title="Aller à l’accueil"
  62. ><svg class="icon icon-home">
  63. <use
  64. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  65. ></use>
  66. </svg>
  67. Accueil</a
  68. >
  69. </nobr>
  70. <nobr>
  71. <a href="/david/recherche/" title="Aller à la page de recherche"
  72. ><svg class="icon icon-search">
  73. <use
  74. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
  75. ></use>
  76. </svg>
  77. Recherche</a
  78. >
  79. </nobr>
  80. • <a rel="next" href="/david/2022/11/27/" title="Publication suivante : Neuf">Suivant →</a>
  81. </p>
  82. </nav>
  83. <hr>
  84. <blockquote lang="en">
  85. <p>For those of us who have been using Mastodon for a while (I started my own Mastodon server 4&nbsp;years ago), this week has been overwhelming. I’ve been thinking of metaphors to try to understand why I’ve found it so upsetting. <mark>This is supposed to be what we wanted, right? Yet it feels like something else.</mark> Like when you’re sitting in a quiet carriage softly chatting with a couple of friends and then an entire platform of football fans get on at Jolimont Station after their team lost. They don’t usually catch trains and don’t know the protocol. They assume everyone on the train was at the game or at least follows football. They crowd the doors and complain about the seat&nbsp;configuration.</p>
  86. <p><cite><em><a href="https://www.hughrundle.net/home-invasion/">Home invasion</a></em>&nbsp;(<a href="/david/cache/2022/58f10e6e52b49d69b79d1793482f1cf0/">cache</a>)</cite></p>
  87. </blockquote>
  88. <p>Il est temps de mettre des mots sur le Mastodon qui traine dans le couloir, ces derniers jours sur le réseau ayant été assez spéciaux. Il y a la <a href="https://fr.wikipedia.org/wiki/Loi_de_Metcalfe">loi de Metcalfe</a> qui relie l’utilité d’un réseau au nombre de ses membres. Je crois que je suis sensible à l’inverse de cette loi&nbsp;: un réseau perd de son intérêt lorsqu’il dépasse un certain nombre de membres. En dépit de toutes les fonctionnalités dont j’ai (ab)usé pour me protéger de cela, plus de personnes entraîne plus d’activité entraîne plus d’éparpillement entraîne un trop plein d’émotions. Elle me dit que je suis un <em>snob</em> qui ne se complait que dans son club très privé. Soit.</p>
  89. <p>La contradiction, c’est que je suis heureux d’observer cette nouvelle vague. Même si c’est un <em>tsunami</em> auquel fait suite un accident nucléaire en fait. Comment ne pas se réjouir du fait qu’Elon Musk se casse les dents&#8239;? Comment ne pas apprécier qu’une alternative open-source et décentralisée finisse par percer&#8239;? Comment ne pas être heureux qu’une personne proche/intéressante rejoigne et participe enfin au&nbsp;réseau&#8239;?</p>
  90. <p>Et puis il y a toutes les observations d’ordre sociologique qui sont croustillantes&nbsp;: les reproductions de schémas pyramidaux, les influences diverses pour modeler les communautés, la vérification que les <em>geeks</em> puis les scientifiques, artistes et littéraires attirent (ou pas) la masse, le pouvoir/devoir que procure la modération plus ou moins opaque d’une instance, les attentes des ancien·nes et les croyances des nouveaux·elles (ou l’inverse), etc.</p>
  91. <p>Mais il y a aussi la pression d’une perte d’intimité qui n’était pas tant un entre-soi qu’un espace restreint où l’on pouvait plaisanter sans que cela prenne des proportions vertigineuses, où l’on avait l’impression de connaître toutes les personnes suivies et suiveuses, d’en découvrir certaines à petits pas, j’ai besoin de lenteur dans mes interactions sociales. Du jour au lendemain, le mégaphone a eu besoin de faire son retour car la place du village s’est transformée en une arène à captation d’attention. Et j’ai déjà donné à ce jeu là. Ce n’est pas tant de la nostalgie que de la fuite d’une foule numérique. Lorsque l’échelle change, j’en reviens souvent à&nbsp;l’escabeau.</p>
  92. <p>Et donc, retour à la case départ avec cette réflexion sur des réseaux à échelle humaine qui seraient <em>vraiment</em> conçus pour ne pas dépasser une certaine taille (même si cette fois ça n’est pas passé bien loin). Des technologies/protocoles un peu plus frugales aussi, qui pourraient permettre des interactions entre sites&nbsp;statiques.</p>
  93. <p>Quand on y pense, les blogs et leurs RSS c’est pas si mal en fait hein…&nbsp;#DaccordVieillard</p>
  94. <h2 id="encore-plus-de-pachydermes">Encore plus de pachydermes <a href="#encore-plus-de-pachydermes" title="Ancre vers cette partie">#</a></h2>
  95. <blockquote lang="en">
  96. <p>However, unlike Big Tech, the stated goal of the fediverse is to decentralise things, not centralise them. Yet how likely is it we can achieve the opposite of Big Tech’s goals while adopting its same fundamental&nbsp;design?</p>
  97. <p>When you adopt the design of a thing, you also inherit the success criteria that led to the evolution of that design. If that success criteria does not align with your own goals, you have a problem on your&nbsp;hands.</p>
  98. <p><cite><em><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/">Is the fediverse about to get Fryed? (Or, “Why every toot is also a potential denial of service attack”)</a></em>&nbsp;(<a href="/david/cache/2022/a6257c9517a4e07d4d4ccfa872cbf08b/">cache</a>)</cite></p>
  99. </blockquote>
  100. <blockquote lang="en">
  101. <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&nbsp;fairly.</p>
  102. <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&nbsp;home.</p>
  103. <p><cite><em><a href="https://bastianallgeier.com/notes/fediverse">Fediverse</a></em>&nbsp;(<a href="/david/cache/2022/827b390ef9e20d414ef803611bc4f2bb/">cache</a>)</cite></p>
  104. </blockquote>
  105. <blockquote lang="en">
  106. <p>I have an unproven hypothesis. Suppose that Free Radical had several worker threads trying to contact instance Foo. Foo was running slowly, so those connections eventually timed out after many seconds, and Free Radical added a retry task to the end of the queue. However, while it was waiting for those connections to give up, it was responding to other servers slowly. Somewhere out there, server Bar was trying to deliver messages to Free Radical, and those connections were timing out because Free Radical was stuck waiting for Foo. That made Bar run slowly. Meanwhile, Foo is trying to contact Bar, but can’t because Bar is so loaded up. In other words, lots of servers were running slowly because they were waiting on all their neighbors to start running&nbsp;quickly.</p>
  107. <p><cite><em><a href="https://blog.freeradical.zone/post/surviving-thriving-through-2022-11-05-meltdown/">Surviving and thriving through the 2022-11-05&nbsp;meltdown</a></em>&nbsp;(<a href="/david/cache/2022/5562ca2239cf52842501c3fc675eca3c/">cache</a>)</cite></p>
  108. </blockquote>
  109. <ul>
  110. <li><a href="https://blog.maartenballiauw.be/post/2022/11/05/mastodon-own-donain-without-hosting-server.html">Mastodon on your own domain without hosting a server</a>&nbsp;(<a href="/david/cache/2022/2b4baf23121e6a8cfb4d29008e478770/">cache</a>)</li>
  111. <li><a href="https://github.com/almet/.well-known">.well-known + config nginx par&nbsp;Alexis</a></li>
  112. <li><a href="https://til.simonwillison.net/mastodon/custom-domain-mastodon">Getting Mastodon running on a custom domain</a>&nbsp;(<a href="/david/cache/2022/d8a33ccb98091090b6a13b532773137a/">cache</a>)</li>
  113. <li><a href="https://jacobian.org/til/my-mastodon-instance/">Setting up a personal Fediverse ID / Mastodon instance</a>&nbsp;(<a href="/david/cache/2022/19bb6f887f452188b738599777d7014d/">cache</a>)</li>
  114. <li><a href="https://aeracode.org/2022/11/01/fediverse-custom-domains/">The Fediverse, And Custom Domains</a>&nbsp;(<a href="/david/cache/2022/9a78ae9b6814326d9c3df1425006f8f4/">cache</a>)</li>
  115. <li><a href="https://blog.djnavarro.net/posts/2022-11-03_what-i-know-about-mastodon/">Everything I know about Mastodon</a>&nbsp;(<a href="/david/cache/2022/4bdd8a682b8c7d31f518b6c6730179d2/">cache</a>)</li>
  116. <li><a href="https://docs.google.com/document/d/1D9gfeKg_-hlsU66R-dLEvUeyMsqEfyIx2pnfUeX0t_E/edit">Nikodemus’ Guide to Mastodon</a>&nbsp;(<a href="/david/cache/2022/3b9259e5e41e5e73fc3d5574fd472674/">cache</a>)</li>
  117. <li><a href="https://pmazagol.gitpages.huma-num.fr/migration-mastodon/">Procédure pour déplacer son compte d’une instance Mastodon à une autre</a>&nbsp;(<a href="/david/cache/2022/cb9be8bdfda6c6e03820a5ebae0cb470/">cache</a>)</li>
  118. <li><a href="https://framablog.org/2022/11/12/mastodon-fin-de-premiere-partie/">Mastodon, fin de (première) partie&#8239;?</a>&nbsp;(<a href="/david/cache/2022/3f045054587e15191052008ca455dc3c/">cache</a>) (Traduction du billet&nbsp;d’introduction)</li>
  119. </ul>
  120. <nav>
  121. <p class="center">
  122. <a rel="prev" href="/david/2022/10/18/" title="Publication précédente : Esclavage">← Précédent</a> •
  123. <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
  124. • <a rel="next" href="/david/2022/11/27/" title="Publication suivante : Neuf">Suivant →</a>
  125. </p>
  126. </nav>
  127. </article>
  128. <hr>
  129. <footer>
  130. <p>
  131. <nobr>
  132. <a href="/david/" title="Aller à l’accueil"
  133. ><svg class="icon icon-home">
  134. <use
  135. xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
  136. ></use>
  137. </svg>
  138. Accueil</a
  139. >
  140. </nobr>
  141. <nobr>
  142. <a href="/david/log/" title="Accès au flux RSS"
  143. ><svg class="icon icon-rss2">
  144. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
  145. </svg>
  146. Suivre</a
  147. >
  148. </nobr>
  149. <nobr>
  150. <a href="http://larlet.com" title="Go to my English profile" data-instant
  151. ><svg class="icon icon-user-tie">
  152. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
  153. </svg>
  154. Pro</a
  155. >
  156. </nobr>
  157. <nobr>
  158. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
  159. ><svg class="icon icon-mail">
  160. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
  161. </svg>
  162. Email</a
  163. >
  164. </nobr>
  165. <nobr>
  166. <abbr
  167. class="nowrap"
  168. title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
  169. ><svg class="icon icon-hammer2">
  170. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
  171. </svg>
  172. Légal</abbr
  173. >
  174. </nobr>
  175. </p>
  176. <template id="theme-selector">
  177. <form>
  178. <fieldset>
  179. <legend><svg class="icon icon-brightness-contrast">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
  181. </svg> Thème</legend>
  182. <label>
  183. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  184. </label>
  185. <label>
  186. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  187. </label>
  188. <label>
  189. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  190. </label>
  191. </fieldset>
  192. </form>
  193. </template>
  194. </footer>
  195. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  196. <script>
  197. function loadThemeForm(templateName) {
  198. const themeSelectorTemplate = document.querySelector(templateName)
  199. const form = themeSelectorTemplate.content.firstElementChild
  200. themeSelectorTemplate.replaceWith(form)
  201. form.addEventListener('change', (e) => {
  202. const chosenColorScheme = e.target.value
  203. localStorage.setItem('theme', chosenColorScheme)
  204. toggleTheme(chosenColorScheme)
  205. })
  206. const selectedTheme = localStorage.getItem('theme')
  207. if (selectedTheme && selectedTheme !== 'undefined') {
  208. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  209. }
  210. }
  211. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  212. window.addEventListener('load', () => {
  213. let hasDarkRules = false
  214. for (const styleSheet of Array.from(document.styleSheets)) {
  215. let mediaRules = []
  216. for (const cssRule of styleSheet.cssRules) {
  217. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  218. continue
  219. }
  220. // WARNING: Safari does not have/supports `conditionText`.
  221. if (cssRule.conditionText) {
  222. if (cssRule.conditionText !== prefersColorSchemeDark) {
  223. continue
  224. }
  225. } else {
  226. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  227. continue
  228. }
  229. }
  230. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  231. }
  232. // WARNING: do not try to insert a Rule to a styleSheet you are
  233. // currently iterating on, otherwise the browser will be stuck
  234. // in a infinite loop…
  235. for (const mediaRule of mediaRules) {
  236. styleSheet.insertRule(mediaRule.cssText)
  237. hasDarkRules = true
  238. }
  239. }
  240. if (hasDarkRules) {
  241. loadThemeForm('#theme-selector')
  242. }
  243. })
  244. </script>
  245. </body>
  246. </html>