3 years ago · 6e7417126a
--- a/cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.html
+++ b/cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.html
@@ -0,0 +1,238 @@
 <!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>Quotebacks and hypertexts (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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="http://interconnected.org/home/2020/06/16/quotebacks">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>Quotebacks and hypertexts</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="http://interconnected.org/home/2020/06/16/quotebacks">Source originale du contenu</a></h2>
 <p>If you’re reading this on my website, you’ll notice that the next chunk of text looks a bit different. That’s because it’s a <em>quoteback.</em></p>

 <blockquote cite="https://quotebacks.net" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Quotebacks" data-title="Introducing Quotebacks">
 <p>Quotebacks are like a quote retweet, but for any piece of content on the web. They work on any webpage, and gracefully fall back to a standard blockquote.</p>
 <p>Thus, “Quotebacks” is three things:</p>
 <p>1. A web-native citation standard and quoting UX pattern</p>
 <p>2. A tiny library, <code>quoteback.js</code>, that converts HTML <code>&lt;blockquote&gt;</code> tags into elegant interactive webcomponents</p>
 <p>3. A browser extension to create quoteback components and store any quotes you save to publish later.</p>

 </blockquote>

 <p>Quotebacks is a project? invention? <em>protocol?</em> by Toby Shorin and Tom Critchlow. <a href="https://tomcritchlow.com/2020/06/09/quotebacks/">Here’s Tom’s introductory post:</a> which has some background. <q>The ultimate goal is to encourage and activate a deeper cross-blogger discusson space. To promote diverse voices and encourage networked writing to flourish.</q></p>

 <p>I’m seeing a bunch of folks <a href="https://www.kickscondor.com/admiring-quotebacks-strategy">trying</a> <a href="http://peterbihr.com/2020/06/quotebacks-are-great/">out</a> <a href="https://warrenellis.ltd/isles/quotebacks/">quotebacks</a>. If you keep a blog yourself, I urge you to give it a go. I’ll talk about why later in this post.</p>

 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Me? I’ve written a Quotebacks extension for Python-Markdown</h3>

 <p>I’m not using the Chrome extension to collect quotes myself. I have my own weird workflow for <a href="https://www.dw.com/en/coronavirus-scare-when-will-hamsterkauf-become-an-english-word/a-52635400">hamsterkaufing</a> the web.</p>

 <p>But I <em>do</em> want to display quoteback embeds, and you can see one at the top of this post. <em>(If you’re reading this in RSS or email, check the website.)</em></p>

 <p>How? I write quotes in a special format in the Markdown text documents that lie behind this blog. (I keep everything in various forms of plain text and have done for a couple decades.)</p>

 <p>These text docs are transformed into HTML for the blog using <a href="https://python-markdown.github.io">Python-Markdown</a>. So I’ve written a Python-Markdown extension called <strong>quotebacks-mdx</strong> to transform this special format into the quotebacks embed HTML.</p>

 <p>I’d also like feedback on the Markdown format I’m using – if people implement extensions in other languages, it would be good if something like this became a de facto standard. </p>

 <p>Why did I do it this way?</p>

 <ul>
 <li>Markdown deserves to have a way to include a citation in blockquotes – afaik there isn’t a consensus way to do this right now.</li>
 <li>I can include nicely-cited quotes in my blog posts without including custom HTML. So in another 10 years, I know I’ll still have my easy-to-access plain text.</li>
 <li>The fallback for Markdown (without the extension) and for HTML (without the Javascript) is still readable and still looks good.</li>
 </ul>

 <p>And, even though I’m not using the Quotebacks browser extension, I’m adopting the embed format - the protocol - because of what we might one day build on top.</p>

 <p><hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white"/>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Some history: the Memex</h3>
 <p>Back in 1945, Vannevar Bush published his insanely visionary essay <strong>As We May Think</strong> in <em>The Atlantic.</em> Through his imagined machine called the <strong>memex</strong> he predicted the web and its effect on human knowledge, work, and conversation:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Consider a future device … in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.</p>
 </blockquote>
 <p>Phones!</p>
 <p><a href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">Here’s the original essay</a> though the <a href="https://en.wikipedia.org/wiki/As_We_May_Think">Wikipedia summary</a> is short and good.</p>
 <p>The core feature of the memex is <strong>trails.</strong> It isn’t just a library.</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. [Etc.]</p>
 </blockquote>
 <p>Wikipedia! Work!</p>
 <p>WELL.</p>
 <p>And… bloggers:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>There is a new profession of trail blazers, those who find delight in the task of establishing useful trails through the enormous mass of the common record.</p>
 </blockquote>
 <p>Flash forward…</p>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Hypertext and transclusion</h3>
 <p>In the early 1960s, Ted Nelson coined the text <strong>hypertext</strong>. The web is a hypertext, and the <a href="https://www.w3.org/History/1989/proposal.html">original 1989 proposal</a> cited Nelson’s work.</p>
 <p>His project <strong>Xanadu</strong> - although never completed - was an expansion of what he meant by this original concept.</p>
 <p>Hypertexts are connected texts. But Nelson saw <em>two</em> types of connections: links (which we have) and something else called <em>transclusion.</em> </p>
 <p>From one paper <a href="http://xanadu.com.au/ted/XUsurvey/xuDation.html">about Project Xanadu</a>:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>This may be simplified to: connections between things which are <em>different</em>, and connections between things which are <em>the same</em>.  They must be implemented differently and orthogonally, in order that linked materials may be transcluded and vice versa.  This double structure of abstracted literary connection – <em>content links</em> and <em>transclusion</em> – constitute xanalogical structure.</p>
 </blockquote>
 <p>Transclusion:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Transclusion is what quotation, copying and cross-referencing merely attempt: they are ways that people have had to <em>imitate</em> transclusion, which is the true abstract relationship that paper cannot show.  Transclusions are not copies and they are not instances, but <em>the same thing knowably and visibly in more than once place</em>.  This is a simple point which is remarkably difficult to get across.</p>
 </blockquote>
 <p>And later in the paper:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Note also that the famous “trails” of Vannevar Bush’s memex system (103) were to be built from transclusions, not links.</p>
 </blockquote>
 <p><a href="https://en.wikipedia.org/wiki/Transclusion">Here’s Wikipedia on transclusion.</a></p>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Back to Quotebacks</h3>
 <p>What I love about the web is that it’s a hypertext. (Though in recent years it has mostly been used as a janky app delivery platform.)</p>
 <p>And what I like about Quotebacks is that it already feels like an essential part of that hypertext toolbox! The Chrome extension meet the needs of Bush’s trailblazers; the embed format mimics Nelson’s transclusion.</p>
 <p>Now the Quotebacks projects doesn’t immediately fulfil on this grand promise. But the great thing about a protocol is that I can adopt it and support it, and <em>you</em> can adopt it and support it, and if there’s enough of a consensus, we can build more on top. So what I’d be interested to see:</p>
 <ul>
 <li><strong>an index, accessible to all:</strong> could quoteback embeds be centrally tracked somehow?</li>
 <li><strong>a serendipity machine:</strong> could my browser tell me when I’m on a page which has been cited – could I see the “trails” that are crossing this page, and chose to pivot and follow one? And could I see when one of those trails was authored by a friend?</li>
 <li><strong>a robot research aide:</strong> could I index the quotebacks in my <em>own</em> database… and find holes? i.e. texts that are regularly cited by the ones I’ve quoted, but somehow I’ve never discovered them myself?</li>
 </ul>
 <p><em>(I’m less bothered about finding out specifically when people use one of my posts in a quoteback. That would be neat I guess, but tracking mentions is a first-order problem and besides it’s a spam honeypot.)</em></p>
 <p>What I’m talking about is the kind of hypertext that I love, one in which my blog is a place for thinking out loud.</p>
 <p>My blog is not my notebook, and it’s not my marketing platform.</p>
 <p>My blog is my laboratory workbench where I go through the ideas and paragraphs I’ve picked up along my way, and I twist them and turn them and I see if they fit together. I do that by narrating my way between them. And if they do fit, I try to add another piece, and then another. Writing a post is a process of experimental construction.</p>
 <p>And then I follow the trail, and see where it takes me.</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 type="text/javascript">
    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>
--- a/cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.md
+++ b/cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.md
@@ -0,0 +1,79 @@
 title: Quotebacks and hypertexts
 url: http://interconnected.org/home/2020/06/16/quotebacks
 hash_url: 2a35ead18f2e4d22a091367acbab1e85

 <p>If you’re reading this on my website, you’ll notice that the next chunk of text looks a bit different. That’s because it’s a <em>quoteback.</em></p>
 <blockquote cite="https://quotebacks.net" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Quotebacks" data-title="Introducing Quotebacks">
 <p>Quotebacks are like a quote retweet, but for any piece of content on the web. They work on any webpage, and gracefully fall back to a standard blockquote.</p>
 <p>Thus, “Quotebacks” is three things:</p>
 <p>1. A web-native citation standard and quoting UX pattern</p>
 <p>2. A tiny library, <code>quoteback.js</code>, that converts HTML <code>&lt;blockquote&gt;</code> tags into elegant interactive webcomponents</p>
 <p>3. A browser extension to create quoteback components and store any quotes you save to publish later.</p>

 </blockquote>
 <p>Quotebacks is a project? invention? <em>protocol?</em> by Toby Shorin and Tom Critchlow. <a href="https://tomcritchlow.com/2020/06/09/quotebacks/">Here’s Tom’s introductory post:</a> which has some background. <q>The ultimate goal is to encourage and activate a deeper cross-blogger discusson space. To promote diverse voices and encourage networked writing to flourish.</q></p>
 <p>I’m seeing a bunch of folks <a href="https://www.kickscondor.com/admiring-quotebacks-strategy">trying</a> <a href="http://peterbihr.com/2020/06/quotebacks-are-great/">out</a> <a href="https://warrenellis.ltd/isles/quotebacks/">quotebacks</a>. If you keep a blog yourself, I urge you to give it a go. I’ll talk about why later in this post.</p>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Me? I’ve written a Quotebacks extension for Python-Markdown</h3>
 <p>I’m not using the Chrome extension to collect quotes myself. I have my own weird workflow for <a href="https://www.dw.com/en/coronavirus-scare-when-will-hamsterkauf-become-an-english-word/a-52635400">hamsterkaufing</a> the web.</p>
 <p>But I <em>do</em> want to display quoteback embeds, and you can see one at the top of this post. <em>(If you’re reading this in RSS or email, check the website.)</em></p>
 <p>How? I write quotes in a special format in the Markdown text documents that lie behind this blog. (I keep everything in various forms of plain text and have done for a couple decades.)</p>
 <p>These text docs are transformed into HTML for the blog using <a href="https://python-markdown.github.io">Python-Markdown</a>. So I’ve written a Python-Markdown extension called <strong>quotebacks-mdx</strong> to transform this special format into the quotebacks embed HTML.</p>

 <p>I’d also like feedback on the Markdown format I’m using – if people implement extensions in other languages, it would be good if something like this became a de facto standard. </p>
 <p>Why did I do it this way?</p>
 <ul>
 <li>Markdown deserves to have a way to include a citation in blockquotes – afaik there isn’t a consensus way to do this right now.</li>
 <li>I can include nicely-cited quotes in my blog posts without including custom HTML. So in another 10 years, I know I’ll still have my easy-to-access plain text.</li>
 <li>The fallback for Markdown (without the extension) and for HTML (without the Javascript) is still readable and still looks good.</li>
 </ul>
 <p>And, even though I’m not using the Quotebacks browser extension, I’m adopting the embed format - the protocol - because of what we might one day build on top.</p>
 <hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white"/>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Some history: the Memex</h3>
 <p>Back in 1945, Vannevar Bush published his insanely visionary essay <strong>As We May Think</strong> in <em>The Atlantic.</em> Through his imagined machine called the <strong>memex</strong> he predicted the web and its effect on human knowledge, work, and conversation:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Consider a future device … in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.</p>
 </blockquote>
 <p>Phones!</p>
 <p><a href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">Here’s the original essay</a> though the <a href="https://en.wikipedia.org/wiki/As_We_May_Think">Wikipedia summary</a> is short and good.</p>
 <p>The core feature of the memex is <strong>trails.</strong> It isn’t just a library.</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. [Etc.]</p>
 </blockquote>
 <p>Wikipedia! Work!</p>
 <p>WELL.</p>
 <p>And… bloggers:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>There is a new profession of trail blazers, those who find delight in the task of establishing useful trails through the enormous mass of the common record.</p>
 </blockquote>
 <p>Flash forward…</p>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Hypertext and transclusion</h3>
 <p>In the early 1960s, Ted Nelson coined the text <strong>hypertext</strong>. The web is a hypertext, and the <a href="https://www.w3.org/History/1989/proposal.html">original 1989 proposal</a> cited Nelson’s work.</p>
 <p>His project <strong>Xanadu</strong> - although never completed - was an expansion of what he meant by this original concept.</p>
 <p>Hypertexts are connected texts. But Nelson saw <em>two</em> types of connections: links (which we have) and something else called <em>transclusion.</em> </p>
 <p>From one paper <a href="http://xanadu.com.au/ted/XUsurvey/xuDation.html">about Project Xanadu</a>:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>This may be simplified to: connections between things which are *different*, and connections between things which are *the same*.  They must be implemented differently and orthogonally, in order that linked materials may be transcluded and vice versa.  This double structure of abstracted literary connection – *content links* and *transclusion* – constitute xanalogical structure.</p>
 </blockquote>
 <p>Transclusion:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Transclusion is what quotation, copying and cross-referencing merely attempt: they are ways that people have had to *imitate* transclusion, which is the true abstract relationship that paper cannot show.  Transclusions are not copies and they are not instances, but *the same thing knowably and visibly in more than once place*.  This is a simple point which is remarkably difficult to get across.</p>
 </blockquote>
 <p>And later in the paper:</p>
 <blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
 <p>Note also that the famous “trails” of Vannevar Bush’s memex system (103) were to be built from transclusions, not links.</p>
 </blockquote>
 <p><a href="https://en.wikipedia.org/wiki/Transclusion">Here’s Wikipedia on transclusion.</a></p>
 <h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Back to Quotebacks</h3>
 <p>What I love about the web is that it’s a hypertext. (Though in recent years it has mostly been used as a janky app delivery platform.)</p>
 <p>And what I like about Quotebacks is that it already feels like an essential part of that hypertext toolbox! The Chrome extension meet the needs of Bush’s trailblazers; the embed format mimics Nelson’s transclusion.</p>
 <p>Now the Quotebacks projects doesn’t immediately fulfil on this grand promise. But the great thing about a protocol is that I can adopt it and support it, and <em>you</em> can adopt it and support it, and if there’s enough of a consensus, we can build more on top. So what I’d be interested to see:</p>
 <ul>
 <li><strong>an index, accessible to all:</strong> could quoteback embeds be centrally tracked somehow?</li>
 <li><strong>a serendipity machine:</strong> could my browser tell me when I’m on a page which has been cited – could I see the “trails” that are crossing this page, and chose to pivot and follow one? And could I see when one of those trails was authored by a friend?</li>
 <li><strong>a robot research aide:</strong> could I index the quotebacks in my <em>own</em> database… and find holes? i.e. texts that are regularly cited by the ones I’ve quoted, but somehow I’ve never discovered them myself?</li>
 </ul>
 <p><em>(I’m less bothered about finding out specifically when people use one of my posts in a quoteback. That would be neat I guess, but tracking mentions is a first-order problem and besides it’s a spam honeypot.)</em></p>
 <p>What I’m talking about is the kind of hypertext that I love, one in which my blog is a place for thinking out loud.</p>
 <p>My blog is not my notebook, and it’s not my marketing platform.</p>
 <p>My blog is my laboratory workbench where I go through the ideas and paragraphs I’ve picked up along my way, and I twist them and turn them and I see if they fit together. I do that by narrating my way between them. And if they do fit, I try to add another piece, and then another. Writing a post is a process of experimental construction.</p>
 <p>And then I follow the trail, and see where it takes me.</p>
--- a/cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.html
+++ b/cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.html
@@ -0,0 +1,206 @@
 <!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>The Return of the 90s Web (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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://mxb.dev/blog/the-return-of-the-90s-web/">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>The Return of the 90s Web</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://mxb.dev/blog/the-return-of-the-90s-web/">Source originale du contenu</a></h2>
 <p class="lead">In big cultural concepts like music or fashion, things have a way of coming around full circle. I'm pretty sure someday grunge will come back as a hot new sample, and at some point our kids might think frosted hair tips are totally cool.</p>

 <p>When I look at some of the trends on the web today, I wonder if we’re at that point yet. I wonder if we’re ready to revisit some of the ideas of the early web again.</p>

 <p>Probably not in design - I’m afraid <code>dancing-baby.gif</code> is gone for good. But some of the broader ideas from back then are picking up a second wind lately, and I like it.</p>

 <h2 id="h-serverside-rendering"><a class="heading-anchor" href="#h-serverside-rendering">#</a> Serverside Rendering</h2>

 <p>After spending the better part of the last decade shifting rendering logic to the client, it looks like the pendulum is about to swing into the other direction again.</p>

 <p>With projects like <a href="https://www.phoenixframework.org/">Phoenix Liveview</a> or <a href="https://hey.com/how-it-works/">hey.com</a>’s recent “it’s-just-HTML” approach, it seems like server-side rendering (SSR) is stepping back into the spotlight.</p>

 <p>It makes sense - servers are <strong>really good</strong> at this, and sending compressed HTML through the network can be lightning fast. The classic request-response cycle has evolved as well: HTTP/2 and smart techniques like <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a> or <a href="https://instant.page/">just-in-time preloading</a> allow for a much better experience now than when you first tried to load that Michael Jordan photo on the Space Jam website over dial-up.</p>

 <p>Taking the responsibility of rendering UI and all the Javascript that comes with it off users’ shoulders would be a great <s>old</s> new strategy for the next generation of web apps.</p>

 <p><a href="https://en.wikipedia.org/wiki/Microsoft_FrontPage">Frontpage</a> and <a href="https://en.wikipedia.org/wiki/Adobe_Dreamweaver">Dreamweaver</a> were big in the 90s because of their “What You See Is What You Get” interface. People could set up a website without any coding skills, just by dragging boxes and typing text in them.</p>

 <p>Of course they soon found that there was still source code underneath, you just didn’t see it. And most of the time, that source code was a big heap of auto-generated garbage - it ultimately failed to keep up with the requirements of the modern web.</p>

 <figure class="extend"><a href="https://webflow.com" rel="noopener noreferrer" target="_blank"><img src="/assets/media/return-of-the-90s-web/webflow.jpg" alt="the webflow interface, different design widgets and controls" loading="lazy"/></a></figure>

 <p>Today our understanding of the web has improved, and so have our tools. <a href="https://webflow.com/">Webflow</a> is one of the contenders for the “no-code editor” trophy. The output it generates is far better.</p>

 <p>These tools will probably not be a replacement for developers as a whole - complex projects still require tons of human brainpower to work. But for all the landing pages and marketing sites, this could be the holy grail of <abbr title="What you see is what you get">WYSIWYG</abbr> we thought we had in the 90s.</p>

 <h2 id="h-personal-websites"><a class="heading-anchor" href="#h-personal-websites">#</a> Personal Websites</h2>

 <p>It might just be my IndieWeb filter bubble talking, but I think there is a renewed interest in personal websites. A lot of big social media giants are falling out of favor, and it becomes cool again to <strong>own a space</strong> on the web rather then being one of a billion usernames.</p>

 <p>Our digitial identities are becoming increasingly more important, and people become aware that they’re not in control of their data. Personal sites were very popular in the era before Myspace and Facebook, and it’s now easier than ever to build one.</p>

 <p>Services like <a href="https://carrd.co/">Carrd</a> offer a straightforward way to create simple one-pagers, and their numbers show a lot of interest:</p>

 <p>Blogging is gaining popularity again as well, used as a tool for self-marketing or simply to express opinions. There are lots of good options for people who want to pick up blogging - either on their own sites or with platforms like <a href="http://micro.blog/">micro.blog</a>, that offer more independence than Medium &amp; Co.</p>

 <h2 id="h-curated-feeds-and-discovery"><a class="heading-anchor" href="#h-curated-feeds-and-discovery">#</a> Curated Feeds and Discovery</h2>

 <p>Another issue created by social media is the prevalence of “algorithmic feeds”. We decided that the constant stream of input for our eyeballs should never end, so we built these complex systems to generate new content for us based on our interests.</p>

 <p>But these are giant black boxes, and nobody really knows what signals go into them. Throw advertising, “fake news” and a couple of trolls into the mix, and you get the mess we all know now.</p>

 <p>That’s why many people crave a <strong>more controlled reading experience</strong> on their own terms. Chronological, personal, relevant - a bespoke magazine of trusted sources. A curated feed.</p>

 <p>One way to achieve something like that is through plain ol’ boring RSS. One more thing that was said to be dead but is growing in popularity again:</p>

 <p>Another possibility is to discover new content through human connections instead of algorithms. People we already know for their content recommend others in the same field, creating decentralized clusters of trusted information.</p>

 <p>Website owners used to do this a lot in the days before search engines, by providing <a href="/blogroll/">Blogroll Pages</a> or forming <a href="https://en.wikipedia.org/wiki/Webring">Webrings</a> with links to others in their cluster.</p>

 <div class="callout callout--info"><span class="callout__icon"><svg class="icon icon--info" role="img" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/icons.sprite.svg#icon-info"/></svg></span><div class="callout__content"><p><strong>Webrings</strong> were a common way for people to connect their sites in the early web. To be a member of a webring, you had to embed a little widget on your site that contained a “forward”, a “backward”, and a “random” button. These buttons would then link to other sites in the ring.</p><p>BTW: If you want to host your own webring, I made this free <a href="/blog/webring-kit/">Starter Kit</a> for you.</p></div></div>

 <p><webring-banner><p>Member of the <a href="https://webringdemo.netlify.com">An Example Webring</a> webring</p><a href="https://webringdemo.netlify.com/prev">Previous</a> <a href="https://webringdemo.netlify.com/random">Random</a> <a href="https://webringdemo.netlify.com/next">Next</a></webring-banner>
 <h2 id="h-smaller-communities-and-web-monetization"><a class="heading-anchor" href="#h-smaller-communities-and-web-monetization">#</a> Smaller Communities and Web Monetization</h2><p>Many independent creators are moving away from big “everyone’s on them” platforms back to private, more niche communities. New models for membership sites like <a href="https://ghost.org/members/">Ghost’s “Members”</a> feature enable creators to build communities on their content. People teach courses, self-publish books or provide APIs for specific topics.</p><p>Where the 90s had chatrooms and message boards, today there are tools like <a href="https://discord.com/">Discord</a> or <a href="https://www.twitch.tv/">Twitch</a> that help people with shared interests to connect with each other. These niche communities can then be a powerful userbase for independent businesses.</p><p>Of course the problem of monetization has existed from the very start of the web, and it’s still not easy today to earn money without splattering ads everywhere. But new standards like the <a href="https://webmonetization.org/">Web Monetization API</a> could be a very interesting solution, enabling creators to <a href="https://coil.com/">receive micro-payments</a> for their content.</p>
 <h2 id="h-learning-from-the-past"><a class="heading-anchor" href="#h-learning-from-the-past">#</a> Learning from the Past</h2><p>I don’t know if all of these trends will really play out, or if we’re up for something completely different. I do think it’s a good idea to learn from the past though, because that is what keeps us moving forward.</p><p>So maybe the second 90s can be even better than the first. At least we’re done with NSYNC this time.</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 type="text/javascript">
    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>
--- a/cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.md
+++ b/cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.md
@@ -0,0 +1,10 @@
 title: The Return of the 90s Web
 url: https://mxb.dev/blog/the-return-of-the-90s-web/
 hash_url: 2e490bfc24d27865bf42f49ea2c79c12

 <p class="lead">In big cultural concepts like music or fashion, things have a way of coming around full circle. I'm pretty sure someday grunge will come back as a hot new sample, and at some point our kids might think frosted hair tips are totally cool.</p><p>When I look at some of the trends on the web today, I wonder if we’re at that point yet. I wonder if we’re ready to revisit some of the ideas of the early web again.</p><p>Probably not in design - I’m afraid <code>dancing-baby.gif</code> is gone for good. But some of the broader ideas from back then are picking up a second wind lately, and I like it.</p>
 <h2 id="h-serverside-rendering"><a class="heading-anchor" href="#h-serverside-rendering">#</a> Serverside Rendering</h2><p>After spending the better part of the last decade shifting rendering logic to the client, it looks like the pendulum is about to swing into the other direction again.</p><p>With projects like <a href="https://www.phoenixframework.org/">Phoenix Liveview</a> or <a href="https://hey.com/how-it-works/">hey.com</a>’s recent “it’s-just-HTML” approach, it seems like server-side rendering (SSR) is stepping back into the spotlight.</p><p>It makes sense - servers are <strong>really good</strong> at this, and sending compressed HTML through the network can be lightning fast. The classic request-response cycle has evolved as well: HTTP/2 and smart techniques like <a href="https://github.com/turbolinks/turbolinks">Turbolinks</a> or <a href="https://instant.page/">just-in-time preloading</a> allow for a much better experience now than when you first tried to load that Michael Jordan photo on the Space Jam website over dial-up.</p><p>Taking the responsibility of rendering UI and all the Javascript that comes with it off users’ shoulders would be a great <s>old</s> new strategy for the next generation of web apps.</p><p><a href="https://en.wikipedia.org/wiki/Microsoft_FrontPage">Frontpage</a> and <a href="https://en.wikipedia.org/wiki/Adobe_Dreamweaver">Dreamweaver</a> were big in the 90s because of their “What You See Is What You Get” interface. People could set up a website without any coding skills, just by dragging boxes and typing text in them.</p><p>Of course they soon found that there was still source code underneath, you just didn’t see it. And most of the time, that source code was a big heap of auto-generated garbage - it ultimately failed to keep up with the requirements of the modern web.</p><figure class="extend"><a href="https://webflow.com" rel="noopener noreferrer" target="_blank"><img src="/assets/media/return-of-the-90s-web/webflow.jpg" alt="the webflow interface, different design widgets and controls" loading="lazy"/></a></figure><p>Today our understanding of the web has improved, and so have our tools. <a href="https://webflow.com/">Webflow</a> is one of the contenders for the “no-code editor” trophy. The output it generates is far better.</p><p>These tools will probably not be a replacement for developers as a whole - complex projects still require tons of human brainpower to work. But for all the landing pages and marketing sites, this could be the holy grail of <abbr title="What you see is what you get">WYSIWYG</abbr> we thought we had in the 90s.</p>
 <h2 id="h-personal-websites"><a class="heading-anchor" href="#h-personal-websites">#</a> Personal Websites</h2><p>It might just be my IndieWeb filter bubble talking, but I think there is a renewed interest in personal websites. A lot of big social media giants are falling out of favor, and it becomes cool again to <strong>own a space</strong> on the web rather then being one of a billion usernames.</p><p>Our digitial identities are becoming increasingly more important, and people become aware that they’re not in control of their data. Personal sites were very popular in the era before Myspace and Facebook, and it’s now easier than ever to build one.</p><p>Services like <a href="https://carrd.co/">Carrd</a> offer a straightforward way to create simple one-pagers, and their numbers show a lot of interest:</p><p>Blogging is gaining popularity again as well, used as a tool for self-marketing or simply to express opinions. There are lots of good options for people who want to pick up blogging - either on their own sites or with platforms like <a href="http://micro.blog/">micro.blog</a>, that offer more independence than Medium &amp; Co.</p>
 <h2 id="h-curated-feeds-and-discovery"><a class="heading-anchor" href="#h-curated-feeds-and-discovery">#</a> Curated Feeds and Discovery</h2><p>Another issue created by social media is the prevalence of “algorithmic feeds”. We decided that the constant stream of input for our eyeballs should never end, so we built these complex systems to generate new content for us based on our interests.</p><p>But these are giant black boxes, and nobody really knows what signals go into them. Throw advertising, “fake news” and a couple of trolls into the mix, and you get the mess we all know now.</p><p>That’s why many people crave a <strong>more controlled reading experience</strong> on their own terms. Chronological, personal, relevant - a bespoke magazine of trusted sources. A curated feed.</p><p>One way to achieve something like that is through plain ol’ boring RSS. One more thing that was said to be dead but is growing in popularity again:</p><p>Another possibility is to discover new content through human connections instead of algorithms. People we already know for their content recommend others in the same field, creating decentralized clusters of trusted information.</p><p>Website owners used to do this a lot in the days before search engines, by providing <a href="/blogroll/">Blogroll Pages</a> or forming <a href="https://en.wikipedia.org/wiki/Webring">Webrings</a> with links to others in their cluster.</p><div class="callout callout--info"><span class="callout__icon"><svg class="icon icon--info" role="img" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/icons.sprite.svg#icon-info"/></svg></span><div class="callout__content"><p><strong>Webrings</strong> were a common way for people to connect their sites in the early web. To be a member of a webring, you had to embed a little widget on your site that contained a “forward”, a “backward”, and a “random” button. These buttons would then link to other sites in the ring.</p><p>BTW: If you want to host your own webring, I made this free <a href="/blog/webring-kit/">Starter Kit</a> for you.</p></div></div><webring-banner><p>Member of the <a href="https://webringdemo.netlify.com">An Example Webring</a> webring</p><a href="https://webringdemo.netlify.com/prev">Previous</a> <a href="https://webringdemo.netlify.com/random">Random</a> <a href="https://webringdemo.netlify.com/next">Next</a></webring-banner>
 <h2 id="h-smaller-communities-and-web-monetization"><a class="heading-anchor" href="#h-smaller-communities-and-web-monetization">#</a> Smaller Communities and Web Monetization</h2><p>Many independent creators are moving away from big “everyone’s on them” platforms back to private, more niche communities. New models for membership sites like <a href="https://ghost.org/members/">Ghost’s “Members”</a> feature enable creators to build communities on their content. People teach courses, self-publish books or provide APIs for specific topics.</p><p>Where the 90s had chatrooms and message boards, today there are tools like <a href="https://discord.com/">Discord</a> or <a href="https://www.twitch.tv/">Twitch</a> that help people with shared interests to connect with each other. These niche communities can then be a powerful userbase for independent businesses.</p><p>Of course the problem of monetization has existed from the very start of the web, and it’s still not easy today to earn money without splattering ads everywhere. But new standards like the <a href="https://webmonetization.org/">Web Monetization API</a> could be a very interesting solution, enabling creators to <a href="https://coil.com/">receive micro-payments</a> for their content.</p>
 <h2 id="h-learning-from-the-past"><a class="heading-anchor" href="#h-learning-from-the-past">#</a> Learning from the Past</h2><p>I don’t know if all of these trends will really play out, or if we’re up for something completely different. I do think it’s a good idea to learn from the past though, because that is what keeps us moving forward.</p><p>So maybe the second 90s can be even better than the first. At least we’re done with NSYNC this time.</p>
--- a/cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.html
+++ b/cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.html
@@ -0,0 +1,687 @@
 <!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>Time to upgrade your monitor (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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://tonsky.me/blog/monitors/">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>Time to upgrade your monitor</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://tonsky.me/blog/monitors/">Source originale du contenu</a></h2>
 <figure class="cover">
    <img src="https://tonsky.me/blog/monitors/cover.gif"/>
    Illustration by <a href="https://www.behance.net/yuliaprokopova" target="_blank">Yulia Prokopova</a>
 </figure>

 <p>I am a programmer. I do not deal with digital painting, photo processing, video editing. I don’t really care for wide gamut or even proper color reproduction. I spend most of my days in a text browser, text editor and text terminal, looking at barely moving letters.</p>

 <p>So I optimize my setup to showing really, really good letters. A good monitor is essential for that. Not nice to have. A MUST. And in “good” I mean, as good as you can get. These are my thoughts, based on my own experience, on what monitors work best for programming.</p>

 <h1 id="low-density-displays">Low-density displays</h1>

 <p>According to <a href="https://twitter.com/nikitonsky/status/1260287480638701568">my research among programmers</a>, 43% are still using monitors with pixel per inch density less than 150:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/research.png"/>
 </figure>

 <p>Why is this a problem? Because the only way to get good letters is by spending more pixels per letter. That simple. In the past, the displays’ pixel count was small, so we learned to live with that and even invented some very clever tricks to make our lives better. The two important things to understand are:</p>

 <ul>
  <li>Times of low-resolution displays are over. High-resolution displays are a commodity now.</li>
  <li>Tricks developed for low-resolution displays didn’t magically make text look good. That always was and still is impossible. They just made text slightly less terrible, but it still is terrible.</li>
 </ul>

 <p>If you think that you can somehow make your 1080p display render good text, that it just needs a few more tweaks, NO. This won’t happen. The sooner you accept that the sooner you can start looking for real solutions.</p>

 <p>To make my claim better founded, let’s look in detail how text <em>really</em> looks on a low-resolution display and what can be done about it (spoiler: not much!).</p>

 <h2 id="not-enough-pixels">Not enough pixels</h2>

 <p>First, there are simply not enough pixels to draw a letter. Let’s take Consolas, a font that was developed specifically for programmers. Microsoft worked really hard to fine-tune it for low-resolution rendering. We set it at 14px, which is default in VS Code (and people often go lower than that!):</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/consolas_gray_1x.png"/>
    Consolas at 14px, macOS
 </figure>

 <p>On that size, capital letter B takes up mere 6×9 pixels on a screen. Lowercase letters only have 7 (seven!) vertical pixels to work with. That’s NOT MUCH. I have more fingers than that. No matter how good font is designed, it’s hard to show anything when all you have is seven pixels. Anything slightly more complex than “T” or “H” becomes an illegible pixel mess.</p>

 <p>Look at the “g” in the picture above. It’s hard to say where strokes start or end, or even how many of them are there. It’s just random gray noise or a checkerboard, but not a letter. This is a letter:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/consolas_24x.png"/>
    Consolas at 168px
 </figure>

 <p>It’s a shame, really, watching these beautiful fine details getting clamped into mere 7×10 pixels.</p>

 <h2 id="the-dreadful-hinting">The dreadful hinting</h2>

 <p>To fight the problem of everything being a gray mess, Windows uses pretty aggressive hinting. Basically, it just bends and moves letter strokes to the nearest pixel, ensuring more crisp boundaries.</p>

 <p>And it works! Fonts do look better with hinting than without it:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting.png"/>
    No hinting (macOS) → Hinting (Windows)
 </figure>

 <p>Don’t get your hopes up though: it’s still a mess. It doesn’t make text look <em>good</em>. It makes it look <em>better</em>, but it is still bad.</p>

 <p>The main problem with hinting, though, is that it destroys letter shapes. Pixels are rendered not where they are supposed to be, but rather where pixel grid happens. To give you a taste:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/ttf_hinting.png"/>
    Verdana (k) and Times New Roman Italic (z) before rasterization at 13px. <a href="http://web.archive.org/web/20160304021305/http://antigrain.com/research/font_rasterization/index.html">Source</a>
 </figure>

 <p>The idea is that it’ll look better when rendered to the actual pixels.</p>

 <p>But even if we just look at vertical hinting of horizontal stems, it’s still changes font way too much:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_align.png"/>
 </figure>

 <p>See how horizontal stems are offset from their actual position in the vector font file? The error here is as big as ¼ pixel!</p>

 <p>But hey! If you never saw a high-res Consolas, who cares if <code class="language-plaintext highlighter-rouge">g</code> is the same shape or not? Who cares if stems are in the wrong place if you don’t know where they should’ve been in the first place? Well, sometimes problems are more obvious: circles are not circles, equal distances become not equal, proportions are all wrong, what supposed to be small becomes huge and vice versa, etc. Here:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_numbersign.png"/>
 </figure>

 <p>After moving horizontal stems to match pixel grid (by offsetting them up to ½ pixel!), Windows is having a hard time splitting 7 other pixels into three equal gaps. Unfortunately, alternative is no better:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/no_hinting_numbersign.png"/>
 </figure>

 <p>From my personal experience <a href="https://github.com/tonsky/FiraCode/issues?q=is%3Aissue+is%3Aopen+label%3Ahinting">building Fira Code</a>, I’ve seen too many ways simple idea “just stick edges to the nearest pixel” can go wrong:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_failures.png"/>
 </figure>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_failures_2.png"/>
 </figure>

 <p>This is a game that just can’t be won.</p>

 <h2 id="a-fractional-pixel">A fractional pixel</h2>

 <p>Can you draw a perfect line that is thinner than one pixel?</p>

 <p>Yes. The idea is simple, really. Your display’s pixel consists of three vertical subpixels, each responsible for their color. We can light them up individually, effectively tripling horizontal resolution!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_1.png"/>
 </figure>

 <p>In practice, though, you can’t implement it literally like that, because you’ll just end up with a christmas light mess:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_2.png"/>
 </figure>

 <p>So you have to compromise again (inside another compromise!), putting limit of how far can color deviate from black:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_3.png"/>
 </figure>

 <p>Which means letter shapes are not 3× sharper, they are maybe 1.5× sharper, but overall still pretty blurry.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_4.png"/>
 </figure>

 <p>In the end, there is an improvement in readability, but at the same time, black-on-white text gets a slight teal-and-orange halo around it. It’s not super bad, but you <em>can</em> see it.</p>

 <p>What I am trying to say is: all these tricks work. Having them is strictly better than not having them. For low-DPI displays all those are <em>a must</em>. But at the same time, they are a tight compromise made in times where we didn’t have better displays. Now that we have them, it’s time for all those tricks to go.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_5.png"/>
    Consolas 14px with ClearType and hinting → Consolas 14px @2x
 </figure>

 <h1 id="retina-macbooks">Retina Macbooks</h1>

 <p>Retina Macbooks <em>can</em> make text look good. However, there are two things you absolutely must do.</p>

 <h2 id="turn-off-font-smoothing">Turn off font smoothing</h2>

 <p>First, turn OFF “Font smoothing” in System Preferences → General:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/no_smoothing.png"/>
 </figure>

 <p>I’m not sure what the default value for it is these days, but make sure it’s OFF anyways.</p>

 <p>UPD: Based on the feedback, seems that default value for it is ON. Be sure to switch it OFF!</p>

 <p>That preference name is misleading. It used to be called “LCD font smoothing”, which suggested subpixel antialiasing. But Apple removed subpixel antialiasing from macOS in 2018, the same month it retired its last non-retina notebook.</p>

 <p>The other thing the name suggests is that your fonts might not be smoothed at all. This is not the case either.</p>

 <p>What it actually does is it makes font slightly bolder:</p>

 <figure>
    <img class="hoverable" src="https://tonsky.me/blog/monitors/smoothing_anim.png"/>
    Hover over or click the image to see the difference
 </figure>

 <p>So, why would you want it off? Because there’s no automated way to make font bolder. Normally each font weight is carefully designed by a professional type designer. It’s a tricky process that involves millions of constraints. If you try to simulate it by, for example, adding an outline to the letter, it will look terrible:</p>

 <figure>
    <img class="hoverable" src="https://tonsky.me/blog/monitors/fake_bold.png"/>
    Real bold v. Fake bold simulated with an outline. Hover or click to see the outline
 </figure>

 <p>But that’s exactly what “Font smoothing” in macOS does! Here’s another example. MacOS blurs pixel-perfect boundaries with “font smoothing”:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/smoothing_artefacts.png"/>
 </figure>

 <p>Imagine a font designer who carefully balanced every letter, placed each point down to 1/100 of the pixel, only to be ignored by dumb software that thinks it knows better.</p>

 <p>What does that mean for us, programmers? If you take a font that was hand-optimized for particular pixel size (which many programming fonts are, e.g. <a href="https://input.fontbureau.com/info/">Input at 11px</a> or <a href="https://larsenwork.com/monoid/">Monoid at 12px</a>), it will be rendered blurry despite all the efforts.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/smoothing_input.png"/>
 </figure>

 <p>And all the other fonts, including system ones, will be slightly more blurry than they need to be.</p>

 <p>UPD: Chris Morgan <a href="https://news.ycombinator.com/item?id=23553486">mentioned in a comment</a> that this setting might explain why so many designers put <code class="language-plaintext highlighter-rouge">font-weight: 300</code> <a href="https://grumpy.website/post/0PPp8l_pu">as their default web page font</a>. They are over-compensating for font emboldement of macOS!</p>

 <h2 id="integer-scaling">Integer scaling</h2>

 <p>When I bought my first (and world’s first) Retina Macbook Pro in 2012, it was exactly what was advertised: 2× scaling, every logical pixel rendered to 2×2 screen ones. 2880×1800 screen would be rendered from 1440×900 logical source.</p>

 <p>Sadly, reason has left Apple since, and at some point, Macbooks started to get weird non-integer scaling as default. E.g. 2880×1800 screen would have 1680×1050 logical resolution. That is 1.7142857143… scaling factor, or 12/7.</p>

 <p>Why? I guess, someone at Apple decided that more screen real estate sells better. The problem is, it’s not that big an increase: just a mere 15%. I mean, 15% is good, but not game-changing. The terrible part is, it comes at the cost of losing any chance to render ANY pixel-crisp image at all!</p>

 <p>Let’s see. 12/7 scaling factor means that for every 7 logical pixels there are 12 corresponding screen pixels. Meaning, every 7 pixels you have a chance to draw a 7-pixel tall rectangle and that’s your only chance to align with the pixel grid.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_grid.png"/>
 </figure>

 <p>Move 1 pixel up or down—you lose. Make it 1px taller or shorter—you lose.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_grid_offset.png"/>
 </figure>

 <p>A pixel-perfect line? Too bad you can’t specify 7/12 of a pixel as the line width. Even worse, each 1px line looks differently depending on its vertical position:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_lines.png"/>
 </figure>

 <p>It shouldn’t come as a surprise that modern icons are mostly made out of single-pixel-wide strokes:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_ui.png"/>
    Top: 2× scale, bottom: same after 12/7 downscaling
 </figure>

 <p>It’s hard to imagine someone who wants to look at <em>that</em> on purpose.</p>

 <p>(no idea why bottom right pixel is missing on all the icons)</p>

 <p>What happens with the text? Nothing good. First it is rendered pixel-crisp at 2× resolution, then downscaled at 85.7142857143…% to fit into physical pixels:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_text.png"/>
    Monoid at 12px. Top: 2× scale, bottom: same after 12/7 downscaling
 </figure>

 <p>That’s right, UI isn’t even rendered in that weird target resolution. Every Mac app thinks it is rendering at 2×, and only after that OS scales it down to the target resolution. There’s a lot of precision and nuance lost due to this two-step resize process.</p>

 <p>In my opinion, nothing can do more harm to the look of UI than this. Even old low-dpi UIs are better since their lines at least align with pixels!</p>

 <p>And don’t forget: this is the default. Every Macbook is shipped with these settings. Millions of people are working not knowing they were robbed of the joy of the retina screen.</p>

 <p>Luckily for us, this is easy to fix (at least for now). Go to System Preferences → Displays, uncheck Default and select 2× resolution instead:</p>

 <figure><img src="https://tonsky.me/blog/monitors/scaling.png"/></figure>

 <p>This will make everything on the screen slightly bigger, leaving you (slightly!) less screen estate. This is expected. My opinion is, a notebook is a constrained environment by definition. Extra 15% won’t magically turn it into a huge comfortable desktop. But at least you can enjoy that gorgeous screen and pixel-crisp fonts. Otherwise, why would you buy a retina screen at all?</p>

 <h2 id="cleartype-on-windows">ClearType on Windows</h2>

 <p>With all this talk about downsides of ClearType and how it’s only a must on low-density displays, should you turn it off on 4k display? In theory, yes. In practice, no.</p>

 <p>First of all, Windows doesn’t even have a UI to turn it off. I mean, there’s this checkbox:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_cleartype.png"/>
 </figure>

 <p>but even if you turn it off, you’ll have to go through configuring ClearType anyway. There’s just no OK button ¯\_(ツ)_/¯.</p>

 <p>If you turn it off this way, it’ll disappear in some places, but keep appearing in others. I guess those places use different APIs and one respects this setting while other does not.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_cleartype_mix.png"/>
 </figure>

 <p>And most importantly, text without ClearType looks like shit. It doesn’t have to (it looks perfect on macOS, for example), but particularly on Windows it’s unbearable. I guess they don’t even test this as an option:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_no_cleartype.png"/>
 </figure>

 <p>Just for fun, I retyped all the text labels using the same font, size and color, but on macOS:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/mac_no_cleartype.png"/>
 </figure>

 <p>But ClearType-d text on Windows still looks good, even on 4k display. It’s just a shame we can’t let ClearType go yet.</p>

 <h1 id="get-a-monitor">Get a monitor</h1>

 <p>Let me express an opinion. This is my blog, after all. I think that notebooks are not good for development. They are great in mobility and convenience, and this argument might outweigh everything else for some people. I accept that. But still, a desktop monitor + external keyboard are <em>always</em> better than a notebook. There might be other reasons for not buying a monitor, but having one, I hope, no one would argue it’s a superior dev environment.</p>

 <p>With this out of the way, the question arises, which monitor should you get? From what we already discussed, two things should be clear:</p>

 <ul>
  <li>It needs to be at least a 4k monitor. Both 5k and 6k are also great, of course.<sup id="fnref:1"/></li>
  <li>You need to use the integer scaling factor.</li>
 </ul>

 <p>That means, if you have a 4k monitor (3840×2160), and use 2× scaling, you’ll get an equivalent of 1920×1080 logical pixels. So it’s a basic 1080p monitor in terms of how much you can fit, but with much crisper UI and text in everything.</p>

 <p>Now, it might be tempting to use, for example, 1.5× scaling. That would give you an equivalent of 2560×1440 logical pixels, which, you might think, is much better. This is not how you should use it! The idea of a 4k monitor is NOT to get more pixels but to get the pixel-perfect, high-density UI rendering. Otherwise, a normal 1440p display would work better. A simple rule to remember: <em>pixel alignment outweighs everything else</em>. 1440p display is better at displaying 1440p content than 2160p display is at it.</p>

 <p>It’s also possible to run a 4k display at native 3840×2160 pixels. It depends on the size of the display, of course, but in my experience, even 27” 4k displays are too small to run at 1×. The UI will be too tiny.</p>

 <h2 id="the-myth-of-apple-patented-ppi">The myth of Apple-patented PPI</h2>

 <p><a href="https://bjango.com/articles/macexternaldisplays/">Some articles</a> suggest that Apple computers should only be used with 220 PPI displays (pixels per inch) because that’s the number Apple itself uses on all the Macbooks and iMacs. Sometimes people go as far as saying displays with different PPI are unusable with macOS.</p>

 <p>This is what I think. PPI defines the physical size of the pixel (220 PPI means there are 220 pixels per inch, or 1 pixel is 1/220 inch wide). So Apple ensures that pixels on all its devices have the same size. Does it mean macOS controls have the same physical size? Not anymore, after Apple started applying non-integer scaling by default on Macbooks.</p>

 <p>Then, it’s nearly impossible to ensure that <em>perceived</em> size, or how big the user <em>sees</em> the control, is the same because the distance to the display is different. For example, on average my eye-to-screen distance is 33 cm with the notebook, but 68 cm with the monitor. That’s 2× difference!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/distance.png"/>
 </figure>

 <p>That means that the angular size of the 1/220 Macbook pixel is equivalent to 1/110 monitor pixel. I’m actually having smaller <em>perceived</em> pixels on 4k 27” monitor than I have on 15” Macbook Pro!</p>

 <p>Even Apple itself understands that! Their iPhones have higher PPI than Macbooks because they are usually looked at from a closer distance.</p>

 <p>To sum things up, I don’t see a problem with 24” 4k displays or even 27” displays. I use both with macOS and love both, never had any problems. Of course, 5k or 6k would be better, but those go in the “nice to have” category. 4k is a must-have, an absolute minimum for anyone working with text.</p>

 <h1 id="go-120hz">Go 120 Hz</h1>

 <p>The world used to be divided into two camps: high-resolution displays and high-frame-rate displays. The former was good for text, latter for gaming, with no middle ground in between. If you like to play competitive games, buy both (and a large table). Gamers had no use for 4k displays since no reasonable game would run at 4k @ 120Hz, and the creative professionals had no use for 120 Hz in photo/text editing. I was in high-res camp since 2014, of course, and would never trade retina text rendering for barely noticeable refresh rate upgrade.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/camps.png"/>
    HP Z27 (4k) v. LG 34GL750-B (120 Hz)
 </figure>

 <p>Well, the split does not exist anymore. Since not that long ago (yes, I’m too lazy to check) you can have both! You can have a 4k monitor that runs on 120 Hz. In fact, that discovery was the main motivation for this article.</p>

 <h2 id="why-120hz">Why 120 Hz?</h2>

 <p>If you, like me, work with text, you might think that you have no use for 120 Hz. And you would be right. This falls into a “nice to have” category, but if you are looking for ways to improve your experience, this is a great way to do it.</p>

 <p>120 Hz gives you a couple of significant improvements:</p>

 <ul>
  <li>Animations are smoother, up to the point where they start to appear like a continuous motion instead of a very fast slideshow.</li>
  <li>Scrolling is very smooth in particular. Browser, code editing, to name a few.</li>
  <li>The whole system feels much more responsive.</li>
  <li>You can play games and work on a single display.</li>
 </ul>

 <p>I can’t show you how 120 Hz feels, of course. But this is what you can do to get the idea: switch to 30 Hz and try to work like that for a while.</p>

 <p>You’ll notice that everything is poorly animated, but also way less responsive. This is because the time between monitor updates is now 32 ms instead of 16 ms at 60 Hz. That means that whatever you do (press a button, move a mouse), the closest moment in time computer might start displaying the result might be as far as 32 ms away.</p>

 <p>32 ms is a long time and easily perceivable. On 60 Hz, that time is cut in half: the longest you need to wait is just 16 ms. On 120 Hz, this is time is cut in half again: from 16 ms to 8 ms. In absolute numbers, you lose an additional 8 ms, which means going 60 Hz → 120 Hz is about half as impactful as going 30 Hz → 60 Hz. Still, something to go after, in my opinion.</p>

 <h2 id="what-to-buy">What to buy?</h2>

 <p>There isn’t much choice, really. From what I can find, right now there are only four (yes, four!) 4k 120+ Hz displays on the market! I imagine that’s because demand is not that high, but hey, I’m glad we have at least those!</p>

 <p>First one is <a href="https://www.asus.com/us/Monitors/ROG-SWIFT-PG27UQ/">Asus ROG SWIFT PG27UQ</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/asus_pg27uq.png"/>
 </figure>

 <p>Second one is <a href="https://www.acer.com/ac/en/US/content/predator-series/predatorx27">Acer Predator X27</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_x27.png"/>
 </figure>

 <p>Third one is <a href="https://www.acer.com/ac/en/US/content/conceptd-model/UM.HC1AA.P02">Acer ConceptD CP7</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_cp7.png"/>
 </figure>

 <p>All are very nice monitors, I’m sure. But the price is a bit too steep (~$2,000), especially for someone for whom getting 120 Hz is not a question of life and death.</p>

 <p>There are few more <a href="https://www.tomshardware.com/reviews/best-4k-gaming-monitors-pc-144hz,6023.html">here</a> with a diagonal size of 55” and more, which would be hard to use on a normal desktop.</p>

 <p>Finally, by some unbelievable struck of luck, we actually have ONE reasonably priced, reasonably sized 4k 120 Hz monitor. That’s <a href="https://www.acer.com/ac/en/US/content/model/UM.HX3AA.P02">Acer Nitro XV273K</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_xv3.png"/>
 </figure>

 <p>And that’s the one that I have.</p>

 <h2 id="things-to-look-out-for-windows">Things to look out for (Windows)</h2>

 <p>Running 4k at 120 Hz is simple on Windows. Make sure your graphics card has DisplayPort 1.4, use it, that’s it. Seriously, it just works.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows.png"/>
 </figure>

 <h2 id="things-to-look-out-for-macos">Things to look out for (macOS)</h2>

 <p>MacOS support sucks. Officially none of the Apple computers support anything beyond 60 Hz, even on normal resolutions:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macs_compatibility.png"/>
 </figure>

 <p>So buying this display was the pure leap of faith. This is what I figured:</p>

 <ul>
  <li>4k @ 120 Hz requires 3840 × 2160 × 3 bpp × 120 Hz × 8 = 24 Gbit/s. Just below of <a href="https://en.wikipedia.org/wiki/DisplayPort#1.3">25.92 Gbit/s of DisplayPort 1.3 / 1.4</a>.</li>
  <li>HDMI 2.0 only provides 18.0 Gbit/s, so it has to be DisplayPort.</li>
  <li>Thunderbolt 3 can carry DisplayPort 1.4, so if only I can find the adapter, I should be good to go.</li>
 </ul>

 <p>Which port does my Macbook have? Easy! Use this Apple-provided diagram:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/ports_diagram.png"/>
 </figure>

 <p>Okay, so lighting bolt icon means Thunderbolt (not to be confused with Lighting port!), railroad switch means USB-C. Now just look at your Macbook:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_ports.png"/>
 </figure>

 <p>I guess you just have to know it ¯\_(ツ)_/¯. Alternatively, one can look at the Apple’s <a href="https://support.apple.com/kb/SP794?locale=en_US">intuitively named page SP794</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_spec_1.png"/>
 </figure>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_spec_2.png"/>
 </figure>

 <p>Ok, first of all, what does Thunderbolt 3 (USB-C) mean? Is it Thunderbolt 3 or is it USB-C? This might be a difference between “works flawlessly” and “doesn’t work at all”:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/monitor_ports.png"/>
 </figure>

 <p>Then it says “DisplayPort over USB-C” (but we have Thunderbolt 3, not USB-C!). It does not specify the DisplayPort version, and it’s useless without it. It also says USB 3.1 Gen 2 is limited by 10 Gb/s, but I guess USB 3 limits do not apply to USB-C? Also, what kind of name is USB 3.1 Gen 2? Was USB 3.2 already taken?</p>

 <p>Well, <a href="https://en.wikipedia.org/wiki/Thunderbolt_(interface)#Thunderbolt_3">Wikipedia to the rescue</a>!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/thunderbolt_3.png"/>
 </figure>

 <p>Turns out Thunderbolt 3 <a href="https://en.wikipedia.org/wiki/Thunderbolt_(interface)#Thunderbolt_3">might or might not carry DisplayPort 1.4</a>. Some of them only go as far as DP 1.2. The Wikipedia article suggests that anything before 2018 definitely won’t work, but after 2018 it might or might not work, depending on a Thunderbolt version. Feeling lost? Use my diagram:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/thunderbolt.png"/>
 </figure>

 <p>I think we all can agree that this whole Thunderbolt/USB-C situation is a very strong contender for the “Most confusing port standard ever created by humanity”.</p>

 <p>Long story short, I was lucky. My Macbook Pro 2019 had the correct port and with Thunderbolt 3 (USB-C) to DisplayPort adapter, everything worked. My understanding is, port versions on devices matter, but cables and adapters do not, as long as they physically fit into the hole. In my case, it was <a href="https://www.mi.com/commutator-dp">Xiaomi USB-C → miniDP</a> converter and miniDP → DP cable.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/converter.png"/>
 </figure>

 <p>Will it work for you? No idea! I hope so. All I know is that you should make sure your Thunderbolt 3 can carry DisplayPort 1.4. That’s the magical combination.</p>

 <h2 id="things-to-look-out-for-macoscontinued">Things to look out for (macOS)—continued</h2>

 <p>If that was not confusing enough, there’s more!</p>

 <p>Your Macbook has to have a discrete graphics card (I think).<sup id="fnref:2"/> Various Intel UHD / Iris Graphics do not work. eGPU works.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/graphics.png"/>
 </figure>

 <p>But even if you have the compatible Mac, with compatible ports, compatible cables, this is not enough. Every time I boot my Mac, there’s a ritual I have to perform to get my display to switch to the 120 Hz mode. I call it “120 Hz dance”:</p>

 <ol>
  <li>Fully boot into macOS. At this point display usually is at 60 Hz.</li>
  <li>Go to System Preferences → Displays.</li>
  <li>
    <p>While holding down Alt / Option key (the one with ⌥ on it), click on “Scaled” resolution.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_1.png"/>
 </figure>
  </li>
  <li>
    <p>To get access to Refresh rate chooser, check the “Show low resolution mode” checkbox. L for logic.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_2.png"/>
 </figure>
  </li>
  <li>
    <p>Look inside “Refresh Rate”. Most of the time the highest option there is “60 Hz”.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_3.png"/>
 </figure>
  </li>
  <li>Turn display off.</li>
  <li>Wait a couple of seconds.</li>
  <li>Turn the display on.</li>
  <li>
    <p>Look again under “Refresh Rate”. Hopefully, there’s now a “119.88 Herz” option.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_4.png"/>
 </figure>
  </li>
  <li>Select “119.88 Herz” in “Refresh Rate”.</li>
  <li>You are magnificent.</li>
 </ol>

 <p>Why is it 119.88 Herz, not 120 Herz? No idea. It seems to work the same. Why can’t macOS remember it? I don’t know. Why doesn’t macOS sees 120 Hz as an option until I turn the monitor off/on? Who knows! The main takeaway is, 120 Hz option might not always appear, but after some dancing around it might, and if it does, it actually works, despite all odds.</p>

 <p>The whole situation reminds me of buying 4k display in 2014: there are only a couple of models, ports are confusing, Apple support sucks. Hopefully, in five years 120 Hz will become a standard. Until then we should be grateful that, at great inconvenience, we at least can use modern displays with macOS. Thanks, Apple!</p>

 <h1 id="whats-next">What’s next?</h1>

 <p>Every human needs a dream. At some point, 4k @ 120 Hz will become the commodity, and we might even see 5k @ 120 Hz and more. We might also see Retina screens with ratios of 21:9<sup id="fnref:3"/> and even 32:9 (more horizontal space), which is always a welcome addition.</p>

 <p>But even today you can peek into the future, if you have extra $4,000 to spare. This is <a href="https://www.dell.com/en-us/work/shop/dell-ultrasharp-32-8k-monitor-up3218k/apd/210-alez/monitors-monitor-accessories">Dell UP3218K</a>, world’s first and only 8k monitor:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/dell_up3218k.png"/>
    Even on a promo page for 8k display, Dell puts out only 1× photos of it.
 </figure>

 <p>The pixel density on it is so high (280 PPI) it’s probably best used at 300% scaling (which macOS doesn’t have, of course, but Windows does). It also requires TWO simultaneous DisplayPort cables to work, which is again, a no-go for Macs.</p>

 <p>But even at 300% it will still give you an effective logical resolution of 2560×1440, which is substantially more than 1920×1080 of modern 4k displays. More pixel density and bigger resolution! Well, one can dream.</p>

 <h1 id="conclusion">Conclusion</h1>

 <p>To sum up, this is the best setup for programmers:</p>

 <ul>
  <li>Text can’t be made look good on low-resolution displays.</li>
  <li>High-PPI displays are now a commodity, it’s time to switch.</li>
  <li>Notebooks are ok, but a standalone monitor is always better.</li>
  <li>4k monitor only makes sense with 2× / 200% scaling.</li>
  <li>If you want to go further, there are now affordable 4k @ 120 Hz options.</li>
 </ul>

 <p>Happy coding!</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 type="text/javascript">
    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>
--- a/cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.md
+++ b/cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.md
@@ -0,0 +1,540 @@
 title: Time to upgrade your monitor
 url: https://tonsky.me/blog/monitors/
 hash_url: 4f1f531d8e88bfb6908b00fbf60d16e6

 <figure class="cover">
    <img src="https://tonsky.me/blog/monitors/cover.gif"/>
    Illustration by <a href="https://www.behance.net/yuliaprokopova" target="_blank">Yulia Prokopova</a>
 </figure>

 <p>I am a programmer. I do not deal with digital painting, photo processing, video editing. I don’t really care for wide gamut or even proper color reproduction. I spend most of my days in a text browser, text editor and text terminal, looking at barely moving letters.</p>

 <p>So I optimize my setup to showing really, really good letters. A good monitor is essential for that. Not nice to have. A MUST. And in “good” I mean, as good as you can get. These are my thoughts, based on my own experience, on what monitors work best for programming.</p>

 <h1 id="low-density-displays">Low-density displays</h1>

 <p>According to <a href="https://twitter.com/nikitonsky/status/1260287480638701568">my research among programmers</a>, 43% are still using monitors with pixel per inch density less than 150:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/research.png"/>
 </figure>

 <p>Why is this a problem? Because the only way to get good letters is by spending more pixels per letter. That simple. In the past, the displays’ pixel count was small, so we learned to live with that and even invented some very clever tricks to make our lives better. The two important things to understand are:</p>

 <ul>
  <li>Times of low-resolution displays are over. High-resolution displays are a commodity now.</li>
  <li>Tricks developed for low-resolution displays didn’t magically make text look good. That always was and still is impossible. They just made text slightly less terrible, but it still is terrible.</li>
 </ul>

 <p>If you think that you can somehow make your 1080p display render good text, that it just needs a few more tweaks, NO. This won’t happen. The sooner you accept that the sooner you can start looking for real solutions.</p>

 <p>To make my claim better founded, let’s look in detail how text <em>really</em> looks on a low-resolution display and what can be done about it (spoiler: not much!).</p>

 <h2 id="not-enough-pixels">Not enough pixels</h2>

 <p>First, there are simply not enough pixels to draw a letter. Let’s take Consolas, a font that was developed specifically for programmers. Microsoft worked really hard to fine-tune it for low-resolution rendering. We set it at 14px, which is default in VS Code (and people often go lower than that!):</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/consolas_gray_1x.png"/>
    Consolas at 14px, macOS
 </figure>

 <p>On that size, capital letter B takes up mere 6×9 pixels on a screen. Lowercase letters only have 7 (seven!) vertical pixels to work with. That’s NOT MUCH. I have more fingers than that. No matter how good font is designed, it’s hard to show anything when all you have is seven pixels. Anything slightly more complex than “T” or “H” becomes an illegible pixel mess.</p>

 <p>Look at the “g” in the picture above. It’s hard to say where strokes start or end, or even how many of them are there. It’s just random gray noise or a checkerboard, but not a letter. This is a letter:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/consolas_24x.png"/>
    Consolas at 168px
 </figure>

 <p>It’s a shame, really, watching these beautiful fine details getting clamped into mere 7×10 pixels.</p>

 <h2 id="the-dreadful-hinting">The dreadful hinting</h2>

 <p>To fight the problem of everything being a gray mess, Windows uses pretty aggressive hinting. Basically, it just bends and moves letter strokes to the nearest pixel, ensuring more crisp boundaries.</p>

 <p>And it works! Fonts do look better with hinting than without it:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting.png"/>
    No hinting (macOS) → Hinting (Windows)
 </figure>

 <p>Don’t get your hopes up though: it’s still a mess. It doesn’t make text look <em>good</em>. It makes it look <em>better</em>, but it is still bad.</p>

 <p>The main problem with hinting, though, is that it destroys letter shapes. Pixels are rendered not where they are supposed to be, but rather where pixel grid happens. To give you a taste:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/ttf_hinting.png"/>
    Verdana (k) and Times New Roman Italic (z) before rasterization at 13px. <a href="http://web.archive.org/web/20160304021305/http://antigrain.com/research/font_rasterization/index.html">Source</a>
 </figure>

 <p>The idea is that it’ll look better when rendered to the actual pixels.</p>

 <p>But even if we just look at vertical hinting of horizontal stems, it’s still changes font way too much:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_align.png"/>
 </figure>

 <p>See how horizontal stems are offset from their actual position in the vector font file? The error here is as big as ¼ pixel!</p>

 <p>But hey! If you never saw a high-res Consolas, who cares if <code class="language-plaintext highlighter-rouge">g</code> is the same shape or not? Who cares if stems are in the wrong place if you don’t know where they should’ve been in the first place? Well, sometimes problems are more obvious: circles are not circles, equal distances become not equal, proportions are all wrong, what supposed to be small becomes huge and vice versa, etc. Here:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_numbersign.png"/>
 </figure>

 <p>After moving horizontal stems to match pixel grid (by offsetting them up to ½ pixel!), Windows is having a hard time splitting 7 other pixels into three equal gaps. Unfortunately, alternative is no better:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/no_hinting_numbersign.png"/>
 </figure>

 <p>From my personal experience <a href="https://github.com/tonsky/FiraCode/issues?q=is%3Aissue+is%3Aopen+label%3Ahinting">building Fira Code</a>, I’ve seen too many ways simple idea “just stick edges to the nearest pixel” can go wrong:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_failures.png"/>
 </figure>

 <figure>
    <img src="https://tonsky.me/blog/monitors/hinting_failures_2.png"/>
 </figure>

 <p>This is a game that just can’t be won.</p>

 <h2 id="a-fractional-pixel">A fractional pixel</h2>

 <p>Can you draw a perfect line that is thinner than one pixel?</p>

 <p>Yes. The idea is simple, really. Your display’s pixel consists of three vertical subpixels, each responsible for their color. We can light them up individually, effectively tripling horizontal resolution!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_1.png"/>
 </figure>

 <p>In practice, though, you can’t implement it literally like that, because you’ll just end up with a christmas light mess:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_2.png"/>
 </figure>

 <p>So you have to compromise again (inside another compromise!), putting limit of how far can color deviate from black:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_3.png"/>
 </figure>

 <p>Which means letter shapes are not 3× sharper, they are maybe 1.5× sharper, but overall still pretty blurry.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_4.png"/>
 </figure>

 <p>In the end, there is an improvement in readability, but at the same time, black-on-white text gets a slight teal-and-orange halo around it. It’s not super bad, but you <em>can</em> see it.</p>

 <p>What I am trying to say is: all these tricks work. Having them is strictly better than not having them. For low-DPI displays all those are <em>a must</em>. But at the same time, they are a tight compromise made in times where we didn’t have better displays. Now that we have them, it’s time for all those tricks to go.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/subpixel_5.png"/>
    Consolas 14px with ClearType and hinting → Consolas 14px @2x
 </figure>

 <h1 id="retina-macbooks">Retina Macbooks</h1>

 <p>Retina Macbooks <em>can</em> make text look good. However, there are two things you absolutely must do.</p>

 <h2 id="turn-off-font-smoothing">Turn off font smoothing</h2>

 <p>First, turn OFF “Font smoothing” in System Preferences → General:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/no_smoothing.png"/>
 </figure>

 <p>I’m not sure what the default value for it is these days, but make sure it’s OFF anyways.</p>

 <p>UPD: Based on the feedback, seems that default value for it is ON. Be sure to switch it OFF!</p>

 <p>That preference name is misleading. It used to be called “LCD font smoothing”, which suggested subpixel antialiasing. But Apple removed subpixel antialiasing from macOS in 2018, the same month it retired its last non-retina notebook.</p>

 <p>The other thing the name suggests is that your fonts might not be smoothed at all. This is not the case either.</p>

 <p>What it actually does is it makes font slightly bolder:</p>

 <figure>
    <img class="hoverable" src="https://tonsky.me/blog/monitors/smoothing_anim.png"/>
    Hover over or click the image to see the difference
 </figure>

 <p>So, why would you want it off? Because there’s no automated way to make font bolder. Normally each font weight is carefully designed by a professional type designer. It’s a tricky process that involves millions of constraints. If you try to simulate it by, for example, adding an outline to the letter, it will look terrible:</p>

 <figure>
    <img class="hoverable" src="https://tonsky.me/blog/monitors/fake_bold.png"/>
    Real bold v. Fake bold simulated with an outline. Hover or click to see the outline
 </figure>

 <p>But that’s exactly what “Font smoothing” in macOS does! Here’s another example. MacOS blurs pixel-perfect boundaries with “font smoothing”:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/smoothing_artefacts.png"/>
 </figure>

 <p>Imagine a font designer who carefully balanced every letter, placed each point down to 1/100 of the pixel, only to be ignored by dumb software that thinks it knows better.</p>

 <p>What does that mean for us, programmers? If you take a font that was hand-optimized for particular pixel size (which many programming fonts are, e.g. <a href="https://input.fontbureau.com/info/">Input at 11px</a> or <a href="https://larsenwork.com/monoid/">Monoid at 12px</a>), it will be rendered blurry despite all the efforts.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/smoothing_input.png"/>
 </figure>

 <p>And all the other fonts, including system ones, will be slightly more blurry than they need to be.</p>

 <p>UPD: Chris Morgan <a href="https://news.ycombinator.com/item?id=23553486">mentioned in a comment</a> that this setting might explain why so many designers put <code class="language-plaintext highlighter-rouge">font-weight: 300</code> <a href="https://grumpy.website/post/0PPp8l_pu">as their default web page font</a>. They are over-compensating for font emboldement of macOS!</p>

 <h2 id="integer-scaling">Integer scaling</h2>

 <p>When I bought my first (and world’s first) Retina Macbook Pro in 2012, it was exactly what was advertised: 2× scaling, every logical pixel rendered to 2×2 screen ones. 2880×1800 screen would be rendered from 1440×900 logical source.</p>

 <p>Sadly, reason has left Apple since, and at some point, Macbooks started to get weird non-integer scaling as default. E.g. 2880×1800 screen would have 1680×1050 logical resolution. That is 1.7142857143… scaling factor, or 12/7.</p>

 <p>Why? I guess, someone at Apple decided that more screen real estate sells better. The problem is, it’s not that big an increase: just a mere 15%. I mean, 15% is good, but not game-changing. The terrible part is, it comes at the cost of losing any chance to render ANY pixel-crisp image at all!</p>

 <p>Let’s see. 12/7 scaling factor means that for every 7 logical pixels there are 12 corresponding screen pixels. Meaning, every 7 pixels you have a chance to draw a 7-pixel tall rectangle and that’s your only chance to align with the pixel grid.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_grid.png"/>
 </figure>

 <p>Move 1 pixel up or down—you lose. Make it 1px taller or shorter—you lose.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_grid_offset.png"/>
 </figure>

 <p>A pixel-perfect line? Too bad you can’t specify 7/12 of a pixel as the line width. Even worse, each 1px line looks differently depending on its vertical position:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_lines.png"/>
 </figure>

 <p>It shouldn’t come as a surprise that modern icons are mostly made out of single-pixel-wide strokes:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_ui.png"/>
    Top: 2× scale, bottom: same after 12/7 downscaling
 </figure>

 <p>It’s hard to imagine someone who wants to look at <em>that</em> on purpose.</p>

 <p>(no idea why bottom right pixel is missing on all the icons)</p>

 <p>What happens with the text? Nothing good. First it is rendered pixel-crisp at 2× resolution, then downscaled at 85.7142857143…% to fit into physical pixels:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/12by7_text.png"/>
    Monoid at 12px. Top: 2× scale, bottom: same after 12/7 downscaling
 </figure>

 <p>That’s right, UI isn’t even rendered in that weird target resolution. Every Mac app thinks it is rendering at 2×, and only after that OS scales it down to the target resolution. There’s a lot of precision and nuance lost due to this two-step resize process.</p>

 <p>In my opinion, nothing can do more harm to the look of UI than this. Even old low-dpi UIs are better since their lines at least align with pixels!</p>

 <p>And don’t forget: this is the default. Every Macbook is shipped with these settings. Millions of people are working not knowing they were robbed of the joy of the retina screen.</p>

 <p>Luckily for us, this is easy to fix (at least for now). Go to System Preferences → Displays, uncheck Default and select 2× resolution instead:</p>

 <figure><img src="https://tonsky.me/blog/monitors/scaling.png"/></figure>

 <p>This will make everything on the screen slightly bigger, leaving you (slightly!) less screen estate. This is expected. My opinion is, a notebook is a constrained environment by definition. Extra 15% won’t magically turn it into a huge comfortable desktop. But at least you can enjoy that gorgeous screen and pixel-crisp fonts. Otherwise, why would you buy a retina screen at all?</p>

 <h2 id="cleartype-on-windows">ClearType on Windows</h2>

 <p>With all this talk about downsides of ClearType and how it’s only a must on low-density displays, should you turn it off on 4k display? In theory, yes. In practice, no.</p>

 <p>First of all, Windows doesn’t even have a UI to turn it off. I mean, there’s this checkbox:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_cleartype.png"/>
 </figure>

 <p>but even if you turn it off, you’ll have to go through configuring ClearType anyway. There’s just no OK button ¯\_(ツ)_/¯.</p>

 <p>If you turn it off this way, it’ll disappear in some places, but keep appearing in others. I guess those places use different APIs and one respects this setting while other does not.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_cleartype_mix.png"/>
 </figure>

 <p>And most importantly, text without ClearType looks like shit. It doesn’t have to (it looks perfect on macOS, for example), but particularly on Windows it’s unbearable. I guess they don’t even test this as an option:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows_no_cleartype.png"/>
 </figure>

 <p>Just for fun, I retyped all the text labels using the same font, size and color, but on macOS:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/mac_no_cleartype.png"/>
 </figure>

 <p>But ClearType-d text on Windows still looks good, even on 4k display. It’s just a shame we can’t let ClearType go yet.</p>

 <h1 id="get-a-monitor">Get a monitor</h1>

 <p>Let me express an opinion. This is my blog, after all. I think that notebooks are not good for development. They are great in mobility and convenience, and this argument might outweigh everything else for some people. I accept that. But still, a desktop monitor + external keyboard are <em>always</em> better than a notebook. There might be other reasons for not buying a monitor, but having one, I hope, no one would argue it’s a superior dev environment.</p>

 <p>With this out of the way, the question arises, which monitor should you get? From what we already discussed, two things should be clear:</p>

 <ul>
  <li>It needs to be at least a 4k monitor. Both 5k and 6k are also great, of course.<sup id="fnref:1"/></li>
  <li>You need to use the integer scaling factor.</li>
 </ul>

 <p>That means, if you have a 4k monitor (3840×2160), and use 2× scaling, you’ll get an equivalent of 1920×1080 logical pixels. So it’s a basic 1080p monitor in terms of how much you can fit, but with much crisper UI and text in everything.</p>

 <p>Now, it might be tempting to use, for example, 1.5× scaling. That would give you an equivalent of 2560×1440 logical pixels, which, you might think, is much better. This is not how you should use it! The idea of a 4k monitor is NOT to get more pixels but to get the pixel-perfect, high-density UI rendering. Otherwise, a normal 1440p display would work better. A simple rule to remember: <em>pixel alignment outweighs everything else</em>. 1440p display is better at displaying 1440p content than 2160p display is at it.</p>

 <p>It’s also possible to run a 4k display at native 3840×2160 pixels. It depends on the size of the display, of course, but in my experience, even 27” 4k displays are too small to run at 1×. The UI will be too tiny.</p>

 <h2 id="the-myth-of-apple-patented-ppi">The myth of Apple-patented PPI</h2>

 <p><a href="https://bjango.com/articles/macexternaldisplays/">Some articles</a> suggest that Apple computers should only be used with 220 PPI displays (pixels per inch) because that’s the number Apple itself uses on all the Macbooks and iMacs. Sometimes people go as far as saying displays with different PPI are unusable with macOS.</p>

 <p>This is what I think. PPI defines the physical size of the pixel (220 PPI means there are 220 pixels per inch, or 1 pixel is 1/220 inch wide). So Apple ensures that pixels on all its devices have the same size. Does it mean macOS controls have the same physical size? Not anymore, after Apple started applying non-integer scaling by default on Macbooks.</p>

 <p>Then, it’s nearly impossible to ensure that <em>perceived</em> size, or how big the user <em>sees</em> the control, is the same because the distance to the display is different. For example, on average my eye-to-screen distance is 33 cm with the notebook, but 68 cm with the monitor. That’s 2× difference!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/distance.png"/>
 </figure>

 <p>That means that the angular size of the 1/220 Macbook pixel is equivalent to 1/110 monitor pixel. I’m actually having smaller <em>perceived</em> pixels on 4k 27” monitor than I have on 15” Macbook Pro!</p>

 <p>Even Apple itself understands that! Their iPhones have higher PPI than Macbooks because they are usually looked at from a closer distance.</p>

 <p>To sum things up, I don’t see a problem with 24” 4k displays or even 27” displays. I use both with macOS and love both, never had any problems. Of course, 5k or 6k would be better, but those go in the “nice to have” category. 4k is a must-have, an absolute minimum for anyone working with text.</p>

 <h1 id="go-120hz">Go 120 Hz</h1>

 <p>The world used to be divided into two camps: high-resolution displays and high-frame-rate displays. The former was good for text, latter for gaming, with no middle ground in between. If you like to play competitive games, buy both (and a large table). Gamers had no use for 4k displays since no reasonable game would run at 4k @ 120Hz, and the creative professionals had no use for 120 Hz in photo/text editing. I was in high-res camp since 2014, of course, and would never trade retina text rendering for barely noticeable refresh rate upgrade.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/camps.png"/>
    HP Z27 (4k) v. LG 34GL750-B (120 Hz)
 </figure>

 <p>Well, the split does not exist anymore. Since not that long ago (yes, I’m too lazy to check) you can have both! You can have a 4k monitor that runs on 120 Hz. In fact, that discovery was the main motivation for this article.</p>

 <h2 id="why-120hz">Why 120 Hz?</h2>

 <p>If you, like me, work with text, you might think that you have no use for 120 Hz. And you would be right. This falls into a “nice to have” category, but if you are looking for ways to improve your experience, this is a great way to do it.</p>

 <p>120 Hz gives you a couple of significant improvements:</p>

 <ul>
  <li>Animations are smoother, up to the point where they start to appear like a continuous motion instead of a very fast slideshow.</li>
  <li>Scrolling is very smooth in particular. Browser, code editing, to name a few.</li>
  <li>The whole system feels much more responsive.</li>
  <li>You can play games and work on a single display.</li>
 </ul>

 <p>I can’t show you how 120 Hz feels, of course. But this is what you can do to get the idea: switch to 30 Hz and try to work like that for a while.</p>

 <p>You’ll notice that everything is poorly animated, but also way less responsive. This is because the time between monitor updates is now 32 ms instead of 16 ms at 60 Hz. That means that whatever you do (press a button, move a mouse), the closest moment in time computer might start displaying the result might be as far as 32 ms away.</p>

 <p>32 ms is a long time and easily perceivable. On 60 Hz, that time is cut in half: the longest you need to wait is just 16 ms. On 120 Hz, this is time is cut in half again: from 16 ms to 8 ms. In absolute numbers, you lose an additional 8 ms, which means going 60 Hz → 120 Hz is about half as impactful as going 30 Hz → 60 Hz. Still, something to go after, in my opinion.</p>

 <h2 id="what-to-buy">What to buy?</h2>

 <p>There isn’t much choice, really. From what I can find, right now there are only four (yes, four!) 4k 120+ Hz displays on the market! I imagine that’s because demand is not that high, but hey, I’m glad we have at least those!</p>

 <p>First one is <a href="https://www.asus.com/us/Monitors/ROG-SWIFT-PG27UQ/">Asus ROG SWIFT PG27UQ</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/asus_pg27uq.png"/>
 </figure>

 <p>Second one is <a href="https://www.acer.com/ac/en/US/content/predator-series/predatorx27">Acer Predator X27</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_x27.png"/>
 </figure>

 <p>Third one is <a href="https://www.acer.com/ac/en/US/content/conceptd-model/UM.HC1AA.P02">Acer ConceptD CP7</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_cp7.png"/>
 </figure>

 <p>All are very nice monitors, I’m sure. But the price is a bit too steep (~$2,000), especially for someone for whom getting 120 Hz is not a question of life and death.</p>

 <p>There are few more <a href="https://www.tomshardware.com/reviews/best-4k-gaming-monitors-pc-144hz,6023.html">here</a> with a diagonal size of 55” and more, which would be hard to use on a normal desktop.</p>

 <p>Finally, by some unbelievable struck of luck, we actually have ONE reasonably priced, reasonably sized 4k 120 Hz monitor. That’s <a href="https://www.acer.com/ac/en/US/content/model/UM.HX3AA.P02">Acer Nitro XV273K</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/acer_xv3.png"/>
 </figure>

 <p>And that’s the one that I have.</p>

 <h2 id="things-to-look-out-for-windows">Things to look out for (Windows)</h2>

 <p>Running 4k at 120 Hz is simple on Windows. Make sure your graphics card has DisplayPort 1.4, use it, that’s it. Seriously, it just works.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/windows.png"/>
 </figure>

 <h2 id="things-to-look-out-for-macos">Things to look out for (macOS)</h2>

 <p>MacOS support sucks. Officially none of the Apple computers support anything beyond 60 Hz, even on normal resolutions:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macs_compatibility.png"/>
 </figure>

 <p>So buying this display was the pure leap of faith. This is what I figured:</p>

 <ul>
  <li>4k @ 120 Hz requires 3840 × 2160 × 3 bpp × 120 Hz × 8 = 24 Gbit/s. Just below of <a href="https://en.wikipedia.org/wiki/DisplayPort#1.3">25.92 Gbit/s of DisplayPort 1.3 / 1.4</a>.</li>
  <li>HDMI 2.0 only provides 18.0 Gbit/s, so it has to be DisplayPort.</li>
  <li>Thunderbolt 3 can carry DisplayPort 1.4, so if only I can find the adapter, I should be good to go.</li>
 </ul>

 <p>Which port does my Macbook have? Easy! Use this Apple-provided diagram:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/ports_diagram.png"/>
 </figure>

 <p>Okay, so lighting bolt icon means Thunderbolt (not to be confused with Lighting port!), railroad switch means USB-C. Now just look at your Macbook:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_ports.png"/>
 </figure>

 <p>I guess you just have to know it ¯\_(ツ)_/¯. Alternatively, one can look at the Apple’s <a href="https://support.apple.com/kb/SP794?locale=en_US">intuitively named page SP794</a>:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_spec_1.png"/>
 </figure>

 <figure>
    <img src="https://tonsky.me/blog/monitors/macbook_spec_2.png"/>
 </figure>

 <p>Ok, first of all, what does Thunderbolt 3 (USB-C) mean? Is it Thunderbolt 3 or is it USB-C? This might be a difference between “works flawlessly” and “doesn’t work at all”:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/monitor_ports.png"/>
 </figure>

 <p>Then it says “DisplayPort over USB-C” (but we have Thunderbolt 3, not USB-C!). It does not specify the DisplayPort version, and it’s useless without it. It also says USB 3.1 Gen 2 is limited by 10 Gb/s, but I guess USB 3 limits do not apply to USB-C? Also, what kind of name is USB 3.1 Gen 2? Was USB 3.2 already taken?</p>

 <p>Well, <a href="https://en.wikipedia.org/wiki/Thunderbolt_(interface)#Thunderbolt_3">Wikipedia to the rescue</a>!</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/thunderbolt_3.png"/>
 </figure>

 <p>Turns out Thunderbolt 3 <a href="https://en.wikipedia.org/wiki/Thunderbolt_(interface)#Thunderbolt_3">might or might not carry DisplayPort 1.4</a>. Some of them only go as far as DP 1.2. The Wikipedia article suggests that anything before 2018 definitely won’t work, but after 2018 it might or might not work, depending on a Thunderbolt version. Feeling lost? Use my diagram:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/thunderbolt.png"/>
 </figure>

 <p>I think we all can agree that this whole Thunderbolt/USB-C situation is a very strong contender for the “Most confusing port standard ever created by humanity”.</p>

 <p>Long story short, I was lucky. My Macbook Pro 2019 had the correct port and with Thunderbolt 3 (USB-C) to DisplayPort adapter, everything worked. My understanding is, port versions on devices matter, but cables and adapters do not, as long as they physically fit into the hole. In my case, it was <a href="https://www.mi.com/commutator-dp">Xiaomi USB-C → miniDP</a> converter and miniDP → DP cable.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/converter.png"/>
 </figure>

 <p>Will it work for you? No idea! I hope so. All I know is that you should make sure your Thunderbolt 3 can carry DisplayPort 1.4. That’s the magical combination.</p>

 <h2 id="things-to-look-out-for-macoscontinued">Things to look out for (macOS)—continued</h2>

 <p>If that was not confusing enough, there’s more!</p>

 <p>Your Macbook has to have a discrete graphics card (I think).<sup id="fnref:2"/> Various Intel UHD / Iris Graphics do not work. eGPU works.</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/graphics.png"/>
 </figure>

 <p>But even if you have the compatible Mac, with compatible ports, compatible cables, this is not enough. Every time I boot my Mac, there’s a ritual I have to perform to get my display to switch to the 120 Hz mode. I call it “120 Hz dance”:</p>

 <ol>
  <li>Fully boot into macOS. At this point display usually is at 60 Hz.</li>
  <li>Go to System Preferences → Displays.</li>
  <li>
    <p>While holding down Alt / Option key (the one with ⌥ on it), click on “Scaled” resolution.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_1.png"/>
 </figure>
  </li>
  <li>
    <p>To get access to Refresh rate chooser, check the “Show low resolution mode” checkbox. L for logic.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_2.png"/>
 </figure>
  </li>
  <li>
    <p>Look inside “Refresh Rate”. Most of the time the highest option there is “60 Hz”.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_3.png"/>
 </figure>
  </li>
  <li>Turn display off.</li>
  <li>Wait a couple of seconds.</li>
  <li>Turn the display on.</li>
  <li>
    <p>Look again under “Refresh Rate”. Hopefully, there’s now a “119.88 Herz” option.</p>

    <figure>
     <img src="https://tonsky.me/blog/monitors/settings_4.png"/>
 </figure>
  </li>
  <li>Select “119.88 Herz” in “Refresh Rate”.</li>
  <li>You are magnificent.</li>
 </ol>

 <p>Why is it 119.88 Herz, not 120 Herz? No idea. It seems to work the same. Why can’t macOS remember it? I don’t know. Why doesn’t macOS sees 120 Hz as an option until I turn the monitor off/on? Who knows! The main takeaway is, 120 Hz option might not always appear, but after some dancing around it might, and if it does, it actually works, despite all odds.</p>

 <p>The whole situation reminds me of buying 4k display in 2014: there are only a couple of models, ports are confusing, Apple support sucks. Hopefully, in five years 120 Hz will become a standard. Until then we should be grateful that, at great inconvenience, we at least can use modern displays with macOS. Thanks, Apple!</p>

 <h1 id="whats-next">What’s next?</h1>

 <p>Every human needs a dream. At some point, 4k @ 120 Hz will become the commodity, and we might even see 5k @ 120 Hz and more. We might also see Retina screens with ratios of 21:9<sup id="fnref:3"/> and even 32:9 (more horizontal space), which is always a welcome addition.</p>

 <p>But even today you can peek into the future, if you have extra $4,000 to spare. This is <a href="https://www.dell.com/en-us/work/shop/dell-ultrasharp-32-8k-monitor-up3218k/apd/210-alez/monitors-monitor-accessories">Dell UP3218K</a>, world’s first and only 8k monitor:</p>

 <figure>
    <img src="https://tonsky.me/blog/monitors/dell_up3218k.png"/>
    Even on a promo page for 8k display, Dell puts out only 1× photos of it.
 </figure>

 <p>The pixel density on it is so high (280 PPI) it’s probably best used at 300% scaling (which macOS doesn’t have, of course, but Windows does). It also requires TWO simultaneous DisplayPort cables to work, which is again, a no-go for Macs.</p>

 <p>But even at 300% it will still give you an effective logical resolution of 2560×1440, which is substantially more than 1920×1080 of modern 4k displays. More pixel density and bigger resolution! Well, one can dream.</p>

 <h1 id="conclusion">Conclusion</h1>

 <p>To sum up, this is the best setup for programmers:</p>

 <ul>
  <li>Text can’t be made look good on low-resolution displays.</li>
  <li>High-PPI displays are now a commodity, it’s time to switch.</li>
  <li>Notebooks are ok, but a standalone monitor is always better.</li>
  <li>4k monitor only makes sense with 2× / 200% scaling.</li>
  <li>If you want to go further, there are now affordable 4k @ 120 Hz options.</li>
 </ul>

 <p>Happy coding!</p>
--- a/cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.html
+++ b/cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.html
@@ -0,0 +1,186 @@
 <!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>Thoughts on Trust in Business (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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://garrettdimon.com/2020/thoughts-on-trust-in-business/">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>Thoughts on Trust in Business</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://garrettdimon.com/2020/thoughts-on-trust-in-business/">Source originale du contenu</a></h2>
 <p>The other day, I signed up for <a href="https://hey.com">Hey</a> without poking around or even thinking about it. I just put in my credit card and set up forwarding for my personal email.</p>

 <p>After the fact, I thought about how unusual that was and started thinking about what it takes for something like that to happen. It boils down to trust. I wholeheartedly trust Basecamp. I also happen to like their products, but that’s another topic.</p>

 <p>The fact that I trust them doesn’t mean that I believe they are perfect or that I fully agree with each and every decision they make. But over the almost 20 years that I’ve been following them, they’ve consistently been honest, fair, and caring. They have principles, and they stand by them. There’s alignment and transparency in everything they do.</p>

 <p>You may not agree with them or like their software, but you can’t deny that you always know where they stand and why. What’s disappointing is just how unique that is among businesses. So how does a company earn that kind of trust? Through repeated action.</p>

 <p>They’ve created and shared <a href="https://github.com/basecamp">numerous open source tools</a> and even <a href="https://github.com/basecamp/policies">released their various policies under an open source license</a>. They invest significantly in security and infrastructure and <a href="https://twitter.com/dhh/status/1260289063455621121">actively share those advances back into Rails</a>.</p>

 <p>They don’t hesitate to publicly call out problematic behavior by people or companies that deserve it <a href="https://m.signalvnoise.com/tagged/jeff-bezos/">even when that person is an investor in their business</a> or <a href="https://twitter.com/dhh/status/1272968382329942017">when it’s a company that carries significant power over their businesses and manfactures the hardware that most of their team relies on to do their jobs</a>.</p>

 <p>They <a href="https://m.signalvnoise.com/mailing-list-software-should-stop-spying-on-subscribers/">advocate against invasive tracking</a> and <a href="https://m.signalvnoise.com/the-last-tracker-was-just-removed-from-basecamp-com/">remove it from their own products</a> and <a href="https://m.signalvnoise.com/marking-the-end-of-pixel-trackers-in-basecamp-emails/">emails</a>. They <a href="https://m.signalvnoise.com/employee-surveillance-software-is-not-welcome-to-integrate-with-basecamp/">block employee-surveilance software from integrating with their products</a>.</p>

 <p>They care deeply about great customer support and <a href="https://basecamp.com/support">respond to support requests in about 24 minutes</a> and <a href="https://m.signalvnoise.com/until-the-end-of-the-internet/">commit to supporting their products until the end of the internet</a>. They focus on the <a href="https://github.com/basecamp/policies/blob/master/refund/index.md">fairness of their policies</a> rather than universal applicability or consistency.</p>

 <p>They <a href="https://m.signalvnoise.com/celebrating-3-million-accounts-fewer/">commit the time to clean up and treat people who likely aren’t even customers any longer with care and consideration in the process</a>. They’re <a href="https://m.signalvnoise.com/postmortem-on-the-read-only-outage-of-basecamp-on-november-9th-2018/">open and honest about their own mistakes</a>.</p>

 <p>They keep pricing simple and fair focusing on what it costs them to deliver the service with a reasonable profit rather than how much they can extract from an organization. They even offer a <a href="https://m.signalvnoise.com/launch-basecamp-gets-personal/">truly free personal version</a>. “No credit card required. No justification required. No obligation required. No ads. No selling your personal information.”</p>

 <p>They treat their employees like people rather than cogs. Just look at their <a href="https://basecamp.com/handbook">publicly available employee handbook</a>. There simply aren’t many companies that make that much effort at supporting their people through their policies. They recognize the <a href="https://m.signalvnoise.com/only-15-of-the-basecamp-operations-budget-is-spent-on-ruby/">value of developer joy vs. purely the easier-to-measure cost of servers</a>. And they <a href="https://m.signalvnoise.com/why-hey-had-to-wait/">delay launches to look out for their people</a>.</p>

 <p>You can see how that respect extends to potential employees as well. Just look at their <a href="https://m.signalvnoise.com/basecamp-is-hiring-a-front-end-programmer/">latest job post</a>. Salaries are transparent and not tied to geography. They’re clear about expectations and timelines for the interview process. And they use an <a href="https://m.signalvnoise.com/hiring-programmers-with-a-take-home-test/">incredibly reasonable process for assessing skills remotely</a>. And the second paragraph in that job post clearly states their appreciation for diversity in their team. It’s not an equal opportunity statement tacked on at the end. It’s the very first thing they mention. No wonder they received over 1,300 applications for that role.</p>

 <p>They care about what the <a href="https://www.goodreads.com/quotes/445621-when-you-re-a-carpenter-making-a-beautiful-chest-of-drawers">“back of the cabinet”</a> is made from. Instead of jumping on web development trends, they focus on building in ways that <a href="https://twitter.com/sstephenson/status/1272608618941231107">embrace the architecture of the web</a> rather than try to route around it. They care about <a href="https://m.signalvnoise.com/paying-tribute-to-the-web-with-view-source/">delivering code that learners can read and understand</a>.</p>

 <p>They share what they learn, and they’ve <a href="https://basecamp.com/books">written multiple books</a> that expose and address all of the bad habits and myths that most companies accepted and embraced a long time ago. And that has helped steer the software industry (and likely other industries as well) in a much healthier direction.</p>

 <p>All of that is to say that when Basecamp says something, there’s little reason to doubt them or their sincerity. While most companies are busy cutting corners or focusing on growth for growth’s sake, they’re focused on doing right by their employees and customers.</p>

 <p>So when they launch a <a href="https://hey.com">new product</a> with a <a href="https://hey.com/the-hey-way/">clear manifesto</a>, you may not agree with their decisions, but you can be confident they’re genuine and will continue to be. You can also be confident they’ll make mistakes. But unlike most companies, you can also trust that they’ll admit their mistakes and do better.</p>

 <p>It’s kind of uncomfortable thinking about the degree to which I trust them, but in hindsight, it makes sense. They’ve earned and solidified my trust time and again, and they’ve done it when it was easier to take a different path.</p>

 <p>It’s just unfortunate that a company can so easily set itself apart simply by being honest and fair.</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 type="text/javascript">
    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>
--- a/cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.md
+++ b/cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.md
@@ -0,0 +1,39 @@
 title: Thoughts on Trust in Business
 url: https://garrettdimon.com/2020/thoughts-on-trust-in-business/
 hash_url: 70e5fefd4e7ab3f2bc03e917c4add8b0

 <p>The other day, I signed up for <a href="https://hey.com">Hey</a> without poking around or even thinking about it. I just put in my credit card and set up forwarding for my personal email.</p>

 <p>After the fact, I thought about how unusual that was and started thinking about what it takes for something like that to happen. It boils down to trust. I wholeheartedly trust Basecamp. I also happen to like their products, but that’s another topic.</p>

 <p>The fact that I trust them doesn’t mean that I believe they are perfect or that I fully agree with each and every decision they make. But over the almost 20 years that I’ve been following them, they’ve consistently been honest, fair, and caring. They have principles, and they stand by them. There’s alignment and transparency in everything they do.</p>

 <p>You may not agree with them or like their software, but you can’t deny that you always know where they stand and why. What’s disappointing is just how unique that is among businesses. So how does a company earn that kind of trust? Through repeated action.</p>

 <p>They’ve created and shared <a href="https://github.com/basecamp">numerous open source tools</a> and even <a href="https://github.com/basecamp/policies">released their various policies under an open source license</a>. They invest significantly in security and infrastructure and <a href="https://twitter.com/dhh/status/1260289063455621121">actively share those advances back into Rails</a>.</p>

 <p>They don’t hesitate to publicly call out problematic behavior by people or companies that deserve it <a href="https://m.signalvnoise.com/tagged/jeff-bezos/">even when that person is an investor in their business</a> or <a href="https://twitter.com/dhh/status/1272968382329942017">when it’s a company that carries significant power over their businesses and manfactures the hardware that most of their team relies on to do their jobs</a>.</p>

 <p>They <a href="https://m.signalvnoise.com/mailing-list-software-should-stop-spying-on-subscribers/">advocate against invasive tracking</a> and <a href="https://m.signalvnoise.com/the-last-tracker-was-just-removed-from-basecamp-com/">remove it from their own products</a> and <a href="https://m.signalvnoise.com/marking-the-end-of-pixel-trackers-in-basecamp-emails/">emails</a>. They <a href="https://m.signalvnoise.com/employee-surveillance-software-is-not-welcome-to-integrate-with-basecamp/">block employee-surveilance software from integrating with their products</a>.</p>

 <p>They care deeply about great customer support and <a href="https://basecamp.com/support">respond to support requests in about 24 minutes</a> and <a href="https://m.signalvnoise.com/until-the-end-of-the-internet/">commit to supporting their products until the end of the internet</a>. They focus on the <a href="https://github.com/basecamp/policies/blob/master/refund/index.md">fairness of their policies</a> rather than universal applicability or consistency.</p>

 <p>They <a href="https://m.signalvnoise.com/celebrating-3-million-accounts-fewer/">commit the time to clean up and treat people who likely aren’t even customers any longer with care and consideration in the process</a>. They’re <a href="https://m.signalvnoise.com/postmortem-on-the-read-only-outage-of-basecamp-on-november-9th-2018/">open and honest about their own mistakes</a>.</p>

 <p>They keep pricing simple and fair focusing on what it costs them to deliver the service with a reasonable profit rather than how much they can extract from an organization. They even offer a <a href="https://m.signalvnoise.com/launch-basecamp-gets-personal/">truly free personal version</a>. “No credit card required. No justification required. No obligation required. No ads. No selling your personal information.”</p>

 <p>They treat their employees like people rather than cogs. Just look at their <a href="https://basecamp.com/handbook">publicly available employee handbook</a>. There simply aren’t many companies that make that much effort at supporting their people through their policies. They recognize the <a href="https://m.signalvnoise.com/only-15-of-the-basecamp-operations-budget-is-spent-on-ruby/">value of developer joy vs. purely the easier-to-measure cost of servers</a>. And they <a href="https://m.signalvnoise.com/why-hey-had-to-wait/">delay launches to look out for their people</a>.</p>

 <p>You can see how that respect extends to potential employees as well. Just look at their <a href="https://m.signalvnoise.com/basecamp-is-hiring-a-front-end-programmer/">latest job post</a>. Salaries are transparent and not tied to geography. They’re clear about expectations and timelines for the interview process. And they use an <a href="https://m.signalvnoise.com/hiring-programmers-with-a-take-home-test/">incredibly reasonable process for assessing skills remotely</a>. And the second paragraph in that job post clearly states their appreciation for diversity in their team. It’s not an equal opportunity statement tacked on at the end. It’s the very first thing they mention. No wonder they received over 1,300 applications for that role.</p>

 <p>They care about what the <a href="https://www.goodreads.com/quotes/445621-when-you-re-a-carpenter-making-a-beautiful-chest-of-drawers">“back of the cabinet”</a> is made from. Instead of jumping on web development trends, they focus on building in ways that <a href="https://twitter.com/sstephenson/status/1272608618941231107">embrace the architecture of the web</a> rather than try to route around it. They care about <a href="https://m.signalvnoise.com/paying-tribute-to-the-web-with-view-source/">delivering code that learners can read and understand</a>.</p>

 <p>They share what they learn, and they’ve <a href="https://basecamp.com/books">written multiple books</a> that expose and address all of the bad habits and myths that most companies accepted and embraced a long time ago. And that has helped steer the software industry (and likely other industries as well) in a much healthier direction.</p>

 <p>All of that is to say that when Basecamp says something, there’s little reason to doubt them or their sincerity. While most companies are busy cutting corners or focusing on growth for growth’s sake, they’re focused on doing right by their employees and customers.</p>

 <p>So when they launch a <a href="https://hey.com">new product</a> with a <a href="https://hey.com/the-hey-way/">clear manifesto</a>, you may not agree with their decisions, but you can be confident they’re genuine and will continue to be. You can also be confident they’ll make mistakes. But unlike most companies, you can also trust that they’ll admit their mistakes and do better.</p>

 <p>It’s kind of uncomfortable thinking about the degree to which I trust them, but in hindsight, it makes sense. They’ve earned and solidified my trust time and again, and they’ve done it when it was easier to take a different path.</p>

 <p>It’s just unfortunate that a company can so easily set itself apart simply by being honest and fair.</p>
--- a/cache/2020/7a485d9382d6b3138c70cb2b9518fcb1/index.html
+++ b/cache/2020/7a485d9382d6b3138c70cb2b9518fcb1/index.html
--- a/cache/2020/7a485d9382d6b3138c70cb2b9518fcb1/index.md
+++ b/cache/2020/7a485d9382d6b3138c70cb2b9518fcb1/index.md
--- a/cache/2020/7c3883b39ab29809ccb63ad2a268d08d/index.html
+++ b/cache/2020/7c3883b39ab29809ccb63ad2a268d08d/index.html
@@ -0,0 +1,168 @@
 <!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>Free Speech Is Not the Same As Free Reach (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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.wired.com/story/free-speech-is-not-the-same-as-free-reach/">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>Free Speech Is Not the Same As Free Reach</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://www.wired.com/story/free-speech-is-not-the-same-as-free-reach/">Source originale du contenu</a></h2>
 <p><span class="lead-in-text-callout">The algorithms that</span> govern how we find information online are once again in the news—but you have to squint to find them. </p>

 <p>“Trump Accuses Google of Burying Conservative News in Search Results,” <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.nytimes.com/2018/08/28/business/media/google-trump-news-results.html?action=click&amp;module=Top%20Stories&amp;pgtype=Homepage&quot;}" href="https://www.nytimes.com/2018/08/28/business/media/google-trump-news-results.html?action=click&amp;module=Top%20Stories&amp;pgtype=Homepage" rel="nofollow noopener" target="_blank">reads</a> an August 28 <em>New York Times</em> headline. The piece features a bombastic president, a <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456273306243076&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456273306243076" rel="nofollow noopener" target="_blank">string</a> of bitter tweets, and accusations of censorship. “Algorithms” are mentioned, but not until the twelfth paragraph.</p>

 <p>Trump—like so many other politicians and pundits—has found search and social media companies to be convenient targets in the debate over free speech and censorship online. “They have it RIGGED, for me &amp; others, so that almost all stories &amp; news is BAD,” the president <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456273306243076&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456273306243076" rel="nofollow noopener" target="_blank">recently tweeted</a>. He <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456281120206848&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456281120206848" rel="nofollow noopener" target="_blank">added</a>: “They are controlling what we can &amp; cannot see. This is a very serious situation---will be addressed!”</p>

 <p>Trump is partly right: They are controlling what we can and cannot see. But “they” aren’t the executives leading Google, Facebook, and other technology companies. “They” are the opaque, influential algorithms that determine what content billions of internet users read, watch, and share next.</p>

 <p>These algorithms are invisible, but they have an outsized impact on shaping individuals’ experience online and society at large. Indeed, YouTube’s video-recommendation algorithm inspires <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.youtube.com/yt/about/press/&quot;}" href="https://www.youtube.com/yt/about/press/" rel="nofollow noopener" target="_blank">700,000,000 hours of watch time per day</a>—and can spread misinformation, disrupt elections, and incite violence. Algorithms like this need fixing.</p>

 <p data-attr-viewport-monitor="inline-recirc" class="inline-recirc-wrapper inline-recirc-observer-target-1 viewport-monitor-anchor"/><p>But in this moment, the conversation we should be having—how can we fix the algorithms?—is instead being co-opted and twisted by politicians and pundits howling about censorship and miscasting content moderation as the demise of free speech online. It would be good to remind them that free <em>speech</em> does not mean free <em>reach</em>. There is no right to algorithmic amplification. In fact, that’s the very problem that needs fixing.</p><p><span class="lead-in-text-callout">To see how</span> this algorithm amplification works, simply look to RT, or  <em>Russia Today</em>, a Russian state-owned propaganda outlet that’s also among the most popular YouTube presences. RT has amassed more than 6 billion views across 22 channels, more than MSNBC and Fox News combined. According to YouTube chief product officer Neal Mohan, <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://qz.com/1178125/youtubes-recommendations-drive-70-of-what-we-watch/&quot;}" href="https://qz.com/1178125/youtubes-recommendations-drive-70-of-what-we-watch/" rel="nofollow noopener" target="_blank">70 percent of views on YouTube are from recommendations</a>—so the site’s algorithms are largely responsible for amplifying RT’s propaganda hundreds of millions of times.</p><p>How? Most RT viewers don’t set out in search of Russian propaganda. The videos that rack up the views are <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.google.com/url?q=https://www.washingtonpost.com/news/monkey-cage/wp/2015/03/23/how-russia-today-is-using-youtube/?noredirect=on&amp;utm_term=.aec69b556318&amp;sa=D&amp;ust=1535660886144000&amp;usg=AFQjCNGUmnP8CZVChUCHXhHgbN0YKQsL6A&quot;}" href="https://www.google.com/url?q=https://www.washingtonpost.com/news/monkey-cage/wp/2015/03/23/how-russia-today-is-using-youtube/?noredirect=on&amp;utm_term=.aec69b556318&amp;sa=D&amp;ust=1535660886144000&amp;usg=AFQjCNGUmnP8CZVChUCHXhHgbN0YKQsL6A" rel="nofollow noopener" target="_blank">RT’s clickbait-y, gateway content</a>: videos of towering tsunamis, meteors striking buildings, shark attacks, amusement park accidents, some that are years old but have comments from within an hour ago. This disaster porn is highly engaging; the videos have been viewed tens of millions of times and are likely watched until the end. As a result, YouTube’s algorithm likely believes other RT content is worth suggesting to the viewers of that content—and so, quickly, an American YouTube user looking for news finds themselves watching Russia’s take on Hillary Clinton, immigration, and current events. These videos are served up in autoplay playlists alongside content from legitimate news organizations, giving RT itself increased legitimacy by association.</p>

 <p>The social internet is mediated by algorithms: recommendation engines, search, trending, autocomplete, and other mechanisms that predict what we want to see next. The algorithms don’t understand what is propaganda and what isn’t, or what is “fake news” and what is fact-checked. Their job is to surface relevant content (relevant to the user, of course), and they do it exceedingly well. So well, in fact, that the engineers who built these algorithms are sometimes baffled: “Even the creators don’t always understand why it recommends one video instead of another,” says Guillaume Chaslot, an ex-YouTube engineer who worked on the site’s algorithm.</p><p>These opaque algorithms with their singular purpose—“keep watching”—coupled with billions of users is a dangerous recipe. In recent years, we’ve seen how dire the consequences can be. Propaganda like RT content is circulated far and wide to disinform and worsen polarization, especially during democratic elections. YouTube’s algorithms can also radicalize by suggesting “white supremacist rants, Holocaust denials, and other disturbing content,” Zeynep Tufekci <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html&quot;}" href="https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html" rel="nofollow noopener" target="_blank">recently wrote</a> in the <em>Times.</em> “YouTube may be one of the most powerful radicalizing instruments of the 21st century.”</p>

 <p>The problem extends beyond YouTube, though. On Google search, dangerous anti-vaccine misinformation can <a href="https://www.wired.com/story/the-complexity-of-simply-searching-for-medical-advice/">commandeer</a> the top results. And on Facebook, hate speech can thrive and <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.theverge.com/2018/8/28/17789202/facebook-myanmar-ban-genocide-military-leadership&quot;}" href="https://www.theverge.com/2018/8/28/17789202/facebook-myanmar-ban-genocide-military-leadership" rel="nofollow noopener" target="_blank">fuel genocide</a>. A United Nations report about the genocide in Myanmar <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.ohchr.org/EN/HRBodies/HRC/MyanmarFFM/Pages/ReportoftheMyanmarFFM.aspx&quot;}" href="https://www.ohchr.org/EN/HRBodies/HRC/MyanmarFFM/Pages/ReportoftheMyanmarFFM.aspx" rel="nofollow noopener" target="_blank">reads</a>: “The role of social media is significant. Facebook has been a useful instrument for those seeking to spread hate, in a context where for most users Facebook is the Internet … The extent to which Facebook posts and  messages have led to real-world discrimination and violence must be independently and  thoroughly examined.”</p><p>So what can we do about it? The solution isn’t to outlaw algorithmic ranking or make noise about legislating what results Google can return. Algorithms are an invaluable tool for making sense of the immense universe of information online. There’s an overwhelming amount of content available to fill any given person’s feed or search query; sorting and ranking is a necessity, and there has never been evidence indicating that the results display systemic partisan bias. That said, unconscious bias is a concern in any algorithm; this is why tech companies have investigated conservative claims of bias since the <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.theguardian.com/technology/2016/may/24/facebook-changes-trending-topics-anti-conservative-bias&quot;}" href="https://www.theguardian.com/technology/2016/may/24/facebook-changes-trending-topics-anti-conservative-bias" rel="nofollow noopener" target="_blank">Facebook Trending News debacle</a> of 2016. There hasn’t been any credible evidence. But there is a trust problem, and a lack of understanding of how rankings and feeds work, and that allows bad-faith politicking to gain traction. The best solution to that is to increase transparency and internet literacy, enabling users to have a better understanding of why they see what they see—and to build these powerful curatorial systems <a href="https://www.wired.com/story/creating-ethical-recommendation-engines/">with a sense of responsibility</a> for what they return.</p><p>There have been positive steps in this direction. The examples of harms mentioned above have sparked congressional investigations aimed at understanding how tech platforms shape our conversations and our media consumption. In an upcoming Senate hearing next week, the Senate Intelligence Committee will ask Jack Dorsey of Twitter and Sheryl Sandberg of Facebook to provide an accounting of how, specifically, they are taking steps to address computational propaganda.</p>

 <p>It’s imperative that we focus on solutions, not politics. We need to build on those initial investigations. We need more nuanced conversations and education about algorithmic curation, its strange incentives, and its occasionally unfortunate outcomes. We need to hold tech companies accountable—for irresponsible tech, not evidence-free allegations of censorship—and demand transparency into how their algorithms and moderation policies work. By focusing on the real problem here, we can begin addressing the real issues that are disrupting the internet—and democracy.</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 type="text/javascript">
    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>
--- a/cache/2020/7c3883b39ab29809ccb63ad2a268d08d/index.md
+++ b/cache/2020/7c3883b39ab29809ccb63ad2a268d08d/index.md
@@ -0,0 +1,13 @@
 title: Free Speech Is Not the Same As Free Reach
 url: https://www.wired.com/story/free-speech-is-not-the-same-as-free-reach/
 hash_url: 7c3883b39ab29809ccb63ad2a268d08d

 <p><span class="lead-in-text-callout">The algorithms that</span> govern how we find information online are once again in the news—but you have to squint to find them. </p><p>“Trump Accuses Google of Burying Conservative News in Search Results,” <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.nytimes.com/2018/08/28/business/media/google-trump-news-results.html?action=click&amp;module=Top%20Stories&amp;pgtype=Homepage&quot;}" href="https://www.nytimes.com/2018/08/28/business/media/google-trump-news-results.html?action=click&amp;module=Top%20Stories&amp;pgtype=Homepage" rel="nofollow noopener" target="_blank">reads</a> an August 28 <em>New York Times</em> headline. The piece features a bombastic president, a <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456273306243076&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456273306243076" rel="nofollow noopener" target="_blank">string</a> of bitter tweets, and accusations of censorship. “Algorithms” are mentioned, but not until the twelfth paragraph.</p><p>Trump—like so many other politicians and pundits—has found search and social media companies to be convenient targets in the debate over free speech and censorship online. “They have it RIGGED, for me &amp; others, so that almost all stories &amp; news is BAD,” the president <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456273306243076&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456273306243076" rel="nofollow noopener" target="_blank">recently tweeted</a>. He <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://twitter.com/realDonaldTrump/status/1034456281120206848&quot;}" href="https://twitter.com/realDonaldTrump/status/1034456281120206848" rel="nofollow noopener" target="_blank">added</a>: “They are controlling what we can &amp; cannot see. This is a very serious situation---will be addressed!”</p>

 <p>Trump is partly right: They are controlling what we can and cannot see. But “they” aren’t the executives leading Google, Facebook, and other technology companies. “They” are the opaque, influential algorithms that determine what content billions of internet users read, watch, and share next.</p><p>These algorithms are invisible, but they have an outsized impact on shaping individuals’ experience online and society at large. Indeed, YouTube’s video-recommendation algorithm inspires <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.youtube.com/yt/about/press/&quot;}" href="https://www.youtube.com/yt/about/press/" rel="nofollow noopener" target="_blank">700,000,000 hours of watch time per day</a>—and can spread misinformation, disrupt elections, and incite violence. Algorithms like this need fixing.</p><p data-attr-viewport-monitor="inline-recirc" class="inline-recirc-wrapper inline-recirc-observer-target-1 viewport-monitor-anchor"/><p>But in this moment, the conversation we should be having—how can we fix the algorithms?—is instead being co-opted and twisted by politicians and pundits howling about censorship and miscasting content moderation as the demise of free speech online. It would be good to remind them that free <em>speech</em> does not mean free <em>reach</em>. There is no right to algorithmic amplification. In fact, that’s the very problem that needs fixing.</p><p><span class="lead-in-text-callout">To see how</span> this algorithm amplification works, simply look to RT, or  <em>Russia Today</em>, a Russian state-owned propaganda outlet that’s also among the most popular YouTube presences. RT has amassed more than 6 billion views across 22 channels, more than MSNBC and Fox News combined. According to YouTube chief product officer Neal Mohan, <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://qz.com/1178125/youtubes-recommendations-drive-70-of-what-we-watch/&quot;}" href="https://qz.com/1178125/youtubes-recommendations-drive-70-of-what-we-watch/" rel="nofollow noopener" target="_blank">70 percent of views on YouTube are from recommendations</a>—so the site’s algorithms are largely responsible for amplifying RT’s propaganda hundreds of millions of times.</p><p>How? Most RT viewers don’t set out in search of Russian propaganda. The videos that rack up the views are <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.google.com/url?q=https://www.washingtonpost.com/news/monkey-cage/wp/2015/03/23/how-russia-today-is-using-youtube/?noredirect=on&amp;utm_term=.aec69b556318&amp;sa=D&amp;ust=1535660886144000&amp;usg=AFQjCNGUmnP8CZVChUCHXhHgbN0YKQsL6A&quot;}" href="https://www.google.com/url?q=https://www.washingtonpost.com/news/monkey-cage/wp/2015/03/23/how-russia-today-is-using-youtube/?noredirect=on&amp;utm_term=.aec69b556318&amp;sa=D&amp;ust=1535660886144000&amp;usg=AFQjCNGUmnP8CZVChUCHXhHgbN0YKQsL6A" rel="nofollow noopener" target="_blank">RT’s clickbait-y, gateway content</a>: videos of towering tsunamis, meteors striking buildings, shark attacks, amusement park accidents, some that are years old but have comments from within an hour ago. This disaster porn is highly engaging; the videos have been viewed tens of millions of times and are likely watched until the end. As a result, YouTube’s algorithm likely believes other RT content is worth suggesting to the viewers of that content—and so, quickly, an American YouTube user looking for news finds themselves watching Russia’s take on Hillary Clinton, immigration, and current events. These videos are served up in autoplay playlists alongside content from legitimate news organizations, giving RT itself increased legitimacy by association.</p>

 <p>The social internet is mediated by algorithms: recommendation engines, search, trending, autocomplete, and other mechanisms that predict what we want to see next. The algorithms don’t understand what is propaganda and what isn’t, or what is “fake news” and what is fact-checked. Their job is to surface relevant content (relevant to the user, of course), and they do it exceedingly well. So well, in fact, that the engineers who built these algorithms are sometimes baffled: “Even the creators don’t always understand why it recommends one video instead of another,” says Guillaume Chaslot, an ex-YouTube engineer who worked on the site’s algorithm.</p><p>These opaque algorithms with their singular purpose—“keep watching”—coupled with billions of users is a dangerous recipe. In recent years, we’ve seen how dire the consequences can be. Propaganda like RT content is circulated far and wide to disinform and worsen polarization, especially during democratic elections. YouTube’s algorithms can also radicalize by suggesting “white supremacist rants, Holocaust denials, and other disturbing content,” Zeynep Tufekci <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html&quot;}" href="https://www.nytimes.com/2018/03/10/opinion/sunday/youtube-politics-radical.html" rel="nofollow noopener" target="_blank">recently wrote</a> in the <em>Times.</em> “YouTube may be one of the most powerful radicalizing instruments of the 21st century.”</p>

 <p>The problem extends beyond YouTube, though. On Google search, dangerous anti-vaccine misinformation can <a href="https://www.wired.com/story/the-complexity-of-simply-searching-for-medical-advice/">commandeer</a> the top results. And on Facebook, hate speech can thrive and <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.theverge.com/2018/8/28/17789202/facebook-myanmar-ban-genocide-military-leadership&quot;}" href="https://www.theverge.com/2018/8/28/17789202/facebook-myanmar-ban-genocide-military-leadership" rel="nofollow noopener" target="_blank">fuel genocide</a>. A United Nations report about the genocide in Myanmar <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.ohchr.org/EN/HRBodies/HRC/MyanmarFFM/Pages/ReportoftheMyanmarFFM.aspx&quot;}" href="https://www.ohchr.org/EN/HRBodies/HRC/MyanmarFFM/Pages/ReportoftheMyanmarFFM.aspx" rel="nofollow noopener" target="_blank">reads</a>: “The role of social media is significant. Facebook has been a useful instrument for those seeking to spread hate, in a context where for most users Facebook is the Internet … The extent to which Facebook posts and  messages have led to real-world discrimination and violence must be independently and  thoroughly examined.”</p><p>So what can we do about it? The solution isn’t to outlaw algorithmic ranking or make noise about legislating what results Google can return. Algorithms are an invaluable tool for making sense of the immense universe of information online. There’s an overwhelming amount of content available to fill any given person’s feed or search query; sorting and ranking is a necessity, and there has never been evidence indicating that the results display systemic partisan bias. That said, unconscious bias is a concern in any algorithm; this is why tech companies have investigated conservative claims of bias since the <a class="external-link" data-event-click="{&quot;element&quot;:&quot;ExternalLink&quot;,&quot;outgoingURL&quot;:&quot;https://www.theguardian.com/technology/2016/may/24/facebook-changes-trending-topics-anti-conservative-bias&quot;}" href="https://www.theguardian.com/technology/2016/may/24/facebook-changes-trending-topics-anti-conservative-bias" rel="nofollow noopener" target="_blank">Facebook Trending News debacle</a> of 2016. There hasn’t been any credible evidence. But there is a trust problem, and a lack of understanding of how rankings and feeds work, and that allows bad-faith politicking to gain traction. The best solution to that is to increase transparency and internet literacy, enabling users to have a better understanding of why they see what they see—and to build these powerful curatorial systems <a href="https://www.wired.com/story/creating-ethical-recommendation-engines/">with a sense of responsibility</a> for what they return.</p><p>There have been positive steps in this direction. The examples of harms mentioned above have sparked congressional investigations aimed at understanding how tech platforms shape our conversations and our media consumption. In an upcoming Senate hearing next week, the Senate Intelligence Committee will ask Jack Dorsey of Twitter and Sheryl Sandberg of Facebook to provide an accounting of how, specifically, they are taking steps to address computational propaganda.</p>

 <p>It’s imperative that we focus on solutions, not politics. We need to build on those initial investigations. We need more nuanced conversations and education about algorithmic curation, its strange incentives, and its occasionally unfortunate outcomes. We need to hold tech companies accountable—for irresponsible tech, not evidence-free allegations of censorship—and demand transparency into how their algorithms and moderation policies work. By focusing on the real problem here, we can begin addressing the real issues that are disrupting the internet—and democracy.</p>
--- a/cache/2020/cd68df2851bce7b4dc09a626bceffaa6/index.html
+++ b/cache/2020/cd68df2851bce7b4dc09a626bceffaa6/index.html
@@ -0,0 +1,212 @@
 <!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>A short introduction to building digital services in the Canadian government (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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://sboots.ca/2020/06/16/building-digital-services-in-the-canadian-government/">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>A short introduction to building digital services in the Canadian government</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://sboots.ca/2020/06/16/building-digital-services-in-the-canadian-government/">Source originale du contenu</a></h2>
 <p>Back in March, some friends from the Ottawa civic tech community reached out. The pandemic was <a href="/2020/03/25/look-out-for-one-another/">ramping up</a>, and they were interested in volunteering their developer skills to help government departments respond to the crisis. Building digital services and IT systems in a government environment is complicated. The federal government in particular has a lot of rules to navigate, and it’s easy for these to overwhelm people and (at the least) siphon their time away from designing and building user-friendly software.</p>

 <p>Here’s what I wrote, on a Sunday evening – none of this constitutes formal policy advice, but it was meant to give an introduction to which rules really do deserve a lot of attention, and potential landmines to avoid. (Note that some of the links below were added to this blog post after the fact, for extra context or further reading.)</p>

 <p>You’ll notice that this skips over some of the most important practical steps in designing, delivering, and iterating on good digital services – doing research with actual users, using <a href="https://digital.canada.ca/2018/06/27/tools-to-do-good-work/">modern software development tools</a> and best practices, deploying early and frequently, etc. This was written for an audience that’s used to building digital products in the private sector, to better understand what’s new and different in a government context. Enjoy!</p>

 <p><img src="/img/2020/parliament-feb-2020-cropped.jpg" class="img-fluid" alt="A photo from near Parliament Hill looking west at the Confederation Building and other buildings along Wellington, on a sunny February day."/></p>

 <h2 id="a-short-introduction">A short introduction</h2>

 <p>In case it’s useful, here’s a few suggestions on typical government implementation details – trying to focus here on the ones that really matter, not the seemingly-endless lists of rules that <a href="/2020/02/27/user-needs-not-government-needs/">ultimately don’t affect users</a>. These are the ones that government teams get accidentally crushed over when they screw them up (e.g. lawsuits or public shaming, etc.).</p>

 <p>From a tech standpoint, anything you build is <a href="/2020/05/26/why-are-there-so-few-senior-developers-in-government/">almost guaranteed</a> to be higher-quality than most existing GC systems and services. Use what you’re familiar with and what you trust. Most of these suggestions ultimately have to do with the front-end/public-facing aspect of services, not back-end engineering decisions (where the GC norm is, y’know, <a href="https://www.macleans.ca/politics/ottawa/pulling-off-a-bureaucratic-miracle-how-the-cerb-got-done/">40-year-old COBOL</a> or dicey ASP.NET applications).</p>

 <p><em>GC = Government of Canada; sorry in advance for any acronyms</em></p>

 <h2 id="official-languages">Official Languages</h2>

 <p>Anything that constitutes a Government of Canada service or communications product needs to be available in English and French, “<a href="https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=26164">simultaneously and of equal quality</a>”. Ideally your departmental partner would have translation capabilities on standby so you wouldn’t need to translate things yourself – but you definitely need to build EN/FR internationalization support into everything from the start. Speaking from experience it’s a pain to add in after the fact. Publicly launching a service only in English, then adding French later, would be a huge (political) catastrophe.</p>

 <p>Also count on at least one full business day for any translation request to come back, even ones that are marked super urgent. Write as much of your public-facing content as early as possible (e.g. in parallel to your software work) so that you can send it translation ASAP.</p>

 <h2 id="accessibility">Accessibility</h2>

 <p>Any Government of Canada service (and ones delivered and built by third parties) needs to meet <strong><a href="https://www.w3.org/TR/WCAG20/">WCAG 2.0 AA</a></strong> accessibility standards. This is mostly the basics e.g. keyboard navigable, has sufficient colour contrast, has good headings and image alt-text, etc.</p>

 <p>Not meeting WCAG 2.0 AA is a semi-frequent source of lawsuits that the Government of Canada always loses. Run your service through at least two or three different online testing tools that check for WCAG compliance and save a copy of the results somewhere, send them to your departmental partners for posterity, etc. Your departmental partner should be doing much more extensive, ongoing accessibility testing (the <a href="https://digital.canada.ca/a11y/">CDS accessibility handbook</a> can help).</p>

 <h2 id="federal-identity-program">Federal Identity Program</h2>

 <p>Certain government types are <em>very</em> particular about how the government’s logos and visuals are used. The very short answer is: put the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/sig-blk-en.svg">“Government of Canada / Gouvernement du Canada” signature</a> in the top left of the page, and the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/wmms-blk.svg">“Canada” wordmark</a> in the bottom right, and don’t be too outlandish with fonts and colours. (The formal <a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/federal-identity-program/manual.html">Federal Identity Program requirements</a> are from the 1990s and mostly apply to government letterhead, building signs, and vehicle decals – there’s a lot of interpretation and debate about how to apply them to websites, and it’s best to avoid those debates if you can.)</p>

 <p>On the French version of your website or service, the signature should use the <a href="https://raw.githubusercontent.com/cds-snc/node-starter-app/master/public/img/sig-blk-fr.svg">French-first “Gouvernement du Canada / Government of Canada” version</a>.</p>

 <p>CDS has <a href="https://github.com/cds-snc/node-starter-app">a “starter app” repository</a> that you can use for inspiration (and logo files) but don’t worry too much if you’re using a different front-end library, etc.</p>

 <h2 id="domain-names">Domain names</h2>

 <p>The government is pretty inconsistent here, but in a perfect world everything run by the GC would have domain names ending in <code>*.canada.ca</code> or <code>*.gc.ca</code>.</p>

 <p>When Global Affairs Canada sent out notifications to a bunch of international travellers last week [mid-March] and used bitly links, people freaked out because <a href="https://twitter.com/xdr/status/1240710656841486336">it looked like a scam</a>.</p>

 <p>There’s a <a href="https://alpha.canada.ca/en/instructions.html">DNS setup</a> that CDS operates at <code>alpha.canada.ca</code> and can spin up a subdomain off of it relatively quickly, if that’s useful (and if your departmental partner doesn’t already have some specific URL in mind). It can be pointed at whatever cloud provider you need and it’s faster than going through the gauntlet of SSC + TBS + ServiceCanada that normally has to approve GC subdomains. It’d be better than something that isn’t clearly GC-operated.</p>

 <h2 id="inclusive-design">Inclusive design</h2>

 <p>Practically speaking, this is probably the hardest area to figure out (but <a href="/2020/02/25/our-services-arent-working/#why-this-matters">incredibly important</a>). Think about situations like: people applying for a service on behalf of their elderly non-tech-savvy parents; band councils trying to apply on behalf of everyone on their First Nations reserve; people applying on behalf of hospitalized family members or friends.</p>

 <p>One notable mishap here last year was IRCC’s redesigned program to apply for family reunification visas; the team built a cloud service (for the first time) and it scaled really well to handle the giant surge of requests when the application period opened (compared to, well, IRCC’s normal, more fragile IT systems). But, the program was designed “first come, first serve” and as a result, <a href="https://www.cbc.ca/news/politics/ircc-parent-grandparent-sponsorship-filled-2019-1.4995806">inadvertently prioritized whoever could get through the complicated online application form fastest</a> (disadvantaging people with disabilities or accessibility requirements, people with slow bandwidth or computers, etc.).</p>

 <p>People acting on behalf of other people is the most complicated area (and a bunch of GC services don’t handle it well, although the CRA and ESDC do have some online services that include delegating to family members / power of attorney contacts or, say, tax professionals). Whatever you build might not need to handle these edge cases, but figuring out ahead of time which ones you can and which ones you can’t (and clearly documenting why, and making sure that your departmental partners know) is important.</p>

 <h2 id="shipping">Shipping</h2>

 <p>In government, the hardest part of any IT-related project is <a href="/2020/01/10/shipping/">literally getting it out the door</a>. Under normal circumstances there’s a whole gauntlet of approval processes (security, privacy, quality control, infrastructure) usually all done by separate groups or committees. For a brand new online service, getting through these processes could typically take 6-24 months. (This is one reason why people say that tech implementation is only a small part of digital government work – the rest is, either <a href="/2020/01/28/introducing-agile-to-large-organizations-is-a-subtractive-process-not-an-additive-one/">navigating through or getting rid of all these waterfall processes</a>).</p>

 <p>In an emergency situation like the COVID pandemic, the typical approval processes for something to get shipped (“go live” or “go into production”) could potentially be skipped – but in place of them, you would definitely need some kind of written confirmation from a senior public servant (e.g. assistant deputy minister or deputy minister) from the department in question. An email from them saying “I authorize the operation of this service” is sufficient.</p>

 <p><strong>There is a whole graveyard littered with amazing digital products in government that never made it out the door.</strong> I can think of probably a dozen examples. Don’t be one of them. World-class tech implementation won’t get you through this; you need the backing from a public servant at the highest leadership level possible to fight through any potential gatekeepers and to give the green light to go live. Having a close relationship between the product team and that senior public servant from as early on as possible helps (direct communications, regular progress updates). I’d say, this is the biggest risk to any project – that you build something phenomenal, and then your partner department gets cold feet and it never ships. This happens frequently.</p>

 <p><em>Thanks to <a href="https://twitter.com/rossferg">Ross Ferguson</a> for suggesting that I publish this as a blog post. If you’re a public servant working to navigate these rules in your department, <a href="https://twitter.com/sboots">don’t hesitate to reach out</a>! The rules here – and the long tail of other government requirements – can definitely be a challenge, and you’re not alone.</em></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 type="text/javascript">
    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>
--- a/cache/2020/cd68df2851bce7b4dc09a626bceffaa6/index.md
+++ b/cache/2020/cd68df2851bce7b4dc09a626bceffaa6/index.md
--- a/cache/2020/f8ef3c28cb75d299fc723d88fb8d0744/index.html
+++ b/cache/2020/f8ef3c28cb75d299fc723d88fb8d0744/index.html
@@ -0,0 +1,184 @@
 <!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>Des technocrates aux algocrates (archive) — David Larlet</title>
 <!-- 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 type="text/javascript">
    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.ledevoir.com/societe/le-devoir-de-philo-histoire/580735/des-technocrates-aux-algocrates">

 <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">

 <article>
 <h1>Des technocrates aux algocrates</h1>
 <nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  </p>
 </nav>
 <hr>
 <h2><a href="https://www.ledevoir.com/societe/le-devoir-de-philo-histoire/580735/des-technocrates-aux-algocrates">Source originale du contenu</a></h2>
 <p>Les crises sociales sont propices à l’invention d’idéologies fondées sur la croyance en une solution miracle aux maux qui nous frappent. Parmi ces solutions, on trouve des propositions fondées sur la rationalité, la science et la technologie. Des techniques et méthodes utiles sur le plan pratique pour répondre à des problèmes précis se radicalisent parfois jusqu’à devenir des idéologies prônant quelque panacée censée rendre le monde meilleur.</p>

 <p>Ainsi, pendant la Révolution française, des savants renommés en sont venus à vouloir « rationaliser » jusqu’au calendrier. Ils proposèrent le plus sérieusement du monde un système décimal jugé plus « rationnel » que le système sexagésimal (24 heures, 60 minutes, 12 mois) remontant aux Babyloniens. Chaque mois révolutionnaire comptait 30 jours et non plus 29, 30 ou 31, chacune des quatre saisons était renommée pour refléter les cycles de la nature : vendémiaire rappelant les vendanges, frimaire, les froids de l’hiver, germinal, la germination, etc. Comme c’est souvent le cas avec ce genre de fièvre révolutionnaire, l’idée n’a pas survécu et peu de gens se souviennent aujourd’hui de cette élucubration savante. Pourtant, à la toute fin du XIX<sup>e</sup> siècle, le mathématicien de génie Henri Poincaré participait encore à une commission du Bureau français des longitudes chargée de la décimalisation du temps, autre idée vite abandonnée.</p>

 <h2>Le monde rationnel</h2>
 <p><p>En 1919, le mot « technocratie » faisait son apparition dans le champ intellectuel américain. Comme son étymologie l’indique, l’idée qu’il nomme se veut une solution de remplacement à la démocratie, jugée dépassée par certains dans le contexte du nouveau monde industriel en expansion. Il fallait remplacer le pouvoir (du grec <i>kratos</i>) du peuple (<i>demos</i>) par celui du technicien (<i>techne</i>) et, en pratique, de l’ingénieur. La technocratie serait ainsi la nouvelle société rêvée dans laquelle les décisions politiques importantes seraient prises par des ingénieurs.</p></p>
 <p>L’idée reposait implicitement sur la fusion de la science, de la technologie et du politique, sphères pourtant considérées — encore de nos jours — comme relativement autonomes. Car si les sciences peuvent éclairer les choix sociaux, la complexité du monde et la multiplicité des voies possibles sous-déterminées par les connaissances scientifiques impliquent que les orientations de la société soient le fruit de débats et de décisions relevant du politique, donc de l’ensemble de la cité (<i>polis</i>).</p>

 <p>L’un des penseurs qui ont le plus influencé le mouvement technocratique de l’entre-deux-guerres est Thorstein Veblen (1857-1929), économiste, sociologue et critique social du capitalisme américain. Veblen considérait les hommes d’affaires et les financiers comme des êtres oisifs. Il pensait que ce sont plutôt les connaissances scientifiques et techniques qui sont la source véritable de la productivité industrielle.</p>

 <p>Veblen s’est donc fait le promoteur des ingénieurs, qui étaient, selon lui, au cœur du développement industriel. Ses réflexions sur ce thème s’affinèrent au contact d’ingénieurs membres de la Société américaine de génie mécanique (ASME), comme Morris L. Cooke et Henry L. Gantt — deux disciples de Frederick W. Taylor, fondateur du « management scientifique » (taylorisme) —, qui pensaient que la profession d’ingénieur n’était pas reconnue à sa juste valeur, alors qu’elle incarnait le savoir à la base du monde industriel moderne.</p>

 <p>Influencé par la récente révolution soviétique, Veblen proposa même en 1919 la création d’un « Soviet de techniciens ». Il réunit ses réflexions dans son dernier ouvrage paru en 1921 : <i>Les ingénieurs et le système des prix</i>. Il y affirme avec optimisme que, « si les experts de la production avaient les mains raisonnablement libres, ils augmenteraient facilement aujourd’hui le rendement ordinaire de l’industrie de 300 % à 1200 % ». Veblen combinait ainsi une vision élitiste de décideurs éclairés et un socialisme utopique. La révolution qu’il espérait verrait la société nouvelle dirigée par les ingénieurs, et non par ce qu’il considérait comme des financiers corrompus et autres investisseurs inactifs.</p>

 <h2>Les ingénieurs du social</h2>
 <p>Au moment où Veblen formule ses idées, l’économie américaine est en dépression, mais la reprise de 1922 perdure et donne l’impression aux économistes de l’époque de ne jamais devoir s’arrêter, ce qui relègue ses discours réformistes dans l’ombre. La Grande Dépression de 1929 ravive cependant l’intérêt pour des solutions radicales et le mouvement technocratique reprend vie, sans Veblen toutefois, qui décède le 3 août 1929. Les promoteurs initiaux se regroupent alors sous la bannière de la « technocratie » et reprennent le flambeau, leurs discours rendus plus visibles par des médias réceptifs aux propositions de solutions simples à une crise inouïe.</p>

 <p>Tout comme les savants de 1789 voulaient réformer le calendrier, certains ingénieurs des années 1930, critiques comme Veblen du système capitaliste des prix fondés sur la monnaie, voulaient redéfinir la mesure de la valeur des biens par des unités d’énergie, les « erg » remplaçant ainsi le dollar comme mesure objective de la valeur. En 1933, Walter Rautenstrauch, professeur de génie industriel à Columbia, très actif dans le mouvement technocratique, pensait même sérieusement que les ingénieurs pouvaient réorganiser la société de telle sorte qu’il n’y ait plus de lutte des classes.</p>

 <p>Probablement trop élitistes, ces discours radicaux retombèrent dans l’oubli après quelques années, éclipsés par le « New Deal » de Roosevelt. Mais cela n’empêcha pas les « ingénieurs du social » de continuer à avancer plusieurs utopies dans les décennies suivantes. Pensons à la cybernétique des années 1950, qui a engendré à son tour une utopique « société cybernétique ».</p>

 <p>Ce qui a changé depuis l’invention du terme « technocrate », c’est que ce ne sont plus les ingénieurs mécaniques, grands experts de la production industrielle classique, qui incarnent la nouvelle idéologie qui se veut le reflet du monde actuel, mais bien les informaticiens et autres ingénieurs du monde numérique, qui sont nombreux à croire que leurs technologies vont enfin résoudre les problèmes sociaux et économiques d’une société « branchée » et « connectée » grâce à Internet. Mais là où Veblen et ses épigones imaginaient un monde socialiste, une grande partie des nouveaux idéologues de la « révolution Internet » penche plutôt vers des idéologies individualistes, libertariennes et antiétatiques.</p>

 <p>Le rêve de faire disparaître les intermédiaires — dont l’État — entre des individus souverains s’incarne depuis environ une décennie dans de nombreux discours d’informaticiens et dans la sous-culture des « <i>hackers</i> ». Ce lien soi-disant direct entre individus s’incarne aussi dans la rhétorique de « l’économie du partage », qui donne l’illusion de « partager » alors qu’il s’agit plus prosaïquement de créer un intermédiaire supplémentaire entre le client et celui qui offre le service payant de manière à s’approprier une partie des bénéfices jusque-là réservés à l’entreprise qui rend effectivement le service.</p>

 <p>Autre incarnation du rêve numérique : l’idée que les téléphones cellulaires et les échanges sur Internet vont stimuler la démocratie directe et contourner les États autoritaires. C’était oublier un peu trop vite la force des méthodes de répression classiques et très matérielles qui ont permis d’écraser sans pitié le Printemps arabe et d’autres velléités de libération populaire. Enfin, pensons aux informaticiens libertariens créateurs du « darknet », qui permet d’échapper aux lois et règles des différents États au nom de la liberté individuelle. Ils font aujourd’hui surtout la joie des diverses mafias, des narcotrafiquants et des marchés sexuels délinquants. Le tout est complété par une autre « innovation », le très énergivore bitcoin, une cryptomonnaie très utile au blanchiment d’argent et aux spéculateurs.</p>

 <h2>L’émergence des algocrates</h2>
 <p>La crise sanitaire actuelle n’a pas manqué, elle non plus, de faire apparaître des solutions technojovialistes et une autre idéologie techniciste. Il était en effet prévisible qu’émergeraient dans un tel contexte des agents faisant la promotion de solutions techniques pour résoudre des problèmes sociaux. Les solutions proposées étant à peu près toutes fondées sur la production d’algorithmes soi-disant « intelligents »,il paraît logique de nommer la nouvelle idéologie « algocratie » et ses promoteurs les « algocrates ».</p>

 <p>Là où les technocrates remettaient volontiers le pouvoir aux ingénieurs, donc à des personnes considérées comme détenant un savoir supérieur aux citoyens, politiciens y compris, les algocrates semblent considérer que le pouvoir peut être délégué aux objets techniques eux-mêmes, les algorithmes prenant les décisions à la place des citoyens et des élus. Ces algorithmes, bien qu’échappant au contrôle des individus, auraient néanmoins, dit-on, la faculté de créer de nouvelles solidarités sociales, comme si les citoyens n’avaient pas la capacité d’agir pour générer eux-mêmes des liens sociaux. Il est à prévoir que l’« Internet des objets », dont on ne cesse de clamer les bienfaits, soit surtout un « Internet des gadgets », aussi utile que le démarreur à distance des autos du siècle dernier… mais autrement plus cher.</p>

 <p>Il est bien sûr trop tôt pour que l’historien puisse savoir si l’algocratie et ses algocrates remplacerontla « vieille » et toujours imparfaite démocratie et ses délibérations souvent chaotiques entre élus et citoyens. Mais à la lumière des avatars passés des idéologies technicistes récurrentes, on peut espérer qu’une saine vigilance permettra de s’en tenir à l’opinion de Churchill qui disait que la démocratie est le pire des systèmes, à l’exception de tous les autres. Y compris les diverses « craties » sans « <i>demos</i> » censées, dans l’esprit de certains, dissoudre le politique dans le technique pour enfin voir naître le « meilleur des mondes possibles » que Leibniz croyait pourtant avoir été créé par Dieu lui-même.</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 type="text/javascript">
    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>
--- a/cache/2020/f8ef3c28cb75d299fc723d88fb8d0744/index.md
+++ b/cache/2020/f8ef3c28cb75d299fc723d88fb8d0744/index.md
@@ -0,0 +1,54 @@
 title: Des technocrates aux algocrates
 url: https://www.ledevoir.com/societe/le-devoir-de-philo-histoire/580735/des-technocrates-aux-algocrates
 hash_url: f8ef3c28cb75d299fc723d88fb8d0744

 <p>Les crises sociales sont propices à l’invention d’idéologies fondées sur la croyance en une solution miracle aux maux qui nous frappent. Parmi ces solutions, on trouve des propositions fondées sur la rationalité, la science et la technologie. Des techniques et méthodes utiles sur le plan pratique pour répondre à des problèmes précis se radicalisent parfois jusqu’à devenir des idéologies prônant quelque panacée censée rendre le monde meilleur.</p>


 <p>Ainsi, pendant la Révolution française, des savants renommés en sont venus à vouloir « rationaliser » jusqu’au calendrier. Ils proposèrent le plus sérieusement du monde un système décimal jugé plus « rationnel » que le système sexagésimal (24 heures, 60 minutes, 12 mois) remontant aux Babyloniens. Chaque mois révolutionnaire comptait 30 jours et non plus 29, 30 ou 31, chacune des quatre saisons était renommée pour refléter les cycles de la nature : vendémiaire rappelant les vendanges, frimaire, les froids de l’hiver, germinal, la germination, etc. Comme c’est souvent le cas avec ce genre de fièvre révolutionnaire, l’idée n’a pas survécu et peu de gens se souviennent aujourd’hui de cette élucubration savante. Pourtant, à la toute fin du XIX<sup>e</sup> siècle, le mathématicien de génie Henri Poincaré participait encore à une commission du Bureau français des longitudes chargée de la décimalisation du temps, autre idée vite abandonnée.</p>

 ## Le monde rationnel
 <p>En 1919, le mot « technocratie » faisait son apparition dans le champ intellectuel américain. Comme son étymologie l’indique, l’idée qu’il nomme se veut une solution de remplacement à la démocratie, jugée dépassée par certains dans le contexte du nouveau monde industriel en expansion. Il fallait remplacer le pouvoir (du grec <i>kratos</i>) du peuple (<i>demos</i>) par celui du technicien (<i>techne</i>) et, en pratique, de l’ingénieur. La technocratie serait ainsi la nouvelle société rêvée dans laquelle les décisions politiques importantes seraient prises par des ingénieurs.</p>


 <p>L’idée reposait implicitement sur la fusion de la science, de la technologie et du politique, sphères pourtant considérées — encore de nos jours — comme relativement autonomes. Car si les sciences peuvent éclairer les choix sociaux, la complexité du monde et la multiplicité des voies possibles sous-déterminées par les connaissances scientifiques impliquent que les orientations de la société soient le fruit de débats et de décisions relevant du politique, donc de l’ensemble de la cité (<i>polis</i>).</p>


 <p>L’un des penseurs qui ont le plus influencé le mouvement technocratique de l’entre-deux-guerres est Thorstein Veblen (1857-1929), économiste, sociologue et critique social du capitalisme américain. Veblen considérait les hommes d’affaires et les financiers comme des êtres oisifs. Il pensait que ce sont plutôt les connaissances scientifiques et techniques qui sont la source véritable de la productivité industrielle.</p>


 <p>Veblen s’est donc fait le promoteur des ingénieurs, qui étaient, selon lui, au cœur du développement industriel. Ses réflexions sur ce thème s’affinèrent au contact d’ingénieurs membres de la Société américaine de génie mécanique (ASME), comme Morris L. Cooke et Henry L. Gantt — deux disciples de Frederick W. Taylor, fondateur du « management scientifique » (taylorisme) —, qui pensaient que la profession d’ingénieur n’était pas reconnue à sa juste valeur, alors qu’elle incarnait le savoir à la base du monde industriel moderne.</p>


 <p>Influencé par la récente révolution soviétique, Veblen proposa même en 1919 la création d’un « Soviet de techniciens ». Il réunit ses réflexions dans son dernier ouvrage paru en 1921 : <i>Les ingénieurs et le système des prix</i>. Il y affirme avec optimisme que, « si les experts de la production avaient les mains raisonnablement libres, ils augmenteraient facilement aujourd’hui le rendement ordinaire de l’industrie de 300 % à 1200 % ». Veblen combinait ainsi une vision élitiste de décideurs éclairés et un socialisme utopique. La révolution qu’il espérait verrait la société nouvelle dirigée par les ingénieurs, et non par ce qu’il considérait comme des financiers corrompus et autres investisseurs inactifs.</p>


 ## Les ingénieurs du social

 <p>Au moment où Veblen formule ses idées, l’économie américaine est en dépression, mais la reprise de 1922 perdure et donne l’impression aux économistes de l’époque de ne jamais devoir s’arrêter, ce qui relègue ses discours réformistes dans l’ombre. La Grande Dépression de 1929 ravive cependant l’intérêt pour des solutions radicales et le mouvement technocratique reprend vie, sans Veblen toutefois, qui décède le 3 août 1929. Les promoteurs initiaux se regroupent alors sous la bannière de la « technocratie » et reprennent le flambeau, leurs discours rendus plus visibles par des médias réceptifs aux propositions de solutions simples à une crise inouïe.</p>


 <p>Tout comme les savants de 1789 voulaient réformer le calendrier, certains ingénieurs des années 1930, critiques comme Veblen du système capitaliste des prix fondés sur la monnaie, voulaient redéfinir la mesure de la valeur des biens par des unités d’énergie, les « erg » remplaçant ainsi le dollar comme mesure objective de la valeur. En 1933, Walter Rautenstrauch, professeur de génie industriel à Columbia, très actif dans le mouvement technocratique, pensait même sérieusement que les ingénieurs pouvaient réorganiser la société de telle sorte qu’il n’y ait plus de lutte des classes.</p>


 <p>Probablement trop élitistes, ces discours radicaux retombèrent dans l’oubli après quelques années, éclipsés par le « New Deal » de Roosevelt. Mais cela n’empêcha pas les « ingénieurs du social » de continuer à avancer plusieurs utopies dans les décennies suivantes. Pensons à la cybernétique des années 1950, qui a engendré à son tour une utopique « société cybernétique ».</p>


 <p>Ce qui a changé depuis l’invention du terme « technocrate », c’est que ce ne sont plus les ingénieurs mécaniques, grands experts de la production industrielle classique, qui incarnent la nouvelle idéologie qui se veut le reflet du monde actuel, mais bien les informaticiens et autres ingénieurs du monde numérique, qui sont nombreux à croire que leurs technologies vont enfin résoudre les problèmes sociaux et économiques d’une société « branchée » et « connectée » grâce à Internet. Mais là où Veblen et ses épigones imaginaient un monde socialiste, une grande partie des nouveaux idéologues de la « révolution Internet » penche plutôt vers des idéologies individualistes, libertariennes et antiétatiques.</p>


 <p>Le rêve de faire disparaître les intermédiaires — dont l’État — entre des individus souverains s’incarne depuis environ une décennie dans de nombreux discours d’informaticiens et dans la sous-culture des « <i>hackers</i> ». Ce lien soi-disant direct entre individus s’incarne aussi dans la rhétorique de « l’économie du partage », qui donne l’illusion de « partager » alors qu’il s’agit plus prosaïquement de créer un intermédiaire supplémentaire entre le client et celui qui offre le service payant de manière à s’approprier une partie des bénéfices jusque-là réservés à l’entreprise qui rend effectivement le service.</p>


 <p>Autre incarnation du rêve numérique : l’idée que les téléphones cellulaires et les échanges sur Internet vont stimuler la démocratie directe et contourner les États autoritaires. C’était oublier un peu trop vite la force des méthodes de répression classiques et très matérielles qui ont permis d’écraser sans pitié le Printemps arabe et d’autres velléités de libération populaire. Enfin, pensons aux informaticiens libertariens créateurs du « darknet », qui permet d’échapper aux lois et règles des différents États au nom de la liberté individuelle. Ils font aujourd’hui surtout la joie des diverses mafias, des narcotrafiquants et des marchés sexuels délinquants. Le tout est complété par une autre « innovation », le très énergivore bitcoin, une cryptomonnaie très utile au blanchiment d’argent et aux spéculateurs.</p>


 ## L’émergence des algocrates

 <p>La crise sanitaire actuelle n’a pas manqué, elle non plus, de faire apparaître des solutions technojovialistes et une autre idéologie techniciste. Il était en effet prévisible qu’émergeraient dans un tel contexte des agents faisant la promotion de solutions techniques pour résoudre des problèmes sociaux. Les solutions proposées étant à peu près toutes fondées sur la production d’algorithmes soi-disant « intelligents »,il paraît logique de nommer la nouvelle idéologie « algocratie » et ses promoteurs les « algocrates ».</p>


 <p>Là où les technocrates remettaient volontiers le pouvoir aux ingénieurs, donc à des personnes considérées comme détenant un savoir supérieur aux citoyens, politiciens y compris, les algocrates semblent considérer que le pouvoir peut être délégué aux objets techniques eux-mêmes, les algorithmes prenant les décisions à la place des citoyens et des élus. Ces algorithmes, bien qu’échappant au contrôle des individus, auraient néanmoins, dit-on, la faculté de créer de nouvelles solidarités sociales, comme si les citoyens n’avaient pas la capacité d’agir pour générer eux-mêmes des liens sociaux. Il est à prévoir que l’« Internet des objets », dont on ne cesse de clamer les bienfaits, soit surtout un « Internet des gadgets », aussi utile que le démarreur à distance des autos du siècle dernier… mais autrement plus cher.</p>


 <p>Il est bien sûr trop tôt pour que l’historien puisse savoir si l’algocratie et ses algocrates remplacerontla « vieille » et toujours imparfaite démocratie et ses délibérations souvent chaotiques entre élus et citoyens. Mais à la lumière des avatars passés des idéologies technicistes récurrentes, on peut espérer qu’une saine vigilance permettra de s’en tenir à l’opinion de Churchill qui disait que la démocratie est le pire des systèmes, à l’exception de tous les autres. Y compris les diverses « craties » sans « <i>demos</i> » censées, dans l’esprit de certains, dissoudre le politique dans le technique pour enfin voir naître le « meilleur des mondes possibles » que Leibniz croyait pourtant avoir été créé par Dieu lui-même.</p>
--- a/cache/2020/index.html
+++ b/cache/2020/index.html
@@ -96,6 +96,8 @@
      
        <li><a href="/david/cache/2020/fb2849b42586654e0c899bf1a31fa5a5/" title="Accès à l'article caché">Sparrow’s Guide To Meditation</a> (<a href="https://www.thesunmagazine.org/issues/529/sparrows-guide-to-meditation" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/7a485d9382d6b3138c70cb2b9518fcb1/" title="Accès à l'article caché">Color Theme Switcher</a> (<a href="https://mxb.dev/blog/color-theme-switcher/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/2390380d879c04ee56baf320b6f7e681/" title="Accès à l'article caché">Twelve Million Phones, One Dataset, Zero Privacy</a> (<a href="https://www.nytimes.com/interactive/2019/12/19/opinion/location-tracking-cell-phone.html" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/3146f1a5743de3217adc3bc854897aaf/" title="Accès à l'article caché">Google: Oops, we may have sent your private Google Photos videos to strangers</a> (<a href="https://mashable.com/article/google-photos-videos-glitch/" title="Accès à l'article original">original</a>)</li>
@@ -106,6 +108,8 @@
      
        <li><a href="/david/cache/2020/7f74e315811927454830814bcb659896/" title="Accès à l'article caché">Minimum</a> (<a href="https://journal.loupbrun.ca/n/021/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/" title="Accès à l'article caché">Time to upgrade your monitor</a> (<a href="https://tonsky.me/blog/monitors/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/395e363cffff4e9c6b33633bc726f1e2/" title="Accès à l'article caché">Trump’s Executive Order Isn’t About Twitter</a> (<a href="https://www.theatlantic.com/technology/archive/2020/05/trumps-executive-order-isnt-about-twitter/612349/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/4218c8b3332d61d6702bb2bd73ea9944/" title="Accès à l'article caché">Setting Up Git Identities</a> (<a href="https://www.micah.soy/posts/setting-up-git-identities/" title="Accès à l'article original">original</a>)</li>
@@ -168,6 +172,8 @@
      
        <li><a href="/david/cache/2020/b4edfe74a826089b329de71ea9c9b8c1/" title="Accès à l'article caché">Mark Alizart : « Le climato-scepticisme doit se comprendre comme un fait politique, non comme une opinion » (Coup d’état climatique)</a> (<a href="https://diacritik.com/2020/04/01/mark-alizart-le-climato-scepticisme-doit-se-comprendre-comme-un-fait-politique-non-comme-une-opinion-coup-detat-climatique/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/7c3883b39ab29809ccb63ad2a268d08d/" title="Accès à l'article caché">Free Speech Is Not the Same As Free Reach</a> (<a href="https://www.wired.com/story/free-speech-is-not-the-same-as-free-reach/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/25289703cb4dd3023c087715cddf6d55/" title="Accès à l'article caché">What’s up with me?</a> (<a href="https://helloanselm.com/writings/whats-up-with-me" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/c1c53ee2ef8544ad798629bf8a3b7249/" title="Accès à l'article caché">Thinking about Climate on a Dark, Dismal Morning</a> (<a href="https://blogs.scientificamerican.com/hot-planet/thinking-about-climate-on-a-dark-dismal-morning/" title="Accès à l'article original">original</a>)</li>
@@ -184,6 +190,8 @@
      
        <li><a href="/david/cache/2020/47f2c0c2984a00e8a6041232f4e87e1f/" title="Accès à l'article caché">L’humain du futur</a> (<a href="https://www.hypothermia.fr/2020/01/lhumain-du-futur/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/2e490bfc24d27865bf42f49ea2c79c12/" title="Accès à l'article caché">The Return of the 90s Web</a> (<a href="https://mxb.dev/blog/the-return-of-the-90s-web/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/b33f1c0179a41a26c9c75499fdc970d8/" title="Accès à l'article caché">Garder une trace de ses lectures</a> (<a href="https://bribesdereel.net/traces-de-lectures" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/ef5d670c8473add5c3e43f8d4db2eed0/" title="Accès à l'article caché">Integrated systems for integrated programmers</a> (<a href="https://m.signalvnoise.com/integrated-systems-for-integrated-programmers/" title="Accès à l'article original">original</a>)</li>
@@ -212,6 +220,8 @@
      
        <li><a href="/david/cache/2020/032142ee0df638618a8b145cb7ea9ebc/" title="Accès à l'article caché">Datasette: A Developer, a Shower and a Data-Inspired Moment</a> (<a href="https://thenewstack.io/datasette-a-developer-a-shower-and-a-data-inspired-moment/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/cd68df2851bce7b4dc09a626bceffaa6/" title="Accès à l'article caché">A short introduction to building digital services in the Canadian government</a> (<a href="https://sboots.ca/2020/06/16/building-digital-services-in-the-canadian-government/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/73dc1ad4719144f3768002aa5cef60ef/" title="Accès à l'article caché">Indefinite leave to remain</a> (<a href="https://colly.com/articles/indefinite-leave-to-remain" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/ebaa216561b046ae17b29b399305b294/" title="Accès à l'article caché">Second-guessing the modern web</a> (<a href="https://macwright.org/2020/05/10/spa-fatigue.html" title="Accès à l'article original">original</a>)</li>
@@ -266,6 +276,8 @@
      
        <li><a href="/david/cache/2020/fc97310297178a549eab5c5f9e8a334f/" title="Accès à l'article caché">Why 543 KB keep me up at night</a> (<a href="https://www.matuzo.at/blog/why-543kb-keep-me-up-at-night/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/" title="Accès à l'article caché">Thoughts on Trust in Business</a> (<a href="https://garrettdimon.com/2020/thoughts-on-trust-in-business/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/1d190443e06aa99b44dd2a4d55b1b58e/" title="Accès à l'article caché">The Secretive Company That Might End Privacy as We Know It</a> (<a href="https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/e0ed8bab5c145d37065c607deace5bff/" title="Accès à l'article caché">Deno is a Browser for Code</a> (<a href="https://kitsonkelly.com/posts/deno-is-a-browser-for-code/" title="Accès à l'article original">original</a>)</li>
@@ -288,6 +300,8 @@
      
        <li><a href="/david/cache/2020/ac3266635585d387973da1c64b546990/" title="Accès à l'article caché">Ligue du LOL : un an après</a> (<a href="https://medium.com/@vincentglad_67276/ligue-du-lol-un-an-apr%C3%A8s-aeee7784cf4d" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/2a35ead18f2e4d22a091367acbab1e85/" title="Accès à l'article caché">Quotebacks and hypertexts</a> (<a href="http://interconnected.org/home/2020/06/16/quotebacks" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/195a2ecd81fa25a7cf43248b809bf724/" title="Accès à l'article caché">Honesty is the best policy</a> (<a href="https://hankchizljaw.com/wrote/honesty-is-the-best-policy/" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/a38442a0e3e291d654793c384e17e737/" title="Accès à l'article caché">Le virus n’est pas une vengeance</a> (<a href="https://perspectives-printanieres.info/index.php/2020/03/30/le-virus-nest-pas-une-vengeance/" title="Accès à l'article original">original</a>)</li>
@@ -300,6 +314,8 @@
      
        <li><a href="/david/cache/2020/a9155966aed8a47ec727d156bf8b5458/" title="Accès à l'article caché">Transmission de COVID-19 par aérosol, les implications pour la santé publique</a> (<a href="https://www.lejournaldumedecin.com/actualite/transmission-de-covid-19-par-aerosol-les-implications-pour-la-sante-publique/article-opinion-47087.html" title="Accès à l'article original">original</a>)</li>
      
        <li><a href="/david/cache/2020/f8ef3c28cb75d299fc723d88fb8d0744/" title="Accès à l'article caché">Des technocrates aux algocrates</a> (<a href="https://www.ledevoir.com/societe/le-devoir-de-philo-histoire/580735/des-technocrates-aux-algocrates" title="Accès à l'article original">original</a>)</li>
      
    </ul>
  </article>