« Back to Fireday

Aardvark

September 1st, 2006 at 4:00am — Rating: Firefox pointFirefox pointFirefox pointFirefox pointFirefox pointLink

Now here is a great extension for web designers and developers.

After installing the Aardvark extension, load a web page, right-click on the page, and click "Start Aardvark." As you mouse over elements on the page, you'll notice they have a red outline with a small tag and a class or id attached to it.

The following keys are active when Aardvark is running:

W Wider Select a wider area. For instance, if you have selected a table cell, pressing W will select the table row
N Narrower Undo the last "Wider" command
Q Quit Quit Aardvark (that is, stop selecting elements), until you restart it from the menu
U Undo Undo the last "remove" or "isolate" command.
R Remove Delete the selected element
I Isolate Delete everything surrounding the selected element
E Erase Clear the element of all content, while fixing its dimensions
B Black on white Set the element (and all contained elements) to be black text on white background
C Colorize Sets the element's background to a random color
V View Source Shows the source code of the element (with indenting and color highlighting)
D "De-widthify" Removes any fixed width values from the element (and any contained elements)

As you can see, the Aardvark is a web designers dream come true. After somone creates a prototype of a web page, you can delete certain items on the page to get a feel for what looks good and what doesn't. But don't worry. If you made a mistake, just refresh the page. You can also view the source of which class the designer used for that type of font.

I like this extension. I like it a lot. Designers and Developers can almost use the Aardvark as a primitive editing tool for web page design modifications. The Aardvark is one extension thats been in my arsenal for a week now and I don't think I want to part with it anytime soon.