Css-only-chat: A truly monstrous async web chat using no JS on the front end

Haha, I’m glad to see people enjoy this (author here)! If you like this sort of thing, some other terrible proof-of-concepts I’ve done:<p>A ruby dsl that’s indistinguishable from JavaScript. <a href="http:&#x2F;&#x2F;kevinkuchta.com&#x2F;_site&#x2F;2017&#x2F;07&#x2F;disguising-ruby-as-javascript&#x2F;" rel="nofollow">http:&#x2F;&#x2F;kevinkuchta.com&#x2F;_site&#x2F;2017&#x2F;07&#x2F;disguising-ruby-as-java...</a><p>^ and in talk form: <a href="http:&#x2F;&#x2F;confreaks.tv&#x2F;videos&#x2F;rubyconf2018-ruby-is-the-best-javascript" rel="nofollow">http:&#x2F;&#x2F;confreaks.tv&#x2F;videos&#x2F;rubyconf2018-ruby-is-the-best-jav...</a><p>A url-shortener using AWS lambda - JUST lambda. No data store. <a href="http:&#x2F;&#x2F;kevinkuchta.com&#x2F;_site&#x2F;2018&#x2F;03&#x2F;lambda-only-url-shortener&#x2F;" rel="nofollow">http:&#x2F;&#x2F;kevinkuchta.com&#x2F;_site&#x2F;2018&#x2F;03&#x2F;lambda-only-url-shorten...</a>

The most interesting part of this at least for me is what inspired it: A way to track cursor location without using javascript, that even works in Tor Browser: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;davywtf&#x2F;status&#x2F;1124130932573839360" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;davywtf&#x2F;status&#x2F;1124130932573839360</a><p>tl;dr css hover selectors that change the background image don&#x27;t actually cause the browser to GET the specified background image until you hover over it, thus creating a way to send data from a web page with no javascript.

Now this is a proper hacker project perfect for being featured on this site

It seems all those css tracking tricks (a:visted, [value=...], now :hover) depend on external resouces (background-images) being loaded lazily only once the selector is matched. Wouldn&#x27;t a easy solution be for browsers to always download all url(&#x27;...&#x27;) references found the the stylesheets even if the selector is never matched?

Seems like a compelling argument for not lazily loading urls referenced in CSS rules. If the browser progressively loaded everything in the stylesheet without user interaction it would presumably consume more bandwidth in many situations but it would also blast this server with a continuous stream of the entire alphabet.

Reminds me of this:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;videlalvaro&#x2F;gifsockets" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;videlalvaro&#x2F;gifsockets</a>

Combining with Turing complete CSS, it can reach the sky higher than our imagination<p><a href="https:&#x2F;&#x2F;rawgit.com&#x2F;elitheeli&#x2F;stupid-machines&#x2F;master&#x2F;rule110-old&#x2F;rule110-full.html" rel="nofollow">https:&#x2F;&#x2F;rawgit.com&#x2F;elitheeli&#x2F;stupid-machines&#x2F;master&#x2F;rule110-...</a>

Just a few hours earlier, this discussion on Turing-complete stuff hit HN&#x27;s front page:<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19847939" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=19847939</a><p>Now I don&#x27;t know if there&#x27;s any causal relationship between the two (or the three) or if it&#x27;s just a big coincidence, since it says on the README that the inspiration for it came from a Tweet posted a few days ago.

I am consistently surprised at the mass creativity with CSS over the years, never ever disappointed!

This makes me wonder: is CSS turing complete?<p>Are browsers that allow CSS as vulnerable to being exploited as those that allow Javascript?

Probably a silly question, but is there a working demo for this? This is one of those things you kinda have to see in action, and there doesn&#x27;t seem to be a link to anything like that in the readme.

Reminds me of this: <a href="https:&#x2F;&#x2F;harmless.herokuapp.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;harmless.herokuapp.com&#x2F;</a><p>HN Discussion: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=16319248" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=16319248</a><p>Basically the same idea, but it does refresh when you submit. The CSS buttons are quite a clever workaround to not refresh the page.

You could do this with no CSS, only html.

&gt; Should I use this in real life? Dear god yes.

You could write a UI framework using these ideas to provide rich client-sided functionality to Tor hidden services, where users typically disable JavaScript.

I&#x27;ve gotta admit: hats off for this clever hack.

Rather than the forever loading site, couldn&#x27;t you also include in the html doc something like this to have it simply refresh every few seconds?<p>&lt;meta http-equiv=&quot;refresh&quot; content=&quot;10; URL=&#x27;<a href="http:&#x2F;&#x2F;new-website.com&#x27;&quot;" rel="nofollow">http:&#x2F;&#x2F;new-website.com&#x27;&quot;</a> &#x2F;&gt;<p>So the page would simply refresh itself every 10 seconds.

You know, projects like this make me want to start blocking *.css files in my HOSTS file and browser setups.

Definitely the most creative code I&#x27;ll be seeing this week! I realize this is really bad practice and likely to be fixed since it can be used for tracking users, but: are there any advantages to using CSS over Javascript, in theory?

I don&#x27;t know why you did what you did but I am glad you did.

You lost me at ruby

gf

link?

When the A&#x2F;B test tells you that you should<p>but you shouldn&#x27;t

This is what hacking is all about!

&quot;Css-only-chat&quot;<p>CSS is always CSS. It&#x27;s CSS on the repo too, but got edited back to &quot;Css&quot; here on the HN title for some reason.