198 comments

[ 4.7 ms ] story [ 239 ms ] thread
Anybody have an idea on how this was done?

Javascript by hand?

svg. doc is similar to html (nodes in a tree structure) and it can be scripted(js). Animation scripted by hand or using an external lib like jq.
As above, it uses the Raphael JavaScript drawing and animation library.
There is a desc tag:

<desc>Created with Raphaël</desc>

http://raphaeljs.com/reference.html

Awesome stuff.

Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;)
You've got to convince the masses, that you can do Flash ... without flash first, before you can get them to stop using flash.
As soon as the masses decide that HTML5 = "Flash, but better", everything that is bad about Flash will rapidly become everything that's bad about HTML5.

Changing the underlying technology will not change the people who use it.

this is so true.
It will be worse. This stuff can't be contained with simple tools like Flashblock. Unless you want to block all Javascript by default, which will probably break 99% websites in the near future.
At least people can do view source this time, though obfuscated JavaScript can be a pain.
> Very cool, but I'm not sure creating a site that looks JUST like a flash site is really the right direction... ;)

Don't be silly! everyone wants faster horses! EVERYONE!

Well it appears that at least the linked site does need flash. If you click on features and specifications the embedded video is flash (firefox 3.6)

So not quite true.

Give it a second and it replaces it with a javascript site.

I have click to flash set up and before I could click, it replaced.

Doesn't happen for me for some reason. It keeps on being flash.
I assumed it was a <video/> element that Firefox wouldn't render because it used H.264 video, but no... it's an ordinary Flash video. How odd.
It seemed to play without Flash in Chrome 10.0.648.82 on Linux.
I use Firefox 3.6 on Win7 and I don't have a Flash plug-in installed. When navigating to one of the pages that contains video, FF prompts me to open or save a h.264 file with a .mp4 extension.
This is awesome. I was expecting to see HTML5 and was surprised when it wasn't. The doctype is strict and a lot of the interface uses JavaScript. The center navigations use svg and Raphael[1]. Either way, this is pretty sweet. And so is the car.

[1] http://raphaeljs.com/

Until it's possible to do audiotool.com you are not even close to be able to replace flash
Absolutely, Audiotool is amazing. I really like what they did with the nissan site, but you can still see that it doesn't flow as smooth as flash.
The only thing you (likely) cant achieve with plain old html + javascript there is if the Flash is actually editing the audio itself (and is not just getting a server to do it).

I don't think thats a very common requirement: there are other, much more straight forward barriers to replacing flash with html + js, such as lack of dev/designer skills (ie. number of people whom can do that in flash vs whom can do it in html + js).

ambitious but not impossible
It is impossible since you can't sync the sound properly
I'm glad to see this. I for one am looking forward to the day when javascript is at the point where it offers a level of programing ease for animations, etc, that you get with flash. (It may have happened already, last time I did lingo programming it was called lingo, and I am not conversant with the state of the art in javascript.)

Or it seems that CSS is supporting animations and maybe that is a better choice over javascript? (because the browser, I presume, can optimize CSS a lot easier than javascript which can have arbitrary functionality.)

Flash is here to stay until someone creates a designer-oriented HTML5/JS/SVG IDE analogous to Adobe's designer-oriented Flash/AS IDE. Even after that point, it'll be a while before we see Flash head out the door. There's a lot that HTML5 doesn't address yet.
I think it would be a dream for adobe, to be able to discharge themselves of maintaining their player on multiple architectures on browser makers.
Agreed. Adobe doesn't make much money off of the Flash Player, just the Flash IDE, so they'd be thrilled if they could offload Flash Player's functionality and the horrible reputation it gives them and just focus on creating a good IDE.
Hmm flashblock is triggered for some reason but works anyway.

Those menus are rather distracting and complicated for an average consumer site.

ps. OT but the "Leaf" is not available in green ???

Flashblock might be triggered due to SoundManager 2.

Which is funny, considering in many cases it's probably Flash handling the audio for this, and thus the title is inaccurate.

Their feedback form doesn't work in Safari. The site feels like a Flash site, but doesn't use flash, which is nice!

It also works on my iPad. The 360 is a bit slow but it's there.

Nice and all, but the scroll bars don't work on the iPad, nor is there a way to scroll the tag list on the left. A step in the right direction though.
I don't understand how we've gone from "Flash is crap for entire websites" (edit: which is almost always true) to "Flash is the devil in every situation". It has its place, Javascript will never and shouldn't try and "kill" Flash, they're different.
Well, to me it's good news, the web will be a lot snappier when it's fully integrated. No more clunky plugins. No matter what Adobe says, the Flash plugin still manages to crash a lot here, increases memory usage, and loads the CPU like crazy.

There are certainly a few corner cases left in which flash remains a better fit, but it's losing territory, fast. Good work Nissan.

I'm no Flash apologist, but there was recently a HN thread about CSS-only drop shadows. Many people on fairly modern laptops reported significant slowdowns when it came to scrolling the page, animations, etc. And that was just with drop shadows.

That Nissan example ran pretty clunkily on my laptop and another desktop I checked in the office.

(That said, gradient transparencies always seem to doom Flash pieces to slow-hell for me.)

True -- I didn't say flash is completely useless, just that it's losing territory. There is no structural reason why pure browser rendering should be slower, but indeed some tricks are still slow.

Anyway, the quip with rendering performance is only a matter of time. With every browser release, CSS and HTML rendering performance is increased, for example, by leveraging GPU acceleration.

Flash will be beaten soon, I'm sure. And at least that works for every platform, not just the ones on which Adobe decides it's important.

Platforms Adobe decides are important vs modern or whatever subset of non-MS browsers are capable of handling what you want to do...

I've had a bad day dealing with HTML email newsletters so I'm probably a bit more pessimistic about it than usual, but all sides of working on the web are a serious pain in the arse!

Making things simpler on the net is probably a good thing. I'm worried though about what will happen when the same bad programmers who make mem-leaking and performance consuming flash ads now will jump on the JavaScript train. Flash is in a shell: no messing up the global namespace, no interfering with the rest of the website code.

It has been said before: not Flash is the devil. It's people who program but who have no clue how it's done. They have destroyed the reputation of a not-too-bad platform.

(comment deleted)
Flash is a threat to the openness of the web. I can't reliably watch video, play games, or do anything else requiring Flash on my computer because I run Linux. Requiring you run an OS of Adobe's choosing is antithetical to the basic tenets of the web.
No it's only antithetical to the tenets of Linux users.

edit: Just saying, people who knowingly choose Linux don't expect to use Flash.

Some linux users. I love Linux but very little of the reason has to do with free software and has everything to do with Linux being the best way for me to do a number of tasks.

Note: I use Windows / OS X on the desktop.

I disagree. The web exists because browsers and servers communicate based on open standards. The HN server doesn't know or care what OS or browser I'm using. I could be sitting here typing in my GET requests manually if I was fast enough. Nobody cares. It's a protocol.

When the web relies on a technology where the "protocol" is "first install this proprietary plugin, if it's available for your setup, and if not, screw you," it is antithetical to the protocol-based approach.

Look at how much browsers have improved in the last few years, making new things possible on sites. This happened because anybody can write a browser that conforms to HTTP protocols, Javascript specifications, etc. Do you see the same kind of improvement in Flash players? No. Because there isn't competition.

The web is better off without Flash. Or anything else that can't have 100 competing implementations.

I run flash on ubuntu/chrome. Not that you have to, but the option is there.
(comment deleted)
How exactly are Flash and JavaScript different? I don't see the separate niches you envision these technologies occupying for the rest of their existence.

And how can you say JavaScript "will never" kill Flash? Aren't Apple and JavaScript already hurting Flash's market share? Doesn't every major browser release leave less and less that Flash alone can do? Aren't we looking at an example of a major, mainstream brand avoiding Flash for a site? What is going to change over the next few years to reverse these trends?

So can html5 continually ping a variable (say a time point) while a video is playing, including other variables back to a third party server (if the video content was embeded via a jsonp wisget etc.) ??
That's the point - it can do whatever you can do, all technical prerequisites are available (threads, background-requests, runtime-dynamic code etc). Once the proper tools are available providing diverse standard functions, it will spread and be easier for non-developers.
I don't want to weigh in on the flash/javascript debate, but couldn't you repeatedly change the src on a hidden image with get variables in the url?
Sure.

<video ontimeupdate="sendXHR(currentTime)" src="myvideo" controls></video>

...where "sendXHR()" is a five- to ten-line wrapper around XMLHttpRequest.

Indeed. So now browsers can finally start to do what Flash can do. This argument is only recently valid then.
(comment deleted)
Hixie answered your specific question, but I think you're missing a very important point: "Doesn't every major browser release leave less and less that Flash alone can do?" There are some things (not this one) that Flash can do that browsers aren't yet able to do. The present limitations dictate what you can do today, but they have little relevance to the long-term discussion.
The thought of Apple killing flash just about makes me sick. I really don't want to be forced into paying the 50-100 percent Apple premium for hardware just because they managed to "kill" a technology everyone decided to hate for no reason.
What are you talking about?
Derp. There are many applications that I cannot run on my computer because my computer isn't an apple. All of these could have been written in flash, and thus been cross-platform. Apple doesn't like flash, because they want people tied to their platform. (Obviously, I'm not talking about plain javascript here, though.)

One of these days, a "must have" killer app is going to come around--that could have been written in flash--that will force me to buy an Apple. At a ridiculous premium.

I don't think that's too hard to understand, predict, or dislike, given that people have been bitching about a similar strategy from a similar company for many years.

(comment deleted)
What are you talking about?
Maybe he's a sock puppet that needs to back-fill some believable human look and feel?
Are you really that confused? I'm not talking about javascript, browser-based applications here, but rather the various apps that run on Apple's proprietary hardware. I think I made that clear, and I thought it was pretty clear that Apple is trying very hard to kill flash and replace it with its own platform that depends upon its own hardware.

This seems really, really simple to understand, but let me know if it's still confusing.

You are confusing. This discussion is about Flash and JavaScript on the web, and you're talking about iOS Apps. One has nothing to do with the other. So, you decided to take the context of the discussion (Flash on the web) and change it (Flash apps), and then limit it to specific hardware (iOS devices, as you cannot run iOS apps on Macs).

On top of all of that, you are confusing how Apple is trying to kill Flash and replace it on the iOS devices (which is not entirely accurate).

So, while you thought you were clear, you weren't. You were confusing, incoherent, and frankly, even after I tried to give you the benefit of the doubt, I still find your arguments weak.

> This seems really, really simple to understand,

Context. You cannot join a conversation talking about something completely unrelated and expect to be understood.

You obviously understand what I'm talking about so how confusing could I honestly be? I'm pretty sure that everybody else understood me, even if they claimed otherwise, because we're not idiots here. It's a cheap tactic to pretend that I'm "incoherent" when I am certainly not.

The topic is flash. Everybody is saying that it should be replaced. Its replacements include 'X' and 'Y'. The fact that I reference 'Y' rather than 'X' is a completely natural context switch.

> You obviously understand what I'm talking about so how confusing could I honestly be?

It took reading through multiple comments that were out of context from the original discussion. Your original comments weren't clear.

> I'm pretty sure that everybody else understood me, even if they claimed otherwise, because we're not idiots here.

That's your sign. =)

We generally aren't idiots here. So if people are having a hard time understanding what you mean, assume the problem lies on your end and that you are failing at communicating. Again, context is important, especially in threaded conversations.

> It's a cheap tactic to pretend that I'm "incoherent" when I am certainly not.

But you were. You're believe that you were perfectly clear hinders your acceptance of that.

And please understand I say this with the hope of helping you see how you weren't clear. I mean, I took the time to read your comments, which meant I had to highlight them, even though they were voted down. I could easily have ignored them.

> The topic is flash.

Flash on the web and JavaScript, CSS and others replacing Flash. That's the topic. It's not just flash.

> Everybody is saying that it should be replaced.

Yes, everyone is saying Flash on the web should be replaced.

> Its replacements include 'X' and 'Y'. The fact that I reference 'Y' rather than 'X' is a completely natural context switch.

It's "replacement" on iOS devices is not part of the topic, for several reasons.

The technology being linked to is not limited to iOS devices. In fact, it has nothing to do with Apple. Apple, in truth, has little to do with the desire to remove Flash from the web. However, they did put a spotlight on it.

So, if the technology being linked to and discussed (JS, CSS, HTML, etc) has nothing to do with Apple, but rather open standards, then it's fair to assume when you talk about proprietary devices, you're referring to iOS devices and the apps there. This is confusing. Flash has never been on iOS, meaning it's not being replaced. Also, Flash isn't being replaced on the desktop either. Flash is the one trying to be the platform to develop desktop applications on.

But that's mostly irrelevant, because you said this:

"I really don't want to be forced into paying the 50-100 percent Apple premium for hardware just because they managed to "kill" a technology everyone decided to hate for no reason."

You won't be forced to pay Apple premium for hardware. In fact, costs will only go down, because what is replacing Flash is open standards. If Flash dies today, nothing changes in terms of your choice of computer to use.

In fact, by keeping Flash alive, you are forcing others to pay a premium. By replacing Flash with open standards, you essentially level the playing field.

Anyways, this has gone on for quite a bit.

What killer app is only available in Flash?
Only the Oxford English Dictionary app comes to mind, terrible (content aside, hence managing to retain “killer” status) and ugly as it is.

However, it in no way stands as example of either good design or the strengths of Flash.

grooveshark.
Grooveshark has an HTML5 version now, im pretty sure
Last time I checked - actually yesterday - the HTML5 is only used for the UI part. The audio is still done in Flash, maybe for the sake of DRM. I hate it, because I have my Flash plugin removed. I have to open Chrome just to use Grooveshark.
The _reason_ everyone decided to kill Flash, is because it, combined with pdf reading, is responsible for the majority of browser crashes.

The push here is to eliminate an unnecessary layer from the web stack. And I would point out that while apple has taken the steps to rid flash from their mobile platforms, they aren't leading the charge per say, they are just a very large player in this space.

Finally, just because flash dies, doesn't mean you'll have to buy an apple computer, last I check FF / IE / Opera and even gasp Safari run on non-apple platforms.

Safari sort of runs on windows. But that sort of is a stretch.
The _reason_ everyone decided to kill Flash, is because it, combined with pdf reading, is responsible for the majority of browser crashes.

That a company with such incompetent programming and slimy marketing can come to be so ubiquitous -- this indicates something is broken in the functioning of our software market.

The last time I visited my sister, I asked her why she had Adobe Reader installed on her new 15" Macbook -- AFAIK, she doesn't need it, and Preview, which comes pre-installed, is so much more responsive. (Yes, I was watching her wait for a PDF to come up.) She just pretended I didn't ask. I wonder what trick they pulled?

Once, a few years ago, I started snooping around my old work laptop. Some background process was soaking up large amounts of CPU, even when I had no applications up. I found it was some Visual Basic background process polling so it could instantly spring into action with some Adobe Suite thing. After I deinstalled Adobe and installed Foxit Reader, my machine was much snappier!

wait, what?

First, I don't own a single apple product. Thinking back, I don't think I ever have. When I worked at Yahoo they gave me a macbook, and I traded it with one of the Indians when he visited (Yahoo india got HP laptops which run linux, and were kinda okay copies of the thinkpad T series. My boss was okay with it, but Yahoo India made us trade back the next time the guy came to America.)

I'm a linux guy; I don't use flash. Security hazard, you know, if you compromise my workstation, it's damn hard for me to stop you from compromising the systems I admin.

but you know what? that website? works great on chrome in Linux.

Me, I don't like apple any more than you do. I like it less, most likely. I'm extremely unlikely to buy any of their hardware (if nothing else, the macbook keyboards and trackpads just feel /wrong/ somehow. I mean, it's just preference, but they just do not work for me. I've been using ThinkPads with the little eraser head pointers for well over half my life. Not switching now.)

But we can all cheer for the death of flash, that is, if you can do everything you can do in flash with something more open and less buggy.

I have flash-heavy sites, but for the same reason I hate javascript-heavy sites:

* Silly animations are a bad idea in Powerpoint, a bad idea in Word, and a bad idea in web documents. Word seems to be the only place where most people avoid them though.

* Running a program in a web page breaks statelessness.

* Support for disabled readers will get lost.

I understand that gopher - just text and a list of links - is a little too minimalist. But the other extreme (setting up a GUI just to show a document) is worse.

No YC-er would post such an inflammatory title like this. Hacker News has grown significantly in the past few years so the professional tone has inevitably diminished.
I tend to agree with this sentiment.

When I read a title like this, I pretty much assume that I'm not going to get any decent semi-objective information from the post.

It's flame-war fodder if you ask me.

"Flash is the devil in every situation"

Aside from technical issues, I think the above is valid philosophical argument per se due to closed nature of Flash.

From the very beginning, the Web evolved as an open system; no special tools are required for content creation and every browser has equipped with a "view source" feature.

Well, to a certain extent. There's also a viable position that Flash is simply the improper tool for every job by the nature of its construction. The fallacy is believing that 1) the tool which should replace Flash exists or 2) existing technologies should be improperly shoehorned to replace the areas where Flash should be replaced.
Btw, SVG isn't exactly JavaScript; its a part - just like ActionScript in Flash.
Actionscript is an ECMAScript dialect.
For the vast majority of things Flash is being used for, it's crap.

Namely, video, and site navigation.

For other things it could be used - but you could also use HTML5 like the site in the example to do anything you'd do in Flash, and not lock out iPad, iPhone, Android users. Plus, it's open.

Unless ... You want to record video or audio from a user. Or run more than 5 fps in IE7 (about 25% of our users). Everyone says flash is a piece of crap but you can see from stuff like boxcar2d.com that can run for days without crashing or leaking. It's about how it's coded. There are tons of poorly programmed flashes out there but that doesn't make Flash bad. Flash has been abused but it's not the devil. far from it.
PS the links for the video or any of the others around the car don't work.
If by 'we' you mean Nissan, well... great.

Counterexample: http://blog.phono.com/2011/02/17/how-to-build-a-voip-based-b... (browser-based VOIP, Flash under the hood)

Bizarrely, Chrome has support for speech input on text-based forms which translates microphone input to text on their servers, but it doesn't expose direct access to the audio. Argh!

Impressive, to be sure. But terms like "anything" and "ever" are hyperbolic. Flash isn't going anywhere for years.
Yes, unabashed, brazen hyperbole to be sure. Good headline though, I thought.

The thing that really struck me the most about this is that as little as 2 years ago there would have been absolutely no chance of deploying a huge brand interactive experience without Flash.

This is the first time I've seen a site that I thought was obviously Flash only to right-click and not see "Zoom in". I was pretty gobsmacked.

There is some flash on there (a video, under Specs > Features & Specs), but this is still a very impressive demonstration of how little it is actually required to achieve these kinds of effect.
Anyone know which agency did this?
(comment deleted)
Critical Mass, I believe.
(comment deleted)
(comment deleted)
it probably took the team 10x the time to do that this way instead of flash.

it will not work on 100% of the devices. but at least they got some clicks from us that they wouldn't otherway.

Continuing with this rationale: if done in flash, it would have take the team 10x the time to that instead of plain html. or 200x the time if done in a simpler html format, like a wikipedia article.

it would work on 100% of the devices... you would be able to use back/forward buttons, you would be able to translate on google translator and still see the site... wouldn't use all the cpu... it would load instantly for the user (well, it would be loading the rest bellow the fold while the user was reading/looking at the top part)... it would hopefully play well with screenreaders... i would still be able to use the left menu even after increasing font size... but you wouldn't have buttons that jump around.

bottom line is: if the product was good, those kind of sites would not be necessary.

the facts to support that are all the posts here in HN talking about A/B testing on landing pages. What gives more conversions, to good products? flashy shiny things, or to the point information about the advantages and simple call to action?

Big Brand Corps don't sell direct. They sell a brand. Selling a brand means doing this thing called "branding", which usually involves multimedia (video, sound and graphic effects).
Only because it's more efficient to sell a brand than it is to sell quality.
Actually... (heh)

The brand is the quality. Branding is just reminding you of the quality.

tell that to people that bought mercedes-benz made in mexico in the late 90's... or i could waste my day here writting example after example

anyway i doubt the comercials for MB then were pointing out the quality of the engine instead of being just empty branding marketing.

I think you're cleanly sidestepping the point I'm trying to make, which is that consumer's definitions of quality is quite arbitrary. Given two vehicles of equal finishing, engine power, engineering, consumers will pick the one with a stronger brand, the one that has more sex appeal. That is a quality.

    > it probably took the team 10x the time to do that this way instead of flash.
If so, that's only due to the maturity of the tools out there. Imagine creating this in Keynote and being able to export to HTML5.
I was a developer working at the studio that did this. Development took roughly the same amount of time in JS/HTML instead of flash.
That's awesome to know. And I really think you guys should do a writeup about the experience... :)

I bet folks here would love it too.

I'm currently involved in a RaphaelJS-based shiny website.

Our implementation is also time-competitive with flash efforts, despite the immaturity of the tools.

(comment deleted)
On this site, the browser "back" button doesn't always behave as expected. Ex: Go there. Click Back. Doesn't go back. Chrome 9.
We'll need flash until we have a GOOD IDE for those technologies...
This is the biggest factor in Flash going away. In our shop, we have a guys that would never be able to code in a text editor but can bang out great looking advertising at amazing speeds (which means cheap production costs) because of the Flash IDE.

If you believe that advertisers can live without animation, you have your head in the sand.

One should note that if you pull the site up in IE it still uses flash, which means we still need flash. Unless you're willing to say goodbye to 40% of your customers.
Graceful degradation / progressive enhancement anyone? (Btw, Raphaël supports IE6 too.)
Both of these principles are directly responsible for IE6 still being a supported browser.
Not really. The uses that make IE6 stick around don't even degrade gracefully on IE6. They only work there.
Someone wrote a flash -> Raphael library a while ago.

Or maybe it was just regular SVG manipulation, I can't find the exact project unfortunately.

i'm in ie and can't see flash...
It even pulls up Flash in Safari5 (w/ clicktoflash plugin).
Yes. But I nearly clicked on "clicktoflash" decal because it took a couple seconds to kick in.
Oh whatever. I can see it on me iPad. And iPhone. And Android. Who uses a fucking computer these days anyway? Programmers? ;-)
Well, you can see it but you can't really use it. It's brutally unresponsive and you can't scroll the text popups. Kind of a waste to dodge Flash and ignore the biggest reason to do so.
You can scroll the text on the iPad with the buttons. :(
Wait now, hold on a minute. I thought people have been saying that Flash on the Android was horribly slow.
It kinda creaks along on my iPad. For one thing, the site doesn't seem to be nearly as nice about making you wait for buffering video.
All I get on my nexus one with android 2.2 is a popup "need svg or vml" plus some non-content parts of the site
Depending on the genre of said website, it's unfortunately more likely to be > 60% - Shame, but true
our 2 biggest customer sites are still closer to the 80% IE mark. sorry to say, but some sectors are still hopelessly dependant on browser plugins :(
IE8 here at work. There's no Flash from what I can see. Am I missing something? Or are you referring to IE6/7?
Same here. Tried it on IE6 (stop hating me, my company forces it....I use Chrome otherwise)......doesn't seem to be using Flash.
Works great for me in Safari 5, and I've deleted the Flash plugin. Must be graceful degradation, yay for proper design!
I use ClickToFlash on a Mac and I saw a flash box for a second and then it disappeared and glorious HTML5 replaced it.

So it looks like it will use Flash if you have it.

did u try on ie9?
Don't mistake "visitors" for "customers".

I'm guessing that you mean 40% of visitors to sites (not the one for the Nissan Leaf) use IE. (Or more specifically IE 6.)

I think it's probably a pretty safe bet that folks who are visiting the Nissan Leaf site, and ESPECIALLY folks who would be early adopters and buy an all-electric car, are probably also not rolling around using IE6. (At least, I'd hope not.)

Conversely, someone being on an iPad or Android device is probably a pretty decent leading indicator that they're in the demographic that would consider buying a Nissan Leaf.

Really? Think crypto-communist ploy-sci professor using their ancient office machine. EV fans come in many stripes.
Yeah, I forgot how big that market is. My bad.

Seriously though, if you were building this site, I'd suggest you'd probably worry a lot more about how it looks on an iPad than a WinXP box running IE6.

The site I work on doesn't even cater to early-adopters the way the Nissan site should, and we have lots more iPad / iPhone / Android traffic than IE6 these days. (And I mean each individually, not in aggregate.)

Ambitious, but it runs very, very poorly on my mbp (chrome).
I used my back button and it ... worked. Wow.