7 ms·

Javascript secrets of Bret Victor's homepage

80 points by creamyhorror 14y ago

verroq 14y ago
The homepage is unusably slow on Firefox.
- icebraining 14y ago
  It's unusably slow on your instance of Firefox. Works fine here in FF 17 / Ubuntu 12.04.
  - verroq 14y ago
    Upgraded from FF 16 to FF 17 and still unusable. Works fine in Chrome although it doesn't scroll properly on a trackpad.
- olaf 14y 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.
  - TeMPOraL 14y 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.
    - olaf 14y ago
      No, a site for public consumption should behave consistent in current browsers. Otherwise, the author demonstrates merely his misunderstanding of the web.
      - TeMPOraL 14y ago
        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.
- draven 14y 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.
mekwall 14y 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.
- robmcm 14y 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 14y ago
    More so, in stark contrast to Flash, his site is accessible to screen readers, search engines and older browsers.
    - acqq 14y ago
      Not accessible enough: I see only the black screen on my Opera Mini.
    - camus 14y ago
      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.
    - robmcm 14y ago
      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.
bhattisatish 14y ago
If I remember correctly the website is actually implemented via openlazlo (http://www.openlaszlo.org/ http://www.openlaszlo.org/). I remember coming across Bret's site as an example while working through openlaszlo documentation.
creamyhorror 14y 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.
klibertp 14y 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.
- camus 14y 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 14y 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.
- CodeMage 14y 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.
lloeki 14y 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_the_browser_history https://developer.mozilla.org/en-US/docs/DOM/Manipulating_th... [1]: https://github.com/balupton/history.js https://github.com/balupton/history.js
DaanDL 14y ago
He's amazing..I was stunned while looking at his work. Especially learnable programming.
hatu 14y 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 14y ago
UX aside, a lot of thought went into this and I applaud the experimentation done in 2011!
SolarUpNote 14y ago
For anyone who hasn't seen Bret Victor's mind-blowing talk, here it is: http://vimeo.com/36579366 http://vimeo.com/36579366

80 points by creamyhorror 14y ago

verroq 14y ago

The homepage is unusably slow on Firefox.

icebraining 14y ago
It's unusably slow on your instance of Firefox. Works fine here in FF 17 / Ubuntu 12.04.
- verroq 14y ago
  Upgraded from FF 16 to FF 17 and still unusable. Works fine in Chrome although it doesn't scroll properly on a trackpad.
olaf 14y 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.
- TeMPOraL 14y 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.
  - olaf 14y ago
    No, a site for public consumption should behave consistent in current browsers. Otherwise, the author demonstrates merely his misunderstanding of the web.
    - TeMPOraL 14y ago
      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.
draven 14y 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.

mekwall 14y 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.

robmcm 14y 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 14y ago
  More so, in stark contrast to Flash, his site is accessible to screen readers, search engines and older browsers.
  - acqq 14y ago
    Not accessible enough: I see only the black screen on my Opera Mini.
  - camus 14y ago
    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.
  - robmcm 14y ago
    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.

bhattisatish 14y ago

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

creamyhorror 14y 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.

klibertp 14y 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.

camus 14y 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 14y 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.
CodeMage 14y 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.

lloeki 14y 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_the_browser_history https://developer.mozilla.org/en-US/docs/DOM/Manipulating_th... [1]: https://github.com/balupton/history.js https://github.com/balupton/history.js

DaanDL 14y ago

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

hatu 14y 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 14y ago

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

SolarUpNote 14y ago

For anyone who hasn't seen Bret Victor's mind-blowing talk, here it is: http://vimeo.com/36579366 http://vimeo.com/36579366