[pic from Christian Hellman's “Reclaiming HTML5” talk at SuperVan JS mini con]

In my last post, HTML5 Canvas with Dave Shea, I mentioned the abundance of tech talent in Vancouver, and how all of us Vancouverites benefit from their presence. Here's a case in point: not two days after Dave's presentation, the VanJS Meetup group presented SuperVan JS: 5 speakers on a Saturday afternoon, on all things JS.

Talks, in chronological order, were:

1. Toura Mulberry, A Mobile App Development Toolkit
2. Mozilla Web Apps, Building Web Apps with Mobile Technology
3. Vispo.com: JavaScript Art
4. Diving into YUI
5. Reclaiming HTML5

Toura Mulberry, A Mobile App Development Toolkit

By Rebecca Murphey, Lead JS Developer at Toura Mobile and co-organizer of TXJS

I was a bit late for Rebecca's talk, coming in just as she showed her Anatomy of a Unicorn slide:

which aptly sums up her engaging presentation style.

What Ms. Murphey did was walk us through the Mulberry toolkit for developing apps. She showed examples of apps built using Mulberry: one for the Guggenheim's Maurizio Cattelan exhibit and for the British Library's Royal Manuscripts collection.

She then walked us through the process of building an app with Mulberry, using real world projects examples: a sort of “Four-Square for HVAC technicians” for the Ruby Tuesday restaurant chain and a To-do List app. The app for HVAC technicians was originally created with Phonegap and Jquery, but the company wanted to add picture taking and audio recording capabilities.

Mulberry allows front-end developers to build online/offline apps using the web technologies they already know while demystifying the client-side programming they may not be familiar with.

Mulberry's tenants:

• Decoupled – apps would be essentially the same with the exception of content & configuration
• Esxtensible – the framework would be able to incorporate new features with minimal risk
• Reusable – code that we wrote to support a client request would be usable in other apps
• Cross-platform – the same code would run iOS and Android versions of the app
• Tolerable – day-to-day development would not require time-consuming builds

More about Mulberry here: http://mulberry.toura.com/
Rebecca's slides here: http://www.slideshare.net/rmurphey/mulberry-a-mobile-app-development-toolkit

Mozilla Web Apps, Building Web Apps with Mobile Technology

By Robert Nyman, Technical Evangelist at Mozilla

Robert Nyman, (from Sweden, not Switzerland), intro'ed Mozilla's web app building tools.

He started by introducing the crowd to Mozilla, the non-profit that believes the web is the most important resource we have. He pointed out that the main focus of most web app stores is making money; that they do not put web developers first. Mozilla Labs Apps, on the other hand, runs on three pillars:

1. Reach - reaching everyone, across devices and form factors
2. Open Tech and Resources – following web standards and using open technologies like HTML5, CSS and JS
3. Choice and Freedom – giving developers control over everything from development, to distribution to customer relations.

Robert introduced Web Runtime; aka WebRT, currently for Windows, Mac and Android, and described the process of turning an existing web site into a web app, by adding a “manifest”: a JSON file that describes your app – kind of like the .info file you create for a new Drupal module or theme.

For more about Mozilla Labs Apps, visit: https://apps.mozillalabs.com.
Robert's slides are here: http://www.slideshare.net/robnyman/mozilla-web-apps-supervanjs

Vispo.com

Third up was self-described “artist, writer, programmer” Jim Andrews, showing his web site, Vispo.com; in particular, his HTML5 Canvas project, Aleph Null.

Aleph Null is built using a screenwide Canvas, with JavaScript for controls.

Below are a couple screenshots, but they do not really do the project justice. Go play with Aleph Null and manipulate its output in realtime. It's amazingly beautiful; impressive. Thank you, Jim Andrews!

Vispo.com
Aleph Null

Diving into YUI

By Preet Jassi, Senior Frontend Engineer at Indochino

Preet S. Jassi, cold representin' in fine threads for his employer, online mens' suits retailer, Indochino, talked about why he uses the Yahoo User Interface (YUI) library.

The YUI philosophy:

• modular development
• being a good global citizen; ie. Writing good code that will not interfere with other elements on a page, and
• maximizing performance.

YUI includes many, many modules that you can add one at a time, or all at once. It's got great mobile support, for things like swipes, he said.

YUI Library can be inspected here: http://developer.yahoo.com/yui
Preet's personal website is: http://www.erudianart.com

Reclaiming HTML5

By Christian Heilmann, Principal Developer Evangelist at Mozilla

Finishing up the afternoon was Mozilla's Christian Heilmann, entertaining us with his rant about keeping HTML5 pure in the face of marketing hyperbole and reminding us to use HTML5 in day-to-day projects like brochure sites and presentation slides, not just in cool demos that have no real world application. He rounded out his talk by showing us some of the interesting projects he's been working on.

He enlightened us regarding the CSS “translate” tag, to move elements quickly on screen and to CSS transitions for creating smooth cross-browser movements.

For 3D transformations, he advised the use of the online 3D CSS Tester.

He showed us his Blue Beanie Maker which quickly adds a Jeffrey Zeldman-esque blue beanie to an uploaded photo. This tool, he adds, can easily be modified to do things like add company logos to images.

He showed us the Browser Fountain, a bookmarklet for cropping images in-browser, a less obtrusive way of adding video annotations (demo not online) and a game to help you learn which browsers support HTML5.

To read a recap of Christian's talk in his own inimitable style read: http://christianheilmann.com/2012/01/15/reclaim-html5-at-super-vanjs-in-vancouver-canada.
HTML5 Demos: http://thewebrocks.com/demos