Last week I wrote a blog about our picks here in the office for favorite Firefox add-ons. The add-ons I included were geared towards general Web use, but since many of the suggestions I got from the CP team were related to Web design and development, I thought the best idea might be to save them for a second blog entry. Well, here it is: CommonPlaces’ Top 7 Firefox Extensions of Web Designers and Developers.
Firebug – Firebug is truly one of the Web Designer or Web Developer’s best friends. It allows you to edit, monitor and debug HTML, CSS, and JavaScript live on any webpage. There are many people that couldn’t imagine their lives without Firebug. This is a true must for the Web developer.
Pixel Perfect – This one is unique because it’s an extension of an extension. Pixel Perfect is an extension of Firebug, and to use Pixel Perfect, you must first have Firebug installed. Once Pixel Perfect is installed, you can take an image file, and place it over the current webpage. The most common use of this is to compare a composition to a developed webpage, but I’m sure you’ll find other great uses for this add-on.
Dummy Lipsum – This add-on only does one thing, but it does it well. Often when we are building a site we will put lorem ipsum text around the site as placeholders for actual text. With the Dummy Lipsum extension, this dummy test is just a mouse click away. You can set the amount of text you would like for different types of text fields. Just right click in the desired field, select Insert Dummy Lipson, and you’re done.
YSlow – YSlow was developed by Yahoo!, and stated simply, it answers the question, “Why Slow?” YSlow analyzes the current page and offers suggestions on how to make them faster based on Yahoo’s rules for high performance web sites.
LORI (Life of Request Info) – LORI will give you the hard numbers of how fast (or slow) your site is. The numbers that LORI provide will a) tell you if your loading time is beyond what is acceptable, and b) provide a baseline to measure changes that you make to the site.
Web Developer – Web Developer is a collection of tools for the Web developer (go figure!). These tools give you control over CSS, images, forms, cookies, and other aspects of the pages you’re working on. I couldn’t list all of Web Developer’s functionality here, but download Web Developer and try them for yourself.
PageDiff – PageDiff can compare two Web pages and report back the differences between them. In certain situations this extension can be quite helpful. Just click “Start DIFF” on the first page you would like to compare, and “Show DIFF” on the second. A window will appear with a side by side comparison of the two pages’ source code, with the differences highlighted.
