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>Quotebacks and hypertexts (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://interconnected.org/home/2020/06/16/quotebacks">

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

<article>
  <header>
    <h1>Quotebacks and hypertexts</h1>
  </header>
  <nav>
    <p class="center">
      <a href="/david/" title="Aller à l’accueil">🏠</a> •
      <a href="http://interconnected.org/home/2020/06/16/quotebacks" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <main>
    <p>If you’re reading this on my website, you’ll notice that the next chunk of text looks a bit different. That’s because it’s a <em>quoteback.</em></p>

<blockquote cite="https://quotebacks.net" class="quoteback bl bw1 pl2 b--light-red ml0 italic i" data-author="Quotebacks" data-title="Introducing Quotebacks">
<p>Quotebacks are like a quote retweet, but for any piece of content on the web. They work on any webpage, and gracefully fall back to a standard blockquote.</p>
<p>Thus, “Quotebacks” is three things:</p>
<p>1. A web-native citation standard and quoting UX pattern</p>
<p>2. A tiny library, <code>quoteback.js</code>, that converts HTML <code>&lt;blockquote&gt;</code> tags into elegant interactive webcomponents</p>
<p>3. A browser extension to create quoteback components and store any quotes you save to publish later.</p>

</blockquote>

<p>Quotebacks is a project? invention? <em>protocol?</em> by Toby Shorin and Tom Critchlow. <a href="https://tomcritchlow.com/2020/06/09/quotebacks/">Here’s Tom’s introductory post:</a> which has some background. <q>The ultimate goal is to encourage and activate a deeper cross-blogger discusson space. To promote diverse voices and encourage networked writing to flourish.</q></p>

<p>I’m seeing a bunch of folks <a href="https://www.kickscondor.com/admiring-quotebacks-strategy">trying</a> <a href="http://peterbihr.com/2020/06/quotebacks-are-great/">out</a> <a href="https://warrenellis.ltd/isles/quotebacks/">quotebacks</a>. If you keep a blog yourself, I urge you to give it a go. I’ll talk about why later in this post.</p>

<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Me? I’ve written a Quotebacks extension for Python-Markdown</h3>

<p>I’m not using the Chrome extension to collect quotes myself. I have my own weird workflow for <a href="https://www.dw.com/en/coronavirus-scare-when-will-hamsterkauf-become-an-english-word/a-52635400">hamsterkaufing</a> the web.</p>

<p>But I <em>do</em> want to display quoteback embeds, and you can see one at the top of this post. <em>(If you’re reading this in RSS or email, check the website.)</em></p>

<p>How? I write quotes in a special format in the Markdown text documents that lie behind this blog. (I keep everything in various forms of plain text and have done for a couple decades.)</p>

<p>These text docs are transformed into HTML for the blog using <a href="https://python-markdown.github.io">Python-Markdown</a>. So I’ve written a Python-Markdown extension called <strong>quotebacks-mdx</strong> to transform this special format into the quotebacks embed HTML.</p>

<p>I’d also like feedback on the Markdown format I’m using – if people implement extensions in other languages, it would be good if something like this became a de facto standard. </p>

<p>Why did I do it this way?</p>

<ul>
<li>Markdown deserves to have a way to include a citation in blockquotes – afaik there isn’t a consensus way to do this right now.</li>
<li>I can include nicely-cited quotes in my blog posts without including custom HTML. So in another 10 years, I know I’ll still have my easy-to-access plain text.</li>
<li>The fallback for Markdown (without the extension) and for HTML (without the Javascript) is still readable and still looks good.</li>
</ul>

<p>And, even though I’m not using the Quotebacks browser extension, I’m adopting the embed format - the protocol - because of what we might one day build on top.</p>

<p><hr class="h1 xh2-ns w1 xw2-ns ml4 mv4 bb bw1 b--white"/>
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Some history: the Memex</h3>
<p>Back in 1945, Vannevar Bush published his insanely visionary essay <strong>As We May Think</strong> in <em>The Atlantic.</em> Through his imagined machine called the <strong>memex</strong> he predicted the web and its effect on human knowledge, work, and conversation:</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>Consider a future device … in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory.</p>
</blockquote>
<p>Phones!</p>
<p><a href="https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/">Here’s the original essay</a> though the <a href="https://en.wikipedia.org/wiki/As_We_May_Think">Wikipedia summary</a> is short and good.</p>
<p>The core feature of the memex is <strong>trails.</strong> It isn’t just a library.</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified. The lawyer has at his touch the associated opinions and decisions of his whole experience, and of the experience of friends and authorities. The patent attorney has on call the millions of issued patents, with familiar trails to every point of his client’s interest. [Etc.]</p>
</blockquote>
<p>Wikipedia! Work!</p>
<p>WELL.</p>
<p>And… bloggers:</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>There is a new profession of trail blazers, those who find delight in the task of establishing useful trails through the enormous mass of the common record.</p>
</blockquote>
<p>Flash forward…</p>
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Hypertext and transclusion</h3>
<p>In the early 1960s, Ted Nelson coined the text <strong>hypertext</strong>. The web is a hypertext, and the <a href="https://www.w3.org/History/1989/proposal.html">original 1989 proposal</a> cited Nelson’s work.</p>
<p>His project <strong>Xanadu</strong> - although never completed - was an expansion of what he meant by this original concept.</p>
<p>Hypertexts are connected texts. But Nelson saw <em>two</em> types of connections: links (which we have) and something else called <em>transclusion.</em> </p>
<p>From one paper <a href="http://xanadu.com.au/ted/XUsurvey/xuDation.html">about Project Xanadu</a>:</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>This may be simplified to: connections between things which are <em>different</em>, and connections between things which are <em>the same</em>.  They must be implemented differently and orthogonally, in order that linked materials may be transcluded and vice versa.  This double structure of abstracted literary connection – <em>content links</em> and <em>transclusion</em> – constitute xanalogical structure.</p>
</blockquote>
<p>Transclusion:</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>Transclusion is what quotation, copying and cross-referencing merely attempt: they are ways that people have had to <em>imitate</em> transclusion, which is the true abstract relationship that paper cannot show.  Transclusions are not copies and they are not instances, but <em>the same thing knowably and visibly in more than once place</em>.  This is a simple point which is remarkably difficult to get across.</p>
</blockquote>
<p>And later in the paper:</p>
<blockquote class="bl bw1 pl2 b--light-red ml0 italic i">
<p>Note also that the famous “trails” of Vannevar Bush’s memex system (103) were to be built from transclusions, not links.</p>
</blockquote>
<p><a href="https://en.wikipedia.org/wiki/Transclusion">Here’s Wikipedia on transclusion.</a></p>
<h3 class="measure f4 f3-l lh-copy black-80 pt3 pt4-l pb0 mb0">Back to Quotebacks</h3>
<p>What I love about the web is that it’s a hypertext. (Though in recent years it has mostly been used as a janky app delivery platform.)</p>
<p>And what I like about Quotebacks is that it already feels like an essential part of that hypertext toolbox! The Chrome extension meet the needs of Bush’s trailblazers; the embed format mimics Nelson’s transclusion.</p>
<p>Now the Quotebacks projects doesn’t immediately fulfil on this grand promise. But the great thing about a protocol is that I can adopt it and support it, and <em>you</em> can adopt it and support it, and if there’s enough of a consensus, we can build more on top. So what I’d be interested to see:</p>
<ul>
<li><strong>an index, accessible to all:</strong> could quoteback embeds be centrally tracked somehow?</li>
<li><strong>a serendipity machine:</strong> could my browser tell me when I’m on a page which has been cited – could I see the “trails” that are crossing this page, and chose to pivot and follow one? And could I see when one of those trails was authored by a friend?</li>
<li><strong>a robot research aide:</strong> could I index the quotebacks in my <em>own</em> database… and find holes? i.e. texts that are regularly cited by the ones I’ve quoted, but somehow I’ve never discovered them myself?</li>
</ul>
<p><em>(I’m less bothered about finding out specifically when people use one of my posts in a quoteback. That would be neat I guess, but tracking mentions is a first-order problem and besides it’s a spam honeypot.)</em></p>
<p>What I’m talking about is the kind of hypertext that I love, one in which my blog is a place for thinking out loud.</p>
<p>My blog is not my notebook, and it’s not my marketing platform.</p>
<p>My blog is my laboratory workbench where I go through the ideas and paragraphs I’ve picked up along my way, and I twist them and turn them and I see if they fit together. I do that by narrating my way between them. And if they do fit, I try to add another piece, and then another. Writing a post is a process of experimental construction.</p>
<p>And then I follow the trail, and see where it takes me.</p></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>