davidbgk
/
larlet-fr-david

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Rédemption — David Larlet</title>
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f0f0ea">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script type="text/javascript">
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

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

<article>
<h1>Rédemption</h1>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/03/13/" title="Publication précédente : Technique">←</a> •
    <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
     • <a rel="next" href="/david/2020/03/27/" title="Publication suivante : Exutoire">→</a>
  </p>
</nav>
<hr>

<p><em>Apprendre à vivre avec ses remords et ses regrets.</em></p>
<h2 id="capitalisme">Capitalisme <a href="#capitalisme" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
<blockquote>
<p>L’impossibilité de fonctionnement du capitalisme quand les corps qu’il soumet ne sont plus fonctionnels (au sens capitaliste) révèle le darwinisme social sur lequel il s’appuie en permanence. Rappeler ces éléments semble extrêmement futile, alors que cela permet d’empiéter sur les récits hégémoniques qui gomment consciemment certains enjeux politiques fondamentaux de l’épidémie. Cette réintroduction de la dimension humaine dans la production de biens et services éclaire ce qu’il faut entraver si l’on se soucie vraiment de la « planète » : <mark>les intérêts du capitalisme fossile et de l’habiter colonial de la Terre qu’il perpétue.</mark></p>
<p><cite><em><a href="https://perspectives-printanieres.info/index.php/2020/03/10/lepidemie-na-pas-de-vertus/">L’épidémie n’a pas de vertus</a></em> (<a href="/david/cache/2020/58117f5865002118d6769cb0a7aa9786/">cache</a>)</cite></p>
</blockquote>
<p>Une prise de recul sensée sur les réelles origines du (corona)virus qui va au-delà de la <a href="https://www.monde-diplomatique.fr/2020/03/SHAH/61547">dimension écologique seule</a> mais s’inscrit dans un projet politique de pouvoir et d’inégalités sociales.</p>
<p>Tout est quand même lié : plus de végétariens, moins de (mono)cultures, moins de déforestation, moins de pollution de l’eau, plus de distance entre les virus et les humains.</p>
<h2 id="souvenir">Souvenir <a href="#souvenir" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
<blockquote>
<p>Les loleurs ont passé des années à pratiquer ce qui était des non-évènements pour eux mais qui étaient autant d’évènements pour celles et ceux qui les recevaient. <mark>Ils les ont oubliés. Nous nous en souvenons.</mark></p>
<p><strong>C’est là toute la différence entre les oppresseurs et les opprimés : les oppresseurs aimeraient se souvenir mais ils continuent d’oublier, les opprimés aimeraient oublier mais ils continuent de se souvenir.</strong></p>
<p><cite><em><a href="https://medium.com/@florence.porcel/laffaire-de-la-ligue-du-lol-ou-la-fabrique-de-l-oubli-df4ad3f5f2b5">L’affaire de la Ligue du LOL, ou la fabrique de l’oubli</a></em> (<a href="/david/cache/2020/2c6ccd57b9f0f1c39706013d026de507/">cache</a>)</cite></p>
</blockquote>
<p>J’avais déjà lu le (long !) <a href="https://medium.com/@vincentglad_67276/ligue-du-lol-un-an-apr%C3%A8s-aeee7784cf4d">article de Vincent Glad</a> (<a href="/david/cache/2020/ac3266635585d387973da1c64b546990/">cache</a>) qui fait une rétrospective de ce qu’il a vécu au cours de l’année passée. Au-delà du fait que ces deux publications sont sur Medium qui produit du <abbr title="HyperText Markup Language">HTML</abbr> de plus en plus dégueulasse (ce que je trouve triste <em>et</em> embarrassant lorsqu’on évoque des publications qui ont été plus ou moins pérennes), je trouve cela intéressant à plus d’un titre d’avoir les deux points de vue.</p>
<p>J’en retiens deux choses :</p>
<ol>
<li>l’oppression est forcément une interprétation et à ce titre ne peut se réduire qu’en établissant un échange entre l’oppreseur·se et l’oppressé·e</li>
<li>notre cerveau essaye de nous protéger de ce que l’on a subi et/ou fait subir dans notre vie en altérant notre souvenance de ces moments là</li>
</ol>
<p>Si l’on combine ces deux axiomes, j’ai probablement eu des comportements — dont je n’ai pas forcément souvenir ou conscience — qui ont pu être oppressifs. Si vous vous en êtes senti·e victime, je vous invite à engager le dialogue.</p>
<h2 id="techbro">Techbro <a href="#techbro" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
<blockquote lang="en">
<p>The prodigal tech bro doesn’t so much take an off-ramp from the relatively high status and well-paid job he left when the scales fell from his eyes, as zoom up an on-ramp into a new sector that accepts the reputational currency he has accumulated. <mark>He’s not joining the resistance.</mark> He’s launching a new kind of start-up using his industry contacts for seed-funding in return for some reputation-laundering.</p>
<p><cite><em><a href="https://conversationalist.org/2020/03/05/the-prodigal-techbro/">The Prodigal Techbro</a></em> (<a href="/david/cache/2020/4bda6c744ffb55c0fc4f4bf1f740b4e3/">cache</a>)</cite></p>
</blockquote>
<p>Cet article est d’une grande justesse. Je n’oublie pas que j’ai participé à l’immonde en travaillant — brièvement — pour la haute finance et — moins brièvement — pour le jeu en ligne. Je n’ai de leçons à donner à personne en terme d’éthique, surtout dans un domaine qui laisse une relative liberté quant au choix des missions choisies.</p>
<p>Le chemin était sans doute nécessaire pour en arriver là où j’en suis mais ce n’est en aucun cas une justification pour avoir fait ces choix pour le moins douteux précédemment.</p>
<h2 id="panic">Panic <a href="#panic" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
<blockquote lang="en">
<p>But ultimately, I think I’m telling this story so I can close this panic episode with integrity and honesty. I think I want to tell myself that it’s okay to be weak and imperfect. That it was okay for me to be defensive. That it was okay for me to be angry.</p>
<p>And it’s okay to let the anger go now. Nobody out there is trying to harm me. Nobody out there is trying to force me to admit to mistakes I didn’t make. Nobody out there is trying to make me “wrong”.</p>
<p><cite><em><a href="https://zellwk.com/blog/overcoming-panic-towards-accessibility/">Overcoming my panic towards accessibility</a></em> (<a href="/david/cache/2020/85e0f968f6ac8dfdd76c7a76df6ef088/">cache</a>)</cite></p>
</blockquote>
<p>Je crois pouvoir comprendre ce sentiment, au moins à mon échelle. Par exemple, lorsque je publie un <a href="/david/2020/02/21/#surlignage">bout de CSS pour le surlignage</a> et que je me rends compte ensuite qu’avec <a href="https://www.trysmudford.com/blog/currying-in-css/">un peu de curry</a> (<a href="/david/cache/2020/77db8cc6de2906f31a4d37d91a47a3aa/">cache</a>) je pourrais arriver à une situation plus élégante (?) utilisant des variables qui ressemblerait à :</p>
<pre><code>mark {
 background: LightGoldenRodYellow;
}
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
:root,
[lang=en] {
  --mark-start: &quot; [highlight start] &quot;;
  --mark-end: &quot; [highlight end] &quot;;
}
[lang=fr] {
  --mark-start: &quot; [début du surlignage] &quot;;
  --mark-end: &quot; [fin du surlignage] &quot;;
}
mark::before {
  content: var(--mark-start);
}
mark::after {
  content: var(--mark-end);
}
</code></pre>
<p>Et là je réalise après quelques échanges sur ##openweb (merci <a href="https://ricaud.me">Anthony</a> !) que je ne fais pas la distinction de langue entre les citations (souvent en anglais) et le texte (souvent en français). Mince.</p>
<p>En voulant améliorer l’accessibilité de mes productions, cela a peut être eu l’effet inverse… en tout cas cela m’aura au moins permis d’en prendre conscience. <em>Don’t panic.</em></p>
<h2 id="renonciation">Renonciation <a href="#renonciation" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
<blockquote>
<p>Nous disons : « Pas à pas, j’arrête le murmure du ruisseau. » En vous promenant le long du ruisseau, vous entendrez l’eau couler. Le son est continu, mais vous devez pouvoir l’arrêter si vous voulez l’arrêter. <mark>C’est cela la renonciation.</mark> Différentes pensées l’une après l’autre se succèdent dans votre esprit, mais si vous voulez arrêter votre pensée, vous le pouvez. Quand vous serez capable d’arrêter le murmure du ruisseau, vous apprécierez la sensation de votre travail. Mais tant que vous avez quelque idée fixe, ou que vous êtes pris par une certaine routine de comportement, vous ne pouvez apprécier le vrai sens des choses.</p>
<p><cite><em><a href="/david/2020/12/21/#esprit-zen-esprit-neuf">Esprit zen, esprit neuf</a></em>, Shunryu Suzuki</cite></p>
</blockquote>
<p>Comment faire pour arrêter une rivière en crue ?</p>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2020/03/13/" title="Publication précédente : Technique">←</a> •
    <a href="/david/2020/" title="Liste des publications récentes">↑</a>
     • <a rel="next" href="/david/2020/03/27/" title="Publication suivante : Exutoire">→</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil">🏠</a> •
    <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
    <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend>Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
<script type="text/javascript">
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

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

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

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

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