5 ms·
Real-time updates without JavaScript
- EgoIncarnate 9y agoTLDR: It's a basic chat app. It's using a streaming http connection and css "::before" to reverse the order of new output, so it doesn't need javascript. Interesting hack, but...
- The_suffocated 9y agoBut what?
- ErunamoJAZZ 9y agoPage never end to load.
- lhorie 9y agoIt breaks when you press `esc`. Either that, or the DOM just keeps growing and hogging memory until the tab eventually becomes unresponsive or crashes
- The_suffocated 9y agoThanks, but isn't this the same if you use a virtual DOM? Is Mithril not prone to this problem if you keep adding stuffs to the list?
- lhorie 9y agoWith javascript you can keep an EventSource connection open (which is immune to the `esc` thing), and you can prune the DOM and let the browser GC.
- The_suffocated 9y agoThanks for the explanation. I'm too green to understand this, but I'll try to learn more about it later.
- wybiral 9y agoPresumably you'll eventually write something rather than lurking for hours and then it'll refresh.
- roywiggins 9y agoIn extremis a <meta refresh> could be used.
- reificator 9y agoBut then if you refresh every ten minutes or so, and I just happen to be finally responding after that long, I'm going to lose what I'm typing.
- myfonj 9y agoNot necessarily: browsers are pretty good at keeping form elements state across refreshes nowadays, especially Firefox. Cursor position perhaps, but not text.
- reificator 9y agoPerhaps, but certainly there will be frustration there. Especially WRT cursor position changing.
- lhorie 9y agoI mean, sure, it works just fine if people refrain from doing certain arbitrary things (such as the scripted spamming that's happening as I write this), but that's why the grandparent comment said it was a hack and not a trick that one might want to attempt in production.
- wybiral 9y agoThe spam had nothing to do with not using Javascript. I could easily have added a CAPTCHA or required accounts.
- sebazzz 9y agoMy Surface tablet got warmer and warmer on my lap.
- twiss 9y agoThe CSS to reverse the order is: main { display: flex; flex-direction: column-reverse; } The many ::before <style>s are used to update the connection count. If you like these kinds of tricks, there's also an "order" CSS property, which lets you give elements any arbitrary order you like (by giving each element a numeric index). This can be useful for implementing sorting functionality, for example.
- netgusto 9y agoI guess this works by keeping the connexion alive and streaming packets of data, taking advantage of the browsers capacity to render HTML before the whole source is actually loaded. OP?
- wybiral 9y agoCorrect. It's a small Golang server that keeps the connection alive with chunked transfer encoding. From the browser's perspective it's like a really slowly loading page. The connection count is updated by sending some inline CSS ::before content changes.
- The_suffocated 9y agoThanks for the demonstration. I didn't know this chunked encoding technique before.
- thesandlord 9y agoThis is a really cool hack. Is the source code available somewhere? I understand how the updates are showing up in my browser (using CSS ::before and never closing the connection), but can't figure out how the post works without refreshing the page. Can't view source because the page never actually finishes returning. I'm probably forgetting something basic.
- Felk 9y agoYou're forgetting about F12 :)
- deleted 9y ago[deleted]
- wybiral 9y agoThe POST requests do refresh the page for the poster. But not for the viewers. For everyone else it just streams the HTML to them using chunked encoding. It's written in Golang and hosted on a free Heroku instance. I'll probably upload the code somewhere after a bit.
- thesandlord 9y agoOh wow, I couldn't really notice the page refreshing at all... Nice job.
- wybiral 9y agoThanks. There's a subtle trick where new comments (from streamed updates) have a CSS animation but comments from the page reload don't. It seems to make it feel more seamless.
- fwdpropaganda 9y agoWhat's with the shitty people? "Europeans are useless", "fuck white people", "fuck black people" etc. Ludicrous.
- quickthrower2 9y agoThat's what happens when everyone is anonymous and the text scrolls fast, you can't even have a proper conversation so those types of people leave and you are left with a trollbox.
- meritt 9y agoKeep in mind these are the same people whose comments you're reading on HN and the same people upvoting/downvoting whether or not your contributions are seen. Pure anonymity sucks. Also see John Gabriel's Greater Internet Fuckwad theory: https://www.penny-arcade.com/comic/2004/03/19 https://www.penny-arcade.com/comic/2004/03/19
- chc 9y agoThis is partially alleviated by the fact that you can't downvote until you reach a certain karma threshold.
- fwdpropaganda 9y ago> Keep in mind these are the same people whose comments you're reading on HN and the same people upvoting/downvoting whether or not your contributions are seen. Yeah I'm just starting to realise this. Big disappointment.
- tannhaeuser 9y agoMeta refresh has been used with WebCams for ages. [1]: https://en.m.wikipedia.org/wiki/Meta_refresh https://en.m.wikipedia.org/wiki/Meta_refresh
- wybiral 9y agoIt's not using meta refresh. The content is streaming.
- zestyping 9y agoIf you liked that, you might also enjoy this little hack. How about real-time updates without JavaScript or CSS tricks? http://zesty.ca/chat http://zesty.ca/chat (1999)
- sattoshi 9y agoAt the bottom it says that it uses JS to not require refreshing after each message. This is not necessary as the form can submit to a frame using the target attribute without refreshing the parent frame.
- deleted 9y ago[deleted]
- nine_k 9y agoThis is a funny trick, and known for ages, except the CSS-based re-ordering of the incoming info. It's probably not practical for a chat app (DOM just grows infinitely), but it's a great way to show progress of a longish-running process with a bare minimum of means.
- pedalpete 9y agoCompared to using a socket server, how many connections can this server maintain?
- wybiral 9y agoIt's being flooded with spam now. This is why we can't have nice things. Anyway, it was just a proof of concept. The spam could be blocking using some captcha or registration if necessary.
- MattPearce 9y agoAlso no filtering, you can just chuck raw HTML in there
- wybiral 9y agoThat's not true. I allowed b, u, i for a while but people kept not closing them so even those are disabled.
- mcdirty 9y agoAnd someone wrote a script to overload it. ~Nice Try~ :D
- wybiral 9y agoOverloading it was failing. But the spam was too much (it was posting so fast you couldn't read anything). I meant for this to just be a fun example of noscript updates so I'm probably not going to add captcha/IP filtering or anything. People...
- dustinsterk 9y agoNever can have nice things......
- petagonoral 9y agointeresting that neither chrome or firefox network dev tools can/will show a response for the 'GET' request