This page is a truly open, brutalist Quine, an HTML Quine

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.

How it works.

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:

Make the internal external

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.

 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.