16 ms·
This page is a truly naked, brutalist HTML quine
- pietroppeter 6y agoCan this be turned in a browser extension that would allow a nicer view source?
- lqet 6y agoUnlikely, as in its current form, the styling includes special :before and :after rules for specific elements, and the inclusion of element attributes in the final output has to be also hand-coded for specific elements and attributes.
- LeonB 6y agoI also wrote a version that used javascript to see what elements existed in the page and generate the relevant before/after styles. Adding attributes would’ve be doable. But it gets a bit silly really, once you have a giant page.
- TomJansen 6y agoFor Firefox, I found this extension [1] which is really a step-up from the build-in source viewer. [1]: https://addons.mozilla.org/en-US/firefox/addon/fire-source-viewer/ https://addons.mozilla.org/en-US/firefox/addon/fire-source-v...
- vector_spaces 6y agoIf you're interested in quines, see also TiddlyWiki[0] (and specifically this[1] great talk by its creator Jeremy Ruston and the late creator of Erlang, Joe Armstrong) [0] https://tiddlywiki.com/ https://tiddlywiki.com/ [1] https://m.youtube.com/watch?v=Uv1UfLPK7_Q https://m.youtube.com/watch?v=Uv1UfLPK7_Q
- throwaway_2047 6y agoToo much productivity have been wasted on setting up personal blog. IMO everyone should just use tiddlywiki
- oefrha 6y agoThis page, while not brutalist, is IMO much more interesting since it codes itself live: https://www.strml.net/ https://www.strml.net/ Discussed here: https://news.ycombinator.com/item?id=21035313 https://news.ycombinator.com/item?id=21035313
- jonahx 6y agoAnd the comments are a quine relay: the top comment of that thread is a link to a simple html quine.
- jwmoz 6y agoThey arrested him for having a sick website.
- mxmilkb 6y agoMore https://en.wikipedia.org/wiki/Bowellism https://en.wikipedia.org/wiki/Bowellism maybe?
- danmur 6y agoThat's excellent!
- STRML 6y agoThe quine introduces a few concepts I've not yet seen before, and I always appreciate deep-dives into the (very) sloppy and forgiving parsing that browsers do to forgive the developer's perceived mistakes. One can argue, quite convincingly, that this was a bad idea™ and should never have been done; given that we can't break web backcompat, it's here forever, to live alongside all the sloppy coercion hacks and "did you mean?"s living in PHP & JS. It is truly surprising that: * { display:block; } actually displays the whole contents of <head>. It makes no sense, but neither does most of HTML, so why not?
- derefr 6y ago> It makes no sense Why so? <head> is a conventional place for tags with document metadata semantics to live, but <head> has no semantic meaning itself. (I think the only thing one could say about how UAs treat <head> is that some scraping robots might only parse <head>, discarding <body> entirely.) And read my words above again: tags with document metadata semantics. Not “metadata tags.” All tags are just containers for DOM nodes or text, whatever additional implications they carry for the document. HTML is "a markup language for text first, and a container format for web pages second." IMHO, <title> especially should be styled for display more often. It works great as an effective “<h0>“ tag, rather than duplicating <title>'s text into an explicit <h1> somewhere in the <body>. That way, the document only embeds its own title in one canonical location—a title which both gets rendered on the page, and displayed in the title bar. (And if you’re worried about positioning, there’s nothing saying you can’t put your <title> in your <body>. Yes, it will do the right thing.) Tangent: in fact, there's really no reason to have <head> and <body> in your document at all. You can just declare <html> and start spitting tags. IMHO, despite going against a long-standing trend, it's a much more practical arrangement—especially if you keep all your "outside the content" formatting to CSS, and apply that CSS using a response header (https://www.w3.org/TR/html401/present/styles.html#h-14.6 https://www.w3.org/TR/html401/present/styles.html#h-14.6). If done correctly, your "full document" HTML can look exactly like your XHR-response "patch" HTML, such that your API endpoints can themselves render as full documents when viewed separately—without changing what they return! (I really need to blog about this.)
- yannis7 6y agoreminds me of a super-nerdy magazine column we had back in college, printed (on paper) in raw LaTeX
- lqet 6y agoBrutalist? There is a custom font, a fixed text width, and it is even centered! :)
- ketzu 6y agoIt probably depends if you consider these things functional or decorative.
- pedrogpimenta 6y agoBrutalist doesn't meen no css. Brutalism in architecture is minimum decoration. I mean, it would be brutalist to leave tubes and other plumbings visible on the outside, but if you hide them to make the spacer "prettier" it's still brutalism.
- croissants 6y agoYes, my understanding of brutalism is that it was meant to be about "honesty" rather than "ugliness" -- little decoration, craftmanship, or anything for the quality of the materials themselves to hide behind. But some of its most famous exponents appear to be more about "ugliness", so over time it's kind of come to mean "ugliness in the name of honesty", which really is hard to appreciate.
- m463 6y agoI immediately "got" brutalism in architecture when I saw those all-concrete no-windows structures. But you look at wikipedia and I think the ones with windows or color should have another, lesser name.
- throwaway2245 6y agoWhen I think of brutalism, I think of the Barbican Estate in London as a canonical example - there's a lot of concrete, but also a lot of windows (a whole lot more window area than you would find in other UK residential architecture). And, it feels absolutely comfortable to be inside. I value the experience of being inside the building, more than how it looks from the outside. As such, I find it hard to understand when people associate brutalism with ugliness. First search result, by way of example: https://www.independent.co.uk/news/what-it-s-live-inside-barbican-one-london-s-most-iconic-buildings-a7436846.html https://www.independent.co.uk/news/what-it-s-live-inside-bar...
- speedgoose 6y agoOn a similar topic related to the display CSS property, you can attach a CSS to any XML document and have it displayed in a web-browser. <?xml-stylesheet type="text/css" href="style.css"?> Bonus points if you mix that with XSLT.
- tzot 6y agoNot exactly what you meant, because here the css is included after XSLT is applied to XML: http://xsubs.tv/ice/seriesn%E2%84%96.xml http://xsubs.tv/ice/seriesn%E2%84%96.xml
- baybal2 6y agoOn a similar topic, XSLT is still an excellent way to turn structured data into a page. It even works with RSS, ATOM, and OPML. And you can even mix-and-match it with SPAs, and Vue.js with it's "hydration" system. That's an very power trick to slash data consumption, and improve cache hits for a "portal" style website. One showstopper: gazillion XSLT/XML bugs in Chrome left unfixed for 10+ years. Another particularly interesting application is that you can turn XML data into SVG visualisation solely with XSLT, or you can add some JS with interactivity cod into XSL to run on the client side as a finishing step.
- bnt 6y agoI remember my college professor (back in 2007) betting his career that XSLT would become the defacto standard. It’s always a reminder to myself to not get blindsided by being stuck/locked into a single technology.
- mikepurvis 6y ago> XSLT is still an excellent way to turn structured data into a page Is it, though? I would think its only real win over a template system based on a scripting language is when the template author is untrusted. And that niche is now much better covered by Liquid: https://shopify.github.io/liquid/ https://shopify.github.io/liquid/
- 6y ago
- sarang23592 6y agoOff topic: does anyone know why are the tags and attributes not selectable in the page?
- nyanpasu64 6y agoBecause they're defined via CSS ::before{content} and ::after{content} properties, and browsers don't make that text selectable for some reason.
- tzot 6y agoIt's very useful when having stuff like that: <style type="text/css"> .code-line::before {content: '>>> ';} </style> <div class="code-line">print 12</div> <div class="code-line">a = [i**2 for i in range(10)]</div> Then the reader can copy the actual code without the interpreter's prompt.
- theandrewbailey 6y agoWhen text-transform is used on an element, the copy-pasted text is the original text from the DOM, not the transformed version. There needs to be a CSS property that makes the visible text selectable and copyable.
- cestith 6y agoPreferably there would be a browser option to choose whether or not to do this in the menu for interacting with the selection. The CSS could set the default and the browser could allow you to override it when you're interacting with the text.
- LeonB 6y agoThat’s not off topic at all, very astute observation. Pseudo elements are not part of the DOM. They’re not really there. Here’s a HTML reference https://www.w3.org/TR/CSS2/selector.html#pseudo-elements https://www.w3.org/TR/CSS2/selector.html#pseudo-elements
- 6y ago
- jansan 6y agoI really like that at this moment the two top stories on HN are about actual hacks!
- deleted 6y ago[deleted]
- thomasfromcdnjs 6y agoNothing but beautiful, great job!
- LeonB 6y agoThanks Thomas!
- lnyan 6y agoHere is another one and it's simpler: https://no-gravity.github.io/html-quine/index.html https://no-gravity.github.io/html-quine/index.html
- LeonB 6y agoIt uses the same idea as the one above, just has less explanation.
- tiborsaas 6y agoI have ThreeJS devtools installed and it also displays the injected code :) https://imgur.com/prcVl8A https://imgur.com/prcVl8A
- LeonB 6y agoIf the page knew to show “<script>” before and after script tags, and to apply “ white-space: pre-wrap;” to script tags, it would’ve been slightly clearer what those tools were doing to you.
- blackrobe 6y agoI have Dark Reader and it shows the CSS there too. Very cool.
- sergeykish 6y ago<script> Injected by Web Archive http://web.archive.org/web/20201019103343/https://secretgeek.github.io/html_wysiwyg/html.html http://web.archive.org/web/20201019103343/https://secretgeek...
- parisianka 6y agofun to see every element visible
- bgdkbtv 6y agoHah, you think that is brutalist? Try this instead: https://catfish.dev/catfish-developer.html https://catfish.dev/catfish-developer.html
- SamBam 6y agoI think the "quine" part is the part that's more interesting...
- yeldarb 6y agoIs an empty .html file technically the shortest html quine?
- reflectiv 6y agoIf it is a truly empty file then no, because that wouldn't validate as a valid html file. The bare minimum I believe is <HTML></HTML> ...which on its own wouldn't be a HTML quine.
- detaro 6y agoAFAIK in HTML5 you need a doctype and and a non-empty title, but the <html> etc tags are optional: <!DOCTYPE html> <title>x</title>
- chrismorgan 6y agoTitle is actually optional “if the document is an iframe srcdoc document or if title information is available from a higher-level protocol” (such as email). So the minimal valid HTML document is actually just <!doctype html>.
- TazeTSchnitzel 6y agoBut you don't even need that if you're happy with quirks mode, right?
- sergeykish 6y agoRight data:text/html,
- peeters 6y agoSure it is, just serve it with Content-Type: 'plain/text'.
- 6y ago
- walto2 6y agoBesides being a quine, it's also a nice literate programming example.
- betenoire 6y agoLiterate programming aims to help understanding, and this does the opposite. This was hard to read and follow along. I kept having to visually skip past meaningless markup.
- carapace 6y agoThere's no meaningless markup on that page. It literally explains the meaning of each bit of markup.
- dinkleberg 6y agoFor anyone else who doesn’t know what a quine is: > A quine is a computer program which takes no input and produces a copy of its own source code as its only output.
- sfoley 6y agoAn HTML file is not a program.
- peterwwillis 6y agoIt can receive input and create output. The browser is the interpreter for scripted HTML programs.
- smt88 6y agoHTML by itself can't receive input or create output. It is input/output. It can't run or be executed. It doesn't transform state or even have state. It's not Turing complete. HTML with either CSS3 or JavaScript is definitely a program, though.
- morganvachon 6y ago"HTML by itself can't receive input or create output." So GET and POST are figments of my imagination then?
- chillingeffect 6y agoThose are HTTP I believe.
- Jarwain 6y agoHttp verbs which can be sent from html
- 6y ago
- playdead 6y agoIt's only really a Quine if it has a taste for desert landscapes
- dusted 6y agoOh that's clever, and cute, and I like it.
- A4ET8a8uTh0 6y agoI was initially going to quip that is more minimalist than brutalist, but then I realized ( even though brutalist was a trend associated with architecture, it does have in its definition an embrace of minimalism ). I think it is time for coffee.
- deleted 6y ago[deleted]
- pvg 6y agoRecently, as a show hn: https://news.ycombinator.com/item?id=20094866 https://news.ycombinator.com/item?id=20094866
- andjd 6y ago> <p>p.s. <a href='https://github.com/secretGeek/html_wysiwyg/'>source https://github.com/secretGeek/html_wysiwyg/'>source code here</a></p> This was a missed opportunity to link back to the very same page.
- briandear 6y agoWhat does “quine” mean?
- carapace 6y agohttps://en.wikipedia.org/wiki/Willard_Van_Orman_Quine https://en.wikipedia.org/wiki/Willard_Van_Orman_Quine Specifically, https://en.wikipedia.org/wiki/Willard_Van_Orman_Quine#In_popular_culture https://en.wikipedia.org/wiki/Willard_Van_Orman_Quine#In_pop...
- hellokaushik 6y agoQuine is a person?
- carapace 6y agoYes, or was, for a while. As was Haskell Curry: https://en.wikipedia.org/wiki/Haskell_Curry https://en.wikipedia.org/wiki/Haskell_Curry
- ImJasonH 6y agoRelatedly, I wrote this CSS that renders HTML as Markdown: https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea https://gist.github.com/ImJasonH/c00cdd7aece6945fb8ea
- hezag 6y agoAwesome! Thanks for sharing.
- chefandy 6y agoWhile an interesting study in aesthetics, web brutalism or html brutalism isn't really brutalist at all. They all seem hyper-focused on exposing raw building materials when that totally misses brutalism's goals. A simple, small, unpainted cinder block shack doesn't hide its materials, is made of raw concrete, but probably isn't brutalist. Neither is a brick victorian. The idea that beautiful forms can come from purely functional design without needing to cover things up with baroque decoration is really a central theme. As is making these huge structures with small, modular elements designed at human scale to get something that's truly people-focused. All of this stems from a utopian idea that scaling production can provide functional, beautifully designed buildings for use by all people, rather than just the privileged few. While the style is polarizing, I'd say it often accomplished its goals. In my experience, well-designed brutalist buildings are easy to navigate, have large open spaces, have lots of little nooks and crannies to foster human interaction, and have really beautiful forms. While the page has nice enough lines and makes good use of color, the html tags have quite the opposite effect that a brutalist-era designer would hope to bestow upon the user. In this way, I'd say that this website is a far better example of brutalism than that website.
- systemvoltage 6y ago> A simple, small, unpainted cinder block shack doesn't hide its materials, is made of raw concrete, but probably isn't brutalist. Neither is a brick victorian. > The idea that beautiful forms can come from purely functional design without needing to cover things up with baroque decoration is really a central theme. Huh? These two are contradictory statements. I recommend giving this a read, Architecture is where brutalism first sprung up: https://www.nytimes.com/2016/10/06/t-magazine/design/brutalist-architecture-revival.html https://www.nytimes.com/2016/10/06/t-magazine/design/brutali...
- ummonk 6y agoA small cinder block shack isn't very functional, so not brutalist. A brick victorian is intentionally ornate (it exposes the brick as part of its aesthetic, not because of a reluctance to decorate) ergo it isn't brutalist.
- bediger4000 6y agohttps://bediger4000.github.io/replicate.html https://bediger4000.github.io/replicate.html
- at-fates-hands 6y agoWhile not on the same level, this reminds of this gem: https://thebestmotherfucking.website/ https://thebestmotherfucking.website/
- Exuma 6y agoNothing beats this one IMO: https://aem1k.com/world/ https://aem1k.com/world/ This guy is amazing: https://aem1k.com/ https://aem1k.com/
- nimajneb 6y agoThis one is mesmerizing. https://aem1k.com/0/ https://aem1k.com/0/
- ckosidows 6y agoIt's the game of life, isn't it?
- rsa25519 6y agoYep!
- delaaxe 6y agoIt’s not a quine though
- Exuma 6y agoLol now that is weird! Wow... here's the source code he obfuscated. Very clever for(b=i=[X=3772];i--;)b[i]=68*i%9%2;setInterval('for(a=b,b=[h="<pre>"],i=0;i++<X;i%w||(h+="\\n")){for(d=j=0;e=[1,91,w,93][j++];)d+=a[i+e]+a[i-e];h+=".#"[b[i]=3==d|a[i]&2==d]}document.body.innerHTML=h',w=92)
- deleted 6y ago[deleted]
- omoikane 6y agoSee also: https://mametter.hatenablog.com/entry/20100905/p1 https://mametter.hatenablog.com/entry/20100905/p1 http://mamememo.blogspot.com/2010/09/qlobe.html http://mamememo.blogspot.com/2010/09/qlobe.html
- 6y ago
- carapace 6y agoTruly marvelous. Just what the doctor ordered. (Kind of a statement on how horrible web tech has gotten, but that's a philosophical, not technical, discussion. Technically this is awesome!)
- kyle-rb 6y agoInteresting: in Chrome I can't search the content of <style> tags with ctrl+f. Seems to work in Firefox though. E.g. ctrl-f "max-width": zero results in Chrome (but it's used in the final <style> tag).
- hellokaushik 6y agointeresting
- Vogtinator 6y agoEven more fun with <html contenteditable>!
- dang 6y agoIf curious see also Show HN from last year: https://news.ycombinator.com/item?id=20094866 https://news.ycombinator.com/item?id=20094866
- deleted 6y ago[deleted]
- mark_and_sweep 6y agoHere's a HTML quine with the Firefox "View Page Source" look: Live: https://gistpreview.github.io/?0b8b18ca9dbd5a648d9fa21d7f1469ad https://gistpreview.github.io/?0b8b18ca9dbd5a648d9fa21d7f146... Source: https://gist.github.com/MarkTiedemann/0b8b18ca9dbd5a648d9fa21d7f1469ad https://gist.github.com/MarkTiedemann/0b8b18ca9dbd5a648d9fa2...
- azabua 6y agohttps://github.com/copremesis/quinesnake https://github.com/copremesis/quinesnake
- habosa 6y agoOne of my co-workers made a fun sort of HTML quine: https://firebase.tools https://firebase.tools It's a script you execute using curl | bash but it uses bash comments to contain HTML and CSS to prettyprint itself in the browser. As far as I know he invented this technique.
- aarchi 6y agoIn a similar fashion of transforming the mechanics of code as art, this reminds me of code poetry. Here is my favorite, Capsized by Zak Kain for Stanford's Code Poetry Slam: .ocean { color: cornflowerblue; pitch: high; overflow: visible; } .boat { color: firebrick; transform: rotate(94deg); float: none; } .rescue-team { visibility: visible; } .crew { widows: none; } https://web.archive.org/web/20170522035639/http://stanford.edu:80/~mkagen/codepoetryslam/#1.1_kain https://web.archive.org/web/20170522035639/http://stanford.e...
- lucasmullens 6y agoThis one is pretty impressive. I get so many adds for dumb programming t-shirts that say stuff like "if (me.tired) drink.coffee()" which aren't very creative.
- cookiengineer 6y agoThis actually reminds me of an idea I had for my own website [1] when I redesigned it, but I wasn't going for a quine and rather made use of copy/paste with a simpler format. I implemented a copy/paste feature using dummy elements that are only visible when being selected, so that when someone wants to copy text from my website, it will be copied as markdown notation (which was the originating article format before being statically rendered into the HTML code). Technically, this would work with HTML+CSS only, but I decided to go with JS generating these nodes automatically to keep my sanity alive - because there were some quirks along the way with getting paragraphs to be copied correctly across the major Web Browsers. [2] and [3] [1] https://cookie.engineer https://cookie.engineer [2] https://cookie.engineer/design/copypaste.css https://cookie.engineer/design/copypaste.css [3] https://cookie.engineer/design/copypaste.js https://cookie.engineer/design/copypaste.js
- Uptrenda 6y agoThis seems more like neckbeard snobbery to me. As in: "hey, look at this totally pointless thing I did just to show-off to uninformed people that I can do something mildly different." It's self-serving, needlessly dazzling, and completely useless. A good hack is actually good for accomplishing something. While this is just intellectual masturbation contributed for upboats and believe me: Hacker News has far too much of that cancer already.
- Prenasharma 6y ago"Packers And Movers Gurgaon" prompt moving, relocation and shifting services for people and corporation moving to "Gurgaon"and round the India. For Movers Packers Gurgaon city full target report on supply of revenue and effective Movers Packers in Gurgaon,contact today 08290173333.There are many kinds of Packers and Movers Gurgaon reviews that you can see on the website so just go through all these reviews and you will be known to the fact that which kind of wok we do provide and you would feel comfortable with us or not.As many people have their own requirements and needs so it’s necessary that we do match to your needs and make it sure thateverything is going according to you. @ https://packers-and-movers-gurgaon.in/ https://packers-and-movers-gurgaon.in/