11 ms·
Show HN: This page is a truly naked, brutalist HTML quine
- vectorEQ 7y agoeven 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 7y agoI 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 7y agoi'm on my phone, but wouldn't something like this work? *::before, *::after { user-select: text; // or `all`? }
- LeonB 7y agoI 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 7y ago`<hr>` too? And `<marquee>`? Did you see any variance between browsers? Hopefully not, with "common" CSS like this, but it would be interesting.
- coreymatyas 7y agoCSS spec says no, unfortunately. Pseudo-elements aren't part of the DOM and thus can't be selected by any means.
- LeonB 7y agothe 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 ;)
- collinmanderson 7y agoI also noticed that ctrl+f doesn't find search that text either.
- chrismatheson 7y agoThis is fantastic work!
- LeonB 7y agoThanks Chris. It’s a bit of a niche idea, beloved by only a tiny group of wise souls ;)
- owyn 7y agoMy 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
- BaraBatman 7y agoI 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 7y agoThank 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/master/html.html'>the https://raw.githubusercontent.com/secretGeek/html_wysiwyg/ma... source</a> of this page should
- gomox 7y agoSuper 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 7y agothanks gomox, fixed... (and added "necessary" to my "list of words I seem to commonly misspell" (a list that starts with the word 'misspell'))
- macintux 7y agoAs 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 7y agoThere was a Parish magazine recently that invites readers to a screening of the film Satan & Ollie (Stan & Ollie).
- kennyadam 7y agoOne coffee, two sugars.
- bt3 7y agoI 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!
- LeonB 7y agoeither 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.
- aesthetics1 7y agoIt'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).
- so33 7y agoFWIW 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.
- failrate 7y agoYes, HTTPS can be man in the middled by your ISP.
- gridspy 7y agoOnly if they have you trust their certificate root, or you constantly click through the certificate warnings.
- lucasmullens 7y agoThis seems mostly not true. Can you elaborate how?
- JoshuaRLi 7y agoVery cool - thanks for sharing, and the shoutout (consider also replacing 38rem/2rem with 70ch/2ch)!
- LeonB 7y agocheers, i've applied that now
- e12e 7y agoI 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 7y agosee https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css_to_look_great_nearly_everywhere/ekj8yhm/ https://www.reddit.com/r/css/comments/bb73cw/58_bytes_of_css...
- apatters 7y agoThis is more readable than many news websites I've come across
- benj111 7y agoQuicker to load too.
- acdw 7y agoThis 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 7y agoIt'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.
- kccqzy 7y ago> 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 7y ago> 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
- deleted 7y ago[deleted]
- pluma 7y agoThink 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.
- throwaway66666 7y agoAnd image tags do not have pseudo selectors/elements.
- tazard 7y agoWith the experience of Chrome, neither do input tags. In fact I believe only 'container' elements are supposed to.
- missblit 7y agoYep 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 https://html.spec.whatwg.org/#parsing-main-inhead [2] https://html.spec.whatwg.org/#generic-raw-text-element-parsing-algorithm https://html.spec.whatwg.org/#generic-raw-text-element-parsi... [3] https://html.spec.whatwg.org/#parsing-main-incdata https://html.spec.whatwg.org/#parsing-main-incdata [4] https://html.spec.whatwg.org/#rawtext-state https://html.spec.whatwg.org/#rawtext-state [5] https://html.spec.whatwg.org/#rawtext-end-tag-name-state https://html.spec.whatwg.org/#rawtext-end-tag-name-state [6] https://html.spec.whatwg.org/#appropriate-end-tag-token https://html.spec.whatwg.org/#appropriate-end-tag-token
- ghettoimp 7y agoThis is excellent and inspiring. Thanks!
- dosy 7y agoThe 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 7y agoif 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.
- kristianp 7y agoThat'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.pdf http://downloads.nakedobjects.net/resources/Pawson%20thesis.... at the moment.
- ImJasonH 7y agoI once did a very similar thing to render HTML as unrendered Markdown: https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea
- kennyadam 7y agoThis is great.
- neogodless 7y agoYes, the article actually links to a demo of this technique! https://mrcoles.com/demo/markdown-css/ https://mrcoles.com/demo/markdown-css/
- deleted 7y ago[deleted]
- kissickas 7y agoVery 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 7y agothanks for that! i approved it, much appreciated.
- no_gravity 7y agoTried 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 7y agoRemove the _white-space: pre;_ from your style.
- no_gravity 7y agoThen 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 7y agoUpon 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 7y agoI 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.
- omk 7y agoDo we need a better prefix for cool stuff like this? Maybe HN Art?
- fredley 7y agoNot 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.
- lordnacho 7y agohttps://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.
- ataylor32 7y agoI was reminded of this: https://en.wikipedia.org/wiki/Polyglot_(computing) https://en.wikipedia.org/wiki/Polyglot_(computing)
- thefringthing 7y agoW. 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".
- aggerdom 7y agoIf 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 7y ago* I could afford to do
- p4bl0 7y agoThis is so cool. Simple and fun. Thanks for sharing!
- phelm 7y agoadding contenteditable to the <html> tag allows for editing in the browser too
- contravariant 7y agoRather surprisingly this allows you to modify the style as well. Not sure anyone's ever used that before.
- comboy 7y agoOnly those inside <body>, still very cool. I had no idea about contenteditable
- neogodless 7y agoThat'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...
- LeonB 7y agothat's a truly wicked idea... okay i've snuck a contenteditable in to the file. Editing styles live inline is wild.
- LeonB 7y agoRats, 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!
- krapp 7y agoIt'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 7y agoA brutalist building doesn’t have less functionality than a normal building.
- blauditore 7y agoWow, 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.
- rawTruthHurts 7y agoExcuse the off topic, but I can't help thinking that "brutalist" has already become the next "literally"
- drbojingle 7y agoIMO, 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 7y agoThat's the beauty of it, it doesn't mean anything!
- Theodores 7y agoToday 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.
- pavlov 7y agoWho else is old enough to remember WordPerfect's "Reveal Codes" mode? Same thing.
- deleted 7y ago[deleted]
- JasonFruit 7y agoThis 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!
- nkrisc 7y agoIf 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.
- stefek99 7y agoBrutally beautiful.
- ests 7y agoWhile 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.