vor 1 Jahr · e9ef5f47dd
--- a/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/index.html
+++ b/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/index.html
@@ -0,0 +1,185 @@
 <!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>endroit de l’envers (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.la-grange.net/2023/03/15/envers">

 <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>endroit de l’envers</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.la-grange.net/2023/03/15/envers" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <figure>
  <img src="https://www.la-grange.net/2023/03/15/9223-fenetre.jpg" alt="Détail du verre d'une fenêtre avec une opacité, peut-être une photo derrière.">
  <figcaption>Sugamo, Japon, 15 mars 2023</figcaption>
 </figure>
 <blockquote>
 <p>Les jours sur lui passent sans luire ;<br>
 Sombre, il entend le monde obscur,<br>
 Et la vie invisible bruire<br>
 Comme un torrent derrière un mur !<br>
 — L'aveugle, Théophile Gautier</p>
 </blockquote>
 <p>Ce que nous voyons n'est pas ce que nous imaginons. Les histoires des fenêtres opaques sont des chemins oubliés que nous voulons parcourir pour y retrouver l'intimité d'un moment souvent inaccessible. Quel est le mystère de ce carré blanc posé sur le rebord intérieur de la fenêtre ? Est-ce la main potelée d'un vieil homme qui a posé la photo d'un enfant parti vivre dans un pays loin de la maison depuis trop longtemps ? Est-ce que l'évier se trouve dessous la photo ? Quand il laisse couler l'eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l'oubli n'efface les derniers sourires jusqu'à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d'un ancêtre dont les cendres sont peut-être encore sur le coin d'une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l'évasion d'une enfance heureuse ?</p>
 <hr>
 <p><a href="https://bookshop.org/p/books/make-ink-a-forager-s-guide-to-natural-inkmaking-jason-logan/10841496?ean=9781419732430">La possibilité de l'encre</a>. Un livre que je découvre grâce à ce <a href="https://www.thisiscolossal.com/2023/03/jason-logan-ink/">billet</a> et ce <a href="https://thecolour.substack.com/archive">magazine</a>.</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>
--- a/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/index.md
+++ b/cache/2023/19a9d6fbfc9b17021f013e71ffb45593/index.md
@@ -0,0 +1,18 @@
 title: endroit de l’envers
 url: https://www.la-grange.net/2023/03/15/envers
 hash_url: 19a9d6fbfc9b17021f013e71ffb45593

 <figure>
  <img src="https://www.la-grange.net/2023/03/15/9223-fenetre.jpg" alt="Détail du verre d'une fenêtre avec une opacité, peut-être une photo derrière.">
  <figcaption>Sugamo, Japon, 15 mars 2023</figcaption>
 </figure>
 <blockquote>
 <p>Les jours sur lui passent sans luire ;<br>
 Sombre, il entend le monde obscur,<br>
 Et la vie invisible bruire<br>
 Comme un torrent derrière un mur !<br>
 — L'aveugle, Théophile Gautier</p>
 </blockquote>
 <p>Ce que nous voyons n'est pas ce que nous imaginons. Les histoires des fenêtres opaques sont des chemins oubliés que nous voulons parcourir pour y retrouver l'intimité d'un moment souvent inaccessible. Quel est le mystère de ce carré blanc posé sur le rebord intérieur de la fenêtre ? Est-ce la main potelée d'un vieil homme qui a posé la photo d'un enfant parti vivre dans un pays loin de la maison depuis trop longtemps ? Est-ce que l'évier se trouve dessous la photo ? Quand il laisse couler l'eau dans la casserole pour préparer un café, il pense aux instants qui continuent de glisser entre ses doigts et dont il a peur que l'oubli n'efface les derniers sourires jusqu'à ne plus reconnaître la personne sur la photo. Où bien est-ce la photo d'un ancêtre dont les cendres sont peut-être encore sur le coin d'une étagère dans la maison et dont on se dit que les minutes longues en nettoyant la vaisselle permettent la sérénité possible à l'évasion d'une enfance heureuse ?</p>
 <hr>
 <p><a href="https://bookshop.org/p/books/make-ink-a-forager-s-guide-to-natural-inkmaking-jason-logan/10841496?ean=9781419732430">La possibilité de l'encre</a>. Un livre que je découvre grâce à ce <a href="https://www.thisiscolossal.com/2023/03/jason-logan-ink/">billet</a> et ce <a href="https://thecolour.substack.com/archive">magazine</a>.</p>
--- a/cache/2023/2782723c95c98a22087e9954b07a8fba/index.html
+++ b/cache/2023/2782723c95c98a22087e9954b07a8fba/index.html
@@ -0,0 +1,293 @@
 <!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>The #ViewSource Affordance (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://htmx.org/essays/right-click-view-source/">

 <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>The #ViewSource Affordance</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://htmx.org/essays/right-click-view-source/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <blockquote>
 <p>Not for nothing, Hypercard presaged the web’s critical “#ViewSource” affordance, which allowed people to copy,
 modify, customize and improve on the things that they found delightful or useful.  This affordance was later adapted 
 by other human-centered projects like #Scratch, and is a powerful tonic against #enshittification.</p>
 <p>--<a rel="noopener" target="_blank" href="https://twitter.com/doctorow/status/1701934612686196872">Cory Doctorow @pluralistic@mamot.fr</a></p>
 </blockquote>
 <h2 id="open-culture-the-web"><a class="zola-anchor" href="#open-culture-the-web" aria-label="Anchor link for: open-culture-the-web">#</a>Open Culture &amp; The Web</h2>
 <p>When people talk about open source software, that conversation is often dominated by
 <a rel="noopener" target="_blank" href="https://www.gnu.org/philosophy/free-sw.html">the Free Software Foundation’s notion of free software</a>:</p>
 <blockquote>
 <p>“Free software” means software that respects users’ freedom and community. Roughly, it means that the users have the 
 freedom to run, copy, distribute, study, change and improve the software.“</p>
 </blockquote>
 <p>This definition of free software has been a useful one and, through advocating for it, the FSF has gifted the world a 
 lot of wonderful open source software.</p>
 <p>Web applications, however, have always been an uncomfortable fit for this definition of free.  This is mainly
 for technical reasons: web applications involve a web browser interacting with a web server that is, typically, running
 on a remote system.</p>
 <p>At a fundamental level, the REST-ful architecture of the web was built around <em>hypermedia representations</em> of remote
 resources:  browsers deal only with hypermedia representations provided by the server and, thus, have no visibility into
 the actual source of the code executing on the server side.</p>
 <p>Now, the web has certainly <em>leveraged</em> free and open source software in its growth: browsers are typically (at least mostly)
 open source, server software is often open source, and so on.  And there are, of course, open source web applications
 that users may run for things like forums and so forth.</p>
 <p>However, from the standpoint of typical web application users, web applications are not free in the FSF sense of that
 term: the users are unable to see and modify the source of the server code that is being executed as they interact with
 the application via the browser.</p>
 <h3 id="right-click-view-source-as-culture"><a class="zola-anchor" href="#right-click-view-source-as-culture" aria-label="Anchor link for: right-click-view-source-as-culture">#</a>Right-Click-View-Source As Culture</h3>
 <p>Despite the fact that the web has a somewhat uncomfortable relationship with the notion of free software, the early web 
 none-the-less had a radically open <em>developer culture</em>. </p>
 <p>In fact, in some important and practical ways, the early web had a <em>more</em> open developer culture than what was achieved 
 by the free software movement.</p>
 <p>The <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance available in browsers allowed people 
 to understand and “own”, at least in an informal way, the web in a way that even most FSF-conforming applications could 
 not: you had direct access to the “source”, or at least <em>part</em> of the source, of the application available from 
 <em>within</em> the application itself.</p>
 <p>You could copy-and-paste (or save) the “source” (HTML, JavaScript &amp; CSS) and start modifying it, without a complicated
 build tool chain or, indeed, without any tool chain at all.</p>
 <p>This radical openness of the web allowed many people, often not formally trained computer programmers, to learn how to 
 create web pages and applications in an ad hoc and informal way.</p>
 <p>In strict free software terms, this was, of course, a compromise: as a user of a web application, you had no visibility 
 into how a server was constructing a given hypermedia response.</p>
 <p>But you could see <em>what</em> the server was responding with: you could download and tweak it, poke and prod at it.  You could,
 if you were an advanced user, use browser tools to modify the application in place.</p>
 <p>And, most importantly, you could <em>learn from it</em>, even if you couldn’t see how the HTML was being produced.</p>
 <p>This radical openness of the client and network protocol, and the culture it produced, was a big part of the success
 of the early web.</p>
 <h2 id="digital-enclosure-vs-technical-enclosure"><a class="zola-anchor" href="#digital-enclosure-vs-technical-enclosure" aria-label="Anchor link for: digital-enclosure-vs-technical-enclosure">#</a>Digital Enclosure vs. Technical Enclosure</h2>
 <p>The <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Enclosure">Enclosure Movement</a> was a period in English history when what were 
 previously <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Commons">commons</a> were privatized.</p>
 <p>This was a traumatic event in English history, as evidenced by this poem by an 18th century anon:</p>
 <blockquote>
 <p>The law locks up the man or woman</p>
 <p>Who steals the goose from off the common,</p>
 <p>But lets the greater felon loose</p>
 <p>Who steals the common from the goose.</p>
 <p>–18th century anon</p>
 </blockquote>
 <p>In the last decade, the web has gone through a period of “Digital Enclosure”, where <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Closed_platform">“Walled Gardens”</a>,
 such as Facebook &amp; Twitter, have replaced the earlier, more open and more chaotic blogs and internet forums.</p>
 <h3 id="technical-enclosure"><a class="zola-anchor" href="#technical-enclosure" aria-label="Anchor link for: technical-enclosure">#</a>Technical Enclosure</h3>
 <p>Many (most?) web developers have decried this trend.</p>
 <p>However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own
 technical decisions and how those decisions can also contribute to the disappearance of web’s <em>culture</em> of openness.</p>
 <p>Inadvertently (for the most part) technical trends and decisions in web development in the last two decades have lead
 to what we term a “Technical Enclosure” of the web, a processes whereby technical decisions chip away at the #ViewSource
 affordance that Cory Doctrow discusses in the opening quote of this article, an affordance that existed as a commons
 for early web developers.</p>
 <p>To see a stark example of the decline of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance
 in web development and Technical Enclosure in action, we can look at what is perhaps the most popular web page on the 
 internet, <a rel="noopener" target="_blank" href="https://google.com">The Google Homepage</a>.</p>
 <p>Here is the nearly complete source of that page from the year 2000, taken from 
 <a rel="noopener" target="_blank" href="http://web.archive.org/web/20000229040250/http://www.google.com/">the wayback machine</a>:</p>
 <h3 id="google-in-2000"><a class="zola-anchor" href="#google-in-2000" aria-label="Anchor link for: google-in-2000">#</a>Google in 2000</h3>
 <p><img src="https://htmx.org/img/google-2000.png" alt="Google Source Code in 2000"></p>
 <p>In contrast, here is a random snapshot of roughly 1/100th of the current source code for the website:</p>
 <h3 id="google-in-2023"><a class="zola-anchor" href="#google-in-2023" aria-label="Anchor link for: google-in-2023">#</a>Google in 2023</h3>
 <p><img src="https://htmx.org/img/google-2023.png" alt="Google Source Code in 2023"></p>
 <p>These two screenshots dramatically demonstrate the decline in the effectiveness of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance over time:
 yes, you can still right-click the page and view its underlying source, but making sense of the latter code would be
 challenging for even the most seasoned web developer.</p>
 <p>A new web developer would have almost no chance of deriving any value from doing so.</p>
 <p>Now, this is not to criticize the google engineer’s technical decisions that lead to this situation <em>as technical 
 decisions</em>: obviously, despite similar appearances, the google homepage of 2023 is far more sophisticated than the one 
 available in 2000.</p>
 <p>The 2023 google homepage is going to be a lot more complicated than the 2000 page and, given the zeitgeist, it is going to 
 involve a lot of JavaScript.</p>
 <p>However, this is to point out that something deeply important about the early web has been lost, almost certainly 
 unintentionally, along the way: the ability to view the source of the page, make sense of what it is doing and, most 
 importantly, to learn from it.</p>
 <h2 id="right-click-view-source-extremism"><a class="zola-anchor" href="#right-click-view-source-extremism" aria-label="Anchor link for: right-click-view-source-extremism">#</a>Right-Click-View-Source Extremism</h2>
 <p>Both <a href="https://htmx.org/">htmx</a> and <a rel="noopener" target="_blank" href="https://hyperscript.org">hyperscript</a> adhere to the <a href="https://htmx.org/essays/locality-of-behaviour/">Locality of Behavior</a>
 design principle.</p>
 <p>This principle states that:</p>
 <blockquote>
 <p>The behaviour of a unit of code should be as obvious as possible by looking only at that unit of code</p>
 </blockquote>
 <p>The main technical advantage of Locality of Behavior is ease of maintenance, as outlined in the essay above.</p>
 <p>However, there is an important cultural benefit to the Locality of Behavior of htmx and hyperscript as well: <strong>it restores
 the power of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance on the web</strong>.</p>
 <p>Consider <a rel="noopener" target="_blank" href="https://arhamjain.com/hyperwordle/">Hyperwordle</a>, a hyperscript-based clone of the popular 
 <a rel="noopener" target="_blank" href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> game, now owned by the New York Times.</p>
 <p>You can visit Hyperwordle, right click and view the source of it, and you will be presented with some HTML and hyperscript,
 all of which is, with a bit of effort, understandable.</p>
 <p>The  <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance is effective in this case.</p>
 <p>Contrast this with the view-source experience of the Wordle implementation at the New York Times.</p>
 <p>Now, this is of course a bit unfair: the NYTimes version has a lot more functionality and is heavily optimized. Hyperwordle
 is a proof of concept and not being hammered by millions of users every day.</p>
 <p>Despite that qualification, Hyperwordle demonstrates a potential future for the web, a future where a culture of openness,
 of <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> politeness, is once again a touchstone of the
 culture of the web.</p>

 <p>Engineers who care about the open culture of the web should recognize that the threats to that culture come not only from
 Digital Enclosure by large, private companies of the most important pieces of the web.</p>
 <p>They should also recognize the risks of Technical Enclosure, and the <em>non-technical</em> value of the 
 <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance in perpetuating the open culture of
 web development.  They should start thinking about making this affordance a priority in their technical decisions.  As
 with all priorities, this may involve trading off against other technical and even functional priorities during 
 application development.</p>
 <p>But if we don’t stand up for <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a>, no one else will.</p>

 <p><img src="https://htmx.org/img/memes/viewsource.png" alt="Right Click View Source Guy"></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>
--- a/cache/2023/2782723c95c98a22087e9954b07a8fba/index.md
+++ b/cache/2023/2782723c95c98a22087e9954b07a8fba/index.md
@@ -0,0 +1,126 @@
 title: The #ViewSource Affordance
 url: https://htmx.org/essays/right-click-view-source/
 hash_url: 2782723c95c98a22087e9954b07a8fba

 <blockquote>
 <p>Not for nothing, Hypercard presaged the web’s critical “#ViewSource” affordance, which allowed people to copy,
 modify, customize and improve on the things that they found delightful or useful.  This affordance was later adapted 
 by other human-centered projects like #Scratch, and is a powerful tonic against #enshittification.</p>
 <p>--<a rel="noopener" target="_blank" href="https://twitter.com/doctorow/status/1701934612686196872">Cory Doctorow @pluralistic@mamot.fr</a></p>
 </blockquote>
 <h2 id="open-culture-the-web"><a class="zola-anchor" href="#open-culture-the-web" aria-label="Anchor link for: open-culture-the-web">#</a>Open Culture &amp; The Web</h2>
 <p>When people talk about open source software, that conversation is often dominated by
 <a rel="noopener" target="_blank" href="https://www.gnu.org/philosophy/free-sw.html">the Free Software Foundation’s notion of free software</a>:</p>
 <blockquote>
 <p>“Free software” means software that respects users’ freedom and community. Roughly, it means that the users have the 
 freedom to run, copy, distribute, study, change and improve the software.“</p>
 </blockquote>
 <p>This definition of free software has been a useful one and, through advocating for it, the FSF has gifted the world a 
 lot of wonderful open source software.</p>
 <p>Web applications, however, have always been an uncomfortable fit for this definition of free.  This is mainly
 for technical reasons: web applications involve a web browser interacting with a web server that is, typically, running
 on a remote system.</p>
 <p>At a fundamental level, the REST-ful architecture of the web was built around <em>hypermedia representations</em> of remote
 resources:  browsers deal only with hypermedia representations provided by the server and, thus, have no visibility into
 the actual source of the code executing on the server side.</p>
 <p>Now, the web has certainly <em>leveraged</em> free and open source software in its growth: browsers are typically (at least mostly)
 open source, server software is often open source, and so on.  And there are, of course, open source web applications
 that users may run for things like forums and so forth.</p>
 <p>However, from the standpoint of typical web application users, web applications are not free in the FSF sense of that
 term: the users are unable to see and modify the source of the server code that is being executed as they interact with
 the application via the browser.</p>
 <h3 id="right-click-view-source-as-culture"><a class="zola-anchor" href="#right-click-view-source-as-culture" aria-label="Anchor link for: right-click-view-source-as-culture">#</a>Right-Click-View-Source As Culture</h3>
 <p>Despite the fact that the web has a somewhat uncomfortable relationship with the notion of free software, the early web 
 none-the-less had a radically open <em>developer culture</em>. </p>
 <p>In fact, in some important and practical ways, the early web had a <em>more</em> open developer culture than what was achieved 
 by the free software movement.</p>
 <p>The <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance available in browsers allowed people 
 to understand and “own”, at least in an informal way, the web in a way that even most FSF-conforming applications could 
 not: you had direct access to the “source”, or at least <em>part</em> of the source, of the application available from 
 <em>within</em> the application itself.</p>
 <p>You could copy-and-paste (or save) the “source” (HTML, JavaScript &amp; CSS) and start modifying it, without a complicated
 build tool chain or, indeed, without any tool chain at all.</p>
 <p>This radical openness of the web allowed many people, often not formally trained computer programmers, to learn how to 
 create web pages and applications in an ad hoc and informal way.</p>
 <p>In strict free software terms, this was, of course, a compromise: as a user of a web application, you had no visibility 
 into how a server was constructing a given hypermedia response.</p>
 <p>But you could see <em>what</em> the server was responding with: you could download and tweak it, poke and prod at it.  You could,
 if you were an advanced user, use browser tools to modify the application in place.</p>
 <p>And, most importantly, you could <em>learn from it</em>, even if you couldn’t see how the HTML was being produced.</p>
 <p>This radical openness of the client and network protocol, and the culture it produced, was a big part of the success
 of the early web.</p>
 <h2 id="digital-enclosure-vs-technical-enclosure"><a class="zola-anchor" href="#digital-enclosure-vs-technical-enclosure" aria-label="Anchor link for: digital-enclosure-vs-technical-enclosure">#</a>Digital Enclosure vs. Technical Enclosure</h2>
 <p>The <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Enclosure">Enclosure Movement</a> was a period in English history when what were 
 previously <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Commons">commons</a> were privatized.</p>
 <p>This was a traumatic event in English history, as evidenced by this poem by an 18th century anon:</p>
 <blockquote>
 <p>The law locks up the man or woman</p>
 <p>Who steals the goose from off the common,</p>
 <p>But lets the greater felon loose</p>
 <p>Who steals the common from the goose.</p>
 <p>–18th century anon</p>
 </blockquote>
 <p>In the last decade, the web has gone through a period of “Digital Enclosure”, where <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/Closed_platform">“Walled Gardens”</a>,
 such as Facebook &amp; Twitter, have replaced the earlier, more open and more chaotic blogs and internet forums.</p>
 <h3 id="technical-enclosure"><a class="zola-anchor" href="#technical-enclosure" aria-label="Anchor link for: technical-enclosure">#</a>Technical Enclosure</h3>
 <p>Many (most?) web developers have decried this trend.</p>
 <p>However, despite recognizing the danger of an increasingly closed internet, many web developers don’t consider their own
 technical decisions and how those decisions can also contribute to the disappearance of web’s <em>culture</em> of openness.</p>
 <p>Inadvertently (for the most part) technical trends and decisions in web development in the last two decades have lead
 to what we term a “Technical Enclosure” of the web, a processes whereby technical decisions chip away at the #ViewSource
 affordance that Cory Doctrow discusses in the opening quote of this article, an affordance that existed as a commons
 for early web developers.</p>
 <p>To see a stark example of the decline of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance
 in web development and Technical Enclosure in action, we can look at what is perhaps the most popular web page on the 
 internet, <a rel="noopener" target="_blank" href="https://google.com">The Google Homepage</a>.</p>
 <p>Here is the nearly complete source of that page from the year 2000, taken from 
 <a rel="noopener" target="_blank" href="http://web.archive.org/web/20000229040250/http://www.google.com/">the wayback machine</a>:</p>
 <h3 id="google-in-2000"><a class="zola-anchor" href="#google-in-2000" aria-label="Anchor link for: google-in-2000">#</a>Google in 2000</h3>
 <img src="https://htmx.org/img/google-2000.png" alt="Google Source Code in 2000">
 <p>In contrast, here is a random snapshot of roughly 1/100th of the current source code for the website:</p>
 <h3 id="google-in-2023"><a class="zola-anchor" href="#google-in-2023" aria-label="Anchor link for: google-in-2023">#</a>Google in 2023</h3>
 <img src="https://htmx.org/img/google-2023.png" alt="Google Source Code in 2023">
 <p>These two screenshots dramatically demonstrate the decline in the effectiveness of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance over time:
 yes, you can still right-click the page and view its underlying source, but making sense of the latter code would be
 challenging for even the most seasoned web developer.</p>
 <p>A new web developer would have almost no chance of deriving any value from doing so.</p>
 <p>Now, this is not to criticize the google engineer’s technical decisions that lead to this situation <em>as technical 
 decisions</em>: obviously, despite similar appearances, the google homepage of 2023 is far more sophisticated than the one 
 available in 2000.</p>
 <p>The 2023 google homepage is going to be a lot more complicated than the 2000 page and, given the zeitgeist, it is going to 
 involve a lot of JavaScript.</p>
 <p>However, this is to point out that something deeply important about the early web has been lost, almost certainly 
 unintentionally, along the way: the ability to view the source of the page, make sense of what it is doing and, most 
 importantly, to learn from it.</p>
 <h2 id="right-click-view-source-extremism"><a class="zola-anchor" href="#right-click-view-source-extremism" aria-label="Anchor link for: right-click-view-source-extremism">#</a>Right-Click-View-Source Extremism</h2>
 <p>Both <a href="https://htmx.org/">htmx</a> and <a rel="noopener" target="_blank" href="https://hyperscript.org">hyperscript</a> adhere to the <a href="https://htmx.org/essays/locality-of-behaviour/">Locality of Behavior</a>
 design principle.</p>
 <p>This principle states that:</p>
 <blockquote>
 <p>The behaviour of a unit of code should be as obvious as possible by looking only at that unit of code</p>
 </blockquote>
 <p>The main technical advantage of Locality of Behavior is ease of maintenance, as outlined in the essay above.</p>
 <p>However, there is an important cultural benefit to the Locality of Behavior of htmx and hyperscript as well: <strong>it restores
 the power of the <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance on the web</strong>.</p>
 <p>Consider <a rel="noopener" target="_blank" href="https://arhamjain.com/hyperwordle/">Hyperwordle</a>, a hyperscript-based clone of the popular 
 <a rel="noopener" target="_blank" href="https://www.nytimes.com/games/wordle/index.html">Wordle</a> game, now owned by the New York Times.</p>
 <p>You can visit Hyperwordle, right click and view the source of it, and you will be presented with some HTML and hyperscript,
 all of which is, with a bit of effort, understandable.</p>
 <p>The  <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance is effective in this case.</p>
 <p>Contrast this with the view-source experience of the Wordle implementation at the New York Times.</p>
 <p>Now, this is of course a bit unfair: the NYTimes version has a lot more functionality and is heavily optimized. Hyperwordle
 is a proof of concept and not being hammered by millions of users every day.</p>
 <p>Despite that qualification, Hyperwordle demonstrates a potential future for the web, a future where a culture of openness,
 of <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> politeness, is once again a touchstone of the
 culture of the web.</p>

 <p>Engineers who care about the open culture of the web should recognize that the threats to that culture come not only from
 Digital Enclosure by large, private companies of the most important pieces of the web.</p>
 <p>They should also recognize the risks of Technical Enclosure, and the <em>non-technical</em> value of the 
 <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a> affordance in perpetuating the open culture of
 web development.  They should start thinking about making this affordance a priority in their technical decisions.  As
 with all priorities, this may involve trading off against other technical and even functional priorities during 
 application development.</p>
 <p>But if we don’t stand up for <a rel="noopener" target="_blank" href="https://en.wikipedia.org/wiki/View-source_URI_scheme">#ViewSource</a>, no one else will.</p>

 <img src="https://htmx.org/img/memes/viewsource.png" alt="Right Click View Source Guy">
--- a/cache/2023/73f0ab0b4336be702e863205bd1bbace/index.html
+++ b/cache/2023/73f0ab0b4336be702e863205bd1bbace/index.html
@@ -0,0 +1,175 @@
 <!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>I don’t want your data (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://manuelmoreale.com/i-don-t-want-your-data">

 <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>I don’t want your data</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://manuelmoreale.com/i-don-t-want-your-data" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>The web loves data. Data about you. Data about who you are, about what you do, what you love doing, what you love eating. Data about where you go and who you talk to, data about what you watch, data about what you play. Google, Facebook, and Amazon, they're all god-tier level creeps. If they could know how many times you go pee they'd gladly collect that piece of information.</p>
 <p>I, on the other end, couldn't care less about your data. I don't run analytics on this website. I don't care which articles you read, I don't care if you read them. I don't care about which post is the most read or the most clicked. I don't A/B test, I don't try to overthink my content. I just don't care.</p>
 <p>My <a href="https://peopleandblogs.com" rel="noreferrer" target="_blank">People and Blogs</a> newsletter, my <a href="https://buttondown.email/manuelmoreale" rel="noreferrer" target="_blank">From the Summit</a> newsletter, and my "<a href="https://buttondown.email/manuelmorealedotcom" rel="noreferrer" target="_blank">posts via email</a>" thingy, all run on <a href="https://buttondown.email" rel="noreferrer" target="_blank">Buttondown</a>. Buttondown has analytics turned off by default and I made sure to keep it that way because I don't care about knowing if you click on my emails. You signed up and so I assume you want to receive them and that's all I care about. And if you unsubscribe I make sure to delete your address from my list and not just leave it there marked as "unsubscribed". You unsubscribed, so your data should be gone. That's because I don't want your data.</p>
 <p>I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, I like to do my part which is why I try hard to not collect and keep any data about you.</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>
--- a/cache/2023/73f0ab0b4336be702e863205bd1bbace/index.md
+++ b/cache/2023/73f0ab0b4336be702e863205bd1bbace/index.md
@@ -0,0 +1,8 @@
 title: I don’t want your data
 url: https://manuelmoreale.com/i-don-t-want-your-data
 hash_url: 73f0ab0b4336be702e863205bd1bbace

 <p>The web loves data. Data about you. Data about who you are, about what you do, what you love doing, what you love eating. Data about where you go and who you talk to, data about what you watch, data about what you play. Google, Facebook, and Amazon, they're all god-tier level creeps. If they could know how many times you go pee they'd gladly collect that piece of information.</p>
 <p>I, on the other end, couldn't care less about your data. I don't run analytics on this website. I don't care which articles you read, I don't care if you read them. I don't care about which post is the most read or the most clicked. I don't A/B test, I don't try to overthink my content. I just don't care.</p>
 <p>My <a href="https://peopleandblogs.com" rel="noreferrer" target="_blank">People and Blogs</a> newsletter, my <a href="https://buttondown.email/manuelmoreale" rel="noreferrer" target="_blank">From the Summit</a> newsletter, and my "<a href="https://buttondown.email/manuelmorealedotcom" rel="noreferrer" target="_blank">posts via email</a>" thingy, all run on <a href="https://buttondown.email" rel="noreferrer" target="_blank">Buttondown</a>. Buttondown has analytics turned off by default and I made sure to keep it that way because I don't care about knowing if you click on my emails. You signed up and so I assume you want to receive them and that's all I care about. And if you unsubscribe I make sure to delete your address from my list and not just leave it there marked as "unsubscribed". You unsubscribed, so your data should be gone. That's because I don't want your data.</p>
 <p>I hate what data is doing to the web. I hate that some people get obsessed with data. I hate that the entire advertising and marketing world has evolved to only care about data. But I realize that this will not change. Still, I like to do my part which is why I try hard to not collect and keep any data about you.</p>
--- a/cache/2023/index.html
+++ b/cache/2023/index.html
@@ -205,6 +205,8 @@
      
        <li><a href="/david/cache/2022/230f8f7224199132de4ce030458536de/" title="Accès à l’article dans le cache local : The mounting human and environmental costs of generative AI">The mounting human and environmental costs of generative AI</a> (<a href="https://arstechnica.com/gadgets/2023/04/generative-ai-is-cool-but-lets-not-forget-its-human-and-environmental-costs/" title="Accès à l’article original distant : The mounting human and environmental costs of generative AI">original</a>)</li>
      
        <li><a href="/david/cache/2022/73f0ab0b4336be702e863205bd1bbace/" title="Accès à l’article dans le cache local : I don’t want your data">I don’t want your data</a> (<a href="https://manuelmoreale.com/i-don-t-want-your-data" title="Accès à l’article original distant : I don’t want your data">original</a>)</li>
      
        <li><a href="/david/cache/2022/20d288eb47779c4f1b3f36fb86aa7108/" title="Accès à l’article dans le cache local : File over app - Steph Ango">File over app - Steph Ango</a> (<a href="https://stephango.com/file-over-app" title="Accès à l’article original distant : File over app - Steph Ango">original</a>)</li>
      
        <li><a href="/david/cache/2022/9718ae2062146285e1c4f406240e04af/" title="Accès à l’article dans le cache local : An update on Robust Client-Side JavaScript">An update on Robust Client-Side JavaScript</a> (<a href="https://molily.de/update-on-robust-javascript/" title="Accès à l’article original distant : An update on Robust Client-Side JavaScript">original</a>)</li>
@@ -279,6 +281,8 @@
      
        <li><a href="/david/cache/2022/f23d043d8e99f2af5fcf1b970f98744a/" title="Accès à l’article dans le cache local : Artificial General Intelligence and the bird brains of Silicon Valley">Artificial General Intelligence and the bird brains of Silicon Valley</a> (<a href="https://softwarecrisis.dev/letters/ai-bird-brains-silicon-valley/" title="Accès à l’article original distant : Artificial General Intelligence and the bird brains of Silicon Valley">original</a>)</li>
      
        <li><a href="/david/cache/2022/2782723c95c98a22087e9954b07a8fba/" title="Accès à l’article dans le cache local : The #ViewSource Affordance">The #ViewSource Affordance</a> (<a href="https://htmx.org/essays/right-click-view-source/" title="Accès à l’article original distant : The #ViewSource Affordance">original</a>)</li>
      
        <li><a href="/david/cache/2022/462022ad2f27ff57387e9d0f49e96bad/" title="Accès à l’article dans le cache local : Shoebox — Work by Giles Turnbull">Shoebox — Work by Giles Turnbull</a> (<a href="https://gilest.org/shoebox.html" title="Accès à l’article original distant : Shoebox — Work by Giles Turnbull">original</a>)</li>
      
        <li><a href="/david/cache/2022/98a93dedbf2eb7665680ec6b1bb31e8c/" title="Accès à l’article dans le cache local : 10 Films By Indigenous Filmmakers To Watch Instead Of Avatar: The Way Of Water">10 Films By Indigenous Filmmakers To Watch Instead Of Avatar: The Way Of Water</a> (<a href="https://www.cbr.com/better-movies-than-camerons-avatar-2-inigenous-creators/" title="Accès à l’article original distant : 10 Films By Indigenous Filmmakers To Watch Instead Of Avatar: The Way Of Water">original</a>)</li>
@@ -297,6 +301,8 @@
      
        <li><a href="/david/cache/2022/0568befa90d2b39c0694d4c7ffc3cd73/" title="Accès à l’article dans le cache local : Don't believe ChatGPT - we do NOT offer a "phone lookup" service">Don't believe ChatGPT - we do NOT offer a "phone lookup" service</a> (<a href="https://blog.opencagedata.com/post/dont-believe-chatgpt" title="Accès à l’article original distant : Don't believe ChatGPT - we do NOT offer a "phone lookup" service">original</a>)</li>
      
        <li><a href="/david/cache/2022/19a9d6fbfc9b17021f013e71ffb45593/" title="Accès à l’article dans le cache local : endroit de l’envers">endroit de l’envers</a> (<a href="https://www.la-grange.net/2023/03/15/envers" title="Accès à l’article original distant : endroit de l’envers">original</a>)</li>
      
        <li><a href="/david/cache/2022/a0ccec7acb932e4155960c1c88d65eff/" title="Accès à l’article dans le cache local : La mission de Deuxfleurs">La mission de Deuxfleurs</a> (<a href="https://plume.deuxfleurs.fr/~/Deuxfleurs/La%20mission%20de%20Deuxfleurs" title="Accès à l’article original distant : La mission de Deuxfleurs">original</a>)</li>
      
        <li><a href="/david/cache/2022/482252d2b8806e99bc30ffab2b2c51c9/" title="Accès à l’article dans le cache local : Des questions · Boris Schapira">Des questions · Boris Schapira</a> (<a href="https://boris.schapira.dev/notes/2023-02-des-questions/" title="Accès à l’article original distant : Des questions · Boris Schapira">original</a>)</li>