(2022-06-30) Folkbrowser Interfaces
Cristobal Sciutto: Folk (Browser) Interfaces. For the past couple of years I've found myself returning to vanilla Javascript to build a variety of media interfaces. Ignoring the networked potential of the internet, I've felt liberated to simply point at local files and enjoy the multi-media power of the web browser as rendering engine.
The goal is not to produce a system that runs forever as has historically been the aim of software
Instead, it re-centers programming around designing powerful media interactions
This kind of interface design is intimately connected to the materiality of media and, consequently, banks on domain knowledge in, e.g., computer graphics. It's akin to building a one-off Photoshop or Blender interface, built on robust web APIs (canvas, audio, WebGL) and libraries (Three, p5, tf.js).
I think of these as folk interfaces, akin to the jigs one makes in wood-working.
I hope this mode can paint the picture of software, not as a teleological instrument careening towards automation and ease, but as a medium for intimacy with the matter of our time
I slowly build up the pages, at first just <img src="local-path">
, then some click handlers, then some inline styling. It's the ethos of html-energy
A surplus of hand-curated media files live on our file-systems
One is forced to embed images and text into inextricable word documents and slides, or use an infinite canvas like Figma, at which point the files are no longer individuated, instead mere parts of a single new file. The browser as media viewer can circumvent this.
This reconsiders the files on one's computer, not as static assets with fixed ways of viewing, but as raw material to build with: archive bricolage.
Compelled by the idea of archive bricolage, and having seen some demos of the Muse.app iPad app, and thought to make a pared down version in this raw HTML, vanilla JS style.
Expanding it with the drag-and-drop security loop-hole of the pdf-viewer, I got the demo below. Video, audio, text, image, and PDF co-existing in one space.
CS_Store is an infinite canvas for your file-system, providing the two-dimensional, visual presence of the Desktop for any directory. The information about the layout is stored in a .CS_Store
, this time in a human-readable JSON blob pointing to files in the same directory. Here's the source.
Having this system as a playground lets me try out some kooky interactions:
The key here is not that these interaction decisions are good, but that I can try them out and see how they function in practice. This is only possible when the computer is a system which can be wielded
Beyond technical feasibility, a poorly designed API forecloses the imagination of the user to just a few steps beyond the starter code. What role do tools have in expanding that imagination?
I've been sold on the emancipatory power of DIY. I've always been motivated to make, however articulating the motivation through a sense of agency was revelatory. There's a subtle, yet political, transformation in which domains of the world cease to seem immutable
This sentiment has been reinforced as I've read Ivan Illich's works, who writes about convivial tooling
I've used the browser to exemplify the kinds of artifacts that should be simple to make, however the web is not HyperCard; you can't really make a home-cooked meal. (2020-02-28-SloanAnAppCanBeAHomecookedMeal)
imperative access on arrays of data are simply paradigms to provide ergonomic access to something beneath
This insight implicitly teaches what a "good" abstraction is: it allows you to do work. This is in contrast to the approach I encountered at school, of function decomposition, or avoiding repeated work, which make the design of computer software seem like a neurotic chore.
it's about building a playground in which those novel computational artifacts can be tinkered with and composed, via a grammar native to their own domain, to produce the fruits of the users' own vision. (tinkering)
End-user programming is a red herring: We need to focus on materiality, what some disparage as mere "side effects." The goal is to enable others to feel the agency and power that comes when the world ceases to be immutable.
Edited: | Tweet this! | Search Twitter for discussion