Today @Rem taught me that "Browsers have Wings"
Today was day one of WebDirections in London (tomorrow is a rest day, the conference starts properly on Thursday).
It was workshops day today and I attended “Browsers have Wings” a workshop by Remy Sharp (@Rem). The topic of conversation was HTML 5 APIs.
Remy started with some context indicating that HTML5 is rapidly becoming a brand name accumulating many elements that are not actually HTML 5. For example often associated with HTML5 are technologies like GeoLocation, WebWorkers, WebSockets and WebStorage. These API’s however are not part of the HTML5 specification they are simply being developed alongside and used in association with HTML5. I believe this is rather like the OS/2 PS/2 confusion way back when where people would associate OS/2 with the PS/2 even though they were completely different.
So what is included in HTML5?
- Canvas
- Video
- WebForms
- Offline applications
With the exception of WebForms these were the topics for the day, although we did do work on the other associated API’s as well.
This was not a workshop for the Novice, almost everyone in the room was an experience developer with HTML/JavaScript/jQuery experience. They were from a range of organisations including Sunday Times and the World Health Organisation as well as numerous small companies. There was no time wasted on basics such as the simple DOCTYPE declaration or how well formed (or not) the markup should be. Instead it was straight into the first topic.
Video
In this section we learnt how to embed video natively and how to degrade this for browsers that do not support HTML5. We learnt how to replace the native controls with custom controls, which events are available and how we can control the volume, play position etc. We were running locally so there was no real discussion regarding buffering but we did learn how to know when the video was loaded and ready to play.
Canvas
Having settled in to the topic and done our first exercise (the whole session was hands on – with people typing like mad) we moved on to the Canvas element. First up was understanding the difference between SVG and the Canvas and when to use which. For example:
- SVG is excellent for vector graphics where as canvas is very pixel based.
- SVG has an object tree and so there are layers, canvas is flat no layers at all
Once we had got this under our belts we learnt how to draw basic shapes (rectangles, circles) this is very similar to the process used in Flash so was easy to get used to, however, the lack of layers made it sound like it was really restrictive.
Next we learnt that we could move beyond basic flat shapes to gradients and from gradients to patterns and from patterns to images and/or video. This concluded with an exercise where we created a link to an image and drew that image into the canvas. Why do this you might ask? Well we were then able to manipulate the image drawn to the canvas (for example make it greyscale). This was done by manipulating the individual pixels of the image. In my case, trying to be adventurous I combined the canvas and image with a slider to allow the user to change the transparency of the image.
GeoLocation, Storage and Offline
After lunch (a brief affair of very English sandwiches) we moved on to a trio of topics. Starting with GeoLocation we learnt how to capture the current location of the user, demonstrating how the user has to give permission for this to happen. We learnt how to understand if something went wrong (for example the user said no) and how to know whether something went wrong even when it seemed to go alright (understanding the accuracy of the location data). The exercise related to this seemed to revolve around trying to prove that Brighton is not the centre of the universe.
In the Storage section we learnt about how useless cookies are and how useful local and session storage are. We learnt how to store data and retrieve it and how to inspect the current data using our browser. During the day we working primarily in Chrome with Remy giving clear indications (when he remembered) of the support in other browsers. Lastly we looked at how to make an webpage work offline, this is principally around the building of a manifest file that indicates what should be cached to the browser, what should not and what to do if a file was is not available when offline.
WebWorkers and WebSockets
We were now getting to the end of the day, however the examples were getting more and more complex and the time spent on each getting less and less. We were coming to the end of the rollercoaster ride and we were definitely going downhill.
WebWorkers are a way of introducing threads into the browser. The Browser rendering service is single threaded so routines that consume the thread for a long period can cause instability warnings to appear. Web Workers get round this by building new threads and allowing javascript to run inside those threads. The WebWorkers are sandboxed so they cannot manipulate the DOM or file I/O but they can do heavy weight algorithms without tying up the interface.
WebSockets are a way of creating transactions with a server. Better than AJAX or Comet. They are very thin threads of push notifications that do not include headers (only the data being passed). This allows them to be much faster and to allow realtime conversations with server based web services.
Looking to finish on a high Remy boldly suggested that we work collaboratively on an exercise to end the session. This would combine a number of the technologies we had been looking at including:
- Canvas
- WebSockets
The idea was that users would be able to draw an image in a canvas, take a snapshot of that picture place it on the left side of their screen and then either create a new image for refine the existing one. The snapshots captured would be pushed to a web service so that other people could see them. The right side of the browser was used to show the images that other people had created. Clicking on those images would make them appear in your own drawing canvas so that you could enhance them and take a snapshot for others to play with.
In Summary
Many people criticise conferences and workshops because they are perceived to give little value. I have to say that this event was a perfect example of how wrong these people can be. Remy was Sharp (sorry I could not resist) he obviously knows his stuff, can create code on the fly in an instant and certainly massively increase my basic knowledge of the API’s. I have to be honest and say my mind was spinning a little towards the end but I am sure that my upcoming flight to KL will give me the perfect opportunity to review what we did and understand it fully. Thanks Remy, Thanks WebDirections. I look forward to the main conference, which starts on Thursday.
An Update (Next Morning)
I was almost right. The following morning @Rem posted the "finished" application on his site (http://rem.im/collab-drawing.html) a number of people have been having fun on it. Feel free to have a go. Send the link to a friend so that you can adapt each others pictures.
