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

  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>How To Keep Believing in the Internet (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_2020-06-19.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 type="text/javascript">
  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://jenmyers.net/daily/how-to-keep-believing-in-the-internet.html">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>How To Keep Believing in the Internet</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  63. </p>
  64. </nav>
  65. <hr>
  66. <h2><a href="https://jenmyers.net/daily/how-to-keep-believing-in-the-internet.html">Source originale du contenu</a></h2>
  67. <main>
  68. <p>About three weeks into the new year, I figured out that my personal internet was too loud. By “personal internet,” I mean my regular round of Twitter, websites and other social media. I don’t consume as much online as some people do, or even as much as I used to myself, and for a long time, this had me convinced that my time on the internet was harmless and not worth examining. Until I did examine it. And ended up taking a month’s vacation from much of it.</p>
  69. <p>As someone who has long worked in the tech industry and was an early adopter of every form of social media, I’ve had to spend the past few years scaling back my internet usage. I first hit a wall with Twitter about five years ago; I subsequently unfollowed everyone and slowly, judiciously re-followed. About two years ago, I cleared out my Tumblr and logged out of my account. I gave up on Facebook and deactivated my account; after a year of not missing it much, I finally permanently deleted my account. I kept Instagram, but had no compunctions about dropping any account that bothered me in the least and filled my feed with pets. I’m not much attached to my phone, but I took steps to make sure I was actively de-tethered from it, such as buying an actual alarm clock so I can keep my phone on my desk at night. I also started to pay better attention to issues of security: I took several years’ worth of early social media posts offline and audited my internet properties to make sure everything out there was something I wanted to be out there.</p>
  70. <p>My strategies worked. The more time I freed from the internet, the more time I had for books and films, which I valued more. I felt that when I put content out into the digital world, it was deliberate, thoughtful and sincere, rather than reflexive, careless or performative. Overall, I was less anxious and more contemplative. I felt better. But, every once and a while, I still get sunk in a compulsive habit of checking for new content and sucking it all in without a protective filter or a definite end. Which does not make me feel better. It’s like eating junk food: easy and momentarily satisfying, but regrettable later. And, at this point, it primarily circles around one service: Twitter.</p>
  71. <p>I’ve been on Twitter for thirteen years. That’s a long time by any measure, and in internet terms, it feels like forever. I enjoy Twitter. There are a lot of smart and funny people there and I’ve learned a lot of new things over the years. I follow many folks who make cool stuff and talk about it on Twitter. Other fine folks follow me and give me valuable feedback on the stuff I make. The problem on Twitter arises for me not in quality but in volume. There’s just constantly too much. There’s not enough time to take it all in and even if there were, there wouldn’t be enough time to consider it anything more than superficially. What I’ve found is that after a long period of exposure, Twitter gradually, stealthily turns toxic to me. It gets too loud. And once it reaches that knife edge, it can go from useless to harmful in a snap.</p>
  72. <p>I hit this point in mid-January. I realized that being hooked into the internet without pause was making me frustrated and short-tempered. So I took evasive action. I paused my weekly newsletter, which I have sent out for over five years, and I logged out of Twitter entirely, for the longest time since I first created my account. As of now, it’s been almost four weeks. And, lo and behold, I feel much better. Which is great in the short term, but has led me to start questioning: what do I do differently when I go back? Should I go back at all? Is it possible to use the internet these days with enough awareness and responsibility that it’s a net benefit?</p>
  73. <p>Social media is not inherently bad. Twitter is not inherently bad. The internet is not inherently bad. In fact, I believe profoundly in the internet. I still believe that a mechanism that gets more information to more individuals is fundamentally a good thing. Not without its complications and challenges, of course, but a good thing nonetheless. I don’t as wholeheartedly believe in social media, but that is mostly because social media has evolved to oppose the internet’s original openness and democratization. Facebook is a walled garden that privileges access to information for Facebook users. (Fun experiment: log out of Facebook and try to read something “publicly” posted there. Their various popups do everything they can to impede your progress until you log in or create an account.) Instagram refuses links to external websites, the single most essential aspect of an interconnected web. Twitter has popularized long, threaded statements that we once published on our own websites and is now content Twitter can control. Every social media app has consciously adopted behaviors that make it virtually impossible to put it down: automatic loading of new content, endless scrolling and no ways out. The internet was supposed to be a tool for us to open our communication and expand our world. Now the experience of using it is nothing but a series of closed circuits designed by people who want to use us instead.</p>
  74. <p>I realize none of this is a revelation. We know by now that too much internet, one way or another, is not healthy for us, and that the internet as it is now is riddled with more pitfalls than opportunities. It took longer for me, who came of age in the age of glorious internet optimism, to admit it. It has taken even longer for me to figure out how to deal with it.</p>
  75. <p>I can’t do much to change the situation on a large scale. But this is what I will do. I will limit my internet intake and pay attention when it starts making me irritable or depressed. I will be deliberate in the messages I put out on the internet. When I write my email newsletters, I’ll mean them. I’ll post my own thoughts on my own website, whether or not anyone takes the time to read them. And I’ll keep believing in this imperfect tool as a way to connect with other people, open their communication and expand their world. Sometimes, I will have to take breaks. But it’s not because I hate the internet. It’s because that’s the only way to keep believing in it.</p>
  76. </main>
  77. </article>
  78. <hr>
  79. <footer>
  80. <p>
  81. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  82. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  83. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  84. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  85. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  86. </p>
  87. <template id="theme-selector">
  88. <form>
  89. <fieldset>
  90. <legend>Thème</legend>
  91. <label>
  92. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  93. </label>
  94. <label>
  95. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  96. </label>
  97. <label>
  98. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  99. </label>
  100. </fieldset>
  101. </form>
  102. </template>
  103. </footer>
  104. <script type="text/javascript">
  105. function loadThemeForm(templateName) {
  106. const themeSelectorTemplate = document.querySelector(templateName)
  107. const form = themeSelectorTemplate.content.firstElementChild
  108. themeSelectorTemplate.replaceWith(form)
  109. form.addEventListener('change', (e) => {
  110. const chosenColorScheme = e.target.value
  111. localStorage.setItem('theme', chosenColorScheme)
  112. toggleTheme(chosenColorScheme)
  113. })
  114. const selectedTheme = localStorage.getItem('theme')
  115. if (selectedTheme && selectedTheme !== 'undefined') {
  116. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  117. }
  118. }
  119. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  120. window.addEventListener('load', () => {
  121. let hasDarkRules = false
  122. for (const styleSheet of Array.from(document.styleSheets)) {
  123. let mediaRules = []
  124. for (const cssRule of styleSheet.cssRules) {
  125. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  126. continue
  127. }
  128. // WARNING: Safari does not have/supports `conditionText`.
  129. if (cssRule.conditionText) {
  130. if (cssRule.conditionText !== prefersColorSchemeDark) {
  131. continue
  132. }
  133. } else {
  134. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  135. continue
  136. }
  137. }
  138. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  139. }
  140. // WARNING: do not try to insert a Rule to a styleSheet you are
  141. // currently iterating on, otherwise the browser will be stuck
  142. // in a infinite loop…
  143. for (const mediaRule of mediaRules) {
  144. styleSheet.insertRule(mediaRule.cssText)
  145. hasDarkRules = true
  146. }
  147. }
  148. if (hasDarkRules) {
  149. loadThemeForm('#theme-selector')
  150. }
  151. })
  152. </script>
  153. </body>
  154. </html>