The HTML5 Experiments of Hakim El Hattab | Hacker News Reader

The HTML5 Experiments of Hakim El Hattab

hakim.se

184 pointsbigstorm29 comments

I work with him (http://f-i.com) and he is an incredibly talented interactive developer. His work, and these demos show an extreme attention to detail and an incredibly nice, human touch to interaction and motion.

Alright, I'll stop. Just make sure to check out the demos.

Plus, here's a blog entry he wrote on HTML5 and his experiences - http://www.kontain.com/fi/entries/94636/thoughts-on-html5-ca...

These are real interesting and nice interaction models. Definitely some of the better interactive work I've seen going on in canvas land.

These types of experiments definitely push the boundary of what we can do today with HTML5. And as deficiencies we find at that boundary are exposed (performance, interaction issues, audio, etc.) the spec will only get better.

It never really sank in with me until this: flash is dead.

Those were gorgeous. The mark of good software is that it inspires you think of uses for its underlying technology. As of now, I actually take "HTML5" seriously, thanks to this.

We should see more robust libraries, and even "authoring tools" in the near future.

From the link:

Please don't use this as HTML5 vs Flash firewood. I do it because it's fun. Not because it's HTML5.

I hate Flash just as much as the rest of you, and I'm thoroughly impressed with these HTML5 demos, but I think it's premature to pronounce Flash dead. Just another nail in the coffin, I'd say.

I respect his opinions, but this is not about him, rather HTML5.

His demos provoked uses cases in my head, stuff I would usually consider flash for. I am by no means anti-flash; I know the SWF and FLV specs like the back of my hand. I have annotated wireshark logs of RTP that are almost faithful to the "spec". And most importantly, I am an Adobe fan, and sided with them against Apple.

But this is one of those "top idea in your head" things. Now, after seeing those demos, my mental model of "what flash can do" has been diminished. I will still use flash for microphone capture, sockets, and persistent cookies. But I know now that I don't need flash for audio, video, and interactive eye candy.

Flash has always been a last resort, and seeing HTML5, in this light, is like discovering Qafiya in English:

http://www.ghazalpage.net/prose/notes/arabic_rhymes.html

http://en.wikipedia.org/wiki/Qaafiyaa

But I know now that I don't need flash for audio, video, and interactive eye candy.

I don't know what kind of work you do with video and audio, but HTML5 is so far away from being anything close to powerful when it comes to the audio and video area.

You wan't to do an interactive video in HTML5 like http://www.wechoosethemoon.org/

You really want to do complex audio tools in HTML5 like http://audiotool.com

HTML5 is still inferior to Flash.

What is great is that there is experiments being done.

But those experiments are interesting because they are done in HTML5 not because they are somehow showing that it's better than flash.

I am pretty sure most of the projects that Fantasy Interactive do can't be done in HTML5.

Actionscript 3.0 is much more sophisticated than Javascript/HTML5. The capabilities of HTML5 are equivalent to Actionscript1.0/Flash Player 6, circa 2004 (these demos were entirely possible even in Flash Player 5 perhaps). Plus, Flash is reasonably cross-platform (except for iPhone/iPad of course). On another note, making embeddable widgets (slideshows, videos with more than just viewing functionality, like Youtube) is very hard in Javascript, since any complex embedded Javascript would likely clash with other scripts on the page (we have experienced this, making a complex Javascript widget, that ended up clashing with Adsense ads of our customers, it was a nightmare to debug that).

Incidentally, I brought up my task manager while viewing these demos, the CPU utilization jumped from 5% to 97% (Core 2 Duo, 1.66 GHz).

Wait for an year or two. IMHO, HTML5 is going to evolve much faster than ActionScript. When I saw these kind of cool animations in Flash years ago, I wanted to play around with it but couldn't see the source. It was all hidden behind the swf/fla files making it harder to see how things were done. If I wanted to fiddle with it I needed Flash software. Not so with HTML5. All you need is a text editor and a browser. I am sure whoever this link would have tried to look at the source.

> making embeddable widgets is very hard in Javascript, since any complex embedded Javascript would likely clash with other scripts on the page

You can use local variables the way jQuery uses it. Something like (function($))(jQuery). If you declare all your variables and functions within this scope its easy to avoid clashes with other scripts.

>When I saw these kind of cool animations in Flash years ago, I wanted to play around with it but couldn't see the source.

While technically all JS is open-source / source-visible, just wait: where there's a market, there will be more and more sophisticated obfuscation techniques. Especially for a language like JS, where it can easily generate and modify its own code.

While I do not care for obfuscation for its IP protection function, having the source visible and accessible is a problem for games: how can we know that top scores are valid and a variable has not been modified? Basically, all JS games are cheatable. John Resig talked about this http://bit.ly/bO3bcf

The reverse is also true. For every obfuscation tool there will be an unobfuscation tool. They may not give back 100% of the original source but they can go close.

There are SWF decompilers too.

http://www.google.ca/search?q=swf+decompiler

If HTML5 authoring tools start appearing we'll have to make sure they use open formats and runtimes.

"HTML5 is going to evolve much faster than ActionScript."

As written, this statement is wrong.

Adroit developers are picking up HTML5's JS API's with more enthusiasm than they have ActionScript, and they'll push those API's to their limits, as they have done with the DOM API's. But the technology itself--the underlying standards--must necessarily evolve at a slower pace than a proprietary language like ActionScript. Browser vendors haven't quite caught up with HTML5's growth yet; once the the spec's final, W3C won't be moving the goalpost out any further for a long time.

> once the the spec's final, W3C won't be moving the goalpost out any further for a long time.

You're wrong, html5 is supposed to be the last final big version, it is agreed that html5 will continue to be incremently improved from now on (it was posted recently on HN).

Oi! I didn't say HTML5 is "the last final big version" of HTML, I said we won't see it expanded for a long time. Maybe I'll be proven wrong about that, but it still takes demonstrably longer for the W3C to reach an agreement about new specs than it does for Adobe to release updates to Flash. Flash Player 5 was the most recent version when XHTML 1.0 came out!

That said, I would like to read that article/thread. Do you have a link, or remember its title? I can't seem to hit upon the right combination of Google keywords. ;) Thanks.

Why wait? Everything in these demos was possible with IE5 and its VML implementation. Canvas has been in FireFox from the start.

You don't need HTML5 to do vector graphics in a browser.

Canvas is a relatively new thing, originally built by Apple before they standardised it. Maybe you meant SVG? Even that was Firefox 1.5 though as far as I recall.

> Plus, Flash is reasonably cross-platform (except for iPhone/iPad of course)

Except that it sucks rocks on everything besides x86 and Windows. OS X? Linux? amd64? ARM? There's a reason it's not on iOS devices. Adobe has consistently failed to make a compelling offering for anything except 32-bit Windows.

(I know it runs on amd64 machines, but it's not 64-bit: http://kb2.adobe.com/cps/000/6b3af6c9.html)

I'll take a truly portable Flash 5 equivalent over Flash 9 or 10 where everything outside Windows/x86 is a second class citizen.

CPU usage is still pretty high with this stuff, but there are plans to accelerate it and improve performance. What's the plan for Flash? Who knows because it's proprietary^ and there's a single entity that can fix things. And HTML5 performance isn't much worse than Flash on OS X or Linux. Windows is completely irrelevant to a lot of us.

^ Now someone's going to point to the spec and mumble something about Flash being an open standard. Show me a single open and viable alternative implementation, then we'll talk about it being open. Till then we're Adobe's pawns.

I think I know a thing or two about Flash.

http://mahmud.arablug.org/

It's a powerful platform, and I will accept the author's desire to avoid using his demos in "HTML5 vs Flash" punditry; but it's apparent where HTML5 is headed, and I can't help but notice its competence, in domains where flash is usually considered the only option.

And then...

"Changed to flash audio to reduce bandwidth consumption."

This is beautiful.

It reminded me a lot of an online puzzle game called Auditorium. If you liked these demos, and have even the slightest interest in puzzle games, I really recommend checking it out (free, pretty long demo): http://www.playauditorium.com/.

Does he need a resume when applying for a job? What if you got this from him in your pile of resumes:

  Degree: None
  Experience: None
  Skills: Javascript ninja & rockstar, watch this [url]

Would you hire him?

Short answer: Yes, after talking to him in person and making sure he's a social fit, too.

If it's of interest, we hired him from Hyperisland (http://www.hyperisland.se), a school in Sweden focused on interactive design and development. The school is top notch and most students end up in interactive agencies.

And if it's of further interest, our best designers and the CEO never attended college. They simple have been passionate about design from a young age and had enough drive to pursue their craft to master it. For the interactive agency industry, it really just matters what you can produce, so a spectacular portfolio without degrees to back it up can land you a job.

Seems to be more like the Canvas experiments of Hakim.

This reminds me of java applet and flash demos from the nineties. Except this time it's done without any browser plugin, which is awesome.

I really want to learn do to stuff like this. Could you guys give me some pointers on where to start?

Right click view source. Reading code and trying to understand it is key to learning.

Wow, the monster from Fullmetal, that was freaky!

(hold down the mouse button and drag or click across the page)

seriously amazing!

As for flash, if it can do or does anything as gorgeous I haven't yet seen it.

Thanks to Hakim and bigstorm.

Reply on news.ycombinator.com