Things that made me happy this morning:

• Morning Star is a monophonic bassline synthesizer controlled by a step sequencer, designed to run on Web browsers and made entirely with HTML5 and Javascript
• Girls in a Tech World is a promotional video about women in tech – interviews with engineers
• Vanilla JavaScript FTW is a side-by-side solution comparison for common jQuery tasks
• Remote Tilt is an awesome device motion testing tool by Remy Sharp
• 5 year old kid gives feedback on brand logos – cheetah cheetah cheetah!
• Pixie Engine is a game engine in HTML5 to build your own games – press space to deploy kitten
• CSS3 for the real world – amazing examples like Word Art and Blink
• At Twitter, The Future is You! – amazing recruitment video that is a spoof of hiring videos
• T-Rex trying – the adventures of a T-Rex trying (and mostly failing) at doing things
• Let’s make some great art – cool book for kids

TD;TR: Converting games to HTML5 is hurting the cause. We need more games written in web technologies.

OK, I might be a bit late to the party but the latest “web version” of Angry Birds, “subtly” advertising this time not itself but Wonderful Pistachios was the talk of the day on some of my mailing lists.

The main thing was that it requires Chrome to run. This is nothing new, but I really enjoyed the ingenious way of testing for Chrome in the first place:

if (Modernizr.testProp('-webkit-box-shadow')) {

So the CSS box shadow (which will soon be deprecated with the vendor prefix in Chrome) is the main identifier. Not bad. So let’s hack around the detection with:

var l = document.createElement('link');l.rel = 'stylesheet';
l.href = 'http://wac.5DC0.edgecastcdn.net/805DC0/site/static/css/style.css';
document.getElementsByTagName('head')[0].appendChild(l);
GetCrackin.init();

Which leads us to a JSP file that detects on the server side and writes out a lot of inline webkit only code OK, never mind.

I am less annoyed that this is Chrome only. It was never claimed that this game runs everywhere (other than the Angry Birds released on Google IO). I am more annoyed about the bad performance the game has in Chrome and Safari on this Macbook Air. And I know the reason for this: conversion instead of dedicated development.

A look back in time – games on Commodore 64

As I have mentioned before, I used to work on some games on Commodore 64. In its heyday there was no way to have a game without writing it by hand – in assembly language and knowing what all the chips do. Perusing the memory map and the ROM allocations was part of the game of writing one.

When computers got more ubiquitous and better in terms of sound and graphics a lot of companies started building games on the other machines first – Amiga mostly. And to make extra money and sell even more copies, they also made C64 versions as conversions afterwards. These were most of the time shoddy at best and weren’t tested much. The C64 was the machine that is not where the money was made – the new hardware was the one to support.

The thing that got lost – and later on even more so – was the tinkering with the hardware and finding tricks to work around limitations. Out of the box the C64 had 8 sprites and a resolution of 160×200 pixels in 16 colours or 320×200 in 2 colours per 8×8 pixels. Using interrupts (executing code whilst the screen was painted by the TV or monitor) people came up with multiplexers that allowed for hundreds of sprites. With overlaying techniques we produced 256 colors at a interlaced 640 pixel resolution and so on.

A few of those tricks made it into the conversion tools from the “higher” computers to C64 code, but most were deemed too costly and time consuming and didn’t make sense to do any longer.

HTML5 gaming without the web stack?

This is happening now with “HTML5” games, too. Angry Birds is done with Google Web Toolkit, converted from Java I presume. It is made to work quickly and not show off what a web game can do, but instead how easy it can be to convert a game from Java to the “web”. And when that fails to bring the results it should, then we limit the web to one browser. And even fail at that as Angry Birds – in this case created to promote Chrome as a HTML5/games platform – doesn’t work on my Chrome book – the hardware dedicated to the browser.

Seeing this makes me frustrated, and it causes a lot of sniggering up to outright laughter from the Flash community. And they have all the right to. Flash games perform well, and showed that they can be easily changed and rebranded and extended when you build them the right way.

The HTML5 game engine vanishing act

Of course there are great minds on the case already and a lot of people build great demos and JavaScript frameworks to build HTML5 games in the technology rather than converting to it. The interesting thing about that is that every games engine released open source very quickly gets bought and un-opensourced and then vanishes from sight. The optimist in me thinks that this means there is great stuff afoot. The cynic in me sees the talent behind and the engines rotting away in a corporate environment as they were seen as a threat instead of an opportunity.

What HTML5 gaming needs to impress

I would love to see more real web games. Built in open technologies, with source available (or not, this is a nice to have) and really using the web. A web version of Angry Birds to me wouldn’t have a very long loader and ask me to sign in to Google to use it. It would be snappy and load the levels on demand, storing the ones I played and the next one locally in my browser while I am playing the current one. It would also allow me to build my own levels and share them on Twitter to see if I can build awesome stuff in the game that other people enjoy. All of this would be a total pain to make work on a mobile and a 3G connection, but is very much fine in a browser on a laptop with a good connection.

In other words, HTML5 games should be fit for the environment and use it to its strengths.

What about WebGL?

WebGL is an awesome opportunity for game developers to get into web gaming without needing to learn a new skillset. It is pretty obvious that an openGL developer could take it up much easier than a web developer would. Right now, WebGL is great for demos, but we have the issue of hardware access. If the biggest sound of the game is the fan of your processor and video card then this diminishes the experience. I for one never started gaming on PC as every new game coming out told me I need to buy new hardware in order to play it. This is not what I could afford. And this is not what we should force onto people on the web. A web app saying I need a certain browser or that my video card is not good enough to use it is not much better than the old “best viewed in IE4 with 800×600 pixels”.

We should think less World Of Warcraft and more Doodle Jump when it comes to HTML5 gaming.

Maybe I am a dreamer, and this is so not how the games market works. That is fine, though. A new market could emerge that takes the best of offline gaming and online experiences. But, we need to make that happen.

Having pestered someone working on a large healthcare web site in the UK to release some of their browser statistics I got a tweet today that they released an infographic (available here as a PDF). The site has had over 2 million visitors in 2011 and here is what they looked for:

Most went to the homepage and then to services. A big part was search and services offered.

In terms of devices used to read the site the web is not really as mobile as we make it out to be:

Windows rules supreme, followed by Mac, iOS, Android and Blackberry. I was surprised at the low number of Blackberry actually. It would also be interesting to see just how many services like meeting times are done via text message.

The browser share was the real blow here:

Internet Explorer accounts for 55% of the numbers, with Safari at 16% and Firefox at 14% following after quite a gap. Chrome clocks in at 11% and others with 4%.

When it comes to the version the IEs used, the numbers are interesting:

With 47% IE8 is the most used browser, followed by IE7 with 24% and IE6 with 19%. IE9 only accounts for 10%.

Of course these are not stats of a common web site, but it shows a few things to me:

• Web sites that people really need to go to would be wise not to block out older browsers
• The large numbers of IE8 and Safari shows us that browsers that come with the OS are the weapon of choice
• IE8 will be a problem to face for a few years to come

I love that the St. George’s trust made these insights available, and I’d love to see much more of these being released. Browser data from counter companies is to me just a very small percentage of the market of sites that provide services to people out there.

And in the “pointless but fun” section and as my preparation for the trip to Japan tomorrow for Mozilla Vision 2012 I thought it would be fun to try to create a Domo-Kun in CSS from two lists of info about it.

I am sure real CSS gods like Lea Verou and Chris Coyier could do it in one element. :)

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.