davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

More links

master
David Larlet 1 year ago
parent
13860f5be4
commit
721b7de7fe
15 changed files with 1994 additions and 0 deletions
Split View Show Diff Stats
  1. 196
    0
      cache/2022/0888271d03779999af533b991a8b76eb/index.html
  2. 15
    0
      cache/2022/0888271d03779999af533b991a8b76eb/index.md
  3. 259
    0
      cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/index.html
  4. 92
    0
      cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/index.md
  5. 192
    0
      cache/2022/32cf150b3b75b308683c4246b54cdcf9/index.html
  6. 52
    0
      cache/2022/32cf150b3b75b308683c4246b54cdcf9/index.md
  7. 242
    0
      cache/2022/3e7688b2d34d13bf51290fc906d77b3d/index.html
  8. 75
    0
      cache/2022/3e7688b2d34d13bf51290fc906d77b3d/index.md
  9. 236
    0
      cache/2022/450dce1f614eba220a97b035cea5dfe5/index.html
  10. 81
    0
      cache/2022/450dce1f614eba220a97b035cea5dfe5/index.md
  11. 200
    0
      cache/2022/8981770b1b5be8044fd201739e67c60d/index.html
  12. 33
    0
      cache/2022/8981770b1b5be8044fd201739e67c60d/index.md
  13. 237
    0
      cache/2022/ab2739b2622b6a977d73ca7871c64a01/index.html
  14. 70
    0
      cache/2022/ab2739b2622b6a977d73ca7871c64a01/index.md
  15. 14
    0
      cache/2022/index.html

+ 196
- 0
cache/2022/0888271d03779999af533b991a8b76eb/index.html View File

@@ -0,0 +1,196 @@
<!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` element
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>It’s Very Unlikely Anyone Will Read This in 200 Years (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://www.gawker.com/culture/nobody-will-read-this-essay-in-200-years">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>It’s Very Unlikely Anyone Will Read This in 200 Years</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://www.gawker.com/culture/nobody-will-read-this-essay-in-200-years" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>Recently, Yale philosophy professor Jason Stanley attracted a lot of derision for tweeting: “People are like, ‘he regards himself as self-important.’ No fucking shit. I would regard myself as an abject failure if people are still not reading my philosophical work in 200 years. I have zero intention of being just another Ivy League professor whose work lasts as long as they are alive.” Stanley deleted the tweets, but, unfortunately for him, they live on.</p>
<p>People found his pronouncements very funny because they were indeed self-important, but inevitably, a meta-discourse developed: what was so wrong about this ambition, after all? Shouldn’t we want to create something that will last hundreds if not thousands of years? Don’t we all want to live forever?</p>
<p>It’s natural to find the thought that what we build in our life will die with us disturbing. (Though forms of its lasting can also be distressing; in his poem “Posterity,” Philip Larkin imagines being summed up by an irritated, unenthusiastic future biographer with “Oh, you know the thing / That crummy textbook stuff from Freshman Psych.”) No one wants to die. To ourselves, we matter, and we want what we do to matter to somebody else. We want our sacrifices to be worth it in a transcendent sense, our pain to have a purpose, our achievements to be permanent. A handful of life paths — intellectual and artistic work in particular — are about trying to create, as Horace wrote, “a monument more lasting than bronze.” They are a calculated gamble that a life dedicated to the difficult and narrow path will continue after our death, however unrewarding it might have been to experience.</p>
<p>But that we even have Horace’s poetry to read is as much a caprice of fate as a function of his poetic virtue. Some manuscripts survive the collapse of civilization, others do not; it seems unlikely that these survivals and disappearances precisely track merit. We have Horace and we are missing most of Sappho. We have Horace and we are missing wide swathes of Aeschylus. We have Horace but we do not have the complete works of Aristotle. Why some texts survive and not others can be a matter of historical record, but it is not necessarily a measure of their virtue. Survival is ultimately a matter of greatness, yes, but just as much, it’s about luck.</p>
<p>At some point in life, we come to realize that we exist in a context. If you are a scientist, you might make a small but useful contribution in your subfield, a subfield that is impossible to explain to anybody else. If you write short stories for literary magazines and exist in that ecosystem, you may not really exist to people outside of it. And — for most of us — our lives form part of the circumference of that context. We live a little while and then we go into the ground. Our children, if we have them, remember us, their children remember us a little less, their children even less, and so on until we are part of a school genealogy project.</p>
<p>Stanley strikes me as a man who thinks he has exhausted his own context. (Whether he has or not is not something I could know.) From academic work he’s splashed out to popular writing, which has its own rewards and its own disappointments. Something strange but true is that for all their similarities, the worlds of academic and public writing mostly have contempt for each other. Trying to win at both games is quite possible, but it means, also, feeling judged.</p>
<p>This is not supposed to be armchair psychoanalysis: I just mean that Stanley’s ambition has nowhere to go. If you want to be Kant or Wittgenstein, no amount of willing can get you there. You need something else. What makes the wish not to be “just another Ivy League professor” a tragicomical statement is that institutions like the Ivies are not meant to make or house Kants or Wittgensteins, let alone Platos, anymore than the Iowa Writers’ Workshop aims to make Tolstoys. They are meant to make survivors — of the careerist type. You can climb all the way to the top of your profession only to find you’re simply standing around and that this was all you were ever trained to do. Some people will be great anyway. But the system is not meant for them.</p>

<h2 data-md-text-align="center">***</h2>

<p>I’ve always liked the idea that people who create great art do so under a kind of inspiration. In practical terms they have nothing to say: they created an independent existence that now speaks for itself. Such a belief is entirely compatible with the idea that to be a vessel of greatness requires training and work, and also compatible with artists being idiots. But I think there’s something to this, even when the work is intellectual, not artistic: that when things are really working, you do not feel that you are doing them. Something is working itself out through you and coming to be through you. Your job is not to get in the way.</p>
<p>I suppose another way of putting this position is that excellence requires a mix of arrogance and humility; arrogance as to your capabilities, humility toward the work. Arrogance says that you can and will accomplish your desires; humility understands that a greatness that transcends excellence, let alone survives, is not actually in your hands. You have to submit: to the truth, to the real, toward the bends and knots of what is coming to be through you. This is hardly less grandiose and mockable than Stanley’s original statement — I just think that it’s more true. I want something that is real to come to be through me.</p>
<p>It is also true that while the best writing I’ve done corresponds to this description, I do not think any of the type of writing I do is likely to last longer than my lifespan, if even that long. Non-fiction writing, in its popular and scholarly varieties, is largely parasitic on the real thing — the real thing being art. Art wrestles with problems of obscurity and immortality; art testifies to the transcendent horizon. Little essays, no matter how clever, fade as soon as they are born; big books, even before. It’s no mistake I’ve referenced two poems already, or considered framing this entire piece through a novel like George Eliot’s <em>Middlemarch</em>, or Marilynne Robinson’s <em>Gilead</em>, or any of the works that are about realizing our life will simply diffuse outward, into other lives, other futures. We plant trees and have children and write books and paint and sculpt and compose and we hope for all of these things a life that is more than fleeting.</p>
<blockquote class="rs Dh">Institutions like the Ivies are not meant to make or house Kants or Wittgensteins, let alone Platos, anymore than the Iowa Writers’ Workshop aims to make Tolstoys.</blockquote>
<p>Most scholarship is also not going to live forever. Is it therefore not worth doing? I wouldn’t say so. It’s worth it to maintain gardens and repair buildings and restore artworks. No one’s work lives forever on its own. It stays alive because someone keeps it so. Here again, greatness requires humility: other people’s. The task of thinking is worthwhile even if your thoughts prove to be of limited usefulness. The tasks of reading, of appreciation, of interpretation, are worthwhile, even if next year there is a new essay that supersedes yours, or a new book. If we have chosen to live our lives this way, it is because something about it strikes us as the best way we can spend our time.</p>
<p>There was a story that went around about a teacher of mine that went like this: <em>why</em>, he asked his class, composed mostly of business types, <em>is it that people build monuments?</em> Someone in the class answers: to testify to great deeds. <em>Really?</em> my teacher replied. <em>Have you ever read the text on a monument? </em>New answer: No, we haven’t, but they testify to the human spirit. <em>OK</em>, my teacher said. <em>But one day the sun is going to blow up and we’re all going to die. What use is a monument then?</em></p>
<p>I like this story and tell it often, because, to me, it is almost cheerfully bleak, but also, it is in its own way about the futility of futility. Human works mean nothing outside a human frame of reference. None of them can stand up to the sun blowing up and all life dying, because nothing can mean anything then; “meaning,” as such, will not exist. And part of that frame of reference is death and transience. The answers to the monument question are not wrong. But pigeons will shit on your monument and teenagers will make out there and the rain will fall and none of this will ever take into account who you were or what you did. You are background for the living now. It is their turn.</p>

<h2 data-md-text-align="center">***</h2>

<p>Don’t we all want to live forever? Yes, of course. And I think it is no personal consolation that without death we would have, as a species, no future. Sure, somebody has to make way for the next generation, but does it have to be me? Sure, the cycles of life are lovely to contemplate, but can’t I stand outside of them?</p>
<p>I don’t know why the answer is no. I know that the answer being “no” has never been satisfying, and we know this because of the ancient texts that have one way or another survived in the way we all hope our work will survive. We know there is no respite from this question in seeking wisdom because the entire book of Ecclesiastes is about this. There is no reassurance and no final verdict. There might be a next life, there might be a remade world in which none of this matters, but it is also quite possible that such places will have no need for art or philosophy, though I do find it hard to imagine a fleshly paradise without dancing. For us, right here, there’s only the work and the living, and making space for it, or not.</p>
<p>Between the two of us, I think Jason Stanley has a better chance of being read in 200 years; but I don’t think either of us have a great chance, really. The writer working now who I think has the best chance of being read long into the future is Sheila Heti, in point of fact. But I do think that work that is transformative, illuminating, and true comes from humbling yourself; from saying, I don’t matter. But this does. For however long it lives, it does.</p>

<p><em>B.D. McClay is an essayist and critic.</em></p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 15
- 0
cache/2022/0888271d03779999af533b991a8b76eb/index.md View File

@@ -0,0 +1,15 @@
title: It’s Very Unlikely Anyone Will Read This in 200 Years
url: https://www.gawker.com/culture/nobody-will-read-this-essay-in-200-years
hash_url: 0888271d03779999af533b991a8b76eb

<p>Recently, Yale philosophy professor Jason Stanley attracted a lot of derision for tweeting: “People are like, ‘he regards himself as self-important.’ No fucking shit. I would regard myself as an abject failure if people are still not reading my philosophical work in 200 years. I have zero intention of being just another Ivy League professor whose work lasts as long as they are alive.” Stanley deleted the tweets, but, unfortunately for him, they live on.</p><p>People found his pronouncements very funny because they were indeed self-important, but inevitably, a meta-discourse developed: what was so wrong about this ambition, after all? Shouldn’t we want to create something that will last hundreds if not thousands of years? Don’t we all want to live forever?</p><p>It’s natural to find the thought that what we build in our life will die with us disturbing. (Though forms of its lasting can also be distressing; in his poem “Posterity,” Philip Larkin imagines being summed up by an irritated, unenthusiastic future biographer with “Oh, you know the thing / That crummy textbook stuff from Freshman Psych.”) No one wants to die. To ourselves, we matter, and we want what we do to matter to somebody else. We want our sacrifices to be worth it in a transcendent sense, our pain to have a purpose, our achievements to be permanent. A handful of life paths — intellectual and artistic work in particular — are about trying to create, as Horace wrote, “a monument more lasting than bronze.” They are a calculated gamble that a life dedicated to the difficult and narrow path will continue after our death, however unrewarding it might have been to experience.</p><p>But that we even have Horace’s poetry to read is as much a caprice of fate as a function of his poetic virtue. Some manuscripts survive the collapse of civilization, others do not; it seems unlikely that these survivals and disappearances precisely track merit. We have Horace and we are missing most of Sappho. We have Horace and we are missing wide swathes of Aeschylus. We have Horace but we do not have the complete works of Aristotle. Why some texts survive and not others can be a matter of historical record, but it is not necessarily a measure of their virtue. Survival is ultimately a matter of greatness, yes, but just as much, it’s about luck.</p><p>At some point in life, we come to realize that we exist in a context. If you are a scientist, you might make a small but useful contribution in your subfield, a subfield that is impossible to explain to anybody else. If you write short stories for literary magazines and exist in that ecosystem, you may not really exist to people outside of it. And — for most of us — our lives form part of the circumference of that context. We live a little while and then we go into the ground. Our children, if we have them, remember us, their children remember us a little less, their children even less, and so on until we are part of a school genealogy project.</p><p>Stanley strikes me as a man who thinks he has exhausted his own context. (Whether he has or not is not something I could know.) From academic work he’s splashed out to popular writing, which has its own rewards and its own disappointments. Something strange but true is that for all their similarities, the worlds of academic and public writing mostly have contempt for each other. Trying to win at both games is quite possible, but it means, also, feeling judged.</p><p>This is not supposed to be armchair psychoanalysis: I just mean that Stanley’s ambition has nowhere to go. If you want to be Kant or Wittgenstein, no amount of willing can get you there. You need something else. What makes the wish not to be “just another Ivy League professor” a tragicomical statement is that institutions like the Ivies are not meant to make or house Kants or Wittgensteins, let alone Platos, anymore than the Iowa Writers’ Workshop aims to make Tolstoys. They are meant to make survivors — of the careerist type. You can climb all the way to the top of your profession only to find you’re simply standing around and that this was all you were ever trained to do. Some people will be great anyway. But the system is not meant for them.</p>

<h2 data-md-text-align="center">***</h2>

<p>I’ve always liked the idea that people who create great art do so under a kind of inspiration. In practical terms they have nothing to say: they created an independent existence that now speaks for itself. Such a belief is entirely compatible with the idea that to be a vessel of greatness requires training and work, and also compatible with artists being idiots. But I think there’s something to this, even when the work is intellectual, not artistic: that when things are really working, you do not feel that you are doing them. Something is working itself out through you and coming to be through you. Your job is not to get in the way.</p><p>I suppose another way of putting this position is that excellence requires a mix of arrogance and humility; arrogance as to your capabilities, humility toward the work. Arrogance says that you can and will accomplish your desires; humility understands that a greatness that transcends excellence, let alone survives, is not actually in your hands. You have to submit: to the truth, to the real, toward the bends and knots of what is coming to be through you. This is hardly less grandiose and mockable than Stanley’s original statement — I just think that it’s more true. I want something that is real to come to be through me.</p><p>It is also true that while the best writing I’ve done corresponds to this description, I do not think any of the type of writing I do is likely to last longer than my lifespan, if even that long. Non-fiction writing, in its popular and scholarly varieties, is largely parasitic on the real thing — the real thing being art. Art wrestles with problems of obscurity and immortality; art testifies to the transcendent horizon. Little essays, no matter how clever, fade as soon as they are born; big books, even before. It’s no mistake I’ve referenced two poems already, or considered framing this entire piece through a novel like George Eliot’s <em>Middlemarch</em>, or Marilynne Robinson’s <em>Gilead</em>, or any of the works that are about realizing our life will simply diffuse outward, into other lives, other futures. We plant trees and have children and write books and paint and sculpt and compose and we hope for all of these things a life that is more than fleeting.</p><blockquote class="rs Dh">Institutions like the Ivies are not meant to make or house Kants or Wittgensteins, let alone Platos, anymore than the Iowa Writers’ Workshop aims to make Tolstoys.</blockquote><p>Most scholarship is also not going to live forever. Is it therefore not worth doing? I wouldn’t say so. It’s worth it to maintain gardens and repair buildings and restore artworks. No one’s work lives forever on its own. It stays alive because someone keeps it so. Here again, greatness requires humility: other people’s. The task of thinking is worthwhile even if your thoughts prove to be of limited usefulness. The tasks of reading, of appreciation, of interpretation, are worthwhile, even if next year there is a new essay that supersedes yours, or a new book. If we have chosen to live our lives this way, it is because something about it strikes us as the best way we can spend our time.</p><p>There was a story that went around about a teacher of mine that went like this: <em>why</em>, he asked his class, composed mostly of business types, <em>is it that people build monuments?</em> Someone in the class answers: to testify to great deeds. <em>Really?</em> my teacher replied. <em>Have you ever read the text on a monument? </em>New answer: No, we haven’t, but they testify to the human spirit. <em>OK</em>, my teacher said. <em>But one day the sun is going to blow up and we’re all going to die. What use is a monument then?</em></p><p>I like this story and tell it often, because, to me, it is almost cheerfully bleak, but also, it is in its own way about the futility of futility. Human works mean nothing outside a human frame of reference. None of them can stand up to the sun blowing up and all life dying, because nothing can mean anything then; “meaning,” as such, will not exist. And part of that frame of reference is death and transience. The answers to the monument question are not wrong. But pigeons will shit on your monument and teenagers will make out there and the rain will fall and none of this will ever take into account who you were or what you did. You are background for the living now. It is their turn.</p>

<h2 data-md-text-align="center">***</h2>

<p>Don’t we all want to live forever? Yes, of course. And I think it is no personal consolation that without death we would have, as a species, no future. Sure, somebody has to make way for the next generation, but does it have to be me? Sure, the cycles of life are lovely to contemplate, but can’t I stand outside of them?</p><p>I don’t know why the answer is no. I know that the answer being “no” has never been satisfying, and we know this because of the ancient texts that have one way or another survived in the way we all hope our work will survive. We know there is no respite from this question in seeking wisdom because the entire book of Ecclesiastes is about this. There is no reassurance and no final verdict. There might be a next life, there might be a remade world in which none of this matters, but it is also quite possible that such places will have no need for art or philosophy, though I do find it hard to imagine a fleshly paradise without dancing. For us, right here, there’s only the work and the living, and making space for it, or not.</p><p>Between the two of us, I think Jason Stanley has a better chance of being read in 200 years; but I don’t think either of us have a great chance, really. The writer working now who I think has the best chance of being read long into the future is Sheila Heti, in point of fact. But I do think that work that is transformative, illuminating, and true comes from humbling yourself; from saying, I don’t matter. But this does. For however long it lives, it does.</p>

<p><em>B.D. McClay is an essayist and critic.</em></p>

+ 259
- 0
cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/index.html View File

@@ -0,0 +1,259 @@
<!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` element
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>How I create fancy PDF-documents in Markdown (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>How I create fancy PDF-documents in Markdown</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p class="date">Wednesday, July 14, 2021</p>

<p>I haven’t had the need to create any ‘fancy’ document in ages, but the other day I had to create a PDF-document with fancy formatting for a work related thing.</p>

<p>After some testing of various solutions and tools, I ended up with a setup using <a href="https://pandoc.org">Pandoc</a>, <a href="https://weasyprint.org/">WeasyPrint</a> and <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>. I consider Markdown to be the best markup language and I use it for everything!</p>

<div class="grid-container">
<div class="grid-item single">
<a href="https://hund.tty1.se/img/pandoc-pdf.png">
<img src="https://hund.tty1.se/img/t/pandoc-pdf.png" alt="">
</a>
<figcaption>My example document</figcaption>
</div>
</div>

<p>The source for this PDF-document looks like this:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># H1 Header

I really like using Markdown.

1. First item
2. Second item
3. Third item
4. Fourth item

&gt; This is some quoted text.

```sh
#!/bin/sh
echo "This is a code block."
```
</code></pre></div></div>

<p>And this is the CSS I used:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span>
<span class="py">--blue</span><span class="p">:</span> <span class="m">#3465A4</span><span class="p">;</span>
<span class="p">}</span>

<span class="k">@font-face</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>
<span class="nl">src</span><span class="p">:</span> <span class="sx">url('NotoSans-Condensed.ttf')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'ttf'</span><span class="p">)</span>
<span class="p">}</span>

<span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.45em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">26px</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0.15em</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#CCC</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">pre</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">blockquote</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0.1em</span> <span class="m">0.75em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>And this is the command I used to render the document:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ pandoc --pdf-engine weasyprint -c style.css demo.md -s -o demo.pdf
</code></pre></div></div>

<h2 id="installation">Installation</h2>

<p>To make this work you need to install Pandoc and WeasyPrint. In Gentoo the packages are called <code class="language-plaintext highlighter-rouge">app-text/pandoc</code> and <code class="language-plaintext highlighter-rouge">dev-python/weasyprint</code>.</p>

<p>With that said. I did not install Pandoc from source myself. It simply requires way too many packages for my liking (when compiled from source):</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># emerge pandoc
[...]
Total: 133 packages (133 new), Size of downloads: 165,258 KiB
</code></pre></div></div>

<p>I instead used a binary package that’s available from their <a href="https://github.com/jgm/pandoc/releases/">GitHub-page</a>. The archive weights in at about 14 MB and unpacked at about 68 MB. I then just put the folder in <code class="language-plaintext highlighter-rouge">~/.local/bin/</code> and created a symbolic link to the binary file.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 92
- 0
cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/index.md View File

@@ -0,0 +1,92 @@
title: How I create fancy PDF-documents in Markdown
url: https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html
hash_url: 0c60682eeb1edfaf2c6c13cd30cce60d

<p class="date">Wednesday, July 14, 2021</p>

<p>I haven’t had the need to create any ‘fancy’ document in ages, but the other day I had to create a PDF-document with fancy formatting for a work related thing.</p>

<p>After some testing of various solutions and tools, I ended up with a setup using <a href="https://pandoc.org">Pandoc</a>, <a href="https://weasyprint.org/">WeasyPrint</a> and <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>. I consider Markdown to be the best markup language and I use it for everything!</p>

<div class="grid-container">
<div class="grid-item single">
<a href="https://hund.tty1.se/img/pandoc-pdf.png">
<img src="https://hund.tty1.se/img/t/pandoc-pdf.png" alt="">
</a>
<figcaption>My example document</figcaption>
</div>
</div>

<p>The source for this PDF-document looks like this:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># H1 Header

I really like using Markdown.

1. First item
2. Second item
3. Third item
4. Fourth item

&gt; This is some quoted text.

```sh
#!/bin/sh
echo "This is a code block."
```
</code></pre></div></div>

<p>And this is the CSS I used:</p>

<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nd">:root</span> <span class="p">{</span>
<span class="py">--blue</span><span class="p">:</span> <span class="m">#3465A4</span><span class="p">;</span>
<span class="p">}</span>

<span class="k">@font-face</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>
<span class="nl">src</span><span class="p">:</span> <span class="sx">url('NotoSans-Condensed.ttf')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'ttf'</span><span class="p">)</span>
<span class="p">}</span>

<span class="nt">html</span> <span class="p">{</span>
<span class="nl">font-family</span><span class="p">:</span> <span class="s2">'NotoSans'</span><span class="p">;</span>
<span class="nl">line-height</span><span class="p">:</span> <span class="m">1.45em</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">h1</span> <span class="p">{</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">26px</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--blue</span><span class="p">);</span>
<span class="nl">padding-bottom</span><span class="p">:</span> <span class="m">0.15em</span><span class="p">;</span>
<span class="nl">border-bottom</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="m">#CCC</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">pre</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>
<span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span>
<span class="nl">font-size</span><span class="p">:</span> <span class="m">12px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">blockquote</span> <span class="p">{</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.05</span><span class="p">);</span>
<span class="nl">border-left</span><span class="p">:</span> <span class="m">5px</span> <span class="nb">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0.1</span><span class="p">);</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">0.1em</span> <span class="m">0.75em</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>And this is the command I used to render the document:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ pandoc --pdf-engine weasyprint -c style.css demo.md -s -o demo.pdf
</code></pre></div></div>

<h2 id="installation">Installation</h2>

<p>To make this work you need to install Pandoc and WeasyPrint. In Gentoo the packages are called <code class="language-plaintext highlighter-rouge">app-text/pandoc</code> and <code class="language-plaintext highlighter-rouge">dev-python/weasyprint</code>.</p>

<p>With that said. I did not install Pandoc from source myself. It simply requires way too many packages for my liking (when compiled from source):</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># emerge pandoc
[...]
Total: 133 packages (133 new), Size of downloads: 165,258 KiB
</code></pre></div></div>

<p>I instead used a binary package that’s available from their <a href="https://github.com/jgm/pandoc/releases/">GitHub-page</a>. The archive weights in at about 14 MB and unpacked at about 68 MB. I then just put the folder in <code class="language-plaintext highlighter-rouge">~/.local/bin/</code> and created a symbolic link to the binary file.</p>

+ 192
- 0
cache/2022/32cf150b3b75b308683c4246b54cdcf9/index.html View File

@@ -0,0 +1,192 @@
<!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` element
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>Bjørn Karmann › Occlusion Grotesque (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://bjoernkarmann.dk/occlusion-grotesque">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Bjørn Karmann › Occlusion Grotesque</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://bjoernkarmann.dk/occlusion-grotesque" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually. The project explores what it means to design with nature and on nature's terms.</p>
<p>Chapter two, Deep Occlusion, explores the typeface as a dataset for an AI to learn how a tree grows and designs shapes over time. </p>
<p>The project challenges how we humans are terraforming and controlling nature to their own desires, which has become problematic to an almost un-reversible state. Here the roles have been flipped, as nature is given agency to lead the process, and the designer is invited to let go of control and have nature take over. </p>
<p>It all starts with the handover from the designer to the tree by tracing and carving an initial typeface. Conceptually this initial type design refers to the desire for control, a man-made almost mechanical sans-serif typeface in high contrast within the natural environment. The tree is now left untouched for a year, where the natural processes such as occlusion begin. A tree’s occlusion is the process whereby a wound - or in this case carvings - is progressively closed by the formation of new wood and bark.</p>
<p>Returning to the tree reveals an unsupervised transformation that is unique to each letter of the alphabet. The artist now takes on an observant role and meticulously documents the letters with a camera and measurement tools. This is repeated every year with the important detail that the camera settings, lens, distance, and measurements stay consistent at every observation. </p>
<p>The digitalization from the tree to a usable font invites the artist to become the design interpreter. For the most part, the letters can be traced, but occasionally due to unexpected bark behavior, edge cracking, and blurring of boundaries, the artist has to take decisions without diverting from the tree's intent. </p>
<p>One of the beautiful coincidences between the growth of a tree and type design is that growth happens sideways. This was new to me but seems obvious now. Already 3 years in, the letters were clearly showing expansion to the left and right, while the position from the ground had not changed. This is due to the misconception that trees do not grow from the ground up, but rather out from the tips. As new branches reach higher into the sky, the lower trunk grows radially from within. While this happens, the inner- and outer bark stays wrapped around the trunk performing an extraordinary expansion, thus deforming the surface. All while keeping the tree protected.</p>
<p>In typography, as we "grow" the typeface into bolder and heavier weights, we design each letter sideways too. Letters gain more graphical volume left and right while keeping the x-height more or less consistent. A coincidence that makes a tree the perfect candidate to design a typeface. </p>
<p>Nature is never perfect and will never produce two of the same. Another interesting attribute that aligns with an ever-growing need to create unique designs, free from norms and human-biased conventions.</p>
<p>Occlusion Grotesque does not follow the conventual weights, (eg. light, medium, bold) but rather each weight represents a year of growth. Year 0 for example is referred to both the ‘regular’ weight and the beginning of the project in 2015. Year 5 was captured in 2020. For the most dramatic annual changes a younger tree was desired, but since carving in the bark can be painful and potentially kill the tree a resistant sort and age was chosen. </p>
<p>The tree of choice was a Beech, native to the forest of my parents. It was planted by them in 1997 in Ågård, Denmark. At year 0 only a quarter side of the tree was used to carve the letters, maintaining the tree's ability to transport essential nutrients from the leaves to the roots. It is important to note that cutting through the bark of a tree trunk in a complete circle will kill the tree. No trees were harmed in this experiment.</p>
<p>One of the key documentation tools was a laser-cut frame that attaches to the camera. The frame served as the known absolute measurement that is used to reference scale over time. In the frame is a 60mm ruler engraved, indicating every 5mm with a line. Secondly, the tools help with camera distortions. If necessary the square frame at a 3:4 ratio can be aligned back into a pixel-perfect 3:4 square format, correcting any lens distortion made by a given lens. The steel poles ensure a consistent distance from the camera sensor to the tree, again helping with minimizing distortions. </p>
<p>The image above shows an overview of tools used for documenting the letters consistently across multiple years. </p>
<p>a: steel rods (for consistent distent)
b: plexiglass frame w/ ruler
c: waterproof data storage
d: M4 bolts for assembly
e: canon 5D MkII full-frame camera
f: tripod</p>
<p>The rigorous camera setup allowed for insight into the growth rate and direction of the tree, since each year was accurately framed a center axis could be triangulated. </p>
<p>The image above shows some of the letters that clearly reveal a sideways growth, and even a curious tendency to grow to the left of the centerline.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 52
- 0
cache/2022/32cf150b3b75b308683c4246b54cdcf9/index.md View File

@@ -0,0 +1,52 @@
title: Bjørn Karmann › Occlusion Grotesque
url: https://bjoernkarmann.dk/occlusion-grotesque
hash_url: 32cf150b3b75b308683c4246b54cdcf9

Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually. The project explores what it means to design with nature and on nature's terms.

Chapter two, Deep Occlusion, explores the typeface as a dataset for an AI to learn how a tree grows and designs shapes over time.



The project challenges how we humans are terraforming and controlling nature to their own desires, which has become problematic to an almost un-reversible state. Here the roles have been flipped, as nature is given agency to lead the process, and the designer is invited to let go of control and have nature take over.

It all starts with the handover from the designer to the tree by tracing and carving an initial typeface. Conceptually this initial type design refers to the desire for control, a man-made almost mechanical sans-serif typeface in high contrast within the natural environment. The tree is now left untouched for a year, where the natural processes such as occlusion begin. A tree’s occlusion is the process whereby a wound - or in this case carvings - is progressively closed by the formation of new wood and bark.


Returning to the tree reveals an unsupervised transformation that is unique to each letter of the alphabet. The artist now takes on an observant role and meticulously documents the letters with a camera and measurement tools. This is repeated every year with the important detail that the camera settings, lens, distance, and measurements stay consistent at every observation.

The digitalization from the tree to a usable font invites the artist to become the design interpreter. For the most part, the letters can be traced, but occasionally due to unexpected bark behavior, edge cracking, and blurring of boundaries, the artist has to take decisions without diverting from the tree's intent.



One of the beautiful coincidences between the growth of a tree and type design is that growth happens sideways. This was new to me but seems obvious now. Already 3 years in, the letters were clearly showing expansion to the left and right, while the position from the ground had not changed. This is due to the misconception that trees do not grow from the ground up, but rather out from the tips. As new branches reach higher into the sky, the lower trunk grows radially from within. While this happens, the inner- and outer bark stays wrapped around the trunk performing an extraordinary expansion, thus deforming the surface. All while keeping the tree protected.

In typography, as we "grow" the typeface into bolder and heavier weights, we design each letter sideways too. Letters gain more graphical volume left and right while keeping the x-height more or less consistent. A coincidence that makes a tree the perfect candidate to design a typeface.

Nature is never perfect and will never produce two of the same. Another interesting attribute that aligns with an ever-growing need to create unique designs, free from norms and human-biased conventions.


Occlusion Grotesque does not follow the conventual weights, (eg. light, medium, bold) but rather each weight represents a year of growth. Year 0 for example is referred to both the ‘regular’ weight and the beginning of the project in 2015. Year 5 was captured in 2020. For the most dramatic annual changes a younger tree was desired, but since carving in the bark can be painful and potentially kill the tree a resistant sort and age was chosen.

The tree of choice was a Beech, native to the forest of my parents. It was planted by them in 1997 in Ågård, Denmark. At year 0 only a quarter side of the tree was used to carve the letters, maintaining the tree's ability to transport essential nutrients from the leaves to the roots. It is important to note that cutting through the bark of a tree trunk in a complete circle will kill the tree. No trees were harmed in this experiment.



One of the key documentation tools was a laser-cut frame that attaches to the camera. The frame served as the known absolute measurement that is used to reference scale over time. In the frame is a 60mm ruler engraved, indicating every 5mm with a line. Secondly, the tools help with camera distortions. If necessary the square frame at a 3:4 ratio can be aligned back into a pixel-perfect 3:4 square format, correcting any lens distortion made by a given lens. The steel poles ensure a consistent distance from the camera sensor to the tree, again helping with minimizing distortions.


The image above shows an overview of tools used for documenting the letters consistently across multiple years.

a: steel rods (for consistent distent)
b: plexiglass frame w/ ruler
c: waterproof data storage
d: M4 bolts for assembly
e: canon 5D MkII full-frame camera
f: tripod




The rigorous camera setup allowed for insight into the growth rate and direction of the tree, since each year was accurately framed a center axis could be triangulated.

The image above shows some of the letters that clearly reveal a sideways growth, and even a curious tendency to grow to the left of the centerline.

+ 242
- 0
cache/2022/3e7688b2d34d13bf51290fc906d77b3d/index.html View File

@@ -0,0 +1,242 @@
<!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` element
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>How I fell in love with low-js (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://edofic.com/posts/2022-01-28-low-js/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>How I fell in love with low-js</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://edofic.com/posts/2022-01-28-low-js/" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p><time>2022-01-28</time></p>
<hr>
<p>About 5 years ago I was working on a project written in style still common for today:</p>
<ul>
<li>python backend serving a REST API (public btw)</li>
<li>SPA using framework-of-the day</li>
</ul>
<p>And it was horrible. Not to mention that the framework-of-the-day did not actually take off and we ended up using something very fringe - there were real performance and complexity problems. And to this day I believe all our problems stemmed from the base architecture. There were just too many layers, each contributing overhead. Both in execution speed (aka “app is slow”) and development speed (“our velocity is too low”).</p>
<p>Let’s look at a more concrete example. What happened for a typical page load (assuming navigation, otherwise it starts by loading multiple mb of js)</p>
<ul>
<li>JS router detects navigation and updates components</li>
<li>components fetch needed data</li>
<li>this turns out to be tens (sometimes hundreds!) of requests because the general API is very normalized (yes we were discussing GraphQL at this point)</li>
<li>then throw most of this data (95%+) away since we don’t <em>really</em> need all those fields (yes yes, GraphQL again…)</li>
<li>render templates in JS with the processed data</li>
<li>shove the results in the DOM</li>
</ul>
<p>…meanwhile the user is impatiently twiddling their thumbs. Sounds familiar? Because this was by far not the only app I’ve seen with this problem. Surely we can do better…</p>
<p>Luckily I had a colleague with Ruby on Rails background. And he was a big fan. Quite loud about how plain old server side rendered pages were much simpler and faster too. It all made a lot of sense so I made a prototype. The above flow was now:</p>
<ul>
<li>flask router directs a request to a controller</li>
<li>controller constructs a query (we already had a query and serialization layer available)</li>
<li>exactly the data that is needed (column selection) is fetched</li>
<li>then passed through a presentation layer that makes the view models</li>
<li>jinja template is rendered</li>
<li>html returned to the browser</li>
</ul>
<p>And I be damned, it was faster! A lot faster. If you think about it it makes a lot of sense. It looks like about the same just looking at the line items but it’s actually performing a lot less work and more importantly there is less communication (and thus latency). And the best part? It was also a lot faster to work with. Mostly due to fewer moving parts, so each change needed to touch less places. After all I managed to cobble the prototype together in a single day.</p>
<p>So we went all in on this approach and shipped (a much better version of this) to production to replace a core component of the product (as an opt-in v2 - I’m not completely insane…). Smashing hit. Feature parity in no time, even new feature were added very quickly. Less bugs, better performance, happier customers.</p>
<p>So where was the problem? Sounds like a tall-tale not a real story from the trenches. Well there were hacks. Like “preserving” the scroll position. Or tracking whether a modal is open in the url. But the real issue was the user experience. The fidelity was much lower. Everything looked a bit more crude, some things like switching “tabs” took surprisingly long (obviously since it was a full page refresh) or there was jarring page blinking. Where is my autocomplete? Where are the smooth transitions? Where has my multiselect choice gone, I just change the filter a bit?</p>
<p>The technology (even just <a href="https://github.com/turbolinks/turbolinks">turbolinks</a> would be a big improvement) to fix all this with minimal effort was there (I now checked release years) but my mindset wasn’t. Instead I claimed, drunk on success (it really was a big success) and full of hubris, that this is the tradeoff we made to achieve all other goals.</p>
<p>But surely we can do better?</p>
<h1 id="a-few-years-later">A few years later</h1>
<p>Different project, different company, now focusing on purely backend services. Maybe free(-er) of my prejudices? I come across <a href="https://htmx.org/">htmx</a> and it was love at first sight. It dawned on me it’s actually quite simple to make an http request in JS and shove the resulting html into the DOM. But it’s almost trivial to do it declaratively with a small library. But by then I moved firmly into <a href="http://boringtechnology.club/">Choose boring technology</a> camp (still here) and this looked way too fringe.</p>
<p>But then after a while I see Basecamp launch <a href="https://www.hey.com/">hey.com</a> and claim they’re doing the whole product using this approach. Even open sourced <a href="https://hotwired.dev/">the library - Hotwired</a>.</p>
<p>But the real kicker was seeing <a href="https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision">Rails 7 launch</a> with Hotwired as the default “frontend framework”. So maybe this approach is going (near) mainstream after all? Indeed htmx now matches some second-tier JS framworks in terms of stars, heck it surpassed our framework-of-the-day. And there’s a proliferation of tools as well. Just I few honorable mentions before moving on:</p>

<h1 id="what-am-i-even-talking-about">What am I even talking about?</h1>
<p>Basic premise is: browsers are great at navigating pages, let’s leverage that by serving users directly with HTML. This already gives you half-decent pages but you can go further and sprinkle on some sugar. A bit of JS. Instead of reinventing the world in JS let’s try to really use what modern browsers provide natively and then push just a bit forward.</p>
<p>For starters: a lot can be done natively nowadays - <a href="http://youmightnotneedjs.com/">http://youmightnotneedjs.com/</a></p>
<p>But more concretely I’m talking about taking Django/Rails/Buffalo/Play, writing a plain old server side rendered application and shoving in Htmx/Turbo/Unpoly for that little bit of interactivy that gives you things like</p>
<ul>
<li>immediate form validation without submitting</li>
<li>modals that preserve app state (scroll positions, input fields) underneath</li>
<li>responsive facet search</li>
<li>pagination without page reloads</li>
<li>infinite scroll</li>
</ul>
<p>Why now just build all of this in React? Because you can vastly simplify the architecture, reduce the number of moving parts and thus boilerplate and most importantly the total effort/time to do something.</p>
<p>If I steal some images from the <a href="http://triskweline.de/unpoly-rugb">Unpoly Story</a> you don’t want to program like it’s 2015</p>
<p><img src="/images/low-js/2015.webp" alt="stack in 2015"></p>
<p>But instead more like it’s <strong>2005</strong></p>
<p><img src="/images/low-js/2005.webp" alt="stack in 2005"></p>
<p>But maybe with a bit less random JS and keeping it declarative where possible. Because the main thesis is that the fidelity of the user experience follows the Pareto principle, you can get say 80% of the experience for say 20% of work.</p>
<p><img src="/images/low-js/tradeoff.webp" alt="tradeoff"></p>
<p>With the imporant caveat that this does not apply to applications where heavy and smooth interaction is one of the core features. E.g. games.</p>
<h1 id="my-experience">My experience</h1>
<p>I did a toy project in Go using <a href="https://github.com/gorilla/mux">gorilla/mux</a> for routing and <a href="https://github.com/stevelacy/daz">daz</a> for templates (this one is quite out there…) with <a href="https://htmx.org/">htmx</a> for interactivity and <a href="https://picocss.com/">Pico CSS</a> for styling (I wrote <a href="/posts/2022-01-18-tailwind-vs-pico/">a post</a> about this part). Absolutely no javascript, miniscule amount of css, everything else written in Go.</p>
<p>A stark contrast to <a href="/posts/2021-12-19-trying-out-remix/">Trying out Remix</a> where everything is JS. And I preferred it. Felt more productive. I guess this is an instance of <a href="https://en.wikipedia.org/wiki/Conway%27s_law">Conway’s Law</a> in action: frontend engineers doing the full stack prefer frontend focused tools that do backend while backend engineers prefer backend tools that do frontend. But I think there’s a technical tradeoff here as well. If your app is predominantly focused on a slick experience and you can get by with a limited backend then something like Remix is a great tool. Conversely if you’re more backend heavy and you need just a <em>slick enough</em> frontend then low-js approach suits you better. My hot take here is that most business apps fall into the latter category.</p>
<p>But what’s the actual experience like? In one word: boring. In a good way. Just like doing web pages way back when Rails was the new hot thing. Htmx mostly just gets out of the way. You sprinkle a few attributes here and there and things mostly just work.</p>
<p>The part I was most worried about was performance. But as far as I can see it’s better that with an SPA for most of my cases. Hear me out:</p>
<ul>
<li>initial page load is super fast as it’s just loading the page that is server rendered any way</li>
<li>only loading 10kb of js (htmx) and even that is at the end for interactivity</li>
<li>when clicking around things load in ~150ms from another region (20ms on localhost since computers are fast if you’re not wasting cycles)</li>
<li>most of it (read requests) is safe to preload on mouse down and then navigate as usual on mouse up. Since the click <a href="http://instantclick.io/click-test">takes 100ms+</a> this makes navigation feel instant. Trivial to do via <a href="https://htmx.org/extensions/preload/">preload extension</a>.</li>
<li>slow posts can still be <a href="https://htmx.org/attributes/hx-indicator/">hidden a spinner declaratively</a></li>
</ul>
<p>All in all I think I found my cure for javascript fatigue as well as a preferred way to do new projects going forward.</p>
<hr>
<p>Last modified on 2022-01-28</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 75
- 0
cache/2022/3e7688b2d34d13bf51290fc906d77b3d/index.md View File

@@ -0,0 +1,75 @@
title: How I fell in love with low-js
url: https://edofic.com/posts/2022-01-28-low-js/
hash_url: 3e7688b2d34d13bf51290fc906d77b3d

<time>2022-01-28</time>
<hr>
<p>About 5 years ago I was working on a project written in style still common for today:</p>
<ul>
<li>python backend serving a REST API (public btw)</li>
<li>SPA using framework-of-the day</li>
</ul>
<p>And it was horrible. Not to mention that the framework-of-the-day did not actually take off and we ended up using something very fringe - there were real performance and complexity problems. And to this day I believe all our problems stemmed from the base architecture. There were just too many layers, each contributing overhead. Both in execution speed (aka “app is slow”) and development speed (“our velocity is too low”).</p>
<p>Let’s look at a more concrete example. What happened for a typical page load (assuming navigation, otherwise it starts by loading multiple mb of js)</p>
<ul>
<li>JS router detects navigation and updates components</li>
<li>components fetch needed data</li>
<li>this turns out to be tens (sometimes hundreds!) of requests because the general API is very normalized (yes we were discussing GraphQL at this point)</li>
<li>then throw most of this data (95%+) away since we don’t <em>really</em> need all those fields (yes yes, GraphQL again…)</li>
<li>render templates in JS with the processed data</li>
<li>shove the results in the DOM</li>
</ul>
<p>…meanwhile the user is impatiently twiddling their thumbs. Sounds familiar? Because this was by far not the only app I’ve seen with this problem. Surely we can do better…</p>
<p>Luckily I had a colleague with Ruby on Rails background. And he was a big fan. Quite loud about how plain old server side rendered pages were much simpler and faster too. It all made a lot of sense so I made a prototype. The above flow was now:</p>
<ul>
<li>flask router directs a request to a controller</li>
<li>controller constructs a query (we already had a query and serialization layer available)</li>
<li>exactly the data that is needed (column selection) is fetched</li>
<li>then passed through a presentation layer that makes the view models</li>
<li>jinja template is rendered</li>
<li>html returned to the browser</li>
</ul>
<p>And I be damned, it was faster! A lot faster. If you think about it it makes a lot of sense. It looks like about the same just looking at the line items but it’s actually performing a lot less work and more importantly there is less communication (and thus latency). And the best part? It was also a lot faster to work with. Mostly due to fewer moving parts, so each change needed to touch less places. After all I managed to cobble the prototype together in a single day.</p>
<p>So we went all in on this approach and shipped (a much better version of this) to production to replace a core component of the product (as an opt-in v2 - I’m not completely insane…). Smashing hit. Feature parity in no time, even new feature were added very quickly. Less bugs, better performance, happier customers.</p>
<p>So where was the problem? Sounds like a tall-tale not a real story from the trenches. Well there were hacks. Like “preserving” the scroll position. Or tracking whether a modal is open in the url. But the real issue was the user experience. The fidelity was much lower. Everything looked a bit more crude, some things like switching “tabs” took surprisingly long (obviously since it was a full page refresh) or there was jarring page blinking. Where is my autocomplete? Where are the smooth transitions? Where has my multiselect choice gone, I just change the filter a bit?</p>
<p>The technology (even just <a href="https://github.com/turbolinks/turbolinks">turbolinks</a> would be a big improvement) to fix all this with minimal effort was there (I now checked release years) but my mindset wasn’t. Instead I claimed, drunk on success (it really was a big success) and full of hubris, that this is the tradeoff we made to achieve all other goals.</p>
<p>But surely we can do better?</p>
<h1 id="a-few-years-later">A few years later</h1>
<p>Different project, different company, now focusing on purely backend services. Maybe free(-er) of my prejudices? I come across <a href="https://htmx.org/">htmx</a> and it was love at first sight. It dawned on me it’s actually quite simple to make an http request in JS and shove the resulting html into the DOM. But it’s almost trivial to do it declaratively with a small library. But by then I moved firmly into <a href="http://boringtechnology.club/">Choose boring technology</a> camp (still here) and this looked way too fringe.</p>
<p>But then after a while I see Basecamp launch <a href="https://www.hey.com/">hey.com</a> and claim they’re doing the whole product using this approach. Even open sourced <a href="https://hotwired.dev/">the library - Hotwired</a>.</p>
<p>But the real kicker was seeing <a href="https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision">Rails 7 launch</a> with Hotwired as the default “frontend framework”. So maybe this approach is going (near) mainstream after all? Indeed htmx now matches some second-tier JS framworks in terms of stars, heck it surpassed our framework-of-the-day. And there’s a proliferation of tools as well. Just I few honorable mentions before moving on:</p>

<h1 id="what-am-i-even-talking-about">What am I even talking about?</h1>
<p>Basic premise is: browsers are great at navigating pages, let’s leverage that by serving users directly with HTML. This already gives you half-decent pages but you can go further and sprinkle on some sugar. A bit of JS. Instead of reinventing the world in JS let’s try to really use what modern browsers provide natively and then push just a bit forward.</p>
<p>For starters: a lot can be done natively nowadays - <a href="http://youmightnotneedjs.com/">http://youmightnotneedjs.com/</a></p>
<p>But more concretely I’m talking about taking Django/Rails/Buffalo/Play, writing a plain old server side rendered application and shoving in Htmx/Turbo/Unpoly for that little bit of interactivy that gives you things like</p>
<ul>
<li>immediate form validation without submitting</li>
<li>modals that preserve app state (scroll positions, input fields) underneath</li>
<li>responsive facet search</li>
<li>pagination without page reloads</li>
<li>infinite scroll</li>
</ul>
<p>Why now just build all of this in React? Because you can vastly simplify the architecture, reduce the number of moving parts and thus boilerplate and most importantly the total effort/time to do something.</p>
<p>If I steal some images from the <a href="http://triskweline.de/unpoly-rugb">Unpoly Story</a> you don’t want to program like it’s 2015</p>
<p><img src="/images/low-js/2015.webp" alt="stack in 2015"></p>
<p>But instead more like it’s <strong>2005</strong></p>
<p><img src="/images/low-js/2005.webp" alt="stack in 2005"></p>
<p>But maybe with a bit less random JS and keeping it declarative where possible. Because the main thesis is that the fidelity of the user experience follows the Pareto principle, you can get say 80% of the experience for say 20% of work.</p>
<p><img src="/images/low-js/tradeoff.webp" alt="tradeoff"></p>
<p>With the imporant caveat that this does not apply to applications where heavy and smooth interaction is one of the core features. E.g. games.</p>
<h1 id="my-experience">My experience</h1>
<p>I did a toy project in Go using <a href="https://github.com/gorilla/mux">gorilla/mux</a> for routing and <a href="https://github.com/stevelacy/daz">daz</a> for templates (this one is quite out there…) with <a href="https://htmx.org/">htmx</a> for interactivity and <a href="https://picocss.com/">Pico CSS</a> for styling (I wrote <a href="/posts/2022-01-18-tailwind-vs-pico/">a post</a> about this part). Absolutely no javascript, miniscule amount of css, everything else written in Go.</p>
<p>A stark contrast to <a href="/posts/2021-12-19-trying-out-remix/">Trying out Remix</a> where everything is JS. And I preferred it. Felt more productive. I guess this is an instance of <a href="https://en.wikipedia.org/wiki/Conway%27s_law">Conway’s Law</a> in action: frontend engineers doing the full stack prefer frontend focused tools that do backend while backend engineers prefer backend tools that do frontend. But I think there’s a technical tradeoff here as well. If your app is predominantly focused on a slick experience and you can get by with a limited backend then something like Remix is a great tool. Conversely if you’re more backend heavy and you need just a <em>slick enough</em> frontend then low-js approach suits you better. My hot take here is that most business apps fall into the latter category.</p>
<p>But what’s the actual experience like? In one word: boring. In a good way. Just like doing web pages way back when Rails was the new hot thing. Htmx mostly just gets out of the way. You sprinkle a few attributes here and there and things mostly just work.</p>
<p>The part I was most worried about was performance. But as far as I can see it’s better that with an SPA for most of my cases. Hear me out:</p>
<ul>
<li>initial page load is super fast as it’s just loading the page that is server rendered any way</li>
<li>only loading 10kb of js (htmx) and even that is at the end for interactivity</li>
<li>when clicking around things load in ~150ms from another region (20ms on localhost since computers are fast if you’re not wasting cycles)</li>
<li>most of it (read requests) is safe to preload on mouse down and then navigate as usual on mouse up. Since the click <a href="http://instantclick.io/click-test">takes 100ms+</a> this makes navigation feel instant. Trivial to do via <a href="https://htmx.org/extensions/preload/">preload extension</a>.</li>
<li>slow posts can still be <a href="https://htmx.org/attributes/hx-indicator/">hidden a spinner declaratively</a></li>
</ul>
<p>All in all I think I found my cure for javascript fatigue as well as a preferred way to do new projects going forward.</p>
<hr>
<p>Last modified on 2022-01-28</p>

+ 236
- 0
cache/2022/450dce1f614eba220a97b035cea5dfe5/index.html View File

@@ -0,0 +1,236 @@
<!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` element
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>Clayton Christensen’s “How Will You Measure Your Life?” (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://hbswk.hbs.edu/item/7007.html">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Clayton Christensen’s “How Will You Measure Your Life?”</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://hbswk.hbs.edu/item/7007.html" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<h3>The Trap Of Marginal Thinking</h3>

<p><a href="http://amzn.to/KuvAww"><img alt="How Will You Measure Your Life?" src="/PublishingImages/measure.jpg"></a>In the late 1990s, Blockbuster dominated the movie rental industry in the United States. It had stores all over the country, a significant size advantage, and what appeared to be a stranglehold on the market. Blockbuster had made huge investments in its inventory for all its stores. But, obviously, it didn't make money from movies sitting on the shelves; it was only when a customer rented a movie that Blockbuster made anything. It therefore needed to get the customer to watch the movie quickly, and then return it quickly, so that the clerk could rent the same DVD to different customers again and again. It wasn't long before Blockbuster realized that people didn't like returning movies quickly, so it increased late fees so much that analysts estimated that 70 percent of Blockbuster's profits were from these fees.</p>

<p>Set against this backdrop, a little upstart called Netflix emerged in the 1990s with a novel idea: rather than make people go to the video store, why don't we mail DVDs to them? Netflix's business model made profit in just the opposite way to Blockbuster's. Netflix customers paid a monthly fee-and the company made money when customers didn't watch the DVDs that they had ordered. As long as the DVDs sat unwatched at customers' homes, Netflix did not have to pay return postage-or send out the next batch of movies that the customer had already paid the monthly fee to get.</p>

<blockquote>“As Blockbuster learned the hard way, we end up paying for the <em>full</em> cost of our decisions, not the marginal costs, whether we like it or not.”</blockquote>

<p>It was a bold move: Netflix was the quintessential David going up against the Goliath of the movie rental industry. Blockbuster had billions of dollars in assets, tens of thousands of employees, and 100 percent brand recognition. If Blockbuster decided it wanted to go after this nascent market, it would have the resources to make life very difficult for the little start-up.</p>

<p>But it didn't.</p>

<p>By 2002, the upstart was showing signs of potential. It had $150 million in revenues and a 36 percent profit margin. Blockbuster investors were starting to get nervous—there was clearly something to what Netflix was doing. Many pressured the incumbent to look more closely at the market. "Obviously, we pay attention to any way people are getting home entertainment. We always look at all those things," is how a Blockbuster's responded in a 2002 press release. "We have not seen a business model that is financially viable in the long term in this arena. Online rental services are 'serving a niche market.' "</p>

<p>Netflix, on the other hand, thought this market was fantastic. It didn't need to compare it to an existing and profitable business: its baseline was no profit and no business at all. This "niche" market seemed just fine.</p>

<p>So, who was right?</p>

<p>By 2011, Netflix had almost 24 million customers. And Blockbuster? It declared bankruptcy the year before.</p>

<p>Blockbuster's mistake? To follow a principle that is taught in every fundamental course in finance and economics. That is, in evaluating alternative investments, we should ignore sunk and fixed costs, and instead base decisions on the marginal costs and revenues that each alternative entails. But it's a dangerous way of thinking. Almost always, such analysis shows that the marginal costs are lower, and marginal profits are higher, than the full cost.</p>

<p>This doctrine biases companies to leverage what they have put in place to succeed in the past, instead of guiding them to create the capabilities they'll need in the future. If we knew the future would be exactly the same as the past, that approach would be fine. But if the future's different—and it almost always is—then it's the wrong thing to do. As Blockbuster learned the hard way, we end up paying for the <em>full</em> cost of our decisions, not the marginal costs, whether we like it or not.</p>

<h3>You End Up Paying The Full Price Anyway</h3>

<p>Case studies such as this one helped me resolve a paradox that has appeared repeatedly in my attempts to help established companies that are confronted by disruptive entrants—as was the case with Blockbuster. Once their executives understood the peril that the disruptive attackers posed, I would say, "Okay. Now the problem is that your sales force is not going to be able to sell these disruptive products. They need to be sold to different customers, for different purposes. You need to create a different sales force." Inevitably they would respond, "Clay, you have no idea how much it costs to create a new sales force. We need to leverage our existing sales team."</p>

<p>The language of the disruptive attackers was completely different: "It's time to create the sales force." Hence, the paradox: Why is it that the big, established companies that have so much capital find these initiatives to be so costly? And why do the small entrants with much less capital find them to be straightforward?</p>

<p>The answer lies in their approach to marginal versus full costs. Every time an executive in an established company needs to make an investment decision, there are two alternatives on the menu. The first is the full cost of making something completely new. The second is to leverage what already exists.</p>

<p>Almost always, the marginal-cost argument overwhelms the full-cost. When there is competition, and this thinking causes established companies to continue to use what they already have in place, they pay far more than the full cost—because the company loses its competitiveness. As Henry Ford once put it, "If you need a machine and don't buy it, then you will ultimately find that you have paid for it and don't have it." Thinking on a marginal basis can be very, very dangerous.</p>

<h3>An Unending Stream Of Extenuating Circumstances</h3>

<p>This marginal-cost argument applies the same way in choosing right and wrong: it addresses a question I discuss with my students: how to live a life of integrity—and stay out of jail. The marginal cost of doing something "just this once" always seems to be negligible, but the full cost will typically be <em>much</em> higher. Yet unconsciously, we will naturally employ the marginal-cost doctrine in our personal lives. A voice in our head says, "Look, I know that as a general rule, most people shouldn't do this. But in this particular extenuating circumstance, just this once, it's okay." And the voice in our head seems to be right; the price of doing something wrong "just this once" usually appears alluringly low. It suckers you in, and you don't see where that path is ultimately headed or the full cost that the choice entails.</p>

<blockquote>“The marginal cost of doing something 'just this once' always seems to be negligible, but the full cost will typically be much higher.”</blockquote>

<p>Recent years have offered plenty of examples of people who were extremely well-respected by their colleagues and peers falling from grace because they made this mistake. Nick Leeson, the twenty-six-year-old trader who famously brought down British merchant bank Barings in 1995 after racking up $1.3 billion in trading losses before being detected, suffered exactly this fate and talks about how marginal thinking led him down an inconceivable path. In hindsight, it all started with one small step: a relatively small error. But he didn't want to admit to it. Instead, he covered it up by hiding the loss in a little-scrutinized trading account. It led him deeper and deeper down a path of deception.</p>

<p>He lied to cover lies; he forged documents, misled auditors, and made false statements to try to hide his mounting losses. Eventually, he arrived at his moment of reckoning. He was arrested at the airport in Germany, having fled his home in Singapore. As Barings realized the extent of Leeson's debt, it was forced to declare bankruptcy. The bank was sold to ING for just 1 pound. Twelve hundred employees lost their jobs, some of them his friends. And Leeson was sentenced to six and a half years in a Singaporean prison.</p>

<p>How could hiding one mistake from his bosses end up leading to the undoing of a 233-year-old merchant bank, a conviction and imprisonment for fraud, and ultimately the failure of his marriage? It's almost impossible to see where Leeson would end up from the vantage point of where he started—but that's the danger of marginal thinking.</p>

<p>As soon as he took that first step, there was no longer a boundary where it suddenly made sense to turn around. The next step is always a small one, and given what you've already done, why stop now? Leeson described the feeling of walking down this dark road in an interview with the BBC: "[I] wanted to shout from the rooftops … this is what the situation is, there are massive losses, I want it to stop. But for some reason you're unable to do it."</p>

<h3>100 Percent of the Time Is Easier Than 98 Percent of the Time</h3>

<p>Many of us have convinced ourselves that we are able to break our own personal rules "just this once." In our minds, we can justify these small choices. None of those things, when they first happen, feels like a life-changing decision. The marginal costs are almost always low. But each of those decisions can roll up into a much bigger picture, turning you into the kind of person you never wanted to be. </p>

<p>I came to understand the potential damage of "just this once" in my own life when I was in England, playing on my university's varsity basketball team. It was a fantastic experience; I became close friends with everyone on the team. We killed ourselves all season, and our hard work paid off-we made it all the way to the finals of the big tournament. But then I learned that the championship game was scheduled to be played on a Sunday. This was a problem. At age sixteen, I had made a personal commitment to God that I would never play ball on Sunday because it is our Sabbath.</p>

<p>So I went to the coach before the tournament finals and explained my situation. He was incredulous. "I don't know what you believe," he said to me, "but I believe that God will understand." Every one of the guys on the team came to me and said, "You've got to play. Can't you break the rule, just this one time?"</p>

<p>It was a difficult decision to make. The team would suffer without me. The guys on the team were my best friends. We'd been dreaming about this all year. I'm a deeply religious man, so I went away to pray about what I should do. As I knelt to pray, I got a very clear feeling that I needed to keep my commitment. So I told the coach that I wasn't able to play in the championship game. </p>

<p>In so many ways, that was a small decision—involving one of several thousand Sundays in my life. In theory, surely I could have crossed over the line just that one time and then not done it again. But looking back on it, I realize that resisting the temptation of "in this one extenuating circumstance, just this once, it's okay" has proved to be one of the most important decisions of my life. Why? Because life is just one unending stream of extenuating circumstances. Had I crossed the line that one time, I would have done it over and over and over in the years that followed.</p>

<p>And it turned out that my teammates didn't need me. They won the game anyway.</p>

<p>If you give in to "just this once," based on a marginal-cost analysis, you'll regret where you end up. That's the lesson I learned: it's easier to hold to your principles 100 percent of the time than it is to hold to them 98 percent of the time. The boundary—your personal moral line—is powerful because you don't cross it; if you have justified doing it once, there's nothing to stop you doing it again.</p>

<p>Decide what you stand for. And then stand for it all the time.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 81
- 0
cache/2022/450dce1f614eba220a97b035cea5dfe5/index.md View File

@@ -0,0 +1,81 @@
title: Clayton Christensen’s “How Will You Measure Your Life?”
url: https://hbswk.hbs.edu/item/7007.html
hash_url: 450dce1f614eba220a97b035cea5dfe5

<h3>The Trap Of Marginal Thinking</h3>

<p><a href="http://amzn.to/KuvAww"><img alt="How Will You Measure Your Life?" src="/PublishingImages/measure.jpg"></a>In the late 1990s, Blockbuster dominated the movie rental industry in the United States. It had stores all over the country, a significant size advantage, and what appeared to be a stranglehold on the market. Blockbuster had made huge investments in its inventory for all its stores. But, obviously, it didn't make money from movies sitting on the shelves; it was only when a customer rented a movie that Blockbuster made anything. It therefore needed to get the customer to watch the movie quickly, and then return it quickly, so that the clerk could rent the same DVD to different customers again and again. It wasn't long before Blockbuster realized that people didn't like returning movies quickly, so it increased late fees so much that analysts estimated that 70 percent of Blockbuster's profits were from these fees.</p>

<p>Set against this backdrop, a little upstart called Netflix emerged in the 1990s with a novel idea: rather than make people go to the video store, why don't we mail DVDs to them? Netflix's business model made profit in just the opposite way to Blockbuster's. Netflix customers paid a monthly fee-and the company made money when customers didn't watch the DVDs that they had ordered. As long as the DVDs sat unwatched at customers' homes, Netflix did not have to pay return postage-or send out the next batch of movies that the customer had already paid the monthly fee to get.</p>

<blockquote>“As Blockbuster learned the hard way, we end up paying for the <em>full</em> cost of our decisions, not the marginal costs, whether we like it or not.”</blockquote>

<p>It was a bold move: Netflix was the quintessential David going up against the Goliath of the movie rental industry. Blockbuster had billions of dollars in assets, tens of thousands of employees, and 100 percent brand recognition. If Blockbuster decided it wanted to go after this nascent market, it would have the resources to make life very difficult for the little start-up.</p>

<p>But it didn't.</p>

<p>By 2002, the upstart was showing signs of potential. It had $150 million in revenues and a 36 percent profit margin. Blockbuster investors were starting to get nervous—there was clearly something to what Netflix was doing. Many pressured the incumbent to look more closely at the market. "Obviously, we pay attention to any way people are getting home entertainment. We always look at all those things," is how a Blockbuster's responded in a 2002 press release. "We have not seen a business model that is financially viable in the long term in this arena. Online rental services are 'serving a niche market.' "</p>

<p>Netflix, on the other hand, thought this market was fantastic. It didn't need to compare it to an existing and profitable business: its baseline was no profit and no business at all. This "niche" market seemed just fine.</p>

<p>So, who was right?</p>

<p>By 2011, Netflix had almost 24 million customers. And Blockbuster? It declared bankruptcy the year before.</p>

<p>Blockbuster's mistake? To follow a principle that is taught in every fundamental course in finance and economics. That is, in evaluating alternative investments, we should ignore sunk and fixed costs, and instead base decisions on the marginal costs and revenues that each alternative entails. But it's a dangerous way of thinking. Almost always, such analysis shows that the marginal costs are lower, and marginal profits are higher, than the full cost.</p>

<p>This doctrine biases companies to leverage what they have put in place to succeed in the past, instead of guiding them to create the capabilities they'll need in the future. If we knew the future would be exactly the same as the past, that approach would be fine. But if the future's different—and it almost always is—then it's the wrong thing to do. As Blockbuster learned the hard way, we end up paying for the <em>full</em> cost of our decisions, not the marginal costs, whether we like it or not.</p>

<h3>You End Up Paying The Full Price Anyway</h3>

<p>Case studies such as this one helped me resolve a paradox that has appeared repeatedly in my attempts to help established companies that are confronted by disruptive entrants—as was the case with Blockbuster. Once their executives understood the peril that the disruptive attackers posed, I would say, "Okay. Now the problem is that your sales force is not going to be able to sell these disruptive products. They need to be sold to different customers, for different purposes. You need to create a different sales force." Inevitably they would respond, "Clay, you have no idea how much it costs to create a new sales force. We need to leverage our existing sales team."</p>

<p>The language of the disruptive attackers was completely different: "It's time to create the sales force." Hence, the paradox: Why is it that the big, established companies that have so much capital find these initiatives to be so costly? And why do the small entrants with much less capital find them to be straightforward?</p>

<p>The answer lies in their approach to marginal versus full costs. Every time an executive in an established company needs to make an investment decision, there are two alternatives on the menu. The first is the full cost of making something completely new. The second is to leverage what already exists.</p>

<p>Almost always, the marginal-cost argument overwhelms the full-cost. When there is competition, and this thinking causes established companies to continue to use what they already have in place, they pay far more than the full cost—because the company loses its competitiveness. As Henry Ford once put it, "If you need a machine and don't buy it, then you will ultimately find that you have paid for it and don't have it." Thinking on a marginal basis can be very, very dangerous.</p>

<h3>An Unending Stream Of Extenuating Circumstances</h3>

<p>This marginal-cost argument applies the same way in choosing right and wrong: it addresses a question I discuss with my students: how to live a life of integrity—and stay out of jail. The marginal cost of doing something "just this once" always seems to be negligible, but the full cost will typically be <em>much</em> higher. Yet unconsciously, we will naturally employ the marginal-cost doctrine in our personal lives. A voice in our head says, "Look, I know that as a general rule, most people shouldn't do this. But in this particular extenuating circumstance, just this once, it's okay." And the voice in our head seems to be right; the price of doing something wrong "just this once" usually appears alluringly low. It suckers you in, and you don't see where that path is ultimately headed or the full cost that the choice entails.</p>

<blockquote>“The marginal cost of doing something 'just this once' always seems to be negligible, but the full cost will typically be much higher.”</blockquote>

<p>Recent years have offered plenty of examples of people who were extremely well-respected by their colleagues and peers falling from grace because they made this mistake. Nick Leeson, the twenty-six-year-old trader who famously brought down British merchant bank Barings in 1995 after racking up $1.3 billion in trading losses before being detected, suffered exactly this fate and talks about how marginal thinking led him down an inconceivable path. In hindsight, it all started with one small step: a relatively small error. But he didn't want to admit to it. Instead, he covered it up by hiding the loss in a little-scrutinized trading account. It led him deeper and deeper down a path of deception.</p>

<p>He lied to cover lies; he forged documents, misled auditors, and made false statements to try to hide his mounting losses. Eventually, he arrived at his moment of reckoning. He was arrested at the airport in Germany, having fled his home in Singapore. As Barings realized the extent of Leeson's debt, it was forced to declare bankruptcy. The bank was sold to ING for just 1 pound. Twelve hundred employees lost their jobs, some of them his friends. And Leeson was sentenced to six and a half years in a Singaporean prison.</p>

<p>How could hiding one mistake from his bosses end up leading to the undoing of a 233-year-old merchant bank, a conviction and imprisonment for fraud, and ultimately the failure of his marriage? It's almost impossible to see where Leeson would end up from the vantage point of where he started—but that's the danger of marginal thinking.</p>

<p>As soon as he took that first step, there was no longer a boundary where it suddenly made sense to turn around. The next step is always a small one, and given what you've already done, why stop now? Leeson described the feeling of walking down this dark road in an interview with the BBC: "[I] wanted to shout from the rooftops … this is what the situation is, there are massive losses, I want it to stop. But for some reason you're unable to do it."</p>


<h3>100 Percent of the Time Is Easier Than 98 Percent of the Time</h3>

<p>Many of us have convinced ourselves that we are able to break our own personal rules "just this once." In our minds, we can justify these small choices. None of those things, when they first happen, feels like a life-changing decision. The marginal costs are almost always low. But each of those decisions can roll up into a much bigger picture, turning you into the kind of person you never wanted to be. </p>

<p>I came to understand the potential damage of "just this once" in my own life when I was in England, playing on my university's varsity basketball team. It was a fantastic experience; I became close friends with everyone on the team. We killed ourselves all season, and our hard work paid off-we made it all the way to the finals of the big tournament. But then I learned that the championship game was scheduled to be played on a Sunday. This was a problem. At age sixteen, I had made a personal commitment to God that I would never play ball on Sunday because it is our Sabbath.</p>

<p>So I went to the coach before the tournament finals and explained my situation. He was incredulous. "I don't know what you believe," he said to me, "but I believe that God will understand." Every one of the guys on the team came to me and said, "You've got to play. Can't you break the rule, just this one time?"</p>

<p>It was a difficult decision to make. The team would suffer without me. The guys on the team were my best friends. We'd been dreaming about this all year. I'm a deeply religious man, so I went away to pray about what I should do. As I knelt to pray, I got a very clear feeling that I needed to keep my commitment. So I told the coach that I wasn't able to play in the championship game. </p>

<p>In so many ways, that was a small decision—involving one of several thousand Sundays in my life. In theory, surely I could have crossed over the line just that one time and then not done it again. But looking back on it, I realize that resisting the temptation of "in this one extenuating circumstance, just this once, it's okay" has proved to be one of the most important decisions of my life. Why? Because life is just one unending stream of extenuating circumstances. Had I crossed the line that one time, I would have done it over and over and over in the years that followed.</p>

<p>And it turned out that my teammates didn't need me. They won the game anyway.</p>

<p>If you give in to "just this once," based on a marginal-cost analysis, you'll regret where you end up. That's the lesson I learned: it's easier to hold to your principles 100 percent of the time than it is to hold to them 98 percent of the time. The boundary—your personal moral line—is powerful because you don't cross it; if you have justified doing it once, there's nothing to stop you doing it again.</p>

<p>Decide what you stand for. And then stand for it all the time.</p>

+ 200
- 0
cache/2022/8981770b1b5be8044fd201739e67c60d/index.html View File

@@ -0,0 +1,200 @@
<!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` element
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>Trust (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://adactio.com/journal/19021">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>Trust</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://adactio.com/journal/19021" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>I’ve noticed a strange mindset amongst front-end/full-stack developers. At least it seems strange to me. But maybe I’m the one with the strange mindset and everyone else knows something I don’t.</p>

<p>It’s to do with trust and suspicion.</p>

<p>I’ve made no secret of the fact that I’m suspicious of <a href="https://adactio.com/articles/18676">third-party code</a> and dependencies in general. Every dependency you add to a project is one more potential single point of failure. You have to trust that the strangers who wrote that code knew what they were doing. I’m still somewhat flabbergasted that developers regularly add dependencies—via npm or yarn or whatever—that then pull in <em>even more dependencies</em>, all while assuming good faith and competence on the part of every person involved.</p>

<p>It’s a touching expression of faith in your fellow humans, but I’m not keen on the idea of faith-based development.</p>

<p>I’m much more trusting of native browser features—HTML elements, CSS features, and JavaScript APIs. They’re not always perfect, but a <em>lot</em> of thought goes into their development. By the time they land in browsers, a whole lot of smart people have kicked the tyres and considered many different angles. As a bonus, I don’t need to install them. Even better, end users don’t need to install them.</p>

<p>And yet, the mindset I’ve noticed is that many developers are <em>suspicious</em> of browser features but <em>trusting</em> of third-party libraries.</p>

<p>When I <a href="https://abookapart.com/products/going-offline">write</a> and <a href="https://www.youtube.com/watch?v=RVdW-P_oAJ0&amp;list=PLgaHsrPMLcFBD8kHNmgeBstA3zOxY_x-j&amp;index=7">talk</a> about using <a href="https://adactio.com/journal/tags/serviceworkers">service workers</a>, I often come across scepticism from developers about writing the service worker code. “Is there a library I can use?” they ask. “Well, yes” I reply, “but then you’ve got to understand the library, and the time it takes you to do that could be spent understanding the native code.” So even though a library might not offer any new functionality—just a different idion—many developers are more likely to trust the third-party library than they are to trust the underlying code that the third-party library is abstracting!</p>

<p>Developers are more likely to trust, say, Bootstrap than they are to trust CSS grid or custom properties. Developers are more likely to trust React than they are to trust web components.</p>

<p>On the one hand, I get it. Bootstrap and React are very popular. That popularity speaks volumes. If lots of people use a technology, it must be a safe bet, right?</p>

<p>But if we’re talking about popularity, every single browser today ships with support for features like grid, custom properties, service workers and web components. No third-party framework can even come close to that install base.</p>

<p>And the fact that these technologies have shipped in stable browsers means they’re vetted. They’ve been through a rigourous testing phase. They’ve effectively got a seal of approval from each individual browser maker. To me, that seems like a much bigger signal of trustworthiness than the popularity of a third-party library or framework.</p>

<p>So I’m kind of confused by this prevalent mindset of trusting third-party code more than built-in browser features.</p>

<p>Is it because of the job market? When recruiters are looking for developers, their laundry list is usually third-party technologies: React, Vue, Bootstrap, etc. It’s rare to find a job ad that lists native browser technologies: flexbox, grid, service workers, web components.</p>

<p>I would love it if someone could explain why they avoid native browser features but use third-party code.</p>

<p>Until then, I shall remain perplexed.</p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 33
- 0
cache/2022/8981770b1b5be8044fd201739e67c60d/index.md View File

@@ -0,0 +1,33 @@
title: Trust
url: https://adactio.com/journal/19021
hash_url: 8981770b1b5be8044fd201739e67c60d

<p>I’ve noticed a strange mindset amongst front-end/full-stack developers. At least it seems strange to me. But maybe I’m the one with the strange mindset and everyone else knows something I don’t.</p>

<p>It’s to do with trust and suspicion.</p>

<p>I’ve made no secret of the fact that I’m suspicious of <a href="https://adactio.com/articles/18676">third-party code</a> and dependencies in general. Every dependency you add to a project is one more potential single point of failure. You have to trust that the strangers who wrote that code knew what they were doing. I’m still somewhat flabbergasted that developers regularly add dependencies—via npm or yarn or whatever—that then pull in <em>even more dependencies</em>, all while assuming good faith and competence on the part of every person involved.</p>

<p>It’s a touching expression of faith in your fellow humans, but I’m not keen on the idea of faith-based development.</p>

<p>I’m much more trusting of native browser features—HTML elements, CSS features, and JavaScript APIs. They’re not always perfect, but a <em>lot</em> of thought goes into their development. By the time they land in browsers, a whole lot of smart people have kicked the tyres and considered many different angles. As a bonus, I don’t need to install them. Even better, end users don’t need to install them.</p>

<p>And yet, the mindset I’ve noticed is that many developers are <em>suspicious</em> of browser features but <em>trusting</em> of third-party libraries.</p>

<p>When I <a href="https://abookapart.com/products/going-offline">write</a> and <a href="https://www.youtube.com/watch?v=RVdW-P_oAJ0&amp;list=PLgaHsrPMLcFBD8kHNmgeBstA3zOxY_x-j&amp;index=7">talk</a> about using <a href="https://adactio.com/journal/tags/serviceworkers">service workers</a>, I often come across scepticism from developers about writing the service worker code. “Is there a library I can use?” they ask. “Well, yes” I reply, “but then you’ve got to understand the library, and the time it takes you to do that could be spent understanding the native code.” So even though a library might not offer any new functionality—just a different idion—many developers are more likely to trust the third-party library than they are to trust the underlying code that the third-party library is abstracting!</p>

<p>Developers are more likely to trust, say, Bootstrap than they are to trust CSS grid or custom properties. Developers are more likely to trust React than they are to trust web components.</p>

<p>On the one hand, I get it. Bootstrap and React are very popular. That popularity speaks volumes. If lots of people use a technology, it must be a safe bet, right?</p>

<p>But if we’re talking about popularity, every single browser today ships with support for features like grid, custom properties, service workers and web components. No third-party framework can even come close to that install base.</p>

<p>And the fact that these technologies have shipped in stable browsers means they’re vetted. They’ve been through a rigourous testing phase. They’ve effectively got a seal of approval from each individual browser maker. To me, that seems like a much bigger signal of trustworthiness than the popularity of a third-party library or framework.</p>

<p>So I’m kind of confused by this prevalent mindset of trusting third-party code more than built-in browser features.</p>

<p>Is it because of the job market? When recruiters are looking for developers, their laundry list is usually third-party technologies: React, Vue, Bootstrap, etc. It’s rare to find a job ad that lists native browser technologies: flexbox, grid, service workers, web components.</p>

<p>I would love it if someone could explain why they avoid native browser features but use third-party code.</p>

<p>Until then, I shall remain perplexed.</p>

+ 237
- 0
cache/2022/ab2739b2622b6a977d73ca7871c64a01/index.html View File

@@ -0,0 +1,237 @@
<!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` element
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>La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
function toggleTheme(themeName) {
document.documentElement.classList.toggle(
'forced-dark',
themeName === 'dark'
)
document.documentElement.classList.toggle(
'forced-light',
themeName === 'light'
)
}
const selectedTheme = localStorage.getItem('theme')
if (selectedTheme !== 'undefined') {
toggleTheme(selectedTheme)
}
</script>

<meta name="robots" content="noindex, nofollow">
<meta content="origin-when-cross-origin" name="referrer">
<!-- Canonical URL for SEO purposes -->
<link rel="canonical" href="https://numerique.canada.ca/2022/04/21/la-masculinit%C3%A9-positive-ou-toxique-comment-les-hommes-peuvent-transformer-la-culture-organisationnelle/">

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
<h1>La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle</h1>
</header>
<nav>
<p class="center">
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="https://numerique.canada.ca/2022/04/21/la-masculinit%C3%A9-positive-ou-toxique-comment-les-hommes-peuvent-transformer-la-culture-organisationnelle/" title="Lien vers le contenu original">Source originale</a>
</p>
</nav>
<hr>
<p>Autrefois, lorsque je visitais mon pays natal du Liban, mon grand-père me disait toujours « fiston, un homme bon c’est quelqu’un qui se trouve une épouse respectable, a des enfants et fournit tout le nécessaire à sa famille ». Mon père, à son tour, m’a répété les mêmes paroles à moi et à mes frères. Mes amis proches les ont aussi entendues. Ces paroles jettent les bases d’une dynamique où les hommes ont le pouvoir et le contrôle. C’est une dynamique qui peut parfois provoquer chez les hommes un sentiment de supériorité, donnant lieu au phénomène de mâle alpha qui ressent le besoin d’exercer sa domination, tant à la maison qu’au travail.</p>

<p>Étant donné cette pression que ressentent les hommes d’occuper ce rôle d’« alpha », je n’ai pas été surpris d’apprendre que cette définition de la masculinité nuisait à bien des milieux de travail; dans certains domaines plus que d’autres.</p>

<p>Comme je travaille dans le domaine de la technologie, à titre de gestionnaire d’équipes d’ingénieurs, je suis bien au courant du manque de femmes dans le secteur. Selon certaines études <a href="https://nomadis.co/fr/presence-des-femmes-en-ti-comment-cheminer-vers-une-representation-equitable">la participation des femmes en TI se limiterait à seulement 20 %, dans le meilleur des cas</a>. La présence démesurée d’hommes fait du domaine un milieu potentiellement dangereux pour les femmes. J’ai moi-même été témoin des pires comportements envers les femmes dans mes équipes, notamment : faire des références sexuelles ou sexistes dans les discussions ou séances de clavardage, croire que tous les hommes en TI souhaitent joindre une « fraternité », parler d’une voix forte, s’attendre à ce que les femmes prennent des notes ou s’occupent du calendrier, ou tout simplement ignorer les contributions de femmes en matière de codage ou de conception. J’ai même vu des femmes quitter des réunions sans rien dire parce qu’elles se sentaient en danger. À l’époque, j’en ignorais la cause et je ne savais pas trop quoi faire, jusqu’à ce qu’on me parle de la notion de « masculinité toxique ».</p>

<h2 id="qu-est-ce-que-la-masculinité-toxique">Qu’est-ce que la masculinité « toxique »?</h2>

<p>En bref, la masculinité toxique c’est la pression que peuvent ressentir les hommes d’agir de façon dominante et nuisible. On observe la masculinité toxique en œuvre au travail lorsqu’un homme interrompt ou parle pour couvrir la voix de quelqu’un, adopte une attitude inflexible et voit le milieu de travail comme un champ de bataille.</p>

<p><a href="https://www.sciencedirect.com/science/article/pii/S0022440519300901?via%3Dihub">D’après certaines recherches</a>, les hommes qui se perçoivent comme étant plus masculins sont moins portés à faire preuve de « comportements coopératifs ». Cela signifie qu’ils n’interviendront probablement pas lorsqu’ils sont témoins d’intimidation ou de violence physique. Leur intervention pourrait être perçue comme une faiblesse. C’est un problème grave. <strong>Pour sécuriser nos milieux de travail et les rendre plus équitables, il nous faut des gens prêts à aider et non des témoins complices par leur passivité.</strong></p>

<h2 id="pourquoi-la-masculinité-positive">Pourquoi la masculinité « positive »?</h2>

<p>Au Service numérique canadien (SNC), nous nous engageons à améliorer notre capacité d’aider. En prenant conscience des répercussions de la masculinité toxique sur les carrières et le bien-être de nos collègues, nous étions déterminés à favoriser un milieu de travail plus sain dans le domaine des TI.</p>

<p>En novembre dernier, nous avons invité <a href="https://ca.linkedin.com/in/jeffperera">Jeff Perera</a> pour nous parler du genre, de la masculinité, du renforcement de l’empathie et des façons dont les hommes peuvent aider à combattre la violence axée sur le genre. Plutôt que de mettre l’accent sur la toxicité ou la négativité, Jeff a surtout parlé de collaboration et de réapprentissage. Mais le plus important selon lui, c’est d’appliquer ces leçons par la responsabilisation, la prise de conscience et l’établissement d’une communauté. Nous pourrons ainsi passer des mots à l’action. Voilà la définition de la masculinité positive.</p>

<h2 id="se-poser-des-questions-malaisantes">Se poser des questions malaisantes</h2>

<p>Pendant la présentation de Jeff, nous nous sommes rassemblés en petits groupes pour répondre aux six questions suivantes :</p>

<ol>
<li>Dans quel genre de milieu de travail pensons-nous travailler?</li>
<li>Que diraient les femmes et les personnes de diverses identités de genre de leur expérience avec nous?</li>
<li>Quel genre d’expérience souhaitons-nous offrir à ces gens?</li>
<li>Qu’est-ce qui nous aide à percevoir nos angles morts? Comment pouvons-nous éliminer ces angles morts pour connaître l’expérience des autres?</li>
<li>Qu’est-ce qui empêche les hommes de se prononcer ou d’aider sur des questions d’équité de genre dans le milieu de travail ou dans leur quotidien?</li>
<li>Quel est le coût (réel ou perçu) d’être un allié aux femmes et aux personnes de diverses identités de genre?</li>
</ol>

<p>Confrontés à ces questions, nous nous sommes rapidement rendu compte que les réponses nous mettaient mal à l’aise et qu’il y avait beaucoup de travail à faire. Il fallait examiner les comportements toxiques et systémiques en œuvre à l’extérieur de l’organisme pour comprendre leurs effets sur le SNC. Nous avons conclu qu’un réapprentissage organisationnel s’imposait. <strong>Ce ne sera ni rapide ni facile, mais il faut commencer quelque part.</strong></p>

<p>Inspirés par la présentation, certains participants de notre organisme ont mis sur pied un groupe de travail qui cherche à définir ce que représente la masculinité « consciencieuse » au travail, tout en apprenant à réaliser leur plein potentiel et à mettre la leçon en action au SNC.</p>

<h2 id="mettre-sur-pied-un-groupe-de-travail-sur-la-masculinité-positive">Mettre sur pied un groupe de travail sur la masculinité positive</h2>

<p>Nous n’étions pas à court de points à aborder. Comme première étape, nous avons mené une rétrospective de la présentation afin d’examiner nos réponses aux six questions et d’établir des mesures pour y remédier.</p>

<p>Lors de cette réunion, nous avons établi certains principes directeurs :</p>

<ul>
<li>Consulter d’autres communautés marginalisées pour valider notre approche</li>
<li>Il ne suffit pas de parler, il faut agir.</li>
<li>Mesurer les progrès</li>
<li>Réfléchir continuellement aux réalités et besoins évolutifs de l’organisme</li>
</ul>

<p>Et dans le but de mettre nos paroles à l’action, nous avons dressé une liste d’initiatives que nous prévoyons mettre en œuvre dès que possible :</p>

<ul>
<li>Déterminer les activités administratives à l’échelle de l’organisme qui doivent être réparties de façon égale</li>
<li>Chaque participant du groupe de travail doit demander une rétroaction à 360 degrés d’une collègue du genre opposé.</li>
<li>Organiser des activités d’apprentissage pour sensibiliser les hommes à l’expérience des femmes</li>
<li>Mettre sur pied un groupe de lecture pour l’échange de livre et de ressources</li>
<li>Établir un système de jumelage avec des gens à l’extérieur du groupe de travail sur la masculinité positive afin de s’encourager mutuellement à en apprendre plus sur le sujet</li>
<li>Inviter des conférenciers à parler à tout le SNC sur les sujets du féminisme et de la masculinité</li>
<li>Créer un guide sur les problèmes relevés par nos collègues qui offre des possibilités de solutions</li>
<li>Appuyer des programmes de mentorat comme <a href="https://girlswhocode.com/">Girls Who Code</a> et <a href="https://www.blackkidscode.com/">Investing in Black girls can change the world</a>.</li>
</ul>

<h2 id="apprendre-et-réapprendre-ensemble">Apprendre et réapprendre ensemble</h2>

<p>Chaque organisme est unique, mais je crois que nous partageons tous certaines tendances communes. Cela signifie que nous pouvons apprendre et réapprendre les uns des autres, et travailler ensemble pour établir des milieux de travail plus sains pour les gens de toute identité de genre. Nous en sommes au début de ce projet et nous ferons sans doute des erreurs en cours de route.</p>

<p><a href="mailto:cds-snc@tbs-sct.gc.ca">Nous aimerions communiquer avec vous</a> pour vous en dire plus sur notre cheminement, ou pour connaître le vôtre. <strong>Continuons la conversation et soyons la « leçon en action ».</strong></p>
</article>


<hr>

<footer>
<p>
<a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
</svg> Accueil</a> •
<a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
</svg> Suivre</a> •
<a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
</svg> Pro</a> •
<a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
</svg> Email</a> •
<abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
</svg> Légal</abbr>
</p>
<template id="theme-selector">
<form>
<fieldset>
<legend><svg class="icon icon-brightness-contrast">
<use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
</svg> 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 src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
function loadThemeForm(templateName) {
const themeSelectorTemplate = document.querySelector(templateName)
const form = themeSelectorTemplate.content.firstElementChild
themeSelectorTemplate.replaceWith(form)

form.addEventListener('change', (e) => {
const chosenColorScheme = e.target.value
localStorage.setItem('theme', chosenColorScheme)
toggleTheme(chosenColorScheme)
})

const selectedTheme = localStorage.getItem('theme')
if (selectedTheme && selectedTheme !== 'undefined') {
form.querySelector(`[value="${selectedTheme}"]`).checked = true
}
}

const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
window.addEventListener('load', () => {
let hasDarkRules = false
for (const styleSheet of Array.from(document.styleSheets)) {
let mediaRules = []
for (const cssRule of styleSheet.cssRules) {
if (cssRule.type !== CSSRule.MEDIA_RULE) {
continue
}
// WARNING: Safari does not have/supports `conditionText`.
if (cssRule.conditionText) {
if (cssRule.conditionText !== prefersColorSchemeDark) {
continue
}
} else {
if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
continue
}
}
mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
}

// WARNING: do not try to insert a Rule to a styleSheet you are
// currently iterating on, otherwise the browser will be stuck
// in a infinite loop…
for (const mediaRule of mediaRules) {
styleSheet.insertRule(mediaRule.cssText)
hasDarkRules = true
}
}
if (hasDarkRules) {
loadThemeForm('#theme-selector')
}
})
</script>
</body>
</html>

+ 70
- 0
cache/2022/ab2739b2622b6a977d73ca7871c64a01/index.md View File

@@ -0,0 +1,70 @@
title: La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle
url: https://numerique.canada.ca/2022/04/21/la-masculinit%C3%A9-positive-ou-toxique-comment-les-hommes-peuvent-transformer-la-culture-organisationnelle/
hash_url: ab2739b2622b6a977d73ca7871c64a01

<p>Autrefois, lorsque je visitais mon pays natal du Liban, mon grand-père me disait toujours « fiston, un homme bon c’est quelqu’un qui se trouve une épouse respectable, a des enfants et fournit tout le nécessaire à sa famille ». Mon père, à son tour, m’a répété les mêmes paroles à moi et à mes frères. Mes amis proches les ont aussi entendues. Ces paroles jettent les bases d’une dynamique où les hommes ont le pouvoir et le contrôle. C’est une dynamique qui peut parfois provoquer chez les hommes un sentiment de supériorité, donnant lieu au phénomène de mâle alpha qui ressent le besoin d’exercer sa domination, tant à la maison qu’au travail.</p>

<p>Étant donné cette pression que ressentent les hommes d’occuper ce rôle d’« alpha », je n’ai pas été surpris d’apprendre que cette définition de la masculinité nuisait à bien des milieux de travail; dans certains domaines plus que d’autres.</p>

<p>Comme je travaille dans le domaine de la technologie, à titre de gestionnaire d’équipes d’ingénieurs, je suis bien au courant du manque de femmes dans le secteur. Selon certaines études <a href="https://nomadis.co/fr/presence-des-femmes-en-ti-comment-cheminer-vers-une-representation-equitable">la participation des femmes en TI se limiterait à seulement 20 %, dans le meilleur des cas</a>. La présence démesurée d’hommes fait du domaine un milieu potentiellement dangereux pour les femmes. J’ai moi-même été témoin des pires comportements envers les femmes dans mes équipes, notamment : faire des références sexuelles ou sexistes dans les discussions ou séances de clavardage, croire que tous les hommes en TI souhaitent joindre une « fraternité », parler d’une voix forte, s’attendre à ce que les femmes prennent des notes ou s’occupent du calendrier, ou tout simplement ignorer les contributions de femmes en matière de codage ou de conception. J’ai même vu des femmes quitter des réunions sans rien dire parce qu’elles se sentaient en danger. À l’époque, j’en ignorais la cause et je ne savais pas trop quoi faire, jusqu’à ce qu’on me parle de la notion de « masculinité toxique ».</p>

<h2 id="qu-est-ce-que-la-masculinité-toxique">Qu’est-ce que la masculinité « toxique »?</h2>

<p>En bref, la masculinité toxique c’est la pression que peuvent ressentir les hommes d’agir de façon dominante et nuisible. On observe la masculinité toxique en œuvre au travail lorsqu’un homme interrompt ou parle pour couvrir la voix de quelqu’un, adopte une attitude inflexible et voit le milieu de travail comme un champ de bataille.</p>

<p><a href="https://www.sciencedirect.com/science/article/pii/S0022440519300901?via%3Dihub">D’après certaines recherches</a>, les hommes qui se perçoivent comme étant plus masculins sont moins portés à faire preuve de « comportements coopératifs ». Cela signifie qu’ils n’interviendront probablement pas lorsqu’ils sont témoins d’intimidation ou de violence physique. Leur intervention pourrait être perçue comme une faiblesse. C’est un problème grave. <strong>Pour sécuriser nos milieux de travail et les rendre plus équitables, il nous faut des gens prêts à aider et non des témoins complices par leur passivité.</strong></p>

<h2 id="pourquoi-la-masculinité-positive">Pourquoi la masculinité « positive »?</h2>

<p>Au Service numérique canadien (SNC), nous nous engageons à améliorer notre capacité d’aider. En prenant conscience des répercussions de la masculinité toxique sur les carrières et le bien-être de nos collègues, nous étions déterminés à favoriser un milieu de travail plus sain dans le domaine des TI.</p>

<p>En novembre dernier, nous avons invité <a href="https://ca.linkedin.com/in/jeffperera">Jeff Perera</a> pour nous parler du genre, de la masculinité, du renforcement de l’empathie et des façons dont les hommes peuvent aider à combattre la violence axée sur le genre. Plutôt que de mettre l’accent sur la toxicité ou la négativité, Jeff a surtout parlé de collaboration et de réapprentissage. Mais le plus important selon lui, c’est d’appliquer ces leçons par la responsabilisation, la prise de conscience et l’établissement d’une communauté. Nous pourrons ainsi passer des mots à l’action. Voilà la définition de la masculinité positive.</p>

<h2 id="se-poser-des-questions-malaisantes">Se poser des questions malaisantes</h2>

<p>Pendant la présentation de Jeff, nous nous sommes rassemblés en petits groupes pour répondre aux six questions suivantes :</p>

<ol>
<li>Dans quel genre de milieu de travail pensons-nous travailler?</li>
<li>Que diraient les femmes et les personnes de diverses identités de genre de leur expérience avec nous?</li>
<li>Quel genre d’expérience souhaitons-nous offrir à ces gens?</li>
<li>Qu’est-ce qui nous aide à percevoir nos angles morts? Comment pouvons-nous éliminer ces angles morts pour connaître l’expérience des autres?</li>
<li>Qu’est-ce qui empêche les hommes de se prononcer ou d’aider sur des questions d’équité de genre dans le milieu de travail ou dans leur quotidien?</li>
<li>Quel est le coût (réel ou perçu) d’être un allié aux femmes et aux personnes de diverses identités de genre?</li>
</ol>

<p>Confrontés à ces questions, nous nous sommes rapidement rendu compte que les réponses nous mettaient mal à l’aise et qu’il y avait beaucoup de travail à faire. Il fallait examiner les comportements toxiques et systémiques en œuvre à l’extérieur de l’organisme pour comprendre leurs effets sur le SNC. Nous avons conclu qu’un réapprentissage organisationnel s’imposait. <strong>Ce ne sera ni rapide ni facile, mais il faut commencer quelque part.</strong></p>

<p>Inspirés par la présentation, certains participants de notre organisme ont mis sur pied un groupe de travail qui cherche à définir ce que représente la masculinité « consciencieuse » au travail, tout en apprenant à réaliser leur plein potentiel et à mettre la leçon en action au SNC.</p>

<h2 id="mettre-sur-pied-un-groupe-de-travail-sur-la-masculinité-positive">Mettre sur pied un groupe de travail sur la masculinité positive</h2>

<p>Nous n’étions pas à court de points à aborder. Comme première étape, nous avons mené une rétrospective de la présentation afin d’examiner nos réponses aux six questions et d’établir des mesures pour y remédier.</p>

<p>Lors de cette réunion, nous avons établi certains principes directeurs :</p>

<ul>
<li>Consulter d’autres communautés marginalisées pour valider notre approche</li>
<li>Il ne suffit pas de parler, il faut agir.</li>
<li>Mesurer les progrès</li>
<li>Réfléchir continuellement aux réalités et besoins évolutifs de l’organisme</li>
</ul>

<p>Et dans le but de mettre nos paroles à l’action, nous avons dressé une liste d’initiatives que nous prévoyons mettre en œuvre dès que possible :</p>

<ul>
<li>Déterminer les activités administratives à l’échelle de l’organisme qui doivent être réparties de façon égale</li>
<li>Chaque participant du groupe de travail doit demander une rétroaction à 360 degrés d’une collègue du genre opposé.</li>
<li>Organiser des activités d’apprentissage pour sensibiliser les hommes à l’expérience des femmes</li>
<li>Mettre sur pied un groupe de lecture pour l’échange de livre et de ressources</li>
<li>Établir un système de jumelage avec des gens à l’extérieur du groupe de travail sur la masculinité positive afin de s’encourager mutuellement à en apprendre plus sur le sujet</li>
<li>Inviter des conférenciers à parler à tout le SNC sur les sujets du féminisme et de la masculinité</li>
<li>Créer un guide sur les problèmes relevés par nos collègues qui offre des possibilités de solutions</li>
<li>Appuyer des programmes de mentorat comme <a href="https://girlswhocode.com/">Girls Who Code</a> et <a href="https://www.blackkidscode.com/">Investing in Black girls can change the world</a>.</li>
</ul>

<h2 id="apprendre-et-réapprendre-ensemble">Apprendre et réapprendre ensemble</h2>

<p>Chaque organisme est unique, mais je crois que nous partageons tous certaines tendances communes. Cela signifie que nous pouvons apprendre et réapprendre les uns des autres, et travailler ensemble pour établir des milieux de travail plus sains pour les gens de toute identité de genre. Nous en sommes au début de ce projet et nous ferons sans doute des erreurs en cours de route.</p>

<p><a href="mailto:cds-snc@tbs-sct.gc.ca">Nous aimerions communiquer avec vous</a> pour vous en dire plus sur notre cheminement, ou pour connaître le vôtre. <strong>Continuons la conversation et soyons la « leçon en action ».</strong></p>

+ 14
- 0
cache/2022/index.html View File

@@ -115,6 +115,8 @@
<li><a href="/david/cache/2022/622620656409b4f687cab890288a0a01/" title="Accès à l’article dans le cache local : Who can be the Netflix of ghost kitchens?">Who can be the Netflix of ghost kitchens?</a> (<a href="https://interconnected.org/home/2022/01/24/meme_meals" title="Accès à l’article original distant : Who can be the Netflix of ghost kitchens?">original</a>)</li>
<li><a href="/david/cache/2022/ab2739b2622b6a977d73ca7871c64a01/" title="Accès à l’article dans le cache local : La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle">La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle</a> (<a href="https://numerique.canada.ca/2022/04/21/la-masculinit%C3%A9-positive-ou-toxique-comment-les-hommes-peuvent-transformer-la-culture-organisationnelle/" title="Accès à l’article original distant : La masculinité positive ou toxique : Comment les hommes peuvent transformer la culture organisationnelle">original</a>)</li>
<li><a href="/david/cache/2022/ed7544349c2bef8c7f1bfff3ab286fd6/" title="Accès à l’article dans le cache local : It is important for free software to use free software infrastructure">It is important for free software to use free software infrastructure</a> (<a href="https://drewdevault.com/2022/03/29/free-software-free-infrastructure.html" title="Accès à l’article original distant : It is important for free software to use free software infrastructure">original</a>)</li>
<li><a href="/david/cache/2022/987e2e450e3e88d0d6d18ec6e6a44b95/" title="Accès à l’article dans le cache local : Habiter sans posséder, tel est l’antidote">Habiter sans posséder, tel est l’antidote</a> (<a href="https://revoirleslucioles.org/habiter-sans-posseder-tel-est-lantidote/" title="Accès à l’article original distant : Habiter sans posséder, tel est l’antidote">original</a>)</li>
@@ -127,12 +129,16 @@
<li><a href="/david/cache/2022/c8c3f9a0a328a21db8c91c7a288a8b4f/" title="Accès à l’article dans le cache local : Performances et ressenti - Carnet de notes">Performances et ressenti - Carnet de notes</a> (<a href="https://n.survol.fr/n/performances-et-ressenti" title="Accès à l’article original distant : Performances et ressenti - Carnet de notes">original</a>)</li>
<li><a href="/david/cache/2022/3e7688b2d34d13bf51290fc906d77b3d/" title="Accès à l’article dans le cache local : How I fell in love with low-js">How I fell in love with low-js</a> (<a href="https://edofic.com/posts/2022-01-28-low-js/" title="Accès à l’article original distant : How I fell in love with low-js">original</a>)</li>
<li><a href="/david/cache/2022/9ad9f5ea367dbd74e4aeeb8471747247/" title="Accès à l’article dans le cache local : Make it boring - jlwagner.net">Make it boring - jlwagner.net</a> (<a href="https://jlwagner.net/blog/make-it-boring/" title="Accès à l’article original distant : Make it boring - jlwagner.net">original</a>)</li>
<li><a href="/david/cache/2022/c4af28e3e148b7fd23ccb06e3a3f0358/" title="Accès à l’article dans le cache local : Nos morts ne vous sont pas dues">Nos morts ne vous sont pas dues</a> (<a href="https://www.jefklak.org/nos-morts-ne-vous-sont-pas-dues/" title="Accès à l’article original distant : Nos morts ne vous sont pas dues">original</a>)</li>
<li><a href="/david/cache/2022/77e068f6681c5054ef9871e8102f3236/" title="Accès à l’article dans le cache local : Winnie Lim » out of control">Winnie Lim » out of control</a> (<a href="https://winnielim.org/journal/out-of-control/" title="Accès à l’article original distant : Winnie Lim » out of control">original</a>)</li>
<li><a href="/david/cache/2022/8981770b1b5be8044fd201739e67c60d/" title="Accès à l’article dans le cache local : Trust">Trust</a> (<a href="https://adactio.com/journal/19021" title="Accès à l’article original distant : Trust">original</a>)</li>
<li><a href="/david/cache/2022/a26f276782ba59d80e70fb4371713309/" title="Accès à l’article dans le cache local : The Optional Chaining Operator, “Modern” Browsers, and My Mom">The Optional Chaining Operator, “Modern” Browsers, and My Mom</a> (<a href="https://blog.jim-nielsen.com/2022/a-web-for-all/" title="Accès à l’article original distant : The Optional Chaining Operator, “Modern” Browsers, and My Mom">original</a>)</li>
<li><a href="/david/cache/2022/85dbf217709930ce1e6208ca4fd5bf60/" title="Accès à l’article dans le cache local : Ode aux petites maisons : C’est la taille qui compte !">Ode aux petites maisons : C’est la taille qui compte !</a> (<a href="https://david.mercereau.info/ode-aux-petites-maisons-cest-la-taille-qui-compte/" title="Accès à l’article original distant : Ode aux petites maisons : C’est la taille qui compte !">original</a>)</li>
@@ -217,6 +223,8 @@
<li><a href="/david/cache/2022/9f2c19796746e6888e309647a49508bb/" title="Accès à l’article dans le cache local : How maps in the media make us more negative about migrants">How maps in the media make us more negative about migrants</a> (<a href="https://thecorrespondent.com/664/how-maps-in-the-media-make-us-more-negative-about-migrants" title="Accès à l’article original distant : How maps in the media make us more negative about migrants">original</a>)</li>
<li><a href="/david/cache/2022/0888271d03779999af533b991a8b76eb/" title="Accès à l’article dans le cache local : It’s Very Unlikely Anyone Will Read This in 200 Years">It’s Very Unlikely Anyone Will Read This in 200 Years</a> (<a href="https://www.gawker.com/culture/nobody-will-read-this-essay-in-200-years" title="Accès à l’article original distant : It’s Very Unlikely Anyone Will Read This in 200 Years">original</a>)</li>
<li><a href="/david/cache/2022/f761b745c18906fa98046badd51231c2/" title="Accès à l’article dans le cache local : (Why) Some HTML is "optional"">(Why) Some HTML is "optional"</a> (<a href="https://remysharp.com/2019/09/12/why-some-html-is-optional" title="Accès à l’article original distant : (Why) Some HTML is "optional"">original</a>)</li>
<li><a href="/david/cache/2022/5fc3445b27f0ee637d66035734c6bea6/" title="Accès à l’article dans le cache local : Aperçu #02 - quaternum.net">Aperçu #02 - quaternum.net</a> (<a href="https://www.quaternum.net/2022/01/15/apercu-02/" title="Accès à l’article original distant : Aperçu #02 - quaternum.net">original</a>)</li>
@@ -255,6 +263,8 @@
<li><a href="/david/cache/2022/985e33814839a9c113720a5142caec0e/" title="Accès à l’article dans le cache local : Long Distance Thinking">Long Distance Thinking</a> (<a href="https://simonsarris.substack.com/p/long-distance-thinking" title="Accès à l’article original distant : Long Distance Thinking">original</a>)</li>
<li><a href="/david/cache/2022/450dce1f614eba220a97b035cea5dfe5/" title="Accès à l’article dans le cache local : Clayton Christensen’s “How Will You Measure Your Life?”">Clayton Christensen’s “How Will You Measure Your Life?”</a> (<a href="https://hbswk.hbs.edu/item/7007.html" title="Accès à l’article original distant : Clayton Christensen’s “How Will You Measure Your Life?”">original</a>)</li>
<li><a href="/david/cache/2022/a4f881156c5d4841f7362f94b51d10b7/" title="Accès à l’article dans le cache local : $7 Tent Heater Provides Comfort On A Budget">$7 Tent Heater Provides Comfort On A Budget</a> (<a href="https://hackaday.com/2022/01/06/7-tent-heater-provides-comfort-on-a-budget/" title="Accès à l’article original distant : $7 Tent Heater Provides Comfort On A Budget">original</a>)</li>
<li><a href="/david/cache/2022/7d378db0707cc63aa2d466ada68fe690/" title="Accès à l’article dans le cache local : 20 Things I’ve Learned in my 20 Years as a Software Engineer">20 Things I’ve Learned in my 20 Years as a Software Engineer</a> (<a href="https://www.simplethread.com/20-things-ive-learned-in-my-20-years-as-a-software-engineer/" title="Accès à l’article original distant : 20 Things I’ve Learned in my 20 Years as a Software Engineer">original</a>)</li>
@@ -283,8 +293,12 @@
<li><a href="/david/cache/2022/eafb714078643eddfcc2d7de9982bd3b/" title="Accès à l’article dans le cache local : Understanding UUIDs, ULIDs and String Representations">Understanding UUIDs, ULIDs and String Representations</a> (<a href="https://sudhir.io/uuids-ulids" title="Accès à l’article original distant : Understanding UUIDs, ULIDs and String Representations">original</a>)</li>
<li><a href="/david/cache/2022/0c60682eeb1edfaf2c6c13cd30cce60d/" title="Accès à l’article dans le cache local : How I create fancy PDF-documents in Markdown">How I create fancy PDF-documents in Markdown</a> (<a href="https://hund.tty1.se/2021/07/14/how-i-create-fancy-pdf-documents-in-markdown.html" title="Accès à l’article original distant : How I create fancy PDF-documents in Markdown">original</a>)</li>
<li><a href="/david/cache/2022/4d01ca34a54c4be19535df17fdf0c9d2/" title="Accès à l’article dans le cache local : Creating a Nice-Looking PDF with pandoc">Creating a Nice-Looking PDF with pandoc</a> (<a href="https://plaintextproject.online/articles/2022/04/06/pdf.html" title="Accès à l’article original distant : Creating a Nice-Looking PDF with pandoc">original</a>)</li>
<li><a href="/david/cache/2022/32cf150b3b75b308683c4246b54cdcf9/" title="Accès à l’article dans le cache local : Bjørn Karmann › Occlusion Grotesque">Bjørn Karmann › Occlusion Grotesque</a> (<a href="https://bjoernkarmann.dk/occlusion-grotesque" title="Accès à l’article original distant : Bjørn Karmann › Occlusion Grotesque">original</a>)</li>
<li><a href="/david/cache/2022/a8d13c7cf5bf88fa3af517183ad736c2/" title="Accès à l’article dans le cache local : ☕️ Journal : Des contradictions qui n'en sont pas">☕️ Journal : Des contradictions qui n'en sont pas</a> (<a href="https://thom4.net/2022/04/29/non-contradictions/" title="Accès à l’article original distant : ☕️ Journal : Des contradictions qui n'en sont pas">original</a>)</li>
<li><a href="/david/cache/2022/7f62798239c75130d19c030a4c695027/" title="Accès à l’article dans le cache local : Blogging and the heat death of the universe">Blogging and the heat death of the universe</a> (<a href="https://www.robinrendle.com/notes/blogging-and-the-heat-death-of-the-universe/" title="Accès à l’article original distant : Blogging and the heat death of the universe">original</a>)</li>

Write Preview
Loading…
Cancel
Save