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.
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
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.
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).
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.)
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?
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
97 comments
[ 3.0 ms ] story [ 152 ms ] threadThis 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.
Did you see any variance between browsers? Hopefully not, with "common" CSS like this, but it would be interesting.
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 ;)
https://www.obscure.org/~owend/BizCard.jpg
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
FYI: There's a typo in the word "necessary" (it has double C's and double R's in the original copy).
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.
> …to speed up page loads, eliminate clutter…
Thanks to all for your concerns of my potentially malware-infected PC, alas, it was just an ad-blocker.
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?
You're right: https://jsfiddle.net/pLo9bdhs
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.
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
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.
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.
https://mrcoles.com/demo/markdown-css/
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.
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?
End of the source:
Rendered in the browser as: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.
https://en.wikipedia.org/wiki/Polyglot_(computing)
https://youtu.be/1iZvycU3I9w
Being able to make scripts and other elements visible by putting 'display: block' on them is the more useful thing that I learned.