
<h2 className="micro">The Context</h2>

We are all familiar with the recommendation algorithm – the dark forces that shove fad-diet-shills, flat-earthers, and Jordan Peterson into our feeds.

They've become a modern myth. There are a thousand moral panic op-eds raising the alarms; algorithms are controlling us, manipulating us, radicalizing us, and preying on our insecurities and "secret desires." All just to sell us overengineered toothbrushes, vegan whey powder, and blow-up paddling pools, among other goodies.

While it's unclear whether algorithms are truly "harming the children"<Footnote idName={1}>And other such hand-wavy claims that fail to clearly define 'algorithms', 'harm', or identify which specific children we should be morally panicked about</Footnote>, there's still a few legitimate concerns in the ways we're allowed to interact with them in modern interfaces.

For a start, we aren't told what kinds of data go into our algorithmic systems, and have no visibility into why certain results come out. Most algorithm-driven interfaces blackbox their internal logic and decision-making rules. Faced with these opaque systems, we end up fetishising the algorithms – we attribute human agency and capacities to them, and in doing so hide the very real human agents designing and maintaining them. We call them "magic" to dismiss the need to make them legible to users.

As an audience we have no visibility into what metrics the engineers are optimising for. The engineers themselves don't always understand how the algorithms choose what to recommend. The lack of transparency makes it difficult to understand why we're shown certain content. It hides the fact some algorithms maximise for qualities like emotional outrage, shock value, and political extremism. We lack the agency to evaluate and change the algorithms serving us content.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

When an automated system recommends a piece of content, it should include an [[Epistemic Disclosure]] message explaining **why** it suggested it, and what factors went into that decision.

Transparency tips integrated into user interfaces like “**Recomended because you liked Pride and Prejudice**" or “**Recommended because Mary Douglas read this**” help us see the chain of logic.

Transparency alone isn't enough though. Users should have control over the data that feeds algorithmic systems they're subjected to. We should be able to to remove whole input sources, as well as individual pieces of content.

Pinterest does a good job of telling you why you're seeing certain pins, as well as giving you controls to remove the pin and see fewer like it:

<BasicImage
  width="800px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_800/v1640730625/maggieappleton.com/patterns/algo_6_kai29c.jpg"
  alt="A screenshot of the Pinterest interface saying why a specific pin was recommended"
/>

They also have a "tune your home feed" settings page where you can remove specific pins, boards, or topics:

<ImageFrame
  width="1000px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1000/v1640730625/maggieappleton.com/patterns/algo_4_pqaggw.jpg"
  alt="A screenshot of the Pinterest setting page where you can tune your home feed"
/>

Despite being a notorious algorithmic bad boy, YouTube also gives you the ability to mark videos in your feed as "not interested"<Footnote idName={1}>Although anecdotally, no matter how many times I say I don't want Jordan Peterson videos, they keep showing up</Footnote> or "don't recommend channel", then follows up asking _why_ you marked it.

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_1_r8i1y4.jpg"
  alt="The YouTube homescreen with the options menu expanded on a single video"
/>

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_2_tw5bws.jpg"
  alt="The YouTube homescreen after you select 'not interested' with a modal asking why you're not interested"
/>

They also offer a "remove this video" option on your watch history page:

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1640730625/maggieappleton.com/patterns/algo_3_yd68as.jpg"
  alt="The YouTube watch history page with the option to remove a video from it"
/>

Letting users remove single videos/posts/tweets/whathaveyous from their algorithmic soup is the bare minimum for any platform. We're a long way from meaningful transparency that makes internal algorithmic decisions clear and empowers users to design their own feeds.


Algorithms that make their reasoning visible

Algorithmic Transparency


<AssumedAudience>
  Active readers and writers of the web. Particularly ones frustrated by context
  collapse and the proliferation of generic articles that try to accommodate
  every possible audience online
</AssumedAudience>

<Spacer size="small" />

<h2 className="micro">The Context</h2>

Readers are a problem for every writer. Writers have to write for a specific person. That specific person is almost always imaginary. Anytime you put writing in public, posted somewhere a vast range of people might happen upon it, imagining the reader becomes an exercise in desperate speculation.

Who is truly reading this? I haven't a clue.

All I can do is guess. I have to _assume_ things about you. Assumptions I make based on the other people in my Twitter neighbourhood and extended gardening network.

This includes how much you know about the history of hypertext. Whether you're caught up on the latest JavaScript framework gossip. How much you can tell me about embodied cognition and its role in interface design? Whether you know who Clifford Geertz, Bret Victor, Ted Nelson, and George Lakoff are.

If I assume incorrectly, I'll lose you in the middle of a sentence – either because I'll assume you know more than you do, or drown you in unfamiliar words and alienating jargon. Or I'll assume too little and bore you with basic, repetitive definitions of things you personally helped invent.

If I don't make clear who I'm writing for, and you don't know who should be reading this, we're far more likely to end up in an unsatisfying reader/writer mismatch.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

At the beginning of many of my posts, I have a small informational box that tells you my **assumed audience** – who I think I'm writing this piece for.

A few examples to illustrate the point:

<AssumedAudience>
  JavaScript developers who have some familiarity with data visualisation,
  interactive narratives, and/or scrollytelling articles.
</AssumedAudience>

<AssumedAudience>
  People who understand the basic historical arc of postmodernism,
  post-postmodernism, the rationalist movement, and the post-rationalists. Would
  describe yourself as Very Online.
</AssumedAudience>

<Spacer size="xs" />

These small boxes free both of us of unspoken obligations and expectations. As the writer, I am now free to write for an informed audience without defining every term and qualifying every statement. We can jump straight to the gritty details and contentious debates rather than doing a full literature review of the field.

You still might not have a clue what I'm talking about, but you were forewarned. You have chosen to venture into this article as a bemused voyeur – willing to sacrifice comprehension to feed your curiosity.

In the same way you might eavesdrop on a conversation between two Dev Ops engineers vehemently fighting over the practicality of Kubernetes. None of us knows what they're saying, but the jargon is to die for.

<References>
  <ReferencesLink
    title="Assumed Audience: everyone on the internet"
    href="https://v4.chriskrycho.com/2018/assumed-audiences.html"
    author="Chris Krycho"
  />
</References>


Naming your invisible audiences to free yourself from unspoken obligations

Assumed Audiences


<h2 className="micro">The Context</h2>

Graphical user interfaces (GUIs) have been the bread and butter of user interface design since the mid-1980s. Having all your computational objects and actions laid out in little pixelated boxes, icons, toggles, and buttons make it easy to understand what you can do with a computer. They make the affordances _visible_, as we say in nob-designer-land.

<ResponsiveImage margin="0.5rem auto" src="/images/posts/command-bar/gui-buttons.png" width="700px" alt="A set of buttons, toggles, and sliders" />

Before GUIs, every computer interface was a command-line interface (CLI). You typed memorised text-based commands into an input. This certainly kept the screen free of clutter but had several downsides. It was difficult to remember what commands were available. You couldn't see the current state of the system. Everything was hidden away behind that blinking cursor.


<svg viewBox="0 0 671 96" fill="none" style={{margin: "1rem auto 3rem", width: "671px", maxWidth: "100%"}} xmlns="http://www.w3.org/2000/svg">
<rect width="671" height="96" rx="10" fill="#1D2B37"/>
<rect x="418" y="32" width="19" height="31" fill="#61E24B"/>
<path d="M49.14 53H51.14V55H49.14V53ZM43.14 55H49.14V57H43.14V55ZM41.14 41H43.14V55H41.14V41ZM43.14 39H49.14V41H43.14V39ZM49.14 41H51.14V43H49.14V41ZM61.06 43H63.06V45H61.06V43ZM61.06 55H63.06V57H61.06V55ZM80.98 39H82.98V55H80.98V39ZM74.98 55H80.98V57H74.98V55ZM72.98 39H74.98V55H72.98V39ZM88.9 45H90.9V49H88.9V45ZM96.9 51H98.9V55H96.9V51ZM90.9 55H96.9V57H90.9V55ZM88.9 53H90.9V55H88.9V53ZM90.9 49H96.9V51H90.9V49ZM96.9 45H98.9V47H96.9V45ZM90.9 43H96.9V45H90.9V43ZM112.82 53H114.82V55H112.82V53ZM106.82 55H112.82V57H106.82V55ZM104.82 45H106.82V49H112.82V45H114.82V51H106.82V55H104.82V45ZM106.82 43H112.82V45H106.82V43ZM126.74 43H130.74V45H126.74V43ZM124.74 45H126.74V47H124.74V45ZM120.74 43H122.74V47H124.74V49H122.74V57H120.74V43ZM136.66 45H138.66V49H136.66V45ZM144.66 51H146.66V55H144.66V51ZM138.66 55H144.66V57H138.66V55ZM136.66 53H138.66V55H136.66V53ZM138.66 49H144.66V51H138.66V49ZM144.66 45H146.66V47H144.66V45ZM138.66 43H144.66V45H138.66V43ZM156.58 45H158.58V51H156.58V45ZM158.58 51H160.58V57H158.58V51ZM154.58 39H156.58V45H154.58V39ZM178.5 39H180.5V57H178.5V45H176.5V43H178.5V39ZM174.5 45H176.5V47H174.5V45ZM172.5 47H174.5V49H172.5V47ZM170.5 45H172.5V47H170.5V45ZM166.5 39H168.5V43H170.5V45H168.5V57H166.5V39ZM188.42 45H190.42V51H188.42V45ZM190.42 51H192.42V57H190.42V51ZM186.42 39H188.42V45H186.42V39ZM208.34 41H210.34V55H208.34V41ZM200.34 39H208.34V41H202.34V55H208.34V57H200.34V39ZM224.26 53H226.26V55H224.26V53ZM218.26 55H224.26V57H218.26V55ZM216.26 45H218.26V49H224.26V45H226.26V51H218.26V55H216.26V45ZM218.26 43H224.26V45H218.26V43ZM232.18 45H234.18V49H232.18V45ZM240.18 51H242.18V55H240.18V51ZM234.18 55H240.18V57H234.18V55ZM232.18 53H234.18V55H232.18V53ZM234.18 49H240.18V51H234.18V49ZM240.18 45H242.18V47H240.18V45ZM234.18 43H240.18V45H234.18V43ZM256.1 55H258.1V57H256.1V55ZM254.1 53H256.1V55H254.1V53ZM252.1 51H254.1V53H252.1V51ZM248.1 39H250.1V49H252.1V51H250.1V57H248.1V39ZM252.1 47H254.1V49H252.1V47ZM254.1 45H256.1V47H254.1V45ZM256.1 43H258.1V45H256.1V43ZM266.02 41H268.02V43H272.02V45H268.02V55H266.02V45H264.02V43H266.02V41ZM268.02 55H274.02V57H268.02V55ZM287.94 45H289.94V55H287.94V45ZM281.94 55H287.94V57H281.94V55ZM279.94 45H281.94V55H279.94V45ZM281.94 43H287.94V45H281.94V43ZM303.86 45H305.86V55H303.86V45ZM295.86 43H303.86V45H297.86V55H303.86V57H297.86V61H295.86V43Z" fill="#61E24B"/>
<path d="M344.16 45H346.16V57H344.16V45ZM340.16 43H344.16V45H340.16V43ZM338.16 45H340.16V53H338.16V45ZM332.16 43H338.16V45H334.16V57H332.16V43ZM358.08 55H360.08V57H358.08V55ZM356.08 53H358.08V55H356.08V53ZM354.08 51H356.08V53H354.08V51ZM350.08 39H352.08V49H354.08V51H352.08V57H350.08V39ZM354.08 47H356.08V49H354.08V47ZM356.08 45H358.08V47H356.08V45ZM358.08 43H360.08V45H358.08V43ZM366 45H368V55H366V45ZM374 39H376V57H368V55H374V45H368V43H374V39ZM385.92 43H387.92V57H385.92V43ZM385.92 39H387.92V41H385.92V39ZM403.84 43H407.84V45H403.84V43ZM401.84 45H403.84V47H401.84V45ZM397.84 43H399.84V47H401.84V49H399.84V57H397.84V43Z" fill="#61E24B"/>
</svg>


I explored this history and trade-offs between these two interface paradigms in [[Programming Portals]] so I won't delve as deeply into them here. The important tensions we're going to focus on are the trade-offs between pixel real estate, cognitive load, and complexity.

Well-designed GUIs make interfaces easier for new users to learn, improve discoverability, and are better suited to multi-tasking workflows. But they don't scale very well to complex systems with hundreds of commands – especially if those commands can be combined to create emergent complexity. GUIs rely on representing computational objects and functions visually. As in, graphical shapes and text that use up the precious commodity of screen space.

Here's a series of screenshots from Cinema 4D, a popular 3D modelling and animation app:

<ResponsiveImage framed margin="0 auto" src="/images/posts/command-bar/cinema4d3.jpeg" width="1300px" alt="The interface for Cinema4D. A 3D triangle in the centre surrounded by a huge array of toolbars and panels" />

<ResponsiveImage framed margin="0 auto" src="/images/posts/command-bar/cinema4d2.jpeg" width="1300px" alt="The interface for Cinema4D. A 3D triangle in the centre surrounded by a huge array of toolbars and panels" />

<ResponsiveImage framed margin="0 auto 2rem" src="/images/posts/command-bar/cinema4d4.jpeg" width="1300px" alt="The interface for Cinema4D. A 3D triangle in the centre surrounded by a huge array of toolbars and panels" />

You absolutely could not do 3D modelling without a graphical interface. Defining 3D objects in text without being able to see them would be laborious, error-prone, and absurd. And yet _look_ at the number of icons, panels, and toolbar options in these screenshots!

The dropdown menus have submenus. Every pane has multiple tabs. Numerous pop-over panels contain enough functions to be apps in themselves. From personal experience I can tell you finding anything in here is a wild goose chase. People spend hundreds of hours learning to use this interface.

This is not a rag on Cinema 4D. Professional 3D modelling involves a _lot_ of inherent complexity. People need fine-grained control over their creations. And Cinema 4D gives them access to an array of tools that profoundly expand what they're capable of making. But simply _finding_ what's available in this dizzying UI becomes a challenge.

This issue isn't limited to unusually complex applications like Cinema 4D. Think of all times you've gone hunting through a settings panel trying to track down functionality you know exists, but can't quite locate. Even in much simpler apps, finding the tiny toggle button that will make them stop emailing you every day is a genuine challenge.

We usually rely on a mix of spatial memory and well-written labels to find what we need in this kind of interface. But that only goes so far. At some point, we have to find ways to help users navigate apps outside of graphical menu bars, mystery icons in toolbars, and tabbed settings panels.


<Spacer size="medium" />

<h2 className="micro">The Pattern</h2>

Command bars are command-line bars that pop up in the middle of the screen when you hit a certain keyboard shortcut.<Footnote idName={1}>They're also known as 'command palettes', 'command launchers', or 'omniboxes'</Footnote> Traditionally `CMD + K`, hence the moniker “Command K bars.” But `CMD + E` and `CMD + /` have also been strong shortcut contenders.

They typically look like this:

<ResponsiveImage framed src="/images/posts/command-bar/linear-cmd.jpg" width="1100px" alt="The command K bar in Linear" showalt />

This one is from [Linear](https://linear.app/) - an issue-tracking app for product teams. Bars like this let users search through all the available commands in an application. Rather than remembering which sub-sub-sub menu a function lives in, users need only remember its name. 

They don't even have to remember its exact name. Fuzzy search can help them find it by simply typing in similar names or related keywords. For example, if I type “make” into a command bar, it's likely to show me any actions related to creating new items. Even if “make” isn't part of the action name.

<ResponsiveImage framed src="/images/posts/command-bar/fuzzysearch.jpg" width="1100px" alt="Fuzzy search in Linear lets you find actions without needing the exact name" showalt />

This makes it much faster and easier to find things. If you're in the middle of writing something, you don't even have to take your hands off the keyboard. A few quick finger strokes and you can find the action you need and run it. Far faster than navigating a small cursor through a series of menu mazes.

These bars also do double duty as universal search bars. You're not only searching through the available actions in an app. You can also search through content like documents, file names, and tasks.

By stashing infrequently-used items in a command bar like this, you can clear up a lot of screen real estate. You don't need to add that extra toolbar or layer of menu items. Keeping the interface clear of options helps reduce the number of things users need to pay attention to at any one time. Which means they're less likely to be overwhelmed and confused by irrelevant features.

Unsurprisingly, they're now proliferating. You know an interface pattern is catching on when whole SaaS applications and community open-source projects spring up around it. [Command bar](https://www.commandbar.com/) is a paid-for service that gives applications a plug-n-play solution. Or teams can opt to use the open-source projects [cmdk](https://cmdk.paco.me/) and [kbar](https://kbar.vercel.app/) to easily add command bars to their app.

These pre-built bars stuff an enormous amount of sophisticated UI functionality into their little rectangles. They can give you tabs, filters on searches, recommended actions, inline forms, pop-up menus, grid displays, dark mode, and more.<Footnote idName={2}>I promise I'm not shilling for any of these libraries. Two of them are free. I'm just saying they've built some (ridiculously) advanced stuff into what seems like a simple UI component.</Footnote> 

This lack of friction means it's easy for product teams to pop one of these in without thinking too much about it. Here are just a few of these bars in action:

### Todoist

[Todoist](https://todoist.com/) is a popular task manager that puts a lot of emphasis on quick actions via keyboard shortcuts. You can see in their bar they're using the space on the right-hand side of each action to remind users of keyboard combos.

<ResponsiveImage framed src="/images/posts/command-bar/todoist.jpg" width="1000px" />

### Framer

[Framer](https://www.framer.com/) is a design & prototyping tool. You can search for both actions and components, and it fittingly gives you a nice big visual preview. Their command bar is more graphical than most with colourful icons and buttons embedded inside it.

<ResponsiveImage framed src="/images/posts/command-bar/framer-cmd.jpg" width="1000px" />

### Tana

[Tana](https://tana.inc/) is a new knowledge management app that puts a lot of focus on dynamic views and flexible data. Their command bar lets users access a _huge_ range of advanced functionality you could never fit into a classic UI (without it turning into a C4D situation).

Here's a demo of me using the command bar to quickly write a search query for all the books in my database, filtered for only ones marked “Unread”


<Video width="1000px" height="900px" src="/images/posts/command-bar/tana.mp4" />

<Spacer size="small" />


This is a good example of how users can chain multiple actions together in command bars. Each selection in the bar moves you onto the next set of available choices.

### Raycast

[Raycast](https://www.raycast.com/) takes the concept of a command-bar-as-universal-interface to the extreme. The whole app is just a command bar. But it has access to your full desktop environment and integrates with most major applications.

<ResponsiveImage framed src="/images/posts/command-bar/raycast1.jpg" width="1000px" margin="1rem auto" />

Think of Apple's [Spotlight](https://support.apple.com/en-gb/guide/mac-help/mchlp1008/mac) feature, but if search actually worked and it could tap into all your other applications – Slack messages, Google drive files, Github PR, Figma files, etc. Raycast very cleverly designed the system to be extensible. Any developer can build a new extension for it, meaning there's no ceiling to the number of actions potentially available in it.

Here's a quick demo of me accessing Wikipedia, Spotify, Google, and even querying GPT-3 from the unified interface:

<Video src="/images/posts/command-bar/raycast.mp4" width="1000px" height="800px" />

<Spacer size="small" />


### Lazy

[Lazy](https://lazy.so/) is following the spirit of Raycast, but specifically for information capture and knowledge management. It's a bar you can pull up in any context – twitter, an article, a youtube video, email – and natively capture key information into a personal database.

<ResponsiveImage framed src="/images/posts/command-bar/lazy1.jpg" width="800px" margin="1rem auto 0" />
<ResponsiveImage framed src="/images/posts/command-bar/lazy3.jpg" width="800px" margin="0 auto 2rem" />

<TweetEmbed tweetId="1589633050107080704" />
 
They're still pre-release so you'll have to settle for the fancy landing page and [hype video](https://twitter.com/demtzu/status/1589633050107080704?s=20&t=CPWHr4kP7OrDcKq0-WmYTA).

<Spacer size="small" />

<h2 className="micro">The History</h2>

The origins of command bars go back to 2005 when Apple released their [Spotlight feature](https://www.anandtech.com/show/1671/6) in MacOS 10.4 X Tiger. The update introduced a universal search bar you could launch by hitting `CMD + Space`. As part of the native operating system, it had access to every kind of file and function: documents, email messages, photos, settings, etc.

<ResponsiveImage src="/images/posts/command-bar/mac-spotlight.jpeg" width="400px" margin="1rem auto 3rem" alt="Spotlight in MacOS Tiger" sourceUrl="https://www.anandtech.com/show/1671/6" sourceTitle="Anand Tech" showalt />

Spotlight is still a core feature of Mac today and set many of the standards for other command bars to copy.

<ResponsiveImage src="/images/posts/command-bar/spotlight1.jpg" width="800px" margin="0 auto" />
<ResponsiveImage src="/images/posts/command-bar/spotlight2.jpg" width="800px" margin="0 auto 2rem" showalt alt="Spotlight on MacOS Monterey (2022)" />

Independent developers swooped in to build advanced versions of Spotlight and application launchers for Mac. [Quicksilver](https://qsapp.com/) was one of the earliest ones 


{/* "It's a mixture of the command line and finder and lets you get at information you wouldn't normally be able to see" */}

{/* https://9to5mac.com/2013/03/26/ten-years-in-tasklauncher-app-quicksilver-finally-reaches-version-1-0/ */}

{/* https://www.youtube.com/watch?v=P_WOPkT-9EI&t=562s */}

{/* The pattern caught on and other applications popped up: [Bulter](), [Alfred](), and [LaunchBar]() were other popular mac apps. */}


{/* After their success within operating system and desktop functionality, command bars slowly started appearing within specialised applications. [Sublime Text]() is a text editor for programmers that added a `k` bar in XXX. */}

The plugin [Sketch runner](https://sketchrunner.com/) added a CLI experience on top of the once-popular design platform [Sketch](https://www.sketch.com/).

<ResponsiveImage framed src="/images/posts/command-bar/sketch.jpg" width="1100px" alt="The sketch runner command bar" showalt />



<References>
  <ReferencesLink
    title="The History of Command Palettes: How Typing Commands Became The Norm Again"
    href="https://capiche.com/e/consumer-dev-tools-command-palette"
    author="Matthew Guay"
  />
  <ReferencesLink
    title="How to build a remarkable command palette"
    href="https://blog.superhuman.com/how-to-build-a-remarkable-command-palette/"
    author="Tim Boucher"
  />
  <ReferencesLink
    title="The Command Line Comeback"
    href="https://gabygoldberg.medium.com/the-command-line-comeback-9857b49c7423"
    author="Gaby Goldberg"
  />
  <ReferencesLink
    title="UI Breakthrough-Command Line Interfaces"
    href="https://jnd.org/ui_breakthrough-command_line_interfaces/"
    author="Don Norman"
  />
  <ReferencesLink
    title="CLUI: Building a Graphical Command Line"
    href="https://blog.replit.com/clui"
    author="Tyler Angert and Moudy Elkammash"
  />
</References>


Command line bars you can quickly summon with a keyboard shortcut

Command K Bars


<AssumedAudience>
  People who have basic familiarity with programming terms like "development environment", "variables", "compilation", and "functions." You probably won't understand this if you haven't done any programming.
</AssumedAudience>

<Spacer size="small" />

<h2 className="micro">The Context</h2>

Getting a local development environment setup is often a frustrating and error-riddled process. Especially if it's in a language or framework you're unfamiliar with. You end up in an epic struggle against package managers, unresolved $PATH directories, and conflicting versions of utilities and libraries. Online guidance varies widely depending on your operating system and what else you have installed.

Once you get everything sorted and start playing around with code, it's then hard to share that work with others. There's no quick link that can share both the syntax and output of a snippet of code running locally on your machine.

When you want to show someone a single function or a quick experiment, it's too much to ask them to install a bunch of command line crap. And even if they do, there's no infrastructure to guide them step by step through what the code does and in what order.

This is especially painful in educational environments when you want to guide new programmers through a set of instructions or lessons.

What you really need is a programming environment that doesn't involve locally installing anything, where you can share almost any size programme - small or large - via a simple link, and allows you to guide and annotate it for others to work through.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

"Computational notebooks"<Footnote idName={1}>Listed as a [notebook interface](https://en.wikipedia.org/wiki/Notebook_interface) on Wikipedia, which seems like a much worse name to me.</Footnote> have emerged as one of the best solutions to the problem of unshareable, unexplainable code trapped in cumbersome local development environments.

They're online documents that don't look all that different to a traditional text editor like Microsoft Word or Google Docs. You get a “page” that flows from top to bottom, accompanied by various toolbars and formatting options.

{/* [image of Google Colab] */}

But rather than typing freeform text, these notebooks are more structured. They're made up of “cells” that each have an input and an output. You type programming syntax into the cell and then “run” it, which compiles the code and produces an output. You can think of each cell as a small, self-contained programme running inline.

{/* [images of cells] */}

Cells can be either code or plain text. Being able to write plain text alongside working code allows the author to annotate their programme as they go. They can explain what each function does, why they wrote it, and add context to complex sections. This is why notebooks are ideal for tutorials or walkthroughs. Readers are never faced with mystery code, and they can clearly see the compiled output of each cell.

This approach of interleaving documentation and source code is called [literate programming](https://en.wikipedia.org/wiki/Literate_programming) and was first proposed by [Donald Knuth](https://en.wikipedia.org/wiki/Donald_Knuth) in 1984. He argued that _all_ code should be written in these linear, readable documents. See Chris Granger's [Eve project](https://witheve.com/) for a beautiful example of mixing prose and code.

To be a proper programming environment, these cells clearly need to coordinate. And they can! Cells can use variables and functions declared in other cells. If I declare `city = "Cockfosters"` in one cell, I can call `print(city)` in a later cell, which resolves to the string "Cockfosters".

Notebooks vary in how they handle variable scopes. In some you can only access variables declared above the current cell. In others variables are globally avaliable, no matter where they're declared.

You can also drag and drop cells around to rearrange them. This functionality is similar to block-based editors like [Notion](https://www.notion.so/) or [Coda](https://coda.io/) – you're able to edit at the block-level, rather than just on individual characters.

Most computational notebooks are designed for data science and machine learning. They typically support languages like Python and R and come with rich data visualisation and analysis tools. The one exception to this is [Observable](https://observablehq.com/) which runs JavaScript and is aimed at data visualiation designers.

Best of all, most of these notebooks run entirely in the browser. Which means you can share them with a quick link. This enables shareability in a way that's impossible with local code. People are able to fork other people's notebooks to run the code themselves and play around. Some even have multiplayer support, allowing you to work alongside people in the same notebook in real time.

<Spacer size="small"/>

<h2 className="micro">Examples</h2>

1. [Observable](https://observablehq.com/)
2. [DeepNote](https://deepnote.com/)
3. [Google Colab](https://colab.research.google.com/notebooks/intro.ipynb)
4. [Jupyter Notebook](https://jupyter.org/)
5. [Wolfram Mathematica](https://www.wolfram.com/mathematica/)




Shareable, browser-based documents that can compile and run code

Computational Notebooks


<h2 className="micro">The Context</h2>

Being able to quickly capture a new idea, a loose piece of information, or a vaguely formed thought is a critical feature of any worthwhile personal knowledge management system.<Footnote idName={1}>Also known as a note-taking system, but with a bit more emphasis on creating _personal knowledge_ rather than just creating _notes_</Footnote>

When you need to get an idea down, you want to get into an open text input as fast as possible. Ideally within a single click or keystroke. You don't want to think about what to name the page it will live on, where it fits into your existing information architecture, or what other ideas it should be linked to.

Half the time I begin typing something, I'm not even sure what I'm writing yet. Writing it out is an essential part of thinking it out. Once I've captured it, re-read it, and probably rewritten it, I can then worry about what to label it, what it connects to, and where it should 'live' in my system.

And sometimes (perhaps often), I stare at the written note and I'm _still_ not sure where to put it. It connects to many other bits of information and themes. It doesn't neatly fit into a single labelled folder. I have to think hard about _when_ I want to see this idea again. I have to make it findable for future me.

This organising work takes a non-trivial amount of mental effort, and there are plenty of moments when I can't be bothered. And I am not alone in this.

Sometimes we need to capture ideas and then let them sit for a while. Before we shift to organising and synthesising them. They need to hang out in limbo, uncategorised, in a place we can still find and revisit them. These could be inboxes or scrap piles; the equivalent of post-it notes left scattered around a desk.

This presents a problem for designers of these systems; how do we give people open, free-flowing, and unstructured inputs... that _also_ allow them to consistently rediscover, revisit, and organise their ideas?

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

The Daily Notes Page (colloquially, the DNP) is one of the most popular solutions to the problem of balancing frictionless input with future discoverability.

Many note-taking and knowledge management apps now have one. The DNP is usually an entry point – you begin there by default when you open the app. Every day, a fresh blank page appears with today's date at the top. And you are free to begin writing in it.

<ImageFrame
  width="1100"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1800/v1650355782/maggieappleton.com/patterns/dailynotes_1_pgidin.png"
  alt="The daily notes page in Remnote"
  showalt
/>

<ImageFrame
  width="1100"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1800/v1650355782/maggieappleton.com/patterns/dailynotes_3_mbs19s.png"
  alt="The daily notes page in Roam Research"
  showalt
/>

<ImageFrame
  width="1100"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1800/v1650355782/maggieappleton.com/patterns/dailynotes_2_gnjo0n.png"
  alt="The 'unsorted' daily notes page in Craft App"
  showalt
/>

If you want to see a previous day's entries, you usually scroll down or use the built-in date picker. It's quick to jump back a few days and see what you've been thinking about.

Each day becomes a reference point. When you encounter a bit of writing in the future, you know exactly when you captured it. You can look at what else you wrote on the days surrounding it. This extra context makes it easier to know what it relates to and where it should eventually live.

You might decide it doesn't need to ‘live’ anywhere at all. It can just stay on the DNP. This absolves you of the need to find a suitable home for every piece of information. As long as you can find it again via search and tags, why go to the trouble of filing everything away?

The DNP doesn't demand any particular rigour, format, or formality. As an unopinionated dumping ground, people seem to find it freeing. Being able to write out strange thoughts, misguided ideas, and half-baked theories without any obligation to immediately resolve them is arguably necessary to arrive at higher-quality ideas. There's little risk of cluttering up your database, as tomorrow the page will automatically be swept away into the archives. The passage of time acts as a natural way to clear out old notes; new day, new page.

### Daily Templates

Setting up templates that auto-fill your DNP has become popular in many of the newer knowledge management apps. Users of apps like Obsidian, Roam, and Logseq share [their](https://www.reddit.com/r/ObsidianMD/comments/pjp8d1/daily_note_templates_please_share/) [personal](https://matthewweeks.medium.com/the-daily-notes-template-i-use-in-roam-research-after-1-year-of-daily-use-and-refinement-fa8ffb85849d) [templates](https://nesslabs.com/9-useful-templates-for-roam-research) in [spades](https://www.youtube.com/watch?v=JCIdJBZGQLQ).

These commonly include journaling prompts such as “How are you feeling?”, “What's on your mind?”, or “What's the most important thing you need to work on today?”.
Others have designated areas for task lists, time-tracking logs, and capturing ideas.

Rather than simply being static prompts, many of these include dynamic queries and buttons connected to programming scripts. They can fetch unfinished to-do items, show you yesterday's journal entries, start and stop timers, or calculate word counts. For more on these types of flows, see [[Programmable Notes]]

<ImageFrame
  width="800px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:best,w_1100/v1652083037/maggieappleton.com/patterns/dailynote_roam_qgr7ej.png"
  alt="An example of a daily note template in Roam Research"
  sourceUrl="https://www.youtube.com/watch?v=5YsbNKkEoJs"
  sourceTitle="Jeffery Webber"
  showalt
/>

These templates work as a kind of [programmable attention](https://notes.andymatuschak.org/zJrfPCbY7GcpV9asEc8NTVzXTAV4TvRFMuY6). You are directed to answer specific questions each morning, log certain kinds of thoughts, record daily activities, or track your habits. Many people find them helpful as a way to structure their working days and encourage self-reflection and metacognition. This turns the DNP into more of a workflow management tool, rather than a place to capture information.

### Potential Problems and Consequences

The DNP solves a tricky problem, but like all design solutions, comes with costs. The daily cadence of a DNP frames the system as a kind of personal diary. Which we may not necessarily _want_ in a personal knowledge base.

Mixing up your notes on Heidegger's _“The Question Concerning Technology”_ and your reflections on whether your mother is gaslighting you might lead to uncomfortable context collapse. It could easily be distracting when search results turn up both academic claims and uncharitable rants about your significant other. Don't shit where you need to critically think, as the old saying goes.

There's also a good chance the DNP encourages people to spend non-significant amounts of time journaling and writing notes they never look back on. We risk creating large piles of unstructured cruft and free-flowing thoughts that don't amount to larger realisations or meaningful outputs. Or at least, are an inefficient means of getting us there.

It would be hard to measure whether that concern is true in any ‘objective’ sense. But we should fear it nonetheless.

<References>
  <ReferencesLink
    title="A great Twitter thread on DNPs"
    href="https://twitter.com/TfTHacker/status/1494933522242539522?s=20&t=Fn7-OXIsT79Xj1cdIDwFIA"
    author="@TfTHacker"
  />
</References>


Daily notes as a frictionless default input for personal knowledge management systems

Daily Notes Pages


<h2 className="micro">The Context</h2>

For most of the words we read online, we have a limited amount of context about the writer and how much effort they've put into the piece we're reading.

We might have a name and a tiny 32px profile image. We don't know how long it took them to write these words, how many hundreds of tabs they read through, or whether they spent years earning a graduate degree on the topic. We rarely have a rich backstory with a comprehensive educational and professional history at hand.

If we disagree with their points, we're more likely to be ungenerous Epistemic Peers who assume the worst: they've barfed this garbage up in a single, frenzied caffeine rush and haven't so much as opened Google Scholar to check for prior art.

That might all be true. Which is fine. As long as they _disclose_ the situation upfront. The only true source of disappointment – in both reading and life – is unmet expectations.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

At the beginning of a piece of writing, the author writes a sentence or two about the **epistemic status** of the work. _Epistemology_ is the study of knowledge – how we know things, the methods we use to gain knowledge, and how we validate knowledge as "true.” So an _epistemic status_ usually covers how the author came to know what they know. This includes how much effort they put into researching it, how they validated the information, and how sure they are about their conclusions.

Scott Alexander of [Slate Star Codex](https://slatestarcodex.com/) was one of the earliest well-known bloggers to do this. Many of his posts include statuses that range from "total conjecture” to "pretty good, but I make no claim this is original.” Here are a few more choice examples:

<ImageFrame
  style={{ margin: "0 auto 1rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1641161435/maggieappleton.com/patterns/epistemic1_w0umsf.png"
  alt="A Scott Alexander post with the epistemic status more crackpottish than usual"
/>

<ImageFrame
  style={{ margin: "0 auto 1rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1641161787/maggieappleton.com/patterns/epistemic2_syifue.png"
  alt="A Scott Alexander post with the epistemic status very speculative"
/>

<ImageFrame
  style={{ margin: "0 auto 2rem" }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1641161787/maggieappleton.com/patterns/epistemic3_meynmd.png"
  alt="A Scott Alexander post with the epistemic status very speculative and not necessarily endorsed"
/>

[Gwern](https://www.gwern.net/) is another blogger who adds rich metadata to each post. They have a numerical "certainty" rating on each post:

<ImageFrame
  style={{ marginTop: 0 }}
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1641198514/maggieappleton.com/patterns/gwernepistemic_1_jpo0dp.png"
  alt="A Gwern post on spaced repetition with a certainty rating of highly likely"
/>

The rationalist and Effective Altruist communities have been particularly enthusiastic about the pattern. In true Rationalist style, one person writes up a comprehensive proposal to [standardize epistemic statuses](https://www.reddit.com/r/LessWrong/comments/eesr4y/a_proposal_for_standardizing_epistemic_status/) on the r/LessWrong subreddit.

<References>
  <ReferencesLink
    title="Epistemic Effort on LessWrong"
    href="https://www.lesswrong.com/posts/oDy27zfRf8uAbJR6M/epistemic-effort"
    author="Raemon"
  />
  <ReferencesLink
    title="Epistemic Statuses are Lazy and that is a Good Thing"
    href="https://devonzuegel.com/post/epistemic-statuses-are-lazy-and-that-is-a-good-thing"
    author="Devon Zuegal"
  />
</References>


Providing clear metadata on the epistemic validity of content

Epistemic Disclosure


<h2 className="micro">The Context</h2>

Folk [comes from](https://www.etymonline.com/word/folk) the old English _folc_ meaning “common people, laity; men; people, nation, tribe; multitude; troop, army.”

In modern lanuage we use it to mean “of the common people” or “from the people.” Anything that emerges from the ground-up, from the needs and wants of regular folk, rather than from large professional, political, or commerical interests.

[Folklore](https://en.wikipedia.org/wiki/Folklore) is a collection of oral stories and cultural beliefs people pass through the grapevine. [Folk art](https://en.wikipedia.org/wiki/Folklore) is what people make of their own accord, outside the institutions of Art, usually with an eye towards pragmatism.

<TwoColumn alignItems="top" maxWidth="1300px" margin="0 auto var(--space-l)">

<ResponsiveImage
  width="652px"
  height="423px"
  src="/images/posts/folk-interfaces/folkart1-squashed_pp1mvi.jpg"
  alt="Finnish folkart figurines"
  sourceUrl="https://www.flickr.com/photos/altfelix11/52280519722/in/pool-figgjonymollebjornwinbladarabia/"
  sourceTitle="Flickr"
  showalt
/>

<ResponsiveImage
  width="583px"
  height="423px"
  src="/images/posts/folk-interfaces/folkart2-squashed_l8tts2.jpg"
  alt="Czechoslovak folkart matchbox covers"
  sourceUrl="https://www.flickr.com/photos/maraid/"
  sourceTitle="Flickr"
  showalt
/>

</TwoColumn>

[Folksonomies](https://en.wikipedia.org/wiki/Folksonomy) are informal taxonomies developed by users on social sharing platforms. Usually in the form of tags on sites like Flickr, Tumblr, or Instagram.

Designers talk of “folk practices” to describe the ways people creatively adapt and repurpose objects in their environment to meet their needs. Ledges used as tables, chairs as doorstoppers, cup handles as teabag holders, and stairs as seating.

<TwoColumn alignItems="top" maxWidth="1000px" margin="0 auto var(--space-l)">

<ResponsiveImage
  src="/images/posts/folk-interfaces/designf1_eytbvh.jpg"
  alt="An impromtu table"
  sourceUrl="https://www.flickr.com/photos/withassociates/3170374666/in/photolist-7d6xg-4HCE7i-2RNw6-47k8M-2GCsq-2ubh5-2mYa2-eTg74y-78UY9B-5Q9ZWb-axbq8b-9QUdR-b2e97-8svSq-agv4Z-qhcqL-8svNR-siMPo-9X5FG-8suTx-8svwN-25CN7-48iZF-aBAm2-4zHWVM-4zMTVE-4zCMVP-4zz1wv-2ze22-4zEFBP-7Te57i-78UY6e-6Vt7g5-7zkzyw-3GXF3K-4A6ESm-r5UJd-oeM3ru-78YPQJ-oyarep-oeVaFo-78UY1T-G2L9t-6Vt745-cH4m9-4zHbHV-4jziP7-gJpyA-gJpyY-gJpyo"
  sourceTitle="Flickr"
  showalt
/>

<ResponsiveImage
  src="/images/posts/folk-interfaces/designf2_jfwxje.jpg"
  alt="An impromtu cup holder"
  sourceUrl="https://www.flickr.com/photos/whenitwas/526683840/in/photolist-7X1m7U-8ABefZ-8ABegk-8ABege-7aMjFF-8ABefH-7Thjaq-7Te4Sp-6fKiEP-4zJSZw-72d1Rn-6fQbbW-3AhNEr-3BQqSY-6kuMwE-321RfW-59iQDE-4zGqxT-6fKiRt-sYBiW-8svFt-dSMbC-8svYE-3BEa4y-6fKimt-59iQw1-6dvjvC-pJrgt-m15Tx-6Nrqan-oXqagP-7Thj4s-3AoZw9-NxoKS-4STDGG-3BQ5vm-5sytML-QamEh-pfNsSu-sYBkt-5vDM2j-Qb4Qz-gLWyZ-dPUzu-dPQ4X-Qb2uk-ucY5U8-QanxC-3AndG5-8sv2F"
  sourceTitle="Flickr"
  showalt
/>

</TwoColumn>

Folk creations fill a gap. They solve problems for individuals and small communities in a way that that centralised, top-down, industrial creations never can. They are informal, distributed practices that emerge from real world contexts. Contexts where individuals have little or no control over the “official” means of production – of furniture, urban architecture, crockery, artwork, media stories, or taxonomies. In response people develop their own unpolished, unofficial, and deeply practical creations.

The world of software and interface design has become yet another place of centralised, mass production. Large California-based companies produce monolithic apps and interfaces for a global audience. They're designing for the broadest, generic use cases to make things work for the greatest number of people.

No matter how much well-intentioned user research these companies invest in, they'll never be able to produce software that fully meets the needs of individual users and culturally distant communities. A situation primed for folk creations.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

Folk interfaces are when users reappropriate existing software to solve their own problems. Rather than using applications in the ways designers and developers intended, they creatively reconfigure them to do unexpected things.

[Cristobal Scuitto](https://cristobal.space/) coined the term **folk interfaces** while [writing about](https://cristobal.space/writing/folk) their experiments using the browser as a media interface for local files.<Footnote idName={1}>Before discovering Cristobal's coinage, I referred to these types of interfaces as _reappropriated software_ or _interface hacks_. But **folk interfaces** is a far better name that carries all the right connotations and historical context for this idea.</Footnote>

<ResponsiveImage
  framed
  width="800px"
  src="/images/posts/folk-interfaces/cristobal_vvbmex.jpg"
  alt="Cristobal's browser-as-media-interface"
  showalt
/>

The browser is designed as a place for you visit and interact with webpages. But as a collection of affordances, it's a rendering engine that can display images, play animations, accept text, and register user clicks, drags, and gestures. The data it renders could all be local to your machine. There's no rule saying you _have_ to browse the web with it.

We could also treat the browser as a JavaScript runtime environment. If you open up the console tab inside developer tools, you can execute JavaScript code just like in an IDE. You could check the date and time, write a fizz buzz test, or call the Hacker News API.

<ResponsiveImage
  margin="0.5rem auto 3rem"
  width="1100px"
  src="/images/posts/folk-interfaces/browserja-squish_zkfsbo.jpg"
  alt="Using the built-in browser console as a JavaScript runtime environment"
  showalt
/>

This requires looking at applications sideways. You can look at an interface and see it as a clearly signposted user journey you should follow. Or you can see it as a collection of functions and affordances to repurpose. As raw material, rather than a guided path.

Spreadsheets are another infamously malleable material for folk interfaces. The simple concepts of cells, rows, and formulas can be turned into all manner of things beyond financial accounting.

Here's an entire digital audio work station that [Dylan Tallchief](https://www.youtube.com/channel/UCIu2Fj4x_VMn2dgSB1bFyQA) built in Excel:

<Video src="https://www.youtube.com/embed/RFdCM2kHL64" />

<Spacer size="medium" />

Spreadsheet art is another reappropriation of the interface. People make elaborate pixel art images by colouring in the cells.

<ResponsiveImage
  framed
  margin="1rem auto"
  width="800px"
  src="/images/posts/folk-interfaces/sheetart1_sqlxek.png"
  alt="The manga character Conan Edogawa created in Microsoft Excel"
  showalt
  sourceUrl="https://www.deviantart.com/reijr/art/microsoft-excel-conan-edogawa-777087209"
  sourceTitle="reijr"
/>

<ResponsiveImage
  framed
  margin="2rem auto 3rem"
  width="800px"
  src="/images/posts/folk-interfaces/sheetart2_gjavhv.jpg"
  alt="Nyan Cat art created in Microsoft Excel"
  showalt
  sourceUrl="https://www.deviantart.com/oscarit07/art/Nyan-Cat-in-Microsoft-Excel-262768148"
  sourceTitle="Oscarit07"
/>

Here's a [character dashboard](https://docs.google.com/spreadsheets/d/1qw3DMBK4OgF0jai8GDRtKKXZ8oZmzwwO8phXRD5nC1k/edit?usp=sharing) designed to faciliate a session of the role-playing game Dungeons and Dragons, entirely built in Google Sheets:

<ResponsiveImage
  framed
  width="1200px"
  src="/images/posts/folk-interfaces/dnd_f5dsmh.jpg"
  alt="A D&D character sheet built in Google Sheets"
/>

None of these uses cases could have been predicted or catered for by the Microsoft Excel product team. They're pure folk creations.

Historically, the term “folk” was used when [talking about the rural poor](https://en.wikipedia.org/wiki/Folklore#CITEREFDundes1969:~:text=The%20folk%20of%20the%2019th%20century%2C%20the%20social%20group%20identified%20in%20the%20original%20term%20%22folklore%22%2C%20was%20characterized%20by%20being%20rural%2C%20illiterate%20and%20poor) and illiterate peasants. It's fitting that folk practices in software are often developed by people illiterate in programming. Without access to formal programming skills, they use what they have to make things work. In ways that demonstrate profound creativity and logical problem-solving.

This scavenging in the SaaS landscape is how people express agency and control in a computing environment that limits who has access to programmatic power. Only professional programmers and designers get to decide what buttons go on the interface, what features get prioritised, and what affordances users have access to. Subverting that dynamic is the only way people can get their needs met with the computational tools they have at hand.

Software isn't the first discipline to struggle with this power dynamic between professionals and everyday people. Architecture and product design have been at it for centuries.

[Victor Papanek](https://en.wikipedia.org/wiki/Victor_Papanek) is a widely venerated designer who developed the “design for the real world” philosophy in the 1970's. He advocated for an approach that moved away from aesthetics and toward solving practical problems for people with found, local materials. His most infamous design was the 'tin can radio' that could pick up a one-way signal in rural areas – enough to get a news broadcast. It could be made out of a single tin can, some copper wire, a rusty nail, and any available fuel source, for a total of 9 cents in production costs.

<ResponsiveImage
  margin="0.5rem auto 2rem"
  width="800px"
  src="/images/posts/folk-interfaces/papnek_iqudqq.jpg"
  alt="Victor Papnek's tin can radio"
  showalt
/>

The Japanese philosophy of [Mingei](https://en.wikipedia.org/wiki/Mingei) was another movement we should heed. Developed in the 1920's, it championed the beauty of everyday items made by “nameless craftsmen” with traditional techniques and local materials. This pushed against the prevailing cultural trends of moderinism that valued “high art” made by famous artists.

It's unclear what the full range of local materials and traditional techniques of interface design and programming are yet. Perhaps its simply spreadsheets, browsers, and more accessible [end-user programming](https://en.wikipedia.org/wiki/End-user_development) tools. We should be on the lookout for others. Giving people the raw materials to solve their own problems is the folkiest way forward.

<Spacer size="small" />

<h2 className="micro">Bonus Content</h2>

In the spirit of reimagining interfaces, please enjoy this collection of “folk art interfaces” dreamed up by [Midjourney](https://www.midjourney.com/). Such vibes.

<TwoColumn maxWidth="1000px" gridGap="2.75rem">

<ResponsiveImage src="/images/posts/folk-interfaces/folk5_xldfr5.jpg" alt="" />
<ResponsiveImage src="/images/posts/folk-interfaces/folk4_l18nmf.jpg" alt="" />
<ResponsiveImage
  src="/images/posts/folk-interfaces/folk2-4_rekprv.jpg"
  alt=""
/>
<ResponsiveImage src="/images/posts/folk-interfaces/folk7_k7wytx.jpg" alt="" />
<ResponsiveImage
  src="/images/posts/folk-interfaces/folk2-3_hq75yi.jpg"
  alt=""
/>
<ResponsiveImage
  src="/images/posts/folk-interfaces/folk2-1_sfuul0.jpg"
  alt=""
/>

</TwoColumn>

<References>
  <ReferencesLink
    title="Folk (Browser) Interfaces"
    href="https://cristobal.space/writing/folk"
    author="Cristobal Scuitto"
  />
  <ReferencesLink
    title="Painting the Tin Can – On Victor Papanek"
    href="https://medium.com/@alexanderjcat/painting-the-tin-can-485964ddb44"
    author="Alex Catanese"
  />
  <ReferencesLink
    title="Design for the Real World"
    href="https://www.google.co.uk/books/edition/Design_for_the_Real_World/7tedwwEACAAJ?hl=en"
    author="Victor Papanek"
  />
  <ReferencesLink
    title="The Beauty of Everyday Things (on Mingei)"
    href="https://www.google.co.uk/books/edition/The_Beauty_of_Everyday_Things/BIRbDwAAQBAJ?hl=en&gbpv=0"
    author="Soetsu Yanagi"
  />
  <ReferencesLink
    title="End-user Programming"
    href="https://www.inkandswitch.com/end-user-programming/"
    author="Szynmon Kaliski & Adam Wiggins"
  />
  <ReferencesLink
    title="Mingei – Wikipedia"
    href="https://en.wikipedia.org/wiki/Mingei"
  />
  <ReferencesLink
    title="End-user Development – Wikipedia"
    href="https://en.wikipedia.org/wiki/End-user_development"
  />
</References>


People reappropriating existing software to solve their own unique problems

Folk Interfaces


<h2 className="micro">The Context</h2>

Most "note-taking” or "knowledge management” software acts as a passive storage container. You create notes, shuffle them around into folders, add a few tags, and then they sit there. Waiting. Until you consciously remember to go looking for them.

This warehouse approach to notes requires us – the human agent in the system – to do a **lot** of cognitive labour if we want to _use_ our notes. And _using_ our notes is the entire point of any note-taking enterprise.

Most of us have an ulterior motive beyond writing notes – we want to remember, understand, and synthesise ideas, come to confident conclusions, generate new ideas informed by historical and social events, write coherent essays, or work through difficult problems.

Getting to any of these outcomes requires far more work than typing words into a storage container and retrieving them again. Most note-taking software doesn't guide us towards any particular workflows or ways of thinking with our notes. We have to develop them ourselves.

We have to remember what kind of information we saved in the first place. We have to know what keywords or search methods will allow us to find it again. We have to develop ways to integrate old ideas with new ones. We have to prompt ourselves to expand on our notes, combine them, synthesise them into new realisations, and critique our conclusions.

Thankfully, there's a long history of people finding ways to make these cognitive tasks easier. We can draw on well-established cultural practices and techniques; we can write [[Evergreen Notes]] and build [Zettelkastens](https://zettelkasten.de/posts/overview/). We can practice [knowledge synthesis](https://oasislab.pubpub.org/pub/54t0y9mk/release/3) and [critical thinking](https://en.wikipedia.org/wiki/Critical_thinking). We can use [spaced repetition](https://notes.andymatuschak.org/z7iCjRziX6V6unNWL81yc2dJicpRw2Cpp9MfQ?stackedNotes=z2gqazXUkf9qyFjMQg4W3dw6yegnAJszvDywN) to regularly resurface old ideas. We can write for an engaged and discerning public audience. We can even sign up for expensive master's degrees that will force us to ask hard questions and conjure up defensible answers.

These practices are what turn notes into understandings, conclusions, informed opinions, new ideas, and original creations. But we've yet to see note-taking software that **actively facilitates and encourages** these workflows. They are, for the most part, still behaving like storage boxes.

What if we started to think about note-taking systems as active agents, rather than receptacles?

Agents can prompt you to do specific activities in a sequence. They can ask you questions. They can suggest relevant material based on what you've already written. They can periodically resurface old ideas to ask if they still ring true. They can prompt you to connect two disparate ideas together. They can mimic conversational partners who debate the strengths and weaknesses of a point – naive partners perhaps, but still better than no partner at all.

"Agents” here are simply programmes<Footnote idName={1}>Or "algorithms" if you're trying to convince someone this programme is more complex than a list of instructions. It's not. But it does sound better.</Footnote>; pre-written sequences of instructions that facilitate standardised cultural practices and repeatable ways of relating to the world.

We could, in essence, run automated programmes and algorithms over our notes. Programmes that we have the agency to write as users.

<Spacer size="small" />

<h2 className="micro">The Pattern</h2>

Programmable notes are note-taking systems that allow you to write programmatic rules that facilitate particular ways of working with your notes.

Based on triggers (specific conditions are met, input from the user, time of day), they kick off a sequence of actions. Actions might be prompts for the user to answer, transformations on the notes themselves, or requests to external websites and data sources for information.

We're floating into the land of computational abstraction so let's make this tangible with some examples:

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I open my note-taking app first thing in the morning</NoteTrigger><NoteAction>ask what I'm currently thinking about. Once I've marked this complete, show me what I said yesterday, three days ago, and last week.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I create a note related to a specific book</NoteTrigger><NoteAction> pull in the author, cover, and publication date from the Google Books API.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>a week has passed since I've written notes on a book</NoteTrigger><NoteAction>ask me everything I remember about it off the top of my head. Put this into the summary section of my notes as a first draft.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>a month has passed since I last touched a note marked as an essay draft</NoteTrigger><NoteAction>gently prompt me to read through it again and write down why I'm stuck.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I state a claim</NoteTrigger><NoteAction>ask what evidence I have to back it up and what other notes, books, or academic articles I want to mark as sources for this claim.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-xs)">

When <NoteTrigger>I mark an essay draft as complete</NoteTrigger><NoteAction>ask me all the questions my favourite writing professor would ask.</NoteAction>

- Do you actually have a point and have you made it?
- Does your introduction present a compelling problem?
- Are you assuming the audience is thicker than a brick?
- Is this littered with passive voice (to be, is, was, were...) and evasive language?

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I write a note that shares many of the same keywords and phrases as an existing note</NoteTrigger><NoteAction>show them to me side by side and ask if I want to combine them.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I mark a note as [[Evergreen]]</NoteTrigger><NoteAction>ask me what other Evergreen notes I want to link it to, and offer suggestions based on ones with similar keywords, tags, and references.</NoteAction>

</SimpleCard>

<SimpleCard alignLeft padding="var(--space-s) var(--space-l) var(--space-m)">

When <NoteTrigger>I say I'm stuck for new ideas</NoteTrigger><NoteAction>select a few random notes from my database and ask me to expand upon them using prompts from generative frameworks like [SCAMPER](https://en.wikipedia.org/wiki/SCAMPER) or [oblique strategies](https://en.wikipedia.org/wiki/Oblique_Strategies).</NoteAction>

</SimpleCard>

I could go on, but I'll spare you from my other 99 mediocre programmatic note ideas. It's hopefully clear that the goal of these is to encourage practices like reflection, synthesis, connection, and serendipity. The goal is not to simply amass notes.

None of the automations I've suggested above are impractically complex or technologically impossible. They all follow a reasonably simple _if this, then that_ structure that most of us will find familiar. Many are perfectly possible and currently used in existing platforms.

The [Smartblocks](https://roamjs.com/extensions/roam42/smartblocks) plug-in for [Roam Research](https://roamresearch.com/) is the system I personally use to build these types of workflows. It offers a set of triggers, variables, and commands you can chain together into fairly readable statements like: `<%SET:topOfMindToday,<%INPUT:What's on your mind today?%>%>` or `<%RANDOMBLOCKFROM:Writing Ideas%>`.

Even with limited programming knowledge, many people in the community have been able to fashion their own Smartblock flows. Plenty of them have [published](https://github.com/dvargas92495/SmartBlocks/issues?q=is%3Aopen+is%3Aissue+label%3ASmartBlock) their workflows to the community Github for others to use. These include [sentiment analysis](https://github.com/dvargas92495/SmartBlocks/issues/171) over a selection of text, pulling data [from wikipedia](https://github.com/dvargas92495/SmartBlocks/issues/42) into your notes, and a [decision making](https://github.com/dvargas92495/SmartBlocks/issues/88) flow walking you through the benefits, risks, and costs of all your options.

The UX of both Smartblocks and Roam is still pretty rough. But they're pointing towards something promising. They're also not alone in enabling users to write their own programmable notes. There are a wide range of user-created plug-ins for similar platforms like [Obsidian](https://obsidian.md/plugins) and [Logseq](https://logseqweekly.com/plugins/) that enable some of these same workflows.

[Coda](https://coda.io/) is another app that allows users to build fairly complex programmatic systems within documents. You can create buttons that trigger actions and write automation scripts with conditional logic.

<ImageFrame
  width="1200"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1647715244/maggieappleton.com/patterns/coda-2_wtvyeo.jpg"
  alt="The Coda interface with customisable buttons and an open sidebar for creating automation rules"
/>

Another project I'm watching closely is [Gordon Brander](https://gordonbrander.com/)'s app [Subconscious](https://subconscious.substack.com/p/launching-subconscious-alpha-1?s=r) (currently in alpha) that promises to feature _"geists"_ – "little scripts that find connections between notes, and use procedural generators to construct algorithmic provocations.” <Footnote idName={2}>From Gordon's Subconscious newsletter: [SCAMPER and procedural idea generation](https://subconscious.substack.com/p/scamper?s=r)</Footnote>

These trends all bode well for programmable notes. They prove that – given enough agency – users will enthusiastically write their own programmes that facilitate the particular note-taking practices and techniques they find valuable.

This is [end-user programming](https://www.inkandswitch.com/end-user-programming/) in action. The developers and designers of note-taking apps will never be able to create systems that suit the needs of everyone's particular knowledge management workflows. Enabling users to design and share their own is the only way to give people agency over their knowledge bases.

#### But what about AI???

It is impossible to propose agentive computational systems designed to help us think better without bringing up **THE AI**. Let's first point out the term "AI” is a nebulous and finicky cultural narrative. People use it in all sorts of ways depending on the political agenda of the speaker.

In this context, I'm using _AI_ to refer to systems that use natural language processing, neural networks, and machine learning to respond to people in seemingly 'intelligent' ways. These will play an enormous role in the future of programmable notes.

We've yet to see note-taking platforms meaningfully add _AI_ affordances into their systems, but there are hints at how they could in other platforms.

The most impressive and promising I've seen is [Elicit](https://elicit.org/), a research tool that helps academics and students find relevant papers and data based on natural language inputs. You can ask it a question like "What's the point of note-taking?” and receive a list of research papers that are likely to hold the answer. Even better, Elicit creates a one-sentence summary of the paper's main finding and presents it in the results.

<ImageFrame
  width="1200"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1647728451/maggieappleton.com/patterns/elicit3_1_whsaop.png"
  alt="Elicit search results showing summaries and titles of relevant papers"
  showalt
/>

Finding relevant research papers is critical for academics and researchers but isn't a large part of everyone's writing and sense-making process. <Footnote idName={3}>Although tools like Elicit will hopefully play a role in making academic research less intimidating and more accessible to everyday knowledge workers. You don't need a degree to do a quick literature review when you're trying to solve a well-defined problem.</Footnote>

Elicit has an alternative suite of tools that I find much more intriguing for our use case. Using the same NLP technology you can run requests like:

- Clarify a concept
- Suggest similar search terms
- Brainstorm possible counterarguments
- Rephrase a sentence
- Help me be more specific.

<ImageFrame
  margin="var(--space-s) auto var(--space-s)"
  width="1200"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1647850074/maggieappleton.com/patterns/elicit4_g1q0zz.png"
  alt="Elicit suggesting possible counterarguments to a provided claim"
/>

<ImageFrame
  width="1200"
  margin="0 auto var(--space-xl)"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1647726850/maggieappleton.com/patterns/elicit1_1_lcwpel.png"
  alt="Elicit suggesting ways to rephrase a sentence"
/>

These simple linguistic transformations and generative prompts don't require a high level of intellectual sophistication to be useful. Sometimes you just need a wall to bounce ideas off. And modern NLP systems are a great wall. They can give us just a touch of reflection, perspective, and serendipity when we get stuck in our own heads.

To address the slippery-slope argument, I think it's pointless to worry about these systems doing too much of our thinking for us. Rephrasing a sentence is a far cry from writing an informed and insightful social criticism essay.

They certainly might prompt us to think in novel and unfamiliar ways though. [Augmenting human cognition](https://www.dougengelbart.org/content/view/138/) is still the end goal here. Let's hope we see more of it.

<References>
  <ReferencesLink
    title="True Algorithms of Thought Have Arrived"
    href="https://www.cortexfutura.com/algorithms-of-thought-have-arrived/"
    author="Cortex Futura"
  />
  <ReferencesLink
    title="Spaced repetition systems to program attention"
    href="https://notes.andymatuschak.org/Spaced_repetition_systems_can_be_used_to_program_attention"
    author="Andy Matuschak"
  />
</References>


Agent-based note-taking systems that can prompt and facilitate custom workflows

Programmable Notes

Small, scoped areas within a graphical interface that allow users to read and write simple programmes

Programming Portals


<h2 className="micro">The Context</h2>

Our web browsing experience hasn't changed much over the last three decades.

Here's Mosaic, the first browser that made the web popular outside niche academic circles. Built in 1993, its _"killer feature"_ was inline images.<Footnote idName={1}>As opposed to images you had to download and open in a separate window</Footnote>

<ImageFrame
  width="900px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_900/v1642358019/maggieappleton.com/patterns/moasic_fxat9i.png"
  alt="The Mosaic web browser interface in 1993"
/>

And here's Chrome, currently the most widely used browser, 29 years later:

<ImageFrame
  width="1100px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1100/v1642358018/maggieappleton.com/patterns/chrome_wbjk5d.png"
  alt="The Chrome browser interface from 2019"
/>

On the surface, not much has changed. The layouts, icons, and button arrangement haven't moved. Address bar at the top. Arrow icons to move between pages. Access to the same basic controls; print, refresh, save, and search.

Modern Chrome certainly gained the veneer of minimalist modern design; we've reduced the interface to a low-contrast sea of whitespace. It's also vastly more powerful; 1993 Mosaic certainly couldn't load 20 tabs running WebGL animations.

But from a user's perspective, the core browsing experience isn't different. Enter URL, load the page, click on links, move forwards and backwards in browser history. We can only see one website at a time, or max two if we stack our browser windows in columns.

Chrome and Mosaic are not uniquely similar. All the major characters in this browser drama – Firefox, Safari, Opera, and Internet Explorer/Edge – feel like they're wearing the same outfit.

This historical consistency is impressive. Perhaps it means we nailed this interface pattern on the first try. Or perhaps it means building browsers is an enourmously complex challenge, and the only companies with enough engineering resources to dedicate towards it aren't interested in mucking about. They're too busy keeping up with W3C web standards and negotiating cross-compatability concerns, leaving little room for experimental interface patterns.

This isn't for lack of want though. There have been plenty of calls to _"reinvent"_ the browser. Places like [The Browser Company](https://thebrowser.company/) make a lot of noise about it (but we've yet to see a product demo). Foundations like Mozilla have funded extensive [experimental explorations](http://patrykadas.com/browser.html) of alternative browsers.

There's a steady stream of ideas and speculative sketches floating around Twitter that prompt us to reconsider our browsery assumptions and ask good design questions:

<TweetEmbed tweetId="1418749070336684034" />

<TweetEmbed tweetId="1450479522609090562" />

<TweetEmbed tweetId="1256317316452810755" />

The dreams in some of these speculative suggestions are starting to materialise.

<Spacer />

<h2 className="micro">The Pattern</h2>

There are some new apps appearing that offer alternative ways of browsing the web, but sidestep the problem of needing to build an entire browser.

Through the use of `<iframe>` embeds (or sometimes darker magic like live-updating screenshots in `<img>` tags), these apps are creating a form of web inception; allowing us to embed tiny browser windows inside a larger canvas. <Footnote idName={2}>This is a tricky as many websites deny access if they're embedded inside other webpages. This isn't out of malice; they're trying to protect themselves from cross-site scripting attacks</Footnote>

This canvas-based approach adds _spatial_ dimension to the web browsing experience; they allow us to arrange browser windows above, below, to the left, and right of other browser windows.

The same way we're able to put an open book next to a piece of paper and below a row of sticky notes in meatspace. Arranging objects in space to create groupings, indicate relationships, and build hierarchies is one of those classical human skills that never goes out of style.

#### Spatial Browsing Apps

1. [Kosmik](https://lithium.paris/) is a canvas-based note-taking app for iOS and Mac app that includes frames for web browsing. It's still in early development, but as a native app it doesn't seem to have the same cross-site blocking issues as web apps.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642582738/maggieappleton.com/patterns/kosmik_rm0rpy.jpg"
  alt="A Kosmik canvas with three open browsers arranged next to one another"
/>

2. [Nette](https://www.nette.io/) is a browsing app designed for researchers that allows you to open multiple browser windows, draw physical connections between frames, pull out key concepts, and write markdown notes directly into your canvas. <Footnote idName={3}>Still pre-release but looking promising</Footnote>

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/nette_kjqsgj.jpg"
  alt="A Nette canvas with open browsers, diagrams, and notes arranged next to one another"
/>

3. [Sprout](https://sprout.place/) is designed with social interaction in mind – an open, multiplayer canvas where you can video/voice chat, write notes, and browse webpages together. It cleverly sidesteps the issue of cross-site blocking by using screenshots in `<img>` tags instead of true `<iframe>` elements.

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/sprout_ffcyrn.jpg"
  alt="A Sprout canvas with two open browsers arranged next to one another"
/>

4. [Natto.dev](https://natto.dev/) isn't designed to be a browsing or knowledge management app, but inadvertently implements this pattern. It's a spatial canvas for programming that happens to allow HTML elements, such as `<iframe>`:

<ImageFrame
  width="1200px"
  src="https://res.cloudinary.com/dxj9qr5gj/image/upload/c_scale,f_auto,q_auto:good,w_1200/v1642543667/maggieappleton.com/patterns/natto_cfqkov.jpg"
  alt="A Natto canvas with three open browsers arranged next to one another"
/>

All of these examples allow you to add different blocks and elements to your canvas other than simply browsers. This turns the interface into a true research space. You can add notes, images, and links connected to these browsers – pulling out information in order to arrange it in ways that make sense to you.

At least... in theory. The above platforms are promising, but they're all at beta/alpha stage for the moment. They're worth playing with, but not stable enough to build up an extensive database of notes and browser trails in.

We're so close though. Here's to hoping we have widely useable spatial browsing tools within the next year or two.

#### Postscript

I should touch on the impulse to bring in even more dimensions here. When you search for "_spatial web browsing_,” you'll find there are whole engineering teams trying to stick web browsers on [walls within 3D AR/VR](https://venturebeat.com/2021/05/13/spatial-unveils-web-browser-collaboration-in-3d-workspace-and-nft-virtual-galleries/) environments. To me this feels like putting the cart before the poorly rendered, nausea-inducing horse, given we haven't built tools to properly browse the web in 2D space yet.

<References>
  <ReferencesLink
    title="Browser.html speculative research"
    href="http://patrykadas.com/browser.html"
    author="Patryk Adas"
  />
  <ReferencesLink
    title="Spatial Interfaces"
    href="https://darkblueheaven.com/spatialinterfaces/"
    author="John Palmer"
  />
  <ReferencesLink
    title="Spatial Software"
    href="https://darkblueheaven.com/spatialsoftware"
    author="John Palmer"
  />
</References>


Adding spatial affordances to the experience of browsing the web

Pattern Catalogue

A catalogue of design patterns gathered from my own observations and research.