Well Caffeinated

Sending Cross-Domain Messages to an iFrame

2014-12-09T00:00:00+00:00

While browsing stackoverflow recently, I discovered a trick to send arbitrary data to an iframe, even if it’s across domains!

If your iframe is on the same domain, you can use the regular trick:

var iframeWin = iframe.contentWindow || iframe.contentDocument.defaultView;
iframeWin.data = myData;

But if you want to send data to an iframe across domains, you need to be more clever. The trick is to use window.location.hash and the onhashchange event, then set the location of the iframe to have a different hash value (that includes your encoded data).

Let’s write some code that will encode arbitrary data (as long as it’s JSON encodable) and put it into the hash value of the desired iframe.

function sendIFrameData( frame, data ){
    var idx = frame.src.indexOf('#'), url = frame.src;
    if ( idx > -1 ){
        url = url.substr(0, idx);
    }
    
    frame.src = url + '#' + window.btoa(JSON.stringify(data));
}

Easy enough…

Now on the iframe side, let’s write a function to decode the data.

function getHashData(){
    var data;
    try {
        data = JSON.parse(window.atob(window.location.hash.substr(1)));
    } catch( e ){}
    return data;
}

That’s all there is to it!

An example

Here’s a real life example. I created a codepen that will load an iframe on my domain, and send it some messages.

// send arbitrary data to the iframe
sendIFrameData( frame, { text: "Hello world" } );

setTimeout(function(){
    sendIFrameData( frame, { text: "How are you today?" } );
}, 2000);

The iframe will listen to the hashchange event and log out what it hears.

var el = document.getElementById('log');
function showMsg(){
    var data = getHashData();
    if ( data && data.text ){
        el.innerHTML += "<br/>Received msg: " + data.text;
    }
}

// in case we sent data on first load.
showMsg();
// when the hash changes we check the new data and print it out
window.addEventListener('hashchange', function(){
    showMsg();
});

Check out the working example!

See the Pen myVaQX by Well Caffeinated (@wellcaffeinated) on CodePen.

PhysicsJS Contest | Building Demos and Better Renderers

2013-12-05T00:00:00+00:00

I’d just like to announce that ChallengePost is hosting a PhysicsJS contest!

I’ve also created a tutorial to help people understand how to create custom renderers with PhysicsJS. Better renderers are sorely needed to make PhysicsJS even easier to use. I’m hoping some clever devs out there will be able to build PhysicsJS renderers on top of great canvas libraries like KineticJS, TWO.js, Pixi.js, Paper.js, or Easel.js.

I raise my coffee cup to you, Internet! Don’t let me down!

Building a 2D Asteroids Game with PhysicsJS

2013-12-02T00:00:00+00:00

You might have heard a little while ago that I created a javascript physics engine called PhysicsJS. Turns out it’s been getting a lot of attention, but I’m behind on the documentation. I’m working on it though! I recently published a tutorial as a guest blog on flippin’ awesome; Building a 2D Asteroids Game with PhysicsJS.

As a web developer and a physics geek, I always felt like something was lacking whenever I tried to do 2D physics in JavaScript. I wanted an extensible framework that followed in the footsteps of other modern JavaScript APIs. I didn’t want it to assume that I wanted gravity to point downwards, or that I wanted gravity at all… That’s why I was driven to create PhysicsJS, which I hope will live up to its tagline:

A modular, extendable, and easy-to-use physics engine for JavaScript.

You can read the full article here.

A Web Developer's Tribute to autumn

2013-09-22T00:00:00+00:00

I created a little tribute to autumn using PhysicsJS. Seems like people like it… enjoy :)

See the Pen Autumn Leaves | PhysicsJS Demo by Well Caffeinated (@wellcaffeinated) on CodePen

PhysicsJS: I wrote a physics engine for javascript

2013-09-10T00:00:00+00:00

I’ve finally released a little project I’ve been working on lately: PhysicsJS. It’s a physics engine written in javascript. For those who haven’t used or heard of a physics engine before, a physics engine is a library that helps simulate physical realism in a computer program. For example, here’s a little jsFiddle of a classic tearable cloth simulation I made with PhysicsJS. You can use your mouse to move and even tear the cloth.

It’s not quite the same as the type of physics simulation a physicist would use, because generally a physics engine will do computations in real time, so the algorithms need to be fast. The algorithms in (real-time) physics engines will cut some corners to acheive an effect that is physically plausible to the eye, even if it’s not what would really happen. Usually they are used in game development but there are, of course, other applications also.

There are actually a few javascript physics engines that have been released recently. The two that I’ve most recently come across are VerletJS and coffeephysics. While both are really cool, and have great example simulations, neither have good documentation, and both are very specialized to particular types of effect. Of course, there’s always the classic Box2DJS, which was ported over from a flash implementation… and it shows in the API. While I do love what Box2DJS can do, it’s also a monster of a library, weighing 724 KB minified.

After playing around with physics engines and creating modest simulations of my own, I decided to see if I could pool all of my work into a little library, that hopefully could evolve into something people would find useful. The result is PhysicsJS. It’s generally well documented and the code is written as cleanly as I could. It’s also modular, so the bare-bones functionality is only 32 KB (minified) and the (current) full functionality is 52 KB (minified), but it was written with AMD in mind, so you can include exactly what you need to get the job done with requreJS. It’s also extendable; I wanted to make sure that it would be easy to mixin new functionality of any kind, and replace what isn’t suitable. I’m hoping people will start writing plugins to extend the capabilities, which is an exciting prospect! It’s also fun to use. Only time will tell whether or not it’s an intuitive API… but I’d like to think it is.

Anyways, go check it out and play around. There are some cool demos of the functionality. I’m really interested to see what people think of it so send me your feedback. If you’re interested in contributing, I’d love people to make some plugins to extend the functionality, and also fix some of the quirks in its algorithms.

Enjoy!

Playing with asm.js and Browser Physics

2013-04-16T00:00:00+00:00

Lately I’ve been very intrigued about Mozilla’s asm.js specification. ASM.js is a subset of javascript that allows javascript interpreters to compile code ahead of time, directly into assembly code. This results in huge speed increases.

Current benchmarks of asm.js code running in Firefox’s Nightly build, place javascript at only half the speed of native compiled code! A big difference from the usual, which is around 4 to 10 times slower. One fun showcase of this was the recently ported Unreal Engine 3 to Asm.js.

Yes. We’re running high performance 3D games in web browsers now…

John Resig has a nice writeup about asm.js, including a QA transcript with David Herman (Senior Researcher at Mozilla Research). You should give it a read if you’re interested.

Of course, being curious and well caffeinated, I like to play around. I did a simple benchmark and a little proof of concept of my own. But first, let’s quickly go over asm.js.

asm.js Modules in a nutshell

Firstly, a disclaimer. asm.js code is a pain to write by hand. (I do so because I drink too much coffee…) I don’t really recommend starting any large project thinking that you’ll write it in asm.js from scratch. Likely, the best way to leverage asm.js will be to write in another language (like C++, or something like LLJS), and then “compile” it into asm.js. The painful part is mainly that it feels like writing in two languages at once. It’s javascript… but it feels like something else… anyways, let’s move on.

Asm.js contexts begin with a declaration like this:

"use asm";

This is in the spirit of the "use strict"; declaration, that you are hopefully familiar with. (If not, google it. It’s good to know).

This will most often be placed inside a function that acts as a “factory” for an asm.js module. This asm.js module format looks like this:

function my_module( stdlib, foreign, heap ){
    "use asm";

    // magic... (not really)

    return {
        someMethod: someMethod
    };
}

var instance = my_module(
        window,
        {
            customProperty: value,
            externalFunction: function(){
                // ...
            }
        },
        new ArrayBuffer( size )
    );

When this function is run, it will return an instance of an asm.js module. If asm.js is supported, the methods in the returned object will be compiled into native code. If not, they will be javascript with identical functionality.

Inside the module factory, stdlib will hold standard global functionality (like Math), foreign is user specified and can be used to escape back into regular javascript, and heap is a fixed-size ArrayBuffer for storage.

The magic that happens in between relies on a very restrictive requirement that all primitives must be statically typed as integers, or floats. Numerical computation is pretty much all you can do in an asm.js context (and that’s why it’s so fast). Of course, javascript doesn’t allow for declaring types, so this is done by transforming variables into their types like so:

variable_int = variable_int|0;
variable_float = +variabla_float;

I’m not going to go into great detail about the specifics of hand crafting asm.js code. For that you should check out John Resig’s article and read the specification.

However, one of the big pains to writing it by hand is dealing with memory allocation. The only thing you really have access to in terms of memory, is the fixed-size ArrayBuffer you specify when you instantiate the asm.js module. You then have to then create views into the array buffer to manipulate data.

Easier asm.js Memory Management

Memory management becomes cumbersome. After playing around with it, I decided I needed to write a quick helper module to make this easier.

Basically, the helper lets you manipulate “collections” of objects that store all of their (primitive) properties in an array buffer. For example:

var coln = ASMHelpers.Collection({
        foo: 'int16'
    });

This would create a collection instance that holds objects that hold 16 bit integers in their foo properties. You can then add one of these objects to the collection and all of the ArrayBuffer memory management is taken care of behind the scenes:

coln.add({
    foo: 42
});

var obj = coln.at( 0 );
obj.foo; // => 42

The objects have getters and setters defined, so if you change the property, it will get changed in the array buffer.

obj.foo = 34; // changed in array buffer

Unfortunately, non of those tricks can be used in the context of an asm.js module. But that’s ok, because the helper collection sets up pointer addresses that can be used in asm.js. Here’s how:

// include asm.js module methods into the collection
coln.include(function(stdlib, coln, heap){
    "use asm";

    // general purpose std functions
    var sqrt = stdlib.Math.sqrt;
    // set up our view to look into the heap
    // this will be used to access our int16 properties
    // in our example, this would be the "foo" property
    var int16 = new stdlib.Int16Array( heap );

    // object property pointers, relative to object ptr
    var $foo = coln.$foo|0;
    
    // function to get the number of objects in the collection
    var getLen = coln.getLen;
    // the size of each object in bytes
    var size = coln.objSize|0;
    // starting point for iteration (ie: the address of first object)
    var iterator = coln.ptr|0;

    // example function that increments the foo property 
    // of every object by specified number
    //
    function incrementFoo( n ){
        // declare n as an integer
        n = n|0;

        // declare local variables
        var i = 0, l = 0, ptr = 0;
        ptr = iterator|0;
        l = getLen()|0;

        // loop through objects
        while ((i|0) < (l|0)){

            // foo += n;
            int16[(ptr + $foo) >> 1] = ( (n|0) + (int16[(ptr + $foo) >> 1]|0) )|0;
            // i++;
            i = ((i|0) + 1)|0;
            // ptr += size;
            ptr = ((ptr|0) + (size|0))|0;
        }
    }

    // these functions will get mixed into the collection
    return {

        incrementFoo: incrementFoo
    }
});

Benchmarking with JSPerf

Using this helper, I wrote a very simple 1D physics engine to test performance difference between simulating numbers of objects with the “use asm” declaration, and without it.

Here’s the benchmark on JSPerf

The results in Firefox 23 nightly build:

Aside for some weirdness on the last test, enabling asm.js is significantly faster for this physics algorithm.

Building a simple physics engine in asm.js

Of course, benchmarks are nice… but graphics are more fun! I wanted to keep going and see what this speed increase felt like for some real-time browser simulation.

To that end, I created this fun demo.

Creating a 3D Histogram with CSS 3D Transforms

2013-01-12T00:00:00+00:00

Using CSS 3D transforms can be a bit challenging. It’s new, support is sketchy, and it requires a type of spatial thinking that we aren’t used to on the web (yet). But the results are worth it. With a bit of CSS and some javascript for event binding, you can turn a boring old table into a 3D histogram like this one:

30	20	60
80	10	40
20	50	30

Step 1 - Markup

First, we need the HTML. We’ll create two container elements that are quite common in 3D css work:

a viewport: acts as the projection layer or “camera”
a world: which holds every other child element which we can easily rotate

I also like to add another element, the ground, which is just a plane that objects will sit on.

Inside this tree of three elements, we’ll add our table, which contains the 3D histogram values. Here’s the markup:

<div class="viewport">
    <div class="world">
        <div class="ground">
            <table class="histogram-3d">
                <tr>
                    <td>30</td>
                    <td>20</td>
                    <td>60</td>
                </tr>
                <tr>
                    <td>80</td>
                    <td>10</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>20</td>
                    <td>50</td>
                    <td>30</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Step 2 - The environment CSS

Next we need to set up our 3D environment. For the sake of simplicity, I will omit -vendor-prefixed values.

First, the viewport. I some relative positioning, and dimensions, but the important values are the perspective and perspective-origin values. Roughly speaking, the perspective controls how far the “camera” is from the origin, and perspective-origin defines its position.

.viewport {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    cursor: move;

    perspective: 4000px;
    perspective-origin: 50% -100%;
}

Next, the world. Again, we set some positioning and dimension values, but the important values for the world are tranform and transform-style. The transform value will rotate the world to its starting orientation. The transform-style is set to preserve-3d. This is so that all children of the world will also have 3D appearances. If we didn’t set this, all children of the world element would be smushed into the world plane with no depth. Note: we’re also setting preserve-3d on every child of the world too. Firefox doesn’t seem to properly propagate this setting down the DOM tree… so this gets around that.

.viewport .world {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;

    transform: rotateX(-15deg) rotateY(-20deg);
}

.viewport .world, 
.viewport .world * {
    transform-style: preserve-3d;
}

Finally, the ground. Easy peasy. Set some positioning (absolute centered alignement), give it a background, and rotate it along the X axis so that it lies flat on the world’s X-Z plane.

.viewport .ground {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    margin-left: -50%;
    margin-top: -50%;
    background: #eee;
    
    transform: rotateX(90deg);
}

Try it out in a JSFiddle with the appropriate vendor prefixes and you should see a boring grey square skewed a bit with the table data inside.

Step 3 - The Histogram

Here’s where things get tricky… and fun! First, we want to set up the table to be the grid of the histogram. That’s easy. Just set some dimensions and borders on the tables, like you normally would.

.viewport .histogram-3d {
    width: 80%;
    height: 80%;
    margin: 10% auto;
    border-collapse: collapse;
    border-style: solid;

    /* make sure grid is raised above ground */
    transform: translateZ(1px);
}

.viewport .histogram-3d td {
    position: relative;
    width: 30%;
    height: 30%;
    padding: 10px;
    border: 2px solid #555;
    z-index: 0;
}

The tricky part is creating the bars. What we need to do is use some javascript to replace the numeric values in the table with some markup to act as the 3D bar. The markup we want to insert into every table cell looks like this:

<script id="bartpl" type="text/template">
    <div class="bar">
        <div class="face top"></div>
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
    </div>
</script>

The .bar element just contains the five faces (we don’t need a bottom face). To do the replacement, it’s easiest to use a template. We can store this markup in a script tag with a type="text/template" or similar. The browser won’t try to run this as javascript, and we can simply use .innerHTML to get the content. The javascript will look like this (using jQuery):

// get the template
var tpl = $('#bartpl').html();

// insert template markup into each td
// and set the font size to be the value of the td
$('.histogram-3d td').each(function(){
    var val = this.innerHTML;
    $(this)
        .html(tpl)
        .css('font-size', val+'px')
        ;
});

Pretty straightforward, but why are we setting a font size!? This is the magic bullet to control the size of the 3D bars.

We’re going to use dimensions relative to the font size (em), in order to control the height of the bars. So if we set a font-size on the bar element, the faces will resize appropriately to the correct height. Snazzy, eh? I can’t take full credit for this strategy, though.

So, let’s add the bar css. First, we simply resize the bar container to fill the table cell, and set a relative position. Then for every face element, set a background, an absolute position, relative size, and orientation in 3D space. The differences in color correspond to different shadings of each face. If you want to get fancy, you can use the Photon CSS lighting engine, but beware, I found some buggy behaviour in firefox when using it table elements. More about that later. Here’s the rest of the CSS.

.viewport .bar {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.viewport .bar .face {
    background: hsl(0, 100%, 50%);
    position: absolute;
    width: 100%;

    overflow: hidden;
    z-index: 1;
}

.viewport .bar .face.front {
    background: hsl(0, 100%, 20%);
    bottom: 0;
    height: 1em;

    transform-origin: bottom center;
    transform: rotateX(-90deg);
}

.viewport .bar .face.right {
    top: 0;
    right: 0;
    width: 1em;
    height: 100%;

    transform-origin: center right;
    transform: rotateY(90deg);
}

.viewport .bar .face.left {
    background: hsl(0, 100%, 45%);
    top: 0;
    left: 0;
    width: 1em;
    height: 100%;

    transform-origin: center left;
    transform: rotateY(-90deg);
}

.viewport .bar .face.back {
    top: 0;
    height: 1em;

    transform-origin: top center;
    transform: rotateX(90deg);
}

.viewport .bar .face.top {
    background: hsl(0, 100%, 40%);
    height: 100%;
    width: 100%;
    top: 0;

    transform: translateZ(1em);
}

Step 4 - Make it rotate!

The last step can be done in many different ways. We need to attach mouse/touch events to change the world element’s orientation in order to rotate the histogram.

Generally this means tracking the mouse/touch event coordinates and mapping them to an angle. This is how I’ve done it, but you can probably come up with a cleaner and more general way to do this, right? :)

var dragStart = {}
    ,dragging = false
    ,curpos = {x:100,y:-75}
    ;

var touch = Modernizr.touch
    ,$vp = $('.viewport:first')
    ;

$vp.on(touch?'touchstart':'mousedown', function(e){
  
    var evt = touch? e.originalEvent.touches[0] : e;
    dragStart = {
        x: evt.screenX + curpos.x,
        y: evt.screenY + curpos.y
    };

    dragging = true;
    $('body').addClass('noselect');
});

$(document).on(touch?'touchend':'mouseup', function(){
    dragging = false;
    $('body').removeClass('noselect');
});

$(document).on(touch?'touchmove':'mousemove', function(e){
  
    if (!dragging) return;

    e.preventDefault();

    var evt = touch? e.originalEvent.touches[0] : e
        ,x = dragStart.x - evt.screenX
        ,y = dragStart.y - evt.screenY
        ,amp = 0.2
        ;

    curpos.x = x;
    curpos.y = y;

    $vp.find('.world').css(
        Modernizr.prefixed('transform'),
        ['rotateX(',y*amp,'deg) rotateY(',-x*amp,'deg)'].join('')
    );

});

Caveats

Unfortunately, things get messier because of cross-browser support. I’m not even talking about IE. I’m talking about Firefox. Turns out 3D transforms won’t work with CSS table layouts in Firefox. This means, for Firefox (and perhaps other browsers), we need to reset the layouts of the table, tr, and td elements to use only block and inline-block display values… which is annoying. What I’ve done on this page is browser sniff for firefox, and add a body class no-3dtablelayout. Then I override the layouts within that scope like so:

/* don't use table displays... need to use a combination of block and inline-block. Eww. */
.no-3dtablelayout .viewport .histogram-3d,
.no-3dtablelayout .viewport .histogram-3d tbody,
.no-3dtablelayout .viewport .histogram-3d tr,
.no-3dtablelayout .viewport .histogram-3d td { 
    display: block; 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.no-3dtablelayout .viewport .histogram-3d tbody { height: 100%; }
.no-3dtablelayout .viewport .histogram-3d tr {
    text-align: center;
    height: 33%;
    /* fix grid */
    letter-spacing: -0.5em;
    margin-top: -1px;
}
.no-3dtablelayout .viewport .histogram-3d td {
    display: inline-block;
    height: 100%;
}

To add insult to injury, the result looks a bit ugly. Firefox doesn’t seem to be using anti-aliasing for the face edges. To make it look a bit better, we can apply a little hack:

.viewport .histogram-3d * {
    /* this improves jagged edges in firefox */
    outline: 1px solid transparent;
}

That’s all for now. I’d love to hear any other cross-browser issues you find.

Visualization of Corner Reflectors

2012-12-16T00:00:00+00:00

I recently made a little visualization to compliment the video about corner reflectors by Henry (MinutePhysics) and Destin (Smarter Every Day). It took me around 6 hours – mostly thinking time – using Raphael. You can visit the full version (and watch the video), or play with this embedded version. Enjoy :)

Very Simple CSS-only Proportional Resizing of Elements

2012-12-10T00:00:00+00:00

A while ago I posted about Proportional Resizing of Web Page Elements Using Only CSS. At the time, it seemed like the only solution… but fortunately a slightly counter intuitive CSS standard provides a much better way to get this same effect. Credit goes to Nathan D. Ryan for his solution on Stackoverflow.

The concept is nicely discussed in Matt Snider’s Blog Post… > Doing a little research, I was reminded that when you use percents to apply the margin of an element, the browsers determine the actual size of the margin by multiply the percent against the width of the parent node (this is true for margin-top, -right, -bottom, and -left). It is not based on either the height or width of the element that the margin is applied to. […] I was surprised to relearn that the padding is also relative to the width of the applied elements parent node. So using percentages with padding works exactly as it does with margin.

This could come in handy for a few things. It’s a good fact to note if you’re doing CSS work. For proportional resizing purposes, it makes matters extremely simple: Define the width of an element as a percentage (eg: 100%) of the parent’s width, then define the element’s padding-top (or -bottom) as a percentage so that the height is the aspect ratio you need.

For example, if I have a container with a child element like so:

<div class="container">
    <div class="child">
    </div>
</div>

I can use the following css to give the child element an aspect ratio of 4:3

.container { 
    width: 500px; /* pick whatever width you want */
}
.container .child {
    width: 100%;
    padding-top: 75%;
}

But, of course, if we put any content inside the child it will change the height and throw off our aspect ratio. So what we need is another element inside which is positioned absolutely over the child element which obtains its size. We do that like this:

<div class="container">
    <div class="outer">
        <div class="inner">Your content</div>
    </div>
</div>

and css…

.container { 
    width: 500px; /* pick whatever width you want */
}
.container .outer {
    width: 100%;
    padding-top: 75%; /* defines aspect ratio */
    position: relative;
}
.container .outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

And that’s it! All in all, very intuitive solution that uses a counter intuitive feature of CSS.

Here’s the full jsFiddle:

Quick Tip: Creating a "Draw" animation with svg paths

2012-12-04T00:00:00+00:00

Let’s say you want to create an animation that draws some kind of shape. Like watching a pencil draw a line on paper. Turns out this is really easy with SVG paths.

If you haven’t heard of SVG, you should check it out. It’s a well-supported way of creating complex shapes with DOM elements. RaphaelJS is a library that makes this process even easier by providing javascript methods to do complex drawings.

One way of creating a shape is by creating it as an SVG path. This is exactly what it sounds like. It’s a directional outline of a shape, or a way of drawing a curvy line from point A to point B. You can draw along this path with different stroke styles (solid, dashed, etc). The neat thing about creating a dashed line along a path is that you can control the length of the dashes. What happens if you make the dash as long as the line? Magic.

If you create a path, and then specify the dash length to be much greater than the path itself, you can animate the dash offset to give the effect of “drawing” along that path. Here’s how you do it:

Create a path (see RaphaelJS)
Set the properties: path-dasharray and path-dashoffset to be equal, and a pixel value much greater than the path itself (eg: 99999px). Let’s call this maxLen for now.
Animate the path-dashoffset from its starting value, to the value of the path-dasharray minus the path length (maxLen - path length). You can use jQuery for this.

Here’s a jsFiddle showing an example of this technique.

Quick Tip: Google Analytics Tracking for external links

2012-11-11T00:00:00+00:00

Here’s a nice snippet I’ve been using to track visitor exit flows on some of the sites I’ve built. You see, google analytics doesn’t automatically log what external link visitors click on to exit your site. You might want to know this if your site is trying to reach a certain goal of funneling visitors to a particular place on another server.

For example, if you’re trying to boost views particular YouTube video by directing traffic there, you want to know how effective your website is at doing that. So here’s what you do. You set up a bit of javascript to log a google analytics “event” every time users try to visit an external link (click). If you use jQuery, you can basically copy and paste this snippet anywhere into your code (after jQuery is loaded):

(function($, window, document){

$(document).on('click', 'a[href^=http]', function(e){

    var $this = $(this)
        ,url = $this.attr('href')
        ,newtab = ($this.attr('target') === '_blank' || e.metaKey || e.ctrlKey)
        ;

    window._gaq = window._gaq || [];
    
    try {

        window._gaq.push(['_trackEvent', 'Outbound Links', e.currentTarget.host, url, 0]);
        
        if (!newtab) {

            e.preventDefault();
            setTimeout(function(){
                document.location = url;
            }, 100);
        }
    } catch (err){}
});

})(jQuery, this, this.document);

This will detect whether or not the user has tried to load it in a new tab or if you’re using target="_blank" and accommodate for those outcomes. It will also work before domReady has fired because we’re using event delegation.

Enjoy :)

Sheep Bounce (like an ideal gas) for Science!

2012-10-25T00:00:00+00:00

After seeing the silly, yet addictive website, cat-bounce.com, I decided to quickly remix the idea - For Science!

Using artwork created by Henry Reich (of MinutePhysics), I created a small web app that allows you to play around with sheep that bounce around the screen. The sheep resemble how atoms might jiggle around in an ideal gas. My hope is that it sparks people’s interest to know more about ideal gases. The silly app could be the beginning of a question about physics, so I’ve placed a button leading to one of Henry’s videos in the side-panel.

Will this work to get people to watch more MinutePhysics? I’m not sure. I’ll have to wait until the analytics build up to make any assessment.

I see this as the beginning of a direction towards interaction as a learning process. I hope to build more highly-interactive web apps (with Henry) to engage people in the learning process. Ideally these interfaces would be much more active in education than Sheep Bounce, and would provide not just a top-down approach, but also a bottom-up. By that I mean: learning by interacting with the interface. More on this later…

Calculating the Acceleration of an Airplane using a Smartphone

2012-10-06T00:00:00+00:00

As a web developer who loves physics, I’m always looking for ways to use what I know about web browser technology to do neat physics experiments. A few months ago I was sitting in an airport ready to return home. I had been thinking about the device orientation detection capability of smartphones for a while, and was wondering what I could do with it. With airplanes on the mind, I decided to use the small amount of time I had to write a quick webapp to record the orientation of my phone during takeoff. Since I could write this purely in javascript, I could safely put my phone into “Airplane Mode” and continue to monitor its orientation. Javascript’s “localStorage” could also save the data I accumulated. With the orientation data, I could then get a rough estimate of the acceleration profile of the airplane during takeoff (or any other time, really).

The webapp I wrote in about 30 minutes is not worth putting up here. It basically involved a start and stop button for the data. But it did the trick. Don’t worry, soon I’ll write one that will be easy for everyone to load onto their phones and tinker around with acceleration measurements.

All I needed to do was place my phone on the armrest of the seat and click start. Here’s a graph of the data:

Not too shabby! It’s pretty noisy, but you can see the takeoff pretty clearly.

So, what are we measuring?

We’re measuring the perceived tilt angle of the phone. Normally, if you tilted your phone forwards and backwards, the phone would measure the direction of gravitational force relative to the screen. So if you placed your phone on a level table, it would measure gravity directly into the screen. This would give you a tilt angle of zero (in front-back, and left-right axes). When you tilt your phone, the phone will detect gravity at some angle, and be able to give you the measure of that angle. You can play around with that here, if your phone or laptop supports it.

But what happens during takeoff? Well, gravity is no longer the only force the phone detects. Now it’s detecting the combination of gravity and the thrust of the airplane. As the airplane is rolling along the runway, this thrust will be horizontal (perpendicular to gravity). If you add up these effects, the result is that the phone interprets this as a tilt. The amount of tilt measured can be easily calculated:

$\\tan(\\theta) = \\frac{F_{\\textrm{thrust}}}{F_{\\textrm{gravity}}}$

If we want to, we can divide the top and bottom of that equation by the mass of the airplane. Then we can put everything in terms of accelerations:

$\\tan(\\theta) = \\frac{a_{\\textrm{thrust}}}{a_{\\textrm{gravity}}}$

We have the angle, and the gravitational acceleration value (9.8 m/s/s), so we can get the acceleration of the airplane. The data I’ve got here is pretty noisy, so let’s just do a rough estimation. At around 140s, the angle fluctuates between 16 and 24 degrees. So let’s ballpark it at 20 degrees.

$a_{\\textrm{thrust}} = 9.8 \\\\ \\tan(20\\deg) \\\\ m/s^2$

… which gives us around 3.5 m/s/s.

How does this compare to the “actual” acceleration? Well, it’s hard to say what the real acceleration of the airplane was. This will depend on many factors; air resistance, number of passengers, … But still, we can estimate this from the airplane specs. For an A320, the thrust can vary between 111 - 120 kN, its operating empty weight is 42600 kg, and its maximum takeoff weight is around 77110 kg. So the maximum acceleration is maximum thrust divided by the weight while the airplane is empty:

$a_{\\textrm{thrust}} = \\frac{120 \\\\ \\textrm{kN}}{42600 \\\\ \\textrm{kg}}$

which is about 2.8 m/s/s. The minimum acceleration is minimum thrust divided by maximum takeoff weight, which gives you 1.4 m/s/s.

So, we’re a bit off, but remember, this is quite a rough estimate from the data. Aside from the noisiness of the data, one major caveat is that we didn’t take into account the angle of the phone when the airplane wasn’t moving (it wasn’t quite at zero). But it still gives you an idea of the fun physics you can do with your phone.

Stay tuned for more smartphone physics fun.

Your JavaScript is Slow - Common and not-so Common Optimizations

2012-09-07T00:00:00+00:00

Optimization considerations for any language can lead down a long and complex road. For JavaScript, things get even more complex because the same code can be run on a huge number of permutations of browser, version, OS, and machine (think mobile devices too).

Still, I was surprised how little information I found on the subject. A quick google search turns up a few great resources. To mention a few: An overview of Nicholas Zakas’s tips, Google’s “Make the Web Faster” article, and An older article by Jeff Greenberg.

These all are great resources, but they lack a few of the more surprising offenders in terms of bottlenecks. So I decided to post some information that I’ve discovered during my long hours on JSPerf. If you haven’t heard of JSPerf before, check it out.

What is it, you ask?

jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. But even if you don’t add tests yourself, you can still use it as a JavaScript performance knowledge base.

In other words, you don’t need to wait around for someone to benchmark a test for you. You can do it yourself! (aside: At a later date, I’ll try to write some guidelines for intelligently creating test cases.) For now, I’m going to go over some of the common and not-so common bottlenecks to look for while trying to optimize your code.

Most Importantly…

Firstly, Don’t optimize on the fly. The big reason for this is that your implementation may change as you develop your code… so you might end up burning hours on unnecessary optimizations for algorithms that you end up scrapping by the end. You should also go hunting for your largest bottlenecks first. You don’t want to spend hours optimizing in the wrong place. Use a profiler (like chrome dev tools) to find these bottlenecks.

Secondly, Don’t sacrifice readability for speed! That’s what minifiers are there for. You might come across optimization tips like “don’t use long variable names”, or “avoid creating unnecessary variables”… but I say forget that! You should be minifying your code. Always. Period. That’s the most important optimization tip you can take away from this.

Consider the following…

// sure... this...
var NumberOfFingers = 4 + 1;

// is not as fast as this...
var n = 5;

… the first option is more readable. Similarly,

// this is faster...
function toRad( deg ){
	return deg*Math.Pi/180;
}
//... than...
function toRad( degrees ){
	var radiansPerDegrees = Math.Pi/180;
    return degrees * radiansPerDegrees;
}

the second option here will make people much less frustrated when they try to understand your program. And when you put that second option through a minifier like Closure Compiler, look what it becomes:

function toRad(a){return a*(Math.Pi/180)};

So there.

Finally, Don’t trust everything you hear! Javascript engines are changing all the time, and some optimization tips that applied to certain browsers in 2009 may not apply now. And those that apply now, may not apply in a year. It’s best to test these things yourself.

Unsurprising (common) Optimizations

Loops

Ok. So. Let’s start with some easy ones. What’s wrong with the following for loop?

for (var i = 0; i < catPictures.length; i++)
	catPictures[ i ].comment = 'lolz';

You guessed it. We aren’t caching the length of the catPictures array. It’s being recalculated every single cycle of the loop. If you don’t believe me, try it on jsperf.

As for which type of looping method is the fastest… results may vary. Here’s a suite of looping tests on jsperf for your pleasure. Generally it seems that the standard cached length for loop is empirically faster than other loops (including while loops and especially built-in .each methods).

Object lookups

Here’s another one that might be a walk in the park.

for (var i = 0, l = ids.length; i < l; i++)
    myFramework.utils.addText( ids[ i ], 'text' );

The problem with this is we can speed this up by caching the addText method. Every time we use a . to dig deeper into our objects we loose time. Here’s some better code:

var addText = myFramework.utils.addText;
for (var i = 0, l = ids.length; i < l; i++)
    addText( ids[ i ], 'text' );

Note: this is especially useful when you’re using document.getElementById and similar methods.

Local Scope > Global Scope

Finally, here’s one that I found surprising at first, but it makes total sense. Consider the following code.

var Fn1 = 0;
var Fn2 = 1;

function nextFibonacci() {
    var ret = Fn1 + Fn2;
    Fn1 = Fn2;
    Fn2 = ret;
    return ret;
}

We can actually improve on this by cacheing the values of the variables that are outside the scope of that function. This speeds things up because the interpreter has to look for variable names up the scope chain until it finds what it’s looking for. If the variables are declared within the same scope… it’s faster. Here’s the optimized version:

var Fn1 = 0;
var Fn2 = 1;

function nextFibonacci() {
    var f1 = Fn1,
        f2 = Fn2,
        f3 = f1 + f2;

    Fn1 = f2;
    Fn2 = f3;
    return f3;
}

If you don’t believe me, check out the JSPerf for this optimization.

Avoiding anything `new`

The new keyword certainly has its uses and circumstances. But if you’re creating a bunch of objects, especially in a loop, you should try to avoid creating them with new. Instead of var thing = new myObj(), try just using javascript object literals: var thing = { ... }. It will vastly speed up your code. Here’s the JSPerf for new vs object litterals.

Surprising (uncommon) Optimizations

Function declaration vs. Function expression

In my countless hours of tinkering around on JSPerf, I’ve discovered a lot of kooky thinks to watch out for in terms of performance. One of the most basic is how you declare your functions! To create a function you can either do it as a function declaration or a function expression. Here’s the difference:

// function declaration
function foo(){
	// stuff...
}

// function expression
var foo = function(){
	// stuff...
};

// self-executing function expressions
(function(){
	// stuff...
})();
// or...
!function(){
	// stuff...
}();

You can visit JavaScript Weblog for some of the finer points on the differences between function declarations and function expressions.

So turns out, that function declarations are much faster to create, as seen from this JSPerf. So if you’re creating a helper function, you might as well declare it and reap some of the speed benefits.

Use of the `arguments` object

You know that ever-so-useful arguments object you can use inside a function to access the arguments? Yeah. Don’t use it unless you have to. There’s a significant performance hit. Even if you just put the word “arguments” in your function… even in code that will never run… you will see a performance hit. Here are the specifics of arguments object performance effects.

Clever ways around slow native methods

Have you ever wondered if array = array.concat(otherarray) is really the fastest way to concatenate an array? Well, it may not be depending on your situation. Specifically, if you don’t mind modifying the original array, you can certainly get a vast improvement in speed by doing the following:

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var push = Array.prototype.push;

push.apply(arr1, arr2); // arr1 == [1,2,3,4,5,6]

And here’s the JSPerf of this push-concat method. And even if you don’t want to modify the original array, you can perform an array copy of the original (with array.slice(0)) and use that one and it will still be faster!

Why does this work? It’s because the .push() method can push several elements passed as arguments (eg: .push(1,2,3,4)). So when you use it as the second parameter in an apply call, it’s like you’re doing: arr1.push(arr2[0], arr2[1], ...).

Another nice workaround that is even more dependant on the situation involves the situation of array element removal. If you want to remove an object from an array, an easy way to do it is:

myArray.splice( index, 1 );

But if you don’t care about the order then a faster method would be:

if ( index === (myArray.length - 1) )
	myArray.pop();
else
	myArray[index] = myArray.pop();

It’s a very particular circumstance, but still, a great concept to keep in mind. Here’s the JSPerf.

Putting it all together

If you want to see how this all fits together, I’ve created a quick implementation of a PubSub library to show what kind of effect these optimizations can have. The actual usefulness of this pubsub implementation is questionable, I made it more for instructional purposes. Here’s a codepen.io of the pubsub implementations. What I did was create two versions of it; an unoptimized version, and an optimized version (using the previously mentioned suggestions). I then created some test cases to test for instantiation time and execution time. Here is a JSPerf of the side-by-side performance results. You’ll probably find that the graph won’t help you, you should check the tabular version of the results and look at how the unoptimized/optimized versions of each operation compare.

Happy coding.

Better Content Editing in Wolf CMS

2012-08-31T00:00:00+00:00

Originally, I created this blog using a modified version of Frog CMS, but soon upgraded to Wolf CMS which is a fork of Frog under active development. I thought that Wolf would bring about huge improvements in the backend design, and while it improved slightly, one major gap still stood out: the page editor.

The Wolf page editor sucks. All it is is a text area element. Don’t get me wrong… I’m not hoping for a TinyMCE sort of thing… I write in Markdown which is pretty much text anyways. But there are those times when I want to write code snippets, and having the tab key pull focus outside of my writing area is annoying to say the least. Not to mention the lack of syntax highlighting.

Fortunately, being a developer means you can always have your way (as long as you put in the work). So I decided to make a Wolf CMS plugin that uses Code Mirror for page editing. Free for download, obviously. All you need to do is drop it into the Wolf Plugins directory and activate it.

It still lacks some features I’d like to add. I’m sure you’d probably find some nice-to-haves of your own. But the code is on GitHub, for your forking pleasure. Enjoy.

Education isn't a place you go, it's a thing you do

2012-07-30T00:00:00+00:00

Spend any time in the technology industry, and you’ll begin to notice “working from home” is becoming more commonplace. Large and small tech agencies are slowly opening up to the idea of letting their employees work remotely. A day or two a week, I build websites in the comfort of my own home. With all of the recent developments in technology, it’s very easy to keep up to date and connected without going into an office. Some technology companies don’t even have an office at all.

Strangely, I never thought about this kind of a process in the context of education. But this article in the Wall Street Journal, “My Education in Home Schooling”, made me wonder… can and will education begin to make this switch too?

“Imagine that your high-school junior spends half of every day at the brick-and-mortar school up the street. Two afternoons a week, he logs into an art-history seminar being taught by a grad student in Paris. He takes computer animation classes at the local college, sings in the church choir and dives at the community pool. He studies Web design on YouTube. He and three classmates see a tutor at the public library who preps them for AP Chemistry. He practices Spanish on Skype and takes cooking lessons at a nearby restaurant every Saturday morning.”

I think we tend to subconsciously fall into the habit of thinking about “education” as a place that you go, rather than a thing that you do. I remember near the end of my high school years, I decided I was curious about the guitar. I happened to type in “guitar chords” into google, not knowing what I’d find. It turned out to be a never-ending library of “How to” articles and resources. I finally realized that learning new skills was something I could do on my own. I didn’t have to wait for school to get around to teaching it to me. It was a very liberating feeling.

Online repositories like MIT’s Open CourseWare are bringing complex subjects out of the walls of universities. I’m not saying that any kid can learn something like Quantum Field Theory by browsing the internet, but there’s no reason that great learning can’t take place out of the classroom. And using the new tools that internet technology provides naturally facilitate this.

There’s a lot of effort these days to bring technology into the classroom. And sometimes it gets a lot of bad press (that I don’t actually think hits the mark). Perhaps we’re thinking about this the wrong way around. Maybe, it should be less about bringing technology to the classroom, and more about using technology to bring learning out of the classroom.

The author offers the term “roam schooling” to describe this idea. Decouple the idea of education from any particular institution, location, or person. The process of learning a particular subject or skill can freely draw from whatever resource is most suitable at the time. Why not have an education system like this, even in part? It seems like a very attractive idea, especially since it can easily adapt to the student’s individual goals, interests, and aptitudes. How can we build on this idea? What resources would students, teachers, and parents need to make this a viable option?

Easy access to information, of course, is not equal to education… but it certainly helps. A great teacher is more of a “learning facilitator” than simply a lecturer or an encyclopedia. And some of this facilitation and guidance may or may not be able to come from parents. I don’t know what a “roam school” education system would look like… but it seems to me that we’re struggling to fix a broken education system largely isolated from the technological shifts that are changing every other aspect of our lives. Technology may not be the whole answer… but maybe we’re just asking the wrong question.

Edit: Looks like the most recent TED talk is about this very subject…

Proportional Resizing of Web Page Elements Using Only CSS

2012-06-26T00:00:00+00:00

There are times, throughout the development process where you are surprised to find something that really should be easy. But it isn’t.

I came across such a thing recently while developing a responsive website for a client. One of the components involved a calendar layout that had to resize depending on the browser width. Usually, this is as easy as setting a percent width on the parent element, but this calendar had thumbnail images for each day that needed to be resized to preserve the aspect ratio. This meant that the whole calendar had to preserve its aspect ratio (more or less). This is actually a bit more tricky that it first looks. Let’s take a look.

EDIT: I’ve recently discovered a better solution for this. I recommend this new method over the one described below.

Something that doesn’t work

Consider our friend the simple DIV element.

<div class="outer"></div>

with styles…

.outer {
    width: 100%;
    height: 100%;
}

Some may think that setting a percentage height on the element will solve the problem. This is of course, wrong. The height will be a percentage relative to its parent height. Meaning the height will be completely independent of the width. That’s not what we want.

A solution

You could use JavaScript. That will certainly work. You’d have to monitor resize events and set the height and width appropriately. But that’s a bit cumbersome and a CSS only solution would be much lighter on resources. What we can do instead is use something that already resizes proportionally in the browser: images! We can use an image to fill our container and force the appropriate height and width to preserve aspect ratio. Then we can position our content absolutely and have it expand to fit the width and height that the image has specified for us. This would be the code:

<div class="outer">
    <div class="inner">
        Lorum Ipsum
    </div>
    <img src="http://placekitten.com/500/500" class="scaling-img" /> <!-- don't specify height and width so browser resizes it appropriately -->
</div>

and the css:

.outer {
    position: relative;
}
.scaling-image {
    position: relative;
    visibility: hidden; /* make sure it's hidden */
    width: 100%;
    min-width: 100%;
}
.inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
}

So, this will work. But notice we’re loading a specific image in here that we’re not actually displaying. This uses unnecessary resources. So let’s improve on this by using data URIs.

Data URI to the rescue

Data URIs, among other things, allow us to place image data inside the HTML markup. To make sure we’re loading the least resources possible, let’s try our solution with the smallest possible image, which turns out to be a plain white 1x1 pixel GIF image:

<img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" />

Now our image comes with the aspect ratio of 1:1. In order to get different aspect radios for our content area, all we need to do is add some padding to our scaling image to get the appropriate aspect ratio. For example, if we want a 1:2 aspect ratio, we add a top padding of 50%. If we want a 2:1 radio, we’ll have to add a top margin of -50%.

Here is the JSfiddle showing the full example code using this image to proportionally scale our content:

You’ll notice that the content is hinting at a tabular layout (like a calendar), but you can put whatever you want inside the inner element. I’ve tested this solution on Chrome, Safari, Firefox 3.6+, and IEs. It works on all except IE7 and below.

Errata

If you start resizing this example, you’ll notice that the inner boxes don’t quite match up to fill the width and height of our .inner element. This is due to rounding errors from the percentage calculation in CSS. If you want to avoid this, you’ll need to either use CSS3 flexbox layout, or use this equidistant object hack from CSS-Tricks.

Dancing for Science (part 2) - TEDx Waterloo Video

2012-06-23T00:00:00+00:00

Ever since we danced at TEDx Waterloo, I’ve been waiting for the video to get onto youtube. Especially since there were apparently technical difficulties with the live stream, and many friends weren’t able to see us dance. Fortunately, it’s finally here! (I’m especially pleased with how they’ve edited “Classical Physics” into the video).

Irresponsible Subway Poster Bible Messages?

2012-03-27T00:00:00+00:00

There has recently been a trend of religious and atheist organizations circulating posters and billboards that promote their respective world views. Christian posters generally claim that god is great, you should love him, islamic posters claim that Jesus is a prophet of islam, and atheist posters suggest that you can be a good person if you don’t believe in god. Atheist posters seem to get most of the criticism for some odd reason.

From time to time there are some racist ones, some pathetic ones, and some hilarious ones. Today, however, it was pointed out to me that a rather irresponsible one was circulating on the subway system here in Toronto.

Quote:

Dear Jesus, My mom and dad do drugs at home and it scares me. Will you help them stop? Thank you for hearing my prayer.

“Don’t worry about anything; instead, pray about everything. Tell God what you need, and thank him for all he has done. If you do this you will experience God’s peace, which is far more wonderful than the human mind can understand.” – The Bible: Philippians 40607 New Living Translation

Apparently, children who are afraid of the parent’s drug addictions should sit quietly and talk to themselves while they remain in a dangerous environment. What I think about religion is almost irrelevant to state here. This is a totally inappropriate and dangerous message to give anyone let alone children! Fortunately, I’ve been informed that action is being taken to remove this particular poster.

I looked through their website which displays 150 posters that they circulate on the Toronto subway system. Most of them are benign metaphysical claims and misguided life advice. If they want to put those up, fine… god bless. But some of them are genuinely questionable. Like this one:

Quote:

Dear Jesus, I’m scared of all the violence around me and my family. Will you help me please? Thank you for hearing my prayer.

“Don’t worry about anything; instead, pray about everything. […] etc.

And this one:

Dear Jesus, My grades are slipping at school and I’m having trouble concentrating. Will you help me please? Thank you for hearing my prayer.

“Don’t worry about anything; […] etc.

Sounds like that child has a learning disability. Perhaps he should ask for help from someone who exists? Or is ADD caused by lack of prayer?

In any case, it’s a moot point, because apparently “A thorough knowledge of the Bible is worth more than a college education”.

And if you get weary of life, you can just go be with Jesus… I hope they don’t mean what it looks like…

Again, I’m not saying that posters that are motivated by or contain bible quotes should not be allowed. I’m saying that the message matters, and more care should be taken to ensure that the messages any poster portrays won’t potentially cause harm to those who follow it.

Starbucks officially supports gay marriage

2012-03-26T00:00:00+00:00

Starbucks coffee is not my favorite, to say the least. I actually have trouble drinking their regular roasts… they taste burnt. There, I said it. But something new is brewing at Starbucks; support for marriage equality. I first heard about this from Coffee Loving Skeptic, that has a nice writeup of the situation. I think it’s worth quoting Starbucks’ official statement:

To: U.S. partners

Date: January 24, 2012

Re: A Message from Kalen Holmes: Starbucks Supports Marriage Equality

Dear partners,

Starbucks is proud to join other leading Northwest employers in support of Washington State legislation recognizing marriage equality for same-sex couples. Starbucks strives to create a company culture that puts our partners first, and our company has a lengthy history of leading and supporting policies that promote equality and inclusion.

This important legislation is aligned with Starbucks business practices and upholds our belief in the equal treatment of partners. It is core to who we are and what we value as a company. We are proud of our Pride Alliance Partner Network group, which is one of the largest Employer Resource Groups for Lesbian, Gay, Bisexual and Transgender (LGBT) employees in the U.S., helping to raise awareness about issues in the communities where we live and work.

For the last 20 years, our benefits program has offered domestic partner benefits in the U.S. These benefits include medical, dental, vision, prescription drugs and alternative health care coverage. All partners (part-time and full-time) in all work locations, whether in a store, a roasting plant or a corporate office, adhere to the same eligibility requirements for health coverage and have access to the same comprehensive health plans.

We are deeply dedicated to embracing diversity and treating one another with respect and dignity, and remain committed to providing an inclusive, supportive and safe work environment for all of our partners.

We look forward to seeing this legislation enacted into law.

Regards,

Kalen Holmes executive vice president, Partner Resources

Impressive. That makes me want to buy a Starbucks coffee. (Likely one of their clover coffees that are actually pretty good, if expensive).

Of course, as the saying goes, “If you aren’t pissing someone off, you aren’t doing it right”. Naturally there are a group of bigots who have started a “Dump Starbucks” campaign in the name of, so called, sanctity of marriage.

“We are today announcing a sustained public campaign calling on Starbucks to stop waging war against marriage, and the views of more than half its worldwide customers. Starbucks should be in the business of offering all its diverse customers a great cup of coffee, not taking sides against the views of its customers, vendors, and employees around the world.”

“Waging war”, eh? I find it tiresome that the “go to” rebuttal used when there is a difference of opinion now involves declaring that the other side is waging war. I’m not gay, and marriage is not my cup of tea (coffee?), but one shouldn’t need to belong to a particular demographic to support equality. I find it ridiculous that this is still an issue. I could go on, but it’s already been said by many people. For some very well thought out arguments for marriage equality, try this lecture.

As a counter attack, there is a petition going around to thank Starbucks for making a stand on equality that betters human well-being. You can sign the thank-you card here.

A Quantum Leap at TEDx Waterloo

2012-03-24T00:00:00+00:00

Fortunately, our show at TEDx Waterloo was a hit! The videos aren’t up yet, but will be soon. In the meantime, here’s the picture of our quantum leap. You can see some more pictures here.

It was definitely the largest crowd I’d ever performed for. Nerves were affecting our dress rehearsals the night before. At one point we were practicing the aerial (tossing the girls in a backflip) and the lights cut out! In the end it all came together, though.

If the response on twitter is any indication of success, we’re in luck. Searching twitter for some keywords you can find a slew of positive reactions. Some of my favorites are:

Jaw dropped when swing dancers explained quantum entanglement at #TEDxwaterloo. This cartoon on my fridge!yfrog.com/h4rfocnj
— Jane Mitchell (@janemitchell) March 22, 2012

Wishing my HS physics classes had featured Lindy Hop... amazing, Krister Shalm! #tedxwaterloo
— Taryn Graham (@gastronavigator) March 21, 2012

I think that was quite honestly my favourite part of #TEDxWaterloo yet!!! Awesome dance by #KristerShalm illustrating quantum entanglements
— Jacqui Laporte (@notrunningfast) March 21, 2012

Hopefully this will inspire people to look deeper into the physics of quantum mechanics. Maybe the image of dancers and magic will provide some sense of familiarity with these baffling ideas. Especially for those who feel more comfortable with dance than physics. Maybe we can get some domain cross-over… dancers learning physics… and physicists learning dance.

Swing Dancing For Science at TEDx Waterloo

2012-03-20T00:00:00+00:00

The past few months have been a buzz of excitement and exhaustion. I, along with several fellow swing dancers, have been working with physicist and swing dancer, Krister Shalm, on a project that mixes quantum mechanics and swing dancing! This project has been particularly exciting for me because, as some may know, I share Krister’s enthusiasm for science communication, physics and Lindy Hop. Being able to mix them together makes this really fun… and makes for some well caffeinated weekends.

The result of this project will involve dancing live on stage at TEDx Waterloo tomorrow. You can apparently watch it live here at 2:10pm (EST) on Wednesday March 21st. I can’t tell you what to expect, but perhaps I can say that Krister’s talk is one of the more difficult talks logistically… so I’ll let you draw your own predictions.

This talk is also the result of what has been dubbed “Project Q”. Which has enlisted help from swing dancers around the world to help illustrate some of the key concepts going into this TED talk.

Consequently, I’ve been able to apply some of my web development skills too! I built a little map that showcases the Project Q video submissions from around the globe. You can see that on the Project Q page too.

Nervous? A little bit. We’ll see how it goes.

Time to break out and dance…

For Science!

Fun with JavaScript and Device Orientation

2012-03-11T00:00:00+00:00

There’s some new “black magic” in the world of JavaScript… and its name is “device orientation”. This emerging feature allows JavaScript to monitor the physical orientation of the current device. This is not to be confused with the orientationchange event, which triggers when mobile devices change from portrait to landscape views and vice versa. No, instead, this means I can tilt my computer or phone or tablet and have JavaScript do stuff based on the way I’ve tilted it.

For a “wow” effect, take a look at this (ugly) demo I quickly whipped up – works on modern browsers only. There is a lot of ugliness in that code, but the idea is there. I can perform a physical action (tilt my computer) and interact with the virtual content in an intuitive way. Very satisfying.

How do I do this?

Firstly, I should point out the awesome article about device orientation on html5rocks. It’s got enough to get you started. Basically the idea is you subscribe to a deviceorientation event using document.addEventListener(). The event will pass along some information about the device’s current orientation. Results will vary depending on the device and the browser.

The information you can possibly have access to includes information from the accelerometer (tilt of the device) and compass information (direction on the earth). If you are familiar with Euler angles, then that will help. The information that the event passes back is essentially the Euler angles. Here’s a video showing a quick demo of what Euler angles measure.

In my jsFiddle above, what I’m doing is monitoring the angle gamma which corresponds to the left-right tilt of your device. Once I have that angle, I use some easy trigonometry to figure out the horizontal and vertical acceleration of virtual gravity relative to the viewport.

Still interested? Ok. data.lr * Math.PI / 180 converts the angle from degrees to radians so that I can put it into sin() and cos(). Those in turn, give me the amount of gravity in the horizontal and vertical directions when I multiply them by my total (virtual) gravity.

ay = a * Math.cos(data.lr * Math.PI / 180);
ax = a * Math.sin(data.lr * Math.PI / 180);

Free code, anyone?

I’ve been playing around with this device orientation voodoo for a little while and decided to write some AMD modules to make my life easier. One of them basically copies the code from html5rocks. The other (called device-gravity) gives you the projection of gravity along your device. It will give you the magnitude, angle, and x and y components.

“Projection of gravity? What does that do?”

I’m glad you asked. Imagine placing your laptop or tablet down on a level surface. Now place a ball on it. Right now – if the surface is very level – the ball won’t move. That means the projection of gravity is zero along the surface of your device. In other words, gravity points directly into the surface of your device. If you tilt your device, then the ball starts to accelerate. The projection of gravity along your device is the direction the ball moves, and the magnitude of the projection is the amount at which it accelerates.

Maybe a little demo is in order. This demo shows a projection-o-meter that shows you the projection of gravity. It also shows another example of what you can do with device orientation.

The code and documentation is on GitHub. Feedback is most welcome.

A Responsive JavaScript Event Binding Method

2012-02-19T00:00:00+00:00

I’ve recently been doing a lot of responsive web development work. I was building a component that could have several different states depending on the size of the viewport. Each of these states dictated different user interaction. For example, a mouse move interaction in one state could turn into a mouse click interaction in another. So what I needed was a way to easily activate and deactivate JavaScript events depending on the viewport size.

One way to do this (that isn’t so pretty) would be to monitor the viewport size and unbind and rebind the appropriate events between certain viewport size breakpoints. Similarly, you could manually add if() statements in the event callbacks to only use the callback if the breakpoint was the correct one. Neither of these solutions seemed easy enough to manage for me, so I came up with a more elegant solution.

The solution I came up with uses the window.matchMedia() method and jQuery 1.7 .on() event delegation. The idea in a nutshell is to add a listener to a media query using matchMedia() and add a classname corresponding to the state of your component. Then by delegating events based on that state classname the events will automatically be disabled when that classname changes.

First, let’s start with some very simple HTML markup:

<div id="my-component">
    <div class="inner">
        <div class="call-to-action">
            Do Stuff...
        </div>
    </div>
</div>

So here #my-component is the main container of your component, .inner is an inner wrapper that we are going to add the state class names to, and .call-to-action is what we’ll be expecting interaction events from. Now lets go to the javascript and define some states:

var breakpoints = {
    bp1: 'screen and (min-width: 0px) and (max-width: 320px)',
    bp2: 'screen and (min-width: 321px)'
    //etc...
};

So here we have two states. The first will be active in a viewport with a width less than 320px and the second will be active in widths larger than 321px. What we need to do now is use matchMedia to listen for these viewport changes and in the callback add a class name to the .inner element which corresponds to the currently active state. We do this by using the .addListener() method.

for ( var name in breakpoints ){

    // need to scope variables in a for loop
    !function(breakName, query){

        // the callback
        function cb(data){
            // add class name associated to current breakpoint match
            $( '#my-component .inner' ).toggleClass( breakName, data.matches );
            // potentially do other stuff if you want...
        }

        // run the callback on current viewport
        cb({
            media: query,
            matches: matchMedia(query).matches
        });

        // subscribe to breakpoint changes
        matchMedia(query).addListener( cb );

    }(name, breakpoints[name]);
}

Now whenever we change between these viewport ranges the .inner element will have a class name of either .bp1 or .bp2. All we need to do now is delegate the events we want based on these class names. To do this we use jQuery’s .on() with a query string that scopes the .call-to-action within either .bp1 or .bp2, like so:

$( '#my-component' )
.on({

        //click events
        click: function(e){ 
            $(this).html('You clicked');
        }

    },

    //query string to match .call-to-action but only in first breakpoint
    '.bp1 .call-to-action'
)
.on({

        //mouse events
        mouseenter: function(e){
            $(this).html('You mouseentered');
        },

        mouseleave: function(e){ 
            $(this).html('You mouse...left...');
        }

    },

    //query string to match .call-to-action on all EXCEPT first breakpoint
    '.bp2 .call-to-action'
);

And voila. Now these event callbacks will automatically only work inside their appropriate breakpoints. Adding more events or breakpoints becomes very easy to manage.

Note: Unfortunately there are a few problems with the window.matchMedia() implementation, as Nicholas C. Zakas outlines in his informative article. Fortunately, in the same article, he provides a solution to these problems through the implementation of a YUI module… which can easily be ported to jQuery or anything else. In future I’ll provide a jQuery implementation based on Zakas’ code.

Here’s a jsFiddle of the above code so you can see how it works. I have used Zakas’ fixes for firefox, so there are a few lines of extra JS in there to deal with that. Try resizing the result screen and clicking and mousing over!

Font Smoothing Detection... Modernizr Style!

2012-01-25T00:00:00+00:00

I recently have been playing around with Google Webfonts which allow you much more freedom in font selection on the web… for free. I’ve been using Google Webfonts on this very website, which is why the fonts are so pretty… at least I think so.

There is one downside though. Sometimes you’ll find that awesome font you want to use, and it looks great in OSX, but when you check how it looks on Windows… you can be quite disappointed.

What’s going on!?

Well, it turns out Windows and OSX have different default ways of rendering fonts. Roughly speaking, glyphs of a particular font are stored as black pixels or white pixels. On a high resolution medium this isn’t a problem… but on a computer screen, simply using black and white pixels can lead to jagged edges.

This is where font smoothing comes in. Font smoothing algorithms use semi-transparent pixels to smooth out these jagged edges. Whereas OSX uses something called Quartz font smoothing, Windows, it seems by default doesn’t use any font smoothing. (Although you can turn it on by going to Control Panel->Display->Appearance->Effects on XP, for example).

How do I make my fonts look nice on the web?

Fortunately, there’s a way to detect font smoothing using a little javascript. This method was the product of some great investigation by Zoltan Hawryluk, a strong proponent for better web typography.

The code he’s provided is great and works out of the box… but I, being a fan of Modernizr, wanted a way to detect font smoothing as a Modernizer test. That way, I could just plug the test into my head of my website and use css classes to display particular typefaces depending on whether the user has font smoothing enabled.

I’ve rewritten the font smoothing detection algorithm as a Modernizr test you can cut and paste into your website. Without further ado, here it is:

// The following is adapted from...

/*
 * TypeHelpers version 1.0
 * Zoltan Hawryluk, Nov 24 2009.  
 * 
 * Released under the MIT License. http://www.opensource.org/licenses/mit-license.php
 * 
 */

Modernizr.addTest('fontsmoothing', function() {
    // IE has screen.fontSmoothingEnabled - sweet!      
    if (typeof(screen.fontSmoothingEnabled) != "undefined") {
        return screen.fontSmoothingEnabled;
    } else {
        try {
            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement("canvas")
              , test = false
              , fake = false
              , root = document.body || (function () {
                    fake = true;
                    return document.documentElement.appendChild(document.createElement('body'));
              }());
            
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise 
            // Safari Windows does not report correctly.
            canvasNode.style.display = "none";
            root.appendChild(canvasNode);
            var ctx = canvasNode.getContext("2d");

            // draw a black letter "O", 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
                for (var i = 1; i <= 32; i++) {
                    var imageData = ctx.getImageData(i, j, 1, 1).data;
                    var alpha = imageData[3];

                    if (alpha != 255 && alpha != 0) {
                        test = true; // font-smoothing must be on.
                        break;
                    }
                }
            }
            
            //clean up
            root.removeChild(canvasNode);
            if (fake) {
                document.documentElement.removeChild(root);
            }
            
            return test;
        }
        catch (ex) {
            root.removeChild(canvasNode);
            if (fake) {
                document.documentElement.removeChild(root);
            }
            // Something went wrong (for example, Opera cannot use the
            // canvas fillText() method.  Return false.
            return false;
        }
    }
});

And here it is on jsFiddle with an example usage:

I haven’t yet implemented this on my website, but expect prettier fonts for windows machines (without font smoothing) soon…

The Ten Secular Commandments (dot com)

2012-01-20T00:00:00+00:00

Amidst the craziness that is “work”, I have managed to find the time, not only to build one website (this one), but TWO! Behold, The Ten Secular Commandments. It’s still in the works, but it’s there, and functional.

Why?

Well, it started when I heard about the Richard Dawkins Foundation Social Media Contest… or Video Contest… I don’t know what they’re officially calling it. The idea came after seeing one of the promotional videos, which described the contest as an effort to come up with a new version of the Ten Commandments. So I thought, who am I to develop ten commandments that govern anybody? It makes much more sense that these commandments be constructed collaboratively – this is the “age of the interface” after all. So it seemed natural that I use one of my primary skills to help… web development.

Quoting from the about section of the website,

The Ten Secular Commandments is a living document, giving the free-thinking community a forum for creating moral guidelines that draws on mankind’s greatest innovation: the scientific method. It allows people to collaboratively suggest, discuss, and continually tweak a set of commandments so as to create a moral framework that isn’t derived from doctrine.

These commandments can change, as new evidence is uncovered about the human condition and how best to maximize well-being.

They are participatory, obliging no one to be governed by any rules they could not help create.

They are peer-reviewed. Users can make critiques, suggest modifications, or recommend/disagree with posts and suggested commandments submitted by others.

They will not be policed. We hope that a framework will emerge that is generally appealing to everyone to follow.

It would be nice to win… but I more hope the website gets used and proves to be a productive effort for a cause I care about.

Simple Javascript Templating

2011-11-24T00:00:00+00:00

Suppose you need just a little bit of templating functionality, here’s a code snippet for you:

/**
 * Very simple find/replace template.
 *
 * Optional filter function that is used on tags with three curlies. Ex: `}`
 * 
 * @function {mixin} Application.template
 * @param {string} t templateable string
 * @param {object} d data object
 * @... {string} yourKey containing value to replace
 * @param {function(value)} filter a filter function that is passed members of `d` that are templated by triple curlys
 * @return {string} string with templates filled
 * @author [Jasper Palfree](http://wellcaffeinated.net)
 * @license [GPLv3](http://www.gnu.org/licenses/)
 * @example
 * This will return the text: `this is a template!`
 *
 *

 * 	template("this is a ", {what: "template!"});
 * 	
 * @example
 * This will return the text: `this is a template!`
 *
 *

 * 	template("this is a ", {nested: {what:'template!'} });
 */
function template(t, d, filter){
	var data = d;
	var ret = t;
	
	var segments = ret.match(/\\{?\\{\\{[a-zA-Z$_][a-zA-Z0-9_.$]*\\}\\}\\}?/g);
	for(var x=0, len = segments.length; x < len; x++){
                    var tags = segments[x].replace(/[\\{\\}]*/g,').split('.');
		var id = tags.shift();
                    var repl = (tags.length > 0)? arguments.callee('+tags.join(',data[id],filter) : '+data[id];
		if(segments[x].match(/^\\{\\{\\{/) && typeof filter === 'function'){
			repl = filter(repl);
		}
		ret = ret.replace(segments[x], repl);
	}
	
	return ret;
};

What can you do with it?

Well, let’s say you have some data in javascript that you want to put into the DOM.

// mimicking retrieval from data source
var entries = [
    {id:'1', data: {title:"Title1", content:"<p>This is an entry</p>"}},
    {id:'2', data: {title:"Title2", content:"<p>This is another entry</p>"}},
    {id:'3', data: {title:"Title3", content:"<p>This is yet another fracking entry</p>"}}
];

What you can do is set up a template in your HTML, by placing it in script tags and specify a type such as type="text/html". For example, you may do something like this:

<script type="text/html" id="tpl-entry">
    <div class="entry">
        <h2></h2>
        <div class="content">
            }
        </div>
    </div>
 </script>

Now you can retrieve the inner html of that script tag and use it as the template for your data, like so:

var el = document.getElementById('entryWrap'),
    tpl = document.getElementById('tpl-entry').innerHTML,
    html = ';
for(var x in entries){
    html += template(tpl, entries[x]);
}

If you like, you can also add a filter function that can filter any data in the template called with a triple-curly.

Here’s the full example usage on jsFiddle.