Widerbug for Firefox 3.5+ Friday, July 17th, 2009 at 7:23 PM
I’ve just updated Widerbug to 1.4.0, keeping in step with the most recent Firebug update. Most notably, this release is compatible with Firefox 3.5 and newer. Head over to the Widerbug download page to install it. Or, if you already have Widerbug 1.3.3, you should receive it via automatic update.
This entry was posted
on Friday, July 17th, 2009 at 7:23 pm and is filed under NerdLab.
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.
jQuery Fling Thursday, December 4th, 2008 at 9:30 PM
Fling is a simple but powerful jQuery plugin for dealing with multiple events using a publisher/subscriber model. jQuery handles the browser-native events, Fling manages them, and you write the code that’s left.
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
Released under the MIT License. Fling is short, sweet, and yours to hack. Improvements are welcomed!
This entry was posted
on Thursday, December 4th, 2008 at 9:30 pm and is filed under NerdLab, Programming.
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.
jQueryize Bookmarklet Thursday, March 13th, 2008 at 8:45 PM
While developing web applications at my day job, I've come to rely quite heavily on the jQuery JavaScript library. In fact, it's the client-side backbone upon which our company software is built. It comes as no surprise, then, that I sometimes find myself poking around in others' web application code with Firebug (or Widerbug) and wishing I had jQuery at my immediate disposal to perform manipulations with its succinct syntax and practical API.
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
This entry was posted
on Thursday, March 13th, 2008 at 8:45 pm and is filed under NerdLab, Programming.
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.
Widerbug: Widescreen Firebug Saturday, January 19th, 2008 at 4:41 PM
If you do any amount of web developing with CSS and JavaScript, it’s probably a safe bet that you use the Firefox and Firebug combo to test ideas, tweak appearance and behavior of pages, and debug problems when they crop up. You might also use a widescreen monitor to provide more screen real estate to flip between your code and the rendered output. In an arrangement like this, the open Firebug panel takes up precious vertical space, while spare pixels on the side go unused.
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:
(And for completeness, here is the Photoshop file for the above Install Now button.)
This entry was posted
on Saturday, January 19th, 2008 at 4:41 pm and is filed under NerdLab, Programming.
You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.
fmTuner: Last.fm for WordPress 
ADB Mouse Conversion 
iPod Super 
