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. Life is a Quine.
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:
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 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() '>' }