davidbgk
/
larlet-fr-david-cache

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

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://nota-bene.org/Je-suis-un-vieux-con">

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

<article>
  <header>
    <h1>Je suis un vieux con</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="https://nota-bene.org/Je-suis-un-vieux-con" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>Souvent, entre vieux de la vieille d’Openweb, on se dit que c’était mieux avant. Et puis, à l’ombre de nos marronniers, sur notre petit banc, il y a toujours quelqu’un pour dire que non, c’est normal, c’est la nostalgie, ça, les gars et les filles. Le monde change et c’est la vie.</p>

<p>Alors voilà, je suis sans doute un vieux con, mais moi j’aime bien arriver sur une page web, un truc qui est construit avec du <abbr title="Hypertext Markup Language">HTML</abbr>, et lire la page, dans laquelle se trouve un contenu qui est construit avec du <abbr title="Hypertext Markup Language">HTML</abbr>, brique fondamentale du Web.</p>

<p>Mais, a priori, Google s’en fout comme de son premier million de dollars, des vieux cons comme moi qui espèrent naïvement lire une page web en cliquant sur une URL. On peut crever la gueule ouverte, on n’a qu’à continuer à faire notre petit web perso tout pourri avec nos petits CMS tout pourris, hein. On dérange personne, et en particulier ceux qui se goinfrent de fric avec les données personnelles de leurs visiteurs.</p>

<h2>Une page vide</h2>

<p>Voilà ce qui m’agace, cet après-midi. Je vais visiter un article du blog Chromium<span class="spip_note_ref"> [<a href="#nb1" class="spip_note" rel="appendix" title="Chromium, c’est un navigateur, qui sert de base à pas mal de monde dans notre (...)" id="nh1">1</a>]</span>, et là j’ai une page vide.</p>

<figure>
<span class="spip_document_622 spip_documents">
<img src="local/cache-vignettes/L1200xH654/chromium_blog_with_css-c3bd4.png?1602005568" alt=""/></span>
<figcaption>La page du blog Chromium, toute vide malgré ma bonne volonté de vouloir la lire.</figcaption>
</figure>

<p>Ah flûte, me dis-je, voilà que ma vile paranoïa qui m’a conditionné à toujours installer sur mon Firefox <a href="https://addons.mozilla.org/fr/firefox/addon/ublock-origin/" class="spip_out" rel="external">uBlock Origin</a> et <a href="https://addons.mozilla.org/fr/firefox/addon/privacy-badger17/" class="spip_out" rel="external">Privacy Badger</a> me joue des tours. Ciel, me dis-je encore, ce blog doit être codé avec les pieds et attendre que tel ou tel script soit chargé, au lieu de faire du beau développement asynchrone comme savent le faire les bons développeurs web que j’ai la chance de compter parmi mes copains.</p>

<p>Je lance donc une session privée de Firefox, j’y colle l’URL, je désactive uBlock Origin et Privacy Badger. Tu vois comme j’ai envie de lire ton article, hein.</p>

<p>Et là toujours rien.</p>

<p>Ah oui, j’ai aussi les « <a href="https://support.mozilla.org/fr/kb/protection-renforcee-contre-pistage-firefox-ordinateur" class="spip_out" rel="external">Protections renforcées contre le pistage</a> ». <strong>C’est une fonction native de Firefox, il va falloir commencer à y penser quand tu fais tes tests.</strong> Alors je les désactive aussi, après avoir regardé quels domaines tiers ont été sollicités.</p>

<figure>
<span class="spip_document_621 spip_documents">
<img src="local/cache-vignettes/L561xH409/chromium_blog_third_parties_blocked-1c6bb.png?1602005568" alt=""/></span>
<figcaption>Liste des domaines tiers bloqués automatiquement par Firefox, et merci à lui.</figcaption>
</figure>

<p>Bon, je désactive aussi la protection renforcée. Comme vous le voyez ci-dessus, le domaine que j’essaie d’afficher est <i>blog.chromium.org</i> et il n’est pas bloqué par Firefox (sans quoi je ne verrais pas la page du tout).</p>

<p>Alors oui, ah là, le contenu s’affiche. Chic alors.</p>

<p>Je décide de revenir à ma configuration de base, et d’afficher le contenu sans <abbr title="Cascading Stylesheets">CSS</abbr> : parfois il y a juste un script tout pourri pour frimer avec un petit indicateur de chargement, le temps qu’on agrège des trucs et des machins, mais quand on désactive les <abbr title="Cascading Stylesheets">CSS</abbr> on voit que le contenu est déjà là.</p>

<p>Ici non, rien. Buvons le calice du Web moderne jusqu’à la lie.</p>

<figure>
<span class="spip_document_623 spip_documents">
<img src="local/cache-vignettes/L208xH1200/chromium_blog_with_no_css-5d6ca.png?1602005568" alt=""/></span>
<figcaption>Aperçu en petit de la page sans aucun style activé. Même en écarquillant les yeux, aucun contenu, juste des items de navigation.</figcaption>
</figure>

<p>Bref, en résumé :</p>

<ul class="spip"><li> ce site ne peut pas s’afficher si on bloque les services tiers ;</li><li> ce site <strong>ne comporte même pas de contenu</strong> si on bloque les services tiers ;</li><li> ce site affiche quand même le logo Google parce que bon.</li></ul>

<h2>Gymnastique du Web moderne</h2>

<p>Donc si, de nos jours, on veut lire un article sur ce blog, il faut soit accepter de se balader à poil et d’offrir ses données privées à plein de gens (voir ci-dessus), soit passer par une gymnastique amusante, par exemple :</p>

<ol class="spip"><li> ouvrir l’article,</li><li> constater que oulàlà c’est tout vide,</li><li> ajouter l’article à <a href="https://www.wallabag.it/fr" class="spip_out" rel="external">wallabag</a> (ou autre lecteur hors ligne peut-être, je n’ai que celui-là à vous conseiller qui me comble d’aise),</li><li> lire l’article dans l’application wallabag.</li></ol>

<p>Dans wallabag j’en profite pour constater que la sémantique <abbr title="Hypertext Markup Language">HTML</abbr> de l’article est bien pauvre, mais bon, on s’en fout hein. La sémantique <abbr title="Hypertext Markup Language">HTML</abbr>, c’est comme l’accessibilité : on se demande bien qui en a besoin.</p>

<p>J’ai pris l’article du blog Chromium parce que c’est une fois de trop, mais si vous saviez le nombre de trucs aussi mal fichus que je vois tous les jours. Disons-le bien fort au cas où ce ne serait pas clair : <strong>une page de blog n’est pas une application Web qui demande une interaction forte.</strong></p>

<p>Alors ouais, je vais continuer à aller lire les petits sites pourris perso des copains, parce que eux, au moins, respectent leurs lecteurs et leurs lectrices.</p>
  </main>
</article>


<hr>

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

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

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

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

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