Web Directions Code Melbourne 2012 – Day 1

I spent today (23rd May 2012) at Web Directions Code first time attendee of the Web Directions conferences, and this is the first Web Directions Code (at least in Australia or Melbourne).

It was a great day, a combination of great speakers, face chocolates (see below) and a single track taking out the stress of selecting which presentation to go and see. It’s a 2 day event so I’m quite excited to be going back tomorrow. (Here’s my Day 2 wrap up).

Faruk Ates
The Web’s 3rd Decade

Key take-away is this slide, with the important message being better tools are clearly what’s missing right now that’s making web development not productive as it should be, we should be further along in terms of getting more of the basics done. This comes about from achieving the other 2 items – more involvement along with making it clearer how to use and integrate existing frameworks and or tool sets.

Dave Johnson
Device APIs: closing the gap between native and web

Dave spoke about technical challenges in building PhoneGap. The most challenging being those around; security, sand-boxing, privacy permissions, and performance. Basically its hard work, many devices many lacking features, in particular around new HTML based video and audio.

Damon Oehlman
HTML5 Messaging

Damon covered off a lot of technical details around messaging in HTML 5, listing two main types: ‘Post Messaging’ and ‘Channel Messaging’ stating that post messaging is simpler to get going with. He went further to discuss web-sockets and some example frameworks like Socket.IO and Sock.js. He demonstrated posting messages via his presentation and created a web socket connection to twitter to receive messages as soon as they arrived at twitter. Then briefly touching on Web Intents.

Andrew Fisher
Getting all touch feeling with the mobile web

Walked us through the basics of touch, with some nice demonstrations and a walk-through of how common touch mechanics we’re all familiar with work.

Silvia Pfeiffer
Implementing video conferencing in HTML5

Had a very impressive setup of some node.js server logic coordinating 2 browsers connecting to each other to perform a video conferencing call on stage between her and the audience.

Anson Parker
The HTML5 History API: PushState or bust

Gave us a neat little round up of the History API and how it works, Anson took the opportunity to remind us that companies like twitter with their hash-bang urls are breaking the expected behaviour of the web. He gave an example of how much data is delivered regardless if you’re requesting to view a single 140k tweet versus their tweet stream (typically paged at 10-20 tweets). He wrapped up with a cool demonstration of a site he’s in the process of building, that looks very promising kahzu.com

Tammy Butow
Fantastic forms for mobile web

Tammy walked us through the basics of building suitable input forms for mobile devices, taking advantages of types such as ‘tel’ to bring up only the numeric keypad for input, all the tips are up on slide share.

Max Wheeler
Drag and drop and give me twenty
Walked the audience through drag and drop concepts.

John Allsop
Getting off(line)

John overwhelmed with a flood of information about the complexities and pitfalls of working with appcache. He walked us through sessionStorage and localStorage and the tradeoffs of what you can store, how much space is available, and security concerns (in particular when browsers crash). He covered a great deal so here’s a link to an older version of his presentation from a previous web direction conference (I’ll update with a new one when I find it).

Divya Manain
Designing in the browser

Divya made a very clear and strong case for having a process that involves designers writing code, and building prototypes sooner rather than later (or not at all). Advocating moving from very initial rough paper sketches straight to prototyping using a fair few useful tools (note this is still rough notes, I’ll follow each up and link directly).

Tools / resources for prototyping

• DocPad or Jekyll for scaffolding
• HTML5 boilerplate
• Sass / LESS / Stylus
• Mustache, Eco, Haml
• Faker.js
• Twitter bootstrap
• codekit, livereload
• document with : Docco, Style Docco
• Image placeholders like lorempixel.com

To top off a great day we got a gift each from Blackberry a PlayBook.

One last thing the graphic of the day to get the most reaction (excluding courage wolf ones).