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 17KB

1 year ago
1 year ago
1 year ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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>A community isn’t a garden, it’s a bar. (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://powazek.com/posts/3571">
  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>A community isn’t a garden, it’s a bar.</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://powazek.com/posts/3571" title="Lien vers le contenu original">Source originale</a>
  70. </p>
  71. </nav>
  72. <hr>
  73. <p>I’ve been writing about social media since it was called virtual community, and in that time, the most common metaphor I’ve used is gardening. It’s a good metaphor, because it demands a delineation between what you want to grow and what you don’t, and it emphasizes nurturance, perhaps the most important quality of a community manager.</p>
  74. <p>But it’s almost 2023 now. The world is different, the online world is <i>very</i> different, and I’m pushing 50. So I think it’s time we all start talking about online gathering places with a more apt metaphor: bars.</p>
  75. <p>(When I say “community” here, I mean a place online where people can talk to each other. Nothing more, nothing less. We can go deep on the nuances of community another time.)</p>
  76. <h4>Loud and Stupid</h4>
  77. <p>The most obvious way an online community is like a bar is that bars serve alcohol, and alcohol makes people loud and stupid. It actually depresses your hearing, so you can’t hear yourself talk as well, so you speak louder. And a room full of people speaking louder means a very boisterous room. And of course, alcohol reduces inhibition, so you say things you might not usually say.</p>
  78. <p>The parallels to online behavior are easy to see. Online, people are much more willing to type things that they’d never say in person. How many times have we found out the hard way that a celebrity really <a href="https://www.distractify.com/entertainment/2018/08/28/12M6VE/celebrity-twitter-meltdowns">cannot handle</a> having a Twitter account? Drunk on the feedback loop, they can be goaded into saying more and more extreme things.</p>
  79. <p>In a virtual space, when everyone is being noisy, you have to be even louder to get noticed. This is what leads to the loudest, most aggressive people gaining the most attention online.</p>
  80. <p>Online or off, you have to speak above the din just to be heard, and that inevitably coarsens the conversation. Which brings us to the people there to protect us from the loud and stupid.</p>
  81. <h4>Bars Have Bartenders</h4>
  82. <p>Bartenders are the original community managers. In addition to knowing how to make drinks, they’re the person who can listen kindly when there’s no one else to talk to. They’re also the person who’ll clock the problem patrons the moment they walk through the door.</p>
  83. <p>In the 25 years I’ve been studying communities, the most depressing part is that people still start communities (social apps, sites, any company that lets people talk to each other) without thinking through who, exactly, is going to manage the community and how. But it would be ridiculous to start a bar without a bartender.</p>
  84. <p>And bartenders are not alone! A successful bar will need a whole staff. Servers, hosts, busboys, cooks, cleaners, bouncers. Especially bouncers! We’re nearly 30 years into the web and people are still starting community sites thinking they can just outsource all the messy people stuff to <a href="http://powazek.com/posts/3548">AI</a> or poorly paid contractors, often in other countries.</p>
  85. <p>And there’s one more thing all those employees are responsible for.</p>
  86. <h4>Living With The Law</h4>
  87. <p>Bars are subject to a heinously complex mesh of laws. City, county, state, and federal, not to mention departments of health and safety. And those laws will be vastly different from city to city, state to state, country to country.</p>
  88. <p>Bars are responsible for serving only so much alcohol per drink, not serving someone too intoxicated, not serving to anyone below a certain age. Keeping track of every drop of alcohol. And if they break any of these laws, they can be shut down permanently, owners can lose their license, people can go to jail. Why? Because alcohol is dangerous. With Facebook inciting <a href="https://www.amnesty.org/en/latest/news/2022/09/myanmar-facebooks-systems-promoted-violence-against-rohingya-meta-owes-reparations-new-report/">genocide in Myanmar</a>, mass shooters in America being <a href="https://ag.ny.gov/sites/default/files/buffaloshooting-onlineplatformsreport.pdf">radicalized online</a>, the January 6 insurrection that was <a href="https://www.vox.com/recode/22221285/trump-online-capitol-riot-far-right-parler-twitter-facebook">planned online</a>, and <a href="https://www.rollingstone.com/politics/politics-news/elon-musk-twitter-reinstates-neo-nazi-andrew-anglin-account-1234640390/">nazis reinstated</a> on Twitter, can anyone still claim that poorly managed social spaces are any less dangerous?</p>
  89. <p>The first thirty years of the web may have been an orgy of unregulated expansion, but that era is over. The EU has been a leader with the <a href="https://gdpr-info.eu">GDPR</a>, but there’s more coming. And I’m glad. The big players have had plenty of time to get their shit together and they haven’t. It’s time to regulate them as much as we regulate a shot of bourbon.</p>
  90. <h4>Communities Are Diverse</h4>
  91. <p>I’ve been talking about the commonalities among bars, but it’s just as important to talk about the differences. There’s a bar for everyone. Fancy bars and dive bars. Gay bars and sports bars and gay sports bars. Neighborhood bars where you can walk in, and private bars that require a membership. There are bars where men have to wear suits, and bars that will cut your tie off and hang it from the ceiling. Besides the booze, bars may not have anything in common at all. And some bars <a href="https://apnews.com/article/sober-bars-no-alcohol-bars-fd1204932488adda0909ec19fcfbcd5e">don’t even serve booze</a>.</p>
  92. <p>The important part is, each bar cultivates its own culture and you can’t walk in to a bar and expect it to be like every other bar you’ve ever been in. And the bars themselves come up with ways to differentiate themselves and reinforce these differences, some overt and some subtle.</p>
  93. <p>In the same way, community spaces online should be true to themselves. Not every community has to be for everybody. What a failure of imagination it is to think that all community spaces should look and act the same. The next Twitter, whatever it is, shouldn’t look or act like Twitter. You’d never take the entire population of the world and try to stuff them inside one bar, yet somehow Facebook thinks that everyone should be on Facebook. That’s just not how communities work.</p>
  94. <p><a href="https://joinmastodon.org">Mastodon</a> has its problems, but its core design is built for this idea of lots of bars, each with their own bartender, their own quirks, and their own rules. And the expanding “<a href="https://en.wikipedia.org/wiki/Fediverse">Fediverse</a>” – a network of sites/apps connected by the ActivityPub protocol of which Masdtodon is a part – is also a good example of how we should be building lots of bars with their own communities instead of trying to stuff everyone into one giant blue bubbled mess. But all of this can be built on the open web, too. It just requires community creators be honest about who their bar is for and who it’s not, and then develop ways to keep true to that mission.</p>
  95. <h4>The Money Part</h4>
  96. <p>There’s one final reason I’ve started using bars as my go-to metaphor for communities instead of gardens: money. Gardens are wonderful. I’m a gardener and it’s influenced the way I think about my relationships and my life. It’s taught me patience and nurturance. But it costs money and gardeners don’t like talking about that part.</p>
  97. <p>But bars are businesses from the outset. It’s not a surprise that a bar charges money, it’s expected. We have to start thinking about online communities the same way.</p>
  98. <p>All those necessary employees I mentioned earlier cost money. Servers and software cost money. When we go into online communities expecting them to be free, <a href="http://powazek.com/posts/3229">we become the product</a> that gets sold to advertisers and data brokers. The money has to be made somewhere. If we paid for our online communities, they might finally treat us, and our experiences, as valuable. We might finally get to be the customers, instead of the products.</p>
  99. <p>The big problem with the garden metaphor is that it treats the community members as a crop that just grows, like a natural resource. To quote <a href="https://www.azquotes.com/quote/717120">Utah Phillips</a>, “Have you seen what they do to valuable natural resources? Have you seen a strip mine? Have you seen a clear cut in the forest? Have you seen a polluted river? Don’t ever let them call you a valuable natural resource!” Social media sites have been strip mining us for long enough.</p>
  100. <p>Maybe it’s time we grow out of the idealism of the first 30 years of the web and start looking at what we’re really doing online with each other. It’s not always healthy, but we do it anyway. It’s something that adults do because we have a deep need to gather and talk, but we can’t include everyone all the time. And maybe sometimes it gets too loud, but we still wanna be mostly safe when we do it.</p>
  101. <p>Online communities are bars and we should admit that and start building the diverse, engaging, and safe gathering places we deserve.</p>
  102. </article>
  103. <hr>
  104. <footer>
  105. <p>
  106. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  107. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  108. </svg> Accueil</a> •
  109. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  110. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  111. </svg> Suivre</a> •
  112. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  113. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  114. </svg> Pro</a> •
  115. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  116. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  117. </svg> Email</a> •
  118. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  120. </svg> Légal</abbr>
  121. </p>
  122. <template id="theme-selector">
  123. <form>
  124. <fieldset>
  125. <legend><svg class="icon icon-brightness-contrast">
  126. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  127. </svg> Thème</legend>
  128. <label>
  129. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  130. </label>
  131. <label>
  132. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  133. </label>
  134. <label>
  135. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  136. </label>
  137. </fieldset>
  138. </form>
  139. </template>
  140. </footer>
  141. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  142. <script>
  143. function loadThemeForm(templateName) {
  144. const themeSelectorTemplate = document.querySelector(templateName)
  145. const form = themeSelectorTemplate.content.firstElementChild
  146. themeSelectorTemplate.replaceWith(form)
  147. form.addEventListener('change', (e) => {
  148. const chosenColorScheme = e.target.value
  149. localStorage.setItem('theme', chosenColorScheme)
  150. toggleTheme(chosenColorScheme)
  151. })
  152. const selectedTheme = localStorage.getItem('theme')
  153. if (selectedTheme && selectedTheme !== 'undefined') {
  154. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  155. }
  156. }
  157. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  158. window.addEventListener('load', () => {
  159. let hasDarkRules = false
  160. for (const styleSheet of Array.from(document.styleSheets)) {
  161. let mediaRules = []
  162. for (const cssRule of styleSheet.cssRules) {
  163. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  164. continue
  165. }
  166. // WARNING: Safari does not have/supports `conditionText`.
  167. if (cssRule.conditionText) {
  168. if (cssRule.conditionText !== prefersColorSchemeDark) {
  169. continue
  170. }
  171. } else {
  172. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  173. continue
  174. }
  175. }
  176. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  177. }
  178. // WARNING: do not try to insert a Rule to a styleSheet you are
  179. // currently iterating on, otherwise the browser will be stuck
  180. // in a infinite loop…
  181. for (const mediaRule of mediaRules) {
  182. styleSheet.insertRule(mediaRule.cssText)
  183. hasDarkRules = true
  184. }
  185. }
  186. if (hasDarkRules) {
  187. loadThemeForm('#theme-selector')
  188. }
  189. })
  190. </script>
  191. </body>
  192. </html>