Command-Tab

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

Or, if you prefer to copy-and-paste, here is the code:
javascript:void(function(){var s=document.createElement('script'); s.src='http://code.jquery.com/jquery-latest.js';s.onload=function(){var h=$('jQuery Loaded');h.css({backgroundColor:'red',border:'5px solid white',color:'white',fontSize:'24px', fontWeight:'bold',fontFamily:'Verdana, sans-serif',position:'fixed',top:'100px',left:'100px;', padding:'10px'});$('body').append(h);h.fadeOut(1000,function(){h.remove();});}; document.getElementsByTagName('head')[0].appendChild(s);}())

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.

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.

Works with:

• Firefox 3.*

Tested on:

• Firefox 3.0.1 Mac
• Firefox 3.0.1 Windows XP
• Firefox 3.0.1 Linux (Ubuntu)

Release History

• Widerbug 1.2.1
  Released on Sept. 13, 2008
  Merged Firebug 1.2.1 changes for Firefox 3.
• 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.)

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.