Javascript secrets of Bret Victor's homepage(arcfn.com)
arcfn.com
Javascript secrets of Bret Victor's homepage
http://www.arcfn.com/2011/12/javascript-secrets-of-worrydreamcom.html
10 comments
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.
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.
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.
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.
More so, in stark contrast to Flash, his site is accessible to screen readers, search engines and older browsers.
As others have said most flash sites of this kind did the exact same hack and provided an HTML fallback that used JS to replace the fallback div with the correct Object/embed for the browser.
Not accessible enough: I see only the black screen on my Opera Mini.
Back in the days , making a flash site meant making an accessible fallback as well, and i always designed a pure html fallback for each full flash website i made ,Heavy javascript sites are not accessible by magic.
The irony is this site would have been smoother using flash. On my mack , this webiste is pretty slow and hard to use.
The irony is this site would have been smoother using flash. On my mack , this webiste is pretty slow and hard to use.
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).
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).
I guess one advantage he gets is that is works on iOS devices tapping into the hardware acceleration thanks to CSS3 animations.
I fear disable JS will be the new flash blocker :/
I fear disable JS will be the new flash blocker :/
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.
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...
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...
I think it's fine to hijack the default scrollbars so long as all you change is their appearance. If you can't do it without changing the way scrolling via the wheel feels in any way, you need to trash it and use the default scroll bars.
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.
> 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)
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)
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.
Nothing of this has or had anything to do with functionality on either side of the screen. The motion blur is not even tied to motion on the site (which may or may not be a good thing).
Most "3D hacker interfaces" in Hollywood movies aren't skeuomorphic, yet they blink and rotate and blur and zoom all the time. Same for many Asian TV channels. In what way is worrydream.com bad that doesn't apply to these elements, and why is it caused by textures from real life? Aren't they just all confusing because they are doing too much at once?
Most "3D hacker interfaces" in Hollywood movies aren't skeuomorphic, yet they blink and rotate and blur and zoom all the time. Same for many Asian TV channels. In what way is worrydream.com bad that doesn't apply to these elements, and why is it caused by textures from real life? Aren't they just all confusing because they are doing too much at once?
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.
I thought the point was to use very low-res JPEG files and load the full versions later. The motion blur is still visible when the screenshots are not moving too.
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
> 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
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.
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.
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.
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.
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.
> 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.
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.
I'm not that different from you. I also love coding and I love cleverness in coding. However, I also care about "product".
That doesn't mean I expect everything to be a "product". If you tell me, "Hey, look at this clever concept/technique/trick/idea/spike/prototype that I cobbled together", I'm not going to tell you "Damn, why is it so ugly/slow/buggy" (unless the idea was specifically to be pretty/fast/bug-free).
You and I basically disagree about the assumed purpose of Bret's site. If his site were a game, then I would be the dude who's disappointed because it's Quake III and not Dragon Age ;)
PS: Caring about "product" and UX doesn't mean you'll get burned out or go into management ;) I know you weren't generalizing, but talking about your specific case instead, but I just wanted to mention that caring about code and caring about users are things that don't work against each other.
That doesn't mean I expect everything to be a "product". If you tell me, "Hey, look at this clever concept/technique/trick/idea/spike/prototype that I cobbled together", I'm not going to tell you "Damn, why is it so ugly/slow/buggy" (unless the idea was specifically to be pretty/fast/bug-free).
You and I basically disagree about the assumed purpose of Bret's site. If his site were a game, then I would be the dude who's disappointed because it's Quake III and not Dragon Age ;)
PS: Caring about "product" and UX doesn't mean you'll get burned out or go into management ;) I know you weren't generalizing, but talking about your specific case instead, but I just wanted to mention that caring about code and caring about users are things that don't work against each other.
> You and I basically disagree about the assumed purpose of Bret's site.
Fair enough :) I think we should wait for Bret's comment on this, only he will be able to tell us what he really intended to achieve with his site.
> Caring about "product" and UX doesn't mean you'll get burned out or go into management ;) I know you weren't generalizing,
I wasn't generalizing, but I certainly was exaggerating... a bit. Sure I like my code to be used, and that it feels nice to have users that are happy to work with something I created. It's just that my focus is primarily in code and I feel a bit frustrated here, because it seems like I'm in minority. There are many people here commenting on cool, clever, technical hacks, but I feel that there is more of those who only `itertools.cycle(["product", "business value", "product", "customers", "product", "shipping", "product"])`... I don't think it's wrong, just that I don't feel that way and would like to be recognized as someone of value (not necessarily business value) too :)
Fair enough :) I think we should wait for Bret's comment on this, only he will be able to tell us what he really intended to achieve with his site.
> Caring about "product" and UX doesn't mean you'll get burned out or go into management ;) I know you weren't generalizing,
I wasn't generalizing, but I certainly was exaggerating... a bit. Sure I like my code to be used, and that it feels nice to have users that are happy to work with something I created. It's just that my focus is primarily in code and I feel a bit frustrated here, because it seems like I'm in minority. There are many people here commenting on cool, clever, technical hacks, but I feel that there is more of those who only `itertools.cycle(["product", "business value", "product", "customers", "product", "shipping", "product"])`... I don't think it's wrong, just that I don't feel that way and would like to be recognized as someone of value (not necessarily business value) too :)
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.
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.
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.
The homepage is unusably slow on Firefox.
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.
> 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.
The only way to move the least common denominator forward (aka. progress) is to have people pushing the tech to the limits.
No, a site for public consumption should behave consistent in current browsers. Otherwise, the author demonstrates merely his misunderstanding of the web.
No, it shouldn't. Not in every case. If you're building a company site and care about every customer, then yes, make everything compatibile back to IE6. Your aim is to earn money via web, which is only a tool for that; not to make progress happen. But even then you might want to enable some more advanced features for people with better browsers.
On the other hand, when you're building a personal site you can do whatever you want, especially if you want to make a statement, and especially if you are specialized in information and interaction design. You push the status quo and lead by example.
The web is not a static organism. It needs to evolve, it needs to be pushed to it's limits and beyond. If you don't want to innovate (in this particular area), than by all means stay with least common denominator. But don't stop those who want.
On the other hand, when you're building a personal site you can do whatever you want, especially if you want to make a statement, and especially if you are specialized in information and interaction design. You push the status quo and lead by example.
The web is not a static organism. It needs to evolve, it needs to be pushed to it's limits and beyond. If you don't want to innovate (in this particular area), than by all means stay with least common denominator. But don't stop those who want.
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.
It's unusably slow on your instance of Firefox. Works fine here in FF 17 / Ubuntu 12.04.
Upgraded from FF 16 to FF 17 and still unusable.
Works fine in Chrome although it doesn't scroll properly on a trackpad.
Works fine in Chrome although it doesn't scroll properly on a trackpad.
For anyone who hasn't seen Bret Victor's mind-blowing talk, here it is:
http://vimeo.com/36579366
http://vimeo.com/36579366
UX aside, a lot of thought went into this and I applaud the experimentation done in 2011!
He's amazing..I was stunned while looking at his work. Especially learnable programming.
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.