4 ms·

The HTML5 Experiments of Hakim El Hattab

184 points by bigstorm 16y ago

GBKS 16y ago
I work with him (http://f-i.com 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-canvas/ http://www.kontain.com/fi/entries/94636/thoughts-on-html5-ca...
- elblanco 16y ago
  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.
mahmud 16y ago
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.
- groaner 16y ago
  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.
  - mahmud 16y ago
    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://www.ghazalpage.net/prose/notes/arabic_rhymes.html http://en.wikipedia.org/wiki/Qaafiyaa http://en.wikipedia.org/wiki/Qaafiyaa
    - ThomPete 16y ago
      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/ http://www.wechoosethemoon.org/ You really want to do complex audio tools in HTML5 like http://audiotool.com 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.
- naturalized 16y ago
  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).
  - subbu 16y ago
    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.
    - Groxx 16y ago
      >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.
      - subbu 16y ago
- elblanco 16y ago
  And then... "Changed to flash audio to reduce bandwidth consumption."
edanm 16y ago
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/ http://www.playauditorium.com/.
eekfuh 16y ago
Seems to be more like the Canvas experiments of Hakim.
kzsystems 16y ago
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.
ck2 16y ago
Wow, the monster from Fullmetal, that was freaky! (hold down the mouse button and drag or click across the page)
bhellman1 16y ago
Incredible work. Absolutely beautiful. You additionally rock for having such clean JS allowing novice coders like myself to learn from your work. Thanks!
Kilimanjaro 16y ago
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?
- GBKS 16y ago
  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 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.
thomasfl 16y ago
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.
Ocho-Bits 16y ago
I really want to learn do to stuff like this. Could you guys give me some pointers on where to start?
- peregrine 16y ago
  Right click view source. Reading code and trying to understand it is key to learning.

184 points by bigstorm 16y ago

GBKS 16y ago

I work with him (http://f-i.com 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-canvas/ http://www.kontain.com/fi/entries/94636/thoughts-on-html5-ca...

elblanco 16y ago
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.

mahmud 16y ago

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.

groaner 16y ago
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.
- mahmud 16y ago
  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://www.ghazalpage.net/prose/notes/arabic_rhymes.html http://en.wikipedia.org/wiki/Qaafiyaa http://en.wikipedia.org/wiki/Qaafiyaa
  - ThomPete 16y ago
    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/ http://www.wechoosethemoon.org/ You really want to do complex audio tools in HTML5 like http://audiotool.com 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.
naturalized 16y ago
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).
- subbu 16y ago
  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.
  - Groxx 16y ago
    >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.
    - subbu 16y ago
elblanco 16y ago
And then... "Changed to flash audio to reduce bandwidth consumption."

edanm 16y ago

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/ http://www.playauditorium.com/.

eekfuh 16y ago

Seems to be more like the Canvas experiments of Hakim.

kzsystems 16y ago

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.

ck2 16y ago

Wow, the monster from Fullmetal, that was freaky! (hold down the mouse button and drag or click across the page)

bhellman1 16y ago

Incredible work. Absolutely beautiful. You additionally rock for having such clean JS allowing novice coders like myself to learn from your work. Thanks!

Kilimanjaro 16y ago

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?

GBKS 16y ago
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 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.

thomasfl 16y ago

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.

Ocho-Bits 16y ago

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

peregrine 16y ago
Right click view source. Reading code and trying to understand it is key to learning.