
<AssumedAudience>

People who have already read my [[Cambrian Blocks]] piece and are open to some playful speculation on the role of blocks in future interfaces.

</AssumedAudience>

<Disclaimer>

I used to work at HASH, a company building infrastructure for block-based editors. This essay and all the research associated with it is my own personal work and opinion, and no one else at the company was involved in its creation. It has no ulterior motive, other than to share my predictions on the block-based landscape. Feel free to take it all with a grain of salt anyway.

</Disclaimer>


<Spacer size="small" />

We're here to chuck around some irresponsibly speculative ideas on how the block landscape might evolve in the coming years.

In [[Cambrian Blocks]] we worked through our blocky past and present
Which brings us to the part everyone clamours for. _But what is the future?_ What is the point of reciting history, if not to try and find patterns that point to what happens next? Let's march forwards with our rear-view mirror in hand.

I've outlined a set of 'bets' I would make about how block interfaces will develop over the next 5 years.


<Spacer size="xs" />

<ListNumber number="1" title="Diversifying block types">

As blocks become a more standardised interface approach, we should expect to see a wider diversity of block types.

Current React developers have access to 60,000+ components. Users of block systems have access to an average of 30 blocks.

We should be creating and supporting niche blocks – recipe cards, flight maps, [at least 6 more suggestions in here]

I should point out here I'm advocating for a proliferation of _block types_ but not a proliferation of block interfaces and standards.

### Standardisation of block editors

Like all good software designers, the people creating these new editors are following [Jakob's Law](https://www.nngroup.com/videos/jakobs-law-internet-ux/) of internet user experience; people spend 99% of their time on websites _other than yours_. You'll make their lives far easier if you use design patterns they're already familiar with. While many will grumble the similarities between block-editors speaks to a lack of “innovation”, <Footnote idName={3}> “Innovate” | ˈɪnəveɪt | verb. To flagrantly disregard previous historical work and established conventions that have survived the test of time. Results may vary. </Footnote> the industry converging around a set of standards is a net gain for both users and creators.

</ListNumber>

<ListNumber number="2" title="Independent block development">

This was the original dream of OpenDoc. The people who build block-editors don't necessarily have to be the same people who build blocks.

This is currently manifesting as plugin marketplaces. Coda's maker marketplace is one of the recent signs we're moving in this direction. Roam's plugin marketplace. Figma's plugin marketplace.

We've already been moving swiftly in this direction in the larger context of front-end web development. Modular components built by a wide variety of other engineers is the name of the game. We all rely upon open collective efforts like MUI, Chakra, Radix, Reach UI, etc.

The same will happen with blocks, which are a simply a very specific type of component – one designed for authoring documents on the web.

[ diagram ]

</ListNumber>

<ListNumber number="3" title="Ontology-backed blocks">

Blocks connected to ontologicals structures.

- Notion's 'databases'
- Palantir
- Fibery
- Anytype

</ListNumber>

<ListNumber number="4" title="Blocks enabling end-user programming">

Blocks that specifically focus on giving end-users the kind of power programmers have. Setting state. Defining functions and calling them at the click of a button. Defining hover states. 

[Needs a better name]

The biggest hope I have for blocks is as an entry point into front-end development for people who can't currently code.

Button blocks on Coda and Retool are big indicators of this.

</ListNumber>

<ListNumber number="5" title="Improved open, indie web publishing tooling">

I might as well have called this one 'blocks for digital gardening'

Blocks designed for garden-esque structures on the web: reply blocks, academic citation blocks, questions, books, 

As an advocate of [[Digital Gardening]], this one comes from my own biases

Enabling users to write rich content to the independent, open web. Web 2.0 enabled users to write to the web... within limitations. They can only write to “platforms” - FB, twitter. The platform owners control and own the content.

Because blocks are inependent chunks of content, they could have their own addressable URLs. This would allow a block to be 'passed around' a community. Not unlike the way we pass around tweets

The [Quotebacks]() tool that X and Y built is a good premonition of how this could work. A section of a length blogpost can be pulled out and referenced, while maintaing a consistent link back to the source.

I touched on the possibilities of this kinds of persistent backlinking in [[Transclusion and Transcopyright Dreams]]

</ListNumber>

<ListNumber number="6" title="The modular web">

Standing up a whole website has moved far beyond the capacities of most people. Sandboxed environments like Observable and Jupyter notebook give people the ability to write code and execute it without also needing to learn the command line, Webpack, DNS redirects, etc. etc.

The web was born as a text-first medium. Tim Berners Lee designed it to mimic text documents. Specifically, long, linear research documents shared among scientists and academics as pieces of paper. Ever since then we've been negotiating its paper-like qualities.

The text-first, document-based model comes with a lot of design implications. It presumes the document or page is the basic unit of the web. We store our metadata at the level of the page, usually in the `<head>` tag. We link at the page level, rather than at the word, paragraph, or section level. <Footnote idName={1}>This has improved slightly with #header-level links, but the vast majority of links are still to entire pages, not granular lines or sections within a page.</Footnote>

Being able to link to specific blocks or sets of blocks. Tied up with the dream of [[Transclusions]]. Lalallal

</ListNumber>


Lalalallala

Emerging patterns and premonitions in the realm of block-based editors

Block to the Future

The rise of interactive, user-editable blocks as the basic unit of documents on the web

Cambrian Blocks: The Emergence & Evolution of Block-based Editors

On seeing tools for thought through a historical and anthropological lens

Tools for Thought as Cultural Practices, not Computational Objects


<IntroParagraph>

In Tim Berners-Lee's [original pitch](https://www.w3.org/History/1989/proposal.html) for The Web, he described it as a “non-linear text system" for notes. It was designed for scientific researchers and academics to pass around documents that would otherwise be printed on physical paper. The _point_ of the web was to mimic long, text-based, paper documents, but simply make them easier to move around.

</IntroParagraph>

**Paper documents** were the original metaphor for the web.

It's no surprise we started with paper. At the moment of the web's conception, computers were objects that lived among white-collar office workers. They were pitched as replacements; they would replace your inbox tray, your trundling filing cabinet, and your little yellow pad of sticky notes. Alan Kay made this cultural context clear when he designed the first [desktop metaphor](https://en.wikipedia.org/wiki/Desktop_metaphor) at Xerox PARC in the 1970's.

<BasicImage
  width="700"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_700/v1643957507/maggieappleton.com/notes/metaphors-we-web-by/The-Desktop-metaphor_1_j1ax5e.png"
  alt="A screenshot of Magic Cap, an early operating system designed around the desktop metaphor"
  showalt
/>

Ever since then, our digital experiences has been structured in terms of dull office equipment. Documents, folders, physical inboxes, rubbish bins, bookmarks, windows, and little yellow stickies are still part of the visual language of our operating systems today.

Thinking about computer interfaces as physical office rooms naturally expanded into thinking about the web. Websites were presented as and spoken about as **pages** – as in, _pieces of paper_. We still do it today. We still imagine the web as a series of paper documents with text and images presented on them.

The surface you're reading this on mimics a long white pape. We still call it a _page_ or an HTML _document_. It follows the same typographic rules and conventions – black text on white backgrounds and a top-to-bottom / left-to-right heirarchical structure.

## The Static Nature of Paper

This metaphor of _the-web-as-paper_ works quite well. The otherwise immaterial and abstract nature of the web becomes understandable, familiar, and (most importantly) _usable_ through the paper metaphor. We have all seen, handled, and created our own paper documents – a set of understandings we bring to our behaviour on the web.

I should point out that websites and paper do not share any _inherent_ qualities. We purposefully designed webpages to look like paper, but it wasn't some inevitable metaphorical fate.

In fact, the paper web has some harsh critics. [Ted Nelson](https://en.wikipedia.org/wiki/Ted_Nelson) is one of the most vocal. As the original creator of _hypertext_ and the visionary [[Project Xanadu]], it's fair to say Ted has spent his life deeply considering the repercussions of design metaphors and literary systems.

In [**Back to the Future**](https://www.xanadu.net/XanaduSpace/btf.htm): **Hypertext the Way it Used to Be**, Ted argues we've let paper become a metaphorical prison for our digital systems. When we designed digital documents to mimic paper, we unnessecarily brought along many of its physical limitations:

- We treat the page as the smallest unit of linkable information, instead of the sentence or paragraph.
- We remain married to the conventions of traditional typesetting established by paper printers.
- We insist on a single view – a mockup of a physical page – rather than embracing the flexible, multiple views possible in a dynamic computational medium.

Worse still, we left behind many of paper's best qualities:

- We took away the right to add handwritten annotation in margins.
- We took away the ability to lay multiple sheets out in front of us and shuffle them around to find the best structure and sequence.
- We took away the ability to carry a piece of paper across a room and look it over with someone else.

This is an inevitable consequence of any design metaphor. Metaphors are designed to _highlight_ qualities that the target concept and the source concept share, and _hide_ qualities they don't. They focus our attention on a particular set of affordances, to the detriment of all others.

The best solution to this metaphorical concealment is to practice seeing systems in multiple ways. Trying on different metaphorical lenses will change what we think the web is made of, what we think it can do, and its affordances, risks, and restrictions.

## Escaping Paper and Making Space

Despite the persistent metaphor of the paper-based web, we've framed the web in many other ways since its creation. There are many qualities of the web that paper cannot accomodate or conceptually explain; decentralised governance, live connection to other people, dynamic audio-visual creations, and mob-like social congregations have no precedence on paper.

In searching for metaphors that reflect our experiences, we've called it a [series of tubes](https://en.wikipedia.org/wiki/Series_of_tubes), an information superhighway, a surf-able ocean of information, a global village, a town square, and a zero-gravity parallel universe known as _cyberspace_.

Out of all of these metaphors, the second most dominant after paper is **physical space**.

This is obvious in the way we speak about the web. Our words describe the web as a sprawling expanse of place-based pages – each piece has in it's own location we step into when we **visit** a **homepage**. We **go to** web**sites**. They have a permanent **address** – each URL (uniform resource **locator**) marks its place in digital space. We **follow** links and end up **on** a page, and go **back** to the previous page.

<BasicImage
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_900/v1641414096/maggieappleton.com/notes/metaphors-we-web-by/linkedpages_wjh9lh.jpg"
  alt="Paper documents behind web browsers with IP locations posted above them"
/>

Our web browsers play into this narrative of moving through physical space. Netscape **Navigator** helps you find your way around. Internet **Explorer** and **Safari** are a call to adventure in an unknown landscape.

It didn't take us long to flip the metaphorical script and design our webpages to mimic two-directional maps where you directly clicked on your destination, rather than scrolling a linear paper document. The most infamous being the [Space Jam](https://www.spacejam.com/1996/) design of 1996; all hail.

<ImageFrame
  width="800px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1000/v1643960736/maggieappleton.com/notes/metaphors-we-web-by/spacejam_1_izzfqo.png"
  alt="A screenshot of the space jam website where a ring of planets surrounds the main space jam logo"
/>

This spatial metaphor intensified as browser technologies advanced. In the early 2000's dynamic programming languages like [Flash](https://en.wikipedia.org/wiki/Adobe_Flash) and [asynchronous JavaScript](<https://en.wikipedia.org/wiki/Ajax_(programming)>) became ubiquitous. These languages enabled us to build instantly interactive websites without requiring page reloads. It became possible to design a webpage as a dynamic space, where clicks, drags, zooms, and pans had immediate effects. Websites began to look less like pages and more like spaces. Games sprung up with characters controlled by arrow keys. Digital whiteboards appeared that you could pan and zoom around like a frame over an infinite canvas.

For a long time these experiments were rare, exceptional, play-things though. The grain of the web changed faster than we could reconfigure our narratives about it, and we've been slow to realise what this medium is capable of. It is only in recent years we've seen a true flourishing of [spatial interfaces](https://johnpalmer.site/#/spatialinterfaces) that mirror our physical experiences of the world.

### Embodying the Web

Mapping our understanding of physical space and direction onto the web was destined in a way that paper was not. Our physical bodies are the primary way we interact the world; we project our understanding of bodies in space onto everything we do. Particularly abstract activites. Politics has governmental _bodies_ with _arms_ of government. Economic indicators go _up_ and _down_, two concepts that require a body in the middle. Time is a line our bodies move along; the future is ahead and the past is behind us. We're looking _forward_ to next week and last year _flew by us_.

There is no complex, abstract thought that does not require and involve our embodied understanding of being creatures with ups, downs, lefts, rights, ins, outs, ons, offs, and betweens.

This theory of [embodied cognition](https://en.wikipedia.org/wiki/Embodied_cognition) – embodiment as essential and central to thinking – has been explored extensively over the last century. Researchers like [Maurice Merleau-Ponty](https://en.wikipedia.org/wiki/Maurice_Merleau-Ponty), [George Lakoff](https://en.wikipedia.org/wiki/George_Lakoff), [Eleanor Rosch](https://en.wikipedia.org/wiki/Eleanor_Rosch), [Barbara Tversky](https://en.wikipedia.org/wiki/Barbara_Tversky), and countless others have revealed how fundamental embodiment is to everything we think, do, and create.

The web is no exception. The physical and spatial qualities we design into it will always be more salient to us than its paper-ish vibes. The symbolic objects of the 1970's white-collar office is no match for millions of years of primal evolutionary understanding.

### Mixing and Making Metaphors

Despite the common folklore that we shouldn't mix metaphors, we have no problem seeing the web as both paper and place at the same time. It's a classic example of [**conceptual blending**](https://en.wikipedia.org/wiki/Conceptual_blending) <Footnote idName={1}>For more on Conceptual Blending, see Turner and Fauconnier's <a href="https://www.librarything.com/work/249581">The Way We Think</a></Footnote> – the mind's ability to combine multiple metaphors at once and from them produce emergent meaning. We've seamlessly combined the two to create an emergent notion of location-based pages.

As George Lakoff and Mark Johnson made clear in their touchstone book [Metaphors We Live By](https://en.wikipedia.org/wiki/Metaphors_We_Live_By), metaphors are the basis of all human thought and reasoning. The metaphors we use to speak about the web are not simply linguistic trivia – they determine how we understand it on a fundamental level. It determines what we think the web is capable of, what risks, opportunities, and challenges it poses. Which means the metaphors we use to think about the web **profoundly influence** what we think the web is, what we think we can do with it, and how we might change or evolve it.

## The Web in Geological Layers

The paper metaphor of the web hides almost everything about how the web works. Paper is a presentation layer. A flat object showing off the final result. Our shiny graphical interfaces offer us a limited range of options pre-selected by designers. They reveal none of the technical processes that cascade across the web when you press seemingly simple buttons like <button style={{ background: "var(--color-bright-crimson)", color: "white", padding: "0.2rem 0.8rem 0.4rem", borderRadius: "4px", margin: "0 0.3rem 0 0.3rem",  lineHeight: "1.8rem" }}>Save</button> <button style={{ lineHeight: "1.8rem", background: "var(--color-sea-blue)", color: "white", padding: "0.2rem 0.8rem 0.4rem", borderRadius: "30px", margin: "0 0.3rem 0 0" }}>Send</button> or <button style={{ background: "var(--color-light-cream)", border: "1px solid var(--color-gray-600)", padding: "0.2rem 0.8rem 0.4rem", borderRadius: "4px", margin: "0 0.3rem 0 0",  lineHeight: "1.8rem" }}>Submit PR Request</button>

This is both a feature and a bug.

How else might we see this system if we move beyond our presentational paper web? Rather than seeing the web as a flat, inert object we passively read, what if we saw the web as an interactive topology made up of various layers?

If you know anything about how our current web infrastructure came into existence, you're well aware the whole thing is a patchwork of technologies held together with duct tape. It is the furthest thing from a uniform system developed by a centralised team of developers.

Each piece of the modern web was built seperately. Unrelated individuals and teams of developers added layer upon layer. Each one building on top of existing systems, protocols, and standards.

This geological stack began with Vincent Cern and Robert Kahn establishing the TCP/IP protocol in 1973 – aka. the birth of the internet. That foundation slowly amassed layers like URLs, HTTP, HTML, SMTP, FTP, IMAP, DNS, SSH, REST, and 99 other acronymns. This layered understanding is closer to how developers see a website – as a set of systems they use, connect to, and expand off.

<BasicImage
  width="700px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_700/v1641414096/maggieappleton.com/notes/metaphors-we-web-by/weblayers_bcrfzz.jpg"
  alt="The web represented as a series of technological layers"
/>

When you're building a webpage, you're patching together a set of features and affordances. Do you want to add the ability to login? Do you want to integrate the Facebook like button?<Footnote idName={2}>On a moral level I don't recommend it, but this is the decentralised web and you're free to do as you wish.</Footnote> Do you want to let people enter text and save it to a database in the cloud? All of these options touch on different infrastructure layers of the web.

There's a data layer. There's a security layer. There's a visual design layer. There's a hypertext layer that links to other locations. There's an authentication layer. There's an algorithmic layer.

Almost all of these layers are completely invisible to “end users” of the web. They just see a flat static page. There is no topography. There is no transparency to how this website is structured or built. You don't know what other websites it's connected it, or where it's pulling data in from. The amount of technical literacy you need to even begin to see these layers is non-trivial.

<ComingSoon />

<Spacer size="small" />

<Subtext>
  Thanks to the members of the Citizens of Hypertext group for the conversations
  that sparked many of the ideas in this post.
</Subtext>


A history of our metaphorical understanding of the web

Metaphors We Web By


<IntroParagraph>

When it comes to visionary, before-its-time software, it's hard to find a better archetype than Ted Nelson's <a href="https://en.wikipedia.org/wiki/Project_Xanadu">Project Xanadu</a>.

</IntroParagraph>

It's infamous in the technology community as a sixty-year project that never quite launched. A cautionary tale of what happens when you overhype, underdeliver, and try to stuff an operating system's worth of features into a single piece of proprietary software. The kind of tale that makes our ferociously lean startup culture of Move Fast, Break Things, and Demo or Die seem almost sensible.

Xanadu was a hypothetical hypertext system. <Footnote isClosed idName={1}>The word hypothetical is a bit strong. Many versions were built. There is a working demo showcasing a few of its features [here](http://xanadu.com/xanademos/MoeJusteOrigins.html). But there is no active version on the App Store or Product Hunt I can link you to.</Footnote>

It's hard to read the word _hypertext_ in 2021 and not believe its synonymous with the system Tim Berners-Lee built in 1989 – the World Wide Web that became so much more than linked text on digital screens. The version of hypertext you are reading this on is the only hypertext most of us have ever known.

And yet the idea of hypertext predates Berners-Lee by two decades. The term was coined in 1963 by none other than Ted Nelson as part of a much larger vision; one small brick in the grand Xanadu dream mansion. <Footnote idName={2}>While Nelson coined the word, the notion of linked documents goes back to Jorge Luis Borges The Garden of Forking Paths" in 1941 and Vannevar Bush's Memex machine in 1945 – both significant, named influences for Nelson. </Footnote>

To talk about Xanadu, we need to put a pin in our current understanding of _hypertext_. Our preconceived notions of what a link is, how it works, and what digital text is capable of threatens to overwrite the alternate history we're about to explore.

Ted hoped Xanadu would be a medium for “[serious electronic literature](https://xanadu.com.au/ted/XUsurvey/xuDation.html)" – a paradigm shift that would free us from the material constraints of paper. His vision was the first to meaningfully consider how storing information in digital bits could reconfigure the way we read, write, cite, and share words.

Xanadu's failure to mature into a widespread, useable commercial product is great fodder a [dramatic cover story](https://www.wired.com/1995/06/xanadu/). One fuelled by the noticeably combative language in Xanadu's [documentation](https://xanadu.com/):

> “The computer world is a continual war over software politics and paradigms" where “we fight on" for “vindication" and “the last laugh."

One feels like the dinner guest who has stumbled into a raging martial argument over unwashed tea towels. You don't dare ask for context.

Yet these historical skirmishes and financial flops are also the least interesting thing about Xanadu. The most interesting part is its **Pattern Language**.

## Architectural Pattern Languages

<p>
  [[Pattern Languages]] are sets of flexible, reusable solutions to common
  design problems.
</p>

They come from the land of architects: the software developers of the material world. Namely, the architect [Christopher Alexander](https://en.wikipedia.org/wiki/Christopher_Alexander), whose philosophy of constructing vibrant and humane living space escaped the confines of urban planning and infused the world of software design in the late 1980's.

In their book [A Pattern Language](https://en.wikipedia.org/wiki/A_Pattern_Language), Alexander defined 253 architectural patterns for designing cities, towns, and homes. These became the example patterns for writing patterns. Each one is composed of a context, problem, example, and solution.

<ResourceBook
  url="https://en.wikipedia.org/wiki/A_Pattern_Language"
  image="/images/books/patterns.jpeg"
  title="A Pattern Language"
  author="Christopher Alexander"
>
  The book outlined a number of solutions for architecture and urban planning
  design, but the theory has since (appropriately) taken on a life of its own.
</ResourceBook>

For example, the design pattern **A Place to Wait** asks that we create comfortable accommodation and ambient activity whenever someone needs to wait; benches, cafes, reading rooms, miniature playgrounds, three-reel slot machines (if we happen to be in the Las Vegas airport). This solves the problem of huddles of people awkwardly hovering in liminal space; near doorways, taking up sidewalks, anxiously waiting for delayed flights or dental operations or immigration investigations without anything to distract them from uncertain fates.

Others like **Light on Two Sides of Every Room** and **Staircase as Stage** are fairly self-explanatory.

There's no single way to implement these design patterns. They are purposefully abstract enough to adapt to the situation at hand. Rules of thumb rather than sets of formulaic instructions.

## Xanadu as a Design Pattern

Taken as a collection of design patterns, Xanadu's documentation suggests solutions to some of the hypertextual problems we're wrestling with today;

- How do we structure information and build relationships between pieces of data that help us see them across contexts, and clarify understanding?
- How do we build systems that allow people to collaborate on shared documents without losing authorship? How do we credit and compensate authors based on their contributions?
- How do we bring ideas and data from a variety of sources into conversation with our own, while leaving a clear trail back to the origin?

Xanadu became a sad parable, when it should have been a piece of speculative design. A set of seeds scattered into the wind for other people to pick up and plant, rather than the patent-happy industrial farming conglomerate it tried to grow into.

Curiously enough, there appear to be rogue seedlings sprouting around the web. A number of Xanadu's design patterns are showing up in modern manifestations. We're finding ways to backwards engineer the original spirit of Xanadu into the existing structures of the World Wide Web.

<h1 style={{ marginBottom: "0.6rem" }}>The Patterns</h1>

### 1. Visible Links

Ted Nelson has many gripes, and **jump links** are one of his biggest. They're the kind of links we all use around the web today. Clicking a hyperlink is a bit of a gamble. It _jumps_ you into somewhere unknown. You find out when you get there.

We've found ways to adapt to this; Venkatesh Rao has a compelling exploration of how we've developed a [rhetoric of hyperlinking](https://www.ribbonfarm.com/2009/07/01/the-rhetoric-of-the-hyperlink/) to hint at where people are headed. Most browsers will do this more explicitly by showing you a URL preview, but they tuck them into the far corner in tiny text:

<BasicImage
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1623585337/maggieappleton.com/notes/xanadu/hover-preview-url_shrink_kxvwtp.png"
  width="1000px"
  alt="URL hover previews showing in the left hand corner of page"
/>

These can only tell you so much when modern URLs are often obscured by link shorteners and overstuffed with tracking queries. These solutions are only a band-aid on the underlying wound. They suggest where you're headed, rather than showing you.

Nelson's answer to jump links are **visible links** – links that show you the full context of where you're headed. These were an essential feature of Xanadu. In the original mockups for “_Xanadocs_" linked text would be connected to its source in a rather literal fashion: brightly colored highlights running between documents.

<ImageFrame
  width="1150px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1623916915/maggieappleton.com/notes/xanadu/xanadu_au17yq_shrink_tqkdxs.png"
  alt="One of the original UI mockups for a Xanadoc with visible links between text blocks"
  showalt
/>

This proposed solution relies on two other patterns – _parallel documents_ and _transpointing windows_ (covered below) – but the underlying principle was simply that links made their destinations clear.

In lieu of Xanadoc links, the modern web has landed on some fairly decent solutions to this issue: **hover previews and unfurls**.

**Hover previews** are when you can see a preview of the page you're headed to when you hover over a link. It's usually an excerpt that gives you the page title, the first few lines of text, and sometimes an image. Wikipedia was one of the first major sites to [add these](https://blog.wikimedia.org/2018/04/18/how-we-designed-page-previews-for-wikipedia/) in 2018.

<ImageFrame
  width="1150px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1000/v1592343673/maggieappleton.com/notes/Screenshot_-_2020-06-16_20.49.44.png"
  alt="Wikipedia's interface showing one of the hover previews that appear over links"
  showalt
/>

Hover previews have also become popular in the [[Digital Gardening]] community as a way to help visitors quickly navigate through collections of public notes and essays that are deeply interlinked. <a href="https://notes.andymatuschak.org/">Andy Matuschak</a> and <a href="https://www.gwern.net/index">Gwern Branwen</a> are two gardeners with good examples of how these work in action.

<ImageFrame
  width="1150px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1000/v1592343501/maggieappleton.com/notes/Screenshot_2020-06-16_at_22.38.06.png"
  alt="Andy Matuschak's notes website featuring hover link previews"
  showalt
/>

Similar to hover previews, **unfurls** are the preview cards that automagically appear when you paste a link into Twitter, Facebook, Notion, Miro, or any other richly-featured web app. If I paste a link to this great article on [building a more honest internet](https://www.cjr.org/special_report/building-honest-internet-public-interest.php) into a Tweet or Notion document, it automagically displays the feature image, title, and byline without any extra effort from me:

<ImageFrame
  width="600px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_800/v1623916885/maggieappleton.com/notes/xanadu/tweet-opengraph_o6eecg.jpg"
  alt="An open graph image preview appearing in a tweet"
/>

<ImageFrame
  width="850px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1000/v1623917579/maggieappleton.com/notes/xanadu/notion-ogpreview_shrink_ckiuyn.png"
  alt="Open graph previews appear in Notion when you paste a link and select 'Create Bookmark'"
  showalt
/>

This system is powered by the [Open Graph Protocol](https://ogp.me/) which Facebook introduced in 2010. This standardised format helps website authors define _metadata_ like titles, descriptions, authors, and images for each of their pages. These are automatically retrieved and “unfurled" when the link is pasted elsewhere on the web.

Both hover previews and link unfurls give you a good sense of where you're headed if you click on a link. They get us to _semi-visible_ links.

Previews aren't quite the same as physical links between parts of a page though. You lose the fine-grained associations between specific paragraphs and lines. If we wanted to dial up the Xanadu-esque visibility, we could work on showing previews of the whole page and directing people to specific pieces of text within it.

### 2. Parallel Documents

Ted's proposal for visible links relied on another key Xanadu pattern: **parallel documents arranged side-by-side**. This pattern allow us to see quotations in their original context, and quickly jump to the source material of documents.

It's also tricky to misquote someone and cherry-pick misleading excerpts when the reader has immediate, effortless access to the original.

<BasicImage
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_900/v1640076312/maggieappleton.com/notes/xanadu/transclusion_6_shrink_sl0vcb_mtepgz.jpg"
  alt="Three parallel documents with visible links between them"
/>

This sounds great in theory. Being able to lay multiple sheets of paper down side-by-side in meatspace is one of its shining qualities. Humans are very good at visually skimming information spread out in front of us – it allows us to quickly pattern-match by comparing and contrasting.

Ideally our digital mediums would lean into our ability to survey a large visual field. But the limitations of LCD screen sizes lead to some unsatisfying compromises. Instead, we end up squishing columns of documents onto our tiny screens.

The existing prototypes of Xanadu don't gracefully solve this problem in any way. Some of them – like the 2007 _XanaduSpace_ demo – suggest launching into the disorienting world of 3D paper where documents tower over you like skyscrapers.

<BasicImage width="" src="" alt="" />

Here's Ted to give you an interactive tour:

<Video
  style={{ marginBottom: "2rem" }}
  src="https://www.youtube.com/embed/cjXW5jKzjCA"
/>

Flying about in multiple dimensions feels slightly distracting when you're trying to write a detailed product spec or salvage your mediocre thesis.

We have developed some slightly less nauseasting solutions to this problem.

<Draft />

Tabs and slide-over windows help us quickly move between documents, although they still fail at letting us see more than two at once.

Many modern note-taking apps have popularised fat “sidebars" that are essentially second windows.

Roam Research, Obsidian, Logseq, and Innos are all designed for parallel documents

Arranging two windows side-by-side doesn't properly solve this problem. We can't select things from from one window and drag them into the next. The two windows don't know about each other and usually can't interact. They're connected to different data sources, possibly running in seperate applications. Copying and pasting text, images, or objects between the two is a cumbersome workaround.

The mobile-first responsive web also makes this tricky. There is simply no space on a 320px-wide screen to consider viewing multiple windows at once. Although patterns like horizontal scroll and slide-over windows might help solve this.

### 3. Transpointing Windows

Parts of documents visibly point to other parts

LiquidText

<ImageFrame
  width="1150px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1100/v1623925818/maggieappleton.com/notes/xanadu/liquid_rrgru8.png"
  alt="The interface of LiquidText with transpointing between sections of text"
  showalt
/>

[Azlen Elza](https://azlen.me/) managed to craft up this crazy demo inside of their Roam Research database.

<TweetEmbed tweetId="1272600877493137408" />

### 4. Transclusion

- [[Transclusion and Transcopyright Dreams]]

### 5. Bi-Directional Links

- [[A Short History of Bi-Directional Links]]

### 6. Version Control

In the age of Git, we tend to take version control for granted.

The first version control system dates back to [1975](https://en.wikipedia.org/wiki/Version_control#History). It's now difficult to imagine programming without it.

### 7. Modular Text Blocks

The core building block of the web has always been documents. While the idea of a web*page* has evolved far beyond it's original idea, we still construct, connect, and navigate websites at the page level.

The early web was built for academic researchers to share their work, in a time before all the plebs invaded with our bleeding-heart livejournal entries, dancing baby GIFs, and TikTok moves. These researchers designed the system to mimic their primary medium of communication; paper-based academic articles and documents.

This paper document design metaphor determined many of the early architectural decisions. URL addresses were set at the _page_ level, rather than the paragraph. Inline images were an afterthought, and even a contentious addition to the spec. <Footnote idName={3}>No one seriously considered the possibility of adding videos or animations. The presumption visual images are a impoverished medium for serious intellectual thought is a whole other kettle of fish.</Footnote>

Blocks construct documents

Notion pioneered this in the note-taking space

Explosion of note-taking apps using a block-first approach: Roam, Innos, Clover, Craft, Kosmik

### 8. Stable, Universal Addresses

The web enforces addresess on the document level rather than the block level

No stability at all, link rot everywhere

URL queries and subpaths

Roam block UIDs

### 9. Annotation

[Hypothesis]()

Google docs comments

### 10. Multiple Views and Spatial Arrangements

Graph previews are a weak version of this

Notion linked databases that offer various view types

Most modern dashboards offer multiple ways to view data

ZigZag format

### 11. Micropayments

Jarons Lanier's dreams in Who Owns the Future

The inescapable cost of transactions

Web Monetisation API, Coil

Grant for the Web

Graeber's money-as-debt, soft money, local currencies and DAOs

---

The original Xanadu vision was ambitious. Unreasonably ambitious. The above feature list is a small selection.

Perhaps you sense the problem.  
Solving all the things all at once gets tricky.

Instead, what we're now seeing is the ad-hoc, decentralised manifestation of Xanadu in bits and pieces.

People are building Xanadu without knowing what Xanadu is.  
Which is the essence of a good pattern language; true patterns evolve naturally within systems, and are found rather than crafted. <Footnote idName={4}>Christopher Alexander's <a href="https://en.wikipedia.org/wiki/The_Nature_of_Order">The Nature of Order</a> goes deep on this principle</Footnote>

In the grand scheme of things, 60 years isn't an extraordinary amount of time to spend solving a problem. It's about 0.09% of history since humans first started creating symbolic cultural artefacts <Footnote idName={5}>Using <a href="https://en.wikipedia.org/wiki/Cave_of_La_Pasiega">La Pasiega Cave</a> in Spain as a relative marker - 65,000 y.a.</Footnote>

Who knows, maybe Xanadu can still happen (if you clap for it) ✨

<br />

<BasicImage width="500px" src="https://3.bp.blogspot.com/-s2BU-a7w2bc/VuNwBkwNSSI/AAAAAAAARDg/P_UuFud4PmIfKQoJLq4EHYxVL6YL8TQsw/s1600/XANADU.jpg" />




Project Xanadu as a pattern language, rather than a failed software project

The Pattern Language of Project Xanadu


<IntroParagraph>

Eight years ago, one of my undergraduate professors handed me the book [Addiction by Design](/addiction-by-design) by [Natasha Dow Schull](https://www.natashadowschull.org/). It's a gorgeous ethnographic tale of gambling machines and the people addicted to them.

</IntroParagraph>

<ResourceBook
  url="https://www.librarything.com/work/9697447"
  title="Addiction By Design"
  image="/images/books/addiction.jpg"
  author="Natasha Dow Schull"
>
  Addiction by Design takes readers into the intriguing world of machine
  gambling, an increasingly popular and absorbing form of play that blurs the
  line between human and machine, compulsion and control, risk and reward.
</ResourceBook>

It's more than a voyeuristic insight into people who sit at slot machines for 48 hours straight though. The garish floors of Las Vegas casinos become a venue to explore our embodied relationships with machines, the nature of technological dependence, and the potential hazards of mixing algorithmic systems with Capitalist incentives.

The book was my gateway drug into the field of **digital anthropology** (also known as _[cyborg anthropology](https://en.wikipedia.org/wiki/Cyborg_anthropology)_ back then), as well as its sister discipline [Science and Technology Studies](https://en.wikipedia.org/wiki/Science_and_technology_studies) (STS).

I fell for it hard. The way everyone falls for big, intoxicating ideas at twenty-one. Like Marxism or Foucauldian Power or Quantum String Theory. But unlike my other intellectual flings, this one stuck with me.

It let to a thesis on the [[Quantified Self]] movement, technological embodiment, and [Western Cosmology](/sadness-sweetness). I'm still exploring all the same research questions now, just through different means and ends.

After a few professional detours through illustration, web design, programming, and art direction, I'm circling back to my digital anthropology roots.

Which means I'm being asked the question “so... what _is_ digital anthropology?” far more frequently.

## What is 'Anthropology'?

Forgive the obviousness of this, but like it says on the tin, it's the intersection of _cultural anthropology_ and _digital things_.

Let's break these two down, because they're both are open to generous interpretation.

<BasicImage
  width="1000xpx"
  alt="A venn diagram showing the intersection of anthropology and digital systems"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1000/v1602606477/maggieappleton.com/notes/digital-anth/whasdigitalanth.png"
/>

> _Cultural anthropology_ is the study of human culture – our narratives, symbols, rituals, habits, beleifs and norms.

Or as [Clifford Geertz](https://en.wikipedia.org/wiki/Clifford_Geertz) put it, it's all the webs of meaning and significance we spin for ourselves <Footnote id={1}>If you'd like more insightful writings on the nature of culture, Geertz's [The Interpreation of Cultures](/interpretation-cultures) is an essential read</Footnote>.

That might sound pointlessly generic. Plenty of disciplines study culture – sociologists, historians, and economists among them.

What defines Anthropologists is that we study culture through **participant observation** <Footnote id={2}>Anthropologists use all manner of other methods too – surveys, data collection, interviews, mapping, and historical research. But active participant observation is at the heart of the discipline</Footnote>
– the act of completely immersing yourself in another culture for a long period of time as both an active _participant_ in it, and _an observer_ of it. You join in the dance, and then analyse what the dance means.

Essentially, we study culture at an “on the ground" level – looking for the individual stories, rich details, particular nuances, and [thick description](https://en.wikipedia.org/wiki/Thick_description) you can only find by spending extended time with people in their daily lives.  
As opposed to pointing a telescope at them from afar, bringing them into labs to run hypothetical experiments, or amassing troves of personal data and analysing it for the 'big trends'.

If you want to know more about Anthropology, I can enthusiastically recommend Tim Ingold's short but beautiful introduction [Anthropology: Why It Matters](https://www.librarything.com/work/21675598).

<ResourceBook
  url="https://www.librarything.com/work/21675598"
  title="Anthropology: Why It Matters"
  image="/images/books/anthro.jpg"
  author="Tim Ingold"
>
  In this concise volume Ingold covers the history of anthropology – including
  all the gossip about academic infighting, divergent lineages of thought, and
  the major debates of the field.
</ResourceBook>

## What counts as “Digital"?

By _digital things_ I mean objects and systems based on binary logic – the 1's and 0's that run all of modern computing.

Given that _digital_ systems are now pervasive across human societies and take on a million manifestations, it feels a bit trite to try and define it. But this description fits quite well.

It comes from Miller & Horst's essential introduction _[The Digital and the Human](https://www.ucl.ac.uk/anthropology/people/academic-and-teaching-staff/daniel-miller/digital-and-human-prospectus-digital-anthropology-1):
A Prospectus for Digital Anthropology_

Binary code enables us to simplify information down into single bytes that can be easily stored, copied, manipulated, and sent through fibre optic cables at warp speed. It's what makes all modern communication technologies possible. It's also a sufficient catch-all category for the kinds of things Digital Anthropologists study.

We're into algorithms, data, anything to do with the internet, robotics, programming, virtual currencies, the gig economy, wearable devices, ubiquitous computing, and yes, weird subcultures in the dark corners of 4chan.

Or more specifically, we're interested in understanding the cultural _symbolism, narratives, beliefs, rituals, taboos, economics, power dynamics, and daily practices_ around those things.


A discipline at the intersection of cultural anthropology and binary logic

A Brief Introduction to Digital Anthropology


<IntroParagraph>

Behaving Paleolithic is one of the most effective ways to signal you are _with it_ in the Anthropocene.

</IntroParagraph>

Over the last decade, in a geological epoch we've decided is so distinctly “human” we appointed ourselves its namesake, we've become enamoured with a story of life 3.3 million years ago. Back when humans were a tiny smear on earth's surface, and no one gave a shit about carbon credits, microplastics, opioid overdoses, or whether modern monetary theory should be taken seriously.

Paleolithic peoples, so the tale goes, spent most of Tuesday strolling under Baobab trees, running their hands through the long elephant grass, and breathing in the sweet dust of the open Savannah. On Wednesdays they carefully chipped away the edges of Levallois blades, swept dust out of the home cave, and snacked on freshly gathered almonds. On Thursdays they gathered into small bands – a hand-picked selection of the finest endurance runners this side of Nairobi – tracked down an elephant, and sprinted after it barefoot for nine hours until the creature – dehydrated, exhausted, and unable to sweat out the excess heat – crumpled into a violently sad face-plant in the hot, gritty sand. Our strapping, supple ancestors jogged to a halt beside it, barely out of breath, to carve up its flesh and bring home the elephant bacon. Later that evening they would break their 36 hour intermittent fast, retire to the lake, and engage in polyamorous affairs.

We know all this to be true. National Geographic told us so. Or rather, National Geographic made hairy clay figurines, arranged them in an imagined stone age diorama, photoshopped mammoths, giant sloths, and glyptodons into the background, and burned that image into the eyeballs of every small child born after 1980.

This vision of life before We Ruined Everything is an alluring fever dream. In a moment where we are tightly tangled in the wicked problems of climate change – a series of widespread human failures that will end in our ecosystem cooking, drowning, starving, and suffocating the most vulnerable of us – nothing sounds quite as appealing as rewinding the clock. Ctrl + Z please.

Paleolithic people of the 21st century are simply trying to get back to [[Nature]]. They fill their Amazon carts with 12-packs of Primal Pantry Coconut Macadamia Raw Snack Bars ($15.99 with free next-day delivery on Prime – score). They melt pats of Land-O-Lakes butter into their morning Nespresso shot, and snack on seasoned bone broth concentrate to mimic the diet of yesteryear. They sprint 3.5 miles on treadmills in Vibram Five Fingered shoes to remind their feet how run using the Pose Method™️.

They refuse to join the swath of soft, sensitive, snowflake bodies, hunched over glowing MacBook screens and posting Marxist memes to [r/LateStageCapitalism](https://www.reddit.com/r/LateStageCapitalism/), licking Harvest Cheddar powder off their fingertips in between keystrokes.

This is not meant as an unkind, savage critique. I write this as someone who runs in barefoot shoes and tries not to eat things my great-great-great grandmother [wouldn't recognize](https://michaelpollan.com/articles-archive/six-rules-for-eating-wisely/) as food.

As a participant in our collective paleolithic nostalgia, I find it curious. Why do we long for a time when the average life span [was 22](https://en.wikipedia.org/wiki/Life_expectancy#Maximum) and everyone was wracked by [tuberculosis](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3313944/)?

<ComingSoon />


Longing for the paleolithic past in the Anthropocene

Paleolithic Nostalgia


<AssumedAudience>

People who are curious about _digital gardening_ but don't have a background in programming or web development.

</AssumedAudience>

<Spacer size="small" />

<IntroParagraph>

Up until recently, the idea of [[Digital Gardening]] was unknown outside the world of web development.<Footnote isClosed idName={1}>If you're new to the idea of digital gardening I suggest you read my essay on the [history and ethos](/garden-history) of it first.</Footnote> All of the early gardeners were web developers to some degree – we all knew our way around a Github repo, could paste commands into the terminal, and hack things together enough to get an experimental website up and running.

</IntroParagraph>

Because the movement began with a technical crowd, all the initial tools assumed a certain level of knowledge around HTML/CSS, JavaScript, DNS redirects, and static site generators.

My own collection of [digital gardening tools](https://github.com/MaggieAppleton/digital-gardeners) on Github will point you towards various frameworks and plugins designed for gardening... but most of the solutions require a reasonably high level of technical literacy.

I kept receiving messages from folks who desperately wanted to get in on the gardening action, but described themselves as “non-technical.” <Footnote idName={2}>I want to acknowledge calling anyone _non-technical_ is controversial, since it suggests some people are inherently unable to code or wade through complex digital tools. I obviously don't believe that's the case, but want to recognise some folks feel less comfortable programming and troubleshooting digital systems than others.</Footnote> I hated telling these folks I didn't know how to help them.

Thankfully, that's starting to change. Over the last year, a number of tools have popped up that make it _much_ easier to plant a digital garden without touching code. As the idea of digital gardening [spreads](https://www.technologyreview.com/2020/09/03/1007716/digital-gardens-let-you-cultivate-your-own-little-bit-of-the-internet/), these accessible services will become critical. The gardening gates are finally opening so more folks can cultivate their own corner of the web.

---

## Gardening with Notion

[Notion](https://www.notion.so/) is one of the easiest and quickest ways to start building a digital garden when you're not code-savvy.

Notion claims it's a note-taking app for teams – a shared space for documentation and planning. Which it is. However, it's also secretly one of the best tools for building no-code websites.

<ImageFrame
  alt="The Notion homepage which presents itself as a notes app for teams"
  showalt
  width="1000px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1622718832/maggieappleton.com/notes/nontechnical-gardening/notionhome_td8vd5_shrink_c6pnkg.png"
/>

Think of Notion as Google Docs on steroids. It allows you to create pages of text using plain markdown. You can then style that text, create multi-column layouts, add images, embed links, and build spreadsheets in the middle of a document. You can also link these pages together, which begins to make Notion look strangely like a simple website builder. 🤔

I won't go into the details of how to use Notion here. If you're new to Notion I recommend you watch this [intro video](https://www.notion.so/guides/notion-training-the-basics) (8 mins), play around in the app for a bit, watch their [advanced tutorial](https://www.notion.so/guides/notion-training-advanced) (13 mins), then watch [How to Publish Notion Pages](https://www.notion.so/guides/publish-notion-pages-to-the-web) to the web. This should give you the 80/20 on how Notion works.

The two killer features that make digital gardening possible in Notion are **backlinks** and **share to web.**

**Backlinks** are a [fairly new feature](https://www.notion.so/guides/creating-links-and-backlinks) in Notion. They make it possible to create [[Bi-Directional Links]] between pages, meaning each page shows which other pages are linked to it. This allows you to build up deeply interlinked content – one of the hallmarks of a digital garden. People browsing your garden can jump between related pages anywhere on the site, rather than only being able to navigate posts in chronological order.

<ImageFrame
  width="1000px"
  showalt
  alt="Backlinks in Notion show up right underneath the title of a page"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1622718954/maggieappleton.com/notes/nontechnical-gardening/roam-backlink_shrink_vjkwyj.png"
/>

The second important feature is the **Share to Web** button. This allows you to create a Notion document and publish it to the web in one click. Anyone can visit that link and view your document. You now essentially have a website without needing to worry about hosting, domains, web frameworks, or a CMS. 👏 Slow 👏 Clap 👏

You can find Notion's **Share to Web** feature under the **Share** menu in the top right corner of each page.

<ImageFrame
  width="1000px"
  showalt
  alt="An example of where to find Notion's 'Share to Web' settings"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1623402131/maggieappleton.com/notes/nontechnical-gardening/roam-garden-share_shrink_shrink_kwlpxi.png"
/>

I went ahead and built a very small, pretend digital garden to show you how this might work. I created a few basic pages (about and contact me), and built two databases – one for writing and one for books. Here's [the live version](https://www.notion.so/Maggie-s-Pretend-Garden-ad29880fed054ba1a0872d3e06252f81) you can poke around.

<ImageFrame
  width="1000px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1622718505/maggieappleton.com/notes/nontechnical-gardening/roam-fake-garden_qvgrrz_shrink_oodv8u.png"
  alt="My example digital garden in Notion"
  showalt
/>

This example is very basic, so it will probably help to look at more fully grown Notion gardens like [Philip in the Woods](https://philipb.cc/) and [Chinarut's Digital Greenhouse](https://www.notion.so/Chinarut-s-Digital-Greenhouse-9b31c7ba8efc4bf9adcfa17a38c841ff).

<Spacer size="small" />

### Notion's Downsides – SEO, Speed, and Domain Names

There are three major issues with using Notion as a website or digital garden:

1. **Poor SEO** – Notion pages aren't designed for **search engine optimization** (SEO). This means anything you publish to your garden won't be easy to find via search engines like Google or DuckDuckGo. This might not seem like a big deal, but it means people who would find your content useful and relevant might never find it.
2. **Slow Speeds** – Notion isn't optimised for speed. It can be very slow to load on mobile devices. If you have a lot of images on your Notion garden this slows things down even more.
3. **No Custom Domain Names** – Your domain name is the URL people type into their address bar to get to your site (eg. _gardening.com_). Having a domain name that is memorable and not too long makes it easier for people to remember the address and share your site with others. When you build a garden on Notion, you can't choose your own domain name.

### Solutions: Notion-as-a-Website Services

Luckily, there are solutions to all the disappointing issues I just described.

Three services have appeared that help you turn your Notion into a more legitimate website with SEO indexing, faster pages, and custom domain names: [Fruition](https://fruitionsite.com/) (free, but a little technical to setup), [Super](https://super.so/) ($12/month) and [Host Notion](https://hostnotion.co/) ($5/month) <Footnote idName={3}>None of these services have paid me to recommend them, and those aren't affiliate links. I haven't personally used them myself, so take a look at each option and decide for yourself.</Footnote>

Notion is also responding to the fact more people are using it as a website-builder and improving these problems. They recently added SEO indexing if you pay for the _Personal Pro_ plan ($4/month), and are reportedly working on custom domains and speed improvements. I wouldn't be surprised if they strategically lean into this Notion-as-a-Website trend in future product features.

---

## Gardening with Obsidian

[Obsidian](https://obsidian.md/) is a fairly new app that's primarily a private knowledge base, but also allows you to publish a selection of your notes as a public website.

It has many of the fancy features we've come to associate with the “[tools for thought](https://mitpress.mit.edu/books/tools-thought)" space, building [Second Brains](/basb), and digital gardening. These include [[Bi-Directional Links]], hover previews, and visual graph overviews.

<ImageFrame
  showalt
  alt="What the Obsidian desktop app looks like with markdown notes and a visual graph"
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1620631584/maggieappleton.com/notes/nontechnical-gardening/obsidian-home_wsyxt1.png"
/>

It also requires very little technical know-how to use. All your writing is stored as simple markdown files, so importing and exporting notes from other apps is easy.

The private notes app is free to use, but if you want to publish your notes to the web it's $8 per month. [Moby Diction](https://publish.obsidian.md/mobydiction/notes/_About)'s garden and [Joschua's Garden](https://joschuasgarden.com/) are both good examples of what a live Obsidian site looks like.

<ImageFrame
  showalt
  alt="What a live obsidian website looks like"
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1620562494/maggieappleton.com/notes/nontechnical-gardening/joschua.png"
/>

You have some control over over the visual presentation of your Obsidian website, but it's limited by your skills with CSS. <Footnote idName={4}>Cascading Style-Sheets are the way we apply visual styles to websites. If you've never written any, I'd highly recommend working through Khan Academy's short [Intro to HTML/CSS](https://www.khanacademy.org/computing/computer-programming/html-css) course. It will make a world of difference helping you understand the basics of how a webpage works.</Footnote> They have a few basic themes you can pick from, so it's up to you how much time and effort you want to invest in customising it.

My only bugbear with Obsidian is that it's obsessively text-focused, and doesn't give you much space to play with images, visual styles, or layouts. Some people will consider this a feature, not a bug. 🙃 I personally find the format restrictive, but it's part of my much larger gripe with the note-taking space and its [[obsession with linear text]].

Overall, Obsidian is a great option for anyone who wants to keep their garden simple, non-technical, and get up and running quickly. I think it has a bright future given the enthusiastic community rallying around it.

---

## Gardening with Roam

[Roam Research](https://roamresearch.com/) is one of the cornerstones of the digital gardening movement and its associated philosophies of knowledge graphs, zettelkasten, and learning in public.

Roam is primarily used for private note-taking, but also allows you to publish publicly visible knowledge graphs others can browse.

<ImageFrame
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1623401197/maggieappleton.com/notes/nontechnical-gardening/roamsharesettings_hg3gzm.png"
  alt="The Roam settings panel where you can select who can read or edit a graph"
  showalt
  width="1000px"
/>

Roam is an easy way to make a quick digital garden, but it leaves a lot to be desired in terms of aesthetics and the experience for people who come to your Roam graph. There's not a lot of easily visible context around who's graph this is, what they write about, and how to navigate the space.

[Roam Garden](https://roam.garden/) is a new service that helps solve a lot of these problems. It allows you to use Roam as your source of notes and selectively sync a section of your graph to the public web in a format that is much friendlier for visitors. You can land them on a homepage that explains how to browse and gives them a few entry points.

If you're already using Roam as your primary note-taking space this system might be your best bet. It's $7.50 per month and is a big aesthetic step up from using Roam directly.

<ImageFrame
  showalt
  alt="The standard layout of a website built with Roam Garden"
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1622718841/maggieappleton.com/notes/nontechnical-gardening/roam-garden_rcuvdi_shrink_wvm5mv.png"
/>

The only limitation of this system is that the visual formatting is fairly strict. It's similar to Obsidian in that you can't do much customisation of layout or styling. It does however include all the “standard” features like link previews, sliding windows, a visual graph, and (of course) backlinks between pages.

Here's an [example website](https://vlad.roam.garden/) built with Roam Garden. As Roam Research grows, I expect services of this nature will develop alongside it.

<Spacer size="small" />

## What Gardens are Not

I want to add a final note on here: we should be careful not to mistake the technical features of a garden for the ethos of gardening. We have reached the point in the gardening hype train where people seem to think backlinks, hover previews, and visual graphs are what define a “digital garden."

This is misguided. Gardening is a practice that treats a personal website as a constantly evolving landscape where you develop your ideas in public.

Gardens are...  
a) **Explorable**, rather than structured as a strictly linear steam of posts. This is usually achieved through deeply interlinking notes where readers can navigate freely through the content.  
b) **Slowly grown over time**, rather than creating “finished” work that you never touch again. You revise, update, and change your ideas as they develop, and ideally find a way to indicate the “done-ness” state to your reader.

No framework, platform, plug-in, service, or fun interface element defines a garden, and never will. Do whatever works for you, at whatever technical level feels comfortable. Just keep gardening <span role="img">🪴</span>


How to build a digital garden without touching code

Digital Gardening for Non-Technical Folks

A newly revived philosophy for publishing personal knowledge on the web

A Brief History & Ethos of the Digital Garden


<IntroParagraph>

In 2013, in a dutch cellular engineering lab just outside of Utrecht, pharmacologist Mark Post [produced a piece of meat](https://www.new-harvest.org/mark_post_cultured_beef) without killing an animal. <Footnote idName={1}>That's the short version of the story. For the meaty details take a look at my illustrated notes on the book [[Meat Planet]]</Footnote> This is terribly impressive. But it also splatters a gigantic can of worms across our definition of “meat.” And by extension the entire food pyramid.

</IntroParagraph>

What is meat without a dead animal? How is that possible? And why does it make some people internally recoil deep in their gut?

## Why do we think 'lab-grown' meat is dirty, icky, or dangerous?

As Mary Douglas so poetically put it, “[[dirt is matter out of place]].” Anything that breaks our known order of the world that we design is a potential threat.

Food is a structured system - from the bite to the dish to the course to mealtimes to the weekly sunday roast to the monthly fast to the annual festival.

We get obsessive about creating rules, divisions, and norms around food. There are times and places and contexts to eat specific things. Oatmeal doesn't belong at the evening dinner party. Wine with breakfast is a disease. Combining cabbage with cake would lead to losing a few friends.

New forms of meat are suspect and transgressive because they cross our established boundaries.

Plant-based meats like the [Beyond Burger](https://www.beyondmeat.com/products/the-beyond-burger/) sit in neither the plant nor animal world, appearing as one while made from the other.

Our current food classifications do not have space for them. The division between vegetables and meat is fundamental. Plants vs animals. Fibre vs protein. Inert vs sentient. Green vs red.

Cultured meat, on the other hand, denies a fundamental part of the definition of meat. The dead animal part.

## The Great Wall of Nature/Culture

There is an imaginary wall in our minds that divides the world of [[Nature]] from the world of Culture. We seem to believe these are eternal, inherent categories of things in the world.

Mushrooms are Natural goodness incarnate, and microplastics are a polluting castoff from the Cultural behaviour of humans.

It wasn't always there. The men of 18th century “Western” rationalist science built it - Francis Bacon, Rene Descartes, and their kin.


How to offend everyone with boundary-crossing steak and nuggets

Problematic Proteins

A case study showing how I make illustrations for abstract programming concepts

How to Draw Invisible Programming Concepts: Part I


<IntroParagraph>

This site spans the full array of my weirdo interests and niches. And [cultured meat](https://en.wikipedia.org/wiki/Cultured_meat) is certainly part of that equation. If you've never heard of _"cultured meat"_, this will be a great primer.

</IntroParagraph>

I spent the Christmas lull of 2019 devouring Ben Wurgaft's book 'Meat Planet'.
Needing an outlet for my over-enthusiasm for it, I started working through my notes and picking out the best themes and ideas to turn into a set of illustrated explorations.

<ResourceBook url="https://www.librarything.com/work/23264324" title="Meat Planet: Artificial flesh and the future of food" author="Ben Wurgaft" image="/images/books/meat.jpg">

Meat Planet is an anthropological and historical tour through the quest to generate meat in the lab—a substance sometimes called “cultured meat.” The journey asks what it means to imagine that this might be the future of food.

</ResourceBook>

I'd been following the media hype around the promise of 'cultivated meat' since early 2017 -- mostly as a curious layperson who indulges in reading Silicon Valley techno-utopian gossip the way others watch Keeping Up with Ru Paul's Real Housewives of Love Island.

I was primarily drawn to the cultural implications of the idea.

Seen through an anthropological lens, cultivated meat prompts a series of fascinating questions;

- What do we mean by 'natural' and 'unnatural', 'real' and 'fake'?
- Why do some people react to the idea with disgust and revulsion? What makes us culturally categorise things as 'icky' and 'gross'?
- How do we define the categorical boundaries and rules around food, and how malleable is that framework?

Since most of the discussion was happening on Hacker News and Twitter (not usually founts of philosophical reflection), I didn't expect anyone to meaningfully explore these questions.

The chatter instead orbited around short-term technological viability, or time-to-market, or IPO stock price speculations of hypothetical products.

I was then thrilled to see an anthropologist & historian step into the ring among all the TED-talky-thought-leadering-VCs.

Ben approached the topic through a series of wide-scale historical, cultural, and sociopolitical questions on the nature of what meat is without the dead cow involved.

He uses the promise of animal-free meat as a jumping off point into deeper historical trends about scientific ideologies, Calvinistic Capitalism, [[paleolithic nostalgia]] and the presumed division of [[nature and culture]].

Ben's neutrality is a large part of what makes this a good read - he's not for or against it. He's curious.

His agenda is to make you think on a very different level than the mountain of Wired articles on the topic. And he's asking way better questions than _when can I buy it?_, _will it give me cancer?_, and _what will we do with all the cows??_

Reading this book was akin to having a far more intelligent and academically informed companion take my half-formed pedestrian observations and flesh them out into high-definition, coherent scenes.

The illustrations below are not a comprehensive summary of the book. They're selected snippets filtered through my own research interests and curiosities. With a good dose of extra commentary layered on top. If they pique your interest, I promise there's plenty more meat in the actual book <span>🍖</span>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353999/maggieappleton.com/essays/meat-planet/OriginStoryLabMeat_1-Full_2x_gipupn_shrink_ct94tz.png"
  alt="In august of 2013, a research team led by pharmacologist  mark post made a piece of meat without killing an animal. They took a tiny sample of stem cells from the muscle tissue of  a living belgian blue cow, brought it into the lab, and placed it 'in virto' meaning under glass."
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353998/maggieappleton.com/essays/meat-planet/LabMeatOrigin_Frame234_ruzewo_shrink_hhihom.png"
  alt="Then fed it a 'growth medium' – a solution made up of glucose, fats, salt,  amino acids, vitamins and minerals. The same nutrients it would receive inside a cow. After several months, the cells had multiplied enough to form a standard 40 gram burger patty."
/>

<BasicImage
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353998/maggieappleton.com/essays/meat-planet/Paleominds_copy_fzzreh_shrink_hjim38.png"
  alt="There is a pervasive and widely unquestioned claim in popular culture that we have paleolithic minds. That we are mentally hardwired as some imaginary savannah dwelling protohuman whose taste for meat is 'original, innate, and natural to desire'"
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623354002/maggieappleton.com/essays/meat-planet/ReductiveSociobiology_Full_copy_ck0gv2_shrink_lnf0gp.png"
  alt="This claim is a classic example of reductive sociobiology – an ideology that evolutionary psychology attempts to explain all human behaviour and culture through"
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623354000/maggieappleton.com/essays/meat-planet/TechDisharmony_2x_ttigav_shrink_kw3vfy.png"
  alt="Our persistent desire to rediscover our biological condition speaks to the concern modern humanity is plagued by a lack of synchronicity between our bodies and their myriad artificial extensions"
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353998/maggieappleton.com/essays/meat-planet/PaleoBarProsthetics_2x_iaw9cc_shrink_zbkbce.png"
  alt="The idea seems to be that our problems would be solved if we had better prostheses. Which leaves us attempting to realign ourselves with nature by ordering a dozen raw, vegan, gluten free, organic, free-range, non-gmo, naked paleo bars"
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353998/maggieappleton.com/essays/meat-planet/IndustrialMeat_lsln54_shrink_wr4cia.png"
  alt="Everything about modern meat returns us to this notion of disharmony. We are all well versed in the story of industrial animal agriculture. We maintain a polluting, dangerous meat production system"
/>

<BasicImage
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623354000/maggieappleton.com/essays/meat-planet/Unfathomable_Meat-Part2_euirvx_shrink_otolaa.png"
  alt="These systems allow an unprecedentedly large human population to consume an unprecedentedly large amount of animal flesh per capita per annum"
/>

<BasicImage
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623354000/maggieappleton.com/essays/meat-planet/Unfathomable_Meat_1_y0fqkd_shrink_r5tkdl.png"
  alt="The network of technologies making this possible includes government subsidies and regulations, consolidated corporate agro-businesses, optimised supply chains, breeding systems, and specialised marketplaces"
/>

<BasicImage
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1200/v1623353999/maggieappleton.com/essays/meat-planet/JesusMeat_OG_ofts8d_shrink_bjnljb.png"
  alt="It is within this horror show that the cultivated meat industry has positioned itself as the bright, shiny solution. The saviour of meat come to bless us with its perfect mix of morality and untapped profit"
/>


Visualising the cultural narratives around cultured meat

Meat Planet: The Illustrated Notes


<IntroParagraph>

With the recent rise of [Roam Research](https://roamresearch.com/), the idea of bi-directional linking is having a bit of a moment.

</IntroParagraph>

We're all very used to the _mono-directional_ link the World Wide Web is built around. They act as one-way pointers we follow in a linear sequence.

While we can link to any site, the destination page hasn't a clue we've done so.

We set up all these single direction paths, trying to signal relevance and context, only to have the other side completely ignore our efforts.

Our monolinks are trying to establish relationships in vain.

<BasicImage
  width="950px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1589455927/maggieappleton.com/notes/Hyperlinks.png"
/>

We're starting to look around our mono-linked environment, and wonder why it's so hard to surface relevant, contextual relationships.

Manually interlinking content takes an awful lot of human curation and effort. Effort we should probably slog off onto our systems.

> ✶ Enter the bi-directional link ✶

A _bi-directional_ link has **social awareness** - it knows about other pages or 'nodes' that point to it, and can make them visible to people. This means we get a two-way conversation flowing between our web locations.

<BasicImage
  width="950px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1589455927/maggieappleton.com/notes/Hyperlinks_2.png"
/>

---

## Bi-directional links are not new

The idea of the bi-directional link goes all the way back to 1945, when [Vannevar Bush](https://en.wikipedia.org/wiki/Vannevar_Bush) dreamed up the [Memex](https://en.wikipedia.org/wiki/Memex) machine.

Vannevar outlined this hypothetical gadget in an essay in _The Atlantic_ called [As We May Think](https://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/). He wanted a system capable of “associative indexing... whereby any item may be caused at will to select immediately and automatically another... [so that] numerous items have been thus joined together to form a trail.”

This essay turned out to be a foundational document for the ideologies that directly led to both the internet and the Web. <Footnote idName={1}>Yes, those are two entirely seperate pieces of technology.</Footnote> Vannevar was one of the key movers and shakers rallying folks to help build the original internet infrastructure. He coralled folks at MIT, the US Department of Defence, the National Science Foundation and various research labs like the Standford Lincoln Lab, Bell Labs, the RAND corporation, and Xerox PARC to get involved. <Footnote idName={2}>Walter Isaacson, [The Innovators](https://www.librarything.com/work/15179823): How a Group of Hackers, Geniuses, and Geeks Created the Digital Revolution (London: Simon & Schuster, 2015).</Footnote>

Suffice to say, the guy was driven by a belief that enabling people to connect information and share knowledge would expand the scope of human understanding. The Memex was one idea of how that might manifest in material form.

<br />

<BasicImage
  showalt
  alt="Vannevar even created a small informative diagram of this desk-bound vision. Marketing chops 101."
  width="800px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,w_960/v1589545798/maggieappleton.com/notes/memex.jpg"
/>

Vannevar's evocative description of the Memex is especially impressive given that digital computers had only come into existence 5 years earlier. Most were still the domain of large military operations like Bletchley Park, and seen as inconveniently large calculators.

Implementing a wildly interactive computational personal knowledge base wasn't much of an option.

So the idea went into hiberation, and didn't resurface until the idea of personal computing began blooming in the sixties and seventies. [Ted Nelson](https://en.wikipedia.org/wiki/Ted_Nelson), an unlikely film director and sociologist, stumbled into a series of computing lectures and began to imagine how graphical interfaces might reinvent the way we write and connect ideas. He took inspiration directly from Vannevar's essay, and in 1965 when he coined the term _hypertext_ to describe his vision for a sprawling network of interlinking information.

Nelson planned to implement these hypertextual dreams in his perpetually-imminent Project Xanadu. <Footnote idName={3}>If you have some time, this is quite the internet history [rabbit hole](https://en.wikipedia.org/wiki/Project_Xanadu) to run down. Ted Nelson is on [another level](https://www.youtube.com/watch?v=F0NgV3yNd2o).</Footnote>

The Xanadu project was a hypertext system that imagined that every sentence, block, and page would be part of a vast bi-directionally linked network.

<br />

<ImageFrame
  showalt
  alt="A design mockup of how Project Xanadu might visually connect pieces of text across multiple documents"
  width="1050px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,w_1000/v1589545780/maggieappleton.com/notes/xanadu.png"
/>

<Center><img
  width="100px"
  alt="fleshed emoji face"
  src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/flushed-face_1f633.png"
/></Center>

You'd be able to trace information back to its origin the way current web links do. But you'd also be able to see who had referenced, remixed, and expanded off that original. The full [[Pattern Language of Project Xanadu]] expands far beyond just bi-directional links to include features like [[Transclusions]], but we won't dive into it all here.

Suffice to say, Xanadu didn't pan out.

Instead we got the less fancy, but far more real and useable World Wide Web that currently does not support bi-directionals on an infrastructre level.

While Sir Tim Berner's Lee [wrote himself a note](https://www.w3.org/DesignIssues/Topology.html) debating their pros and cons back in 1999, there is an obvious design issue with letting two-way connections flow freely around the web.

If _every_ site that linked to yours was visible on your page, and you had no control over who could and couldn't link to you, it is not hard to imagine the Trollish implications...

Figuring out how we might filter, moderate, and set permissions around link visibility turned into [quite the challenge](https://dl.acm.org/doi/epdf/10.1145/74224.74236). The [design details](https://dl.acm.org/doi/epdf/10.1145/74224.74229) [grew complex](https://dl.acm.org/doi/epdf/10.1145/74224.74245).

It became clear implementing the Web with simpler mono-directional links was the right thing to do, given that its creators wanted universal adoption. Lots of people are still mad about it. Let's not venture too far down that historical wormhole.

> **The TLDR is technology is hard**.

Until [Xanadu ships](https://www.wired.com/1995/06/xanadu/) and we're all immersed in the universe of multi-linked, version-controlled nodes of remixable micro-content (that somehow solves the problems of permissions and moderation), there are still plenty of ways we can resurrect the possibility of bi-directional links on the web.

---

## Bi-direction Linking in Personal Digital Gardens

Most of the design issues with adding bi-directional links to the global web were related to moderation and permissions. However, adding them within the bounds of a single website with one author sidesteps that problem.

There's been a flurry of interest around bi-directionals among people involved in the [[Digital Gardening]] movement.

Much of this was originally sparked by <a href="https://notes.andymatuschak.org/">Andy Matuschak's notes</a>. Go have a good browse through them.

<ImageFrame
  showalt
  alt="Andy's linked notes stack on top of one another, allowing you to browse to new notes while previous notes are still visible"
  width="1050px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,w_960/v1589545795/maggieappleton.com/notes/andy-note-links.png"
/>

<Spacer size="small" />


There's plenty to admire here.<Footnote idName={4}>It should be noted Andy is an experienced developer and interaction
designer, and these notes should not be taken as the standard expectation
for the rest of us normal plebby internet citizens.</Footnote> But the key part of this system that creates interlinked context is
the **"Links to this Note"** section at the bottom of each post.


Anytime Andy links to another one of their notes on the site, it'll pop up as a related note at the bottom of the page. This is the bi-directional dream.

<BasicImage
  width="1050px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1589483829/maggieappleton.com/notes/Hyperlinks_3.png"
/>

It gives us a way to navigate through these ideas in exploratory mode, rather than navigating a hierarchy of categories on a main index page.

Since it's all contained within a single-author site, our Spammish-Troll-risk factor is at a comfortable zero. <Footnote idName={5}>This is mildly tangential, but I love how the topic of bi-directional links
makes fully visible our “websites are locations” and “websites are
containers” conceptual metaphors with **"inside"** and **"outside"**
links.</Footnote>

---

### Building Your Own Bi-Directionals

That's all very cool, but how are you supposed to build bi-directionals into your own site? Thankfully, setting up your own public gardening bi-directional Memex doesn't involve Xanadu.

One fantastic option for non-developers is based around a personal wiki system called [TiddlyWiki](https://tiddlywiki.com/). Anne-Laure Le Cunff wrote up an easy-to-follow guide to getting [your own up and running](https://nesslabs.com/tiddlywiki-beginner-tutorial).

For those of us here for the hyper-customised, over-engineered JavaScript solution (that would be me 🙌), the [Gatsby.js](https://www.gatsbyjs.org/) community has a number of active gardening enthusiasts building themes and plugins.

I built mine using Aengus McMillin's [gatsby-theme-brain](https://github.com/aengusmcmillin/gatsby-theme-brain). Aengus has documented the theme well and it's not too challenging to implement (as long as you're comfortable in JavaScript and React).

I also curate a list of tools for [[Digital Gardening]] on this [Github repo](https://github.com/MaggieAppleton/digital-gardeners/)

---

### Bi-Directional Linking with WebMentions

While I argued that Web-wide bi-directional links are unlikely to happen at a global scale, there's a way you can add bi-directionals to your personal website that picks up on references anywhere on the web.

[WebMentions](https://webmention.io/) are an piece of web infrastructre the [IndieWeb](https://indieweb.org/) community has done a lot of work to advocate for. The W3C gave the [specification](https://www.w3.org/TR/webmention/) _recommendation_ status in 2017.

The system notifies a URL whenever that site is mentioned elsewhere on the web. You're then able to show that mention and its contents on your site. It's essentially an opt-in bi-directional linking system.

Plenty of folks have written useful guides on how to add these to your site. Here's one for any [static site](https://keithjgrant.com/posts/2019/02/adding-webmention-support-to-a-static-site/), one for [Gatsby](https://www.christopherbiscardi.com/post/building-gatsby-plugin-webmentions), one for [Next.js](https://css-tricks.com/jumping-into-webmentions-with-nextjs-or-not/). In fact there's a whole list of implementation examples on the [IndieWeb Wiki](https://indieweb.org/Webmention#IndieWeb_Examples) you can look through.


Seventy years ago we dreamed up links that would allow us to create two-way, contextual conversations. Why don't we use them on the web?

A Short History of Bi-Directional Links


<IntroParagraph>

In 1965 [Ted Nelson](https://en.wikipedia.org/wiki/Ted_Nelson) imagined a system of interactive, extendable text where words would be freed from the constraints of paper documents. This _hypertext_ would make documents linkable.

</IntroParagraph>

Twenty years later, Tim Berners Lee took inspiration from Nelson's vision, as well as other narratives like Vannevar Bush's [Memex](https://en.wikipedia.org/wiki/Memex), to create the World Wide Web. Hypertext came to life.

But hypertext was only one small concept amidst a sea of ideas Nelson spent his life developing. Most were entwined in his grand vision of [[Project Xanadu]], a piece of software that at first glance looks similar to The Web we're currently on – a way to access and connect shared human knowledge. But Xanadu was more complex and nuanced. It centered around the principle of <b>"Parallel Documents, Visibly Linked"</b> – the proposed interface presented documents side-by-side, and included features like version control and [[Bi-Directional Links]].

<BasicImage
  width="1000px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1000/v1640076312/maggieappleton.com/notes/xanadu/transclusion_6_shrink_sl0vcb_mtepgz.jpg"
  alt="Three pages of documents presented side-by-side, with colorful visible links between them"
/>

<img src="g" alt="" />

In the historical record, Xanadu is often framed as an alternative to The Web – “the web that could have been" – if it had ever shipped. Unfortunately its [complexity led to troubles](https://www.wired.com/1995/06/xanadu/), and Berners-Lee's version of hypertext won out.

Despite the fact we're not currently browsing the Xanadu web, Nelson is still full of provocative, insightful ideas that never quite came to life – some that speak to many of the issues currently plaguing the modern web and are worth revisiting.

Two of the most intruiging are **Transclusion** and **Transcopyright**, a pair of concepts that reimagine the way authorship, attribution, copyright, and content monetization might work online.

## Transclusion

Transclusion is including one part of a document into another, and maintaing a link between the two. **This is different to copying.** A copy isn't inherently linked to it's original, and can be changed in the duplicate version.

A transclusion is directly linked to the original, and contains the exact same contents. Someone viewing the transclusion can easily open and view the original document. By doing this, transclusions create a single source of truth for that element, and a [[Bi-Directional Link]] so you can navigate between the original source and its instances across the web.

Now, what happens if the original source changes?

The transclusion doesn't automatically change along with it. If transclusions were direct embeds of the original content, we'd end up with [link rot](https://en.wikipedia.org/wiki/Link_rot) on a whole new scale. Every document would be a sad compilation of 404's.

You've probably' seen this happen with images – `<img>` tags where the `src` element points to an original source URL are essentially embeds. If the original publisher deletes the photo, your image dissappears along with it.

Instead, a transclusion is more like a saved version of the original – a _cached_ snapshot of it at a moment in time. You can update that snapshot to a newer version if you want to, but it's not automatic. Even if the original author deletes it, your transcluded version stays visible.

It works the same way [Git](https://en.wikipedia.org/wiki/Git) does – it's a version control system that stores the state of a file at a particular point in time.

<BasicImage width="620px" src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_620/v1640076309/maggieappleton.com/notes/xanadu/transclusion_5_shrink_bcif1h_it9ar8.jpg" alt="Two documents connected by a transclusion. Transclusions are the same content displayed in more than one location, visibly linked." />

This idea is powerful in both the possibilities and horrors it could open up. It would allow us to always know where content came from, and see it in its original context. This is a capitvating promise in the age of post-truth informational relativism. We are constantly presented with isolated soundbites, quotes, and tweets that are divorced from the context they were created within.

It would create a more layered and nuanced form of hypertext – something we're exploring in the [[Digital Gardening]] movement. We could build accumulative, conversational exchanges with people on the level of the word, sentence, and paragraph, not the entire document. Authors could fix typos, write revisions, and push version updates that propogate across the web the same way we do with software.

On the flip side, we can also imagine transclusions that once held bible quotes linking back to pages that are now filled with fiery smut. This sort of bad behaviour is inevitable to some degree, but could be minimised through thoughtful design patterns that I'll touch on later. Cultivating strong social norms, making social reputation visible, and enabling community moderation are all potential tools for it.

## Transcopyright

Transcopyright is an extension of transclusion that begins to make this very interesting for attribution, copyright, and monetisation – we begin to see how this might evolve into a sustainable economic system.

If text is able to be endlessly embedded across the web in a way that leads back to a single source and a single publisher, you can theoretically pay that person for every instance of their content showing up on the web.

In this alternate web utopia, readers would pay small amounts for reading content on the web. These _micropayments_ need to be truly micro for this to work. We're talking fractions of a cent for an article, not the chunky level of $5-10 a month most Patreons and subscription services run at. The majority of that payment would then flow back to the original author.

<BasicImage
  width="1100px"
  alt="Two documents connected by a transclusion. Transclusions are the same content displayed in more than one location, visibly linked."
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640076317/maggieappleton.com/notes/xanadu/transclusion_4_shrink_a1ybfm_j5cb5c.jpg"
/>

In this idealised utopia we obviously want to place value on sharing and curation as well as original creation, which means giving a small fraction of the payment to the re-publisher as well.

We should note monetisation of all this content is optional. Some websites would allow their content to be transcluded for free, while others might charge hefty fees for a few sentences. If all goes well, we'd expect the majority of content on the web to be either free or priced at reasonable micro-amounts.

There are a thousand open questions here about the logistics of how this would work. But I find it sad to conclude it's completely outside the realm of human imagination.

We now have the [Web Monetization API](https://webmonetization.org/) up and running, and inevitably the words “blockchain” and “cryptocurrency” might have to be involved here. I'm not brave enough to speculate beyond that.

---

## Designing Speculative Interfaces

What I am comfortable speculating about is how this might look and feel as a user experience. My immediate reaction to this conceptual pair was to try and grasp onto a more grounded version of it.

**What would this look like in a real interface?** What kind of visual representations and interactions would make this possible? How would I create a transclusion, or pay someone through transcopyright?

Let's play a design game and think this through.

Here's a snippet of text I lifted from a recent Wired article, [To Mend a Broken Internet, Create Online Parks](https://www.wired.com/story/to-mend-a-broken-internet-create-online-parks/) by Eli Parser:

<SimpleCard>

"There’s a problem of public imagination. Fixing our ability to connect and build healthy communities at scale is arguably an Apollo mission for this generation—a decisive challenge that will determine whether our society progresses or falls back into conspiracy-driven tribalism. We need to summon the creative will worthy of a problem of this urgency and consequence."

</SimpleCard>

I've copied and pasted the text from the article. You can click the link above to view it in context, but you're going to have to scan the entire page to find the section I copied this from – your browser isn't going to scroll you to the correct point or highlight the relevant text because it's not a very smart link 😕.

The original source also has no clue I've copied and pasted from it. Nothing on Wired's article shows how many people have linked to or quoted their article - it currently looks like this:

<ImageFrame
  src="https://p-ZmFjNlQ.b3.n0.cdn.getcloudapp.com/items/geuoQpb4/d63e913c-dc63-4643-933f-e98d9b0368f7.jpg?v=15fe4f207f02029a4dbbb83471f6add0"
  width="800px"
/>

Which means we have absolutely no visiblity into who else on the web is responding to and building off this piece of writing. If other people have also copied and pasted this snippet of text, adding on their thoughts and ideas, we'll never know. <Footnote idName={1}>I'm not saying any of those responses are necessarily good or worth reading. They might all be crap troll comments. But I at least want some visual indication they exist. </Footnote> Unless we really go digging through pages of Google search result for it. Which we're certainly not going to without good reason.

**Transclusion** would make this whole scenario quite different. Let's imagine this again...

---

As I'm reading this article on Wired, perhaps small indicators show up next to each paragraph showing the number of times each it's been cited somewhere else on the web.

Below is a simple Figma mockup to demonstrate the idea. Try hovering over the number 8 here and clicking:

<FullWidthBackground>

<iframe
  width="880"
  height="760"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FoRs8JnNMxNI3AZQhZslzlL%2FTranscopyright%3Fnode-id%3D1%253A6%26viewport%3D805%252C1447%252C1.084823489189148%26scaling%3Dmin-zoom"
  allowfullscreen
></iframe>

</FullWidthBackground>

An overlay appears with links to those other transclusion instances. If we click on one of those links, we clearly want to see how this snippet of text fits into other contexts. Ideally, they would be links that highlight the relevant text on the destination page and scroll you to the right position.

If we want to offer a more modular browsing experience, we could also have this link modal expand into the page itself.  
Try clicking on the first link in the transclusion list here:

<FullWidthBackground>

<iframe
  width="880"
  height="760"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FoRs8JnNMxNI3AZQhZslzlL%2FTranscopyright%3Fnode-id%3D358%253A3%26viewport%3D319%252C700%252C0.5028579831123352%26scaling%3Dmin-zoom"
  allowfullscreen
></iframe>

</FullWidthBackground>

Showing the linked article inline allows us to stay within the current article, but also quickly check what discussions and narratives are happening around it – a feature that might help pop a few of our filter bubbles.

---

## Content Moderation and the Tradgedy of the Comments Section

Many people will react to this prototype with a justified sense of horror.

"If _anyone_ can link to _anything_ on the web and have it show up on the original, everything will devolve into anarchy!"

We can easily imagine transclusions going the way of the public comments section. The 14-year-olds of 4chan might mass-tranclude the introductory paragraph of a New York Times lead story, surrounded by the incendiary lyrics of South Park's '_Uncle Fucka_'. In fact that would definitely happen.

This system opens up all the gnarly philosophical questions around control, censorship, community moderation, and “_free speech_” that the web constantly makes tangible and visceral.

What we're after is a low-friction way for website owners to let other people link to their ideas and creations, offering a rich contextual reading experience for audiences, without letting bad actors monopolise the system.

**It goes without saying transclusions need to come with a permissions system.** Website owners might be able to include a single flag in their metadata that turns transclusions off. Something to the effect of:  
`<meta name="transclusions" content="disable" />`

A subtler approach would be to simply choose not to display transclusion links on their webpage. The equivalent of `transclusions { display: none; }` in a css file. In this scenario the transclusions would still exist, but wouldn't be as easy to access and read.

Simply reducing it to an on/off switch is a bit of a ham-fisted solution though. It leaves no room for nuance or spectrums of permissioning. Luckily, Ted Nelson baked this consideration into his original ideas.

Transcopyright is of course a **copyright** system, which means there's a variety of restrictions and rules about who can use a piece of content across different contexts. <Footnote idName={2}>As always, IANAL and actual lawyers should feel free to expand on this point and add informed nuance to the argument. I wish you could use transclusions to do so, but <a href="https://twitter.com/mappletons">Twitter</a> is sadly our best option at the moment.</Footnote>

<ComingSoon />


The lost permissioning and copyright system of the Web

Transclusion and Transcopyright Dreams


<FullWidthBackground>

<div style={{margin: '1em auto'}}>

<span
  style={{
    margin: "0 auto",
    display: "block",
    textAlign: "center",
    fontSize: "1em",
  }}
>
  Data is currently
</span>
<svg
  alt="Data is currently dislocated"
  transform="translate(-10,0)"
  width="1200"
  height="450"
  viewBox="0 0 863 296"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMinYMin meet"
  style={{ maxWidth: "100%", height: "auto" }}
>
  <path
    d="M126.552 114.4C129.336 114.4 131.8 114.88 133.944 115.84C136.12 116.768 137.944 118.016 139.416 119.584C140.92 121.152 142.056 122.944 142.824 124.96C143.624 126.976 144.024 129.056 144.024 131.2C144.024 133.344 143.64 135.424 142.872 137.44C142.104 139.456 140.968 141.248 139.464 142.816C137.992 144.384 136.168 145.648 133.992 146.608C131.816 147.536 129.336 148 126.552 148H114.216V114.4H126.552ZM121.992 121.12V141.28H126.168C127.736 141.28 129.128 141.008 130.344 140.464C131.592 139.888 132.632 139.136 133.464 138.208C134.328 137.248 134.984 136.176 135.432 134.992C135.88 133.776 136.104 132.512 136.104 131.2C136.104 129.92 135.88 128.672 135.432 127.456C134.984 126.24 134.328 125.168 133.464 124.24C132.632 123.28 131.592 122.528 130.344 121.984C129.128 121.408 127.736 121.12 126.168 121.12H121.992Z"
    fill="black"
  />
  <path d="M189.216 141.4H197.088V175H189.216V141.4Z" fill="black" />
  <path
    d="M250.6 136.864C250.6 138.688 251.096 140.112 252.088 141.136C253.08 142.16 254.376 142.672 255.976 142.672C257.224 142.672 258.264 142.32 259.096 141.616C259.96 140.88 260.392 139.92 260.392 138.736C260.392 138.064 260.248 137.504 259.96 137.056C259.704 136.576 259.336 136.16 258.856 135.808C258.408 135.456 257.864 135.152 257.224 134.896C256.584 134.608 255.896 134.32 255.16 134.032C253.624 133.456 252.152 132.88 250.744 132.304C249.368 131.728 248.168 131.04 247.144 130.24C246.12 129.408 245.304 128.416 244.696 127.264C244.088 126.112 243.784 124.688 243.784 122.992C243.784 121.456 244.104 120.096 244.744 118.912C245.416 117.728 246.296 116.736 247.384 115.936C248.472 115.136 249.72 114.544 251.128 114.16C252.568 113.744 254.056 113.536 255.592 113.536C257.576 113.536 259.32 113.824 260.824 114.4C262.328 114.976 263.576 115.76 264.568 116.752C265.56 117.744 266.296 118.88 266.776 120.16C267.288 121.44 267.544 122.8 267.544 124.24H259.768C259.768 122.736 259.4 121.552 258.664 120.688C257.96 119.824 256.936 119.392 255.592 119.392C254.472 119.392 253.512 119.68 252.712 120.256C251.912 120.832 251.512 121.696 251.512 122.848C251.512 123.968 251.944 124.864 252.808 125.536C253.704 126.176 254.872 126.752 256.312 127.264C257.688 127.744 259.08 128.272 260.488 128.848C261.896 129.392 263.16 130.08 264.28 130.912C265.4 131.712 266.312 132.704 267.016 133.888C267.752 135.04 268.12 136.448 268.12 138.112C268.12 139.84 267.8 141.376 267.16 142.72C266.552 144.064 265.688 145.2 264.568 146.128C263.448 147.024 262.12 147.696 260.584 148.144C259.048 148.624 257.352 148.864 255.496 148.864C253.704 148.864 252.024 148.592 250.456 148.048C248.92 147.536 247.576 146.768 246.424 145.744C245.304 144.72 244.424 143.472 243.784 142C243.144 140.496 242.824 138.784 242.824 136.864H250.6Z"
    fill="black"
  />
  <path
    d="M331.544 186.28V193H314.216V159.4H321.992V186.28H331.544Z"
    fill="black"
  />
  <path
    d="M392.344 211.864C389.56 211.864 387.064 211.384 384.856 210.424C382.648 209.432 380.776 208.12 379.24 206.488C377.704 204.856 376.536 202.984 375.736 200.872C374.936 198.728 374.536 196.504 374.536 194.2C374.536 191.896 374.936 189.688 375.736 187.576C376.536 185.432 377.704 183.544 379.24 181.912C380.776 180.28 382.648 178.984 384.856 178.024C387.064 177.032 389.56 176.536 392.344 176.536C395.128 176.536 397.608 177.032 399.784 178.024C401.992 178.984 403.864 180.28 405.4 181.912C406.936 183.544 408.104 185.432 408.904 187.576C409.704 189.688 410.104 191.896 410.104 194.2C410.104 196.504 409.704 198.728 408.904 200.872C408.104 202.984 406.936 204.856 405.4 206.488C403.864 208.12 401.992 209.432 399.784 210.424C397.608 211.384 395.128 211.864 392.344 211.864ZM392.344 204.856C393.88 204.856 395.256 204.568 396.472 203.992C397.688 203.384 398.712 202.584 399.544 201.592C400.408 200.6 401.064 199.464 401.512 198.184C401.96 196.904 402.184 195.576 402.184 194.2C402.184 192.824 401.96 191.496 401.512 190.216C401.064 188.936 400.408 187.8 399.544 186.808C398.712 185.816 397.688 185.032 396.472 184.456C395.256 183.848 393.88 183.544 392.344 183.544C390.808 183.544 389.432 183.848 388.216 184.456C387 185.032 385.96 185.816 385.096 186.808C384.264 187.8 383.624 188.936 383.176 190.216C382.728 191.496 382.504 192.824 382.504 194.2C382.504 195.576 382.728 196.904 383.176 198.184C383.624 199.464 384.264 200.6 385.096 201.592C385.96 202.584 387 203.384 388.216 203.992C389.432 204.568 390.808 204.856 392.344 204.856Z"
    fill="black"
  />
  <path
    d="M488.336 203.952C488.016 205.744 487.392 207.424 486.464 208.992C485.568 210.56 484.4 211.936 482.96 213.12C481.52 214.272 479.84 215.184 477.92 215.856C476 216.528 473.888 216.864 471.584 216.864C468.736 216.864 466.192 216.384 463.952 215.424C461.744 214.464 459.856 213.184 458.288 211.584C456.752 209.952 455.568 208.064 454.736 205.92C453.936 203.776 453.536 201.52 453.536 199.152C453.536 196.848 453.936 194.64 454.736 192.528C455.536 190.416 456.688 188.544 458.192 186.912C459.728 185.28 461.584 183.984 463.76 183.024C465.936 182.032 468.4 181.536 471.152 181.536C473.744 181.536 476.048 181.904 478.064 182.64C480.112 183.376 481.84 184.368 483.248 185.616C484.688 186.864 485.824 188.336 486.656 190.032C487.488 191.728 488.032 193.536 488.288 195.456H480.176C479.984 194.464 479.648 193.552 479.168 192.72C478.72 191.888 478.128 191.168 477.392 190.56C476.688 189.92 475.84 189.424 474.848 189.072C473.888 188.72 472.816 188.544 471.632 188.544C470 188.544 468.544 188.848 467.264 189.456C466.016 190.032 464.96 190.816 464.096 191.808C463.232 192.768 462.576 193.888 462.128 195.168C461.68 196.448 461.456 197.776 461.456 199.152C461.456 200.624 461.68 202.016 462.128 203.328C462.608 204.608 463.296 205.744 464.192 206.736C465.12 207.696 466.224 208.464 467.504 209.04C468.816 209.584 470.32 209.856 472.016 209.856C472.976 209.856 473.888 209.712 474.752 209.424C475.616 209.104 476.4 208.688 477.104 208.176C477.84 207.632 478.464 207.008 478.976 206.304C479.488 205.568 479.856 204.784 480.08 203.952H488.336Z"
    fill="black"
  />
  <path
    d="M545.792 153L541.664 166.824H549.824L545.792 153ZM553.04 177L551.744 172.92H539.792L538.496 177H530.192L542.192 143.4H549.344L561.488 177H553.04Z"
    fill="black"
  />
  <path
    d="M610.304 121.12H602.72V114.4H625.712V121.12H618.08V148H610.304V121.12Z"
    fill="black"
  />
  <path
    d="M677.992 138.64V146.272H690.712V152.368H677.992V159.76H690.712V166H670.216V132.4H690.712V138.64H677.992Z"
    fill="black"
  />
  <path
    d="M749.552 91.4C752.336 91.4 754.8 91.88 756.944 92.84C759.12 93.768 760.944 95.016 762.416 96.584C763.92 98.152 765.056 99.944 765.824 101.96C766.624 103.976 767.024 106.056 767.024 108.2C767.024 110.344 766.64 112.424 765.872 114.44C765.104 116.456 763.968 118.248 762.464 119.816C760.992 121.384 759.168 122.648 756.992 123.608C754.816 124.536 752.336 125 749.552 125H737.216V91.4H749.552ZM744.992 98.12V118.28H749.168C750.736 118.28 752.128 118.008 753.344 117.464C754.592 116.888 755.632 116.136 756.464 115.208C757.328 114.248 757.984 113.176 758.432 111.992C758.88 110.776 759.104 109.512 759.104 108.2C759.104 106.92 758.88 105.672 758.432 104.456C757.984 103.24 757.328 102.168 756.464 101.24C755.632 100.28 754.592 99.528 753.344 98.984C752.128 98.408 750.736 98.12 749.168 98.12H744.992Z"
    fill="black"
  />
  <circle cx="653" cy="5" r="5" fill="#A0BBDB" />
  <circle cx="822" cy="164" r="5" fill="#FF7B0F" />
  <circle cx="41" cy="184" r="5" fill="#FFB667" />
  <circle cx="213" cy="61" r="5" fill="#FFB667" />
  <circle cx="3" cy="130" r="3" fill="#FF7B0F" />
  <circle cx="259" cy="20" r="3" fill="#FF7B0F" />
  <circle cx="103" cy="37" r="3" fill="#FFB667" />
  <circle cx="697" cy="184" r="3" fill="#FFB667" />
  <circle cx="253" cy="237" r="3" fill="#FF7B0F" />
  <circle cx="218" cy="249" r="3" fill="#A0BBDB" />
  <circle cx="717" cy="293" r="3" fill="#A0BBDB" />
  <circle cx="490" cy="158" r="3" fill="#A0BBDB" />
  <circle cx="346" cy="140" r="3" fill="#A0BBDB" />
  <circle cx="59" cy="153" r="3" fill="#A0BBDB" />
  <circle cx="860" cy="87" r="3" fill="#A0BBDB" />
</svg>

</div>

</FullWidthBackground>

Actually it's worse than dislocated – our narratives and metaphors around data are determined to convince us it **needs no location** because it is _immaterial_.

It lives in **"The Cloud."** It doesn't have a geographical home. It floats about as small fluffy terrabytes circling the globe, able to rain data down on us at the click of a button.

Clouds are such a pleasant metaphor. Weighing nothing, they require no energy sources or physical land or building materials or human labour to maintain. They're transcedental and mystical - playing into our cultural belief system that technology is a form of magic that lives in an alternate land.

That land would be _Cyberspace_ – the parallel universe William Gibson described in the 1980's sci-fi novel [Neuromancer](https://en.wikipedia.org/wiki/Neuromancer). We know it well as the blue, slightly transparent, glowing realm of floating dots

<TwoColumn alignItems="start">

<BasicImage src="https://www.securitymagazine.com/ext/resources/cyber.jpg?1588203186" />
<BasicImage src="https://images.unsplash.com/photo-1620393470010-fd62b8ab841d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=80" />
<BasicImage src="https://www.chinausfocus.com/d/file/201801/df053bcb9421dd240bad6270f30e7c44.jpg" />
<BasicImage src="https://cdn.techwireasia.com/wp-content/uploads/2020/07/shutterstock_1662237379.jpg" />

</TwoColumn>

Cyberspace is an evocative image that kicked off a unfortunate cultural lie: That the digital world is some place different to the “real,” meatspace world. A place that is not subject to the grounded realities of earth. It's free from gravity, time, place, identity, scarcity, law, borders, and data storage limits.

This story created what Nathan Jurgenson calls [Digital Dualism](https://thesocietypages.org/cyborgology/2011/09/13/digital-dualism-and-the-fallacy-of-web-objectivity/) – the notion that the “_online_” and “_offline_” worlds are two distinct and seperate places rather than one continous reality.

---

If you work in DevOps or backend programming, you're acutely aware the cloud is a series of enormous physical warehouses. Primarily owned by Amazon Web Services.

They require energy and materials and resources to run, and pump out 14% of global carbon emissions.

Actual humans have to work there. They are responsible for maintenance, cleaning, repair, security, and optimizing “uptime.”

**"The Cloud"** renders all those people, materials, places, and resources invisible.

As an overarching mission of the last two decades, this is mostly what “technology” does – it renders human labour and material costs invisible.

It builds tiny black boxes around complex systems and sticks a shiny app on the front. When people ask how the systems work, we mumble something about algorithms and machine learning.

---

"The Cloud" makes it difficult for us to think about data the way we need to.

As something we create, that might belong to us. Something we might even be responsible for and need to protect. Something that has economic value that other people are actively buying and selling to one another right now.

None of those options seem real at the moment. Most of the data you and I have created over the last decade of clicking through the web is in someone else's S3 bucket.

What would it look like for data to become grounded, local, and material?

What would it looks like if data storage went the way of coffee into local, artisan, organic data storage shops?

What if these shops focused on creating ways for you to 'see' your data?

What kind of visual design affordances would help us understand that data lives on physcial, material hardware?

Amazon is clearly the Starbucks of the data storage world.

<BasicImage
  width="660px"
  src="https://res.cloudinary.com/dg3gyk0gu/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1610492195/maggieappleton.com/notes/organic-artisan-data/amazon-coffee_shrink.png"
  alt="A pair of coffee cups bearing a logo similar to starbucks, but replaced with amazon's aws logo"
/>

What if the the same way the artisan coffee movement kicked back against Double Soy Venti Caramel Lattes, the artisan data storage movement made the equivalent of an organic, free-trade Chemex pour over?

---

There are obvious issues with these provocations. Cheap, reliable data storage is only possible because of centralised systems of energy and security. Decentralised localisation would need to overcome a whole host of standardisation and security measures.

Research projects like [Protocol Labs](https://protocol.ai/) and Tim Berners-Lee's [Solid Project](https://solidproject.org/) sound like they're at least exploring solutions. Yes, it involves blockchain. No, of course I don't fully understand.

There are real-life [[Data Unions]] up and running in the world like [Streamr](https://streamr.network/discover/data-unions/) which suggest ways we might share and monetise our data on our own terms.

It might be a terrible idea. I don't know know enough to know yet. If you have civil, reasonable thoughts, chat to me on Twitter.


Data is currently dislocated – our narratives and metaphors around it try to convince us it is immaterial

Organic, Local, Artisan Data Storage


<AssumedAudience>

Anyone who thinks they can't draw, but would like to learn

</AssumedAudience>

<Spacer size="small" />

<IntroParagraph>

I know plenty of intelligent and highly motivated folks who are dying to learn to draw. Some are so intent on their desire, they've gone out and bought themselves iPads. The other half are actively thinking about buying an iPad right now.

</IntroParagraph>

They message me a lot.

> Which iPad should I buy? What app do you use? What brush is that? What size should my canvas be?

These questions aren't wrong. In fact they're perfectly reasonable.

I'm vocal about the fact many of my illustrations are made on [an iPad](https://www.apple.com/ipad-pro/) in an app called [Procreate](https://procreate.art/). I have a full post about my drawing equipment and workflows over at [[What App is That?]]

How are you supposed to draw if you don't also have these fancy tools?

This is the tricky bit.

If you go out and buy yourself these same things, you'll have all the right **materials** to draw. But that's only the dressing on the drawing dish.

## What you have is **Material** without the **Medium** or the **Meat**

What on earth do I mean by _material_, _medium_, and _meat_?

<MediumMaterialsMeat sectionTitle='Materials'>

_Materials_ are the physical tools you draw with. Suffice to say, you
need some way to make visible marks on a surface. Having precise control over
how you make those marks is essential. Being able to erase is helpful. Having
access to all the colors of the rainbow is a indulgent bonus.


An [iPad](https://www.apple.com/ipad-pro/) and
[Procreate](https://procreate.art/) is one overtly expensive
option. [Prismacolor Premier](https://www.prismacolor.com/colored-pencils/premier-colored-pencils/premier-soft-core-colored-pencils/PCPremierSoftCoreColoredPencils)
pencils on [Canson Newsprint](https://en.canson.com/xl-series/xlr-newsprint) is a far more financially reasonable choice.
[Col-Erase](https://www.prismacolor.com/colored-pencils/premier-colored-pencils/premier-col-erase-colored-pencils/PCPremierCol-EraseColoredPencils)
pencils with [Koh-i-Noor Progressos](https://www.cultpens.com/i/q/KH24668/koh-i-noor-progresso-woodless-graphite-pencil)
in [Stillman & Birn Epsilon](https://stillmanandbirn.com/products_epsilon.php)
series sketchbooks are another.
[Staedler Fineliner](https://www.staedtler.com/uk/en/products/products-for-coloring/fineliners/pigment-liner-308-fineliner-m308/)
pens in a [Moleskine](https://gb.moleskine.com/sketchbook-black/p0437)
notebook work great. Or
[Copic Markers](https://www.copic-shop.co.uk/) in
[Cottonwood Arts](https://www.cottonwoodarts.com/) sketchbooks. Or
any 4B pencil in any bog-standard sketchbook. These are all good options.
<Footnote idName={1}>
  If it's not obvious yet, this is a list of all my favourite drawing gear,
  which you can and should take as a shining endorsement of all those options.
</Footnote>


Everyone obsesses over the materials when they want to begin drawing. Which exact pen? What brand of paper? These questions matter. A little. Your materials affect what you can and can't do. But they don't matter nearly as much as everyone thinks they do.

Pick any of the above suggestions I've linked to and move onto the next step as soon as possible. This is not a lifelong commitment. You can change materials later if you ask nicely. <Footnote idName={2}>Hot tip: it's easier to swap materials if you don't pay an arm, a leg, and a kidney for them up front</Footnote>

</MediumMaterialsMeat>

<MediumMaterialsMeat sectionTitle='Medium'>

When you set out to draw, you're working in the _Medium_ of **visual language**. Just like writing a non-fiction essay, giving a speech, or programming in Python, visual language is a form of communication. It has it's own syntax, style, and structure.

Composition. Value. Contrast. Light. Shadow. color. Form. Shape language. Linear perspective. 3D construction. Line weight. Emphasis. Pattern. Balance. Rhythm. These are the equivalent of characters, verbs, sentences, introductory paragraphs, and satirical post-modern novels. They're a means to an end – a way to get a message across the gap between your mind and someone else's.

Mastering the medium of visual language is the true struggle of drawing. Not picking which iPad app to draw in. The material is a convenient distraction when understanding the medium is an incomprehensible and daunting task.

You are right to be afraid of the medium. I'm still afraid of it. Learning all it's dimensions, elements, and variations is a lifelong challenge. It's an [infinite game](/infinite-games). There is no end goal. You just get to keep playing.

</MediumMaterialsMeat>

<MediumMaterialsMeat sectionTitle='Meat'>

The _Meat_ is **the whole point of your illustration**. What is your drawing _about? _ What are you _saying?_ Why does it _matter?_

As one of my favourite writing professors used to say, -39 points for not having a point.

If we're going to put in the effort to craft an entire illustration, it better be for something worthwhile. You need an idea, a concept, or a piece of information you want to move from your mind into the minds of other people. Without meat, you're not serving any brain food to your audience. Which is why paintings of carefully arranges vases, daffodils, and clementines are disastrously dull. <Footnote idName={3}>IMHO. You might be really into Baroque vase paintings. It's great craftsmanship, but they don't say much beyond **"Look, a vase! Also, I've figured out how to pedantically paint realistic subjects!"**
Which has now been said enough times, and you probably don't need to add to the chorus.</Footnote>

</MediumMaterialsMeat>

---

## Moving past materials

Worrying about the materials should take up - at most - 10% of your attention and concern. Focus 70% of your attention on learning the medium while you're just starting out.

You can keep 20% of your focus on the Meat. But I wouldn't worry too much about communicating original, profound ideas at first. Doing so _in addition to_ learning a whole new language is going to be overwhelming.

In the same way it's a bad idea to learn Spanish while simultaneously trying to write a philosophy dissertation in it.

Once you get more comfortable “speaking" in visual language, you'll be able to shift a much higher percentage of your attention onto the Meat. You'll get to focus on The Thing You Want to Say, and know enough visual language to say it well.

That's the ideal I'm currently striving for. To reach a point where the Material is irrelevant, the Medium is a baked into my subconscious, and I'm all about the Meat.

<Center>

# 2% Material, 18% Medium, 80% Meat.

</Center>

That's the goal. Don't let the shiny iPad reflection blind you.

Get past picking the Material. Focus on the Medium. Aim for the Meat.


The failure of drawing materials without mediums and meat

Why You Own an iPad and Still Can't Draw

Everything you need to know about what API's are and how they work

Meet the Robowaiter APIs Serving Us Data

The absolute minimum you need to know about data storage

Essays

Opinionated, longform narrative writing with an agenda.