First of these was Google’s Ajax Libraries API. While worthless for when you need to be offline (as I ended up being, since the Borders where we met has no free wifi, and I am cheap/skint), it’s nice and easy to include scripts on your pages without needing to maintain the files yourself. Luckily I thought to download local copies and installed Google Docs offline shortly before leaving to meet with the dude.

The second interesting thing I picked up, I actually picked up after the meeting, as I both wanted to learn it and wanted to share with my friend. That something is How to Author a jQuery Plugin, which is what we’re going to look at today. We’ll be building a flexible drop-down navigation menu which will work with or without JavaScript thanks to CSS.

Here’s the working example: MultiNav

Previously, I discussed some of the fundamental ideas behind Gracefully Degrading Widgets, but let’s quickly delineate them again here:

• Focus on content above interactivity – if that means sacrificing the latter for the former, so be it
• Present most important content first – sometimes it is necessary to hide some content to maintain page layout, the most important still shows
• Write minimalist markup – this leads to fewer chances of screwing up and makes it easier on any consumers of your code
• Write stylesheets to hide interactive content by default, and override in your JavaScript

We’ll also be focusing on reusability and flexibility, and we’ll discover that part of this is covered by virtue of the fact we’re creating our widget as a jQuery plugin. jQuery plugins are automatically applicable to any selector style available in jQuery, and so our widget will immediately be available to instantiate among common classes of a page, or to elements with individually unique IDs. You can even apply multiple instances on the page at simultaneously. In addition to these flexible instantiation capabilities, we’ll be building the widget to take a number of options to use different effects, use different classes if the default class names are not appropriate or would conflict with existing names on the page, and so on.

On with the show already! First off let’s create some simple markup for our drop down menu and style it w/ CSS:

  <ul class="nav">
    <li><a href="#">Top Level</a>
      <ul>
        <li><a href="#">Submenus</a></li>
        <li><a href="#">Are Much</a></li>
        <li><a href="#">Less Prominent</a></li>
      </ul>
    </li>
    <li><a href="#">Menus Are</a></li>
    <li><a href="#">Most Noticeable</a>
      <ul>
        <li><a href="#">But Still</a></li>
        <li><a href="#">Quite Useful</a></li>
      </ul>
    </li>
  </ul>

Nice and simple!

  * { margin: 0; padding: 0;}
  .nav { margin: 50px;}
  .nav li { display: block; float: left; background-color: #ccccee; height: 50px; line-height: 2em; position: relative;}
  .nav li ul { display: none; position: absolute; top: 50px; left: 0;}
  .nav li a { display: block; text-decoration: none; padding: 10px;}
  .nav li a:hover { text-decoration: underline;}
  .nav li:hover ul {display: block; }
  .nav li ul li {display: block; float: left; width: 130px;}

Still simple!

Even with this alone, the example code will show simple hover-over submenus via CSS, in browsers that support it (all but IE6, I believe). This is where degradation comes into play. We want things to fail gracefully, so each of those top-level menus should be a link in and of itself, rather than slamming all the links into the submenus. This is a good failover.

So now that we’ve got simple menus, let’s add some action!

To animate a single submenu’s intro into the page, we might use code similar to the following:

  $(".nav:first > ul > li:first > ul").fadeIn();

Which uses an advanced CSS3 selector to grab the very first submenu (a ul element) of the first top-level menu item of the first nav. fadeIn() is a call to a nice pre-defined function of any element(s) returned by jQuery.

That’s all well and good, but what we really need to do is setup a hover effect to fade this menu in and out given the user’s interaction with it.

  $(".nav:first > li:first").hover(function(){
    $(this).children("ul").fadeIn();
    }, function(){
      $(this).children("ul").fadeOut();
  });

This sets up two anonymous functions to be triggered on mouseOver and on mouseOut. jQuery takes care of all of this. What’s important is understanding the selectors and the event assignment. We won’t go into detail about the selectors here, but definitely read the documentation and play with it. The hover function takes two parameters, each a function. The first will be run on mouseOver, and the second will be run on mouseOut.

So that’s a start. Our submenu is fading in and out. But what if you accidentally mouse off the submenu? The damned thing fades away instantly! To get around this limitation, we’ll use a handy built-in feature of JavaScript, setTimeout. This function takes as its parameters a function literal to be called after a specified number of milliseconds, followed by a timeout value in milliseconds. On mouseOver, we’ll set a class on the element, let’s call it “over”. On mouseOut, we’ll remove the class, and call setTimeout. After a specified amount of time, let’s say 500ms, we’ll check whether the class “over” is present on the top-level nav, and if it isn’t, we’ll fade it out. If it is (indicating the nav item has been hovered over again), we do nothing.

  $(".nav:first > li:first").hover(function(){
      $(this).addClass("over");
      $(this).children("ul").fadeIn();
    }, function(){
      var li = $(this);
      setTimeout(function() {
        if(!li.hasClass("over"))
          li.fadeOut();
      }, 500);
  });

This new code sets it up exactly as we’d like it for the first submenu content alone.

What we want to do is make this reusable, as much as possible, and also make it versatile. That’s where jQuery’s plugin system comes in.

jQuery plugins are like any other widget initializer code, only they automatically get to take advantage of jQuery’s fancy schmancy selector system. They should also be written using the function name jQuery rather than $, because jQuery optionally allows itself to be alternately aliased so that it can sit along side other libraries, which might also define a global function $. Both Prototype and MooTools do this, and still jQuery can run in combination with these libraries. If you were to use the $ function, you could likely be unintentionally calling the Prototype or MooTools selector function rather than jQuery’s.

Instructions on authoring jQuery plugins can be found on jQuery’s Web site. It all boils down to:

1. Respecting the “jQuery” function name over “$”
2. Defining your function as a property of jQuery.fn, and
3. Returning the jQuery object that it is called on. (this allows chaining calls, something near and dear to jQuery developers’ hearts)
4. To be incorporated as an official plugin, the plugin should be defined in a standalone file, named “jquery.[plugin name].js” where “[plugin name]” is your plugin’s name.

Let’s take a look at the next version of our code, the first as a plugin:

  jQuery.fn.nav = function() {
    return this.each(function() {
      var nav = jQuery(this);
      nav.find(" > li").hover(function() {
        jQuery(this).children("ul").fadeIn();
      }, function() {
        var li = jQuery(this);
        setTimeout(function() {
          if(li.hasClass("over"))
            li.fadeOut();
        }, 500)
      });
    });
  };

This is a very suitable, fine piece of code, and it’s even a plugin now. It’s even reusable, because it’s no longer tied to the “.nav” class. You can actually call it multiple times on a page, and using multiple selectors, and all will work just fine, independently:

• $(".nav").nav() works just like our old code, only now it’s a lot shorter.
• $("#topNav").nav() also works, only this is for a single unique element

However, it’s not very versatile beyond the selector bit. For that, we’ll need to introduce the concept of default options and overrides. jQuery provides a simple means of setting up default settings for a plugin that can be overridden in any call to it by passing in an options object. The options object concept is an echo of similar functionality in other programming languages: Ruby (via Hashes), Python (via named arguments) and other languages via similar constructs such as associative arrays. The idea behind it is that no one wants to have to memorize the order of parameters for a function, so don’t make them! Object literals allow you to specify their component properties in any order.

To obtain this functionality in jQuery, simply call jQuery.extend(), passing in an object literal for the default values, and the options object parameter from the plugin’s function. Through this, we can specify faster or slower fade effects, as well as change the actual effects called. This is the final version of our plugin, and the code is quite a bit longer.

  jQuery.fn.multinav = function(options) {
    var settings = jQuery.extend({
      effect: "fade",
      duration: 250
    }, options);
 
    var fade = {
      over: function(li) {
        jQuery(li).find("ul").fadeIn(settings.duration);
      },
      out: function(li) {
        jQuery(li).find("ul").fadeOut(settings.duration);
      }
    };
 
    var slide = {
      over: function(li) {
        jQuery(li).find("ul").slideDown(settings.duration);
      },
      out: function(li) {
        jQuery(li).find("ul").slideUp(settings.duration);
      }
    };
 
    var size = {
      over: function(li) {
        jQuery(li).find("ul").show(settings.duration);
      },
      out: function(li) {
        jQuery(li).find("ul").hide(settings.duration);
      }
    };
 
    var effect = {};
    switch(settings.effect) {
      case "slide":
        effect = slide;
        break;
      case "size":
        effect = size;
        break;
      case "fade":
      default:
        effect = fade;
        break;
    }
 
    // iterate over the elements obtained from the selector
    return this.each(function() {
      var nav = jQuery(this);
 
      nav.find(" > li > ul").hide();
 
      nav.find(" > li").hover(function() {
        jQuery(this).addClass("over");
        effect.over(this);
      }, function() {
        var li = jQuery(this).removeClass("over");
        setTimeout(function() {
          if(!li.hasClass("over"))
            effect.out(li);
        }, 500);
      });
    });
  };

Though this code is longer, it’s still quite legible. We’ve changed the plugin’s name to multinav to reflect it’s new, multi-functional nature The new benefit is that we are able to call on the plugin with alternate effects and timing, simply by passing in an object literal with alternate values from the defaults. Here are a few examples:

• $(".nav:first").multinav(); – this is the default behavior
• $(".nav:nth(1)").multinav({effect: "slide", duration: 100}); – this selects the second nav-classed element and performs a fast slideIn on hover
• $(".nav:last").multinav({effect: "size", duration: 1000}); – this selects the last nav-classed element and performs a slow size-in on hover

Using these ideas, you can build any number of plugins which, when handled correctly, can work alongside other libraries, can work under a variety of conditions and present different functionality based on the needs of the job at hand. Calling on a plugin is typically only one line of code. That’s a lot of power in one line. Not only that, but when using the practices of graceful degradation, your page will look and behave appropriately when interactivity is not possible in the browser.

Remember that any widget with interactive elements (form controls, ajax links, tabs, content which moves around or hides/reveals…) should either hide those interactive elements in the CSS and reveal in the JavaScript, or find a way to make use of the elements using the backend. This ensures the page does not contain any confusing, ineffectual controls which look as though they’ll bring about change on the page. In the case of ajax tabs, for instance, you have two choices: Hide the tabs altogether (certainly the easier route), or organize your content and backend technology so that the tabs work as static links to reload the page showing the appropriate (newly-clicked) tab content and hiding the other tabs. This is a bit more trouble, and if you can get away with showing only the most-important content in the first tab, I suggest taking that route.

Have fun writing gracefully-degrading jQuery plugins!

I also started messing with a few other Mac apps lately, namely iGTD and Quicksilver.

iGTD is a fast, keyboard-oriented todo list manager with priority and context switching. You can associate tasks with given projects, and it will also sync to external software/devices via iSync. I’ve now got my Treo syncing to iCal and iGTD via iSync. That iWorld video (if you didn’t follow the link on the Apple gods you owe it to yourself) had it right with the out-of-hand i-ness of Apple and Mac-tastic software. Developers need to drop the i and cross their Ts and move on with life. But I understand trends. sigh Anyhow, iGTD is freeware and works very fast once you get used to it. Let’s see how well it fairs in my daily usage routine. (I haven’t gotten used to seeing iCal pop reminders at me from stuff I put in my Palm yet. May have to disable the iCal bit. One alarm is enough, already!)

I have to say Quicksilver is immediately becoming my go-to app for anything in the world. (like TextMate is for quick coding as well as some power moves) I may have to look into writing some plugins for it, though, as immediately sending links from browser to buddies via Adium would be a great feature, and I was thinking of another one earlier that I just can’t recall now. (it is 4:35 AM) But Quicksilver is like Spotlight on meth: immensely faster, and smarter. It learns your nuances so that over time it retrieves the information you’re looking for faster. An example: I bring up the Quicksilver interface (Ctrl-Space) and begin my query by typing “text”. This brings up 6 results. Among these are a link to the Text Snippets site, TextEdit, and TextMate. As I’ve said, TextMate is quick becoming my weapon of choice for editing, so I see that as being my top choice after entering “text”. However, the Text Snippets link is top, for some reason. Perhaps it was indexed first. Regardless, after playing the search-and-run game twice and picking TextMate both times, Quicksilver has learned that this is my top choice. From there on out (assuming I never chose from among the other results) it will be safe to hit Enter, knowing that TextMate will launch.

But it’s smarter than that even. TextMate applies this preference-learning to shorter queries as well. So now, automatically it associates textmate with “t” for instance. It’s full of these things. The whole app was built on the philosophy of “acting without doing” and seems to achieve that lofty goal very well.

Speaking of TextMate, I’ve been playing a bit more. I like. Ctrl-Shift-Q runs a one-liner query on your localhost SQL db. Rad. Ctrl-Shift-A brings up a context menu with SVN actions. If you don’t know the keyboard shortcuts and triggers for a given bundle, hit Ctrl-Esc to bring up the menu you’d otherwise have to click for. (which I’ve been doing) So nice to have things so simple. One thing I keep wishing Eclipse had. For all of its power, Eclipse has no means for customizing its menus or adding buttons or even keyboard shortcuts for any menu actions. That’s just plain crazy. So in order to commit a file to SVN, you’ve got to right-click a file in Navigator or whatever file browser your editor uses (or alternately in an open document) and chose Team and then chose Commit, and who has that much time? Especially when Eclipse has 30-odd items bulging at the seams of every menu and submenu?

For more keyboard shortcuts and general usage on the included bundles, check this page of the online manual.

On an off topic, I’ve started writing my first WordPress plugin, Mobilator, which will generate a mobile version of your site and is fully configurable with custom stylesheet, number of posts visible on main index, number of comments visible on post pages, and custom header and sidebar options (these will have defaults and everything will be resettable) The plugin architecture is pretty cool, though I wish a few more functions were allowed to be overridden, or at least that their outputs could be filtered as well. Namely, I’d like to filter the entire contents of the header before it spits out a bunch of script tags which are wasting bandwidth on the precious (and not-so-spacious) CDMA connection from my Treo. I can already switch stylesheets by hijacking filtering on “stylesheet”, why can’t I filter the entire head? Anyway so to detect mobile devices I’ll be using the PHP Browscap class which I’ve played with before, but as of right now, it’s not identifying my Treo correctly. I’ve had brief communications with the author, and he has emailed me back already. Hopefully today (Sunday) I’ll have time to get in touch with him again and remedy the situation.

Also on an unrelated note, but simply to continue the tally (I swear I’m going to start scraping it directly pretty soon and build the Dowloads page for this site) my Cricket is at 3267 downloads. Awesome. And someone finally rated it! Yeehaw. Now to make the addition that’s been suggested.

A number of folks at the office have suggested booting the old laptop in Firewire target disk mode to enable drag and drop of all necessary files, but I’ve found that permissions bog you down in this setup. A number of important directories will be disabled to you unless you have the same user name and whatever other credentials it needs. In my case, I was moving over from a different login. So I found another way…

[EDIT: Certain things are missing... Follow the link for more info]

Rather than boot to target disk mode, I simply enabled Firewire networking (System Preferences->Network->Built-in Firewire, set both machines to use DHCP and click the Renew DHCP Lease button) and turned on Personal File Sharing on the old machine. (System Preferences->Sharing and check Personal File Sharing) The old computer then showed up under Network in Finder and I was able to connect to it as any resource, logging in like I do on the X Serve at work, only using my old login info for the old machine. By authenticating this way, I was given full access to the folders that would otherwise be unavailable to me through target disk mode.

Moving apps over from Applications to Applications was a breeze. There may be a few license numbers I’ll have to reenter somewhere down the road, but so far I think I’ve managed to slip past that issue altogether. The key to this (as well as retaining all of your personal data like Firefox (or Safari) bookmarks, Transmit Favorites, et al, is copying over the following two directories as well:

• /Users/yourname/Library/Application Support
• /Users/yourname/Library/Preferences

I’ve only used it briefly, but having seen Parallels flying on other workers’ MacBooks and envying them for months, I’m happy to have made the change. Eclipse boots in no time at all. It’s like butter.

Will definitely follow up on this in the days/weeks to come.

As a side note, my Ubuntu machine at home required a reinstall tonight as I’d stupidly neglected to document my password and hadn’t used it in weeks.

[EDIT: The following added Tues, April 10, 2007]

• Transmit passwords are lost. If you want to retain Transmit passwords, be sure to export your Favorites from Favorites->Export (go figure) and then reimport from the similarly-named Import option.
• StumbleUpon “Send to” addresses missing as well
• Yahoo Widgets settings were lost, but at least I have the widgets themselves. My Cricket is now sitting proud on top of other windows again!