User messaging with jQuery events

Something I seem to be re-implementing over and over again is a way of displaying user messages in response to user interactions. For instance, when form data is invalid, or a click on an element could not perform the desired action.

Using KnockoutJS, I had been using a messages object within my ViewModel, but that felt dirty: I always had to code in specific message handling. Having things hook into one another’s ViewModels became very messy.

The other day at work, I rediscovered django’s signals, and went a little nuts replacing other ways of doing things (often using callbacks) with signals. This becomes cleaner once you have multiple things that need to listen.

Signals are a bit like jQuery Events, and it occurred to me that I can do a nice messaging framework using them.

The general concept is this: you have an element in your page that you want to designate as the message display port. (Technically, you could have several: you can even set them up to filter, but that’s another story). You just set this up like (we’ll talk about the options later):

<div data-bind='messages: {}'></div>

Then, anywhere within your page, you have an element simply trigger an event. For instance, you might have this as an event handler:

// Foo
var eventHandler = function(evt) {
  var $target = $(;
  $target.trigger('message', {type: 'error', message: 'Oops!'});

It’s currently still under development. You can see where it is at now at messages.js. It is part of koui, which is a GUI framework that is built on top of KnockoutJS, but it can stand alone. It does depend on KO, ko.mapping, jQuery and underscore.js.

On UI sins

My sister likes to back up DVDs that her children use all of the time: they are old enough to change discs, but they tend to get scratched. So, I have been looking into backup solutions for her to use on her new MacBook.

I came across Aimersoft DVD Backup, and ran it. Not looking too bad to begin with.

The actual window, however, is appalling:

Aimersoft DVD Backup(Unregistered)

It is a little hard to see, but the window is not actually connected to the titlebar. You can actually see the objects that are in obscured windows in the gap between them!

Finally, the text from the close confirmation sheet just cracked me up:

Surely, they can tell if a copying task is in progress, and display a dialog then. If not, then just quit immediately!