Web Directions Year round learning for product, design and engineering professionals

The first ever Web Directions Code really could not have been better. It was so great to bring something new to Melbourne and for it to be an out of the box success, and to meet so many interested and active developers from across the street, across the ditch, and across the globe. Big thanks to everyone who was there, as well as all our speakers. Here’s a couple of nice write ups that have their own collections of resources and notes:

• Moin Zaman
• Nick Josevski – Day 1, Day 2
• Tait Brown’s wrap-up slideshow

In a couple of weeks time we hope to have some videos online, so watch this space, but in the meantime I thought I’d also share with you all the links and resources from each of the presentations. Not the same as being there of course :)

Day 1: HTML5

Device APIs,closing the gap – Dave Johnson (@davejohnson)

• PhoneGap
• Getting started with PhoneGap
• Supported APIs

HTML5 Messaging – Damon Oehlman (@damonoehlman)

• Presentation Slides
• Demo Repository

Getting all touchy feely with the mobile web – Andrew Fisher (@ajfisher)

• Presentation Slides
• W3C spec
• HTML Rocks Touch
• Big list of touch stuff
• Demo Repository
• Touch patent issues
• Patent Advisory Group Charter

Implementing video conferencing in HTML5 – Silvia Pfeiffer (@silviapfeiffer)

• Presentation Slides
• W3C WebRTC specification, editor’s draft
• WebRTC initiative, supported by Google, Mozilla and Opera
• Testing WebRTC in Google Chrome – running demos; getting started
• Demo by Google Dev Relations Paul Irish – video; slides
• HTML5 code demos
• Sample code

The HTML5 History API, PushState or Bust! – Anson Parker (@anson)

• HTML5 History API tutorial
• Twitter engineer Dan Webb on their choice to use #! URLs
• A History API library that supports older browsers (with #’s – so beware!)

Fantastic forms for mobile web – Tammy Butow (@tammybutow)

• Presentation Slides
• HTML5 differences from HTML4
• Dive into HTML5 – forms
• HTML5 inputs and attribute support
• Ryan Seddon’s H5F
• Modernizr
• initializr-template
• HTML5 Boilerplate

Drag and drop and give me twenty – Max Wheeler (@makenosound)

• Presentation Slides
• Drag and Drop Spec
• DnD and Friends
• Native HTML5 Drag and Drop
• HTML5 Drag and Drop
• Drag and Drop with Microsoft Internet Explorer 5
• The HTML5 drag and drop disaster
• Fontdragr

Getting off(line) – John Allsopp (@johnallsopp)

• webStorage: Persistent client side data storage
• Get off(line) article

Designing in the browser – Divya Manian (@divya)

• Presentation Slides
• Stephen Hay’s Responsive Design Workflow presentation
• For scaffolding – docpad; jekyll
• HTML5 Boilerplate
• Sass
• LESS
• Stylus
• The BEM naming methodology
• Mustache
• Eco
• haml
• Generate fake data with Faker.js
• Twitter Bootstrap
• CodeKit
• LiveReload
• Docco
• StyleDocco
• Placeholder images for every case

Day 2: JavaScript

JavaScript, Enter the Dragon – Dmitry Baranovskiy (@dmitrybaranovsk)

• Read the bloody spec!
• The JavaScript Garden

NPM, Node’s Personal Manservant – Jed Schmidt (@jedschmidt)

• Keep Ya JavaScripts Dinki-Di Demo

Truthiness, falsiness and other JavaScript gotchas – Anette Bergo (@anettebgo)

• Douglas Crockford’s “JavaScript, The Good Parts” (book)
• Douglas Crockford’s “JavaScript, The Good Parts” (video)

The main event, beyond event listeners – Damon Oehlman (@damonoehlman)

• Presentation Slides
• Demo Repository
• Dmitry’s Eve Project

Getting closure – Mark Dalgleish (@markdalgleish)

• Presentation Slides
• Immediately-Invoked Function Expression (IIFE)
• Self-Executing Anonymous Functions

Debugging secrets for the lazy developer – Ryan Seddon (@ryanseddon)

• Presentation Slides
• Modernizr
• Travis
• Browserstack, live web based cross browser testing
• Node-browserstack
• Yeti, the UI Easy Testing Interface

Party like it’s 1999, write JavaScript like it’s 2012 – Tony Milne (@tonymilne)

Background

• Summary of Script tags, CommonJS and AMD
• Comparison of RequireJS v YepNope v LABjs

Modules

• Module Patterns in JavaScript
• An in-depth summary of Modules in JavaScript

RequireJS

• RequireJS homepage
• Almond, the light weight shim (alternative to RequireJS in production)

CommonJS and AMD

• The CommonJS specification
• The AMD specification
• Author of RequireJS on AMD

Clientside templates for reactive UI – Tim Oxley (@secoif)

• Recommended Reading – Asynchronous UIs: the future of web user interfaces and the client-side templating throwdown: mustache, handlebars, dust.js, and more
• Unless you have a very good reason not to, use Handlebars
• Recommended Framework: Ember.js
• Tools for Building Serverless Websites: StatiCloud and eson
• Learn to say no to clients. Don’t give your clients a CMS. Just teach them to write JSON, or even better, CSON
• And have them markup their pages using markdown. Build tools are your friends, learn to use Make
• And be more like TJ

HTML5 technologies and game development – Rob Hawkes (@robhawkes)

• Presentation Slides
• Foundation Canvas (book)
• HTML5 Games Most Wanted (book)
• Rawkets: built with HTML5 and WebSockets