Show HN: This page is a truly naked, brutalist HTML quine | Hacker News Reader

Show HN: This page is a truly naked, brutalist HTML quine

secretgeek.github.io

633 pointsLeonB94 comments

https://en.wikipedia.org/wiki/Quine_(computing)

Until today I wondered why on Earth "quine" might mean "A program that outputs its own source" and it turns out to be a tribute to a guy called Quine who did a lot of work on self-referential logic.

I was reminded of this:

https://en.wikipedia.org/wiki/Polyglot_(computing)

W. V. O. Quine was one of the most prominent American philosophers of the 20th century. There are several collections of his essays; I recommend "From a Logical Point of View".

If you're interested at all. Here's a great interview from the 60s or 70s he did. Wish something of this level was on public access these days. Not sure how accessible it is, but really makes me wish a PhD in philosophy made sense/afford to do.

https://youtu.be/1iZvycU3I9w

* I could afford to do

This is more readable than many news websites I've come across

Quicker to load too.

Wow, I didn't know this was possible: The main trick lies in

  * {
    display: block; 
  }

making literally every element visible (including stuff like <head> or <script>). The rest is just CSS ::before and ::after inserting tag's names.

This stylesheet would be a really great one to write an HTML/CSS primer in, since it exposes everything -- like a "You, too, can write HTML!"

It's kind of like the invisible man. Here's how everything works. Might be a great way to see that webpages aren't magic interfaces, but built on relatively simple rules.

I once did a very similar thing to render HTML as unrendered Markdown: https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea

This is great.

Yes, the article actually links to a demo of this technique!

https://mrcoles.com/demo/markdown-css/

> The only other style that is special is "style" itself, which has to include an escape character to avoid being taken literally.

    style::before {content:'<style>'}
    style::after {content:'<\/style>'}

I don't think it's a bug. After all, browsers have very lenient parsers and if there's a syntax error (unterminated quote) in the style it shouldn't affect the rest of the HTML. The same goes for JavaScript: you probably still can't use the string literal '</script>' within an inline script.

> you probably still can't use the string literal '</script>' within an inline script.

You're right: https://jsfiddle.net/pLo9bdhs

Think about the failure cases for `</script>` and `</style>` and it's obvious why the spec defines them that way.

If CSS and JS syntax were to decide when the end tags can appear, some malformed CSS or JS would break the end tag and cause the entire rest of the document to vanish as the browser wouldn't recognise it as HTML.

And image tags do not have pseudo selectors/elements.

With the experience of Chrome, neither do input tags. In fact I believe only 'container' elements are supposed to.

Yep not a bug. Or at least if it's a bug, it's a bug in the HTML spec. But really I think it's pretty reasonable behavior.

Short answer is standard says to parse the contents of <style> elements as text.

Long answer is style start tag triggers [1] the generic raw text element parsing algorithm [2] which switches the parsers insertion mode to "text" [3] which only exits once an end tag is seen. Given that the generic raw text element parsing algorithm switched the tokenizer to RAWTEXT state [4] it will only output an end tag token from the RAWTEXT end tag name state [5] for an appropriate end tag token [6] which by definition will be "</style>"

[1] https://html.spec.whatwg.org/#parsing-main-inhead [2] https://html.spec.whatwg.org/#generic-raw-text-element-parsi... [3] https://html.spec.whatwg.org/#parsing-main-incdata [4] https://html.spec.whatwg.org/#rawtext-state [5] https://html.spec.whatwg.org/#rawtext-end-tag-name-state [6] https://html.spec.whatwg.org/#appropriate-end-tag-token

> Or at least if it's a bug, it's a bug in the HTML spec.

Then again the HTML5 spec is based on what browsers already did, bugs included. Whether or not it's desirable behaviour or a bug is a moot point now. HTML is the way it is because of its history.

Do we need a better prefix for cool stuff like this? Maybe HN Art?

Not really. Show HN already gives it a boost, and keeping track of classifications of Show HN stuff is almost certainly more effort than it's worth.

Very cool - thanks for sharing, and the shoutout (consider also replacing 38rem/2rem with 70ch/2ch)!

cheers, i've applied that now

I wasn't aware of "ch". Why prefer it to rem? (and isn't ch in family with em, not rem - that is, "advance width" relative to element font size, not root element font size?)

Ed: i guess in this case 1 rem is roughly 2 em (styled element has 50% font size) - and 1 ch is roughly 1 em?

see https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css...

This is the first time I've seen something that calls itself a "brutalist" web page actually expose its structure, the way I understand brutalism. It also reminded me of reading a literate program. Great work!

That's funny, I've only just discovered the Naked Object concept. Reading through Pawson's Phd thesis at the moment: http://downloads.nakedobjects.net/resources/Pawson%20thesis.... at the moment.

even though the source is visible, the tags are unselectable. adding that would make it perfect imho. just heard about quines the other day so pretty cool to see one :D good effort!

I can’t think of a way to do that. When content is added via css it’s not selectable. Maybe fork it and see what you can do? https://github.com/secretGeek/html_wysiwyg/

i'm on my phone, but wouldn't something like this work?

  *::before, *::after {
    user-select: text; // or `all`?
  }

I had a look into it; user-select doesn't apply to before/after content.

This process has taught some interesting things about browsers. For example: `<br>` and `<img />` elements are "replaced" and can't really be shown in the way all other elements are. (I conveniently avoided using them).

And, as described above, ::before/::after content cannot be selected, and generally behave... strangely.

`<hr>` too? And `<marquee>`?

Did you see any variance between browsers? Hopefully not, with "common" CSS like this, but it would be interesting.

CSS spec says no, unfortunately. Pseudo-elements aren't part of the DOM and thus can't be selected by any means.

the only approach remaining would be to have some minimal vanilla js, as part of the page, that rewrites the dom to include the tags.

This would also alleviate the need to use CSS, and in particular the repetitive CSS.

It would also allow the tags/attributes to be styled in a more idiomatic way.

But i'm out of time on this idea ;)

I also noticed that ctrl+f doesn't find search that text either.

adding contenteditable to the <html> tag allows for editing in the browser too

Rather surprisingly this allows you to modify the style as well. Not sure anyone's ever used that before.

Only those inside <body>, still very cool. I had no idea about contenteditable

That's really neat - as you can edit the page you're on, which changes the visibility or styling of the source code of the page. Until you can no longer see the source code depending on which styles you change...

that's a truly wicked idea... okay i've snuck a contenteditable in to the file. Editing styles live inline is wild.

Rats, i had to remove the contenteditable=true... it stopped links from working... still the idea of a visible `contenteditable` style block is a great one. Have to use that some time!

Tried to replicate the technique in a minimal example:

https://no-gravity.github.io/html-quine/index.html

I am getting some additional empty lines in the output. And the closing html tag is missing. Any ideas why?

Remove the _white-space: pre;_ from your style.

Then the empty lines that are in the source are missing in the output. Looks like the Show HN avoids this by not having empty lines in text.

Upon closer inspection, I now see that the Show HN also has additional empty lines in the rendered view.

End of the source:

    </body>
    </html>

Rendered in the browser as:

    </body>
    
    </html>

I get that extra spacing by using:

    margin:1.5em 0

When there was no margin the text was quite ugly and hard to read. Then tried margin 1em and it was better. Pushing it out to 1.5em really did the trick.

Super neat!! I enjoyed reading through.

FYI: There's a typo in the word "necessary" (it has double C's and double R's in the original copy).

thanks gomox, fixed... (and added "necessary" to my "list of words I seem to commonly misspell" (a list that starts with the word 'misspell'))

As a teenager I had a short but curious list of ironies I collected.

The first was a postcard from my grandparents’ church thanking me for attending their service “last Sinday”. I regret I eventually lost that card.

My favorite was an on-air editorial from a local student-run public radio station. The young woman was lamenting the grief her fellow broadcasters were receiving from the community about pronunciation.

Either deliberately or regrettably, she consistently mispronounced “mispronunciation” by using /ow/ instead of /uh/ for the third syllable.

I miss WAJC. Great eclectic music selection, but Butler University sold it about 25 years ago to fund a TV studio instead.

There was a Parish magazine recently that invites readers to a screening of the film Satan & Ollie (Stan & Ollie).

One coffee, two sugars.

Excuse the off topic, but I can't help thinking that "brutalist" has already become the next "literally"

This is fantastic work!

Thanks Chris. It’s a bit of a niche idea, beloved by only a tiny group of wise souls ;)

My personal business cards looked like that when I was doing more web dev work. Oh wait, I still have an old (2009) copy:

https://www.obscure.org/~owend/BizCard.jpg

This is excellent and inspiring. Thanks!

While visiting this site for a first time all I saw at the top was huge clunk of JS code. I took me a white to realize that it was some FF extension that injects (non malicious) code to the every webpage (Web MIDI).

It was a truly brutalists experience to see some things more exposed than I was prepared to.

Very cool, I do consider this art!

As a side note, I just played through console.log(), and I thought you might want to know that there's an unnecessary apostrophe in the winning text! Of course I only saw it after also discovering, I believe, every possible way to die.

edit: I've submitted a pull request.

thanks for that! i approved it, much appreciated.

If you're running certain plugins you might want to check this page in incognito mode (or equivalent). I have an Adobe Analytics debugger plugin installed that adds a gigantic blob of JS to start of this page. Of course, it is now visible when viewing this page.

Today I learned a new word - quine. I will stick with 'self replicating program' for light, down the pub conversation.

Being able to make scripts and other elements visible by putting 'display: block' on them is the more useful thing that I learned.

I was hoping that the last link to the source code would open the actual HTML source code (instead of the link to github), just to show how it is exactly the same as the page

Thank you BaraBatman.

Based on your advice I changed these words:

> Viewing the source of this page should

...to be:

> Viewing <a href='https://raw.githubusercontent.com/secretGeek/html_wysiwyg/ma... source</a> of this page should

Who else is old enough to remember WordPerfect's "Reveal Codes" mode? Same thing.

This is so cool. Simple and fun. Thanks for sharing!

Brutally beautiful.

The funny thing is when you consider applying this very cool stylesheet to a regular web site or app the result would be a complete mess mostly, because those places are often div soup, rather than neat semantic minimal HTML.

if you do wish to apply it to a regular website, you can use this stylesheet:

https://secretgeek.github.io/html_wysiwyg/html.css

...but it will need more added to it, depending on the elements and attributes that you want to cover.

I think what I found particularly beautiful about this was the first ~330k characters of ad-related CSS injected into the header presumably through Github hosting or otherwise. I had to scroll about 85% of the way down the page before I hit the <h1> tag!

either you're kidding... very good... or your ISP is doing that... but wait that's not possible for https content is it? I don't know, nothing's implausible in this world anymore.

FWIW I don’t see anything extraneous, neither in the source code nor on the page. Browser extensions can inject content, of course; that might be what’s happening here.

It's more likely that he has a browser extension that is doing this. I have DarkReader installed, and I similarly saw a bunch of style tags at the beginning of the page related to DarkReader (which applies some CSS rules to make everything "dark mode"). To the GP, you probably want to double-check your browser extensions (unless you were actually kidding).

Yes, HTTPS can be man in the middled by your ISP.

Only if they have you trust their certificate root, or you constantly click through the certificate warnings.

This seems mostly not true. Can you elaborate how?

You might have malware injecting content into your pages.

This document actually makes a fairly good "is my browser doing anything funny?" test document.

You may want to check your computer and browser for malware. Possibly also your ISP but as someone else pointed out that'd be hard to pull off on https.

Noticed the same thing and found that it was caused by Ghostery.

Makes the marketing claim that much more amusing.

> …to speed up page loads, eliminate clutter…

To be fair, hiding elements may mean not fetching any resources needed for their content, which can be faster despite having to parse a bunch of additional CSS first to determine which ones to hide --- especially if the former involves the execution of JavaScript.

Loading one snippet from an extension (i.e. the cache) is vastly faster than loading dozens of scripts and styles over the network.

In my case it was Opera's built-in ad blocker.

What does this mean about Opera's ad blocker? (I also see a ton of junk up top when Opera's block ads is enabled, but I don't know what to make of this.)

It means that it's more of an ad-hider than a blocker, adding more CSS to hide the relevant elements instead of stripping them out completely (which something like a MITM proxy could easily do.)

Yep this was it.

Thanks to all for your concerns of my potentially malware-infected PC, alas, it was just an ad-blocker.

Vanilla Chrome will also inject code if you have a * style rule.

I have the same, but it's just Opera's ad blocking. Check what extensions you have installed

I got cVim related stuff in the header :-)

IMO, I think it would look better if the HTML was faded in to the background more, but it's interesting as it is. What does it mean?

That's the beauty of it, it doesn't mean anything!

It's nice... but it's kind of the opposite of brutalist style. If you really want to serve a "brutalist" HTML page easily, just send it with text headers.

A brutalist building doesn’t have less functionality than a normal building.

Reply on news.ycombinator.com