A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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>My love-hate affair with technology (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. <!-- 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. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://nolanlawson.com/2021/08/26/my-love-hate-affair-with-technology/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>My love-hate affair with technology</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://nolanlawson.com/2021/08/26/my-love-hate-affair-with-technology/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p>Ten years ago I would have considered myself someone who was excited about new technology. I always had the latest smartphone, I would read the reviews of new Android releases with a lot of interest, and I was delighted when things like Google Maps Navigation, speech-to-text, or keyboard swiping made my life easier.</p>
  71. <p>Nowadays, to the average person I probably look like a technology curmudgeon. I don’t have a smart speaker, a smart watch, or any smart home appliances. My 4-year-old phone runs a <a href="https://nolanlawson.com/2019/06/13/how-to-de-google-your-android-phone/">de-Googled LineageOS</a> that barely runs any apps other than Signal and F-Droid. My house has a Raspberry Pi running Nextcloud for file storage and Pi-hole for ad blocking. When I bought a new TV I refused to connect it to the Internet; instead, I hooked it up to an old PC running Ubuntu so I can watch Netflix, Hulu, etc.</p>
  72. <p>My wife complains that none of the devices in our house work, and she’s right. The Pi-hole blocks a lot of websites, and it’s a struggle to unblock them. Driving the TV with a wireless keyboard is cumbersome. Nextcloud is clunky compared to something like Dropbox or Google Drive. I even tried <a href="https://docs.pi-hole.net/guides/dns/cloudflared/">cloudflared</a> for a while, but I had to give up when DNS kept periodically failing.</p>
  73. <p>One time – no joke – I had a dream that I was using some open-source alternative to a popular piece of software, and it was slow and buggy. I don’t even remember what it was, but I remember being frustrated. This is just what I’m used to nowadays – not using a technology because it’s the best-in-class or makes my life easier, but because it meets some high-minded criteria about how I think software should be: privacy-respecting, open-source, controlled by the user, etc.</p>
  74. <p>To the average person, this is probably crazy. “Nolan,” they’d say. “You couldn’t order a Lyft because their web app didn’t work in Firefox for Android. Your files don’t sync away from home because you’re only running Nextcloud on your local network. Your friends can’t even message you on WhatsApp, Facebook, or Twitter because you don’t have an account and the apps don’t work on your phone. If you want to live in the eighteenth century so bad, why don’t you get a horse and buggy while you’re at it?”</p>
  75. <p>Maybe this nagging voice in my head is right (and I do think these thoughts sometimes). Maybe what I’m practicing is a kind of <a href="https://nolanlawson.com/2019/05/31/tech-veganism/">tech veganism</a> that, like real veganism, is a great idea in theory but really hard to stick to in practice. (And yes, I’ve tried real veganism too. Maybe I should join a monastery at this point.)</p>
  76. <p>On the other hand, I have to remind myself that there are benefits to the somewhat ascetic lifestyle I’ve chosen. The thing that finally pushed me to switch from stock Android to de-Googled LineageOS was all the ads and notifications in Google Maps. I remember fumbling around with a dozen settings, but never being able to get rid of the <a href="https://bradfrost.com/blog/post/google-you-creepy-sonofabitch/">“Hey, rate this park”</a> message. (Because everything on Earth needs a star rating apparently.)</p>
  77. <p>And now, I don’t have to deal with Google Maps anymore! Instead I deal with <a href="https://f-droid.org/en/packages/net.osmand.plus/">OsmAnd~</a>, which broke down the other day and failed to give me directions. So it goes.</p>
  78. <p>Maybe someday I’ll relent. Maybe I’ll say, “I’m too old for this shit” and start using technology that actually works instead of technology that meets some idealistic and probably antiquated notion of software purity. Maybe I’ll be forced to, because I need <a href="https://archive.fosdem.org/2019/schedule/event/full_software_freedom/">a pacemaker that isn’t open-source</a>. Or maybe there will be some essential government service that requires a Google or Apple phone – my state’s <a href="https://www.doh.wa.gov/Emergencies/COVID19/WANotify">contact tracing app</a> does! I got jury duty recently and was unsurprised to find that they do everything through Zoom. At what point will it be impossible to be a tech hermit, without being an <em>actual</em> hermit?</p>
  79. <p>That said, I’m still doing what I’m doing for now. It helps that I’m on <a href="https://joinmastodon.org">Mastodon</a>, where there are plenty of folks who are even more hardcore than me. (“I won’t even look at a computer if it’s running non-FLOSS software,” they smirk, typing from their BSD laptop behind five layers of Tor.) Complaining to this crowd about how I can’t buy a TV anymore without it spying on me makes me feel a little bit normal. Just a bit.</p>
  80. <p>The thing that <a href="https://medium.com/offline-camp/decentralization-is-not-enough-75b15b8bc230">has always bothered me</a> about this, and which continues to bother me, is that I’m only able to live this lifestyle because I have the technical know-how. The average person would neither know how to do any of the things I’m doing (installing a custom Android ROM, setting up Nextcloud, etc.), nor would they probably want to, given that it’s a lot of extra hassle for a sub-par experience.</p>
  81. <p>And who am I, anyway? Edward Snowden? Why am I LARPing as a character in a spy novel when I could be focusing on any one of a million other hobbies in the world?</p>
  82. <p>I guess the answer is: this is my hobby. Figuring out how to get my Raspberry Pi to auto-update is a hobby. Tinkering with my TV setup so that I can get Bluetooth headphones working while the TV is in airplane mode is a hobby. Like a gearhead who’s delighted when his car breaks down (“Hey! Now I can fix it!”), I don’t mind when the technology around me doesn’t work – it gives me something to do on the weekend! But I have no illusions that this lifestyle makes sense for most people. Or that it will even make sense for me, once I get older and probably bored of my hobby.</p>
  83. <p>For the time being, though, I’m going to keep acting like technology is an enemy I need to subdue rather than a purveyor of joys and delights. So if you want to know how it’s going, subscribe to my blog via RSS or message me on Signal. Or if that fails, come visit me in a horse and buggy.</p>
  84. </article>
  85. <hr>
  86. <footer>
  87. <p>
  88. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  89. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  90. </svg> Accueil</a> •
  91. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  92. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  93. </svg> Suivre</a> •
  94. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  95. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  96. </svg> Pro</a> •
  97. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  98. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  99. </svg> Email</a> •
  100. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  101. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  102. </svg> Légal</abbr>
  103. </p>
  104. <template id="theme-selector">
  105. <form>
  106. <fieldset>
  107. <legend><svg class="icon icon-brightness-contrast">
  108. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  109. </svg> Thème</legend>
  110. <label>
  111. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  112. </label>
  113. <label>
  114. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  115. </label>
  116. <label>
  117. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  118. </label>
  119. </fieldset>
  120. </form>
  121. </template>
  122. </footer>
  123. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  124. <script>
  125. function loadThemeForm(templateName) {
  126. const themeSelectorTemplate = document.querySelector(templateName)
  127. const form = themeSelectorTemplate.content.firstElementChild
  128. themeSelectorTemplate.replaceWith(form)
  129. form.addEventListener('change', (e) => {
  130. const chosenColorScheme = e.target.value
  131. localStorage.setItem('theme', chosenColorScheme)
  132. toggleTheme(chosenColorScheme)
  133. })
  134. const selectedTheme = localStorage.getItem('theme')
  135. if (selectedTheme && selectedTheme !== 'undefined') {
  136. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  137. }
  138. }
  139. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  140. window.addEventListener('load', () => {
  141. let hasDarkRules = false
  142. for (const styleSheet of Array.from(document.styleSheets)) {
  143. let mediaRules = []
  144. for (const cssRule of styleSheet.cssRules) {
  145. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  146. continue
  147. }
  148. // WARNING: Safari does not have/supports `conditionText`.
  149. if (cssRule.conditionText) {
  150. if (cssRule.conditionText !== prefersColorSchemeDark) {
  151. continue
  152. }
  153. } else {
  154. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  155. continue
  156. }
  157. }
  158. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  159. }
  160. // WARNING: do not try to insert a Rule to a styleSheet you are
  161. // currently iterating on, otherwise the browser will be stuck
  162. // in a infinite loop…
  163. for (const mediaRule of mediaRules) {
  164. styleSheet.insertRule(mediaRule.cssText)
  165. hasDarkRules = true
  166. }
  167. }
  168. if (hasDarkRules) {
  169. loadThemeForm('#theme-selector')
  170. }
  171. })
  172. </script>
  173. </body>
  174. </html>