pi.debugger is a new debug console that acts as a graceful counterpart to firebug.  I’ve  and Firebug is an awesome tool for debugging, hands down.  Unfortunately, it is Firefox specific and has to be installed on the clients machine.

Firebug lite is great, but it is extremely limited and provides little more than a logging console.  pi.debugger sits somewhere in between.  It’s not as full featured as firebug, but it does provide the ever useful evaluation console as well as a DOM browser.

Check it out here:

http://code.google.com/p/pi-js/

And test drive it here:

http://kodfabrik.com/app/pi.debugger/

Tab Boxes are one of the most ubiquitous and popular of widgets. They pop up in everything from news sites to accounting software and for good reason. After all, tabs are one of the simplest and most efficient ways to cram more into a given block of screen real-estate than would fit otherwise.

Ajax24′s drop tabs replace the normal tab-box behavior concept with a twist. THese tabs pull blocks of content down from a tab bar to make them available and float them above the background content. (think window blinds or drawers as opposed to tabbed sheets of paper). I have a few reservations about the use of a widget with such slightly unconventional behavior. But all in all, the smooth motions of the widget and it’s novelty surely warrant exploration in more playful interfaces.

You can find the widget at

http://www.flash-free.org/en/2008/04/05/e24tabmenu-–-menu-desplegable-ajax/

Ariel Flesler has released a successor to Jquery Scroll Show.

Why is this better than jQuery Scroll Show:

• Doesn’t alter HTML at all
• Content doesn’t need to be aligned
• Content doesn’t need to be of the same type (div vs img)
• Content doesn’t need to be of the same size.

You can find the new tool here:

http://flesler.blogspot.com/2008/02/jqueryserialscroll.html

Eric Meyer recently posted an interesting take on marking up and styling a timeline from static html.  In his case, a table was used to present a timeline featuring multiple points in a single swim lane.

Cool Trick

Working my way through his description of the code, I was most impressed by his creative use of title attributes in the CSS. Basically, by writing  CSS rules of the form:

#timeline p[title~="August"] {left: 62%;}

He uses the [title~="MonthName"] to determine where in terms of 1/12 of the year, the dot representing the event should be placed within the block representing the year.  This only requires the creation of 12 css rules for accurate placement. Since the title is standardized to be the date of the event, this allows him to take his queue for visual layout straight from the content being provided to the user.  Definitely a useful trick.

You can check out Eric Meyer’s Structured Timeline here:

http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/

Widget.Blender is a handy prototype class to smoothly animate a fade/morph transition between images

Features

• Start & Stop can be triggered by events
• Autosizing & Wrapping can be controlled
• Ability to set a standard base url / dir for all images
• Ability to start at any arbitrary image
• Ability to run arbitrary function before blend (Useful for setting caption to display along with image)
• Supported Browsers:
  • Firefox 2
  • Opera 9
  • IE 6
  • IE 7
  • Safari

Check out Widget.Blender at:

http://www.eternal.co.za/scripts/blender/index.html 

I recently discovered a fascinating prototype extension called LOAJAX. While the effect of the extension is a bit hard to describe, it’s immediately obvious when you try the demo’s with and without it. Basically, LOAJAX uses an iFrame crutch to make the browser display all of the interface elements associated with a page load.

How it works:

1. A normal AJAX XMLHttpRequest is triggered by the AJAX application.
2. LOAJAX creates a hidden iframe that points to a server script.
3. The browser displays loading behavior while the iframe loads its source.
4. The Server Script consists of a massive wait so the load never completes.
5. When the XMLHttpRequest is completed, LOAJAX stops the iframe load and removes it from the DOM.
6. The browser stops displaying page load indicators.

You can find more about LOAJAX and check out the demo here:

http://blog.loajax.com/

I covered the Prototype port of this plugin a while ago, but recently realized that I had neglected to cover the original version. jQuery corners is an excellent library for adding quick corner effects to your pages in a graceful and unobtrusive way.

Here are some highlights of the plugin’s capabilities:

• A whole slew of effects is available.
• The width and height of the adornment area can be changed to vary the effect.
• You can apply different effects to top and bottom corners, or apply an effect to specific corners.
• Boxes to be adorned are selected using the standard JQuery $() element selector function.
• No special markup is required; display falls back to unadorned corners when Javascript is off.
• You can define your own custom corner effects that the plugin will use.

Learn more about the plugin at
http://www.methvin.com/jquery/jq-corner.html

If you haven’t realized it yet, widgets are here to stay and definitely represent what is currently the most ubiquitous way in which the web has been brought to the desktop. Google Desktop’s Gadgets, Windows Sidebar, OSX’s Dashboard, Opera and the venerable Yahoo Widgets (previously konfabulator) all bring tiny, self contained web pages into the users desktop space. For most people, this is the first thing that comes to mind when you mention taking the web to the desktop.

Widgets, however, are a very small piece of the puzzle. While they overcome some of the limitations of the web by placing your site front and center inside the users normal computing environment and provide some level of escape from the omnipresent security sandbox, widgets just don’t provide much that transcends the traditional web environment.

Widgets do have a role to play in the emerging web ecosystem. They are a lightweight means of integration between sites and they do provide useful tools for the user. Unfortunately, while they do provide a level of convenience, they can also provide a pretty severe level of annoyance to users. Luckily, they are very easy for users to uninstall and users vote with their mice removing any widgets they deem too annoying.

So where do widgets fit in the hybrid web ecosystem? I’m not really sure. They are definitely a motivating force behind the creation of several robust api’s for enabling the integration of disparate platforms and sites. They can also do a great job of providing alternative light weight interfaces for traditional web sites by putting underused tools closer to the daily user experience.

In my mind, I can’t really rule them out for many of my projects. They’re kind of like the gravy at a holiday meal. Even if the turkey is as moist as a swamp in June, you still make it because someone may want it and it isn’t that much more work once you’ve gone to the trouble of cooking the bird.

I’m curious, how are you using Widgets in your projects?

Meet Proto.IPS a fast and easy prototype based combo box modeled after the gMail Chat Widget.

Features:

• Automatically saved when user clicks outside the widget (on blur)
• Ability to select predefined or enter new value

You can find it at Perfection Kills

We’ve seen several of these lightweight alternatives to the traditional full featured text editors lately.  NicEdit is a fitting addition to the collection.

 Features:

• No Library dependencies (Great when you only need a text area)
• Flexible interface sizing
• Under 10KB compressed
• Only 2 files (JS & Icons)
• Supports: IE 5.5+ / FF 2+ / Opera 9+ / Safari 3+
• Inline editing with remote tool panel
• Ajax Support
• Highly configurable button set

All in all, this is a nice widget that has several features not found in other Rich Text Editors.  A worthy addition to the Ajax ecosystem.
You can find NicEdit at http://nicedit.com/index.php