What are Favelets
What are they good for
More examples
How does JavaScript do this
Browser support
Resources - where to find Favelets
How to install Favelets - a different document
This is by no means a definitive resource on Favelets. It is simply a page to point my students to what I consider a great tool that I would like to expose them to. Check out the resources listed below for sites that are dedicated to the topic with extensive documentation.
What are Favelets
Favelets are small JavaScript programs embedded into a bookmark/favorite inside your browser. Do not let the JavaScript part threaten you! You don't have to be technically inclined, know JavaScript, or be a programmer to use this technology. All you need is a little understanding of what they are and how to install them when you find one you like. I'll point you to some resources where I know you'll find something to your liking.
Favelets are very cool! If you are a web designer, you will soon think these are the greatest thing since sliced bread! This is especially true if you know, or plan on learning CSS.
This document attempts to explain what Favelets are. In this document the example Favelets are embedded into the page as standard <a> links. But the real power of Favelets is the ability to embed these bookmarks directly into your browser toolbar so you can execute them on any page you are viewing. I've written a separate document which details how to install Favelets into your toolbar.
By the way, Favelets are also known as Bookmarklets in case you are planning to do a Google search to find more of them.
So, What are they good for?
JavaScript... it means that a web page need no longer be static HTML, but can
include programs that interact with the user, control the browser, and dynamically
create HTML content.
- JavaScript, The Definitive Guide, O'Reilly & Associates
This boils down to JavaScript having the capability at run-time to change the document window and temporarily alter the window contents. This is beyond the capabilities of standard HTML.
So lets say you are have a 30" monitor and view your pages at 2000 x 1540 resolution. But, you're developing a site for 800 x 600 users. Wouldn't it be nice if you could re-size the browser window temporarily to view the page as an 800 x 600 user will see it? Sure it would. Of course I'm ignoring the fact that at my resolution the text WILL be smaller and render differently, but there is still some use in at least seeing the the browser window in the same size as the client specified.
Enter JavaScript, which can literally re-size and re-position the browser window on the screen. Here a couple of Favelets that reset the screen to some common sizes. Click on one of the links below to change the size of the browser window.
Change window to 800 x 600
Change window to 1024 x 768
And here is one of my favorites... I've taken the Favelets above and altered them somewhat (because I know a little JavaScript). I'm constantly changing the size and position of my browser window depending upon what I am viewing. Sometimes I simply want to reset it to what MY perfectly sized browser window should be. Click the link below. It will re-size the window and position it 10 pixels from the left edge of the screen and 30 pixels from the bottom of the screen. Now my launchbar is visible on the left and the bottom of the window is slightly above that dammed hidden dock :)
Change window to Greg's default size"
But wait, there has to be more functionality than this?
Here are a few more examples with functionality which might be useful to web designers.
Ever wonder whether the page you are viewing is valid HTML or valid CSS? These two Favelets only works for pages that exist on a server, not for local pages.
Validate
this page
Validate
my stylesheet
It is often useful when developing a CSS layout (or when viewing the layout of someone else) to see style elements temporarily highlighted on the page. The following Favelet will outline all DIV elements on this page and display an ID for each container.
Remember that this is just a temporary rendering of the page using JavaScript. Click the Reload button to refresh the page back to normal.
There are Favelets available that display DIVs with IDs, DIVs with classes, tables, tables with cells, lists of images, images without ALT attributes, rulers, search boxes... and on and on.
Kevin Smith of centricle.com developed Ruler which allows you to drag a rectangular selection on the screen and receive instant feedback of the rect's boundary in pixels!
Press the ESC key or double-click to remove the ruler
So, how does JavaScript do this?
Here is a one line JavaScript program:
javascript:alert("Hello There");
If you copy the line above, paste it into the url bar of your browser, and press the ReturnKey, the program will be executed. A dialog box will be presented that will say "Hello There".
So a normal bookmark has a name and a location. The location is typically a web address, but it can be any protocol that the browser understands, including javascript:listOfCommands;
Again, you don't need to know JavaScript! Favelets are already made for you and you simply need to know how to install them in your toolbar so you can execute those scripts on the page you are viewing.
Browsers - Do they make a difference?
Sure they do. Here is a quote from the W3C regarding browser capability for their validation favelets:
Favelets depend on support for
javascript: URLs in your browser's Bookmarks feature, and each Favelet may depend
on support for a specific part of the JavaScript specification to work properly.
MSIE versions 5.0 and later, and Mozilla 1.0 and later - including browsers using
the embedded version of Mozilla, such as Netscape 7.0 - are known to support most Favelets.
Most browsers that have support for basic JavaScript and DOM also support basic
Favelets, but more advanced Favelets may require more complete DOM1 and DOM2 support.
Netscape 4.x is a lost cause in this regard, and with its poor support for standards
in general it is probably better to avoid it altogether.
This is a technology that a user employs on their local machine, not something that is embedded into a page that will be deployed. It makes sense to be using a newer browser with the most recent JavaScript and DOM support. In my opinion this means Firefox or Mozilla.
That being said, as I was writing this I noticed that many of my installed Favelets were not working. Probably a result of switching from IE Mac to Firefox about six months ago. Fortunately I've found that Jesse Ruderman has all my favorite bookmarklets that work in Firefox!
Note that some elaborate favelets will not work properly with IE 6 on Windows because the length of bookmarks is restricted to 508 characters. A decent site that distributes a Favelet will probably document any platform/browser incompatibilities.
Because Favelets are distributed as normal hypertext links, you can simply click on them to test them and observe what functionality they provide prior to copying them to your system.
Resources - Where can I find Favelets/Bookmarklets?
Here are a few sites with hundreds of Favelets. Many of them have detailed documentation as well as links to other sites that focus on the topic. These should get you started.
Jesse Ruderman - excellent, updated for Firefox
Celik Tantek's Favelets - developed for IE Mac
accessify.com
centricle.com - ruler, excellent
dmcritchie - good resource
pixy.cz
Bookmarklets.com - old
And of course a Google search for favelets or bookmarklets will display plenty of hits.
How to install Favelets
Very simple, and I've created a page with detailed instructions.