Playing around with animation and layers

One day I just woke up and had to make this. I collect limited edition screen prints, and one of my first Artist I started collection was Daniel Danger. The layering effect of screen printing lends itself perfecting to layering elements in an animation.

Feel free to scroll through this animation I made of a print.

Using Mustache Templates for Javascript : Practical Examples


Mustache.js is awesome for making HTML templates in an MVC framework, and I’ll tell you why.  Previously I had used underscore.js for templating and it allowed you do pretty much anything you wanted.  This would invariably end in templates with business logic and data-massaging code embedded in “the view”.  Mustache is the drill-sergeant of templates : It only allows it’s own logic tags, and is not going to take any bullshit from you soldier!

Sir! Yes Sir!

Now rather than being a pain to use Mustache is actually refreshingly simple and lightweight, but also incredibly powerful.  Since the documentation ranges from “great” to “meh!” (see partials).  I thought I’d list some <blink>WORKING</blink> examples of real-world mustache usages:

Example 1 : Binding a primitive variable (No JSON structure)

This one isn’t particularly “real world”, but it’s a great place to start.. you have a variable.. jsut one.. and you want to bind it to a template. As your variable won’t have a name, you need to say “just bind the data”… that is what {{.}} does.

Try the example

Example 2 : Binding an Array of primitive variables (Array structure)

This one is a real world example.  Your web service returns you a complex object, but all you are interested in is binding to one array inside that object.  Rather than pass the whole structure in.. you just pass in the array.. but the array has no name.. how do you reference it?  with the {{#.}}{{/.}} loop command.

Try the example

Example 3 : Binding an Array of Name/Value Objects with named Properties

Moving onto our most realistic example so far.  Building a <select> with objects that are bound to a data object.  In this case, we emit our one-time select tag and then inside it, loop through our named “data” property and bind it’s properties by their names of “value” and “text”.

Try the example

Example 4 : Binding a data object and a localization (L10n) data object joined in a wrapper object

This is a simplistic example of a real world problem we were solving with templates.  Our page labels all had to be localized, and the label text was stored on the server and delivered to our web pages as a javascript object.  This l10n object would then get wrapped in a data object with a sibling object that would contain the user data.

The template would render both the label as well as the data at the same time.

Try the example

Example 5 : Binding a data array to an anonymous (lambda) function

The reason I like Mustache over, say, Underscore is because it doesn’t allow for any embedding of code in your template. It forces you to have a nice clean View. Sometimes, however you do need to process data, or perform a lookup based on a key.

In the Real World, I have used this functionality to lookup a localization string in a dictionary, based on a key, and if the data is missing, then show a “missing data” flag for that label.

Try the example

Example 6 : Binding a data array recursively to a template

It took me hours to get this one working originally, then I lost it, and had to re-write it. It then only took me about 15 mins, and most of that was making the data structure! Once you understand how ti works, it’s very easy.

When you are planning on rendering data recursively, you need two templates (or the same template twice), the first is your master wrapper template, and then when you call Mustache.render, you provide a third parameter, which is a JSON object of all your sub-templates you will be referring to by name.

When you want to call you sub-template, you use the {{>subtemplate}} syntax, and it will render. To get recursiveness, your sub template must also then refer to itself inside it.

Try the example


Mustache has an OK document called mustache(5) , but this document which is specifically for javascript is both more detailed, and doesn’t have syntax errors.

Signs you Work in UX

As I was reading through this article, I couldn’t believe how much I related to some of these points. Reposted and highlighted with the signs that I have personally experienced 😀

15 Signs you Work in UX

  1. You’re totally comfortable around one-way mirrors
  2. Redesigning a call center application sounds like fun to you
  3. Your spice rack is organized by frequency of use and is within arms-reach of the stovetop (and re-organized on a bi-weekly basis)
  4. You enjoy responding to questions with questions
  5. You wear a point-of-view camera when you go to the supermarket
  6. You take time to explain signage and labeling shortcomings to store clerks and airport attendants
  7. You rage at ambiguously designed traffic signals
  8. You actually read the manuals of things you buy, but only to look for errors and mistakes
  9. You can’t use any interactive device without analyzing its interface
  10. You still cannot explain your job in one sentence to your grandma (I got close.. I described it as “the psychology of User Interfaces and Interaction”, but then she didn’t know what a User Interface was!)
  11. To you, card sorting is not a poker trick
  12. You are immediately tempted to write an expert review whenever confronted with a weird check-out process
  13. Your mom is a persona
  14. A horrible user experience causes you physical pain
  15. You encounter online surveys while browsing the web and automatically start making screenshots


CSS border-box FTW!! Now with Sass and Compass!

From Paul Irish’s blog entry…:

One of my least favorite parts about layout with CSS is the relationship of width and padding. … If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. … Anyway, I have a recommendation for your CSS going forward:

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 

This gives you the box model you want. Applies it to all elements.

Now you can take this FTW layout moment and make it even more amazing by using Compass (with Sass) and making it a one-liner with no-need-to-type vendor prefixes!

*, *:before, *:after { @include box-sizing(border-box); }


From reading the comments, there appears to be an issue with doing this for images if the image also has a border.  If you use a 100×100 pixel image with a 1px border, the image will actually be scaled down to 98×98 pixels.  This could be a problem with some sites, so i would probably recommend adding another line like:

img { @include box-sizing(content-box); }

Anyway, if I hit any more problems with this, I’ll come back and talk about them.

Waiting for your web services? Hello JSON Mocking!

When we start a development sprint, as a UI / UX team, we will make sure that as a priority, that we identify all of the web services that we will need to consume. We then, define the parameters needed to call the service and generally, we will create a JSON object that we will expect the service to return us.

This helps us shorten the critical path by making sure that the service developers can prioritize their work efficiently, and also move development of web service stubs to the front of their work queue.  This process doesn’t always work perfectly and we are sometimes (often) in a position where the web service developers are days away from even making us a stub, so rather than postponing our own critical path work until later in our sprint, we can pretend we have a working web service using JSON mocking! Hooray!

The Tool : Mockjax

The library I use to fake a working web service is MockJax.  It is wonderfully simple.

  1. The library seamlessly wraps jQuery’s $.ajax command.
  2. You write your ajax call as you would if your service already existed
  3. In your page setup init function, you just once, setup an override based on the URL (and optionally POST type, etc), which can redirect to a function, or a static JSON text file, or another url
  4. When you call your $.ajax, the wrapper checks it’s override dictionary for a match, and if it finds one, it intercepts the call and serves your alternate mock data.