Why Fling?
To understand the purpose of Fling, imagine a standard three-pane email client (to borrow an example from Seth Dillingham, whose work inspired Fling): When you click on a message you just received, several things happen:

• The mailbox unread count gets decremented
• The message’s unread indicator goes away
• The message row text goes from bold to plain
• The message content appears in the viewer pane

These actions happen with little, if any interaction between each other. All each needs to know is that you clicked on a given unread message. Using jQuery, it’s quite easy to put all four actions inside the same click handler function and be done in minutes. However, when your code base starts to grow, having all that code inside one event handler can make multiple triggers and cascading events cumbersome. There’s a better way to make things happen — Fling your events around.

A Basic Example
Start by including Fling on your page, along with jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fling.js"></script>

Then, use jQuery’s handy document ready to set up new Fling subscribers, and finally, publish the event:

// jQuery Document Ready
$(function() {
	// Subscribe to some_event_name
	$.fling('subscribe', 'some_event_name', function() {
		alert('Hello from Fling 1');
	});

	// Subscribe to some_event_name
	$.fling('subscribe', 'some_event_name', function() {
		alert('Hello from Fling 2');
	});

	// Publish some_event_name
	$.fling('publish', 'some_event_name');
});

When run, you should see two alerts pop up in sequence. The only relationship the subscribers have is that they both care about “some_event_name” happening. When publish was called, both did their jobs.

In Depth
$.fling() has four main functions:

• Create sets up an event without publishing it or subscribing any events. This isn’t used too often, as Create happens automatically when Publish or Subscribe is called.

  $.fling('create', 'myEvent');

• Destroy frees the memory occupied by the event and it’s subscribers when you’re done with an event for good.

  $.fling('destroy', 'myEvent');

• Publish notifies all subscribers that a given event happened. It can also pass data to subscribers through a second parameter. Publish can be called at any time, with zero or more subscribers, meaning your event can happen even if no subscribers care about that event.

  $.fling('publish', 'myEvent');

  $.fling('publish', 'myEvent', {my: "data"});

• Subscribe gets called when an event is Published. You can Subscribe to events that have not been Created or Published yet, as the publisher can arrive later via another script, if needed.

  $.fling('subscribe', 'myEvent', function() {
  	/* ...your code... */
  });

  $.fling('subscribe', 'myEvent', someNamedFunction);

  $.fling('subscribe', 'myEvent', function(event, passedData) {
  	alert(passedData);
  });

Give Fling a Try!
So, that’s it to Fling. There’s not a whole lot to it — you might even be surprised to see just how short the code is. Give it a shot, and see how your jQuery code can be better organized, called from multiple places, and even cascade on down the line.

Release History

• jQuery Fling 1.0
  Released on Dec. 4, 2008
  Initial release.

Released under the MIT License. Fling is short, sweet, and yours to hack. Improvements are welcomed!

A day ago, I stumbled upon the answer I was looking for on the Learning jQuery blog: a browser-ready jQuery-loading bookmarklet. For the uninitiated, a bookmarklet is a standard bookmark placed in your Bookmarks Bar, except it runs some JavaScript code instead of pointing your browser at a web destination. In this case, the bookmarklet manually fetches and inserts jQuery into the current page. I've modified the following version slightly to flash "jQuery Loaded" on the page when the load is complete, using the just-loaded jQuery, naturally.

To install the tool, just drag the following link to your Bookmarks Bar, and click it to temporarily install jQuery on whatever page you're visiting: jQueryize

After a few trivial changes to Firebug, I’ve modified it to open on the right side of the browser as a sidebar. With the stock plugin, you can achieve a similar layout by detaching Firebug from the current tab and moving its window in the same position, but this has a generally unwelcome side effect: the separate window doesn’t update when you switch tabs. With Widerbug, you can open the Firebug sidebar, and it will keep up with you as you switch tabs and maintain its width.

Release History

• Widerbug 1.5.0
  Released on January 25, 2010
  Merged Firebug 1.5.0 changes, for Firefox 3.6.*
• Widerbug 1.4.0
  Released on July 17, 2009
  Merged Firebug 1.4.0 changes, for Firefox 3.5.*
• Widerbug 1.3.3
  Released on May 25, 2009
  Merged Firebug 1.3.3 changes, for Firefox 3.0.*
• Widerbug 1.3.0
  Released on Jan. 8, 2009
  Merged Firebug 1.3.0 changes, for Firefox 3.0.*
• Widerbug 1.2.1
  Released on Sept. 13, 2008
  Merged Firebug 1.2.1 changes, for Firefox 3.0.*
• Widerbug 1.0.5
  Released on Jan. 19, 2008
  Initial release, for Firefox 2.*

(You may have to temporarily allow command-tab.com to install Firefox extensions. Also, if you’re currently using Firebug, please uninstall Firebug first, restart Firefox, and then install Widerbug, just to be safe.)

While you’re installing plugins, here are a few of my favorites that I recommend:

• ScreenGrab!
  Take instant captures of rendered pages
• Web Developer Toolbar
  The Swiss Army Knife of web developer tools, second only to Firebug
• Duplicate Tab
  Open a duplicate tab, history and all

(And for completeness, here is the Photoshop file for the above Install Now button.)