davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!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>Web of Documents (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="http://blog.danieljanus.pl/2019/10/07/web-of-documents/">

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

<article>
  <header>
    <h1>Web of Documents</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="http://blog.danieljanus.pl/2019/10/07/web-of-documents/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>In 1960, Ted Nelson envisioned a&nbsp;web of documents.</p>

<p>It was called <a href='https://en.wikipedia.org/wiki/Project_Xanadu'>Xanadu</a>. It was a&nbsp;grand, holistic vision: of documents that, once published, are available basically forever; of bidirectional links that could glue together not just documents, but parts thereof; of managing copyright and royalties. It was complex. And it never really came to&nbsp;fruition.</p>

<p>But thirty-one years later, another web of documents took off. A&nbsp;much more modest undertaking than Xanadu, with a&nbsp;simple markup language, simple protocol to&nbsp;retrieve the documents, unidirectional, ever-rotting links, and not much else. The World Wide Web. It was prototyped by one man in a&nbsp;few months. And then its popularity exploded.</p>

<p>As the WWW spread, it grew features. Soon, it was not enough for the documents to&nbsp;contain just text: support for images was added. People wanted to&nbsp;customize the look of the documents, so HTML gained presentational markup abilities, eventually obsoleted by CSS. It was not enough to&nbsp;be able to&nbsp;view the menu of your local pizza store – people wanted to&nbsp;actually order a&nbsp;pizza: the need for sessions yielded cookies and non-idempotent HTTP methods. And people wanted the pages to&nbsp;be interactive, so they became scriptable.</p>

<p>All these features were good. They helped the Web meet actual needs. But having them has a&nbsp;significant consequence, one that is seldom realized:</p>

<p>We&nbsp;don’t have a&nbsp;Web of Documents anymore.</p>

<p>Let me pause at this point. I’ve been using the word “document” intuitively and vaguely so far, so let’s try to&nbsp;pinpoint it. I&nbsp;don’t have a&nbsp;precise definition in mind, but I’ll share some examples. A&nbsp;book is a&nbsp;document, to&nbsp;me. So is a&nbsp;picture, an illustrated text, a&nbsp;scientific paper, a&nbsp;MP3 song, or a&nbsp;video. By contrast, a&nbsp;page that lets you play Tetris isn’t. The essence of this distinction seems to&nbsp;be that documents have well-defined <i>content</i> that does not change between viewings and does not depend on the state of the outside world. A&nbsp;document is stateless. It exists in and of itself; it is its own microcosm. It may be experienced interactively, but only insofar as it enables the experiencer to&nbsp;focus their attention on the part of their own choosing; the potential state of that interaction is external to&nbsp;the document, not part of itself.</p>

<p>Obviously, this is not very accurate: there are border cases. For example, does a&nbsp;film DVD with a&nbsp;menu qualify as a&nbsp;document? Or how about a&nbsp;choose-your-own-adventure book? Or a&nbsp;HTML page with links to&nbsp;other pages? On the surface, the latter does provide out-of-microcosm interactivity; but viewed from another angle, it is no different than putting a&nbsp;reference in a&nbsp;book. The browser just makes it very easy to&nbsp;go to&nbsp;a&nbsp;shelf and pick another book.</p>

<p>The distinction is there, and it’s important. And with it in mind, let me reiterate:</p>

<p><i>We&nbsp;don’t have a&nbsp;Web of Documents anymore.</i></p>

<p>These days, the WWW is mostly a&nbsp;<i>Web of Applications</i>. An application is a&nbsp;broader concept: it can display text or images, but also lets you interact not just with itself, but with the world at large. And that’s all well and good, as long as you consciously intend these interactions to&nbsp;happen.</p>

<p>A&nbsp;document is safe. A&nbsp;book is safe: it will not explode in your hands, it will not magically alter its contents tomorrow, and if it happens to&nbsp;be illegal to&nbsp;possess, it will not call the authorities to&nbsp;denounce you. You can implicitly trust a&nbsp;document by virtue of it being one. An application, not so much.</p>

<p>I&nbsp;don’t want to&nbsp;name names, but it’s all too easy these days to&nbsp;follow a&nbsp;link to&nbsp;a&nbsp;news site, expecting an article, only to&nbsp;be greeted with “You have read N articles this month, please register to&nbsp;continue”. Definitely an application-y thing to&nbsp;say, not a&nbsp;document-y one. Now, the purveyors of such sites typically have legitimate economic interest in doing so—but once you sign up, they are able to&nbsp;record your actions, link them with your identity and build your shadow profile. This way, we&nbsp;have applications actively <i>masquerading</i> as documents, when in reality they <i>do&nbsp;non-documenty things</i> without telling you.</p>

<p>Legislation such as the EU Cookie Law and the GDPR (insofar as it requires disclosure of data processing) tries to&nbsp;remedy this. But the more I&nbsp;think about it, the more sense it makes to&nbsp;me to&nbsp;attack the problem closer to&nbsp;its root: to&nbsp;decomplect the notions of a&nbsp;document and an application; to&nbsp;keep the Web of Applications as it is, and to&nbsp;recreate a&nbsp;Web of Documents—either parallel to&nbsp;it, or as its sub-web.</p>

<p>To&nbsp;do&nbsp;this, we&nbsp;need to&nbsp;take a&nbsp;step back. (Or do&nbsp;a&nbsp;clean start and invent a&nbsp;whole new technology, but this is unlikely to&nbsp;succeed). Fortunately, we&nbsp;don’t have to&nbsp;travel all the way back to&nbsp;1992, when the WWW was still a&nbsp;Web of Documents. (I&nbsp;still remember table-based layouts and spacer gifs, and the very memory makes me shudder). I&nbsp;think we&nbsp;can base the new Web of Documents on ol’ trusty HTTP (or, better, HTTPS), HTML and CSS as we&nbsp;know them today, with just three restraints:</p>

<ol><li><i>No methods other than GET</i> (and perhaps HEAD). POST, PUT, DELETE and friends just have no place in a&nbsp;world of documents. They are not idempotent; they potentially modify the state of the world, which documents should not be able to&nbsp;do. (I&nbsp;was also thinking “no forms”, but with #1 in place, it seems like an unnecessary refinement. After all, forms that translate to&nbsp;GET requests just facilitate creating URLs: a&nbsp;user could just as well have typed the resulting URL by hand.)</li><li><i>No scripts of any kind.</i> Not JavaScript, not WebAssembly. Not even to&nbsp;enrich a&nbsp;document, such as syntax-highlight the code snippets. This one may seem too stringent, but I&nbsp;think it’s better to&nbsp;err on the safe side, and it’s very easy to&nbsp;enforce.</li><li><i>No cookies.</i> Cookies by themselves aren’t interactive, but having them makes it all too easy to&nbsp;abuse the semantics of HTTP to&nbsp;recreate sessions, and on top of them reinvent the app-wheel and eventually forfeit the Web of Documents again.</li></ol>

<p>Again, there may be corner cases that may have escaped me. But if a&nbsp;WWW page conforms to&nbsp;these restrictions, I&nbsp;think it may be pretty safe to&nbsp;call it a&nbsp;“document” and make it a&nbsp;part of the Web of Documents.</p>

<p>How do&nbsp;we&nbsp;achieve this? I&nbsp;don’t know, really. I&nbsp;don’t have a&nbsp;concrete proposal. Perhaps we&nbsp;could have dedicated browsers for the WoD; perhaps we&nbsp;could make existing browsers prominently advertise to&nbsp;the user whether they are browsing a&nbsp;document or an application. On top of all the technical decisions to&nbsp;make, there’ll be significant campaigning and lobbying needed if the idea is ever to&nbsp;take off.</p>

<p>I&nbsp;don’t dare dream that it ever will. My intent in this article is to&nbsp;provide food for thought. All I&nbsp;ask from you, my reader, is consideration and attention. And if you got this far, chances are I&nbsp;got them. I’m grateful.</p>

<p>This page is a&nbsp;document. Thank you for reading it.</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>