David Chambers Design

I recently began learning Danish. I'm taking a weekly class, and the first week's homework involved listening to the conversations we covered during the lesson. I began by playing the audio files, following along in the Danish transcripts. I found myself wanting to listen to the difficult parts over and over, but scrubbing through a timeline is rather awkward.

It occurred to me that I could use iTunes to solve this problem. Normally, iTunes will play a track from beginning to end. It's possible, though, to specify a certain portion of the track to be played instead. By adding an audio file to a playlist many times and specifying consecutive portions (e.g. 0:00–0:02, 0:02–0:04.8, …), a track can be broken into manageable clips for more convenient navigation.

Here's the end result:

Helveticards are a set of über minimalist typographic playing cards by designer Ryan Myers.

I love these! I designed a set of playing cards several years ago while at university, but I certainly didn't think of doing this.

Via Laughing Squid.

Yesterday I used three things for the first time: Sass, Compass, and Ruby. To summarize:

• I ♥ Sass
• I ♥ Compass
• I ♥ Ruby

One's own site is a great place to play with new (or in this case, not so new) web technologies. I decided to get stuck in and manually convert the 1200 line style sheet from CSS to something a bit more awesome. This post documents the most interesting portion of that transformation, which involved this site's archives styles.

There's no shortage of blog posts which — like this one — provide an introduction to Socket.IO. Many, though, were written prior to the release of 0.7, which ushered in significant API changes. Here I'll provide examples of server- and client-side code using APIs provided by the current version (0.7.4 at time of writing).

A decorator is a function which takes a function and returns a function:

decorator = (fn) -> fn

Obviously, this doesn't do anything useful. It's the fact that a decorator can return a function which behaves similarly to the function passed to it that makes the pattern interesting. Commonly a decorator will simply wrap a function invocation in a check of some sort:

var loginRequired = function (fn) {
  return function () {
    if (!user.authenticated) {
      return window.location.replace('/login');
    }
    fn.apply(null, [].slice.apply(arguments));
  };
};

The above decorator could be used to "guard" actions that only authenticated users are permitted to perform:

var changeUsername = loginRequired(function (username) {
  $.ajax({
    type: 'PUT',
    url: '/api/1.0/users/' + user.id,
    data: {username: username}
  })});

var changePassword = loginRequired(function (password) {
  $.ajax({
    type: 'PUT',
    url: '/api/1.0/users/' + user.id,
    data: {password: password}
  })});

var deleteAccount = loginRequired(function () {
  $.ajax({
    type: 'DELETE',
    url: '/api/1.0/users/' + user.id
  })});

The CoffeeScript equivalent is quite a bit clearer:

changeUsername = loginRequired (username) ->
  $.ajax
    type: 'PUT'
    url: "/api/1.0/users/#{user.id}"
    data: {username}

changePassword = loginRequired (password) ->
  $.ajax
    type: 'PUT'
    url: "/api/1.0/users/#{user.id}"
    data: {password}

deleteAccount = loginRequired ->
  $.ajax
    type: 'DELETE'
    url: "/api/1.0/users/#{user.id}"

Decorators are commonly used in Python — which provides special syntax for "decorating" functions — but are rarely seen in JavaScript code. This despite the fact that JavaScript's first-class functions are ideally suited to the task. Perhaps CoffeeScript's lighter-weight function syntax will result in decorators making more frequent appearances in JavaScript code.