One of my favorite things is to misuse technology in creative ways. Breaking the rules without breaking the rules.
For example, a hobby project I built long ago was DOS-on-dope, a working Ruby-on-rails parody, billed as the last batch-file based MVC framework you'll ever need. And there was a console.log() adventure in which you played an old school console-adventure-game from inside the chrome developer tools.
The world of esoteric programming is filled with examples of people stretching the rules to breaking point, and misusing technology in creative ways. In particular (for example) I love quines. Quines are programs which output their own source code.
A different but somehow related topic I like is brutalism, in particular, this often overlooked aspect:
Another common theme in Brutalist designs is the exposure of the building's functions.
...the tendency to make the internal external, and reveal the secrets of the building, in a somehow.... brutaful way. ;-).
A similarly intriguing idea which has fallen into disuse is the idea of naked objects, wherein:
The user interface should be a direct representation of the domain objects.
Putting all this together I decided to make a truly naked, brutalist html page, that is itself a quine. And this page is it.
Viewing the source of this page should reveal a page identical to the page you are now seeing. Nothing is hidden. It's a true "What you see is what you get."
Did you know that the rules of html and css allow you to make every element visible, even elements like 'title' or 'style' or 'script', that are normally hidden from view? Those are just elements like any other. You can expose them all like so:
With that snippet of code (which is not a snippet of code, but an actual style block itself!) you can now see every element of this page, including that style block, the html and title tags, etc.
It 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 give the code a more 'view source' feel, I've also applied monospace fonts, and a generally simple and consistent style to all elements, using a "*" selector, like so:
The next trick is to make the internal external. We can start by ensuring that the tags themselves, such as paragraph tags, are exposed in their stark, brutal, beauty:
That works for "p" elements, but do we need to have custom styling for every 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 not. So we are forced to generate a chunk of style information like this (via NimbleText of course)
Please scroll happily past the next 28 lines...
Some elements are a little trickier because they have attributes. Consider for example the "anchor" which often has a href attribute. We need that attribute to be visible, including its value. This is done like so:
The attr() function, see mozilla docs is a nifty trick, "supported" since CSS 2.
The only other style that is special is "style" itself, which has to include an escape character to avoid being taken literally.
Finally to reduce the visual weight of the before and after pseudo elements we can give them a soft purple color and a low weight font:
Finally, because I believe brutalist design, even when applied to truly naked brutal html quines, is about function, not about deliberate ugliness, I'd like to apply these humble styles that improve the readability of this brutiful missive.
...they're derived from "58 bytes of css to look great nearly everywhere".
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 weird web.
Kind regards
p.s. source code here