4 ms·

Sites that pushed JavaScript to the limit

187 points by riledhel 15y ago

digitalsushi 15y ago
I think that "top n" lists of things might be the 2011 web cliche of the year, but there was one gem on there that was worth the view. Check out the beercamp link (http://2011.beercamp.com/ http://2011.beercamp.com/) - it does something I have never seen before. It hijacks the scroll bar and instead of a y-axis scroll, it zooms towards the center of the screen, pushing the outer elements larger and then off-screen. I just like to see examples like this that make me challenge my expectations of what an interface can be. (Not that I am an interface designer - it would be fascinating to grab a coffee with people that are and hear some other non-obvious ways of letting a viewer steer a web browser) I'm sure we'd cry bloody murder to see this replace the "top left, scroll down" model, though.
- schwabacher 15y ago
  It looks like that works by having two elements in the body, one, 'wrap', w/ position fixed and covering the screen, covering up another, 'scroll-proxy', with height 5400. They detect scroll on the proxy and use it set css transforms on elements inside 'wrap' to do the zooming effect. It is awesome how smoothly the CSS animations work. very cool! http://2011.beercamp.com/js/scripts.js?v07 http://2011.beercamp.com/js/scripts.js?v07
- talmand 15y ago
  That's pretty cool but I can only get it to work on Chrome. Every other browser the website is severely broken for me. What browser are you viewing this in?
  - timdoug 15y ago
    Works for me in Safari.
  - plq 15y ago
    works for me in firefox 8 on linux.
  - bmunro 15y ago
    For me, it was broken in Chrome. In Firefox 9 it was very laggy.
superasn 15y ago
How is gmail.com missing from this list? Before gmail you could hardly notice any email provider using XMLHTTP requests to load their mail, search, etc. It just my opinion, but to me it's always gmail which made it a normal-everyday-thing for sites to use Javascript so tightly across browsers. And they keep adding a ton of features like automatic email update (remember the check email buttons?), dragging/sorting contacts, inline chat, etc which may appear seamless but definitely push Javascript to the limit.
- ig1 15y ago
  It predates 2011
  - superasn 15y ago
    well, facebook.com is on the list too.
    - torial 15y ago
      Not sure if this is the criteria -- but Facebook's Timeline feature was recently added and appears to me to be JS heavy.
gulbrandr 15y ago
Three.js demos and baroque.me are amazing!
- draven 15y ago
  I stumbled upon three.js demos when looking for Javascript plotting libs yesterday and I couldn't believe the stuff it can do rendering on a canvas. It was a big "I really underestimated Javascript" moment.
pg_bot 15y ago
I was surprised to see that http://www.drawastickman.com/ http://www.drawastickman.com/ was not on the list.
- pefavre 15y ago
  Sure, this one is amazing.
murloc 15y ago
http://repl.it/ http://repl.it/ should be on this list. I don't think anything on this list comes even close to compiling CPython, Ruby and Lua to JS.
voodootikigod 15y ago
Any list like this without http://140byt.es http://140byt.es and http://js1k.com/2011-dysentery/ http://js1k.com/2011-dysentery/ are incomplete IMHO.
gkoberger 15y ago
There were some good examples, but most didn't push JS to the limit. About half were merely "cool sites that use JS".
sp332 15y ago
Well if they have the Windows Phone demo, they shouldn't forget the Ubuntu demo: http://www.ubuntu.com/tour/ http://www.ubuntu.com/tour/
- Synaesthesia 15y ago
  That's really well done. The Windows 7 demo not running on WP7 was a little funny, but hey, I guess they don't have to.
eiji 15y ago
I think "Linux in your browser" was the limit in 2011: http://bellard.org/jslinux/ http://bellard.org/jslinux/
- jbuzbee 15y ago
  Totally agreed. Emulating an entire x86 CPU, and booting a Linux image over the network in javascript? And it's fast enough to be completely usable? Jaw-dropping achievement.
pkrumins 15y ago
It's missing http://www.browserling.com http://www.browserling.com.
romac 15y ago
I would also have added http://codecs.ofmlabs.org http://codecs.ofmlabs.org which features hand-ported MP3 and ALAC decoders.
heyadam 15y ago
http://eightbit.me http://eightbit.me should be on there.
sunsu 15y ago
I think it's fairly ridiculous that jQuery Mobile is on the list, but Sencha Touch is not.
- MrNibbles 15y ago
  Agreed. That and Pusher is not built on Node, rather on Event Machine.
kittxkat 15y ago
Wow, this list has both some amazing sites but also rather meh-ish sites. And also thanks for the amazing comments, there are some really cool suggestions (as the Ubuntu online demo -- never knew that existed. Thanks!)

187 points by riledhel 15y ago

I think that "top n" lists of things might be the 2011 web cliche of the year, but there was one gem on there that was worth the view. Check out the beercamp link (http://2011.beercamp.com/ http://2011.beercamp.com/) - it does something I have never seen before. It hijacks the scroll bar and instead of a y-axis scroll, it zooms towards the center of the screen, pushing the outer elements larger and then off-screen. I just like to see examples like this that make me challenge my expectations of what an interface can be. (Not that I am an interface designer - it would be fascinating to grab a coffee with people that are and hear some other non-obvious ways of letting a viewer steer a web browser) I'm sure we'd cry bloody murder to see this replace the "top left, scroll down" model, though.

schwabacher 15y ago
It looks like that works by having two elements in the body, one, 'wrap', w/ position fixed and covering the screen, covering up another, 'scroll-proxy', with height 5400. They detect scroll on the proxy and use it set css transforms on elements inside 'wrap' to do the zooming effect. It is awesome how smoothly the CSS animations work. very cool! http://2011.beercamp.com/js/scripts.js?v07 http://2011.beercamp.com/js/scripts.js?v07
talmand 15y ago
That's pretty cool but I can only get it to work on Chrome. Every other browser the website is severely broken for me. What browser are you viewing this in?
- timdoug 15y ago
  Works for me in Safari.
- plq 15y ago
  works for me in firefox 8 on linux.
- bmunro 15y ago
  For me, it was broken in Chrome. In Firefox 9 it was very laggy.

superasn 15y ago

How is gmail.com missing from this list? Before gmail you could hardly notice any email provider using XMLHTTP requests to load their mail, search, etc. It just my opinion, but to me it's always gmail which made it a normal-everyday-thing for sites to use Javascript so tightly across browsers. And they keep adding a ton of features like automatic email update (remember the check email buttons?), dragging/sorting contacts, inline chat, etc which may appear seamless but definitely push Javascript to the limit.

ig1 15y ago
It predates 2011
- superasn 15y ago
  well, facebook.com is on the list too.
  - torial 15y ago
    Not sure if this is the criteria -- but Facebook's Timeline feature was recently added and appears to me to be JS heavy.

gulbrandr 15y ago

Three.js demos and baroque.me are amazing!

draven 15y ago
I stumbled upon three.js demos when looking for Javascript plotting libs yesterday and I couldn't believe the stuff it can do rendering on a canvas. It was a big "I really underestimated Javascript" moment.

pg_bot 15y ago

I was surprised to see that http://www.drawastickman.com/ http://www.drawastickman.com/ was not on the list.

pefavre 15y ago
Sure, this one is amazing.

murloc 15y ago

http://repl.it/ http://repl.it/ should be on this list. I don't think anything on this list comes even close to compiling CPython, Ruby and Lua to JS.

voodootikigod 15y ago

Any list like this without http://140byt.es http://140byt.es and http://js1k.com/2011-dysentery/ http://js1k.com/2011-dysentery/ are incomplete IMHO.

gkoberger 15y ago

There were some good examples, but most didn't push JS to the limit. About half were merely "cool sites that use JS".

sp332 15y ago

Well if they have the Windows Phone demo, they shouldn't forget the Ubuntu demo: http://www.ubuntu.com/tour/ http://www.ubuntu.com/tour/

Synaesthesia 15y ago
That's really well done. The Windows 7 demo not running on WP7 was a little funny, but hey, I guess they don't have to.

eiji 15y ago

I think "Linux in your browser" was the limit in 2011: http://bellard.org/jslinux/ http://bellard.org/jslinux/

jbuzbee 15y ago
Totally agreed. Emulating an entire x86 CPU, and booting a Linux image over the network in javascript? And it's fast enough to be completely usable? Jaw-dropping achievement.

pkrumins 15y ago

It's missing http://www.browserling.com http://www.browserling.com.

romac 15y ago

I would also have added http://codecs.ofmlabs.org http://codecs.ofmlabs.org which features hand-ported MP3 and ALAC decoders.

heyadam 15y ago

http://eightbit.me http://eightbit.me should be on there.

sunsu 15y ago

I think it's fairly ridiculous that jQuery Mobile is on the list, but Sencha Touch is not.

MrNibbles 15y ago
Agreed. That and Pusher is not built on Node, rather on Event Machine.

kittxkat 15y ago

Wow, this list has both some amazing sites but also rather meh-ish sites. And also thanks for the amazing comments, there are some really cool suggestions (as the Ubuntu online demo -- never knew that existed. Thanks!)