A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

index.html 42KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767
  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>Newsletters (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://www.robinrendle.com/essays/newsletters">
  55. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>Newsletters</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://www.robinrendle.com/essays/newsletters" title="Lien vers le contenu original">Source originale</a>
  66. </p>
  67. </nav>
  68. <hr>
  69. <div class="slide">
  70. <div class="slide-img">
  71. <img alt="An ornamental leaf design with the word 'newsletter' in the center" src="https://d33wubrfki0l68.cloudfront.net/ffc5c299ff967e038caa083635eadf4c1d68bdd7/6248a/uploads/essays/on-newsletters/00-newsletters.jpg" loading="lazy"/>
  72. </div>
  73. <div class="slide-text">
  74. <p class="date">Robin Rendle <span>∙</span> <time datetime="2021-01-03">January 2021</time></p>
  75. <h1>Newsletters; or, an enormous rant about writing on the web that doesn’t really go anywhere and that’s okay with me</h1>
  76. </div>
  77. </div>
  78. <p><div class="slide">
  79. <div class="slide-img">
  80. <img alt="An illustration of a house at night with a figure at the window" src="https://d33wubrfki0l68.cloudfront.net/e7cceec0e0fad2b5b24f9c280e99d81850b8bc53/5b082/uploads/essays/on-newsletters/01-lucy-bellwood.jpg" loading="lazy"/>
  81. </div>
  82. <div class="slide-text">
  83. <p>My friend Lucy once told me that she falls in love with the way that someone thinks&hellip;</p>
  84. </div>
  85. </div>
  86. <div class="slide">
  87. <div class="slide-img">
  88. <img alt="An illustration of a man looking at a watch being built" src="https://d33wubrfki0l68.cloudfront.net/bae3406bca2eee81193570a0760b087127bfd50a/dc0bf/uploads/essays/on-newsletters/02-setting-up-watches.jpg" loading="lazy"/>
  89. </div>
  90. <div class="slide-text">
  91. <p>&hellip;and that’s what newsletters make possible for me; they’re a record of how strangers see the world.</p>
  92. </div>
  93. </div>
  94. <div class="slide">
  95. <div class="slide-img">
  96. <img alt="An illustration of a group of people playing music" src="https://d33wubrfki0l68.cloudfront.net/5ad1d7a10dc68383f31b07a189001edb7d424054/b7e2c/uploads/essays/on-newsletters/03-music-water.jpg" loading="lazy"/>
  97. </div>
  98. <div class="slide-text">
  99. <p>Newsletters give me permission to fall in love with someone I'll never meet&hellip;</p>
  100. </div>
  101. </div>
  102. <div class="slide">
  103. <div class="slide-img">
  104. <img alt="A group of people on a hot air balloon looking back at Earth" src="https://d33wubrfki0l68.cloudfront.net/2fa98aa905c8d536edad90e625b711a85793d699/37d73/uploads/essays/on-newsletters/04-looking-at-world.jpg" loading="lazy"/>
  105. </div>
  106. <div class="slide-text">
  107. <p>&hellip;someone very far away&hellip;</p>
  108. </div>
  109. </div>
  110. <div class="slide">
  111. <div class="slide-img">
  112. <img alt="Under a streetlamp a man reads a letter" src="https://d33wubrfki0l68.cloudfront.net/ab0a1268c9ce4d338acb862708faa564f6dc7582/fdc28/uploads/essays/on-newsletters/05-fathers-letter.jpg" loading="lazy"/>
  113. </div>
  114. <div class="slide-text">
  115. <p>And over the past few years I’ve fallen in love with so many writers through newsletters! On all sorts of subjects!</p>
  116. </div>
  117. </div>
  118. <div class="slide">
  119. <div class="slide-img">
  120. <img alt="The Cistern of Philoxenos, a subterranean reservoir in Istanbul" src="https://d33wubrfki0l68.cloudfront.net/ac948645452225def95b6b763caaa16019eecea4/2d085/uploads/essays/on-newsletters/06-cistern-philoxenos.jpg" loading="lazy"/>
  121. </div>
  122. <div class="slide-text">
  123. <p>There are dazzling newsletters; those of grand adventures and epic mysteries&hellip;</p>
  124. </div>
  125. </div>
  126. <div class="slide">
  127. <div class="slide-img">
  128. <img alt="An enormous wallpaper printing machine" src="https://d33wubrfki0l68.cloudfront.net/06f6f1f3e8d18b047217c228fe18913b5a80b36e/21649/uploads/essays/on-newsletters/07-wallpaper-printing-machine.jpg" loading="lazy"/>
  129. </div>
  130. <div class="slide-text">
  131. <p>...and newsletters about complex systems, showing us how the world is put together.</p>
  132. </div>
  133. </div>
  134. <div class="slide">
  135. <div class="slide-img">
  136. <img class="slide-img__flowers" alt="A horseshoe geranium flower" src="https://d33wubrfki0l68.cloudfront.net/6ffcd8be52892abb2c193b392d1786f1b9931a8b/e3870/uploads/essays/on-newsletters/08-flower-horseshoe-geranium.jpg" loading="lazy"/>
  137. </div>
  138. <div class="slide-text">
  139. <p>Not to forget smaller newsletters, too. Break-ups! Coffee beans! Clocks! Northumberland flower gardens! These sit side by side with newsletters that are just&hellip;</p>
  140. </div>
  141. </div>
  142. <div class="slide">
  143. <div class="slide-img">
  144. <img alt="A dog plays the flute" src="https://d33wubrfki0l68.cloudfront.net/d561957fb23e7842203c89825723fdc17910f610/acbbb/uploads/essays/on-newsletters/09-playing-flute.jpg" loading="lazy"/>
  145. </div>
  146. <div class="slide-text">
  147. <p>&hellip;<em>weird.</em></p>
  148. </div>
  149. </div>
  150. <div class="slide">
  151. <div class="slide-img">
  152. <img alt="A group of women at the post office" src="https://d33wubrfki0l68.cloudfront.net/347c3767d21a25dfde7dd2f593a95b10247034aa/13e76/uploads/essays/on-newsletters/10-post-office.jpg" loading="lazy"/>
  153. </div>
  154. <div class="slide-text">
  155. <p>So my question here is a difficult one to ask, because I love newsletters so very much&hellip;</p>
  156. </div>
  157. </div>
  158. <div class="slide">
  159. <div class="slide-img">
  160. <img alt="An astronomer looks up at the stars" src="https://d33wubrfki0l68.cloudfront.net/29ec1b7f5d69b7e28b19c1a979f2a517e821e2eb/b7b71/uploads/essays/on-newsletters/11-herschel.jpg" loading="lazy"/>
  161. </div>
  162. <div class="slide-text">
  163. <p>&hellip;but is this progress?</p>
  164. </div>
  165. </div>
  166. <div class="slide">
  167. <div class="slide-img">
  168. <img alt="A sad boy is sat in a chair feeling sad" src="https://d33wubrfki0l68.cloudfront.net/a683e85e984fd03da4a94662758eb8843972d0ce/b7c8e/uploads/essays/on-newsletters/12-sad-boy.jpg" loading="lazy"/>
  169. </div>
  170. <div class="slide-text">
  171. <p>I guess there’s something about newsletters that bugs me, and I can’t put my finger on it.</p>
  172. </div>
  173. </div>
  174. <div class="slide">
  175. <div class="slide-img">
  176. <img alt="Edison’s electric pen" src="https://d33wubrfki0l68.cloudfront.net/051aa2fae6276a558deb5941d7fc011472948fd8/930e6/uploads/essays/on-newsletters/13-edisons-electric-pen.jpg" loading="lazy"/>
  177. </div>
  178. <div class="slide-text">
  179. <p>It bothers me that writers can’t create audiences on their own websites, with their own archives, and their own formats. And they certainly can’t get paid in the process. (Although yes, there are exceptions).</p>
  180. </div>
  181. </div>
  182. <div class="slide">
  183. <div class="slide-img">
  184. <img alt="A carbonated water factory" src="https://d33wubrfki0l68.cloudfront.net/3fab155f4d6f0380525aa790818a93a1d71a269b/115b1/uploads/essays/on-newsletters/14-carbonated-water-factory.jpg" loading="lazy"/>
  185. </div>
  186. <div class="slide-text">
  187. <p>Heck, just the technical expertise required to have your own website is extremely cumbersome and inaccessible to many.</p>
  188. </div>
  189. </div>
  190. <div class="slide">
  191. <div class="slide-img">
  192. <img alt="A man sits in a cave surrounded by coins" src="https://d33wubrfki0l68.cloudfront.net/52d707ba9726b1dfb37ab732f914dbdcadc316b0/1a5d8/uploads/essays/on-newsletters/15-minted-money.jpg" loading="lazy"/>
  193. </div>
  194. <div class="slide-text">
  195. <p>You might think: ah, newsletters are the future because that’s where the money is!</p>
  196. </div>
  197. </div>
  198. <div class="slide">
  199. <div class="slide-img">
  200. <img class="slide-img__giant" alt="A man sits in a cave surrounded by coins" src="https://d33wubrfki0l68.cloudfront.net/8ef0c68ac51269597b2758d4c46d13733c3ac4d0/172f8/uploads/essays/on-newsletters/16-lilliputian-troops-marching.jpg" loading="lazy"/>
  201. </div>
  202. <div class="slide-text">
  203. <p>But the real advantage with newsletters is that they give us super powers. You don’t need to learn about <abbr title="Hypertext markup language">HTML</abbr> or <abbr title="Cascading stylesheets">CSS</abbr> or databases to get started.</p>
  204. </div>
  205. </div>
  206. <div class="slide">
  207. <div class="slide-img">
  208. <img alt="A giant person towers over an army" src="https://d33wubrfki0l68.cloudfront.net/4c3c8f094d07b4b5f3f5b173f9536e570190d722/b7dec/uploads/essays/on-newsletters/17-sad-boy-zoom.jpg" loading="lazy"/>
  209. </div>
  210. <div class="slide-text">
  211. <p>Despite these super powers, I still think that using email to send words to each other is just entirely <em>ugh</em>.</p>
  212. </div>
  213. </div>
  214. <div class="slide">
  215. <div class="slide-img">
  216. <img alt="Two people look at a piece of paper" src="https://d33wubrfki0l68.cloudfront.net/a9414b65c48cded30889a3943789691155109abf/92fc7/uploads/essays/on-newsletters/18-colonel-stood-by.jpg" loading="lazy"/>
  217. </div>
  218. <div class="slide-text">
  219. <p>Perhaps I feel this way because reading everything in my inbox is somewhat antiquated. It’s almost as if we’ve gone back to reading off parchment after we invented books.</p>
  220. </div>
  221. </div>
  222. <div class="slide">
  223. <div class="slide-img">
  224. <img alt="Two people look up at a series of beautiful paintings" src="https://d33wubrfki0l68.cloudfront.net/86f058c6d98320d73866e8c1a2e244aa7334aa85/4d9c5/uploads/essays/on-newsletters/19-comfort-forgive.jpg" loading="lazy"/>
  225. </div>
  226. <div class="slide-text">
  227. <p>Books are so much better than parchment in the same way that websites are so much better than email.</p>
  228. </div>
  229. </div>
  230. <div class="slide">
  231. <div class="slide-img">
  232. <img alt="A person setting metal type" src="https://d33wubrfki0l68.cloudfront.net/bb41e3e2a635d17cad73d9fe3cba57c62f6c62d4/638ad/uploads/essays/on-newsletters/20-printing-form.jpg" loading="lazy"/>
  233. </div>
  234. <div class="slide-text">
  235. <p>And we’ve all moved to newsletters at the very moment when websites can do amazing things with layout and typography! We finally have grids and beautiful fonts and the wonders of print design on the web for the first time.</p>
  236. </div>
  237. </div>
  238. <div class="slide">
  239. <div class="slide-img">
  240. <img alt="Two divers fight an enormous crab" src="https://d33wubrfki0l68.cloudfront.net/1abc74fc74b113262aa240695f50fcc80d019b74/b638a/uploads/essays/on-newsletters/21-spider-crab.jpg" loading="lazy"/>
  241. </div>
  242. <div class="slide-text">
  243. <p>Yet websites are treated as these embarrassing, ugly, ad-riddled things, whilst newsletters have established some kind of prestige for themselves somehow.</p>
  244. </div>
  245. </div>
  246. <div class="slide">
  247. <div class="slide-img">
  248. <img alt="Nusretiye Mosque" src="https://d33wubrfki0l68.cloudfront.net/106d88b3c5da825ac8dc6a1ac874db5e9e8be996/6878b/uploads/essays/on-newsletters/23-nusretiye-mosque.jpg" loading="lazy"/>
  249. </div>
  250. <div class="slide-text">
  251. <p>The web doesn’t have to be this ugly and embarrassing thing though; the web can be made beautiful.</p>
  252. </div>
  253. </div>
  254. <div class="slide">
  255. <div class="slide-img">
  256. <img alt="A table floats into the air" src="https://d33wubrfki0l68.cloudfront.net/1bfdd9e583d225092655ab18d64b45b26c1fa7d0/3d305/uploads/essays/on-newsletters/24-table-slipped.jpg" loading="lazy"/>
  257. </div>
  258. <div class="slide-text">
  259. <p>And I’m saying this as someone who’s spent the better part of the last three years writing emails to strangers—because I feel both liberated and yet also cursed by them. Newsletters are just&hellip;inescapable if you want to be a writer today.</p>
  260. </div>
  261. </div>
  262. <div class="slide">
  263. <div class="slide-img">
  264. <img alt="Skull and crossbones" src="https://d33wubrfki0l68.cloudfront.net/50443029f6930c4250393f9d154c587ca4722bf8/6f463/uploads/essays/on-newsletters/25-skull-crossbones.jpg" loading="lazy"/>
  265. </div>
  266. <div class="slide-text">
  267. <p>But if websites are so great then why did everyone (including me) move to newsletters? Why did blogs die off? Well, there are ten million answers to those questions, but only three I want to focus on.</p>
  268. </div>
  269. </div>
  270. <div class="slide">
  271. <div class="slide-img">
  272. <img alt="Two men fight fight with swords" src="https://d33wubrfki0l68.cloudfront.net/a0faea81822bac1b0d6be6078518187a6c4b3de0/5fafe/uploads/essays/on-newsletters/26-bout-stranger.jpg" loading="lazy"/>
  273. </div>
  274. <div class="slide-text">
  275. <p>Newsletters killed blogs because&hellip;</p>
  276. <ol>
  277. <li>They’re impossibly easy to publish.</li>
  278. <li>Your inbox is a notification stream.</li>
  279. <li>Writers can actually, ya know, get paid.</li>
  280. </ol>
  281. </div>
  282. </div>
  283. <div class="slide">
  284. <div class="slide-img">
  285. <img alt="A man falls from the sky" src="https://d33wubrfki0l68.cloudfront.net/fcd4d1e63bd36aee41defb7378dd08a071d7d8c8/8d506/uploads/essays/on-newsletters/27-de-groof-falling.jpg" loading="lazy"/>
  286. </div>
  287. <div class="slide-text">
  288. <p>Alternatively, websites today&hellip;</p>
  289. <ol>
  290. <li>Are difficult to make.</li>
  291. <li>Can’t notify people of new work.</li>
  292. <li>Aren’t able to pay writers easily.</li>
  293. </ol>
  294. </div>
  295. </div>
  296. <div class="slide">
  297. <div class="slide-img">
  298. <img alt="A handmade organ" src="https://d33wubrfki0l68.cloudfront.net/5c7f0e88c79599cbed4f73bf2449f25f1bde123e/d41de/uploads/essays/on-newsletters/28-organ.jpg" loading="lazy"/>
  299. </div>
  300. <div class="slide-text">
  301. <p>These are the main problems today but now, because of newsletters, I look back on writing for the web as this clunky, annoying process in comparison. The machine sure is beautiful but it requires so much damn work to get singing.</p>
  302. </div>
  303. </div>
  304. <div class="slide">
  305. <div class="slide-img">
  306. <img alt="The bottom of the sea" src="https://d33wubrfki0l68.cloudfront.net/22aa7cf975643500375ec3bec1c9ece122506b11/23d58/uploads/essays/on-newsletters/29-bottom-sea.jpg" loading="lazy"/>
  307. </div>
  308. <div class="slide-text">
  309. <p>So I wonder how we can get the best of both worlds here: the ease of publishing newsletters, with all the beauty and archivability of websites. But what I’m really asking is&hellip;</p>
  310. </div>
  311. </div>
  312. <div class="slide">
  313. <div class="slide-img">
  314. <img alt="A beautiful landscape" src="https://d33wubrfki0l68.cloudfront.net/8a2adc213e90bdf0bb5727d07978a2ab5dc02eb4/8615b/uploads/essays/on-newsletters/30-abbey-mussorie.jpg" loading="lazy"/>
  315. </div>
  316. <div class="slide-text">
  317. <p>&hellip;how do we make the web for everyone?</p>
  318. </div>
  319. </div>
  320. <div class="slide">
  321. <div class="slide-img">
  322. <img alt="A dog walks down a street with a monocle" src="https://d33wubrfki0l68.cloudfront.net/88460feb9e448b326985ad23aaadab918deea86c/06409/uploads/essays/on-newsletters/31-zoom-in-dog.jpg" loading="lazy"/>
  323. </div>
  324. <div class="slide-text">
  325. <p>Let’s take a closer look.</p>
  326. </div>
  327. </div>
  328. <div class="slide slide-chapter">
  329. <div class="slide-text">
  330. <h2>Part One</h2>
  331. <p>Websites are too damn complicated</p>
  332. </div>
  333. </div>
  334. <div class="slide">
  335. <div class="slide-img">
  336. <img alt="A compositor selects metal letters from a case" src="https://d33wubrfki0l68.cloudfront.net/6cd06270d5ac8ef197524aa764a20f5821cc8fae/995aa/uploads/essays/on-newsletters/32-compositor.jpg" loading="lazy"/>
  337. </div>
  338. <div class="slide-text">
  339. <p>Websites haven’t gotten any easier to make over the past thirty years.</p>
  340. </div>
  341. </div>
  342. <div class="slide">
  343. <div class="slide-img">
  344. <img alt="Demons gather in hell" src="https://d33wubrfki0l68.cloudfront.net/aede02a0b877742845b8f896d69203b5e73dcbb7/17af5/uploads/essays/on-newsletters/33-dreadful-din.jpg" loading="lazy"/>
  345. </div>
  346. <div class="slide-text">
  347. <p>You still need to learn <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Stylesheets">CSS</abbr> to make a website. You still need to learn about hosting and domain names. You might even be forced to learn what the abbreviation <abbr title="Content management system">CMS</abbr> stands for, and I simply refuse to curse you with that knowledge.</p>
  348. </div>
  349. </div>
  350. <div class="slide">
  351. <div class="slide-img">
  352. <img alt="A gondola falls from the sky" src="https://d33wubrfki0l68.cloudfront.net/5211b81dae7aafdf73db9f9b65adff9400e68a3e/de8fd/uploads/essays/on-newsletters/34-gondola.jpg" loading="lazy"/>
  353. </div>
  354. <div class="slide-text">
  355. <p>The web was originally intended to be read and written by everyone, but the technical hurdles of setting up a website excludes the vast majority of people. It should be easier so much easier.</p>
  356. </div>
  357. </div>
  358. <div class="slide">
  359. <div class="slide-img">
  360. <img alt="A circle of giant men gather around a fire" src="https://d33wubrfki0l68.cloudfront.net/863f11d7c29589cd3e885baf526712314a768f6a/f94e7/uploads/essays/on-newsletters/35-fire-circle.jpg" loading="lazy"/>
  361. </div>
  362. <div class="slide-text">
  363. <p>I’m not talking about the complexity of building giant web apps here. Even the smallest websites—with nothing more than text—are far too difficult to build.</p>
  364. </div>
  365. </div>
  366. <div class="slide">
  367. <div class="slide-img">
  368. <img alt="Looting a pirate ship of its treasure" src="https://d33wubrfki0l68.cloudfront.net/5b9a1ac0facdececbe6c429003fe87866d7f01d9/e0755/uploads/essays/on-newsletters/36-removing-treasure.jpg" loading="lazy"/>
  369. </div>
  370. <div class="slide-text">
  371. <p>But perhaps we didn’t bother trying to improve writing on the web because we let social networks devour all our words—the archives be damned.</p>
  372. </div>
  373. </div>
  374. <div class="slide">
  375. <div class="slide-img">
  376. <img alt="Looting a pirate ship of its treasure" src="https://d33wubrfki0l68.cloudfront.net/8aa7461601d26d2f76f14a46699a197ae85266f3/ffc93/uploads/essays/on-newsletters/37-wolves-wolves.jpg" loading="lazy"/>
  377. </div>
  378. <div class="slide-text">
  379. <p>The solution? Well, I have a few ideas, but one thing I’m dead certain of is that startups shouldn’t be fixing this for us.</p>
  380. </div>
  381. </div>
  382. <div class="slide">
  383. <div class="slide-img">
  384. <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/0b4b6d8637de1b732a24fc336ca59420899df97a/6aad8/uploads/essays/on-newsletters/38-sea-biscuit-machine.jpg" loading="lazy"/>
  385. </div>
  386. <div class="slide-text">
  387. <p>There have been some positive developments in recent years with the likes of static site generators, but again they still feel way too complex to me.</p>
  388. </div>
  389. </div>
  390. <div class="slide">
  391. <div class="slide-img">
  392. <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/d9a04384e9c2cb195a82c222ec03517d946c8116/5409e/uploads/essays/on-newsletters/39-appeared-flash.jpg" loading="lazy"/>
  393. </div>
  394. <div class="slide-text">
  395. <p>On this note, not so long ago I stumbled upon a service called <a href="https://blot.im/">blot.im</a> and it showed me what building a website <em>could</em> be like; easy, fast, accessible.</p>
  396. </div>
  397. </div>
  398. <div class="slide">
  399. <div class="slide-img">
  400. <img alt="A person walks into a storm" src="https://d33wubrfki0l68.cloudfront.net/921c505b7b23888b8e2c2661df2e451a90427a1a/82859/uploads/essays/on-newsletters/40-pencroff-ran.jpg" loading="lazy"/>
  401. </div>
  402. <div class="slide-text">
  403. <p>I reckon this is the future we should be striving towards.</p>
  404. </div>
  405. </div>
  406. <div class="slide slide-chapter">
  407. <div class="slide-text">
  408. <h2>Part Two</h2>
  409. <p>RSS is for Nerds</p>
  410. </div>
  411. </div>
  412. <div class="slide">
  413. <div class="slide-img">
  414. <img alt="Two men looking at a book" src="https://d33wubrfki0l68.cloudfront.net/23c048de6a30c109afc7a962bb43b816238d32f5/92745/uploads/essays/on-newsletters/41-unintelligible-writing.jpg" loading="lazy"/>
  415. </div>
  416. <div class="slide-text">
  417. <p>When you subscribe to a newsletter you don’t have to keep coming back to the source to see if there’s something new. Whenever a writer publishes something then you just get an email.</p>
  418. </div>
  419. </div>
  420. <div class="slide">
  421. <div class="slide-img">
  422. <img alt="Two men looking at a book" src="https://d33wubrfki0l68.cloudfront.net/e6c18a91be4dfae5afbd24dc78d04caa4e434013/5f6b2/uploads/essays/on-newsletters/42-my-friend-please.jpg" loading="lazy"/>
  423. </div>
  424. <div class="slide-text">
  425. <p>The problem with the web is that when you publish something it just sort of disappears from sight. Writers have to spam all the social networks to remind people that they even exist.</p>
  426. </div>
  427. </div>
  428. <div class="slide">
  429. <div class="slide-img">
  430. <img alt="A woman looks into a mirror to see a ghostly face look back" src="https://d33wubrfki0l68.cloudfront.net/a301ab2a12d2abb5f8e73726aff7f54210e00795/ad868/uploads/essays/on-newsletters/43-dead-aunt.jpg" loading="lazy"/>
  431. </div>
  432. <div class="slide-text">
  433. <p>And yet the web sort of has this built-in notification stream and sort of…doesn’t at the same time.</p>
  434. </div>
  435. </div>
  436. <div class="slide">
  437. <div class="slide-img">
  438. <img alt="A head rests on a table in a museum" src="https://d33wubrfki0l68.cloudfront.net/af374e5119fc7572c016b5b065ed830d003e1b3c/2bce6/uploads/essays/on-newsletters/44-talking-head.jpg" loading="lazy"/>
  439. </div>
  440. <div class="slide-text">
  441. <p>It’s called <abbr title="Really Simple Syndication">RSS</abbr>; an ancient, dusty technology that lets you subscribe to a website and see updates as they happen. With an <abbr title="Really Simple Syndication">RSS</abbr> reader app you can see what’s new from your favorite writers.</p>
  442. </div>
  443. </div>
  444. <div class="slide">
  445. <div class="slide-img">
  446. <img alt="Fortifications outside the city walls of the Alhambra" src="https://d33wubrfki0l68.cloudfront.net/d1792429d9f2a3a28a1260bb8c1463d536331ceb/2185f/uploads/essays/on-newsletters/45-alhambra-entrance.jpg" loading="lazy"/>
  447. </div>
  448. <div class="slide-text">
  449. <p>Basically my whole political platform is this: <abbr title="Really Simple Syndication">RSS</abbr> is the promised land.</p>
  450. </div>
  451. </div>
  452. <div class="slide">
  453. <div class="slide-img">
  454. <img alt="A dog reads the newspaper" src="https://d33wubrfki0l68.cloudfront.net/dd39c33ad7f91cd3937bc381cba38e35ed8a02bd/09875/uploads/essays/on-newsletters/46-reading-news.jpg" loading="lazy"/>
  455. </div>
  456. <div class="slide-text">
  457. <p>It’s the perfect way to read the web and to keep up to date with things. So much so that I consider my <abbr title="Really Simple Syndication">RSS</abbr> reader (Reeder.app) to be my favorite web browser, not Chrome, Firefox, or Safari.</p>
  458. </div>
  459. </div>
  460. <div class="slide">
  461. <div class="slide-img">
  462. <img alt="Manufacturing glass bottles" src="https://d33wubrfki0l68.cloudfront.net/830a5353ef847a92a59f9257e23dca22ccb53c9e/c9088/uploads/essays/on-newsletters/47-manufacture-bottles.jpg" loading="lazy"/>
  463. </div>
  464. <div class="slide-text">
  465. <p>The problem with <abbr title="Really Simple Syndication">RSS</abbr> is that you need to know that <abbr title="Really Simple Syndication">RSS</abbr> exists, how it works, which websites support it, etc. It’s nothing short of an enormous faff.</p>
  466. </div>
  467. </div>
  468. <div class="slide">
  469. <div class="slide-img">
  470. <img alt="A microscope" src="https://d33wubrfki0l68.cloudfront.net/af54d289a7b823eb99090271a6260cb4b4160743/ed9ee/uploads/essays/on-newsletters/48-microscope.jpg" loading="lazy"/>
  471. </div>
  472. <div class="slide-text">
  473. <p>But it’s not like <abbr title="Really Simple Syndication">RSS</abbr> is brain surgery, the problem is that it’s hidden away and just complicated enough that 99% of folks won’t care about it.</p>
  474. </div>
  475. </div>
  476. <div class="slide">
  477. <div class="slide-img">
  478. <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/6210faf1e6db0b8a4dbc3434d7547559e246e8a0/09a03/uploads/essays/on-newsletters/49-creusot-steam-hammer.jpg" loading="lazy"/>
  479. </div>
  480. <div class="slide-text">
  481. <p>“<abbr title="Really Simple Syndication">RSS</abbr> is far too complex!” you might say. Well, <abbr title="Really Simple Syndication">RSS</abbr>-the-technology today is fantastically popular—it’s the machine that powers podcasts. So why isn’t <abbr title="Really Simple Syndication">RSS</abbr> used for websites if we use it everyday for audio?</p>
  482. </div>
  483. </div>
  484. <div class="slide">
  485. <div class="slide-img">
  486. <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/97f535fa44d3867727163ad7987e6f6cad44dcf1/ec7cc/uploads/essays/on-newsletters/50-halleys-diving-bell.jpg" loading="lazy"/>
  487. </div>
  488. <div class="slide-text">
  489. <p>I reckon <abbr title="Really Simple Syndication">RSS</abbr> never reached critical scale for websites because it was never built into the browser itself. The failure here wasn’t the technology but the distance between <abbr title="Really Simple Syndication">RSS</abbr> and how we browse the web.</p>
  490. </div>
  491. </div>
  492. <div class="slide">
  493. <div class="slide-img">
  494. <img alt="Eads Bridge" src="https://d33wubrfki0l68.cloudfront.net/0eee64b31a37b2f46c9369bbb8c1e87b96bd92b4/15687/uploads/essays/on-newsletters/51-eads-bridge.jpg" loading="lazy"/>
  495. </div>
  496. <div class="slide-text">
  497. <p>Hear me out: if <abbr title="Really Simple Syndication">RSS</abbr> was renamed, rebranded, and brought to the surface of the browser then I expect legions of people would adore it. No longer would you have to give all these strangers your email address to sign up for the newsletter. </p>
  498. </div>
  499. </div>
  500. <div class="slide">
  501. <div class="slide-img">
  502. <img alt="A skeleton pursues a man on a bobsled" src="https://d33wubrfki0l68.cloudfront.net/885a7db651ccd1c46f27bb0dfd5ba3ea8f482e61/2f049/uploads/essays/on-newsletters/52-demon-pursuer.jpg" loading="lazy"/>
  503. </div>
  504. <div class="slide-text">
  505. <p>And if we could subscribe to websites easily then the web itself might not feel quite so forgettable.</p>
  506. </div>
  507. </div>
  508. <div class="slide slide-chapter">
  509. <div class="slide-text">
  510. <h2>Part Three</h2>
  511. <p>Paying writers is too damn hard</p>
  512. </div>
  513. </div>
  514. <div class="slide">
  515. <div class="slide-img">
  516. <img alt="A ghostly figure haunts a woodsman" src="https://d33wubrfki0l68.cloudfront.net/dde81c62cb9622bca205d421b22c72cb4bbc2cd6/bae94/uploads/essays/on-newsletters/53-mercury-woodman.jpg" loading="lazy"/>
  517. </div>
  518. <div class="slide-text">
  519. <p>This has been called the original sin of the internet. Since you can’t pay someone directly through the browser, the thinking goes, then all these other hacks pop up to squeeze money out of folks; invasive and ugly advertising, privacy-breaking data collection, etc. </p>
  520. </div>
  521. </div>
  522. <div class="slide">
  523. <div class="slide-img">
  524. <img alt="A room full of people clap" src="https://d33wubrfki0l68.cloudfront.net/171c1c031c0bb575c3c97d04a3abebd67c51ee67/b37df/uploads/essays/on-newsletters/54-gun-club-meeting.jpg" loading="lazy"/>
  525. </div>
  526. <div class="slide-text">
  527. <p>If you have enough technical knowledge or a big enough following then you can build a subscription service for your website. This isn’t possible for a lot of writers though.</p>
  528. </div>
  529. </div>
  530. <div class="slide">
  531. <div class="slide-img">
  532. <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/fc0441cc652ec765212fce76b4681000a4416494/d2268/uploads/essays/on-newsletters/55-diamond-boring-machine.jpg" loading="lazy"/>
  533. </div>
  534. <div class="slide-text">
  535. <p>But why should subscribing to a website be any more complex than subscribing to a newsletter? Why do I have to go through Substack or Patreon or the Kindle as a middleman?</p>
  536. </div>
  537. </div>
  538. <div class="slide">
  539. <div class="slide-img">
  540. <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/9d6a66b45c875b2d0e20f34e72a9b8ae102be9b6/bc47a/uploads/essays/on-newsletters/56-corpse-candles.jpg" loading="lazy"/>
  541. </div>
  542. <div class="slide-text">
  543. <p>Look—I adore these services because they open the doors for so many new writers and buck wild stories. But that’s only because the web itself is so damn difficult to make work as an independent publishing platform.</p>
  544. </div>
  545. </div>
  546. <div class="slide">
  547. <div class="slide-img">
  548. <img alt="A man is pushed off a gangplank" src="https://d33wubrfki0l68.cloudfront.net/66c362c4b819a6327854a1b28857dd73cfac5532/49564/uploads/essays/on-newsletters/57-walking-plank.jpg" loading="lazy"/>
  549. </div>
  550. <div class="slide-text">
  551. <p>Paying and subscribing to a writer’s work should be one click away, without having to go through a middleman who takes a big percentage off the top.</p>
  552. </div>
  553. </div>
  554. <div class="slide">
  555. <div class="slide-img">
  556. <img class="slide-img__coins" alt="Coins" src="https://d33wubrfki0l68.cloudfront.net/679a7dfc3d46f1165bfc732d13669c5711ef410b/e8a6e/uploads/essays/on-newsletters/58-coins.jpg" loading="lazy"/>
  557. </div>
  558. <div class="slide-text">
  559. <p>There are neat developments in this space: services like Coil or web browsers like Puma are worth paying attention to because they’re trying to upend the way that money is distributed on the web.</p>
  560. </div>
  561. </div>
  562. <div class="slide">
  563. <div class="slide-img">
  564. <img alt="" src="https://d33wubrfki0l68.cloudfront.net/9f9a6564620437a47899dc96a111f648424a9665/99575/uploads/essays/on-newsletters/59-dragged.jpg" loading="lazy"/>
  565. </div>
  566. <div class="slide-text">
  567. <p>There’s also, well, brace yourself: the Web Monetization <abbr tite="Application programming interface">API</abbr>. That sounds scary! But I think it’s where things get truly interesting (although it’s still far too complicated for most writers to benefit from).</p>
  568. </div>
  569. </div>
  570. <div class="slide">
  571. <div class="slide-img">
  572. <img alt="A painter at work" src="https://d33wubrfki0l68.cloudfront.net/7587591963c6c5d1669fd5daf0d73d499647a857/29303/uploads/essays/on-newsletters/60-painter-at-work.jpg" loading="lazy"/>
  573. </div>
  574. <div class="slide-text">
  575. <p>My point here is that being able to pay folks easily through the browser could open the door for all sorts of other artists, not just writers. </p>
  576. </div>
  577. </div>
  578. <div class="slide">
  579. <div class="slide-img">
  580. <img alt="A young boy rides a strange contraption" src="https://d33wubrfki0l68.cloudfront.net/427f96f06a8157a19880aa6b7bfa2d27fa34aba7/f38ab/uploads/essays/on-newsletters/61-deghens-machine.jpg" loading="lazy"/>
  581. </div>
  582. <div class="slide-text">
  583. <p>Also, writers choose a newsletter service like Substack because the business model is straightforward. I just sort of wish this infrastructure was built into websites themselves.</p>
  584. </div>
  585. </div>
  586. <div class="slide">
  587. <div class="slide-img">
  588. <img alt="A man is led into a secret door by the devil" src="https://d33wubrfki0l68.cloudfront.net/ba0c9d16d0e01a612289a214e4f11b78ccb26353/65f05/uploads/essays/on-newsletters/62-stealing.jpg" loading="lazy"/>
  589. </div>
  590. <div class="slide-text">
  591. <p>My point is this: there’s a viable alternative to newsletters if we fill in all these gaps.</p>
  592. </div>
  593. </div>
  594. <div class="slide">
  595. <div class="slide-img">
  596. <img alt="Two men float in a balloon" src="https://d33wubrfki0l68.cloudfront.net/62fc73d6f32670ac7d4d0ad9be050123d329816f/c6aee/uploads/essays/on-newsletters/63-altitude-experiments.jpg" loading="lazy"/>
  597. </div>
  598. <div class="slide-text">
  599. <p>All I know is that the web today is not made for us. It’s no longer made for people to send charming bits of texts to strangers. </p>
  600. </div>
  601. </div>
  602. <div class="slide">
  603. <div class="slide-img">
  604. <img alt="A person in a very strange underwater suit" src="https://d33wubrfki0l68.cloudfront.net/e63d59939ea14f0af780cf611c505de0e7c2ff18/24dbb/uploads/essays/on-newsletters/64-klingerts-diving-machine.jpg" loading="lazy"/>
  605. </div>
  606. <div class="slide-text">
  607. <p>Instead, I see the web as this public good that’s been hijacked by companies trying to sell us mostly heartless junk.</p>
  608. </div>
  609. </div>
  610. <div class="slide">
  611. <div class="slide-img">
  612. <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/951638265d560f2edf87fbde65c885007fd67087/00fd1/uploads/essays/on-newsletters/65-scotch-soldiers.jpg" loading="lazy"/>
  613. </div>
  614. <div class="slide-text">
  615. <p>The web today is built for apps—and I think we need to take it back.</p>
  616. </div>
  617. </div>
  618. <div class="slide">
  619. <div class="slide-img">
  620. <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/9b1770c131eee0001fae9ed4daa918d6dc3efb0b/ddbd6/uploads/essays/on-newsletters/66-time-zone-watch.jpg" loading="lazy"/>
  621. </div>
  622. <div class="slide-text">
  623. <p>Because there are so many break-ups and coffee beans to write about! There are stories about clocks and Northumberland flower gardens waiting to be recorded, gift-wrapped, and delivered to us!</p>
  624. </div>
  625. </div>
  626. <div class="slide">
  627. <div class="slide-img">
  628. <img alt="A woman reads a letter" src="https://d33wubrfki0l68.cloudfront.net/8b43b25d450b70601565f2208f15e12e4e94441a/43b84/uploads/essays/on-newsletters/67-imogen.jpg" loading="lazy"/>
  629. </div>
  630. <div class="slide-text">
  631. <p>What really excites me about the sudden popularity of newsletters is that it shows us how people desperately want this kind of writing still. They value the web in the same way that I do.</p>
  632. </div>
  633. </div>
  634. <div class="slide">
  635. <div class="slide-img">
  636. <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/bbb7dc5e7515a24e1111fe1ba9398ef4744c44f2/8e05f/uploads/essays/on-newsletters/68-arm-glided.jpg" loading="lazy"/>
  637. </div>
  638. <div class="slide-text">
  639. <p>What this also shows me is that we haven’t given everything up to social networks yet. This makes me hopeful&hellip;</p>
  640. </div>
  641. </div>
  642. <div class="slide">
  643. <div class="slide-img">
  644. <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/3f8c5b9e0f6632d5a577439aef737517c9f45462/c73bc/uploads/essays/on-newsletters/69-electrical-devices.jpg" loading="lazy"/>
  645. </div>
  646. <div class="slide-text">
  647. <p>&hellip;because the web is still unfinished and there’s so much work left to do.</p>
  648. </div>
  649. </div>
  650. <div class="slide slide--empty"></div>
  651. <div class="slide">
  652. <div class="slide-img">
  653. <img alt="Making a toast at dinner" src="https://d33wubrfki0l68.cloudfront.net/5f7ab537a82a544e7e0476506c67f887d3f23add/ccb64/uploads/essays/on-newsletters/70-toast.jpg" loading="lazy"/>
  654. </div>
  655. <div class="slide-text">
  656. <p>Special thanks to <a href="https://www.oldbookillustrations.com/">Old Book Illustations</a> for all these lovely woodcuts and metal engravings. Also thanks to Lucy Bellwood, Celine Xu, Jez Burrows, Tori Hinn, Ali Burnett, Crick, and the Letterform Archive for the <a href="https://shop.letterformarchive.org/products/aluminia-fonts?variant=7014645497892">LfA Aluminia</a> type family.</p>
  657. </div>
  658. </div>
  659. <div class="slide">
  660. <div class="slide-img">
  661. <img alt="A man saying goodbye" src="https://d33wubrfki0l68.cloudfront.net/f42cfe7701cea3ef92ab5a172ac2e68b418ef8eb/f07fa/uploads/essays/on-newsletters/71-after-dark.jpg" loading="lazy"/>
  662. </div>
  663. <div class="slide-text">
  664. <p>Now go away.</p>
  665. </div>
  666. </div></p>
  667. </article>
  668. <hr>
  669. <footer>
  670. <p>
  671. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  672. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  673. </svg> Accueil</a> •
  674. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  675. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  676. </svg> RSS</a> •
  677. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  678. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  679. </svg> Pro</a> •
  680. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  681. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  682. </svg> Email</a> •
  683. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  684. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  685. </svg> Légal</abbr>
  686. </p>
  687. <template id="theme-selector">
  688. <form>
  689. <fieldset>
  690. <legend><svg class="icon icon-brightness-contrast">
  691. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  692. </svg> Thème</legend>
  693. <label>
  694. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  695. </label>
  696. <label>
  697. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  698. </label>
  699. <label>
  700. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  701. </label>
  702. </fieldset>
  703. </form>
  704. </template>
  705. </footer>
  706. <script>
  707. function loadThemeForm(templateName) {
  708. const themeSelectorTemplate = document.querySelector(templateName)
  709. const form = themeSelectorTemplate.content.firstElementChild
  710. themeSelectorTemplate.replaceWith(form)
  711. form.addEventListener('change', (e) => {
  712. const chosenColorScheme = e.target.value
  713. localStorage.setItem('theme', chosenColorScheme)
  714. toggleTheme(chosenColorScheme)
  715. })
  716. const selectedTheme = localStorage.getItem('theme')
  717. if (selectedTheme && selectedTheme !== 'undefined') {
  718. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  719. }
  720. }
  721. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  722. window.addEventListener('load', () => {
  723. let hasDarkRules = false
  724. for (const styleSheet of Array.from(document.styleSheets)) {
  725. let mediaRules = []
  726. for (const cssRule of styleSheet.cssRules) {
  727. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  728. continue
  729. }
  730. // WARNING: Safari does not have/supports `conditionText`.
  731. if (cssRule.conditionText) {
  732. if (cssRule.conditionText !== prefersColorSchemeDark) {
  733. continue
  734. }
  735. } else {
  736. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  737. continue
  738. }
  739. }
  740. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  741. }
  742. // WARNING: do not try to insert a Rule to a styleSheet you are
  743. // currently iterating on, otherwise the browser will be stuck
  744. // in a infinite loop…
  745. for (const mediaRule of mediaRules) {
  746. styleSheet.insertRule(mediaRule.cssText)
  747. hasDarkRules = true
  748. }
  749. }
  750. if (hasDarkRules) {
  751. loadThemeForm('#theme-selector')
  752. }
  753. })
  754. </script>
  755. </body>
  756. </html>