Unobtrusive Javascript with Dan Webb’s Low Pro

Unobtrusive Javascript means a lot of things to different people, so to explain Low Pro’s greatness, I’ll give you a few examples of what you can do. In the same way you use a CSS file to modify and HTML class’ style, you can now use Unobtrusive Javascript to modify an HTML class’ behavior. So instead of targeting different elements on your page to receive certain behaviors, as was the custom before Unobtrusive Javascript. So let’s say we have this little script to show a notification on your page:

// Shows notification message for 3 seconds.
function notify(message) {
  $('notification_label').update(message);
  new Effect.SlideDown('notification_bar');
  new Effect.SlideUp('notification_bar', {
    delay: 3,
    queue: 'end'
  });
  return false;
}

The really old way would look like this:

<!-- Inline "onclick" attributes are NOT a Good Thing -->
<a href="#" id="notifier_link" class="notifiers" onclick="notify('This is the message');">Click here to show the message.</a>

But everybody knows that inline “onclick” attributes are just as bad as inline style attributes. That’s why it was so great when prototype brought along Element observers. They let us do this:

// Observers are cool... sort of.
$('notifier_link').observe('click', function(event){
  notify('This is the message');
 });

The trouble was that we were still basically shooting HTML elements with Javascript behavior. If you wrote a Javascript and included it in your HTML document, you couldn’t just add a class name to your HTML elements to give them behavior the same way you give them style. No, you’d have to modify the Javascript to give behavior to specific page elements. And that’s where Low Pro comes in.

// Unobtrusive Javascript to the rescue.
Event.addBehavior({
  'a.notifiers:click':function(){
    notify('This is the message.');
  }
});

With that code, any page element with the class name “notifiers” will automatically pickup the behavior described in that script. Using CSS selectors to designate behaviors is technique I’m really starting to get into, and I’m surprised that more people haven’t picked it up

rcov: code coverage for Ruby

With Test Driven Development, your code usually has pretty good test coverage by default. Still, sometimes things slip through the cracks. If you’re wondering what your tests are missing, check out rcov. It runs through your test suite, then generates HTML docs that highlight any parts of your code that your tests aren’t running.

I use rcov with my Test::Unit tests, but it also has solid compatibility with the Behavior Driven Development tool RSpec.

Camping: A microframework

I used Camping to build patnakajima.com, as well as fun.patnakajima.net. It’s an incredibly simple MVC web framework implemented entirely in Ruby by Why the Lucky Stiff. Camping integrates with Mongrel, ActiveRecord, and all sorts of Ruby templating languages (Markaby, Haml). Give it a try. It’s fun stuff.