
Quotebacks – Quote the Web - tobyshorin
https://quotebacks.net/
======
dang
There's also a nice blog post at
[https://tomcritchlow.com/2020/06/09/quotebacks/](https://tomcritchlow.com/2020/06/09/quotebacks/)

(via
[https://news.ycombinator.com/item?id=23467586](https://news.ycombinator.com/item?id=23467586).
There were a few comments there but we moved them hither.)

------
SuperPaintMan
This sounds very similar to Xanadus concept of Transclusion, I'm kind of sad
this kind of context-preserving inclusion never really made it into the modern
web. But due to the nature of Xanadus fixed and versioned documents,
transclusions can't be broken. :(

~~~
hashhar
Metabrainz and their wiki/documentation/data sites do this. See
[https://musicbrainz.org/doc/WikiDocs](https://musicbrainz.org/doc/WikiDocs)
for how they implement it.

------
julianeon
I decided to take this out for a test drive, and see how it worked.

Verdict: it's nice! I'll be using this.

I tried it out with an HTML page here, for some JavaScript tutorials taken
from medium, dev.to, and one illustration (also embedded) not using this
library from Pinterest.

[https://www.mediazed.com/learn-
javascript.html](https://www.mediazed.com/learn-javascript.html)

Disclaimer: That's my own page. Normally if I could I'd also provide a link or
explanation of the content, that doesn't link to my own page. However, the
content here is pointless without being embedded in a webpage. But if you just
want to see what it looks like without following the link, I took a
screenshot.

[https://imgur.com/43AOji5](https://imgur.com/43AOji5)

I could see this being useful for me for quotes in an article. It looks nice
and does what it says on the tin. For a quote or two, I'd recommend it.

------
crabmusket
I can't tell, from the blog post or comments here, how the web component is an
improvement on just using <blockquote> and <cite>. The styling does look nice,
but is that the only real difference?

~~~
contravariant
Nope, beats me. As far as I can tell it's just text with a hyperlink. Clicking
the link doesn't even take you to the location on the page the quote is from.

~~~
crabmusket
I just discovered this from the same author:
[http://subpixel.space/entries/open-
transclude/](http://subpixel.space/entries/open-transclude/)

It's a much more interesting development in the same direction! The
implementation currently only seems to work when transcluding content on the
same domain, rather than quoting anything from across the web. Having
discovered this, I feel I have a bit more context for where the creator is
coming from!

------
tegiddrone
Nice. How to handle dead links? A growing problem with hyperlinking across
sites in general.

An idea: when you take a quote, send the webpage through archivebox.io and pin
the resulting artifacts to IPFS... or other repository the author can
maintain. Key feature: the quoting author maintains the copy of the document
they are quoting. The embedded "quote" fixture on the page will always point
to the original URL and citation date alongside the author's "copy" of the
page if it happens to die or change.

~~~
alwillis
IPFS was designed to solve this problem of the impermanence of the current
web.

This article kind of says it all: "The InterPlanetary File System Wants to
Create a Permanent Web"—[https://www.vice.com/en_us/article/78xgaq/the-
interplanetary...](https://www.vice.com/en_us/article/78xgaq/the-
interplanetary-file-system-wants-to-create-a-permanent-web)

~~~
Spivak
But in practice what that means is that if you hold a reference to some page
in your article you can/should keep it alive by seeding it.

~~~
alwillis
Yes!

------
marinintim
I usually quote webpages by writing a <blockquote> with a hyperlink to the
original, and avoid embedding tweets for privacy and performance reasons.

If the source supports
[Webmentions][[https://webmention.net/](https://webmention.net/)], I'll send
it too.

------
muhammadusman
I love the quoted UI! Can't wait for the Firefox extension, if you need help,
I'm happy to pitch in!

~~~
topcat31
We're working on a FF version! Turns out porting the chrome one is fairly
straightforward. Watch this space!

~~~
nvr219
Nice! Will definitely use once Firefox version is available.

------
rooodini
Shouldn’t the demo quote link to
[https://sometimesright.com/2020/04/25/blogging-vs-
twitter/](https://sometimesright.com/2020/04/25/blogging-vs-twitter/) ?
(instead of the homepage)

~~~
topcat31
You're right! Just fixed it. Good catch.

------
alexknowshtml
This reminds me of Microformats, which is an exciting throwback to when I was
just getting into web development.

[http://microformats.org/wiki/what-are-
microformats](http://microformats.org/wiki/what-are-microformats)

------
ordinaryradical
This is one more example of my federated blogging idea I've been asking for
here on HN. I want blogging with the independence of the original but the
discoverability of a well-done aggregator (more human, substance over SEO or
outrage, depth over trendiness).

Blogging could be so much improved if there were ways to discover other
writers doing interesting things from one writer that you enjoy. Modes of
intertextuality like this are key to building healthy, interesting
communities.

~~~
aklemm
Have you looked at the [http://IndieWeb.org](http://IndieWeb.org) tools and
Webmentions? [http://micro.blog](http://micro.blog) offers it all with little
hassle.

------
x32n23nr
Nice to see this. Was using highly at some point, before Twitter bought it [1]
and shut it down.

[1] [https://techcrunch.com/2019/04/17/twitter-
highly/](https://techcrunch.com/2019/04/17/twitter-highly/)

------
cosmojg
Anybody know any good JavaScript-free alternatives to this? Or should I just
stick with quoting people and linking their content the old-fashioned way?

~~~
chrisco255
Quotebacks falls back to a basic <blockquote> if JS is not enabled.

~~~
cosmojg
Ahh, cool! Thanks for the info.

------
memexy
Fantastic work. Are these stored in a searchable way? I couldn't tell from the
page what database the quotes are stored in and whether there is an easy way
to access it other than exporting to JSON.

Edit: Looking at the code it looks like they're indeed searchable with the
help of fuse.js (fuzzy search library): [https://github.com/Blogger-Peer-
Review/quotebacks/blob/maste...](https://github.com/Blogger-Peer-
Review/quotebacks/blob/master/fuse.js#L2).

------
bdr
For another previous effort, @bradneuberg built some stuff around this a while
back. See [http://forge.blueoxen.net/purple-
include/](http://forge.blueoxen.net/purple-include/) and
[http://codinginparadise.org/weblog/labels/purple%20include.h...](http://codinginparadise.org/weblog/labels/purple%20include.html).

------
polm23
I like the idea of quoting other sites in a standard way, and the browser
extension looks great, but I really don't want to have to deal with JS just to
include a quote in a post. Since it doesn't ping the author (like a Pingback)
I'm not sure the presentation format has a lot of value...

Where is the JS pulling the title and image from? OpenGraph?

------
diablo1
How can these be forged? Say a page no longer exists, it could be possible to
forge a quote and play a little game of disinfo?

~~~
StevenRayOrr
Given that we're just talking HTML, I don't see how you could meaningfully
prevent bad actors, absent storing screenshots of the original text -- and
even then (see any number of fake tweets that circulate). Hypothetically,
instead of linking to the original source, I suppose it could link to the
Wayback Machine version of the text, but I don't think that's a helpful
default way to link to people's work. As a fallback when sites disappear,
sure, but otherwise...

~~~
dbieber
Here's one possibility. Creating a quoteback could: 1\. tell archive.org to
create a snapshot of the page 2\. store a link both to the human-friendly
version of the page and the archive snapshot 3\. then the reader's browser
(rather than the webpage hosting the quoteback) could verify that the quote is
present either at the linked source or at the snapshot of the linked source.

In the happy path (where the quoteback is genuine) the browser could indicate
to the user that the quoteback is genuine and the link would take the user to
the normal website if it still has the quote, otherwise to the archive
snapshot.

In the unhappy path (where the quoteback is disingenuous) the browser could
notify the user that the quoteback is disingenuous.

~~~
toomuchtodo
Great path, a few hundred lines of code, less if you can use the ia python
library.

------
satyrnein
The first example links to an index page; it should probably link to the
specific page itself.

I suggest trying out ScrollToTextFragment [https://github.com/WICG/scroll-to-
text-fragment](https://github.com/WICG/scroll-to-text-fragment) if you haven't
already I know it was a little controversial and it's currently Chrome-only,
but it might improve the UX for some people.

Very cool, though!

~~~
topcat31
Firstly - good catch. I updated the link.

Secondly - I wish I could get ScrollToTextFragment to work reliably. I've
tried integrating this into Quotebacks and every time it just works so
sporadically that I roll it back. Somehow Google thinks this is robust and
stable enough to put into production but my experience is very hit/miss.

------
Chronologos
love it! a leap forward in usability. I'm already using some Open Transclude
javascript on my own site and am looking forward to using this :)

~~~
tobyshorin
woah you are? hell yeah which post?? Link me!!

~~~
Chronologos
hah sure: [https://www.iantay.dev/post/open-
transclude/](https://www.iantay.dev/post/open-transclude/)

~~~
davidcollantes
It doesn’t look good on mobile. Just letting you know.

------
MaxwellM
This is exciting! Thanks for doing this.

------
pivic
I love how Quotebacks can be used together with Hypothesis. I blogged about
Quotebacks and its use with Hypothesis here:
[https://niklasblog.com/?p=24912](https://niklasblog.com/?p=24912)

------
typenil
Really appreciate the work. I'll be circling back once the Firefox plugin is
out.

------
neilv
Some related earlier concepts from the Web:
[https://en.wikipedia.org/wiki/Linkback](https://en.wikipedia.org/wiki/Linkback)

------
seany
How does this compare in practice to things like dissenter?

------
kixiQu
Sort of reminds me of a one-sided webmention.

------
Qaphqa
It is not working for me in Linux.

------
nathias
this is great, now we need another one for comments and another one for
subscription

------
wallflower
Ted Nelson who coined the term _hypertext_ in _1963_ claimed in Werner
Herzog’s documentary “Lo and Behold” that his original idea for “copy and
paste” would always link back to the original. This article below based on the
Herzog interview has more context but not the exact _quote_ (context pun
intended) that I remember from the documentary.

Full interview of Ted Nelson from “Lo and Behold”:
[https://m.youtube.com/watch?v=Bqx6li5dbEY](https://m.youtube.com/watch?v=Bqx6li5dbEY)

> Nelson, who was featured in Werner Herzog’s latest film, Lo and Behold,
> believes that instead of the existing formats we use online, where text
> often mirrors the constraints of paper, we should have a system of two-way
> links that would allow readers to see the context of any quotation...

> There are a few offline examples, such as the Talmud and the Rosetta Stone,
> where text is read side-by-side. Nelson believes this is how online
> documents should be constructed.

> “As far as I’m concerned, this is the way literature should develop,” he
> says. “I don’t consider this technology, I think it’s literature. Being able
> to see visible connections between pages seems to me absolutely
> fundamental.”

> Nelsons says this setup would be the ideal format for reading annotations,
> additional details, correspondence, and disagreements: “It’s essentially a
> different genre of writing.”

> As Nelson sees it, our current use of online documents is very limiting.
> He’s particularly disturbed by how we use the words cut and paste. When the
> Macintosh was introduced in 1984, cut came to mean “hide this piece that
> I’ve just marked in an invisible place,” and paste became “plug whatever’s
> in this invisible place to where I’m pointing.”

> “To me that was an outrage because no one has yet got a decent re-
> arrangement system that allows you to see the all the parts of the
> arrangement as you’re writing,” Nelson says. “Those words meant something
> entirely different until 1984.

> Balzac, the French novelist, carried a razor blade around his neck for
> cutting up his manuscript. Tolstoy would cut up his manuscripts and leave
> all the pieces around the floor. This is true cut-and-paste, where you’re
> re-arranging on a large scale and able to see the relationships between
> parts.”

> Ironically, Nelson is friends with Larry Tesler—the man responsible for our
> modern use of cut and paste—but still calls their mislabeling “a crime
> against humanity.”

[https://qz.com/778747/an-early-internet-pioneer-says-the-
con...](https://qz.com/778747/an-early-internet-pioneer-says-the-construction-
of-the-web-is-crippling-our-thinking/)

[https://en.m.wikipedia.org/wiki/Ted_Nelson](https://en.m.wikipedia.org/wiki/Ted_Nelson)

