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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
  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>
  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>#162: Minimum Viable Self (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="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <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>
  30. <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>
  31. <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>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script>
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://kneelingbus.substack.com/p/162-minimum-viable-self">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>#162: Minimum Viable Self</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  63. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  64. </svg> Accueil</a> •
  65. <a href="https://kneelingbus.substack.com/p/162-minimum-viable-self" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <p>Two decades ago, before social media existed, Zygmunt Bauman articulated a perfect description of how it would soon shape our behavior and frame our relationships to one another. In his 2000 book <em>Liquid Modernity</em>, Bauman wrote: “Seen from a distance, (other people’s) existence seems to possess a coherence and a unity which they cannot have, in reality, but which seems evident to the spectator. This, of course, is an optical illusion. The distance (that is, the paucity of our knowledge) blurs the details and effaces everything that fits ill into the Gestalt. Illusion or not, we tend to see other people’s lives as works of art. And having seen them this way, we struggle to (make our lives) the same.” The conditions Bauman described had already emerged in other media environments, such as television, but the participatory nature of the internet and specifically social media would compel everyone involved to develop an online identity, intentionally or not, that would correspond to their offline identity but would never quite mirror it perfectly. The personal brand, that groan-inducing pillar of digital existence, only occasionally amounts to the refined display that its most sophisticated instances embody. For most people, though, a personal brand is an accidental side effect of their digital presence, something they assume to be a faithful reflection of their “real” selves whether it really is or not.</p>
  70. <p>Even poorly constructed online identities, however, somehow manage to cohere into consistent wholes, thanks to the medium that transmits them. Every social media feed is an endless parade of these fragmentary identities, disaggregated into units of content and passing by quickly enough to evade the scrutiny that would detect their incompleteness. As Bauman presciently realized, the constraints of these digital environments and the sheer volume of users endows even the flimsiest online presences with an illusion of unity. Showing up frequently enough in the feed might elevate one’s presence to a work of art, at least from everyone else’s distracted perspective, and this in turn motivates us all to present our own selves more artfully. The speed of the information flow is essential to the entire illusion: A platform like Twitter makes our asynchronous posts feel like real-time interaction by delivering them in such rapid succession, and that illusion begets another more powerful one, that we’re all actually <em>present</em> within the feed. If you and I are both present, moreover, that implies that we’re together, something that is always almost true within these social networks but never quite achieved. On Twitter every relationship is thus parasocial, even if bidirectionally so, and perhaps that’s why digital relationships continue to demand in-person reification.</p>
  71. <p>Something I frequently joke about—a dark truth that begs for humor—is how social media requires continuous posting just to remind everyone else you exist. I once <a href="https://twitter.com/kneelingbus/status/1339376044097331202">said</a> that if Twitter was real life our bodies would always be slowly shrinking, and tweeting more would be the only way to make ourselves bigger again. We can always opt out of this arrangement, of course, and live happily in meatspace, but that is precisely the point: Offline we exist by default; online we have to post our way into selfhood. Reality, as Philip K. Dick said, is that which doesn’t go away when you stop believing in it, and while the digital and physical worlds may be converging as a hybridized domain of lived experience and outward perception, our own sustained presence as individuals is the quality that distinguishes the two. As I <a href="https://kneelingbus.substack.com/p/149-listen-the-snow-is-falling">wrote</a> in January, silence is effectively impossible on the contemporary internet, where “voids are just filled by other people’s content, and thus vanish instantly.” The illusions that enable social media to feel like a primary reality (rather than a medium that supplements that reality) have become increasingly seamless and less likely to be broken, but <a href="https://studio.ribbonfarm.com/p/digital-homelessness">as Venkatesh Rao has observed</a>, many users are sacrificed at the altar of this reality, slipping through the cracks and becoming “digitally homeless.” This phenomenon, he writes, flourishes in “online zones where, for whatever reasons, psychologically plausible and inhabitable personas have failed to cohere for a significant subset of people.” The feed algorithms and interfaces treat these users the same way the actual homeless are frequently treated: by pushing them to the margins and concealing them from view. For the online homeless, as digital reality matures, maybe nonexistence is no longer an option.</p>
  72. </article>
  73. <hr>
  74. <footer>
  75. <p>
  76. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  77. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  78. </svg> Accueil</a> •
  79. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  80. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  81. </svg> RSS</a> •
  82. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  83. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  84. </svg> Pro</a> •
  85. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  86. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  87. </svg> Email</a> •
  88. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  89. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  90. </svg> Légal</abbr>
  91. </p>
  92. <template id="theme-selector">
  93. <form>
  94. <fieldset>
  95. <legend><svg class="icon icon-brightness-contrast">
  96. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  97. </svg> Thème</legend>
  98. <label>
  99. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  100. </label>
  101. <label>
  102. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  103. </label>
  104. <label>
  105. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  106. </label>
  107. </fieldset>
  108. </form>
  109. </template>
  110. </footer>
  111. <script>
  112. function loadThemeForm(templateName) {
  113. const themeSelectorTemplate = document.querySelector(templateName)
  114. const form = themeSelectorTemplate.content.firstElementChild
  115. themeSelectorTemplate.replaceWith(form)
  116. form.addEventListener('change', (e) => {
  117. const chosenColorScheme = e.target.value
  118. localStorage.setItem('theme', chosenColorScheme)
  119. toggleTheme(chosenColorScheme)
  120. })
  121. const selectedTheme = localStorage.getItem('theme')
  122. if (selectedTheme && selectedTheme !== 'undefined') {
  123. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  124. }
  125. }
  126. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  127. window.addEventListener('load', () => {
  128. let hasDarkRules = false
  129. for (const styleSheet of Array.from(document.styleSheets)) {
  130. let mediaRules = []
  131. for (const cssRule of styleSheet.cssRules) {
  132. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  133. continue
  134. }
  135. // WARNING: Safari does not have/supports `conditionText`.
  136. if (cssRule.conditionText) {
  137. if (cssRule.conditionText !== prefersColorSchemeDark) {
  138. continue
  139. }
  140. } else {
  141. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  142. continue
  143. }
  144. }
  145. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  146. }
  147. // WARNING: do not try to insert a Rule to a styleSheet you are
  148. // currently iterating on, otherwise the browser will be stuck
  149. // in a infinite loop…
  150. for (const mediaRule of mediaRules) {
  151. styleSheet.insertRule(mediaRule.cssText)
  152. hasDarkRules = true
  153. }
  154. }
  155. if (hasDarkRules) {
  156. loadThemeForm('#theme-selector')
  157. }
  158. })
  159. </script>
  160. </body>
  161. </html>