Browse Source

Moar links

master
David Larlet 6 months ago
parent
commit
6e7417126a

+ 238
- 0
cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.html View File

@@ -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>

+ 79
- 0
cache/2020/2a35ead18f2e4d22a091367acbab1e85/index.md View File

@@ -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>

+ 206
- 0
cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.html View File

@@ -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>

+ 10
- 0
cache/2020/2e490bfc24d27865bf42f49ea2c79c12/index.md View File

@@ -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>

+ 687
- 0
cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.html View File

@@ -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>

+ 540
- 0
cache/2020/4f1f531d8e88bfb6908b00fbf60d16e6/index.md View File

@@ -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>

+ 186
- 0
cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.html View File

@@ -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>

+ 39
- 0
cache/2020/70e5fefd4e7ab3f2bc03e917c4add8b0/index.md View File

@@ -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>