21 fichiers modifiés avec 4889 ajouts et 0 suppressions
+ 218
- 0
cache/2021/352d2966ecda7a68cbf97efbc691d017/index.html
Voir le fichier
| @@ -0,0 +1,218 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Facebook’s Unknowable Megascale (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://daringfireball.net/2020/12/facebook_unknowable_megascale"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>Facebook’s Unknowable Megascale</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://daringfireball.net/2020/12/facebook_unknowable_megascale" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>Adrienne LaFrance, writing for The Atlantic, “<a href="https://www.theatlantic.com/technology/archive/2020/12/facebook-doomsday-machine/617384/">Facebook Is a Doomsday Machine</a>”:</p> | |||
| <blockquote> | |||
| <p>People tend to complain about Facebook as if something recently | |||
| curdled. There’s a notion that the social web was once useful, or | |||
| at least that it could have been good, if only we had pulled a few | |||
| levers: some moderation and fact-checking here, a bit of | |||
| regulation there, perhaps a federal antitrust lawsuit. But that’s | |||
| far too sunny and shortsighted a view. Today’s social networks, | |||
| Facebook chief among them, were built to encourage the things that | |||
| make them so harmful. It is in their very architecture.</p> | |||
| <p>I’ve been thinking for years about what it would take to make the | |||
| social web magical in all the right ways — less extreme, less | |||
| toxic, more true — and I realized only recently that I’ve been | |||
| thinking far too narrowly about the problem. I’ve long wanted Mark | |||
| Zuckerberg to admit that <a href="https://twitter.com/AdrienneLaF/status/910493155421822976">Facebook is a media company</a>, to take | |||
| responsibility for the informational environment he created in the | |||
| same way that the editor of a magazine would. (I pressed him on | |||
| this <a href="https://www.theatlantic.com/technology/archive/2018/05/mark-zuckerberg-doesnt-understand-journalism/559424/">once</a> and he laughed.) In recent years, as Facebook’s | |||
| mistakes have compounded and its reputation has tanked, it has | |||
| become clear that negligence is only part of the problem. No one, | |||
| not even Mark Zuckerberg, can control the product he made. I’ve | |||
| come to realize that Facebook is not a media company. It’s a | |||
| Doomsday Machine.</p> | |||
| </blockquote> | |||
| <p>This is a very compelling and cogent essay, and I largely agree with LaFrance. But here I disagree: Zuckerberg clearly <em>can</em> control it. There are dials on the algorithms that control what users see in their feeds. What can’t be controlled is what happens as Facebook pursues <em>engagement</em>. What keeps too many people hooked to Facebook is exactly the sort of worldview-warping toxic content that is damaging society worldwide. To some degree Facebook’s addictiveness and toxicity are directly correlated. This isn’t conjecture or speculation, <a href="https://daringfireball.net/linked/2020/11/24/facebook-sociopaths">we have proof</a>. Plus, we have eyes: in some ways the societal harm from Facebook is as easy for anyone to see as the respiratory problems caused by smoking. I honestly believe Zuckerberg would prefer to reduce the toxicity of Facebook’s social media platforms, but not enough to do so if it reduces Facebook’s addictiveness. Again, likewise, I’m sure tobacco company executives would have loved to invent tobacco products that didn’t cause cancer.</p> | |||
| <p>A key insight from LaFrance:</p> | |||
| <blockquote> | |||
| <p>The website that’s perhaps best known for encouraging mass | |||
| violence is the image board 4chan — which was followed by 8chan, | |||
| which then became 8kun. These boards are infamous for being the | |||
| sites where multiple mass-shooting suspects have shared manifestos | |||
| before homicide sprees. The few people who are willing to defend | |||
| these sites unconditionally do so from a position of free-speech | |||
| absolutism. That argument is worthy of consideration. But there’s | |||
| something architectural about the site that merits attention, too: | |||
| There are no algorithms on 8kun, only a community of users who | |||
| post what they want. People use 8kun to publish abhorrent ideas, | |||
| but at least the community isn’t pretending to be something it’s | |||
| not. The biggest social platforms claim to be similarly neutral | |||
| and pro–free speech when in fact no two people see the same feed. | |||
| Algorithmically tweaked environments feed on user data and | |||
| manipulate user experience, and not ultimately for the purpose of | |||
| serving the user. Evidence of real-world violence can be easily | |||
| traced back to both Facebook and 8kun. But 8kun doesn’t manipulate | |||
| its users or the informational environment they’re in. Both sites | |||
| are harmful. But Facebook might actually be worse for humanity.</p> | |||
| </blockquote> | |||
| <p>This is <em>the</em> problem we, collectively, have not grasped. How do we regulate — via the law and/or social norms — a form of mass media with amorphous content? When you make a movie or write a book or publish a magazine, the speech that matters is the content of the movie/book/magazine. When you post something to Facebook, the “speech” that matters most isn’t the content of the post but the algorithm that determines who sees it and how. 3 billion users effectively means there are 3 billion different “Facebooks”. <em>That’s</em> the “megascale” which LaFrance equates to the megadeaths of a Strangelovian doomsday device. </p> | |||
| <p>A mere “website” — say, Wikipedia — that reaches an audience of billions is like the surface of an ocean: enormously expansive, but visible. Facebook is like the <em>volume</em> of an ocean: not merely massive, but unknowable.</p> | |||
| <p>We instinctively think that 8kun is “worse” than Facebook because its users are free to post the worst content imaginable, and because they are terribly imaginative, do. It feels like 8kun must be “worse” because its <em>content</em> is worse — what is permitted, and what actually is posted. But Facebook is in fact far worse, because by its nature we, as a whole, can’t even see what “Facebook” is because everyone’s feed is unique. 8kun, at least, is a knowable product. You could print it out and say, “Here is what 8kun was on December 29, 2020.” How could you ever say what Facebook is at any given <em>moment</em>, let alone for a given day, let alone as an omnipresent daily presence in <em>billions</em> of people’s lives?</p> | |||
| <p>A question I’ve pondered these last few post-election weeks: What would have happened if Mark Zuckerberg were all-in on Trump? What if instead of flagging and tamping down on Trump’s utterly false but profoundly destructive “election fraud” anti-democratic power grab, Facebook had done the opposite and pushed the narrative Trump wants? What if Trump owned Facebook? What if Zuckerberg ran for president, lost, and pursued a similar “turn your supporters against democracy” strategy?</p> | |||
| <p>Is there any reason to believe that Facebook chose the pre- and post-election course it did because it was the right thing to do — good for the United States, good for the world, good for the principles of democracy and truth — rather than the result of a cold calculus that determined it was the optimal way to keep the most people the most engaged with Facebook?</p> | |||
| <p>I, for one, believe Facebook charted a course around this election primarily with Facebook’s continuing addictiveness in mind. But I <em>know</em> that whatever the reasons, they were ultimately determined by one person. That’s quite a thing.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 68
- 0
cache/2021/352d2966ecda7a68cbf97efbc691d017/index.md
Voir le fichier
| @@ -0,0 +1,68 @@ | |||
| title: Facebook’s Unknowable Megascale | |||
| url: https://daringfireball.net/2020/12/facebook_unknowable_megascale | |||
| hash_url: 352d2966ecda7a68cbf97efbc691d017 | |||
| <p>Adrienne LaFrance, writing for The Atlantic, “<a href="https://www.theatlantic.com/technology/archive/2020/12/facebook-doomsday-machine/617384/">Facebook Is a Doomsday Machine</a>”:</p> | |||
| <blockquote> | |||
| <p>People tend to complain about Facebook as if something recently | |||
| curdled. There’s a notion that the social web was once useful, or | |||
| at least that it could have been good, if only we had pulled a few | |||
| levers: some moderation and fact-checking here, a bit of | |||
| regulation there, perhaps a federal antitrust lawsuit. But that’s | |||
| far too sunny and shortsighted a view. Today’s social networks, | |||
| Facebook chief among them, were built to encourage the things that | |||
| make them so harmful. It is in their very architecture.</p> | |||
| <p>I’ve been thinking for years about what it would take to make the | |||
| social web magical in all the right ways — less extreme, less | |||
| toxic, more true — and I realized only recently that I’ve been | |||
| thinking far too narrowly about the problem. I’ve long wanted Mark | |||
| Zuckerberg to admit that <a href="https://twitter.com/AdrienneLaF/status/910493155421822976">Facebook is a media company</a>, to take | |||
| responsibility for the informational environment he created in the | |||
| same way that the editor of a magazine would. (I pressed him on | |||
| this <a href="https://www.theatlantic.com/technology/archive/2018/05/mark-zuckerberg-doesnt-understand-journalism/559424/">once</a> and he laughed.) In recent years, as Facebook’s | |||
| mistakes have compounded and its reputation has tanked, it has | |||
| become clear that negligence is only part of the problem. No one, | |||
| not even Mark Zuckerberg, can control the product he made. I’ve | |||
| come to realize that Facebook is not a media company. It’s a | |||
| Doomsday Machine.</p> | |||
| </blockquote> | |||
| <p>This is a very compelling and cogent essay, and I largely agree with LaFrance. But here I disagree: Zuckerberg clearly <em>can</em> control it. There are dials on the algorithms that control what users see in their feeds. What can’t be controlled is what happens as Facebook pursues <em>engagement</em>. What keeps too many people hooked to Facebook is exactly the sort of worldview-warping toxic content that is damaging society worldwide. To some degree Facebook’s addictiveness and toxicity are directly correlated. This isn’t conjecture or speculation, <a href="https://daringfireball.net/linked/2020/11/24/facebook-sociopaths">we have proof</a>. Plus, we have eyes: in some ways the societal harm from Facebook is as easy for anyone to see as the respiratory problems caused by smoking. I honestly believe Zuckerberg would prefer to reduce the toxicity of Facebook’s social media platforms, but not enough to do so if it reduces Facebook’s addictiveness. Again, likewise, I’m sure tobacco company executives would have loved to invent tobacco products that didn’t cause cancer.</p> | |||
| <p>A key insight from LaFrance:</p> | |||
| <blockquote> | |||
| <p>The website that’s perhaps best known for encouraging mass | |||
| violence is the image board 4chan — which was followed by 8chan, | |||
| which then became 8kun. These boards are infamous for being the | |||
| sites where multiple mass-shooting suspects have shared manifestos | |||
| before homicide sprees. The few people who are willing to defend | |||
| these sites unconditionally do so from a position of free-speech | |||
| absolutism. That argument is worthy of consideration. But there’s | |||
| something architectural about the site that merits attention, too: | |||
| There are no algorithms on 8kun, only a community of users who | |||
| post what they want. People use 8kun to publish abhorrent ideas, | |||
| but at least the community isn’t pretending to be something it’s | |||
| not. The biggest social platforms claim to be similarly neutral | |||
| and pro–free speech when in fact no two people see the same feed. | |||
| Algorithmically tweaked environments feed on user data and | |||
| manipulate user experience, and not ultimately for the purpose of | |||
| serving the user. Evidence of real-world violence can be easily | |||
| traced back to both Facebook and 8kun. But 8kun doesn’t manipulate | |||
| its users or the informational environment they’re in. Both sites | |||
| are harmful. But Facebook might actually be worse for humanity.</p> | |||
| </blockquote> | |||
| <p>This is <em>the</em> problem we, collectively, have not grasped. How do we regulate — via the law and/or social norms — a form of mass media with amorphous content? When you make a movie or write a book or publish a magazine, the speech that matters is the content of the movie/book/magazine. When you post something to Facebook, the “speech” that matters most isn’t the content of the post but the algorithm that determines who sees it and how. 3 billion users effectively means there are 3 billion different “Facebooks”. <em>That’s</em> the “megascale” which LaFrance equates to the megadeaths of a Strangelovian doomsday device. </p> | |||
| <p>A mere “website” — say, Wikipedia — that reaches an audience of billions is like the surface of an ocean: enormously expansive, but visible. Facebook is like the <em>volume</em> of an ocean: not merely massive, but unknowable.</p> | |||
| <p>We instinctively think that 8kun is “worse” than Facebook because its users are free to post the worst content imaginable, and because they are terribly imaginative, do. It feels like 8kun must be “worse” because its <em>content</em> is worse — what is permitted, and what actually is posted. But Facebook is in fact far worse, because by its nature we, as a whole, can’t even see what “Facebook” is because everyone’s feed is unique. 8kun, at least, is a knowable product. You could print it out and say, “Here is what 8kun was on December 29, 2020.” How could you ever say what Facebook is at any given <em>moment</em>, let alone for a given day, let alone as an omnipresent daily presence in <em>billions</em> of people’s lives?</p> | |||
| <p>A question I’ve pondered these last few post-election weeks: What would have happened if Mark Zuckerberg were all-in on Trump? What if instead of flagging and tamping down on Trump’s utterly false but profoundly destructive “election fraud” anti-democratic power grab, Facebook had done the opposite and pushed the narrative Trump wants? What if Trump owned Facebook? What if Zuckerberg ran for president, lost, and pursued a similar “turn your supporters against democracy” strategy?</p> | |||
| <p>Is there any reason to believe that Facebook chose the pre- and post-election course it did because it was the right thing to do — good for the United States, good for the world, good for the principles of democracy and truth — rather than the result of a cold calculus that determined it was the optimal way to keep the most people the most engaged with Facebook?</p> | |||
| <p>I, for one, believe Facebook charted a course around this election primarily with Facebook’s continuing addictiveness in mind. But I <em>know</em> that whatever the reasons, they were ultimately determined by one person. That’s quite a thing.</p> | |||
+ 173
- 0
cache/2021/3d37e77a601b6dd7043bbb17a4a2d199/index.html
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier
+ 39
- 0
cache/2021/3d37e77a601b6dd7043bbb17a4a2d199/index.md
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier
+ 205
- 0
cache/2021/5f4b0220be54d83f711a78b356c73a68/index.html
Voir le fichier
| @@ -0,0 +1,205 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Carnets Web de La Grange (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.la-grange.net/2021/01/05/newsletter"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>Carnets Web de La Grange</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://www.la-grange.net/2021/01/05/newsletter" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <figure> | |||
| <img src="https://www.la-grange.net/2021/01/02/0071-garage.jpg" alt="objets dans un garage"> | |||
| <figcaption>Tsujido, Japon, 2 janvier 2021</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>parler de patrimoine, c'est considérer chaque génération comme l'usufruitière d'un bien dont ell a hérité, avec obligation de transmettre quelque chose d'équivalent afin de garantir les conditions de vie de ses successeurs.<br> | |||
| — Penser et agir avec la nature - Catherine Larrère, Raphaël Larrère, urn:isbn:978-2-3480-3627-9</p> | |||
| </blockquote> | |||
| <p><a href="https://www.robinrendle.com/">Robin Rendle</a> a écrit un <a href="https://www.robinrendle.com/essays/newsletters">essai à propos des newsletters</a>. Depuis quelques temps, de plus en plus d'auteurs se tournent vers la newsletter pour communiquer avec une communauté. Je ne suis abonné qu'à une seule newsletter : <a href="https://mailbot2000.craigmod.com/t/r-l-juhkydn-htxuklljt-t/">Roden</a> de <a href="https://craigmod.com/">Craig Mod</a>.</p> | |||
| <p>Robin explique que l'attraction pour les newsletters tient à trois paramètres :</p> | |||
| <ol> | |||
| <li>Elles sont faciles à publier</li> | |||
| <li>Elles arrivent directement dans la boite aux lettes</li> | |||
| <li>Les auteurs peuvent être payés.</li> | |||
| </ol> | |||
| <p>Alors pourquoi cela fonctionne par mail et cela ne fonctionne pas sur le Web. Robin pense que la technologie est là mais n'est pas déployée : flux <a href="https://www.rssboard.org/rss-specification">RSS</a> ou <a href="https://tools.ietf.org/html/rfc4287">Atom</a> dans le navigateur (Firefox a récemment enlevé le détecteur RSS plutôt que de l'améliorer, malheureusement) et <a href="https://w3c.github.io/payment-request/">W3C Payment Request API</a>. Certes cela peut aider. J'utilise NetNewsWire pour mon lecteur de flux et ne pas avoir à visiter les sites. C'est un système de pull.</p> | |||
| <p>L'email est un système de push et cela change beaucoup de choses. Il y a une notion d'intimité qui est importante et qui définit un plus grand contrôle. La newsletter n'atteint pas potentiellement tout le monde, uniquement ceux qui ont voulu s'inscrire (et potentiellement payer). Créer un site Web intime, c'est à dire gérer le contrôle d'accès est plus difficile.</p> | |||
| <table class="tg"> <thead> <tr> <th class="tg-0pky">Type</th> <th class="tg-c3ow">Auteur</th> <th class="tg-c3ow">Vers</th> <th class="tg-c3ow">Lecteurs</th> </tr> </thead> <tbody> <tr> <td class="tg-0lax">Web</td> <td class="tg-baqh">One</td> <td class="tg-baqh">⬅︎<br></td> <td class="tg-baqh">Tout le monde</td> </tr> <tr> <td class="tg-0pky">Newsletter</td> <td class="tg-c3ow">One<br></td> <td class="tg-c3ow">⮕</td> <td class="tg-c3ow">Quelques personnes</td> </tr> </tbody> </table> | |||
| <p>Je pense que toutes les pièces sont là pour en effet permettre un système similaire aux newsletters d'exister mais en effet il faut que les navigateurs et les propositions de services est un scénario simple pour le micropaiement et le contrôle d'accès.</p> | |||
| <p>Peut-être un système mélangeant Payment Request API avec « Atom as notifications. » Mais les notifications ne gèrent pas l'archivage de celles-ci, ni le navigateur, on en revient à <a href="https://www.otsukare.info/2020/07/07/browser-tabs-time-machine">Browser Tabs Time Machine</a>.</p> | |||
| <h2>sur le bord du chemin</h2> | |||
| <ul> | |||
| <li><p>J'ai travaillé récemment sur ce <a href="https://bugs.python.org/issue41748">bug</a> (la <a href="https://github.com/python/cpython/pull/24072">PR</a> avance bien) de la librairie <a href="https://docs.python.org/3/library/html.parser.html">HTMLParser</a>.</p> | |||
| <pre><code> data:text/html,<!doctype html><div class=bar ,baz=asd>text</div> | |||
| </code></pre> | |||
| <p>était sérializé par les navigateurs en</p> | |||
| <pre><code> <div class="bar" ,baz="asd">text</div> | |||
| </code></pre> | |||
| <p>alors que HTMLParser allait en erreur. Mais j'ai trouvé un autre bug pendant la discussion.</p> | |||
| <pre><code> data:text/html,<!doctype html><div class="bar" class="foo">text</div> | |||
| </code></pre> | |||
| <p>est sérializé par les navigateurs en</p> | |||
| <pre><code> <div class="bar">text</div> | |||
| </code></pre> | |||
| <p>mais HTMLParser donne:</p> | |||
| <pre><code> <div class="bar" class="foo">text</div> | |||
| </code></pre> | |||
| <p>J'ai ouvert un <a href="https://bugs.python.org/issue42821">nouveau bug sur le projet</a>. Il y a d'<a href="https://bugs.python.org/issue?%40columns=id%2Cactivity%2Ctitle%2Ccreator%2Cassignee%2Cstatus%2Ctype&%40sort=-activity&%40filter=status&%40action=searchid&ignore=file%3Acontent&%40search_text=htmlparser&submit=search&status=-1%2C1%2C3">autres bugs intéressants pour HTMLParser</a>. Probablement aussi, le HTMLParser est plus un tokenizer qu'un parser html.</p> | |||
| </li> | |||
| </ul> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 46
- 0
cache/2021/5f4b0220be54d83f711a78b356c73a68/index.md
Voir le fichier
| @@ -0,0 +1,46 @@ | |||
| title: Carnets Web de La Grange | |||
| url: https://www.la-grange.net/2021/01/05/newsletter | |||
| hash_url: 5f4b0220be54d83f711a78b356c73a68 | |||
| <figure> | |||
| <img src="https://www.la-grange.net/2021/01/02/0071-garage.jpg" alt="objets dans un garage"> | |||
| <figcaption>Tsujido, Japon, 2 janvier 2021</figcaption> | |||
| </figure> | |||
| <blockquote> | |||
| <p>parler de patrimoine, c'est considérer chaque génération comme l'usufruitière d'un bien dont ell a hérité, avec obligation de transmettre quelque chose d'équivalent afin de garantir les conditions de vie de ses successeurs.<br> | |||
| — Penser et agir avec la nature - Catherine Larrère, Raphaël Larrère, urn:isbn:978-2-3480-3627-9</p> | |||
| </blockquote> | |||
| <p><a href="https://www.robinrendle.com/">Robin Rendle</a> a écrit un <a href="https://www.robinrendle.com/essays/newsletters">essai à propos des newsletters</a>. Depuis quelques temps, de plus en plus d'auteurs se tournent vers la newsletter pour communiquer avec une communauté. Je ne suis abonné qu'à une seule newsletter : <a href="https://mailbot2000.craigmod.com/t/r-l-juhkydn-htxuklljt-t/">Roden</a> de <a href="https://craigmod.com/">Craig Mod</a>.</p> | |||
| <p>Robin explique que l'attraction pour les newsletters tient à trois paramètres :</p> | |||
| <ol> | |||
| <li>Elles sont faciles à publier</li> | |||
| <li>Elles arrivent directement dans la boite aux lettes</li> | |||
| <li>Les auteurs peuvent être payés.</li> | |||
| </ol> | |||
| <p>Alors pourquoi cela fonctionne par mail et cela ne fonctionne pas sur le Web. Robin pense que la technologie est là mais n'est pas déployée : flux <a href="https://www.rssboard.org/rss-specification">RSS</a> ou <a href="https://tools.ietf.org/html/rfc4287">Atom</a> dans le navigateur (Firefox a récemment enlevé le détecteur RSS plutôt que de l'améliorer, malheureusement) et <a href="https://w3c.github.io/payment-request/">W3C Payment Request API</a>. Certes cela peut aider. J'utilise NetNewsWire pour mon lecteur de flux et ne pas avoir à visiter les sites. C'est un système de pull.</p> | |||
| <p>L'email est un système de push et cela change beaucoup de choses. Il y a une notion d'intimité qui est importante et qui définit un plus grand contrôle. La newsletter n'atteint pas potentiellement tout le monde, uniquement ceux qui ont voulu s'inscrire (et potentiellement payer). Créer un site Web intime, c'est à dire gérer le contrôle d'accès est plus difficile.</p> | |||
| <table class="tg"> <thead> <tr> <th class="tg-0pky">Type</th> <th class="tg-c3ow">Auteur</th> <th class="tg-c3ow">Vers</th> <th class="tg-c3ow">Lecteurs</th> </tr> </thead> <tbody> <tr> <td class="tg-0lax">Web</td> <td class="tg-baqh">One</td> <td class="tg-baqh">⬅︎<br></td> <td class="tg-baqh">Tout le monde</td> </tr> <tr> <td class="tg-0pky">Newsletter</td> <td class="tg-c3ow">One<br></td> <td class="tg-c3ow">⮕</td> <td class="tg-c3ow">Quelques personnes</td> </tr> </tbody> </table> | |||
| <p>Je pense que toutes les pièces sont là pour en effet permettre un système similaire aux newsletters d'exister mais en effet il faut que les navigateurs et les propositions de services est un scénario simple pour le micropaiement et le contrôle d'accès.</p> | |||
| <p>Peut-être un système mélangeant Payment Request API avec « Atom as notifications. » Mais les notifications ne gèrent pas l'archivage de celles-ci, ni le navigateur, on en revient à <a href="https://www.otsukare.info/2020/07/07/browser-tabs-time-machine">Browser Tabs Time Machine</a>.</p> | |||
| <h2>sur le bord du chemin</h2> | |||
| <ul> | |||
| <li><p>J'ai travaillé récemment sur ce <a href="https://bugs.python.org/issue41748">bug</a> (la <a href="https://github.com/python/cpython/pull/24072">PR</a> avance bien) de la librairie <a href="https://docs.python.org/3/library/html.parser.html">HTMLParser</a>.</p> | |||
| <pre><code> data:text/html,<!doctype html><div class=bar ,baz=asd>text</div> | |||
| </code></pre> | |||
| <p>était sérializé par les navigateurs en</p> | |||
| <pre><code> <div class="bar" ,baz="asd">text</div> | |||
| </code></pre> | |||
| <p>alors que HTMLParser allait en erreur. Mais j'ai trouvé un autre bug pendant la discussion.</p> | |||
| <pre><code> data:text/html,<!doctype html><div class="bar" class="foo">text</div> | |||
| </code></pre> | |||
| <p>est sérializé par les navigateurs en</p> | |||
| <pre><code> <div class="bar">text</div> | |||
| </code></pre> | |||
| <p>mais HTMLParser donne:</p> | |||
| <pre><code> <div class="bar" class="foo">text</div> | |||
| </code></pre> | |||
| <p>J'ai ouvert un <a href="https://bugs.python.org/issue42821">nouveau bug sur le projet</a>. Il y a d'<a href="https://bugs.python.org/issue?%40columns=id%2Cactivity%2Ctitle%2Ccreator%2Cassignee%2Cstatus%2Ctype&%40sort=-activity&%40filter=status&%40action=searchid&ignore=file%3Acontent&%40search_text=htmlparser&submit=search&status=-1%2C1%2C3">autres bugs intéressants pour HTMLParser</a>. Probablement aussi, le HTMLParser est plus un tokenizer qu'un parser html.</p> | |||
| </li> | |||
| </ul> | |||
+ 702
- 0
cache/2021/66ef8e7fa0942fc975723f7df4d932e9/index.html
Voir le fichier
| @@ -0,0 +1,702 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://berthub.eu/articles/posts/reverse-engineering-source-code-of-the-biontech-pfizer-vaccine/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://berthub.eu/articles/posts/reverse-engineering-source-code-of-the-biontech-pfizer-vaccine/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>Welcome! In this post, we’ll be taking a character-by-character look at the | |||
| source code of the BioNTech/Pfizer SARS-CoV-2 mRNA vaccine.</p> | |||
| <blockquote> | |||
| <p><em>I want to thank the large cast of people who spent time previewing this | |||
| article for legibility and correctness. All mistakes remain mine though, | |||
| but I would love to hear about them quickly at bert@hubertnet.nl or | |||
| <a href="https://twitter.com/PowerDNS_Bert" target="_blank">@PowerDNS_Bert</a></em></p> | |||
| </blockquote> | |||
| <p>Now, these words may be somewhat jarring - the vaccine is a liquid that gets | |||
| injected in your arm. How can we talk about source code?</p> | |||
| <p>This is a good question, so let’s start off with a small part of the very | |||
| source code of the BioNTech/Pfizer vaccine, also known as | |||
| <a href="https://en.wikipedia.org/wiki/Tozinameran" target="_blank">BNT162b2</a>, also | |||
| known as Tozinameran <a href="https://twitter.com/PowerDNS_Bert/status/1342109138965422083" target="_blank">also known as | |||
| Comirnaty</a>.</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/bnt162b2.png" alt="First 500 characters of the BNT162b2 mRNA. Source: World Health Organization"> <figcaption> | |||
| <p>First 500 characters of the BNT162b2 mRNA. Source: <a href="https://mednet-communities.net/inn/db/media/docs/11889.doc" target="_blank">World Health Organization</a></p> | |||
| </figcaption> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <p>The BNT162b2 mRNA vaccine has this digital code at its heart. It is 4284 | |||
| characters long, so it would fit in a bunch of tweets. At the very | |||
| beginning of the vaccine production process, someone uploaded this code to a | |||
| DNA printer (yes), which then converted the bytes on disk to actual DNA | |||
| molecules.</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/bioxp-3200.jpg" alt="A Codex DNA BioXp 3200 DNA printer"> <figcaption> | |||
| <p>A <a href="https://codexdna.com/products/bioxp-system/" target="_blank">Codex DNA</a> BioXp 3200 DNA printer</p> | |||
| </figcaption> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <p>Out of such a machine come tiny amounts of DNA, which after a lot of | |||
| biological and chemical processing end up as RNA (more about which later) in | |||
| the vaccine vial. A 30 microgram dose turns out to actually contain 30 | |||
| micrograms of RNA. In addition, there is a clever lipid (fatty) packaging | |||
| system that gets the mRNA into our cells.</p> | |||
| <p>RNA is the volatile ‘working memory’ version of DNA. DNA is like the flash | |||
| drive storage of biology. DNA is very durable, internally redundant and | |||
| very reliable. But much like computers do not execute code directly from a | |||
| flash drive, before something happens, code gets copied to a faster, | |||
| more versatile yet far more fragile system.</p> | |||
| <p>For computers, this is RAM, for biology it is RNA. The resemblance is | |||
| striking. Unlike flash memory, RAM degrades very quickly unless lovingly | |||
| tended to. The reason the Pfizer/BioNTech mRNA vaccine must be stored in the | |||
| deepest of deep freezers is the same: RNA is a fragile flower.</p> | |||
| <p>Each RNA character weighs on the order of 0.53·10â»Â²Â¹ grams, meaning | |||
| there are around 6·10¹ⶠcharacters in a single 30 microgram vaccine dose. | |||
| Expressed in bytes, this is around 14 petabytes, although it must be said | |||
| this consists of around <a href="https://docs.google.com/spreadsheets/d/1vc6p9IXQVRpVQntcI1tCdSMLNDuT8fl8rags0gDxMZA/edit?usp=sharing" target="_blank">13,000 billion | |||
| repetitions</a> of the same 4284 | |||
| characters. The actual informational content of the vaccine is just over a | |||
| kilobyte. <a href="https://www.ncbi.nlm.nih.gov/projects/sviewer/?id=NC_045512&tracks=%5Bkey:sequence_track,name:Sequence,display_name:Sequence,id:STD649220238,annots:Sequence,ShowLabel:false,ColorGaps:false,shown:true,order:1%5D%5Bkey:gene_model_track,name:Genes,display_name:Genes,id:STD3194982005,annots:Unnamed,Options:ShowAllButGenes,CDSProductFeats:true,NtRuler:true,AaRuler:true,HighlightMode:2,ShowLabel:true,shown:true,order:9%5D&v=1:29903&c=null&select=null&slim=0" target="_blank">SARS-CoV-2 itself</a> weighs in at around 7.5 kilobytes.</p> | |||
| <blockquote> | |||
| <p>Update: In the original post these numbers were off. <a href="https://docs.google.com/spreadsheets/d/1vc6p9IXQVRpVQntcI1tCdSMLNDuT8fl8rags0gDxMZA/edit?usp=sharing" target="_blank">Here is a | |||
| spreadsheet</a> | |||
| with the correct calculations.</p> | |||
| </blockquote> | |||
| <h2 id="the-briefest-bit-of-background">The briefest bit of background</h2> | |||
| <p>DNA is a digital code. Unlike computers, which use 0 and 1, life uses A, C, G | |||
| and U/T (the ‘nucleotides’, ‘nucleosides’ or ‘bases’).</p> | |||
| <p>In computers we store the 0 and 1 as the presence or absence of a charge, or | |||
| as a current, as a magnetic transition, or as a voltage, or as a modulation | |||
| of a signal, or as a change in reflectivity. Or in short, the 0 and 1 are | |||
| not some kind of abstract concept - they live as electrons and in many other | |||
| physical embodiments.</p> | |||
| <p>In nature, A, C, G and U/T are molecules, stored as chains in DNA (or RNA).</p> | |||
| <p>In computers, we group 8 bits into a byte, and the byte is the typical unit | |||
| of data being processed.</p> | |||
| <p>Nature groups 3 nucleotides into a codon, and this codon is the typical unit | |||
| of processing. A codon contains 6 bits of information (2 bits per DNA | |||
| character, 3 characters = 6 bits. This means 2ⶠ= 64 different codon values).</p> | |||
| <p>Pretty digital so far. When in doubt, <a href="https://mednet-communities.net/inn/db/media/docs/11889.doc" target="_blank">head to the WHO | |||
| document</a> with the | |||
| digital code to see for yourself.</p> | |||
| <blockquote> | |||
| <p><em>Some further reading is <a href="https://berthub.eu/articles/posts/what-is-life/" target="_blank">available | |||
| here</a> - this link (‘What | |||
| is life’) might help make sense of the rest of this page. Or, if you like | |||
| video, I have <a href="https://berthub.eu/dna" target="_blank">two hours for you</a>.</em></p> | |||
| </blockquote> | |||
| <h2 id="so-what-does-that-code-do">So what does that code DO?</h2> | |||
| <p>The idea of a vaccine is to teach our immune system how to fight a pathogen, | |||
| without us actually getting ill. Historically this has been done by | |||
| injecting a weakened or incapacitated (attenuated) virus, plus an ‘adjuvant’ | |||
| to scare our immune system into action. This was a decidedly analogue | |||
| technique involving billions of eggs (or insects). It also required a lot | |||
| of luck and loads of time. Sometimes a different (unrelated) virus was also | |||
| used.</p> | |||
| <p>An mRNA vaccine achieves the same thing (‘educate our immune system’) but in | |||
| a laser like way. And I mean this in both senses - very narrow but also | |||
| very powerful.</p> | |||
| <p>So here is how it works. The injection contains volatile genetic material | |||
| that describes the famous SARS-CoV-2 ‘Spike’ protein. Through clever | |||
| chemical means, the vaccine manages to get this genetic material into some of | |||
| our cells.</p> | |||
| <p>These then dutifully start producing SARS-CoV-2 Spike proteins in large | |||
| enough quantities that our immune system springs into action. Confronted | |||
| with Spike proteins, and (importantly) tell-tale signs that cells have been | |||
| taken over, our immune system develops a powerful response against multiple | |||
| aspects of the Spike protein AND the production process.</p> | |||
| <p>And this is what gets us to the 95% efficient vaccine.</p> | |||
| <h2 id="the-source-code">The source code!</h2> | |||
| <p><a href="https://youtu.be/jp0opnxQ4rY?t=8" target="_blank">Let’s start at the very beginning, a very good place | |||
| to start</a>. The WHO document has this | |||
| helpful picture:</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/vaccine-toc.png"> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <p>This is a sort of table of contents. We’ll start with the ‘cap’, actually | |||
| depicted as a little hat.</p> | |||
| <p>Much like you can’t just plonk opcodes in a file on a computer and run it, | |||
| the biological operating system requires headers, has linkers and things | |||
| like calling conventions.</p> | |||
| <p>The code of the vaccine starts with the following two nucleotides:</p> | |||
| <pre><code>GA | |||
| </code></pre> | |||
| <p>This can be compared very much to every <a href="https://en.wikipedia.org/wiki/DOS_MZ_executable" target="_blank">DOS and Windows executable starting | |||
| with MZ</a>, or UNIX scripts starting with | |||
| <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)" target="_blank"><code>#!</code></a>. In both life and | |||
| operating systems, these two characters are not executed in any way. But | |||
| they have to be there because otherwise nothing happens.</p> | |||
| <p>The mRNA ‘cap’ <a href="https://en.wikipedia.org/wiki/Five-prime_cap#Function" target="_blank">has a number of | |||
| functions</a>. For one, it marks code as coming | |||
| from the nucleus. In our case of course it doesn’t, our code comes from a | |||
| vaccination. But we don’t need to tell the cell that. The cap makes our code | |||
| look legit, which protects it from destruction.</p> | |||
| <p>The initial two <code>GA</code> nucleotides are also chemically slightly different from | |||
| the rest of the RNA. In this sense, the <code>GA</code> has some out-of-band | |||
| signaling on it.</p> | |||
| <h2 id="the-five-prime-untranslated-region">The “five-prime untranslated region”</h2> | |||
| <p>Some lingo here. RNA molecules can only be read in one direction. | |||
| Confusingly, the part where the reading begins is called the 5’ or | |||
| ‘five-prime’. The reading stops at the 3’ or three-prime end.</p> | |||
| <p>Life consists of proteins (or things made by proteins). And these proteins | |||
| are described in RNA. When RNA gets converted into proteins, this is called | |||
| translation.</p> | |||
| <p>Here we have the 5’ untranslated region (‘UTR’), so this bit does not end up | |||
| in the protein:</p> | |||
| <pre><code>GAAΨAAACΨAGΨAΨΨCΨΨCΨGGΨCCCCACAGACΨCAGAGAGAACCCGCCACC | |||
| </code></pre> | |||
| <p>Here we encounter our first surprise. The normal RNA characters are A, C, G | |||
| and U. U is also known as ’T’ in DNA. But here we find a Ψ, what is going | |||
| on?</p> | |||
| <p>This is one of the exceptionally clever bits about the vaccine. Our body | |||
| runs a powerful antivirus system (“the original one”). For this reason, | |||
| cells are extremely unenthusiastic about foreign RNA and try very hard to | |||
| destroy it before it does anything.</p> | |||
| <p>This is somewhat of a problem for our vaccine - it needs to sneak past our | |||
| immune system. Over many years of experimentation, it was found that if the | |||
| U in RNA is replaced by a slightly modified molecule, our immune system | |||
| loses interest. For real.</p> | |||
| <p>So in the BioNTech/Pfizer vaccine, every U has been replaced by | |||
| 1-methyl-3’-pseudouridylyl, denoted by Ψ. The really clever bit is that | |||
| although this replacement Ψ placates (calms) our immune system, it is | |||
| accepted as a normal U by relevant parts of the cell.</p> | |||
| <p>In computer security we also know this trick - it sometimes is possible to | |||
| transmit a slightly corrupted version of a message that confuses firewalls and | |||
| security solutions, but that is still accepted by the backend servers - | |||
| which can then get hacked.</p> | |||
| <p>We are now reaping the benefits of fundamental scientific research performed | |||
| in the past. The | |||
| <a href="https://twitter.com/PennMedicine/status/1341766354232365059" target="_blank">discoverers</a> | |||
| of this Ψ technique had to fight to get | |||
| <a href="https://www.statnews.com/2020/11/10/the-story-of-mrna-how-a-once-dismissed-idea-became-a-leading-technology-in-the-covid-vaccine-race/" target="_blank">their</a> | |||
| work funded and then accepted. We should all be very grateful, and I am sure | |||
| the <a href="https://twitter.com/PowerDNS_Bert/status/1329861047168225281" target="_blank">Nobel prizes will arrive in due | |||
| course</a>.</p> | |||
| <blockquote> | |||
| <p>Many people have asked, could viruses also use the Ψ technique to beat our | |||
| immune systems? In short, this is extremely unlikely. Life simply does | |||
| not have the machinery to build 1-methyl-3’-pseudouridylyl nucleotides. | |||
| Viruses rely on the machinery of life to reproduce themselves, and this | |||
| facility is simply not there. The mRNA vaccines quickly degrade in the | |||
| human body, and there is no possibility of the Ψ-modified RNA | |||
| replicating with the Ψ still in there. “<a href="https://www.deplatformdisease.com/blog/no-really-mrna-vaccines-are-not-going-to-affect-your-dna" target="_blank">No, Really, mRNA Vaccines Are Not Going To Affect Your | |||
| DNA</a>“ | |||
| is also a good read.</p> | |||
| </blockquote> | |||
| <p>Ok, back to the 5’ UTR. What do these 51 characters do? As everything in | |||
| nature, almost nothing has one clear function.</p> | |||
| <p>When our cells need to <em>translate</em> RNA into proteins, this is done using a | |||
| machine called the ribosome. The ribosome is like a 3D printer for | |||
| proteins. It ingests a strand of RNA and based on that it emits a string of | |||
| amino acids, which then fold into a protein.</p> | |||
| <p></p> | |||
| <p><center> | |||
| <video controls loop> | |||
| <source src="/articles/protein-short.mp4" type="video/mp4"> | |||
| </source></video> | |||
| <br> | |||
| Source: <a href="https://commons.wikimedia.org/wiki/File:Protein_translation.gif" target="_blank">Wikipedia user Bensaccount</a> | |||
| </center></p> | |||
| <p>This is what we see happening above. The black ribbon at the bottom is RNA. | |||
| The ribbon appearing in the green bit is the protein being formed. The | |||
| things flying in and out are amino acids plus adaptors to make them fit on | |||
| RNA.</p> | |||
| <p>This ribosome needs to physically sit on the RNA strand for it to get to | |||
| work. Once seated, it can start forming proteins based on further RNA it | |||
| ingests. From this, you can imagine that it can’t yet read the parts where | |||
| it lands on first. This is just one of the functions of the UTR: the | |||
| ribosome landing zone. The UTR provides ‘lead-in’.</p> | |||
| <p>In addition to this, the UTR also contains metadata: when should translation | |||
| happen? And how much? For the vaccine, they took the most ‘right now’ UTR | |||
| they could find, taken from the <a href="https://www.tandfonline.com/doi/full/10.1080/15476286.2018.1450054" target="_blank">alpha globin | |||
| gene</a>. | |||
| This gene is known to robustly produce a lot of proteins. In previous | |||
| years, scientists had already found ways to optimize this UTR even further | |||
| (according to the WHO document), so this is not quite the alpha globin UTR. | |||
| It is better.</p> | |||
| <h2 id="the-s-glycoprotein-signal-peptide">The S glycoprotein signal peptide</h2> | |||
| <p>As noted, the goal of the vaccine is to get the cell to produce copious | |||
| amounts of the Spike protein of SARS-CoV-2. Up to this point, we have mostly | |||
| encountered metadata and “calling convention” stuff in the vaccine source | |||
| code. But now we enter the actual viral protein territory.</p> | |||
| <p>We still have one layer of metadata to go however. Once the ribosome (from the | |||
| splendid animation above) has made a protein, that protein still needs to go | |||
| somewhere. This is encoded in the “S glycoprotein signal peptide (extended leader | |||
| sequence)“.</p> | |||
| <p>The way to see this is that at the beginning of the protein there is a sort | |||
| of address label - encoded as part of the protein itself. In this specific | |||
| case, the signal peptide says that this protein should exit the cell via the | |||
| “endoplasmic reticulum”. Even Star Trek lingo is not as fancy as this!</p> | |||
| <p>The “signal peptide” is not very long, but when we look at the code, there | |||
| are differences between the viral and vaccine RNA:</p> | |||
| <p>(Note that for comparison purposes, I have replaced the fancy modified Ψ by a | |||
| regular RNA U)</p> | |||
| <pre><code> 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 | |||
| Virus: AUG UUU GUU UUU CUU GUU UUA UUG CCA CUA GUC UCU AGU CAG UGU GUU | |||
| Vaccine: AUG UUC GUG UUC CUG GUG CUG CUG CCU CUG GUG UCC AGC CAG UGU GUG | |||
| ! ! ! ! ! ! ! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>So what is going on? I have not accidentally listed the RNA in groups of 3 | |||
| letters. Three RNA characters make up a codon. And every codon encodes for a | |||
| specific amino acid. The signal peptide in the vaccine consists of <em>exactly</em> | |||
| the same amino acids as in the virus itself.</p> | |||
| <p>So how come the RNA is different?</p> | |||
| <p>There are 4³=64 different codons, since there are 4 RNA characters, and | |||
| there are three of them in a codon. Yet there are only 20 different | |||
| amino acids. This means that multiple codons encode for the same amino acid.</p> | |||
| <p>Life uses the following nearly universal table for mapping RNA codons to | |||
| amino acids:</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/rna-codon-table.png" alt="The RNA codon table (Wikipedia)"> <figcaption> | |||
| <p><a href="https://en.wikipedia.org/wiki/DNA_and_RNA_codon_tables" target="_blank">The RNA codon table</a> (Wikipedia)</p> | |||
| </figcaption> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <p>In this table, we can see that the modifications in the vaccine (UUU -> | |||
| UUC) are all <em>synonymous</em>. The vaccine RNA code is different, but the same | |||
| amino acids and the same protein come out.</p> | |||
| <p>If we look closely, we see that the majority of the changes happen in the | |||
| third codon position, noted with a ‘3’ above. And if we check the universal | |||
| codon table, we see that this third position indeed often does not matter | |||
| for which amino acid is produced.</p> | |||
| <p>So, the changes are synonymous, but then why are they there? Looking | |||
| closely, we see that all changes <em>except one</em> lead to more C and Gs.</p> | |||
| <p>So why would you do that? As noted above, our immune system takes a very dim | |||
| view of ‘exogenous’ RNA, RNA code coming from outside the cell. To evade | |||
| detection, the ‘U’ in the RNA was already replaced by a Ψ.</p> | |||
| <p>However, it turns out that RNA with <a href="https://www.nature.com/articles/nrd.2017.243" target="_blank">a higher | |||
| amount</a> of Gs and Cs is | |||
| also <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1463026/" target="_blank">converted more efficiently into | |||
| proteins</a>,</p> | |||
| <p>And this has been achieved in the vaccine RNA by replacing many characters | |||
| with Gs and Cs wherever this was possible.</p> | |||
| <blockquote> | |||
| <p>I’m slightly fascinated by the <em>one</em> change that did not lead to an | |||
| additional C or G, the CCA -> CCU modification. If anyone knows the reason, | |||
| please let me know! Note that I’m aware that some codons are more common | |||
| than others in the human genome, but <a href="https://journals.plos.org/plosgenetics/article?id=10.1371/journal.pgen.1006024" target="_blank">I also read that this does not | |||
| influence translation speed a | |||
| lot</a>.</p> | |||
| </blockquote> | |||
| <h2 id="the-actual-spike-protein">The actual Spike protein</h2> | |||
| <p>The next 3777 characters of the vaccine RNA are similarly ‘codon optimized’ | |||
| to add a lot of C’s and G’s. In the interest of space I won’t list all | |||
| the code here, but we are going to zoom in on one exceptionally special | |||
| bit. This is the bit that makes it work, the part that will actually help us | |||
| return to life as normal:</p> | |||
| <pre><code> * * | |||
| L D K V E A E V Q I D R L I T G | |||
| Virus: CUU GAC AAA GUU GAG GCU GAA GUG CAA AUU GAU AGG UUG AUC ACA GGC | |||
| Vaccine: CUG GAC CCU CCU GAG GCC GAG GUG CAG AUC GAC AGA CUG AUC ACA GGC | |||
| L D P P E A E V Q I D R L I T G | |||
| ! !!! !! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>Here we see the usual synonymous RNA changes. For example, in the first | |||
| codon we see that CUU is changed into CUG. This adds another ‘G’ to the | |||
| vaccine, which we know helps enhance protein production. Both CUU | |||
| and CUG encode for the amino acid ‘L’ or Leucine, so nothing changed in the | |||
| protein.</p> | |||
| <p>When we compare the entire Spike protein in the vaccine, all changes are | |||
| synonymous like this.. except for two, and this is what we see here.</p> | |||
| <p>The third and fourth codons above represent actual changes. The K and V | |||
| amino acids there are both replaced by ‘P’ or Proline. For ‘K’ this required | |||
| three changes (‘!!!’) and for ‘V’ it required only two (‘!!’).</p> | |||
| <p><strong>It turns out that these two changes enhance the vaccine efficiency | |||
| enormously</strong>.</p> | |||
| <p>So what is happening here? If you look at a real SARS-CoV-2 particle, you | |||
| can see the Spike protein as, well, a bunch of spikes:</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/sars-em.jpg" alt="SARS virus particles (Wikipedia)"> <figcaption> | |||
| <p><a href="https://en.wikipedia.org/wiki/Severe_acute_respiratory_syndrome_coronavirus" target="_blank">SARS virus particles</a> (Wikipedia)</p> | |||
| </figcaption> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <p>The spikes are mounted on the virus body (‘the nucleocapsid protein’). But | |||
| the thing is, our vaccine is only generating the spikes itself, and we’re | |||
| not mounting them on any kind of virus body.</p> | |||
| <p>It turns out that, unmodified, freestanding Spike proteins collapse into a | |||
| different structure. If injected as a vaccine, this would indeed cause our | |||
| bodies to develop immunity.. but only against the collapsed spike protein.</p> | |||
| <p>And the real SARS-CoV-2 shows up with the spiky Spike. The vaccine would not | |||
| work very well in that case.</p> | |||
| <p>So what to do? In <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5584442/" target="_blank">2017 it was described how putting a double Proline | |||
| substitution in just the right | |||
| place</a> would make the | |||
| SARS-CoV-1 and MERS | |||
| S proteins take up their ‘pre-fusion’ configuration, even without being part of | |||
| the whole virus. This works <a href="https://cen.acs.org/pharmaceuticals/vaccines/tiny-tweak-behind-COVID-19/98/i38" target="_blank">because Proline is a very rigid amino | |||
| acid</a>. It | |||
| acts as a kind of splint, stabilising the protein in the state we need to | |||
| show to the immune system.</p> | |||
| <p>The <a href="https://twitter.com/goodwish916" target="_blank">people</a> that | |||
| <a href="https://twitter.com/KizzyPhD" target="_blank">discovered</a> this should be walking | |||
| around high-fiving themselves incessantly. Unbearable amounts of smugness | |||
| should be emanating from them. <a href="https://twitter.com/McLellan_Lab/status/1291077489566142464" target="_blank">And it would all be well | |||
| deserved</a>.</p> | |||
| <blockquote> | |||
| <p>Update! I have been contacted by the <a href="https://twitter.com/McLellan_Lab/status/1291077489566142464" target="_blank">McLellan | |||
| lab</a>, one of the | |||
| groups behind the Proline discovery. They tell me the high-fiving is | |||
| subdued because of the ongoing pandemic, but they are pleased to have | |||
| contributed to the vaccines. They also stress the importance of many other | |||
| groups, workers and volunteers.</p> | |||
| </blockquote> | |||
| <h2 id="the-end-of-the-protein-next-steps">The end of the protein, next steps</h2> | |||
| <p>If we scroll through the rest of the source code, we encounter some small | |||
| modifications at the end of the Spike protein:</p> | |||
| <pre><code> V L K G V K L H Y T s | |||
| Virus: GUG CUC AAA GGA GUC AAA UUA CAU UAC ACA UAA | |||
| Vaccine: GUG CUG AAG GGC GUG AAA CUG CAC UAC ACA UGA UGA | |||
| V L K G V K L H Y T s s | |||
| ! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>At the end of a protein we find a ‘stop’ codon, denoted here by a lowercase | |||
| ’s’. This is a polite way of saying that the protein should end here. The | |||
| original virus uses the UAA stop codon, the vaccine uses two UGA stop | |||
| codons, perhaps just for good measure.</p> | |||
| <h2 id="the-3-untranslated-region">The 3’ Untranslated Region</h2> | |||
| <p>Much like the ribosome needed some lead-in at the 5’ end, where we found the | |||
| ‘five prime untranslated region’, at the end of a protein coding region we find a similar | |||
| construct called the 3’ UTR.</p> | |||
| <p>Many words could be written about the 3’ UTR, but here I quote <a href="https://en.wikipedia.org/wiki/Three_prime_untranslated_region" target="_blank">what the | |||
| Wikipedia | |||
| says</a>: “The 3’-untranslated region plays a crucial role in gene | |||
| expression by influencing the localization, stability, export, and | |||
| translation efficiency of an mRNA .. <strong>despite our current understanding of | |||
| 3’-UTRs, they are still relative mysteries</strong>”.</p> | |||
| <p>What we do know is that certain 3’-UTRs are very successful at promoting | |||
| protein expression. According to the WHO document, the BioNTech/Pfizer | |||
| vaccine 3’-UTR was picked from “the amino-terminal enhancer of split (AES) | |||
| mRNA and the mitochondrial encoded 12S ribosomal RNA to confer RNA stability | |||
| and high total protein expression”. To which I say, well done.</p> | |||
| <p></p> | |||
| <p><center> | |||
| <figure> | |||
| <img src="/articles/vaccine.jpg"> | |||
| </figure></p> | |||
| <p></center></p> | |||
| <h2 id="the-aaaaaaaaaaaaaaaaaaaaaa-end-of-it-all">The AAAAAAAAAAAAAAAAAAAAAA end of it all</h2> | |||
| <p>The very end of mRNA is polyadenylated. This is a fancy way of saying it | |||
| ends on a lot of AAAAAAAAAAAAAAAAAAA. Even mRNA has had enough of 2020 it | |||
| appears.</p> | |||
| <p>mRNA can be reused many times, but as this happens, it also loses some of | |||
| the A’s at the end. Once the A’s run out, the mRNA is no longer functional | |||
| and gets discarded. In this way, the ‘poly-A’ tail is protection from | |||
| degradation.</p> | |||
| <p>Studies have been done to find out what the optimal number of A’s at the end | |||
| is for mRNA vaccines. I read in the open literature that this peaked at 120 | |||
| or so.</p> | |||
| <p>The BNT162b2 vaccine ends with:</p> | |||
| <pre><code> ****** **** | |||
| UAGCAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAGCAUAU GACUAAAAAA AAAAAAAAAA | |||
| AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAA | |||
| </code></pre> | |||
| <p>This is 30 A’s, then a “10 nucleotide linker” (GCAUAUGACU), followed by another 70 | |||
| A’s.</p> | |||
| <p>There are various theories why this linker is there. Some people tell me it | |||
| has to do with DNA plasmid stability, I have also received this from an | |||
| actual expert:</p> | |||
| <p>“The 10-nucleotide linker within the poly(A) tail makes it easier to stitch | |||
| together the synthetic DNA fragments that become the template for transcribing | |||
| the mRNA. It also reduces slipping by T7 RNA polymerase so that the | |||
| transcribed mRNA is more uniform in length”.</p> | |||
| <h2 id="summarising">Summarising</h2> | |||
| <p>With this, we now know the exact mRNA contents of the BNT162b2 vaccine, and | |||
| for most parts we understand why they are there:</p> | |||
| <ul> | |||
| <li>The CAP to make sure the RNA looks like regular mRNA</li> | |||
| <li>A known successful and optimized 5’ untranslated region (UTR)</li> | |||
| <li>A codon optimized signal peptide to send the Spike protein to the right | |||
| place (copied 100% from the original virus)</li> | |||
| <li>A codon optimized version of the original spike, with two ‘Proline’ | |||
| substitutions to make sure the protein appears in the right form</li> | |||
| <li>A known successful and optimized 3’ untranslated region</li> | |||
| <li>A slightly mysterious poly-A tail with an unexplained ‘linker’ in there</li> | |||
| </ul> | |||
| <p>The codon optimization adds a lot of G and C to the mRNA. Meanwhile, using Ψ | |||
| (1-methyl-3’-pseudouridylyl) instead of U helps evade our immune system, so | |||
| the mRNA stays around long enough so we can actually help train the immune | |||
| system.</p> | |||
| <h2 id="further-reading-viewing">Further reading/viewing</h2> | |||
| <p>In 2017 I held a two hour presentation on DNA, which you can <a href="https://berthub.eu/dna" target="_blank">view | |||
| here</a>. Like this page it is aimed at computer | |||
| people.</p> | |||
| <p>In addition, I’ve been maintaining a page on ‘<a href="https://berthub.eu/amazing-dna" target="_blank">DNA for | |||
| programmers</a>’ since 2001.</p> | |||
| <p>You might also enjoy <a href="https://berthub.eu/articles/posts/immune-system/" target="_blank">this introduction to our amazing immune | |||
| system</a>.</p> | |||
| <p>Finally, <a href="https://berthub.eu/articles" target="_blank">this listing of my blog posts</a> has quite some | |||
| DNA, SARS-CoV-2 and COVID related material.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 551
- 0
cache/2021/66ef8e7fa0942fc975723f7df4d932e9/index.md
Voir le fichier
| @@ -0,0 +1,551 @@ | |||
| title: Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine | |||
| url: https://berthub.eu/articles/posts/reverse-engineering-source-code-of-the-biontech-pfizer-vaccine/ | |||
| hash_url: 66ef8e7fa0942fc975723f7df4d932e9 | |||
| <p>Welcome! In this post, we’ll be taking a character-by-character look at the | |||
| source code of the BioNTech/Pfizer SARS-CoV-2 mRNA vaccine.</p> | |||
| <blockquote> | |||
| <p><em>I want to thank the large cast of people who spent time previewing this | |||
| article for legibility and correctness. All mistakes remain mine though, | |||
| but I would love to hear about them quickly at bert@hubertnet.nl or | |||
| <a href="https://twitter.com/PowerDNS_Bert" target="_blank">@PowerDNS_Bert</a></em></p> | |||
| </blockquote> | |||
| <p>Now, these words may be somewhat jarring - the vaccine is a liquid that gets | |||
| injected in your arm. How can we talk about source code?</p> | |||
| <p>This is a good question, so let’s start off with a small part of the very | |||
| source code of the BioNTech/Pfizer vaccine, also known as | |||
| <a href="https://en.wikipedia.org/wiki/Tozinameran" target="_blank">BNT162b2</a>, also | |||
| known as Tozinameran <a href="https://twitter.com/PowerDNS_Bert/status/1342109138965422083" target="_blank">also known as | |||
| Comirnaty</a>.</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/bnt162b2.png" alt="First 500 characters of the BNT162b2 mRNA. Source: World Health Organization"> <figcaption> | |||
| <p>First 500 characters of the BNT162b2 mRNA. Source: <a href="https://mednet-communities.net/inn/db/media/docs/11889.doc" target="_blank">World Health Organization</a></p> | |||
| </figcaption> | |||
| </figure> | |||
| </center> | |||
| <p>The BNT162b2 mRNA vaccine has this digital code at its heart. It is 4284 | |||
| characters long, so it would fit in a bunch of tweets. At the very | |||
| beginning of the vaccine production process, someone uploaded this code to a | |||
| DNA printer (yes), which then converted the bytes on disk to actual DNA | |||
| molecules.</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/bioxp-3200.jpg" alt="A Codex DNA BioXp 3200 DNA printer"> <figcaption> | |||
| <p>A <a href="https://codexdna.com/products/bioxp-system/" target="_blank">Codex DNA</a> BioXp 3200 DNA printer</p> | |||
| </figcaption> | |||
| </figure> | |||
| </center> | |||
| <p>Out of such a machine come tiny amounts of DNA, which after a lot of | |||
| biological and chemical processing end up as RNA (more about which later) in | |||
| the vaccine vial. A 30 microgram dose turns out to actually contain 30 | |||
| micrograms of RNA. In addition, there is a clever lipid (fatty) packaging | |||
| system that gets the mRNA into our cells.</p> | |||
| <p>RNA is the volatile ‘working memory’ version of DNA. DNA is like the flash | |||
| drive storage of biology. DNA is very durable, internally redundant and | |||
| very reliable. But much like computers do not execute code directly from a | |||
| flash drive, before something happens, code gets copied to a faster, | |||
| more versatile yet far more fragile system.</p> | |||
| <p>For computers, this is RAM, for biology it is RNA. The resemblance is | |||
| striking. Unlike flash memory, RAM degrades very quickly unless lovingly | |||
| tended to. The reason the Pfizer/BioNTech mRNA vaccine must be stored in the | |||
| deepest of deep freezers is the same: RNA is a fragile flower.</p> | |||
| <p>Each RNA character weighs on the order of 0.53·10â»Â²Â¹ grams, meaning | |||
| there are around 6·10¹ⶠcharacters in a single 30 microgram vaccine dose. | |||
| Expressed in bytes, this is around 14 petabytes, although it must be said | |||
| this consists of around <a href="https://docs.google.com/spreadsheets/d/1vc6p9IXQVRpVQntcI1tCdSMLNDuT8fl8rags0gDxMZA/edit?usp=sharing" target="_blank">13,000 billion | |||
| repetitions</a> of the same 4284 | |||
| characters. The actual informational content of the vaccine is just over a | |||
| kilobyte. <a href="https://www.ncbi.nlm.nih.gov/projects/sviewer/?id=NC_045512&tracks=%5Bkey:sequence_track,name:Sequence,display_name:Sequence,id:STD649220238,annots:Sequence,ShowLabel:false,ColorGaps:false,shown:true,order:1%5D%5Bkey:gene_model_track,name:Genes,display_name:Genes,id:STD3194982005,annots:Unnamed,Options:ShowAllButGenes,CDSProductFeats:true,NtRuler:true,AaRuler:true,HighlightMode:2,ShowLabel:true,shown:true,order:9%5D&v=1:29903&c=null&select=null&slim=0" target="_blank">SARS-CoV-2 itself</a> weighs in at around 7.5 kilobytes.</p> | |||
| <blockquote> | |||
| <p>Update: In the original post these numbers were off. <a href="https://docs.google.com/spreadsheets/d/1vc6p9IXQVRpVQntcI1tCdSMLNDuT8fl8rags0gDxMZA/edit?usp=sharing" target="_blank">Here is a | |||
| spreadsheet</a> | |||
| with the correct calculations.</p> | |||
| </blockquote> | |||
| <h2 id="the-briefest-bit-of-background">The briefest bit of background</h2> | |||
| <p>DNA is a digital code. Unlike computers, which use 0 and 1, life uses A, C, G | |||
| and U/T (the ‘nucleotides’, ‘nucleosides’ or ‘bases’).</p> | |||
| <p>In computers we store the 0 and 1 as the presence or absence of a charge, or | |||
| as a current, as a magnetic transition, or as a voltage, or as a modulation | |||
| of a signal, or as a change in reflectivity. Or in short, the 0 and 1 are | |||
| not some kind of abstract concept - they live as electrons and in many other | |||
| physical embodiments.</p> | |||
| <p>In nature, A, C, G and U/T are molecules, stored as chains in DNA (or RNA).</p> | |||
| <p>In computers, we group 8 bits into a byte, and the byte is the typical unit | |||
| of data being processed.</p> | |||
| <p>Nature groups 3 nucleotides into a codon, and this codon is the typical unit | |||
| of processing. A codon contains 6 bits of information (2 bits per DNA | |||
| character, 3 characters = 6 bits. This means 2ⶠ= 64 different codon values).</p> | |||
| <p>Pretty digital so far. When in doubt, <a href="https://mednet-communities.net/inn/db/media/docs/11889.doc" target="_blank">head to the WHO | |||
| document</a> with the | |||
| digital code to see for yourself.</p> | |||
| <blockquote> | |||
| <p><em>Some further reading is <a href="https://berthub.eu/articles/posts/what-is-life/" target="_blank">available | |||
| here</a> - this link (‘What | |||
| is life’) might help make sense of the rest of this page. Or, if you like | |||
| video, I have <a href="https://berthub.eu/dna" target="_blank">two hours for you</a>.</em></p> | |||
| </blockquote> | |||
| <h2 id="so-what-does-that-code-do">So what does that code DO?</h2> | |||
| <p>The idea of a vaccine is to teach our immune system how to fight a pathogen, | |||
| without us actually getting ill. Historically this has been done by | |||
| injecting a weakened or incapacitated (attenuated) virus, plus an ‘adjuvant’ | |||
| to scare our immune system into action. This was a decidedly analogue | |||
| technique involving billions of eggs (or insects). It also required a lot | |||
| of luck and loads of time. Sometimes a different (unrelated) virus was also | |||
| used.</p> | |||
| <p>An mRNA vaccine achieves the same thing (‘educate our immune system’) but in | |||
| a laser like way. And I mean this in both senses - very narrow but also | |||
| very powerful.</p> | |||
| <p>So here is how it works. The injection contains volatile genetic material | |||
| that describes the famous SARS-CoV-2 ‘Spike’ protein. Through clever | |||
| chemical means, the vaccine manages to get this genetic material into some of | |||
| our cells.</p> | |||
| <p>These then dutifully start producing SARS-CoV-2 Spike proteins in large | |||
| enough quantities that our immune system springs into action. Confronted | |||
| with Spike proteins, and (importantly) tell-tale signs that cells have been | |||
| taken over, our immune system develops a powerful response against multiple | |||
| aspects of the Spike protein AND the production process.</p> | |||
| <p>And this is what gets us to the 95% efficient vaccine.</p> | |||
| <h2 id="the-source-code">The source code!</h2> | |||
| <p><a href="https://youtu.be/jp0opnxQ4rY?t=8" target="_blank">Let’s start at the very beginning, a very good place | |||
| to start</a>. The WHO document has this | |||
| helpful picture:</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/vaccine-toc.png"> | |||
| </figure> | |||
| </center> | |||
| <p>This is a sort of table of contents. We’ll start with the ‘cap’, actually | |||
| depicted as a little hat.</p> | |||
| <p>Much like you can’t just plonk opcodes in a file on a computer and run it, | |||
| the biological operating system requires headers, has linkers and things | |||
| like calling conventions.</p> | |||
| <p>The code of the vaccine starts with the following two nucleotides:</p> | |||
| <pre><code>GA | |||
| </code></pre> | |||
| <p>This can be compared very much to every <a href="https://en.wikipedia.org/wiki/DOS_MZ_executable" target="_blank">DOS and Windows executable starting | |||
| with MZ</a>, or UNIX scripts starting with | |||
| <a href="https://en.wikipedia.org/wiki/Shebang_(Unix)" target="_blank"><code>#!</code></a>. In both life and | |||
| operating systems, these two characters are not executed in any way. But | |||
| they have to be there because otherwise nothing happens.</p> | |||
| <p>The mRNA ‘cap’ <a href="https://en.wikipedia.org/wiki/Five-prime_cap#Function" target="_blank">has a number of | |||
| functions</a>. For one, it marks code as coming | |||
| from the nucleus. In our case of course it doesn’t, our code comes from a | |||
| vaccination. But we don’t need to tell the cell that. The cap makes our code | |||
| look legit, which protects it from destruction.</p> | |||
| <p>The initial two <code>GA</code> nucleotides are also chemically slightly different from | |||
| the rest of the RNA. In this sense, the <code>GA</code> has some out-of-band | |||
| signaling on it.</p> | |||
| <h2 id="the-five-prime-untranslated-region">The “five-prime untranslated region”</h2> | |||
| <p>Some lingo here. RNA molecules can only be read in one direction. | |||
| Confusingly, the part where the reading begins is called the 5’ or | |||
| ‘five-prime’. The reading stops at the 3’ or three-prime end.</p> | |||
| <p>Life consists of proteins (or things made by proteins). And these proteins | |||
| are described in RNA. When RNA gets converted into proteins, this is called | |||
| translation.</p> | |||
| <p>Here we have the 5’ untranslated region (‘UTR’), so this bit does not end up | |||
| in the protein:</p> | |||
| <pre><code>GAAΨAAACΨAGΨAΨΨCΨΨCΨGGΨCCCCACAGACΨCAGAGAGAACCCGCCACC | |||
| </code></pre> | |||
| <p>Here we encounter our first surprise. The normal RNA characters are A, C, G | |||
| and U. U is also known as ’T’ in DNA. But here we find a Ψ, what is going | |||
| on?</p> | |||
| <p>This is one of the exceptionally clever bits about the vaccine. Our body | |||
| runs a powerful antivirus system (“the original one”). For this reason, | |||
| cells are extremely unenthusiastic about foreign RNA and try very hard to | |||
| destroy it before it does anything.</p> | |||
| <p>This is somewhat of a problem for our vaccine - it needs to sneak past our | |||
| immune system. Over many years of experimentation, it was found that if the | |||
| U in RNA is replaced by a slightly modified molecule, our immune system | |||
| loses interest. For real.</p> | |||
| <p>So in the BioNTech/Pfizer vaccine, every U has been replaced by | |||
| 1-methyl-3’-pseudouridylyl, denoted by Ψ. The really clever bit is that | |||
| although this replacement Ψ placates (calms) our immune system, it is | |||
| accepted as a normal U by relevant parts of the cell.</p> | |||
| <p>In computer security we also know this trick - it sometimes is possible to | |||
| transmit a slightly corrupted version of a message that confuses firewalls and | |||
| security solutions, but that is still accepted by the backend servers - | |||
| which can then get hacked.</p> | |||
| <p>We are now reaping the benefits of fundamental scientific research performed | |||
| in the past. The | |||
| <a href="https://twitter.com/PennMedicine/status/1341766354232365059" target="_blank">discoverers</a> | |||
| of this Ψ technique had to fight to get | |||
| <a href="https://www.statnews.com/2020/11/10/the-story-of-mrna-how-a-once-dismissed-idea-became-a-leading-technology-in-the-covid-vaccine-race/" target="_blank">their</a> | |||
| work funded and then accepted. We should all be very grateful, and I am sure | |||
| the <a href="https://twitter.com/PowerDNS_Bert/status/1329861047168225281" target="_blank">Nobel prizes will arrive in due | |||
| course</a>.</p> | |||
| <blockquote> | |||
| <p>Many people have asked, could viruses also use the Ψ technique to beat our | |||
| immune systems? In short, this is extremely unlikely. Life simply does | |||
| not have the machinery to build 1-methyl-3’-pseudouridylyl nucleotides. | |||
| Viruses rely on the machinery of life to reproduce themselves, and this | |||
| facility is simply not there. The mRNA vaccines quickly degrade in the | |||
| human body, and there is no possibility of the Ψ-modified RNA | |||
| replicating with the Ψ still in there. “<a href="https://www.deplatformdisease.com/blog/no-really-mrna-vaccines-are-not-going-to-affect-your-dna" target="_blank">No, Really, mRNA Vaccines Are Not Going To Affect Your | |||
| DNA</a>“ | |||
| is also a good read.</p> | |||
| </blockquote> | |||
| <p>Ok, back to the 5’ UTR. What do these 51 characters do? As everything in | |||
| nature, almost nothing has one clear function.</p> | |||
| <p>When our cells need to <em>translate</em> RNA into proteins, this is done using a | |||
| machine called the ribosome. The ribosome is like a 3D printer for | |||
| proteins. It ingests a strand of RNA and based on that it emits a string of | |||
| amino acids, which then fold into a protein.</p> | |||
| <p></p><center> | |||
| <video controls loop> | |||
| <source src="/articles/protein-short.mp4" type="video/mp4"> | |||
| </source></video> | |||
| <br> | |||
| Source: <a href="https://commons.wikimedia.org/wiki/File:Protein_translation.gif" target="_blank">Wikipedia user Bensaccount</a> | |||
| </center> | |||
| <p>This is what we see happening above. The black ribbon at the bottom is RNA. | |||
| The ribbon appearing in the green bit is the protein being formed. The | |||
| things flying in and out are amino acids plus adaptors to make them fit on | |||
| RNA.</p> | |||
| <p>This ribosome needs to physically sit on the RNA strand for it to get to | |||
| work. Once seated, it can start forming proteins based on further RNA it | |||
| ingests. From this, you can imagine that it can’t yet read the parts where | |||
| it lands on first. This is just one of the functions of the UTR: the | |||
| ribosome landing zone. The UTR provides ‘lead-in’.</p> | |||
| <p>In addition to this, the UTR also contains metadata: when should translation | |||
| happen? And how much? For the vaccine, they took the most ‘right now’ UTR | |||
| they could find, taken from the <a href="https://www.tandfonline.com/doi/full/10.1080/15476286.2018.1450054" target="_blank">alpha globin | |||
| gene</a>. | |||
| This gene is known to robustly produce a lot of proteins. In previous | |||
| years, scientists had already found ways to optimize this UTR even further | |||
| (according to the WHO document), so this is not quite the alpha globin UTR. | |||
| It is better.</p> | |||
| <h2 id="the-s-glycoprotein-signal-peptide">The S glycoprotein signal peptide</h2> | |||
| <p>As noted, the goal of the vaccine is to get the cell to produce copious | |||
| amounts of the Spike protein of SARS-CoV-2. Up to this point, we have mostly | |||
| encountered metadata and “calling convention” stuff in the vaccine source | |||
| code. But now we enter the actual viral protein territory.</p> | |||
| <p>We still have one layer of metadata to go however. Once the ribosome (from the | |||
| splendid animation above) has made a protein, that protein still needs to go | |||
| somewhere. This is encoded in the “S glycoprotein signal peptide (extended leader | |||
| sequence)“.</p> | |||
| <p>The way to see this is that at the beginning of the protein there is a sort | |||
| of address label - encoded as part of the protein itself. In this specific | |||
| case, the signal peptide says that this protein should exit the cell via the | |||
| “endoplasmic reticulum”. Even Star Trek lingo is not as fancy as this!</p> | |||
| <p>The “signal peptide” is not very long, but when we look at the code, there | |||
| are differences between the viral and vaccine RNA:</p> | |||
| <p>(Note that for comparison purposes, I have replaced the fancy modified Ψ by a | |||
| regular RNA U)</p> | |||
| <pre><code> 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 | |||
| Virus: AUG UUU GUU UUU CUU GUU UUA UUG CCA CUA GUC UCU AGU CAG UGU GUU | |||
| Vaccine: AUG UUC GUG UUC CUG GUG CUG CUG CCU CUG GUG UCC AGC CAG UGU GUG | |||
| ! ! ! ! ! ! ! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>So what is going on? I have not accidentally listed the RNA in groups of 3 | |||
| letters. Three RNA characters make up a codon. And every codon encodes for a | |||
| specific amino acid. The signal peptide in the vaccine consists of <em>exactly</em> | |||
| the same amino acids as in the virus itself.</p> | |||
| <p>So how come the RNA is different?</p> | |||
| <p>There are 4³=64 different codons, since there are 4 RNA characters, and | |||
| there are three of them in a codon. Yet there are only 20 different | |||
| amino acids. This means that multiple codons encode for the same amino acid.</p> | |||
| <p>Life uses the following nearly universal table for mapping RNA codons to | |||
| amino acids:</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/rna-codon-table.png" alt="The RNA codon table (Wikipedia)"> <figcaption> | |||
| <p><a href="https://en.wikipedia.org/wiki/DNA_and_RNA_codon_tables" target="_blank">The RNA codon table</a> (Wikipedia)</p> | |||
| </figcaption> | |||
| </figure> | |||
| </center> | |||
| <p>In this table, we can see that the modifications in the vaccine (UUU -> | |||
| UUC) are all <em>synonymous</em>. The vaccine RNA code is different, but the same | |||
| amino acids and the same protein come out.</p> | |||
| <p>If we look closely, we see that the majority of the changes happen in the | |||
| third codon position, noted with a ‘3’ above. And if we check the universal | |||
| codon table, we see that this third position indeed often does not matter | |||
| for which amino acid is produced.</p> | |||
| <p>So, the changes are synonymous, but then why are they there? Looking | |||
| closely, we see that all changes <em>except one</em> lead to more C and Gs.</p> | |||
| <p>So why would you do that? As noted above, our immune system takes a very dim | |||
| view of ‘exogenous’ RNA, RNA code coming from outside the cell. To evade | |||
| detection, the ‘U’ in the RNA was already replaced by a Ψ.</p> | |||
| <p>However, it turns out that RNA with <a href="https://www.nature.com/articles/nrd.2017.243" target="_blank">a higher | |||
| amount</a> of Gs and Cs is | |||
| also <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1463026/" target="_blank">converted more efficiently into | |||
| proteins</a>,</p> | |||
| <p>And this has been achieved in the vaccine RNA by replacing many characters | |||
| with Gs and Cs wherever this was possible.</p> | |||
| <blockquote> | |||
| <p>I’m slightly fascinated by the <em>one</em> change that did not lead to an | |||
| additional C or G, the CCA -> CCU modification. If anyone knows the reason, | |||
| please let me know! Note that I’m aware that some codons are more common | |||
| than others in the human genome, but <a href="https://journals.plos.org/plosgenetics/article?id=10.1371/journal.pgen.1006024" target="_blank">I also read that this does not | |||
| influence translation speed a | |||
| lot</a>.</p> | |||
| </blockquote> | |||
| <h2 id="the-actual-spike-protein">The actual Spike protein</h2> | |||
| <p>The next 3777 characters of the vaccine RNA are similarly ‘codon optimized’ | |||
| to add a lot of C’s and G’s. In the interest of space I won’t list all | |||
| the code here, but we are going to zoom in on one exceptionally special | |||
| bit. This is the bit that makes it work, the part that will actually help us | |||
| return to life as normal:</p> | |||
| <pre><code> * * | |||
| L D K V E A E V Q I D R L I T G | |||
| Virus: CUU GAC AAA GUU GAG GCU GAA GUG CAA AUU GAU AGG UUG AUC ACA GGC | |||
| Vaccine: CUG GAC CCU CCU GAG GCC GAG GUG CAG AUC GAC AGA CUG AUC ACA GGC | |||
| L D P P E A E V Q I D R L I T G | |||
| ! !!! !! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>Here we see the usual synonymous RNA changes. For example, in the first | |||
| codon we see that CUU is changed into CUG. This adds another ‘G’ to the | |||
| vaccine, which we know helps enhance protein production. Both CUU | |||
| and CUG encode for the amino acid ‘L’ or Leucine, so nothing changed in the | |||
| protein.</p> | |||
| <p>When we compare the entire Spike protein in the vaccine, all changes are | |||
| synonymous like this.. except for two, and this is what we see here.</p> | |||
| <p>The third and fourth codons above represent actual changes. The K and V | |||
| amino acids there are both replaced by ‘P’ or Proline. For ‘K’ this required | |||
| three changes (‘!!!’) and for ‘V’ it required only two (‘!!’).</p> | |||
| <p><strong>It turns out that these two changes enhance the vaccine efficiency | |||
| enormously</strong>.</p> | |||
| <p>So what is happening here? If you look at a real SARS-CoV-2 particle, you | |||
| can see the Spike protein as, well, a bunch of spikes:</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/sars-em.jpg" alt="SARS virus particles (Wikipedia)"> <figcaption> | |||
| <p><a href="https://en.wikipedia.org/wiki/Severe_acute_respiratory_syndrome_coronavirus" target="_blank">SARS virus particles</a> (Wikipedia)</p> | |||
| </figcaption> | |||
| </figure> | |||
| </center> | |||
| <p>The spikes are mounted on the virus body (‘the nucleocapsid protein’). But | |||
| the thing is, our vaccine is only generating the spikes itself, and we’re | |||
| not mounting them on any kind of virus body.</p> | |||
| <p>It turns out that, unmodified, freestanding Spike proteins collapse into a | |||
| different structure. If injected as a vaccine, this would indeed cause our | |||
| bodies to develop immunity.. but only against the collapsed spike protein.</p> | |||
| <p>And the real SARS-CoV-2 shows up with the spiky Spike. The vaccine would not | |||
| work very well in that case.</p> | |||
| <p>So what to do? In <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5584442/" target="_blank">2017 it was described how putting a double Proline | |||
| substitution in just the right | |||
| place</a> would make the | |||
| SARS-CoV-1 and MERS | |||
| S proteins take up their ‘pre-fusion’ configuration, even without being part of | |||
| the whole virus. This works <a href="https://cen.acs.org/pharmaceuticals/vaccines/tiny-tweak-behind-COVID-19/98/i38" target="_blank">because Proline is a very rigid amino | |||
| acid</a>. It | |||
| acts as a kind of splint, stabilising the protein in the state we need to | |||
| show to the immune system.</p> | |||
| <p>The <a href="https://twitter.com/goodwish916" target="_blank">people</a> that | |||
| <a href="https://twitter.com/KizzyPhD" target="_blank">discovered</a> this should be walking | |||
| around high-fiving themselves incessantly. Unbearable amounts of smugness | |||
| should be emanating from them. <a href="https://twitter.com/McLellan_Lab/status/1291077489566142464" target="_blank">And it would all be well | |||
| deserved</a>.</p> | |||
| <blockquote> | |||
| <p>Update! I have been contacted by the <a href="https://twitter.com/McLellan_Lab/status/1291077489566142464" target="_blank">McLellan | |||
| lab</a>, one of the | |||
| groups behind the Proline discovery. They tell me the high-fiving is | |||
| subdued because of the ongoing pandemic, but they are pleased to have | |||
| contributed to the vaccines. They also stress the importance of many other | |||
| groups, workers and volunteers.</p> | |||
| </blockquote> | |||
| <h2 id="the-end-of-the-protein-next-steps">The end of the protein, next steps</h2> | |||
| <p>If we scroll through the rest of the source code, we encounter some small | |||
| modifications at the end of the Spike protein:</p> | |||
| <pre><code> V L K G V K L H Y T s | |||
| Virus: GUG CUC AAA GGA GUC AAA UUA CAU UAC ACA UAA | |||
| Vaccine: GUG CUG AAG GGC GUG AAA CUG CAC UAC ACA UGA UGA | |||
| V L K G V K L H Y T s s | |||
| ! ! ! ! ! ! ! ! | |||
| </code></pre> | |||
| <p>At the end of a protein we find a ‘stop’ codon, denoted here by a lowercase | |||
| ’s’. This is a polite way of saying that the protein should end here. The | |||
| original virus uses the UAA stop codon, the vaccine uses two UGA stop | |||
| codons, perhaps just for good measure.</p> | |||
| <h2 id="the-3-untranslated-region">The 3’ Untranslated Region</h2> | |||
| <p>Much like the ribosome needed some lead-in at the 5’ end, where we found the | |||
| ‘five prime untranslated region’, at the end of a protein coding region we find a similar | |||
| construct called the 3’ UTR.</p> | |||
| <p>Many words could be written about the 3’ UTR, but here I quote <a href="https://en.wikipedia.org/wiki/Three_prime_untranslated_region" target="_blank">what the | |||
| Wikipedia | |||
| says</a>: “The 3’-untranslated region plays a crucial role in gene | |||
| expression by influencing the localization, stability, export, and | |||
| translation efficiency of an mRNA .. <strong>despite our current understanding of | |||
| 3’-UTRs, they are still relative mysteries</strong>”.</p> | |||
| <p>What we do know is that certain 3’-UTRs are very successful at promoting | |||
| protein expression. According to the WHO document, the BioNTech/Pfizer | |||
| vaccine 3’-UTR was picked from “the amino-terminal enhancer of split (AES) | |||
| mRNA and the mitochondrial encoded 12S ribosomal RNA to confer RNA stability | |||
| and high total protein expression”. To which I say, well done.</p> | |||
| <p></p><center> | |||
| <figure> | |||
| <img src="/articles/vaccine.jpg"> | |||
| </figure> | |||
| </center> | |||
| <h2 id="the-aaaaaaaaaaaaaaaaaaaaaa-end-of-it-all">The AAAAAAAAAAAAAAAAAAAAAA end of it all</h2> | |||
| <p>The very end of mRNA is polyadenylated. This is a fancy way of saying it | |||
| ends on a lot of AAAAAAAAAAAAAAAAAAA. Even mRNA has had enough of 2020 it | |||
| appears.</p> | |||
| <p>mRNA can be reused many times, but as this happens, it also loses some of | |||
| the A’s at the end. Once the A’s run out, the mRNA is no longer functional | |||
| and gets discarded. In this way, the ‘poly-A’ tail is protection from | |||
| degradation.</p> | |||
| <p>Studies have been done to find out what the optimal number of A’s at the end | |||
| is for mRNA vaccines. I read in the open literature that this peaked at 120 | |||
| or so.</p> | |||
| <p>The BNT162b2 vaccine ends with:</p> | |||
| <pre><code> ****** **** | |||
| UAGCAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAGCAUAU GACUAAAAAA AAAAAAAAAA | |||
| AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAAAAAAAA AAAA | |||
| </code></pre> | |||
| <p>This is 30 A’s, then a “10 nucleotide linker” (GCAUAUGACU), followed by another 70 | |||
| A’s.</p> | |||
| <p>There are various theories why this linker is there. Some people tell me it | |||
| has to do with DNA plasmid stability, I have also received this from an | |||
| actual expert:</p> | |||
| <p>“The 10-nucleotide linker within the poly(A) tail makes it easier to stitch | |||
| together the synthetic DNA fragments that become the template for transcribing | |||
| the mRNA. It also reduces slipping by T7 RNA polymerase so that the | |||
| transcribed mRNA is more uniform in length”.</p> | |||
| <h2 id="summarising">Summarising</h2> | |||
| <p>With this, we now know the exact mRNA contents of the BNT162b2 vaccine, and | |||
| for most parts we understand why they are there:</p> | |||
| <ul> | |||
| <li>The CAP to make sure the RNA looks like regular mRNA</li> | |||
| <li>A known successful and optimized 5’ untranslated region (UTR)</li> | |||
| <li>A codon optimized signal peptide to send the Spike protein to the right | |||
| place (copied 100% from the original virus)</li> | |||
| <li>A codon optimized version of the original spike, with two ‘Proline’ | |||
| substitutions to make sure the protein appears in the right form</li> | |||
| <li>A known successful and optimized 3’ untranslated region</li> | |||
| <li>A slightly mysterious poly-A tail with an unexplained ‘linker’ in there</li> | |||
| </ul> | |||
| <p>The codon optimization adds a lot of G and C to the mRNA. Meanwhile, using Ψ | |||
| (1-methyl-3’-pseudouridylyl) instead of U helps evade our immune system, so | |||
| the mRNA stays around long enough so we can actually help train the immune | |||
| system.</p> | |||
| <h2 id="further-reading-viewing">Further reading/viewing</h2> | |||
| <p>In 2017 I held a two hour presentation on DNA, which you can <a href="https://berthub.eu/dna" target="_blank">view | |||
| here</a>. Like this page it is aimed at computer | |||
| people.</p> | |||
| <p>In addition, I’ve been maintaining a page on ‘<a href="https://berthub.eu/amazing-dna" target="_blank">DNA for | |||
| programmers</a>’ since 2001.</p> | |||
| <p>You might also enjoy <a href="https://berthub.eu/articles/posts/immune-system/" target="_blank">this introduction to our amazing immune | |||
| system</a>.</p> | |||
| <p>Finally, <a href="https://berthub.eu/articles" target="_blank">this listing of my blog posts</a> has quite some | |||
| DNA, SARS-CoV-2 and COVID related material.</p> | |||
+ 162
- 0
cache/2021/78f2e167938eb4bfa6747503aefe45c1/index.html
Voir le fichier
| @@ -0,0 +1,162 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>We Quit Our Jobs to Build a Cabin-Everything Went Wrong (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>We Quit Our Jobs to Build a Cabin-Everything Went Wrong</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <div class="c-flex-article__body post-entry spacing "> | |||
| <p>Long hikes, casual breaks, and leisurely river sessions immediately went out the window. There was no time. In part, because we hadn’t anticipated the little things. The forest floor was steeply sloped and covered in rain-slicked clay and fern root balls that grabbed at our feet. Our shoes became caked in mud. We slid and fell, and when that happened, our tape measure’s delicate hold on some distant piece of lumber was lost, forcing us to start over. We never overcame these time warps, like how long it took to shift a ladder on a hillside—we had to dig new holes with every move to provide equal footing for the ladder’s legs. Or how easily we lost entire days sourcing materials at the lumberyard 45 minutes away. Hundreds of boards went into the structure, and we hand selected every one, eyeing them carefully to ensure they weren’t overly warped, bowed, twisted, or cupped. </p> | |||
| <p>Days cascaded into weeks. We’d rise at 5 a.m. and build until the dimming light made it impossible to work anymore. By 9 p.m., we’d head to the bar and use the Wi-Fi to madly produce copy for freelance writing ventures that barely kept our bank accounts afloat. Many of our casual promises—the family camping trips, the birthday parties, the breaks to spend time with our girlfriends—would soon be broken. </p> | |||
| <p>On a hot day in August, we experienced what was by turns the most bewildering and soul-crushing task of the build: getting the ridge beam in place. It was 28 feet long and hundreds of pounds, and it needed to be perched atop the highest point of the cabin, spanning the gap between the two tallest walls. We eventually produced a jimmy-rigged contraption that, in the kindest terms, might be called a slow-motion catapult that could (maybe) hoist the ridge beam into place.</p> | |||
| <p>Anything improvised like this to help ourselves accomplish a job, we referred to as “jazz.” As in: <em>How on earth are we going to lift this beam without a giant crane?</em> Answer: <em>We’ll just rig up some jazz</em>. The word was useful in its lack of specificity, delaying a problem and its potential fix until there was nothing left to do but finally create the jazz. </p> | |||
| <p>In some ways, the whole cabin was jazz. When we had nothing but the floor, we were still sketching and debating ridiculous design ideas over our morning coffee—curved, pagoda-style rooflines; walls that folded down into decks; a spiral staircase wrapping around a tree trunk to the loft—as if we were made of money and time. As if we were imbued with the skills of master tradespeople. As if our girlfriends wouldn’t mind us disappearing, maybe forever, to build a hut of fancy and ruin. </p> | |||
| <p>The catapult was the definition of jazz:<strong> </strong>a mess of ropes, screws, ratchet straps, and random bracing, then a longer rope that extended from the beam to the towing hitch of Pat’s Subaru at the top of the sloped lot. Around midday, one of our neighbors—a burly, muscled airplane mechanic named Jordy—stopped by, saw the jazz, and with noticeable alarm said, “Holy shit.” He brought down more ratchet straps to add to the pile and then stayed to cheer us on. After eight hours of struggle and one last tug from Pat’s Subaru, the ridge beam slid into its perch. We placed a four-foot-long level on it and, with unbridled relief, saw that its bubble was dead center. </p> | |||
| <p>That night, exhausted but content, we jumped in the river and had a fire on its banks. We got good and drunk and temporarily forgot about the fact that we still had to cut and attach the rafters, build out the roof, install the door, finish the siding and windows, construct the kitchen and bathroom, put in the wood-burning stove, finish the loft, insulate and clad the walls, wire and plumb everything, never mind the finish tasks of trim, tile, light fixtures, and on and on.</p> </div> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 12
- 0
cache/2021/78f2e167938eb4bfa6747503aefe45c1/index.md
Voir le fichier
| @@ -0,0 +1,12 @@ | |||
| title: We Quit Our Jobs to Build a Cabin-Everything Went Wrong | |||
| url: https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington | |||
| hash_url: 78f2e167938eb4bfa6747503aefe45c1 | |||
| <div class="c-flex-article__body post-entry spacing "> | |||
| <p>Long hikes, casual breaks, and leisurely river sessions immediately went out the window. There was no time. In part, because we hadn’t anticipated the little things. The forest floor was steeply sloped and covered in rain-slicked clay and fern root balls that grabbed at our feet. Our shoes became caked in mud. We slid and fell, and when that happened, our tape measure’s delicate hold on some distant piece of lumber was lost, forcing us to start over. We never overcame these time warps, like how long it took to shift a ladder on a hillside—we had to dig new holes with every move to provide equal footing for the ladder’s legs. Or how easily we lost entire days sourcing materials at the lumberyard 45 minutes away. Hundreds of boards went into the structure, and we hand selected every one, eyeing them carefully to ensure they weren’t overly warped, bowed, twisted, or cupped. </p> | |||
| <p>Days cascaded into weeks. We’d rise at 5 a.m. and build until the dimming light made it impossible to work anymore. By 9 p.m., we’d head to the bar and use the Wi-Fi to madly produce copy for freelance writing ventures that barely kept our bank accounts afloat. Many of our casual promises—the family camping trips, the birthday parties, the breaks to spend time with our girlfriends—would soon be broken. </p> | |||
| <p>On a hot day in August, we experienced what was by turns the most bewildering and soul-crushing task of the build: getting the ridge beam in place. It was 28 feet long and hundreds of pounds, and it needed to be perched atop the highest point of the cabin, spanning the gap between the two tallest walls. We eventually produced a jimmy-rigged contraption that, in the kindest terms, might be called a slow-motion catapult that could (maybe) hoist the ridge beam into place.</p> | |||
| <p>Anything improvised like this to help ourselves accomplish a job, we referred to as “jazz.” As in: <em>How on earth are we going to lift this beam without a giant crane?</em> Answer: <em>We’ll just rig up some jazz</em>. The word was useful in its lack of specificity, delaying a problem and its potential fix until there was nothing left to do but finally create the jazz. </p> | |||
| <p>In some ways, the whole cabin was jazz. When we had nothing but the floor, we were still sketching and debating ridiculous design ideas over our morning coffee—curved, pagoda-style rooflines; walls that folded down into decks; a spiral staircase wrapping around a tree trunk to the loft—as if we were made of money and time. As if we were imbued with the skills of master tradespeople. As if our girlfriends wouldn’t mind us disappearing, maybe forever, to build a hut of fancy and ruin. </p> | |||
| <p>The catapult was the definition of jazz:<strong> </strong>a mess of ropes, screws, ratchet straps, and random bracing, then a longer rope that extended from the beam to the towing hitch of Pat’s Subaru at the top of the sloped lot. Around midday, one of our neighbors—a burly, muscled airplane mechanic named Jordy—stopped by, saw the jazz, and with noticeable alarm said, “Holy shit.” He brought down more ratchet straps to add to the pile and then stayed to cheer us on. After eight hours of struggle and one last tug from Pat’s Subaru, the ridge beam slid into its perch. We placed a four-foot-long level on it and, with unbridled relief, saw that its bubble was dead center. </p> | |||
| <p>That night, exhausted but content, we jumped in the river and had a fire on its banks. We got good and drunk and temporarily forgot about the fact that we still had to cut and attach the rafters, build out the roof, install the door, finish the siding and windows, construct the kitchen and bathroom, put in the wood-burning stove, finish the loft, insulate and clad the walls, wire and plumb everything, never mind the finish tasks of trim, tile, light fixtures, and on and on.</p> </div> | |||
+ 753
- 0
cache/2021/99c13c692ec7f2217311fdea482e8792/index.html
Voir le fichier
| @@ -0,0 +1,753 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Newsletters (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://www.robinrendle.com/essays/newsletters"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>Newsletters</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://www.robinrendle.com/essays/newsletters" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p class="date">Robin Rendle <span>∙</span> <time datetime="2021-01-03">January 2021</time></p> | |||
| <h1>Newsletters; or, an enormous rant about writing on the web that doesn’t really go anywhere and that’s okay with me</h1> | |||
| </div> | |||
| </div> | |||
| <p><div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>My friend Lucy once told me that she falls in love with the way that someone thinks…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…and that’s what newsletters make possible for me; they’re a record of how strangers see the world.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Newsletters give me permission to fall in love with someone I'll never meet…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…someone very far away…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And over the past few years I’ve fallen in love with so many writers through newsletters! On all sorts of subjects!</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>There are dazzling newsletters; those of grand adventures and epic mysteries…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>...and newsletters about complex systems, showing us how the world is put together.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A dog plays the flute" src="https://d33wubrfki0l68.cloudfront.net/d561957fb23e7842203c89825723fdc17910f610/acbbb/uploads/essays/on-newsletters/09-playing-flute.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…<em>weird.</em></p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>So my question here is a difficult one to ask, because I love newsletters so very much…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…but is this progress?</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>I guess there’s something about newsletters that bugs me, and I can’t put my finger on it.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Edison’s electric pen" src="https://d33wubrfki0l68.cloudfront.net/051aa2fae6276a558deb5941d7fc011472948fd8/930e6/uploads/essays/on-newsletters/13-edisons-electric-pen.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A carbonated water factory" src="https://d33wubrfki0l68.cloudfront.net/3fab155f4d6f0380525aa790818a93a1d71a269b/115b1/uploads/essays/on-newsletters/14-carbonated-water-factory.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Heck, just the technical expertise required to have your own website is extremely cumbersome and inaccessible to many.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>You might think: ah, newsletters are the future because that’s where the money is!</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Despite these super powers, I still think that using email to send words to each other is just entirely <em>ugh</em>.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Books are so much better than parchment in the same way that websites are so much better than email.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A person setting metal type" src="https://d33wubrfki0l68.cloudfront.net/bb41e3e2a635d17cad73d9fe3cba57c62f6c62d4/638ad/uploads/essays/on-newsletters/20-printing-form.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Yet websites are treated as these embarrassing, ugly, ad-riddled things, whilst newsletters have established some kind of prestige for themselves somehow.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Nusretiye Mosque" src="https://d33wubrfki0l68.cloudfront.net/106d88b3c5da825ac8dc6a1ac874db5e9e8be996/6878b/uploads/essays/on-newsletters/23-nusretiye-mosque.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>The web doesn’t have to be this ugly and embarrassing thing though; the web can be made beautiful.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…inescapable if you want to be a writer today.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Skull and crossbones" src="https://d33wubrfki0l68.cloudfront.net/50443029f6930c4250393f9d154c587ca4722bf8/6f463/uploads/essays/on-newsletters/25-skull-crossbones.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Newsletters killed blogs because…</p> | |||
| <ol> | |||
| <li>They’re impossibly easy to publish.</li> | |||
| <li>Your inbox is a notification stream.</li> | |||
| <li>Writers can actually, ya know, get paid.</li> | |||
| </ol> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Alternatively, websites today…</p> | |||
| <ol> | |||
| <li>Are difficult to make.</li> | |||
| <li>Can’t notify people of new work.</li> | |||
| <li>Aren’t able to pay writers easily.</li> | |||
| </ol> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A handmade organ" src="https://d33wubrfki0l68.cloudfront.net/5c7f0e88c79599cbed4f73bf2449f25f1bde123e/d41de/uploads/essays/on-newsletters/28-organ.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="The bottom of the sea" src="https://d33wubrfki0l68.cloudfront.net/22aa7cf975643500375ec3bec1c9ece122506b11/23d58/uploads/essays/on-newsletters/29-bottom-sea.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A beautiful landscape" src="https://d33wubrfki0l68.cloudfront.net/8a2adc213e90bdf0bb5727d07978a2ab5dc02eb4/8615b/uploads/essays/on-newsletters/30-abbey-mussorie.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…how do we make the web for everyone?</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Let’s take a closer look.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part One</h2> | |||
| <p>Websites are too damn complicated</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Websites haven’t gotten any easier to make over the past thirty years.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Demons gather in hell" src="https://d33wubrfki0l68.cloudfront.net/aede02a0b877742845b8f896d69203b5e73dcbb7/17af5/uploads/essays/on-newsletters/33-dreadful-din.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A gondola falls from the sky" src="https://d33wubrfki0l68.cloudfront.net/5211b81dae7aafdf73db9f9b65adff9400e68a3e/de8fd/uploads/essays/on-newsletters/34-gondola.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/0b4b6d8637de1b732a24fc336ca59420899df97a/6aad8/uploads/essays/on-newsletters/38-sea-biscuit-machine.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/d9a04384e9c2cb195a82c222ec03517d946c8116/5409e/uploads/essays/on-newsletters/39-appeared-flash.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>I reckon this is the future we should be striving towards.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part Two</h2> | |||
| <p>RSS is for Nerds</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And yet the web sort of has this built-in notification stream and sort of…doesn’t at the same time.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Basically my whole political platform is this: <abbr title="Really Simple Syndication">RSS</abbr> is the promised land.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A dog reads the newspaper" src="https://d33wubrfki0l68.cloudfront.net/dd39c33ad7f91cd3937bc381cba38e35ed8a02bd/09875/uploads/essays/on-newsletters/46-reading-news.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Manufacturing glass bottles" src="https://d33wubrfki0l68.cloudfront.net/830a5353ef847a92a59f9257e23dca22ccb53c9e/c9088/uploads/essays/on-newsletters/47-manufacture-bottles.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A microscope" src="https://d33wubrfki0l68.cloudfront.net/af54d289a7b823eb99090271a6260cb4b4160743/ed9ee/uploads/essays/on-newsletters/48-microscope.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/6210faf1e6db0b8a4dbc3434d7547559e246e8a0/09a03/uploads/essays/on-newsletters/49-creusot-steam-hammer.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/97f535fa44d3867727163ad7987e6f6cad44dcf1/ec7cc/uploads/essays/on-newsletters/50-halleys-diving-bell.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Eads Bridge" src="https://d33wubrfki0l68.cloudfront.net/0eee64b31a37b2f46c9369bbb8c1e87b96bd92b4/15687/uploads/essays/on-newsletters/51-eads-bridge.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And if we could subscribe to websites easily then the web itself might not feel quite so forgettable.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part Three</h2> | |||
| <p>Paying writers is too damn hard</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/fc0441cc652ec765212fce76b4681000a4416494/d2268/uploads/essays/on-newsletters/55-diamond-boring-machine.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/9d6a66b45c875b2d0e20f34e72a9b8ae102be9b6/bc47a/uploads/essays/on-newsletters/56-corpse-candles.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img class="slide-img__coins" alt="Coins" src="https://d33wubrfki0l68.cloudfront.net/679a7dfc3d46f1165bfc732d13669c5711ef410b/e8a6e/uploads/essays/on-newsletters/58-coins.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="" src="https://d33wubrfki0l68.cloudfront.net/9f9a6564620437a47899dc96a111f648424a9665/99575/uploads/essays/on-newsletters/59-dragged.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A painter at work" src="https://d33wubrfki0l68.cloudfront.net/7587591963c6c5d1669fd5daf0d73d499647a857/29303/uploads/essays/on-newsletters/60-painter-at-work.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>My point is this: there’s a viable alternative to newsletters if we fill in all these gaps.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Instead, I see the web as this public good that’s been hijacked by companies trying to sell us mostly heartless junk.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/951638265d560f2edf87fbde65c885007fd67087/00fd1/uploads/essays/on-newsletters/65-scotch-soldiers.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>The web today is built for apps—and I think we need to take it back.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/9b1770c131eee0001fae9ed4daa918d6dc3efb0b/ddbd6/uploads/essays/on-newsletters/66-time-zone-watch.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A woman reads a letter" src="https://d33wubrfki0l68.cloudfront.net/8b43b25d450b70601565f2208f15e12e4e94441a/43b84/uploads/essays/on-newsletters/67-imogen.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/bbb7dc5e7515a24e1111fe1ba9398ef4744c44f2/8e05f/uploads/essays/on-newsletters/68-arm-glided.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>What this also shows me is that we haven’t given everything up to social networks yet. This makes me hopeful…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/3f8c5b9e0f6632d5a577439aef737517c9f45462/c73bc/uploads/essays/on-newsletters/69-electrical-devices.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…because the web is still unfinished and there’s so much work left to do.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide--empty"></div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Making a toast at dinner" src="https://d33wubrfki0l68.cloudfront.net/5f7ab537a82a544e7e0476506c67f887d3f23add/ccb64/uploads/essays/on-newsletters/70-toast.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A man saying goodbye" src="https://d33wubrfki0l68.cloudfront.net/f42cfe7701cea3ef92ab5a172ac2e68b418ef8eb/f07fa/uploads/essays/on-newsletters/71-after-dark.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Now go away.</p> | |||
| </div> | |||
| </div></p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 602
- 0
cache/2021/99c13c692ec7f2217311fdea482e8792/index.md
Voir le fichier
| @@ -0,0 +1,602 @@ | |||
| title: Newsletters | |||
| url: https://www.robinrendle.com/essays/newsletters | |||
| hash_url: 99c13c692ec7f2217311fdea482e8792 | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p class="date">Robin Rendle <span>∙</span> <time datetime="2021-01-03">January 2021</time></p> | |||
| <h1>Newsletters; or, an enormous rant about writing on the web that doesn’t really go anywhere and that’s okay with me</h1> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>My friend Lucy once told me that she falls in love with the way that someone thinks…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…and that’s what newsletters make possible for me; they’re a record of how strangers see the world.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Newsletters give me permission to fall in love with someone I'll never meet…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…someone very far away…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And over the past few years I’ve fallen in love with so many writers through newsletters! On all sorts of subjects!</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>There are dazzling newsletters; those of grand adventures and epic mysteries…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>...and newsletters about complex systems, showing us how the world is put together.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A dog plays the flute" src="https://d33wubrfki0l68.cloudfront.net/d561957fb23e7842203c89825723fdc17910f610/acbbb/uploads/essays/on-newsletters/09-playing-flute.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…<em>weird.</em></p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>So my question here is a difficult one to ask, because I love newsletters so very much…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…but is this progress?</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>I guess there’s something about newsletters that bugs me, and I can’t put my finger on it.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Edison’s electric pen" src="https://d33wubrfki0l68.cloudfront.net/051aa2fae6276a558deb5941d7fc011472948fd8/930e6/uploads/essays/on-newsletters/13-edisons-electric-pen.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A carbonated water factory" src="https://d33wubrfki0l68.cloudfront.net/3fab155f4d6f0380525aa790818a93a1d71a269b/115b1/uploads/essays/on-newsletters/14-carbonated-water-factory.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Heck, just the technical expertise required to have your own website is extremely cumbersome and inaccessible to many.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>You might think: ah, newsletters are the future because that’s where the money is!</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Despite these super powers, I still think that using email to send words to each other is just entirely <em>ugh</em>.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Books are so much better than parchment in the same way that websites are so much better than email.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A person setting metal type" src="https://d33wubrfki0l68.cloudfront.net/bb41e3e2a635d17cad73d9fe3cba57c62f6c62d4/638ad/uploads/essays/on-newsletters/20-printing-form.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Yet websites are treated as these embarrassing, ugly, ad-riddled things, whilst newsletters have established some kind of prestige for themselves somehow.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Nusretiye Mosque" src="https://d33wubrfki0l68.cloudfront.net/106d88b3c5da825ac8dc6a1ac874db5e9e8be996/6878b/uploads/essays/on-newsletters/23-nusretiye-mosque.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>The web doesn’t have to be this ugly and embarrassing thing though; the web can be made beautiful.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…inescapable if you want to be a writer today.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Skull and crossbones" src="https://d33wubrfki0l68.cloudfront.net/50443029f6930c4250393f9d154c587ca4722bf8/6f463/uploads/essays/on-newsletters/25-skull-crossbones.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Newsletters killed blogs because…</p> | |||
| <ol> | |||
| <li>They’re impossibly easy to publish.</li> | |||
| <li>Your inbox is a notification stream.</li> | |||
| <li>Writers can actually, ya know, get paid.</li> | |||
| </ol> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Alternatively, websites today…</p> | |||
| <ol> | |||
| <li>Are difficult to make.</li> | |||
| <li>Can’t notify people of new work.</li> | |||
| <li>Aren’t able to pay writers easily.</li> | |||
| </ol> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A handmade organ" src="https://d33wubrfki0l68.cloudfront.net/5c7f0e88c79599cbed4f73bf2449f25f1bde123e/d41de/uploads/essays/on-newsletters/28-organ.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="The bottom of the sea" src="https://d33wubrfki0l68.cloudfront.net/22aa7cf975643500375ec3bec1c9ece122506b11/23d58/uploads/essays/on-newsletters/29-bottom-sea.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A beautiful landscape" src="https://d33wubrfki0l68.cloudfront.net/8a2adc213e90bdf0bb5727d07978a2ab5dc02eb4/8615b/uploads/essays/on-newsletters/30-abbey-mussorie.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…how do we make the web for everyone?</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Let’s take a closer look.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part One</h2> | |||
| <p>Websites are too damn complicated</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Websites haven’t gotten any easier to make over the past thirty years.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Demons gather in hell" src="https://d33wubrfki0l68.cloudfront.net/aede02a0b877742845b8f896d69203b5e73dcbb7/17af5/uploads/essays/on-newsletters/33-dreadful-din.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A gondola falls from the sky" src="https://d33wubrfki0l68.cloudfront.net/5211b81dae7aafdf73db9f9b65adff9400e68a3e/de8fd/uploads/essays/on-newsletters/34-gondola.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/0b4b6d8637de1b732a24fc336ca59420899df97a/6aad8/uploads/essays/on-newsletters/38-sea-biscuit-machine.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Sea biscuit machine" src="https://d33wubrfki0l68.cloudfront.net/d9a04384e9c2cb195a82c222ec03517d946c8116/5409e/uploads/essays/on-newsletters/39-appeared-flash.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>I reckon this is the future we should be striving towards.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part Two</h2> | |||
| <p>RSS is for Nerds</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And yet the web sort of has this built-in notification stream and sort of…doesn’t at the same time.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Basically my whole political platform is this: <abbr title="Really Simple Syndication">RSS</abbr> is the promised land.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A dog reads the newspaper" src="https://d33wubrfki0l68.cloudfront.net/dd39c33ad7f91cd3937bc381cba38e35ed8a02bd/09875/uploads/essays/on-newsletters/46-reading-news.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Manufacturing glass bottles" src="https://d33wubrfki0l68.cloudfront.net/830a5353ef847a92a59f9257e23dca22ccb53c9e/c9088/uploads/essays/on-newsletters/47-manufacture-bottles.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A microscope" src="https://d33wubrfki0l68.cloudfront.net/af54d289a7b823eb99090271a6260cb4b4160743/ed9ee/uploads/essays/on-newsletters/48-microscope.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/6210faf1e6db0b8a4dbc3434d7547559e246e8a0/09a03/uploads/essays/on-newsletters/49-creusot-steam-hammer.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="An enormous steam hammer" src="https://d33wubrfki0l68.cloudfront.net/97f535fa44d3867727163ad7987e6f6cad44dcf1/ec7cc/uploads/essays/on-newsletters/50-halleys-diving-bell.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Eads Bridge" src="https://d33wubrfki0l68.cloudfront.net/0eee64b31a37b2f46c9369bbb8c1e87b96bd92b4/15687/uploads/essays/on-newsletters/51-eads-bridge.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>And if we could subscribe to websites easily then the web itself might not feel quite so forgettable.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide-chapter"> | |||
| <div class="slide-text"> | |||
| <h2>Part Three</h2> | |||
| <p>Paying writers is too damn hard</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/fc0441cc652ec765212fce76b4681000a4416494/d2268/uploads/essays/on-newsletters/55-diamond-boring-machine.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A diamond boring machine" src="https://d33wubrfki0l68.cloudfront.net/9d6a66b45c875b2d0e20f34e72a9b8ae102be9b6/bc47a/uploads/essays/on-newsletters/56-corpse-candles.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img class="slide-img__coins" alt="Coins" src="https://d33wubrfki0l68.cloudfront.net/679a7dfc3d46f1165bfc732d13669c5711ef410b/e8a6e/uploads/essays/on-newsletters/58-coins.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="" src="https://d33wubrfki0l68.cloudfront.net/9f9a6564620437a47899dc96a111f648424a9665/99575/uploads/essays/on-newsletters/59-dragged.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A painter at work" src="https://d33wubrfki0l68.cloudfront.net/7587591963c6c5d1669fd5daf0d73d499647a857/29303/uploads/essays/on-newsletters/60-painter-at-work.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>My point is this: there’s a viable alternative to newsletters if we fill in all these gaps.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <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"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Instead, I see the web as this public good that’s been hijacked by companies trying to sell us mostly heartless junk.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/951638265d560f2edf87fbde65c885007fd67087/00fd1/uploads/essays/on-newsletters/65-scotch-soldiers.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>The web today is built for apps—and I think we need to take it back.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Knights storm a castle" src="https://d33wubrfki0l68.cloudfront.net/9b1770c131eee0001fae9ed4daa918d6dc3efb0b/ddbd6/uploads/essays/on-newsletters/66-time-zone-watch.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A woman reads a letter" src="https://d33wubrfki0l68.cloudfront.net/8b43b25d450b70601565f2208f15e12e4e94441a/43b84/uploads/essays/on-newsletters/67-imogen.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/bbb7dc5e7515a24e1111fe1ba9398ef4744c44f2/8e05f/uploads/essays/on-newsletters/68-arm-glided.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>What this also shows me is that we haven’t given everything up to social networks yet. This makes me hopeful…</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A monster attacks a ship" src="https://d33wubrfki0l68.cloudfront.net/3f8c5b9e0f6632d5a577439aef737517c9f45462/c73bc/uploads/essays/on-newsletters/69-electrical-devices.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>…because the web is still unfinished and there’s so much work left to do.</p> | |||
| </div> | |||
| </div> | |||
| <div class="slide slide--empty"></div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="Making a toast at dinner" src="https://d33wubrfki0l68.cloudfront.net/5f7ab537a82a544e7e0476506c67f887d3f23add/ccb64/uploads/essays/on-newsletters/70-toast.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <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> | |||
| </div> | |||
| </div> | |||
| <div class="slide"> | |||
| <div class="slide-img"> | |||
| <img alt="A man saying goodbye" src="https://d33wubrfki0l68.cloudfront.net/f42cfe7701cea3ef92ab5a172ac2e68b418ef8eb/f07fa/uploads/essays/on-newsletters/71-after-dark.jpg" loading="lazy"/> | |||
| </div> | |||
| <div class="slide-text"> | |||
| <p>Now go away.</p> | |||
| </div> | |||
| </div> | |||
+ 360
- 0
cache/2021/ab9f293c34ce421ab41465fcda8893fe/index.html
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier
+ 242
- 0
cache/2021/ab9f293c34ce421ab41465fcda8893fe/index.md
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier
+ 164
- 0
cache/2021/aeb0a60038b91bf1fbbbd39b358366fb/index.html
Voir le fichier
| @@ -0,0 +1,164 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>☕️ Journal : Statu quo (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://oncletom.io/2021/01/05/statu-quo/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>☕️ Journal : Statu quo</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://oncletom.io/2021/01/05/statu-quo/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>J’ai pendant longtemps ignoré la portée de la locution statu quo_. J’ai par la suite beaucoup entendu ce terme dans la description des mécanismes de domination et d’oppression.</p> | |||
| <p>Je le comprends comme “quelque chose qui ne bouge pas”.</p> | |||
| <p>En le prenant sous l’angle de l’<a href="/2021/01/05/impermanence/">impermanence</a>, j’ai réalisé que le <em>statu quo</em> n’était pas une forme passive. Ce n’est pas “quelque chose qui ne bouge pas”, “quelque chose qui ne change pas”… mais un “ensemble d’efforts pour que quelque chose soit maintenu tel quel”.</p> | |||
| <p>Le <em>statu quo</em> est alors un <strong>choix constamment renouvelé</strong> — un mouvement permanent — pour maintenir une chose dans son état actuel.</p> | |||
| <p><hr> | |||
| <p>Le <em>statu quo</em> n’a rien de passif. C’est même très actif. Dire “c’est comme ça”, “on n’y peut rien” ; c’est faire un choix actif en se protégeant, par la validation d’une norme, d’un regard silencieux qui cautionne ce choix actif.</p></p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 10
- 0
cache/2021/aeb0a60038b91bf1fbbbd39b358366fb/index.md
Voir le fichier
| @@ -0,0 +1,10 @@ | |||
| title: ☕️ Journal : Statu quo | |||
| url: https://oncletom.io/2021/01/05/statu-quo/ | |||
| hash_url: aeb0a60038b91bf1fbbbd39b358366fb | |||
| <p>J’ai pendant longtemps ignoré la portée de la locution statu quo_. J’ai par la suite beaucoup entendu ce terme dans la description des mécanismes de domination et d’oppression.</p> | |||
| <p>Je le comprends comme “quelque chose qui ne bouge pas”.</p> | |||
| <p>En le prenant sous l’angle de l’<a href="/2021/01/05/impermanence/">impermanence</a>, j’ai réalisé que le <em>statu quo</em> n’était pas une forme passive. Ce n’est pas “quelque chose qui ne bouge pas”, “quelque chose qui ne change pas”… mais un “ensemble d’efforts pour que quelque chose soit maintenu tel quel”.</p> | |||
| <p>Le <em>statu quo</em> est alors un <strong>choix constamment renouvelé</strong> — un mouvement permanent — pour maintenir une chose dans son état actuel.</p> | |||
| <hr> | |||
| <p>Le <em>statu quo</em> n’a rien de passif. C’est même très actif. Dire “c’est comme ça”, “on n’y peut rien” ; c’est faire un choix actif en se protégeant, par la validation d’une norme, d’un regard silencieux qui cautionne ce choix actif.</p> | |||
+ 176
- 0
cache/2021/c8678419b1c96d90ea066a3f6f6e3479/index.html
Voir le fichier
| @@ -0,0 +1,176 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>When Are We Back To Normal? (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://inessential.com/2020/12/31/when_are_we_back_to_normal"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>When Are We Back To Normal?</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://inessential.com/2020/12/31/when_are_we_back_to_normal" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>I’m trying to figure out when we’ll be back to something like normal. I’m thinking of a few things:</p> | |||
| <ul> | |||
| <li>Biden’s goal is 100 million doses in his first 100 days</li> | |||
| <li>The vaccines require two doses</li> | |||
| <li>There are 330 million people in the United States</li> | |||
| <li>Dr. Fauci has said that we’ll achieve herd immunity once we have 70-85% of the population vaccinated</li> | |||
| </ul> | |||
| <p>Let’s say we achieve herd immunity, and some kind or normalcy, at around 250 million people vaccinated, which is just over 75%.</p> | |||
| <p>Since each person requires two doses, that’s 500 million doses.</p> | |||
| <p>The pace Biden is aiming for is 1 million doses per day. If we’re able to achieve and sustain that pace starting late in January — which is not at all a sure thing — we’ll have administered 500 million doses around mid-year 2022.</p> | |||
| <p>I keep hearing people talk optimistically about April or May of 2021. Me, I’m hoping to be able to see my family for Thanksgiving and Christmas 2021, but I’m not counting on it as a sure thing.</p> | |||
| <p>We’re going to need to go much faster with the vaccines. To reach 75% of the population by, say, Labor Day, in time for kids to go back to school, we’re going to need to administer 500 million doses by mid-August, about seven months after Biden’s inauguration. (Remember that immunity is ramped up about two weeks after the second dose.) To make this happen we’ll need to administer 2-2.5 million doses per day.</p> | |||
| <p>I don’t see how we get there by counting on local drug stores to administer most of the doses. I suspect we’re going to need to use parks and high school football fields — big, open spaces where large crowds can line up safely. And we’re going to need to do it day after day, with no days off.</p> | |||
| <p>(Is any of my math wrong? There’s no point in being overly-precise here — but please tell me if I’ve made some error that changes things significantly.)</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 26
- 0
cache/2021/c8678419b1c96d90ea066a3f6f6e3479/index.md
Voir le fichier
| @@ -0,0 +1,26 @@ | |||
| title: When Are We Back To Normal? | |||
| url: https://inessential.com/2020/12/31/when_are_we_back_to_normal | |||
| hash_url: c8678419b1c96d90ea066a3f6f6e3479 | |||
| <p>I’m trying to figure out when we’ll be back to something like normal. I’m thinking of a few things:</p> | |||
| <ul> | |||
| <li>Biden’s goal is 100 million doses in his first 100 days</li> | |||
| <li>The vaccines require two doses</li> | |||
| <li>There are 330 million people in the United States</li> | |||
| <li>Dr. Fauci has said that we’ll achieve herd immunity once we have 70-85% of the population vaccinated</li> | |||
| </ul> | |||
| <p>Let’s say we achieve herd immunity, and some kind or normalcy, at around 250 million people vaccinated, which is just over 75%.</p> | |||
| <p>Since each person requires two doses, that’s 500 million doses.</p> | |||
| <p>The pace Biden is aiming for is 1 million doses per day. If we’re able to achieve and sustain that pace starting late in January — which is not at all a sure thing — we’ll have administered 500 million doses around mid-year 2022.</p> | |||
| <p>I keep hearing people talk optimistically about April or May of 2021. Me, I’m hoping to be able to see my family for Thanksgiving and Christmas 2021, but I’m not counting on it as a sure thing.</p> | |||
| <p>We’re going to need to go much faster with the vaccines. To reach 75% of the population by, say, Labor Day, in time for kids to go back to school, we’re going to need to administer 500 million doses by mid-August, about seven months after Biden’s inauguration. (Remember that immunity is ramped up about two weeks after the second dose.) To make this happen we’ll need to administer 2-2.5 million doses per day.</p> | |||
| <p>I don’t see how we get there by counting on local drug stores to administer most of the doses. I suspect we’re going to need to use parks and high school football fields — big, open spaces where large crowds can line up safely. And we’re going to need to do it day after day, with no days off.</p> | |||
| <p>(Is any of my math wrong? There’s no point in being overly-precise here — but please tell me if I’ve made some error that changes things significantly.)</p> | |||
+ 262
- 0
cache/2021/f1df3d5f1720e137130581d5a2b8549f/index.html
Voir le fichier
| @@ -0,0 +1,262 @@ | |||
| <!doctype html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the <title> | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title>Built to Last (archive) — David Larlet</title> | |||
| <meta name="description" content="Publication mise en cache pour en conserver une trace."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f0f0ea"> | |||
| <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" content="#f0f0ea"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <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> | |||
| <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> | |||
| <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> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <meta name="robots" content="noindex, nofollow"> | |||
| <meta content="origin-when-cross-origin" name="referrer"> | |||
| <!-- Canonical URL for SEO purposes --> | |||
| <link rel="canonical" href="https://logicmag.io/care/built-to-last/"> | |||
| <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick"> | |||
| <article> | |||
| <header> | |||
| <h1>Built to Last</h1> | |||
| </header> | |||
| <nav> | |||
| <p class="center"> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="https://logicmag.io/care/built-to-last/" title="Lien vers le contenu original">Source originale</a> | |||
| </p> | |||
| </nav> | |||
| <hr> | |||
| <p>At the time of this writing, in July 2020, the COVID-19 pandemic has killed over 133,000 people in the United States. The dead are disproportionately Black and Latinx people and those who were unable, or not allowed by their employers, to work remotely. During the pandemic, we’ve seen our technological infrastructures assume ever more importance—from the communications technology that allows people with the means and privilege to telecommute, to the platforms that amplify public health information or deadly, politicized misinformation. We’ve also seen some of the infrastructure that runs the social safety net break down under an increasing load. This includes state unemployment systems that pay workers the benefits they’ve contributed to for decades through taxes. In a global pandemic, being able to work from home, to quit and live on savings, or to be laid off and draw unemployment benefits has literally become a matter of life and death. </p> | |||
| <p>The cracks in our technological infrastructure became painfully evident in the spring, as US corporations responded to the pandemic by laying off more and more workers. So many people had to file for unemployment at once that computerized unemployment claim systems started to malfunction. Around the country, phone lines jammed, websites crashed, and millions of people faced the possibility of not being able to pay for rent, medicine, or food. </p> | |||
| <p>As the catastrophe unfolded, several state governments blamed it on aged, supposedly obsolete computer systems written in COBOL, a programming language that originated in the late 1950s. <a href="https://www.theverge.com/2020/4/14/21219561/coronavirus-pandemic-unemployment-systems-cobol-legacy-software-infrastructure"><u>At least a dozen</u></a> state unemployment systems still run on this sixty-one-year-old language, including ones that help administer funds of a billion dollars or more in California, Colorado, and New Jersey. When the deluge of unemployment claims hit, the havoc it seemed to wreak on COBOL systems was so widespread that many states apparently didn’t have enough programmers to repair the damage; the governor of New Jersey even publicly pleaded for the help of volunteers who knew the language.</p> | |||
| <p>But then something strange happened. When scores of COBOL programmers rushed to offer their services, the state governments blaming COBOL didn’t accept the help. In fact, it turned out the states didn’t really need it to begin with. For many reasons, COBOL was an easy scapegoat in this crisis—but in reality what failed wasn’t the technology at all.</p> | |||
| <p> | |||
| </p> | |||
| <h2>A “Dead” Language is Born</h2> | |||
| <p>One of the most remarkable things about the unemployment claims malfunction wasn’t that things might suddenly go terribly wrong with COBOL systems, but that they never had before. Many computerized government and business processes around the world still run on and are actively written in COBOL—from the programs that reconcile almost every credit card transaction around the globe to the ones that administer a disability benefits system serving roughly ten million US veterans. The language remains so important that IBM’s latest, fastest “Z” series of mainframes have COBOL support as a key feature. </p> | |||
| <p>For six decades, systems written in COBOL have proven highly robust—which is exactly what they were designed to be. COBOL was conceived in 1959, when a computer scientist named Mary Hawes, who worked in the electronics division of the business equipment manufacturer Burroughs, called for a meeting of computer professionals at the University of Pennsylvania. Hawes wanted to bring industry, government, and academic experts together to design a programming language for basic business functions, especially finance and accounting, that was easily adaptable to the needs of different organizations and portable between mainframes manufactured by different computer companies. </p> | |||
| <p>The group that Hawes convened evolved into a body called CODASYL, the Conference on Data Systems Languages, which included computer scientists from the major computing hardware manufacturers of the time, as well as the government and the military. CODASYL set out to design a programming language that would be easier to use, easier to read, and easier to maintain than any other programming language then in existence. </p> | |||
| <p>The committee’s central insight was to design the language using terms from plain English, in a way that was more self-explanatory than other languages. With COBOL, which stands for “Common Business-Oriented Language,” the goal was to make the code so readable that the program itself would document how it worked, allowing programmers to understand and maintain the code more easily.</p> | |||
| <p>COBOL is a “problem-oriented” language, whose structure was designed around the goals of business and administrative users, instead of being maximally flexible for the kind of complex mathematical problems that scientific users would need to solve. The main architect of COBOL, Jean Sammet, then a researcher at Sylvania Electric and later a manager at IBM, wrote, “It was certainly intended (and expected) that the language could be used by novice programmers and read by management.” (Although the pioneering computer scientist Grace Hopper has often been referred to as the “mother of COBOL,” her involvement in developing the specification for the language was minimal; Sammet is the one who really deserves the title.)</p> | |||
| <p>Other early high-level programming languages, such as FORTRAN, a language for performing complex mathematical functions, used idiosyncratic abbreviations and mathematical symbols that could be difficult to understand if you weren’t a seasoned user of the language. For example, while a FORTRAN program would require programmers to know mathematical formula notation, and write commands like:</p> | |||
| <p><code>TOTAL = REAL(NINT(EARN * TAX * 100.0))/100.0</code></p> | |||
| <p>users of COBOL could write the same command as: </p> | |||
| <p><code>MULTIPLY EARNINGS BY TAXRATE GIVING SOCIAL-SECUR ROUNDED.</code></p> | |||
| <p>As you can tell from the COBOL version, but probably not from the FORTRAN version, this line of code is a (simplified) example of how both languages could compute a social security payment and round the total to the penny. Because it was designed not just to be written but also to be read, COBOL would make computerized business processes more legible, both for the original programmers and managers and for those who maintained these systems long afterwards. </p> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/3cfhPIvZUdyHOCtsysKTJg/59b22629034cc6714266a25accbfa295/X572_85_COBOL_tombstone_0002.jpg" alt="A granite tombstone with a sheep on top, that reads COBOL."> | |||
| <figcaption>Image of COBOL tombstone, copyright Mark Richards. Courtesy of the Computer History Museum in Mountain View, CA.</figcaption> | |||
| </figure> | |||
| <p></p> | |||
| <p>A portable, easier-to-use programming language was a revolutionary idea for its time, and prefigured many of the programming languages that came after. Yet COBOL was almost pronounced dead even before it was born. In 1960, the year that the language’s specification was published, a member of the CODASYL committee named Howard Bromberg commissioned a little “<a href="https://www.computerhistory.org/revolution/early-computer-companies/5/117/2401"><u>COBOL tombstone</u></a>” as a practical joke. Bromberg, a manager at the electronics company RCA who had earlier worked with Grace Hopper on her FLOW-MATIC language, was concerned that by the time everybody finally got done designing COBOL, competitors working on proprietary languages would have swept the market, locking users into programming languages that might only run well on one manufacturer’s line of machines.</p> | |||
| <p>But when COBOL came out in 1960, less than a year after Mary Hawes’s initial call to action, it was by no means dead on arrival. The earliest demonstrations of COBOL showed the language could be universal across hardware. “The significance of this,” Sammet wrote, with characteristic understatement, was that it meant “compatibility could really be achieved.” Suddenly, computer users had a full-featured cross-platform programming language of far greater power than anything that came before. COBOL was a runaway success. By 1970, it was the most widely used programming language in the world.</p> | |||
| <p> </p> | |||
| <h2>Scapegoats and Gatekeepers</h2> | |||
| <p>Over the subsequent decades, billions and billions of lines of COBOL code were written, many of which are still running within financial institutions and government agencies today. The language has been continually improved and given new features. And yet, COBOL has been derided by many within the computer science field as a weak or simplistic language. Though couched in technical terms, these criticisms have drawn on a deeper source: the culture and gender dynamics of early computer programming.</p> | |||
| <p>During the 1960s, as computer programming increasingly came to be regarded as a science, more and more men flooded into what had previously been a field dominated by women. Many of these men fancied themselves to be a cut above the programmers who came before, and they often perceived COBOL as inferior and unattractive, in part because it did not require abstruse knowledge of underlying computer hardware or a computer science qualification. Arguments about which languages and programming techniques were “best” were part of the field’s growing pains as new practitioners tried to prove their worth and professionalize what had been seen until the 1960s as rote, unintellectual, feminized work. Consciously or not, the last thing many male computer scientists entering the field wanted was to make the field easier to enter or code easier to read, which might undermine their claims to professional and “scientific” expertise. </p> | |||
| <p>At first, however, the men needed help. Looking back, we see many examples of women teaching men how to program, before women gradually receded from positions of prominence in the field. Juliet Muro Oeffinger, one of about a dozen programmers I interviewed for this piece, began programming in assembly language in 1964 after graduating college with a BA in math. “When COBOL became the next hot thing,” she said, “I learned COBOL and taught it for Honeywell Computer Systems as a Customer Education Rep.” In the images below, Oeffinger teaches a room full of men at the Southern Indiana Gas and Electric Company how to program in the language. Within a short time, these trainees—who had no prior experience with computer work of any kind—would have been programming in COBOL.</p> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/2f3euaWiSR6eVdM9gNacdl/8f70b3bdbd1ed3d787e49de3e6bd6ba1/JulietOeffingerCOBOL2v2.jpg" alt="A black and white photo of four men in suits and a woman in a dress. The woman is drawing diagrams on the blackboard, while the men watch from a table filled with papers."> | |||
| <figcaption></figcaption> | |||
| </figure> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/58dqQzZleHZDc4PonQCCm4/cfd48181974bfa09059dd54726873dbb/JulietOeffingerCOBOL1v2.jpg" alt="A black and white photo of four men and one woman at a paper-filled desk with a chalkboard with diagrams in the background. The men wear suits and the woman is wearing a white shirt with a vest, possibly a dress."> | |||
| <figcaption>Programmer Juliet Muro Oeffinger teaching students Gerald Griepenstroh, Ron Holander, Von Hale, and Ed Tombaugh how to program in COBOL c. 1967. Photos from the personal collection of Juliet Muro Oeffinger.</figcaption> | |||
| </figure> | |||
| <p></p> | |||
| <p></p> | |||
| <p>Another retired programmer I spoke to named Pam Foltz noted that good COBOL was great long-term infrastructure, because it was so transparent. Almost anyone with a decent grasp of programming could come into a COBOL system built by someone else decades earlier and understand how the code worked. Foltz had a long career as a programmer for financial institutions, retraining in COBOL soon after getting her BA in American studies from the University of North Carolina at Chapel Hill in the 1960s. Perhaps this dual background is one reason why her code was so readable; as one of her supervisors admiringly told her, “You write COBOL like a novel! Anyone could follow your code.” </p> | |||
| <p>Ironically, this accessibility is one of the reasons that COBOL was denigrated. It is not simply that the language is old; so are many infrastructural programming languages. Take the C programming language: it was created in 1972, but as one of the current COBOL programmers I interviewed pointed out, nobody makes fun of it or calls it an “old dead language” the way people do with COBOL. Many interviewees noted that knowing COBOL is in fact a useful present-day skill that’s still taught in many community college computer science courses in the US, and many colleges around the world. </p> | |||
| <p>But despite this, there’s a cottage industry devoted to making fun of COBOL precisely for its strengths. COBOL’s qualities of being relatively self-documenting, having a short onboarding period (though a long path to becoming an expert), and having been originally designed by committee for big, unglamorous, infrastructural business systems all count against it. So does the fact that it did not come out of a research-oriented context, like languages such as C, ALGOL, or FORTRAN.</p> | |||
| <p>In a broader sense, hating COBOL was—and is—part of a struggle between consolidating and protecting computer programmers’ professional prestige on the one hand, and making programming less opaque and more accessible on the other. There’s an old joke among programmers: “If it was hard to write, it should be hard to read.” In other words, if your code is easy to understand, maybe you and your skills aren’t all that unique or valuable. If management thinks the tools you use and the code you write could be easily learned by anyone, you are eminently replaceable. </p> | |||
| <p>The fear of this existential threat to computing expertise has become so ingrained in the field that many people don’t even see the preference for complex languages for what it is: an attempt to protect one’s status by favoring tools that gate-keep rather than those that assist newcomers. As one contemporary programmer, who works mainly in C++ and Java at IBM, told me, “Every new programming language that comes out that makes things simpler in some way is usually made fun of by some contingent of existing programmers as making programming too easy—or they say it’s not a ‘real language.’” Because Java, for example, included automatic memory management, it was seen as a less robust language, and the people who programmed in it were sometimes considered inferior programmers. “It's been going on forever,” said this programmer, who has been working in the field for close to thirty years. “It's about gatekeeping, and keeping one’s prestige and importance in the face of technological advancements that make it easier to be replaced by new people with easier to use tools.” Gatekeeping is not only done by people and institutions; it’s written into programming languages themselves.</p> | |||
| <p>In a field that has elevated boy geniuses and rockstar coders, obscure hacks and complex black-boxed algorithms, it’s perhaps no wonder that a committee-designed language meant to be easier to learn and use—and which was created by a team that included multiple women in positions of authority—would be held in low esteem. But modern computing has started to become undone, and to undo other parts of our societies, through the field’s high opinion of itself, and through the way that it concentrates power into the hands of programmers who mistake social, political, and economic problems for technical ones, often with disastrous results.</p> | |||
| <p> | |||
| </p> | |||
| <h2>The Labor of Care</h2> | |||
| <p>A global pandemic in which more people than ever before are applying for unemployment is a situation that COBOL systems were never designed to handle, because a global catastrophe on this scale was never supposed to happen. And yet, even in the midst of this crisis, COBOL systems didn’t actually break down. Although New Jersey’s governor issued his desperate plea for COBOL programmers, <a href="https://www.wired.com/story/cant-file-unemployment-dont-blame-cobol/"><u>later investigations</u></a> revealed that it was the website through which people filed claims, written in the comparatively much newer programming language Java, that was responsible for the errors, breakdowns, and slowdowns. The backend system that processed those claims—the one written in COBOL—hadn’t been to blame at all.</p> | |||
| <p>So why was COBOL framed as the culprit? It’s a common fiction that computing technologies tend to become obsolete in a matter of years or even months, because this sells more units of consumer electronics. But this has never been true when it comes to large-scale computing infrastructure. This misapprehension, and the language’s history of being disdained by an increasingly toxic programming culture, made COBOL an easy scapegoat. But the narrative that COBOL was to blame for recent failures undoes itself: scapegoating COBOL can’t get far when the code is in fact meant to be easy to read and maintain. </p> | |||
| <p>That said, even the most robust systems need proper maintenance in order to fix bugs, add features, and interface with new computing technologies. Despite the essential functions they perform, many COBOL systems have not been well cared for. If they had come close to faltering in the current crisis, it wouldn’t have been because of the technology itself. Instead, it would have been due to the austerity logic to which so many state and local governments have succumbed.</p> | |||
| <p>In order to care for technological infrastructure, we need maintenance engineers, not just systems designers—and that means paying for people, not just for products. COBOL was never meant to cut programmers out of the equation. But as state governments have moved to slash their budgets, they’ve been less and less inclined to pay for the labor needed to maintain critical systems. Many of the people who should have been on payroll to maintain and update the COBOL unemployment systems in states such as New Jersey have instead been laid off due to state budget cuts. As a result, those systems can become fragile, and in a crisis, they’re liable to collapse due to lack of maintenance. </p> | |||
| <p>It was this austerity-driven lack of investment in people—rather than the handy fiction, peddled by state governments, that programmers with obsolete skills retired—that removed COBOL programmers years before this recent crisis. The reality is that there are plenty of new COBOL programmers out there who could do the job. In fact, the majority of people in the COBOL programmers’ Facebook group are twenty-five to thirty-five-years-old, and the number of people being trained to program and maintain COBOL systems globally is only growing. Many people who work with COBOL graduated in the 1990s or 2000s and have spent most of their twenty-first century careers maintaining and programming COBOL systems. </p> | |||
| <p>If the government programmers who were supposed to be around were still on payroll to maintain unemployment systems, there’s a very good chance that the failure of unemployment insurance systems to meet the life-or-death needs of people across the country wouldn't have happened. It’s likely those programmers would have needed to break out their Java skills to fix the issue, though. Because, despite the age of COBOL systems, when the crisis hit, COBOL trundled along, remarkably stable.</p> | |||
| <p>Indeed, present-day tech could use more of the sort of resilience and accessibility that COBOL brought to computing—especially for systems that have broad impacts, will be widely used, and will be long-term infrastructure that needs to be maintained by many hands in the future. In this sense, COBOL and its scapegoating show us an important aspect of high tech that few in Silicon Valley, or in government, seem to understand. Older systems have value, and constantly building new technological systems for short-term profit at the expense of existing infrastructure is not progress. In fact, it is among the most regressive paths a society can take.</p> | |||
| <p>As we stand in the middle of this pandemic, it is time for us to collectively rethink and recalculate the value that many so-called tech innovations, and innovators, bring to democracy. When these contributions are designed around monetizing flaws or gaps in existing economic, social, or political systems, rather than doing the mundane, plodding work of caring for and fixing the systems we all rely on, we end up with more problems than solutions, more scapegoats instead of insights into where we truly went wrong.</p> | |||
| <p>There are analogies between the failure of state unemployment systems and the failure of all sorts of public infrastructure: Hurricane Sandy hit the New York City subway system so hard because it, too, had been weakened by decades of disinvestment. Hurricane Katrina destroyed Black lives and neighborhoods in New Orleans because the levee maintenance work that was the responsibility of the federal government was far past due, a result of racist resource allocation. COVID-19 continues to ravage the United States more than any other nation because the federal infrastructure needed to confront public health crises has been hollowed for decades, and held in particular contempt by an Administration that puts profits over people, and cares little, if at all, about the predominantly Black and Latinx people in the US who are disproportionately dying. </p> | |||
| <p>If we want to care for people in a pandemic, we also have to be willing to pay for the labor of care. This means the nurses and doctors who treat COVID patients; the students and teachers who require smaller, online classes to return to school; and the grocery workers who risk their lives every day. It also means making long-term investments in the engineers who care for the digital infrastructures that care for us in a crisis.</p> | |||
| <p>When systems are built to last for decades, we often don’t see the disaster unfolding until the people who cared for those systems have been gone for quite some time. The blessing and the curse of good infrastructure is that when it works, it is invisible: which means that too often, we don’t devote much care to it until it collapses.</p> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">🏠</a> • | |||
| <a href="/david/log/" title="Accès au flux RSS">🤖</a> • | |||
| <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> Clair | |||
| </label> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script> | |||
| function loadThemeForm(templateName) { | |||
| const themeSelectorTemplate = document.querySelector(templateName) | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| themeSelectorTemplate.replaceWith(form) | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const cssRule of styleSheet.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| styleSheet.insertRule(mediaRule.cssText) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| loadThemeForm('#theme-selector') | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 98
- 0
cache/2021/f1df3d5f1720e137130581d5a2b8549f/index.md
Voir le fichier
| @@ -0,0 +1,98 @@ | |||
| title: Built to Last | |||
| url: https://logicmag.io/care/built-to-last/ | |||
| hash_url: f1df3d5f1720e137130581d5a2b8549f | |||
| <p>At the time of this writing, in July 2020, the COVID-19 pandemic has killed over 133,000 people in the United States. The dead are disproportionately Black and Latinx people and those who were unable, or not allowed by their employers, to work remotely. During the pandemic, we’ve seen our technological infrastructures assume ever more importance—from the communications technology that allows people with the means and privilege to telecommute, to the platforms that amplify public health information or deadly, politicized misinformation. We’ve also seen some of the infrastructure that runs the social safety net break down under an increasing load. This includes state unemployment systems that pay workers the benefits they’ve contributed to for decades through taxes. In a global pandemic, being able to work from home, to quit and live on savings, or to be laid off and draw unemployment benefits has literally become a matter of life and death. </p> | |||
| <p>The cracks in our technological infrastructure became painfully evident in the spring, as US corporations responded to the pandemic by laying off more and more workers. So many people had to file for unemployment at once that computerized unemployment claim systems started to malfunction. Around the country, phone lines jammed, websites crashed, and millions of people faced the possibility of not being able to pay for rent, medicine, or food. </p> | |||
| <p>As the catastrophe unfolded, several state governments blamed it on aged, supposedly obsolete computer systems written in COBOL, a programming language that originated in the late 1950s. <a href="https://www.theverge.com/2020/4/14/21219561/coronavirus-pandemic-unemployment-systems-cobol-legacy-software-infrastructure"><u>At least a dozen</u></a> state unemployment systems still run on this sixty-one-year-old language, including ones that help administer funds of a billion dollars or more in California, Colorado, and New Jersey. When the deluge of unemployment claims hit, the havoc it seemed to wreak on COBOL systems was so widespread that many states apparently didn’t have enough programmers to repair the damage; the governor of New Jersey even publicly pleaded for the help of volunteers who knew the language.</p> | |||
| <p>But then something strange happened. When scores of COBOL programmers rushed to offer their services, the state governments blaming COBOL didn’t accept the help. In fact, it turned out the states didn’t really need it to begin with. For many reasons, COBOL was an easy scapegoat in this crisis—but in reality what failed wasn’t the technology at all.</p> | |||
| <p> | |||
| </p> | |||
| <h2>A “Dead” Language is Born</h2> | |||
| <p>One of the most remarkable things about the unemployment claims malfunction wasn’t that things might suddenly go terribly wrong with COBOL systems, but that they never had before. Many computerized government and business processes around the world still run on and are actively written in COBOL—from the programs that reconcile almost every credit card transaction around the globe to the ones that administer a disability benefits system serving roughly ten million US veterans. The language remains so important that IBM’s latest, fastest “Z” series of mainframes have COBOL support as a key feature. </p> | |||
| <p>For six decades, systems written in COBOL have proven highly robust—which is exactly what they were designed to be. COBOL was conceived in 1959, when a computer scientist named Mary Hawes, who worked in the electronics division of the business equipment manufacturer Burroughs, called for a meeting of computer professionals at the University of Pennsylvania. Hawes wanted to bring industry, government, and academic experts together to design a programming language for basic business functions, especially finance and accounting, that was easily adaptable to the needs of different organizations and portable between mainframes manufactured by different computer companies. </p> | |||
| <p>The group that Hawes convened evolved into a body called CODASYL, the Conference on Data Systems Languages, which included computer scientists from the major computing hardware manufacturers of the time, as well as the government and the military. CODASYL set out to design a programming language that would be easier to use, easier to read, and easier to maintain than any other programming language then in existence. </p> | |||
| <p>The committee’s central insight was to design the language using terms from plain English, in a way that was more self-explanatory than other languages. With COBOL, which stands for “Common Business-Oriented Language,” the goal was to make the code so readable that the program itself would document how it worked, allowing programmers to understand and maintain the code more easily.</p> | |||
| <p>COBOL is a “problem-oriented” language, whose structure was designed around the goals of business and administrative users, instead of being maximally flexible for the kind of complex mathematical problems that scientific users would need to solve. The main architect of COBOL, Jean Sammet, then a researcher at Sylvania Electric and later a manager at IBM, wrote, “It was certainly intended (and expected) that the language could be used by novice programmers and read by management.” (Although the pioneering computer scientist Grace Hopper has often been referred to as the “mother of COBOL,” her involvement in developing the specification for the language was minimal; Sammet is the one who really deserves the title.)</p> | |||
| <p>Other early high-level programming languages, such as FORTRAN, a language for performing complex mathematical functions, used idiosyncratic abbreviations and mathematical symbols that could be difficult to understand if you weren’t a seasoned user of the language. For example, while a FORTRAN program would require programmers to know mathematical formula notation, and write commands like:</p> | |||
| <p><code>TOTAL = REAL(NINT(EARN * TAX * 100.0))/100.0</code></p> | |||
| <p>users of COBOL could write the same command as: </p> | |||
| <p><code>MULTIPLY EARNINGS BY TAXRATE GIVING SOCIAL-SECUR ROUNDED.</code></p> | |||
| <p>As you can tell from the COBOL version, but probably not from the FORTRAN version, this line of code is a (simplified) example of how both languages could compute a social security payment and round the total to the penny. Because it was designed not just to be written but also to be read, COBOL would make computerized business processes more legible, both for the original programmers and managers and for those who maintained these systems long afterwards. </p> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/3cfhPIvZUdyHOCtsysKTJg/59b22629034cc6714266a25accbfa295/X572_85_COBOL_tombstone_0002.jpg" alt="A granite tombstone with a sheep on top, that reads COBOL."> | |||
| <figcaption>Image of COBOL tombstone, copyright Mark Richards. Courtesy of the Computer History Museum in Mountain View, CA.</figcaption> | |||
| </figure> | |||
| <p></p> | |||
| <p>A portable, easier-to-use programming language was a revolutionary idea for its time, and prefigured many of the programming languages that came after. Yet COBOL was almost pronounced dead even before it was born. In 1960, the year that the language’s specification was published, a member of the CODASYL committee named Howard Bromberg commissioned a little “<a href="https://www.computerhistory.org/revolution/early-computer-companies/5/117/2401"><u>COBOL tombstone</u></a>” as a practical joke. Bromberg, a manager at the electronics company RCA who had earlier worked with Grace Hopper on her FLOW-MATIC language, was concerned that by the time everybody finally got done designing COBOL, competitors working on proprietary languages would have swept the market, locking users into programming languages that might only run well on one manufacturer’s line of machines.</p> | |||
| <p>But when COBOL came out in 1960, less than a year after Mary Hawes’s initial call to action, it was by no means dead on arrival. The earliest demonstrations of COBOL showed the language could be universal across hardware. “The significance of this,” Sammet wrote, with characteristic understatement, was that it meant “compatibility could really be achieved.” Suddenly, computer users had a full-featured cross-platform programming language of far greater power than anything that came before. COBOL was a runaway success. By 1970, it was the most widely used programming language in the world.</p> | |||
| <p> </p> | |||
| <h2>Scapegoats and Gatekeepers</h2> | |||
| <p>Over the subsequent decades, billions and billions of lines of COBOL code were written, many of which are still running within financial institutions and government agencies today. The language has been continually improved and given new features. And yet, COBOL has been derided by many within the computer science field as a weak or simplistic language. Though couched in technical terms, these criticisms have drawn on a deeper source: the culture and gender dynamics of early computer programming.</p> | |||
| <p>During the 1960s, as computer programming increasingly came to be regarded as a science, more and more men flooded into what had previously been a field dominated by women. Many of these men fancied themselves to be a cut above the programmers who came before, and they often perceived COBOL as inferior and unattractive, in part because it did not require abstruse knowledge of underlying computer hardware or a computer science qualification. Arguments about which languages and programming techniques were “best” were part of the field’s growing pains as new practitioners tried to prove their worth and professionalize what had been seen until the 1960s as rote, unintellectual, feminized work. Consciously or not, the last thing many male computer scientists entering the field wanted was to make the field easier to enter or code easier to read, which might undermine their claims to professional and “scientific” expertise. </p> | |||
| <p>At first, however, the men needed help. Looking back, we see many examples of women teaching men how to program, before women gradually receded from positions of prominence in the field. Juliet Muro Oeffinger, one of about a dozen programmers I interviewed for this piece, began programming in assembly language in 1964 after graduating college with a BA in math. “When COBOL became the next hot thing,” she said, “I learned COBOL and taught it for Honeywell Computer Systems as a Customer Education Rep.” In the images below, Oeffinger teaches a room full of men at the Southern Indiana Gas and Electric Company how to program in the language. Within a short time, these trainees—who had no prior experience with computer work of any kind—would have been programming in COBOL.</p> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/2f3euaWiSR6eVdM9gNacdl/8f70b3bdbd1ed3d787e49de3e6bd6ba1/JulietOeffingerCOBOL2v2.jpg" alt="A black and white photo of four men in suits and a woman in a dress. The woman is drawing diagrams on the blackboard, while the men watch from a table filled with papers."> | |||
| <figcaption></figcaption> | |||
| </figure> | |||
| <figure> | |||
| <img src="//images.ctfassets.net/e529ilab8frl/58dqQzZleHZDc4PonQCCm4/cfd48181974bfa09059dd54726873dbb/JulietOeffingerCOBOL1v2.jpg" alt="A black and white photo of four men and one woman at a paper-filled desk with a chalkboard with diagrams in the background. The men wear suits and the woman is wearing a white shirt with a vest, possibly a dress."> | |||
| <figcaption>Programmer Juliet Muro Oeffinger teaching students Gerald Griepenstroh, Ron Holander, Von Hale, and Ed Tombaugh how to program in COBOL c. 1967. Photos from the personal collection of Juliet Muro Oeffinger.</figcaption> | |||
| </figure> | |||
| <p></p> | |||
| <p></p> | |||
| <p>Another retired programmer I spoke to named Pam Foltz noted that good COBOL was great long-term infrastructure, because it was so transparent. Almost anyone with a decent grasp of programming could come into a COBOL system built by someone else decades earlier and understand how the code worked. Foltz had a long career as a programmer for financial institutions, retraining in COBOL soon after getting her BA in American studies from the University of North Carolina at Chapel Hill in the 1960s. Perhaps this dual background is one reason why her code was so readable; as one of her supervisors admiringly told her, “You write COBOL like a novel! Anyone could follow your code.” </p> | |||
| <p>Ironically, this accessibility is one of the reasons that COBOL was denigrated. It is not simply that the language is old; so are many infrastructural programming languages. Take the C programming language: it was created in 1972, but as one of the current COBOL programmers I interviewed pointed out, nobody makes fun of it or calls it an “old dead language” the way people do with COBOL. Many interviewees noted that knowing COBOL is in fact a useful present-day skill that’s still taught in many community college computer science courses in the US, and many colleges around the world. </p> | |||
| <p>But despite this, there’s a cottage industry devoted to making fun of COBOL precisely for its strengths. COBOL’s qualities of being relatively self-documenting, having a short onboarding period (though a long path to becoming an expert), and having been originally designed by committee for big, unglamorous, infrastructural business systems all count against it. So does the fact that it did not come out of a research-oriented context, like languages such as C, ALGOL, or FORTRAN.</p> | |||
| <p>In a broader sense, hating COBOL was—and is—part of a struggle between consolidating and protecting computer programmers’ professional prestige on the one hand, and making programming less opaque and more accessible on the other. There’s an old joke among programmers: “If it was hard to write, it should be hard to read.” In other words, if your code is easy to understand, maybe you and your skills aren’t all that unique or valuable. If management thinks the tools you use and the code you write could be easily learned by anyone, you are eminently replaceable. </p> | |||
| <p>The fear of this existential threat to computing expertise has become so ingrained in the field that many people don’t even see the preference for complex languages for what it is: an attempt to protect one’s status by favoring tools that gate-keep rather than those that assist newcomers. As one contemporary programmer, who works mainly in C++ and Java at IBM, told me, “Every new programming language that comes out that makes things simpler in some way is usually made fun of by some contingent of existing programmers as making programming too easy—or they say it’s not a ‘real language.’” Because Java, for example, included automatic memory management, it was seen as a less robust language, and the people who programmed in it were sometimes considered inferior programmers. “It's been going on forever,” said this programmer, who has been working in the field for close to thirty years. “It's about gatekeeping, and keeping one’s prestige and importance in the face of technological advancements that make it easier to be replaced by new people with easier to use tools.” Gatekeeping is not only done by people and institutions; it’s written into programming languages themselves.</p> | |||
| <p>In a field that has elevated boy geniuses and rockstar coders, obscure hacks and complex black-boxed algorithms, it’s perhaps no wonder that a committee-designed language meant to be easier to learn and use—and which was created by a team that included multiple women in positions of authority—would be held in low esteem. But modern computing has started to become undone, and to undo other parts of our societies, through the field’s high opinion of itself, and through the way that it concentrates power into the hands of programmers who mistake social, political, and economic problems for technical ones, often with disastrous results.</p> | |||
| <p> | |||
| </p> | |||
| <h2>The Labor of Care</h2> | |||
| <p>A global pandemic in which more people than ever before are applying for unemployment is a situation that COBOL systems were never designed to handle, because a global catastrophe on this scale was never supposed to happen. And yet, even in the midst of this crisis, COBOL systems didn’t actually break down. Although New Jersey’s governor issued his desperate plea for COBOL programmers, <a href="https://www.wired.com/story/cant-file-unemployment-dont-blame-cobol/"><u>later investigations</u></a> revealed that it was the website through which people filed claims, written in the comparatively much newer programming language Java, that was responsible for the errors, breakdowns, and slowdowns. The backend system that processed those claims—the one written in COBOL—hadn’t been to blame at all.</p> | |||
| <p>So why was COBOL framed as the culprit? It’s a common fiction that computing technologies tend to become obsolete in a matter of years or even months, because this sells more units of consumer electronics. But this has never been true when it comes to large-scale computing infrastructure. This misapprehension, and the language’s history of being disdained by an increasingly toxic programming culture, made COBOL an easy scapegoat. But the narrative that COBOL was to blame for recent failures undoes itself: scapegoating COBOL can’t get far when the code is in fact meant to be easy to read and maintain. </p> | |||
| <p>That said, even the most robust systems need proper maintenance in order to fix bugs, add features, and interface with new computing technologies. Despite the essential functions they perform, many COBOL systems have not been well cared for. If they had come close to faltering in the current crisis, it wouldn’t have been because of the technology itself. Instead, it would have been due to the austerity logic to which so many state and local governments have succumbed.</p> | |||
| <p>In order to care for technological infrastructure, we need maintenance engineers, not just systems designers—and that means paying for people, not just for products. COBOL was never meant to cut programmers out of the equation. But as state governments have moved to slash their budgets, they’ve been less and less inclined to pay for the labor needed to maintain critical systems. Many of the people who should have been on payroll to maintain and update the COBOL unemployment systems in states such as New Jersey have instead been laid off due to state budget cuts. As a result, those systems can become fragile, and in a crisis, they’re liable to collapse due to lack of maintenance. </p> | |||
| <p>It was this austerity-driven lack of investment in people—rather than the handy fiction, peddled by state governments, that programmers with obsolete skills retired—that removed COBOL programmers years before this recent crisis. The reality is that there are plenty of new COBOL programmers out there who could do the job. In fact, the majority of people in the COBOL programmers’ Facebook group are twenty-five to thirty-five-years-old, and the number of people being trained to program and maintain COBOL systems globally is only growing. Many people who work with COBOL graduated in the 1990s or 2000s and have spent most of their twenty-first century careers maintaining and programming COBOL systems. </p> | |||
| <p>If the government programmers who were supposed to be around were still on payroll to maintain unemployment systems, there’s a very good chance that the failure of unemployment insurance systems to meet the life-or-death needs of people across the country wouldn't have happened. It’s likely those programmers would have needed to break out their Java skills to fix the issue, though. Because, despite the age of COBOL systems, when the crisis hit, COBOL trundled along, remarkably stable.</p> | |||
| <p>Indeed, present-day tech could use more of the sort of resilience and accessibility that COBOL brought to computing—especially for systems that have broad impacts, will be widely used, and will be long-term infrastructure that needs to be maintained by many hands in the future. In this sense, COBOL and its scapegoating show us an important aspect of high tech that few in Silicon Valley, or in government, seem to understand. Older systems have value, and constantly building new technological systems for short-term profit at the expense of existing infrastructure is not progress. In fact, it is among the most regressive paths a society can take.</p> | |||
| <p>As we stand in the middle of this pandemic, it is time for us to collectively rethink and recalculate the value that many so-called tech innovations, and innovators, bring to democracy. When these contributions are designed around monetizing flaws or gaps in existing economic, social, or political systems, rather than doing the mundane, plodding work of caring for and fixing the systems we all rely on, we end up with more problems than solutions, more scapegoats instead of insights into where we truly went wrong.</p> | |||
| <p>There are analogies between the failure of state unemployment systems and the failure of all sorts of public infrastructure: Hurricane Sandy hit the New York City subway system so hard because it, too, had been weakened by decades of disinvestment. Hurricane Katrina destroyed Black lives and neighborhoods in New Orleans because the levee maintenance work that was the responsibility of the federal government was far past due, a result of racist resource allocation. COVID-19 continues to ravage the United States more than any other nation because the federal infrastructure needed to confront public health crises has been hollowed for decades, and held in particular contempt by an Administration that puts profits over people, and cares little, if at all, about the predominantly Black and Latinx people in the US who are disproportionately dying. </p> | |||
| <p>If we want to care for people in a pandemic, we also have to be willing to pay for the labor of care. This means the nurses and doctors who treat COVID patients; the students and teachers who require smaller, online classes to return to school; and the grocery workers who risk their lives every day. It also means making long-term investments in the engineers who care for the digital infrastructures that care for us in a crisis.</p> | |||
| <p>When systems are built to last for decades, we often don’t see the disaster unfolding until the people who cared for those systems have been gone for quite some time. The blessing and the curse of good infrastructure is that when it works, it is invisible: which means that too often, we don’t devote much care to it until it collapses.</p> | |||
+ 20
- 0
cache/2021/index.html
Voir le fichier
| @@ -63,10 +63,30 @@ | |||
| <main> | |||
| <ul> | |||
| <li><a href="/david/cache/2020/c8678419b1c96d90ea066a3f6f6e3479/" title="Accès à l’article dans le cache local : When Are We Back To Normal?">When Are We Back To Normal?</a> (<a href="https://inessential.com/2020/12/31/when_are_we_back_to_normal" title="Accès à l’article original distant : When Are We Back To Normal?">original</a>)</li> | |||
| <li><a href="/david/cache/2020/ab9f293c34ce421ab41465fcda8893fe/" title="Accès à l’article dans le cache local : Whistleblower Says Facebook Ignored Global Political Manipulation">Whistleblower Says Facebook Ignored Global Political Manipulation</a> (<a href="https://www.buzzfeednews.com/article/craigsilverman/facebook-ignore-political-manipulation-whistleblower-memo" title="Accès à l’article original distant : Whistleblower Says Facebook Ignored Global Political Manipulation">original</a>)</li> | |||
| <li><a href="/david/cache/2020/3d37e77a601b6dd7043bbb17a4a2d199/" title="Accès à l’article dans le cache local : Le compromis de la vulgarisation">Le compromis de la vulgarisation</a> (<a href="https://tanialouis.fr/2020/12/27/le-compromis-de-la-vulgarisation/" title="Accès à l’article original distant : Le compromis de la vulgarisation">original</a>)</li> | |||
| <li><a href="/david/cache/2020/66ef8e7fa0942fc975723f7df4d932e9/" title="Accès à l’article dans le cache local : Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine">Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine</a> (<a href="https://berthub.eu/articles/posts/reverse-engineering-source-code-of-the-biontech-pfizer-vaccine/" title="Accès à l’article original distant : Reverse Engineering the source code of the BioNTech/Pfizer SARS-CoV-2 Vaccine">original</a>)</li> | |||
| <li><a href="/david/cache/2020/5f4b0220be54d83f711a78b356c73a68/" title="Accès à l’article dans le cache local : Carnets Web de La Grange">Carnets Web de La Grange</a> (<a href="https://www.la-grange.net/2021/01/05/newsletter" title="Accès à l’article original distant : Carnets Web de La Grange">original</a>)</li> | |||
| <li><a href="/david/cache/2020/3159c32fa194458a63b546ab789e8aed/" title="Accès à l’article dans le cache local : The world needs a tech diet; here is how designers can help">The world needs a tech diet; here is how designers can help</a> (<a href="https://essays.uxdesign.cc/tech-diet/" title="Accès à l’article original distant : The world needs a tech diet; here is how designers can help">original</a>)</li> | |||
| <li><a href="/david/cache/2020/352d2966ecda7a68cbf97efbc691d017/" title="Accès à l’article dans le cache local : Facebook’s Unknowable Megascale">Facebook’s Unknowable Megascale</a> (<a href="https://daringfireball.net/2020/12/facebook_unknowable_megascale" title="Accès à l’article original distant : Facebook’s Unknowable Megascale">original</a>)</li> | |||
| <li><a href="/david/cache/2020/99c13c692ec7f2217311fdea482e8792/" title="Accès à l’article dans le cache local : Newsletters">Newsletters</a> (<a href="https://www.robinrendle.com/essays/newsletters" title="Accès à l’article original distant : Newsletters">original</a>)</li> | |||
| <li><a href="/david/cache/2020/837e11a57aa3ddcba084963c247f45a6/" title="Accès à l’article dans le cache local : What Is Going To Happen In 2021">What Is Going To Happen In 2021</a> (<a href="https://avc.com/2021/01/what-is-going-to-happen-in-2021/" title="Accès à l’article original distant : What Is Going To Happen In 2021">original</a>)</li> | |||
| <li><a href="/david/cache/2020/f1df3d5f1720e137130581d5a2b8549f/" title="Accès à l’article dans le cache local : Built to Last">Built to Last</a> (<a href="https://logicmag.io/care/built-to-last/" title="Accès à l’article original distant : Built to Last">original</a>)</li> | |||
| <li><a href="/david/cache/2020/78f2e167938eb4bfa6747503aefe45c1/" title="Accès à l’article dans le cache local : We Quit Our Jobs to Build a Cabin-Everything Went Wrong">We Quit Our Jobs to Build a Cabin-Everything Went Wrong</a> (<a href="https://www.outsideonline.com/2415766/friends-diy-cabin-build-washington" title="Accès à l’article original distant : We Quit Our Jobs to Build a Cabin-Everything Went Wrong">original</a>)</li> | |||
| <li><a href="/david/cache/2020/aeb0a60038b91bf1fbbbd39b358366fb/" title="Accès à l’article dans le cache local : ☕️ Journal : Statu quo">☕️ Journal : Statu quo</a> (<a href="https://oncletom.io/2021/01/05/statu-quo/" title="Accès à l’article original distant : ☕️ Journal : Statu quo">original</a>)</li> | |||
| </ul> | |||
| </main> | |||
Chargement…