Christian Heilmann

Posts Tagged ‘supervanjs’

Reclaim HTML5 at Super VanJS in Vancouver, Canada

Sunday, January 15th, 2012

I am in Vancouver, Canada right now and yesterday night the Super VanJS meetup attracted around 160 people to come and see Rebecca Murphy, Robert Nyman, Jim Andrews, Preet Jassi and little me talk about all things JavaScript.

My own talk was the last of the day and was an ad-libbed introduction to a few of the things I coded lately wrapped in a request to reclaim HTML5 as JavaScript developers. The audio of the talk is available on archive.org:

The links to the demos I talked about are available here and here is a gist of what was covered:

I started by explaining my confusion about Supervan JS as Supervan is a terrible movie from the 70s with very interesting cover and back sleeve art and even more awesome posters.

I then continued to explain my unhappiness about the decline of HTML5. With this I meant that there are lots of marketing demos of HTML5 using a lot of technologies that are actually not HTML5 or use it in a very Flash-intro-ish way. I showed just how annoying it is to play Angry Birds online and how the recent Cut the Rope port looks much smoother. I also pointed out that none of them really use the web to their advantage by for example have feedback mechanisms or allow for level editing.

In essence I wanted the audience to think about bringing HTML5 into the “boring” world of day to day deliveries instead of just games and showcase sites. For this, I showed a few code examples and explained how they can benefit from HTML5 features.

I showed how to move an element to the current mouse position and how you can make this faster by using CSS translate instead of left and top using translateZ(0) to trigger hardware acceleration even when you don’t go 3D. I then showed that you can move things smoothly by adding CSS3 transitions instead of writing a JavaScript animation.

I continued introducing the 3D CSS maker, a tool to play with CSS 3D translation and animation that generates code for you.

The blue beanie maker was next showing how you can use drag and drop to put an image into the browser and manipulate it with Canvas.

The image cropping with canvas demo shows how you can enhance the functionality of browsers without having to write and install extensions. In it you can get a bookmarklet to crop any image on the web in the browser by double-clicking (in Webkit and Opera) or with a context menu (in Firefox).

I then continued to show a demo of less obtrusive video overlays showing how you can add hints for overlays on videos by reading data- attributes in the HTML and reading the current time of the video.

The last demo was a simple game with a an HTML twist that showed using canvas for game animation, touch, orientation and keyboard events to control a game paddle and how to read the necessary game data from HTML and thus making it easy to rebrand and change the game.

I ended with a plea to try some of these things out and play with all the cool APIs and hooks browsers provide us with these days instead of relying on frameworks and libraries for everything or build for one single environment. HTML5 is there for developers, if we allow only marketing people to play with it we do a disservice to ourselves.

I will follow up this with in-depth posts on hacks.mozilla.org and we also shot videos of the talks which will (quality permitting as there were some issues) be released soon.

All in all I had a great time, got lots of good questions and enjoyed the event a lot. Seeing that Vancouver is only a 2 hour flight from the valley there is a big chance I will be back soon.