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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="en">
  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 Kafkaesque digital relationship with ourselves (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://minutestomidnight.co.uk/blog/kafkaesque-digital-relationship-with-ourselves/">
  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 Kafkaesque digital relationship with ourselves</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://minutestomidnight.co.uk/blog/kafkaesque-digital-relationship-with-ourselves/" title="Lien vers le contenu original">Source originale</a>
  70. <br>
  71. Mis en cache le 2024-03-09
  72. </p>
  73. </nav>
  74. <hr>
  75. <p>The topic of this month’s IndieWeb Carnival, <a href="https://manuelmoreale.com/indieweb-carnival-digital-relationships">digital relationships</a>, invites a lot of reflection, especially from an introvert like myself, who’s been basking in the shadow of any form of genuine online communication for a long time. As a Gen-X, I had been heavily invested in email, Usenet newsgroups, BBSes, and IRC channels during the 1990s. I used to juggle between Eudora, Forté Agent, a client called <em>FirstClass</em>, and some form of terminal emulation.</p>
  76. <p>When even the largest corporations were deploying static HTML and CSS, learning to build a personal website was exciting. It was a fertile time where novelty was not a fleeting concept, where establishing connections with people living in other countries was genuinely thrilling. Today, not being involved in the kind of corporate web that contributed to destroying the <em>personal</em> and open nature of the web’s first wave, is a natural consequence of my online upbringing. The current resurgence of what is now defined <em>small web</em>, fuelled by projects such as the IndieWeb, Webmentions, ActivityPub, was electrifying at first. However, not even this space is immune from a poison that is so widespread to have become the norm. If I had to define the problem, I’d say <em>personal branding</em>.</p>
  77. <p>Leaving the corporate web is not enough. Refusing to follow <em>influencers</em> with their incessant broadcasting of self-promotion is not enough. Repopulate an RSS reader with brilliant blogs from newfound like-minded people is not enough. Homepages dressed as business cards are everywhere, convinced as we are that <a href="https://www.vox.com/culture/2024/2/1/24056883/tiktok-self-promotion-artist-career-how-to-build-following">presenting ourselves as a product is the only way to go</a>.</p>
  78. <blockquote>
  79. <p>I’m Simone, a seasoned web developer and sound designer with over 25 years of experience.</p>
  80. </blockquote>
  81. <p>I can’t stress this enough: defining myself through job roles, awards, or the fact that I might be a public speaker, is good for a resume. Anywhere else, it becomes deeply uninspiring and <em>uninteresting</em>. That is what I might be doing for a living right now, but it doesn’t represent who I am as a person with values, interests and priorities. Even Mastodon is choke-full of this type of profile description. Why, in a small independent social network, do so many folks use this crap marketing lingo as if they were walking LinkedIn adverts?</p>
  82. <p>Blaming any social media, corporate or not, for creating this situation is flatly wrong. In <a href="https://minutestomidnight.co.uk/blog/years-just-pass-by/">a short post written two decades ago</a> I had passive-aggressively complained about bloggers in a pre-Facebook era. It sounded a lot like I was talking about modern influencers, or pseudo <em>thought leaders</em>:</p>
  83. <blockquote>
  84. <p>Five years ago there was all this buzz about virtual communities. How did that go? I have no idea, all I know is that everything revolves around who’s the hottest blogger right now. They talk about themselves, reference each other, all anxious about who has the most comments or the longest and most prestigious blogroll.</p>
  85. </blockquote>
  86. <h2 id="walk-the-walk">Walk the walk</h2>
  87. <p>Removing the brand from the person is all but straightforward. I now start my about page with a quick way to introduce myself by putting forward some of my values. The following section focuses on telling a short story about my path and work goals, rather than listing accomplishments. Also, <a href="https://minutestomidnight.co.uk/blog/de-brand/">as I said already</a>, words are important. Beside saying <em>people</em> instead of <em>users</em>, stop considering who’s reading my stuff as <em>audience</em>, and quit referring to what I do as <em>content</em>, I want to modify a few more behaviours:</p>
  88. <ul class="list-hr">
  89. <li><strong>Quit mentioning well-known bloggers on a first-name basis</strong>. The self-aggrandising concealed implication is extremely annoying. The practice of obsessively quoting the same guys as if they’re close friends only reinforces the idea that these white men are a walled garden of successful people in their field. The same distortion happened in the UK recently, when the media insisted on referencing to the former Prime Minister Johnson as <em>Boris</em>, like he was a cuddly bear, or a mate you meet at a pub. He was neither.</li>
  90. <li><strong>Keep writing about different things</strong>. If my website will ever become one-dimensional, <del>specialised</del> fixated on a single topic, I’ll retire from the internet for good.</li>
  91. <li><strong>Don’t quote so-called thought leaders</strong>, but feed varied points of view by citing the less boosted ones. The web is full of interesting and unknown writers with way less than a gazillion followers on any given online space. I much prefer to look beyond gender, skin colour, geography, because I care about exciting ideas, fresh approach, novelty, not <em>status</em>.</li>
  92. <li><strong>Stop sugar-coating concepts</strong> by swapping simple truths with cheap gaslighting. I don’t “help companies” achieving something, I work for a salary doing things that, when luck strikes, I might even enjoy.</li>
  93. </ul>
  94. <p>Based on <a href="https://sonomu.club/@m2m/111875069567954865">reactions on Mastodon</a> I would say this is <a href="https://mastodon.design/@silviamaggi/111880068685358232">a conversation worth having</a>. It’s not the end of the road. I’ve been talking the talk for a long time before realising to be part of this game of projected personas within a collective <em>company of one</em> allucination.</p>
  95. </article>
  96. <hr>
  97. <footer>
  98. <p>
  99. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  100. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  101. </svg> Accueil</a> •
  102. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  103. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  104. </svg> Suivre</a> •
  105. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  106. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  107. </svg> Pro</a> •
  108. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  109. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  110. </svg> Email</a> •
  111. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  112. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  113. </svg> Légal</abbr>
  114. </p>
  115. <template id="theme-selector">
  116. <form>
  117. <fieldset>
  118. <legend><svg class="icon icon-brightness-contrast">
  119. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  120. </svg> Thème</legend>
  121. <label>
  122. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  123. </label>
  124. <label>
  125. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  126. </label>
  127. <label>
  128. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  129. </label>
  130. </fieldset>
  131. </form>
  132. </template>
  133. </footer>
  134. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  135. <script>
  136. function loadThemeForm(templateName) {
  137. const themeSelectorTemplate = document.querySelector(templateName)
  138. const form = themeSelectorTemplate.content.firstElementChild
  139. themeSelectorTemplate.replaceWith(form)
  140. form.addEventListener('change', (e) => {
  141. const chosenColorScheme = e.target.value
  142. localStorage.setItem('theme', chosenColorScheme)
  143. toggleTheme(chosenColorScheme)
  144. })
  145. const selectedTheme = localStorage.getItem('theme')
  146. if (selectedTheme && selectedTheme !== 'undefined') {
  147. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  148. }
  149. }
  150. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  151. window.addEventListener('load', () => {
  152. let hasDarkRules = false
  153. for (const styleSheet of Array.from(document.styleSheets)) {
  154. let mediaRules = []
  155. for (const cssRule of styleSheet.cssRules) {
  156. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  157. continue
  158. }
  159. // WARNING: Safari does not have/supports `conditionText`.
  160. if (cssRule.conditionText) {
  161. if (cssRule.conditionText !== prefersColorSchemeDark) {
  162. continue
  163. }
  164. } else {
  165. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  166. continue
  167. }
  168. }
  169. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  170. }
  171. // WARNING: do not try to insert a Rule to a styleSheet you are
  172. // currently iterating on, otherwise the browser will be stuck
  173. // in a infinite loop…
  174. for (const mediaRule of mediaRules) {
  175. styleSheet.insertRule(mediaRule.cssText)
  176. hasDarkRules = true
  177. }
  178. }
  179. if (hasDarkRules) {
  180. loadThemeForm('#theme-selector')
  181. }
  182. })
  183. </script>
  184. </body>
  185. </html>