Javascript secrets of Bret Victor's homepage

http://www.arcfn.com/2011/12/javascript-secrets-of-worrydreamcom.html

by creamyhorror • 14 years ago

80 39 14 years ago

arcfn.com

verroq2• 14 years ago

The homepage is unusably slow on Firefox.

icebraining• 14 years ago

It's unusably slow on your instance of Firefox. Works fine here in FF 17 / Ubuntu 12.04.

verroq2• 14 years ago

Upgraded from FF 16 to FF 17 and still unusable.

Works fine in Chrome although it doesn't scroll properly on a trackpad.

olaf2• 14 years ago

Almost unusably slow here also, this is a bad example of a website, because the web/html works better the more one designs for the least common denominator, not pushing it to its limits. Fundamental misunderstanding, mismatch.

TeMPOraL2• 14 years ago

> the web/html works better the more one designs for the least common denominator, not pushing it to its limits

The only way to move the least common denominator forward (aka. progress) is to have people pushing the tech to the limits.

draven• 14 years ago

The homepage is really usable and (IMHO) looks rather nice in Firefox w/ noscript. Which was kind of surprising because a lot of websites don't degrade well with JS disabled.

mekwall2• 14 years ago

Not related to the article. Seems Bret doesn't care much about us Windows users. It's more or less impossible to scroll with your scroll-wheel with that custom scroller. Personally I think he's trying too hard with worrydream.com. I feel it's hard to navigate, with bad responsiveness and clunky, even on Chrome. I believe the bad UX comes from the skeuomorphic design. I've never seen such design work good for a software UI.

That aside, Bret Victor is a genius and I love most of is work. He's a great inspiration to me, and should be to anyone involved in any form of software development.

robmcm3• 14 years ago

This is more of a show of expression that creating a usable site.

Again this reminds me of the Flash days, where people were doing things because they could rather than because they should. CSS text rotation is a great example of this.

Still I think sites like this are a great playground, and show what can be done.

ygra• 14 years ago

More so, in stark contrast to Flash, his site is accessible to screen readers, search engines and older browsers.

tripzilch• 14 years ago

I'm not sure if you're having the same experience, then. Scrolling is almost impossible for me. The only way is if I manually drag the indicator bar, and even then it's clunky.

I'm just going to assume he designed it for a different system that doesn't have these problems. On my end (Opera/Win7), it really does not show "what can be done" :)

What I mean is there's a difference between coding a site that has so much eyecandy the designer wrecks usability (which happened in the old Flash days) and coding a showcase site that looks fine (but flashy and perhaps not entirely intuitive) on some systems, but it a real pain on others. The latter didn't happen nearly as much for Flash because the plugin's the same everywhere, but I think it's more excusable than the former for a showcase website like this (even though it's too bad I can't enjoy the demo--at all).

lewispollard• 14 years ago

I'm on Ubuntu and scrolling with the mousewheel feels like I'm scrolling through tar. A lot of these sites with fancy scrolling hooks seem to do the same, really annoying.

angry-hacker• 14 years ago

Same on Windows + Chrome, scrolling is pain.

I think you should never hijack the default scrollbars of a browser... But a lot of Google products are doing it also so I guess it's a trend now...

jordan0day• 14 years ago

Maybe it's designed for people with touchscreens? On Windows, in Chrome, the scrollwheel sucks, but if you click the page and move the mouse up or down to scroll (dragging), it's much more responsive.

gurkendoktor3• 14 years ago

> I believe the bad UX comes from the skeuomorphic design

I can't see a single thing that has its function derived from a real-life object. Maybe I didn't dig deep enough this time, but why not just call it bloat? (Which I think it is - even though it's really butter smooth on Safari)

gnufied• 14 years ago

I think he was referring to Scroll combined with blurred preview of item your hovering over. I could be wrong but it was designed to give a feel of driving in your car through a street full of houses or something.

mekwall2• 14 years ago

How about... The diapositives, motion blur, scratched wooden surface background and shadowed borders (simulated lighting)? Those are the main design elements of the site, and are all skeuomorphic.

bhattisatish• 14 years ago

If I remember correctly the website is actually implemented via openlazlo (http://www.openlaszlo.org/). I remember coming across Bret's site as an example while working through openlaszlo documentation.

creamyhorror• 14 years ago

Bret Victor seems to be the sort of guy who makes things for the sheer joy of it. They may not always work brilliantly, but you have to respect the creativity and effort that went into them. When I saw his page I was surprised by how it was achieved without Flash. I think that was the point of him making it: to show that surprising things could be done.

This harks back to those showoff pages at the dawn of the Web, which showed surfers things that surprised and intrigued, and did it without adhering to common design conventions. The sort of page that you raised your eyebrows at and bookmarked right away, because that sure was some genius and artistry behind it there. It's nice to come across these things, especially today when mostly everyone uses major platforms, templates, plugins, and conventions.

klibertp3• 14 years ago

To everyone complaining about UX on his site: please don't. Don't even look at the effects, don't think about how it looks, it's irrelevant. Instead, go read the code. And if you want to complain about how it's written, it's ok - paste example snippets and talk about them. Show how you'd optimize this or that transition, what you'd do better. I find your complaints - without these snippets and rationale - annoying and missing the point.

camus2• 14 years ago

What's the point then? Sorry but if a site is not browsable because it is too slow,not scrollable because it's too slow, there is nothing to discuss to begin with.

And clearly it is (slow).

The WOW factor ? been doing all these kind of stuff for 10 years so it's long gone...

the fact that it is done with javascript ?dont care, still did it 10 years ago , faster ,smoother and it worked in IE6... and i'm pretty sure most of that site dont work in non webkit browsers... so much for "run everywhere"

My point is , dont do demo stuff if the tech behind it is under performing. Because you are "damaging" the tech and well as your work. There are better exemples out there of all these HTML/JS stuffs.

JoeAltmaier• 14 years ago

Yeah; most web apps, only their mother could love. Because of all that. Seems it always performs better (or even adequately) when using platform features, rather than to cobble a feature together using javascript etc.

CodeMage2• 14 years ago

Wait, what?

Don't even look at the effects, don't think about how it looks, it's irrelevant.

No, it's not. On the contrary, it's not only relevant, it's the central issue. Otherwise he wouldn't have made the site look like that.

I find your complaints - without these snippets and rationale - annoying and missing the point.

The site is awfully slow to scroll on my machine. I can't use the keyboard to scroll it, either. Right clicking on one of those icon thingies behaves the same as left clicking, which surprised the heck out of me. So did the fact that you can scroll the site by dragging the background, with left or right click; you can imagine what that did for my mouse gestures.

If you think I have to present snippets of code to validate these complaints, then you're the one missing the point.

Just in case: the point is that while the site is behaves like a nifty tablet app, it breaks both the widespread expectations of how to interact with a web site and several significant interaction mechanisms that a lot of people rely on. To distill the point even further, it would be a pretty nice mobile app, but as a site it's about as nice as using blink and marquee tags was back in the day.

klibertp3• 14 years ago

> No, it's not. On the contrary, it's not only relevant, it's the central issue.

Ok, I'm sorry, I presented my point of view and shouldn't have expected others to think the same.

As for me, I'm not exactly touched by visuals. My ideal UI and UX is CLI and this has not changed for over twenty years now. Anything more than this is an annoyance for me and I would probably consider much of really good designs as ugly overkill. Probably, because I have no way to say which design is good and which is not, I lack the skill to care.

However, I'm a programmer. I'm easily excited by what someone coded, especially if this something reaches the limits of technology. I am a kind of guy that's going to be amazed with a simple, bug ridden, slow and visually ugly proof-of-concept, just because it's cleverly coded.

I didn't had the time to read through the source yet. I don't know if it's enough to make me smile. Maybe it's not, maybe it is. And that's the point: I'm a programmer. Not a business person. I don't care about a product. I don't care about UX. I'm in love with code, and that's why I still work as a programmer, am not burnt out and not going to go into management.

If Bret was product-centric he'd use Flash to do this. It would be faster, both in development and execution times. It would be cross-platform, at least as much as Flash itself is. It would be prettier and much more usable. It would take fraction of work that went into coding this in JavaScript.

Maybe I'm misunderstanding him, but the fact that he did this in JavaScript suggests, for me, that he didn't treat it as a "product", that needs to be "shipped". I think he took a journey into unknown, beyond the limits of current JavaScript technology, and documented this journey in the form of code. That's why I'm going to read his notes, his code, and learn from him. Because I'm a programmer, because what I care about is code.

You are entitled to be primarily concerned with how usable the site is. When I said that you're missing the point, I thought that maybe - maybe - Bret didn't even think about usability of this particular site, maybe he wanted to show programmers that coding something like this is possible. Maybe I'm wrong, this is pure speculation - Bret himself should say what he intended.

lloeki• 14 years ago

I have a couple quibbles with the article, notably:

> Special support for Ajax URLs

being raised as an industry standard and a best practice, whereas it's a Google hack of a solution.

HTML5 history.pushState[0] is the proper standard solution, with a nice polyfill[1]

[0] https://developer.mozilla.org/en-US/docs/DOM/Manipulating_th...

[1] https://github.com/balupton/history.js

DaanDL• 14 years ago

He's amazing..I was stunned while looking at his work. Especially learnable programming.

hatu• 14 years ago

I really like his articles but the website is awful. Everything is blurry and the scrolling is broken. On HN when I scroll down once, it goes to the next comment, on this site it literally scrolls 1 pixel down.

Tyrant505• 14 years ago

UX aside, a lot of thought went into this and I applaud the experimentation done in 2011!

SolarUpNote• 14 years ago

For anyone who hasn't seen Bret Victor's mind-blowing talk, here it is:

http://vimeo.com/36579366

Javascript secrets of Bret Victor's homepage

Related Stories