After a little head scratching to work out what was failing, I worked out it was because I was using HTML5 elements such as ‘article’, ‘header’ and ‘footer’. There was no problem displaying them on the page, as I’d used Remy Sharps excellent HTML5 Shiv script. It only failed when trying to pull in these ‘new’ elements via Ajax.

Note: Before you read on you’ll be happy to hear that this issue no longer occurs in jQuery 1.7.0. Horray!

If you can’t upgrade, for whatever reason, I hashed together a little work-around for browsers IE8 and below, so read on. I admit the work around isn’t pretty, but it works. I tried for a few hours to get IE8- to recognise the ‘new’ elements after an Ajax request, but to no avail. Eventually I had to wrap the HTML5 tags in a div using conditionals:

The div is added for browsers IE8 and below, you can then use it as a hook to pull in the elements inside the div. I was hoping that wrapping the HTML5 elements in a standard div would be the end of it, I’m afraid not. The .load() method still didn’t work, IE just ignored the elements it didn’t recognise. I used jQuerys much more customisable .ajax() method to fix the issue in IE6, 7 and 8:

This method works in all browsers I’ve tested in as I’ve added a fall back (or should that be forward?) for newer browsers. The solution isn’t ideal (I really hate the conditional comments), but older versions of IE aren’t going away any time soon, and it works. Maybe there’s a more obvious solution that I missed? Leave a comment if there is, I’d love to know!

You can see a working example here. The page I’m loading from is here and the JavaScript in full here.

The competition was split into two sections; 1k and freestyle. I find both interesting but as I’ve mentioned before in previous blog posts I’m always amazed at what can be done with 1k of code.

The video above is of a demo created by Silexars that came in second place. A live demo can be viewed here. All created with less than 1k of code! WebGL really is starting to come of age. As with any of these demo’s it’s so easy to copy / paste, modify and learn from them. View source is a wonderful tool.

Another demo that caught my eye was by p01 (who I’ve blogged about before). This time he created Quaternion Julia Fractal in only 550 bytes of JavaScript and GLSL! It came in third place.

All this possible in less that 1k of code.

From the freestyle section the Particles.js by basecode has completely killed my productivity today!

Nice work guys and gals! If you have a spare few minutes (hours) check out the rest of the DemoJS results, you won’t be disappointed.

Edit a post directly in the page, the future is here.

Now I’d love to show you a picture of it working in my blog template, but that would be too easy wouldn’t it. :) Unfortunately the plug-in doesn’t work with my custom theme, I’m yet to figure out the reason why. Boo! I know it isn’t a plug-in issue as it works with the default WordPress theme. This could be an issue for others wanting to use the plug-in, so as soon as I figure out why I’ll post an update.

One issue I did notice was Aloha likes to use its own version of jQuery; manually including it in your theme will cause Aloha to throw an error. A quick workaround is to wrap a WordPress conditional tag around the jQuery script element like so:

Since you need to be logged in for Aloha to be initialised this will fix the error and allow you to use the latest version of jQuery in your theme.

As soon as I fix Front-End Editor for my current theme I’m sure it will be one of my favourite plug-ins. Last but not least a big thank you to the Aloha Editor team, I’m looking forward to seeing how the project progresses.

Pure mathematical worlds generated using Fractal Lab

Fractal Lab, as the name suggests, is a fractal rendering tool using OpenGL Shading Language (GLSL) by a very talented programmer called Tom Beddard. Now I’m not going to lie to you, the mathematics behind all this goes way over my head! OpenGL on the other hand is something I’ve read about with increasing frequency recently due to the WebGL explosion happening on the ‘net at the moment. Big thanks to all the developers of Firefox, Chrome (Webkit) and Opera for that! Internet Explorer 9 on the other hand isn’t planning on supporting it. Hopefully that will change in the future.

Fractal Lab allows you to render out 2D & 3D fractals directly to your browser and navigate through them in real time! Be warned though, this will push your browser and graphics card really hard. It mentions this on the site; it’s possible to lock-up your GPU with certain GLSL fractal shaders, so be careful (my poor laptops on-board graphics card did exactly that, so he’s not lying) :)

There’s hours of fun and experimentation to be had with this superb example or WebGL. Thank you to Tom for developing it.

It really is that simple! You may notice the “x-webkit-speech” attribute so will have guessed it currently only works in Webkit; and as far as I’m aware only in very recent versions of Google Chrome (note: “The Input Speech API will now be available by default on Chrome’s dev-channel”). The Speech API seems very new and is still a draft, so it will be a while before it’s fully adopted by other browser vendors.

A quick demonstration of the Speech API in action.

To demonstrate the speech input I’ve put together a very simple festive demo that queries the Flickr API looking for images related to a value entered. So if you have a microphone and the dev channel of Chrome, why not give it a try. Chrome records the input of the microphone before sending it off to an external server to be processed, where a value is then sent back to the browser. At first I thought it was all processed inside the browser but I guess that’s a little to much to expect! It isn’t 100% accurate and the demo accepts Googles first guess so you may get a few strange results. The server returns multiple guesses which a user can select from, but this hasn’t been added (to my demo at least).

Since the API is very new it took a little trial and error to work out how to detect if the Speech API was available in the browser; but with a little help from Paul Irish I managed to crack it:

This function will return true if the API is available. It’s worth noting that since it’s very new this function is likely to break in the future as the properties always seem to be changing. It works at the moment, so get thinking about what this brilliant new API can be used for! It’s a big plus for accessibility if used correctly and I can also see some cool applications in web gaming too. View the demo.

Mr Doob and a little kitten sitting in a 3D tree.

The File API allows a user to upload a file (an image in this experiment) to a web application simply by dragging it onto a designated “droparea”. Once dropped, you can manipulate the data any way you like. The API is able to handle multiple files natively, so just select all the files and drop them onto the area. No need for Flash uploaders or multiple browse boxes. Of course not all browsers support it (IE) and there are a few inconsistencies in the specification; but they will work themselves out over time.

So what does the experiment actually do? Well it allows a user to drag an image onto their browser window which is then “uploaded”; the data is then passed to a canvas element and then this data is passed to Three.js to be plotted in 3D space. The X and Z-axis is plotted in the usual manner to represent the default 2D image using particles; the fun bit comes when you add the Y-axis. This is calculated by taking an average of the RGB values (greyscale) and plotting it accordingly. When using an image of a human face it’s amazing how accurate the 3D plot looks.

Due to the amount of data involved it is recommended that you use small thumbnail images when you try the demo, as larger images equal a larger number of particles. This is an initial version so I’m going to work on a way of dealing with larger images. This will probably mean ignoring a certain number of pixels when looping through the image data. Looking forward, since it can be done with a static image I see no reason why it can’t be done with a video, but that’s a project for another day!

Update: I’ve updated the demo slightly; as Mr.doob pointed out people may have tried to drag directly onto the render area which didn’t work. So now it does :)

Christian Heilmann getting ready for his talk at #gameon10.

There were an interesting mix of speakers, from the big name companies like Google and Mozilla, down to start-ups and independents:

• Christian Heilmann: Very interesting talk on why developers should be developing using new open web technologies. He had some very interesting ideas for Angry Birds too (see below).
• Ernesto Jimenez: A hands on talk on the “Do’s and Don’ts when developing with the HTML5 canvas element. Mainly about things he’d learnt the hard way.
• Rob Hawkes: Rawkets is a simple shooter game Rob developed for a University project that’s really taken off. It uses various open technologies including node.js and Web Sockets on the server side.
• Rik Lomas: Is the line between TV and computer entertainment bluring? With the help of Picklive it certainly is. A fantasy football game played in real time, built on Javascript, jQuery, Strophe and XMPP.
• Paul Truong: Paul’s talk didn’t quite go to plan with a couple of teething problems with the demonstrations, but it was still very informative. I had no idea MacBook Pro’s had a built in accelerometer, and using it for gaming is a stroke of genius (although I can’t see many people tipping their MacBook Pro, it’s a tad heavy for a controller). With the iPad you’re on to a winner.

Paul Truong talking about Processing.js.

I particularly liked Christian Heilmann’s talk as he had some great ideas for Angry Birds if it was built on open web technology. You could very easily allow people to build their own levels, add multi-player support, add a frustration rating for levels and user comments. Adding the social level building aspect to the game takes a bulk of the development time off the game developers; this is exactly what Media Molecule have done with Little Big Planet and they now have 1 million+ levels! As an extra you could setup level building competitions and bring out a version of the Angry Birds based purely on the best custom built levels. Everyone’s a winner!

The evening was great fun and all the speakers were brilliant. My only criticism would be that the talks seemed very rushed. Making the talks fifteen minutes instead of ten would have allowed for a slightly slower pace with a few more demos. Big thank you to Mozilla Labs, Six to Start and all the speakers.

Mr Doob has created a superb JavaScript 3D Engine in three.js. Screenshots from my 'Bowl' demo.

I’ve been watching the development of three.js by Mr Doob for a couple of months and have been desperate to experiment with it. With Firefox 4 well into the beta stage I decided to bite the bullet and do a little Audio Data visualisation in 3D!

I’ve dabbled with audio visualisation and the HTML5 Audio Data API in the past, so I’m pleased I’ve had a chance to use it again and see what’s new. Note: My previous audio visualisations using canvas no longer work due to specification changes in the API. A pitfall of using an API that’s still in the draft stages I guess.

I’ve put together 5 simple demo’s all based around the same theme showing some of the options available in three.js. My favourite is “bowl”, pretty colours galore!

• Circle: Simple circle, zoom in / out using the mouse wheel.
• Cubes: Same as circle only using the cube primitive.
• Cylinder: Using the cylinder primitive with a floating camera.
• Sinewave: Rotated sinewave (looks a little like a chandelier).
• Bowl: A combination of the above demos to create an interesting 3D bowl effect.

Please note these demos will only work in Firefox 4. The Audio Data API is still a draft specification and Mozilla is the only browser vendor to have added it to date. I’m looking forward to it being added to Chrome (Webkit), with its superb V8 JavaScript engine. The demo’s really are just the tip of the iceberg for both three.js and the Audio Data API. It’s certainly an area of the HTML5 specification to keep your eye on.

The music track used in the visualisation is called “Sad Robot” by a group called “Pornophonique”. Very catchy tune that you can download from Jamendo.

Update: It looks like enabling the Google Page Speed Apache module seems to have broken the demos. I’ve disabled it now so it should hopefully fix it (fingers crossed!).

What Aloha actually does is make the content editable right on the page; no need to jump into the CMS, find the page, make the changes then preview the result. Just click on the text you wish to edit and type away. Done! It’s hard to believe it actually works until you try it. Why not give it a go on their demo page. It incorporates a few HTML5 technologies which could cause issues with older IE versions, but the demo page seems to work (with a few quirks).

Quickly and easily edit the demo webpage.

The core has been written to be very small and streamlined, with additional functionality being added by the way of user contributed plug-ins. There’s already an extensive API for developers to play with so I’m sure many of the missing features will be plugged very soon.

There are alternatives about such as TinyMCE and CKEditor, but they’re integrated directly into a CMS’ administration pages rather than as an inline editor like Aloha. Now before you get too excited there are a few cons:

• It isn’t as simple as just dropping the scripts into a page, it needs to be integrated into a backend system for the changes to be saved.
• Still in early development so could be quite buggy.
• Doesn’t work with Opera Browser at the moment but this is being worked on.
• Some features aren’t available yet, like image / media insertion. But I’m sure these will be developed as it matures.

So there are still a few issues to iron out but it all looks very promising! There were even murmurs on Twitter today about a WordPress plug-in and a Drupal v7 module (not 6 though I presume) in development. So it won’t be long before we’ll be able to try it out on a live site; hopefully it’s also simple enough for clients to use too!

HTML5 has added a host of new tags which have much more semantic meaning. So instead of using ‘divs’ to section off areas of your page layout, you can now use:

It’s certainly a welcome addition to the modern web. My favourite part of HTML5 has to be the doctype (other than the canvas element):

Look how simple it is! No more copy / paste from a previous project for this doctype.

My main concern when converting the theme to HTML5 was how it would work in IE; as IE8 supports parts of HTML5 but IE6 and IE7 not at all. When IE comes across a tag it doesn’t recognise it just ignores it. Since the tags aren’t recognised you won’t be able to style your lovely new HTML5 template in IE6 & IE7. Lucky you can patch this missing functionality using JavaScript. Remy Sharp has created a script called html5shim, that adds the missing tags to IE. Just add the following code to your header and you will now be able to style your HTML5 tags:

The script must be in the header and must fire before the DOM is created. The script simply creates all the new HTML5 elements using the document method ‘createElement’, you don’t even need to attach the created elements to the DOM! Now IE will recognise the tags and you can get on with your page styling. Yay!

Those who use WordPress 3.0 may have noticed that the default Kubric theme is no more and it’s been replaced with a new theme called twenty ten. The theme uses the HTML5 doctype but it doesn’t use any of the new tags. I guess because of the IE issues. Maybe this will be changed in future releases.

The Nooshu theme is still a work in progress, and I’ll modify areas as I learn more about the new HTML5 features. Here are a selection of links that I found incredibly useful while working on the theme:

• Dive into HTML5: Read through this article and you will be well on your way to learning HTML5. It delves into the history of HTML and progresses forward right up to implementing the new specifications.
• HTML5 Doctor: Looking for HTML5 related news or need some clarification of a new tag? Look no further than HTML5 Doctor. Lots of articles available for you to read and there’s even the option to ask a question if you don’t find the answers you are looking for.
• HTML 5 Outliner: So you’ve created your shiny new HTML5 template; why not check it with the outliner to see if it makes sense to a user / search engine.
• W3C Markup Validator: It’s been a while since I’ve used a validator since I have one built into Firefox, but the W3C validator was very handy for pointing out attributes and tags that are no longer supported in the specifications. It also gives you a quick benchmark to aim at.

If you have any other useful HTML5 tips and links let me know below.