A Brutalist Scratchpad Bookmarklet
One of the tools I use in my day-to-day work is a Brutalist scratchpad bookmarklet: a little button on my bookmarks bar that opens a new tab with an editable text buffer. I mostly use it as a place to hold stuff from my clipboard or write little bits of text. The contents are gone as soon as I close the window.
If you just want to see how it works, you can:
- read it
data:text/html, <html contenteditable style='max-width: 40em; margin: auto; font-family: monospace' autofocus> - or try it for yourself
Read on for more explanation!
How does it work?
This little gremlin is built out of a few different things:
- A data URL which lets us "embed small files inline in documents". In this case,it lets us put a tiny HTML document in a bookmark.
- An inline style which lets us format our HTML document like a text editor.
- The
contenteditableattribute, which which makes the single element in our HTML document editable. - The
autofocusattribute, without which you'd have to click into the scratchpad tab to focus it when it opens.
By putting all of those things together in a bookmarklet we end up with an (admittedly very minimal) editor that should work in any browser and is short enough to store in a bookmark, a QR code, or in your own human memory.
What makes it Brutalist?
When I call this thing "Brutalist", I mean it in the sense of
minimalist constructions that showcase the bare building materials and structural elements over decorative design.
Wikipedia
A Brutalist building shows off its supporting members instead of covering them with facades, leans into the colour and texture of its materials instead of smoothing them over or covering them with decorations. By analogy, a Brutalist piece of software is one that shows off it's implementation and goes out of its way to hide nothing.
With this bookmarklet, if you know even a little HTML or CSS you can see what's going on (and how to modify it for yourself) with just a glance — no glossy product page, no obfuscating build step, no syntax beyond the absolute fundamentals. I love how that makes it approachable and hackable with just a little bit of extra knowledge.