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.
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.
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".
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 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.
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>"
> 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.
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.
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?
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!
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 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.
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...
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!
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.
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.
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.
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.
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.
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
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.
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!
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.
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.
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.)
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.
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).
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 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.
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.