br-jquery: a jquery package for the browserify javascript packager for node.js

I published a node.js package to npm called br-jquery, which contains jQuery and provides an alternate path to downloading jQuery and putting it in a repository when starting a jQuery project. It is a lot like jquery-browserify, but it contains a newer version of jQuery (1.7.1) and has the minified version as well. Additionally it has a build script which fetches jQuery and a full example.

Browserify creates bundles from node.js-style CommonJS modules. It stubs out some core functionality so node.js modules with minimal dependencies can be used in the browser. Here is some JavaScript taken from the example, that creates a bundle:

var js = require('browserify')({
  require: {jquery: 'br-jquery'},
  entry: 'hello.js'

The require property is used to , and the entry property is used to include a module that will be run when the bundle is loaded. The entry module starts by requiring jQuery:

var $ = require('jquery');
$(function() {
  // manipulate the DOM here...

I really like the browserify way of doing things. Instead of adapting browser code to run on the server, it adapts server code to run on the browser!


jQuery 1.7.0 is out!

…and I like the new .on() and .off() API for setting up events.

I wrote some code that uses it, just for practice.

$.fn.tree = function(data) {
  var $el = $(this),
      html = [];
  function renderNode(node) {
    if (typeof node === "object") {
      for (var key in node) {
        if (node.hasOwnProperty(key)) {
          html.push("<li><strong>" + key + ": </strong>");
          html.push(typeof node[key] == "object" ? renderNode(node[key]) : node[key]);
  $el.on('click', 'strong', function() {

  name: {
    first: "Benjamin",
    last: "Atkin"
  location: {
    city: "Boulder",
    state: "CO"
  accounts: {
    social: {
      twitter: "",
      facebook: "",
      gplus: "",
      identica: "",
      rstatus: ""
    creative: {
      github: "",
      blog: ""

Nothing too fancy.


jQuery UI widgets

JavaScript is a prototyping programming language, and as such, has many different ways to define classes or create objects. If you try to search for a tutorial on object-oriented programming in JavaScript, you’ll find that each tutorial has its own way of doing things. It can be very confusing.

Fortunately, jQuery UI has a widget framework, that makes setting up object-oriented widgets easy. After using it, I wanted to use it for everything, until I find something at least as easy to use as it. I didn’t, however, want to include a large dependency like jQuery UI if I was only using it for its widget framework.

I was glad to find, after a little experimentation with the Build Your Download page, that I can get jQuery UI’s widget framework in a download of only 9.06 kb minified. You can get this by clicking Deselect All and checking UI Core. After that, the theme drop-down box should be set to No Theme.

I made a geocoding widget for Django in a project for a client using this. It simplified my code a great deal.

One thing it does that’s good for projects that might have a lot of custom widgets on one page (which was not the case for this one) is it takes care of using jQuery’s data() method, which stores objects in a way that is less likely to cause memory leak issues in Internet Explorer than storing objects using closures.

jQuery plugin: convenience

jQuery has convenience functions for events like click and keydown, and lets you create and use your own events with bind() and trigger(), but doesn’t provide a way to create your own convenience functions for custom events. I took several lines of code from the jQuery source and created a plugin that makes creating convenience functions as easy as calling $.convenience(‘nameOfFunction’). Then I can bind or trigger an event simply by calling nameOfFunction() on the selector. This should be apparent by looking at the demo source (the third link).

  1. jquery.convenience.js – plugin source (github)
  2. convenience.html – demo (my site)
  3. convenience.html – demo source (github)

The example shows one feature of custom events that I overlooked: propagation.