Sunday 11 November 2012

Thoughts on 'The Web Can Do That?'

What follows in this blog is a mind dump as I was watching the video from “The Web Can Do That?” and skirting over the slides. There is no real takeaway in this post, but there are a lot of jumping off points for exploring HTML5.

Live Slide Decks

Interesting, having slide decks respond to advances in tech over time. This is similar to what we’re seeing in documentation with regards to build information and user information.

If you’re following along, do check out this legend because it will help you decide how up to date each thing is.

CSS for Web Apps

I’ve been thinking about apps lately. I’ve never made the jump to fully learning Objective-C and Java is not a place I want to go to. I’m already super confident with HTML, JS & CSS and it’s always seemed a royal shame to have ditch that knowledge in favour of the two afore mentioned development languages.

HTML5, which right now seems a feasible direction given developments such as Firefox OS. But when given new specs it becomes much easier.


At 3m:50s we’re introduced to Flexbox which makes layouts easy and painless. This looks super handy for rendering out app based layouts. The ordering of parts of the UI is something that I’ve been searching for a while ; very handy.

Dynamic CSS

The css calc function can used to solve common problems such as same height of columns.

Data Binding

Ok, well “Poor mans data binding” using the data-* attributes. Very sneaky approach using the attr() method to get values and :before/:after pseudo selectors to render this out.

I was not aware of datalist, this is immense.

File System Access API

Super exciting, meaning that we can now read & write to the. As long as we have permission and on a per-origin basis. The example was caching remote files, as opposed to using app-cache (which, I’ve found to be is merciless).

The actual API is little callback heavy, but luckily there is filer.js which was created by the user and modelled on common unix file commands such as ‘ls’. Although support isn’t wide yet, there is idb.filesystem.js which is a polyfill

Serverless Downloads

For client side downloading of files without using a server - demo’d using a client side app that featured a textbox in which the user could download the contents as a a native file. This would be very handy for django-omblog to allow users to download a copy of their blog posts.

Efficiently Transfer Data

Using postMessage() to communicate with web workers and it evolved to send text, then JSON and now we can send blobs and all manner of exotic things such as an array.buffer. However this was a little slow and sucky and this is where Transferable Objects came about, and is really, really efficient and is ideal for a situation in which we need to send a large file/thing into a web worker and get it back.

Device API’s

Literally accessing things like battery API, Geolocation, networt connectivity and Web RTC. I’m super exited for this and especially how I can use this in building and shaping e-learning experiences.

For me this is a biggy, especially now that iOS allows file access to the camera library.


Years ago I remember faking many and graphic equaliser in flash. Now we can do this for real in HTML5.

Streaming Multimedia

Can do this via Binary Websockets rather than strings. The demo was a screenshare app and a audio streaming app, both were very nice.

Browser Compatibility

Right now all current versions of all major browsers appear to support most (if not all) of what’s been mentioned in this video. Opera support isn’t as good as the rest, but, (and I say this as someone who stumped up for an Opera serial number back when it was adware) I will lose no sleep in it’s lack of support of some of these new things, as long as the content is accessible[^edge].

Wrapping Up

There’s so much new stuff here that I can use in projects right now, safe in the knowledge that at some point they’ll land in all browsers.

Like most designers/developers I was aware of the more widely used html5 new things such as the new tags, but I was not aware that html5 is so wide in scope and in many respects is claiming ground previoulsy swallowed up by Flash and Java.

Whilst I’m sure that it won’t replace the need to go native on mobile apps under certain contexts, it does make sense for me to focus on HTML5 over the next six months as I get ready to work on on Obscure Metaphor full time. What I’ve now got access to is a full set of (albeit experimental) tools that are going to allow me to build immense learning and training experiences.

[^edge]: Edge cases will be dealt with as they’re encountered.