Me Myself Somma on a good day outside Tokyo.
I've always loved creating things. As a child, it was block and paint, but then I started first with Basic, Hypercard, C, Pascal and VB. As I got older, I moved to PHP, then Python, and created some amazing things like Etsy and Startr. These days I focus on Robots and other projects.
I love to create things that are useful and beautiful. Things that inspire others to create are the most powerful and rewarding to build.
I love to create things that are fun and silly. Things that are weird and wonderful I love the most.
While I love creating beautiful things, I enjoy keeping them exposed and raw. Brutally functional things often feel best to me.
I love to tweak and hack technology in creative ways.
We don't need to break things to make new things, and we don't need to reinvent the wheel, either. So many amazing things exist to build on.
Let's focus on bending the rules without breaking the rules.
To these ends, this project is inspired by my reflecting on life and reading Gödel, Escher, Bach, and, most importantly, talking with friends and family. The code was inspired by secretGeek and my close friend Simon Forman.
The computer science world of code is filled with examples of amazing people stretching the rules and blowing past expectations. People use technology in new and fabulous ways every day.
I love the creativity that sparks further change. Quines are programs which output their source code. Used properly, they can spark all kinds of possibilities. If code is life, life is a Quine! As we build new things...they build more!
A common theme in brutalism is the exposure of the functions of artifacts.
Exposing how things work lets us make the internal external , and reveal the secrets of what we build, in somehow.... brutally beautiful -brutaful ways.
A similar approach when building with code is the idea of
naked objects.
When working with naked objects:
Objects represent concepts in their purest form, without additional layers or abstractions. The goal of naked objects is simplicity and transparency.
How to viewthe source of this page? prefix the url with "view-source:" and you'll see the source of this page. Infact you can do this on any page.
The "naked objects" concept was introduced by a software developer named Martin Fowler. He proposed that instead of hiding the true nature of objects behind layers of abstractions and interfaces, we should instead reveal the objects in their "naked" form.
Putting all this together, I decided to make this: a truly naked, brutalist html page; a page itself a quine; a page that is abrutaful quine.
This means exposing the objects in their purest, fundamental form without unnecessary embellishments or distractions. Basically, it's a way of thinking about software design that prioritizes simplicity and transparency over layers of indirection.
Did you know that the rules of HTML (the building blocks of the Web) and CSS(the styling system of the Web) allow us to make
every Web page element visible, even special HTML elements like 'title', 'style' and 'script', elements that are normally hidden from view?
Those are just
elements like any other.
You can expose all of them like so:
With that snippet of code (which is not a snippet of code, but an actual style block!), you can now see every element of this page, including that style block, the HTML and title tags, etc.
Our little style element does have one downside: every element on the page is now a "block" element, even some which should be "inline," such as "code" and "anchor" elements. We can correct this like so:
To make it feel more like you are viewing the source, I've also applied
monospace fonts and a generally simple and consistent style
to all elements, using a "*" selector, like so:
So far, I've put style declarations all on one line because ordinary HTML refuses to treat line breaks as "br" tags. But there is a way to make line breaks display as line breaks, and that is with this piece of styling:
The next step in making an HTML Quine is to make the internal external. We can start by ensuring that the tags themselves, such as paragraph tags, are exposed in their stark, natural, brutal beauty:
Adding these special pseudo-elements works for "<p>" elements, but we need to have custom styling for every element. Pseudo-elements are special keywords that allow us to style specific parts of selected elements.
We'll need something to add a before and after pseudo-element to each element.If there was a way to output the "name" of a tag in HTML, then we could reduce all of the necessary style rules above to something like
*::before {'<'name()'>'}
And...
*::after { '<'name()'>' }
But alas there is no "name()" function (yet!). So we are forced to generate a chunk of style information like this 👇
Let's also make it so that whenever our cursor is over a summary tag, it is a pointer, and we'll also indent things by 4 characters (4 chars).
Some elements are a little trickier because they have attributes. Attributes are special variables or settings that HTML elements can have. Consider, for example, the <a> or ⚓️ (anchor), which often has a href attribute. We
need that attribute, including its value, to be visible. This is
done like so:
The attr() function, see
mozilla docs
is a nifty trick, "supported" since CSS 2.
A surprisingly troublesome set of tags are any that don't close. Two examples of these non-closing tags are <br> and <img>. While we can make our <br>s visible(on most browsers) by adding empty content, this isn't the case with images now.
Me Myself Somma on a good day outside Tokyo.
TODO: Add a more fun yet brutalist image or edit the image so it's more fun.
Another special element is "style" itself, which must include an escape character to avoid being taken literally. Here is the styling code and a little tweak to keep our closing style tags from being indented.
Along with this, we will expose any script tags and ensure their content is pre-formated.
If we don't do a little more tweaking to our document's head element, our style and script tags are exposed but look messy. Their closing tag will be indented, unlike in our body. So we need to add a little more style to the head element to fix this.
You might be wondering about that menu at the top of our page.
Here's how it works. First, we use the "position: sticky" style to allow it to stick to the top of our page once we scroll to it. With it stuck to the top of our viewport, it stays there unless we scroll above where we loaded it (just after we opened our body element).
As we want things to stay tidy in our menu, we'll hide the hrefs from our anchors.
To reduce the visual weight of the before and after pseudo-elements, we can give them a soft purple color and mostly hide them until we focus on them.:
Finally, I believe brutalist design, even when applied to truly naked brutal HTML Quines, is about function, not deliberate ugliness; I'd like to apply two humble style sets that improve the readability of this "brutiful" stack.
The first is our 101 Startr Bytes of Style. We apply it as the base style to our whole html to give things a clean, modern feel. The second is a little bit of transition magic. It tones down the look of elements we wouldn't normally see unless we hover over them.
One last thing. Although this idea has bounced around in my head for a decade, the thing that reminded me to pipe it into a file was seeing this piece of "Code as Art" from Geoff Huntley: no yaml. Bring back the world's weird web.
Kind regards
P.S. Our saving and editing features are powered by JavaScript. The following script is used to save the DOM as an HTML file and to toggle all text nodes' "contentEditable" attribute.
The attribute "contentEditable" is a special one that allows us to edit
the text of any element.
P.P.S. If you want to see the source of this page, prefix the URL with "view-source:" and you'll see the source. You can do this on any page!