Greg's Blog

helping me remember what I figure out

Setting Up Favelets

| Comments

I first came across the term favelets when I started reading Zeldman’s web site. At first I did what I often do, and just ignored it, but as I spent more time on the site I saw quite a few references to it and especially on some of the sites that were mentioned in his columns. Mainly Tantek’s Log seemed to have an abundance of them.

So what are they? Well they are a small applications that can reside in your favourites/bookmarks or on your browser toolbar. And what do they do? Well quite a lot, anything from displaying the div structure of a document to helping validate your HTML code. And all this from within the window of your browser.

Ah!! So how do I use them? Well as indicated you can add them to your toolbar or set of bookmarks, and by clicking on the selected favelet you execute the mini application. Here is what I did (all based on How to use favelets, which demonstrates how to set up favelets for IE.) for Mozilla. First things first, right click on your toolbar and select new folder from the pop up. Then open up the bookmarks tab under Personal Toolbar Folder and expand your newly created favelets folder.

OK now you are ready to add favelets to your browser and you do it by just selecting the favelet you are after in the page and dragging it to your favelets folder. Pretty easy. Now to use them simply go to the page you would like to run the favelet against. Once the page has loaded, click on that favelet in your favelets folder. The app should execute and the page will render differently displaying whatever it is the favelet was supposed to do.

For example one of the favelets I particularly like is the Show and label divs with ids favelet which gives you an on the fly view of the page structure. Obviously there are many, many more and I am only just discovering these, if you come across any useful ones why not let me know?