
Show HN: This page is a truly naked, brutalist HTML quine - LeonB
https://secretgeek.github.io/html_wysiwyg/html.html
======
lordnacho
[https://en.wikipedia.org/wiki/Quine_(computing)](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.

~~~
aggerdom
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](https://youtu.be/1iZvycU3I9w)

~~~
aggerdom
* I could afford to do

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

~~~
benj111
Quicker to load too.

------
blauditore
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.

------
acdw
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!"

~~~
nkrisc
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.

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

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

[https://mrcoles.com/demo/markdown-css/](https://mrcoles.com/demo/markdown-
css/)

------
kccqzy
> 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.

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

You're right: [https://jsfiddle.net/pLo9bdhs](https://jsfiddle.net/pLo9bdhs)

~~~
pluma
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.

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

~~~
fredley
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.

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

~~~
e12e
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?

~~~
JoshuaRLi
see
[https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css...](https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css_to_look_great_nearly_everywhere/ekj8yhm/)

------
JasonFruit
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!

------
kristianp
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....](http://downloads.nakedobjects.net/resources/Pawson%20thesis.pdf)
at the moment.

------
vectorEQ
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!

~~~
LeonB
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/](https://github.com/secretGeek/html_wysiwyg/)

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

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

~~~
LeonB
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.

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

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

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

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

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

------
no_gravity
Tried to replicate the technique in a minimal example:

[https://no-gravity.github.io/html-quine/index.html](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?

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

~~~
no_gravity
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.

~~~
no_gravity
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>

~~~
LeonB
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.

------
gomox
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).

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

~~~
macintux
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.

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

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

------
chrismatheson
This is fantastic work!

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

~~~
owyn
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](https://www.obscure.org/~owend/BizCard.jpg)

------
ghettoimp
This is excellent and inspiring. Thanks!

------
ests
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.

------
kissickas
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.

~~~
LeonB
thanks for that! i approved it, much appreciated.

------
nkrisc
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.

------
Theodores
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.

------
BaraBatman
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

~~~
LeonB
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...](https://raw.githubusercontent.com/secretGeek/html_wysiwyg/master/html.html'>the)
> source</a> of this page should

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

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

------
stefek99
Brutally beautiful.

------
dosy
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.

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

[https://secretgeek.github.io/html_wysiwyg/html.css](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.

------
bt3
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!

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

~~~
macintux
Makes the marketing claim that much more amusing.

> …to speed up page loads, eliminate clutter…

~~~
userbinator
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.

------
drbojingle
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?

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

------
krapp
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.

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

