Ottawa JS

September 12 meetup

Iframes are cool and about to get cooler.

Simon Kaegi - @skaegi

postMessage API will be a major feature. From my understanding this will allow the ability to send POST data from forms or hidden fields across two separate websites/applications. Prior to this newly introduced api there were hackier ways of sending this data, this solidifies it with authentication paths for better security.

Iframes are slow, but not evil. Sometimes its necessary to use iframes. Advertising is an example of an iframes practical use on the web. iframes are pretty fundamental to a lot of the modern web including portals of shared information. Embedded youtube videos. It is estimated that 1kb of iframes amounts to 100ms of load time, it can add up to a longer load time.

Important Performance Consideration

Iframes STOP initial page load. HTML does not completely parse until the iframe has loaded. If you can, use JavaScript to instantiate the iframe. JavaScript will run after HTML and CSS have been parsed and the iframe will be loaded in after that. The website will be functional while the iframe is loading.


Shadow DOM and Templating Web Components

Thomas Martineau - @TMartineau

Template custom reusable HTML, CSS, and JavaScript components in stand alone sandboxes. These web components can be passed information making them reusable with different strings of information allowing the ability to reuse components with different context.

Shadow DOM exists in all browsers but recently only chrome has introduced the ability to see, create and edit custom Shadow DOM Elements.

Default form styles and the date-field calendar styles are shadow DOM, every date square of the calendar is a series of html elements styled in a self contained environment know as shadow DOM.

Web Components have future specs that can be cached and delivered through CDNs. What we hope this means is that web components can be used across multiple websites without having to be redownloaded.

View the demo and download the source on github.


Ottawa Drones "Lifts off"

Alan Gardner - @alanctgardner

You better believe you read that right, I didn't coin the term, I owe credit to an Ottawa JS member that I wish I knew the name of.

AR Drones in Ottawa, Free hackathons, T-shirts are coming, Open source contribution in Ruby, Python, and Javascript. Yes, you can fly Drones and program them to do things and crash and stuff.

A successful first hackaton resulted in some ambitious projects and you better believe JavaScript was passing commands to the drone. Which turns out to be a linux box outputting its own local wifi signal.

Notable application? A Drone that flew around the room and if you smiled at it, the drone would use facial recognition to see the smile and take your picture. If you weren't smiling it didn't take your picture. Drone event photographer at your service.

Ottawadrones.com.


Micro Libraries

Simon MacDonald - @macdonst

Easy question to ask yourself. Have I ever used every one of JQuerys functions?

Does this application need to handle the memory management of all of these unused functions being loaded in?

Micro libraries are small native javascript frameworks designed for specific tasks or functions. Much smaller in memory management and filesize, equally reusable.

min.js by Remy Sharp - creates syntax similar to JQuery for querying selectors and event listener hooks.

Touch events have 300ms delay before triggering. Fast Click is a shim for that. remove that delay with touch events.

View the slides.