FRESH01

Things have been pretty quiet around here due to the recent holidays and getting back into work mode thereafter. So, to get things moving again, I thought I would share a few of my favorite Firefox add-ons.

Firstly, for those who don’t know what Firefox is, it is a free web browser. It is a great (and in my opinion way better, but let’s not go there…) alternative to Internet Explorer, Safari, Opera, etc. The great thing about Firefox is that it allows you to install third party add-ons that enhance the features of Firefox. There are thousands to choose from on their website. Listed below is 5 add-ons that have increased my productivity and just made my job as a web designer much easier.

1. Web Developer

This is one of the most comprehensive add-ons I have come across. It installs a toolbar just below the address bar. On this toolbar there are various drop down menus with a huge variety of web development tools. A few examples of what it can do:

• Disable/enable stylesheets
• Outline different HTML elements
• View cookies
• Resize the browser window to specific dimension
• View HTML form details

The list really goes on and on, so rather than me listing every feature here, try it out for yourself.

2. CSS Viewer

This is an add-on that I use everyday. You install it and then activate it by selecting it from the tools menu. When you mouse over elements in a HTML web page, the add-on displays a hovering box that lists all the CSS properties of that specific element. It even shows ID and class names.

3. JSView

The JSView add-on allows you to view the source code of all JavaScript and CSS files that are externally linked to a HTML page. The add-on adds a small icon in your browser (you can set the position of the icon via the add-on’s options). When you click the icon you get a list of all the JavaScript and CSS fileslinked to the page and you can then open them individually. This add-on is great for those “How did they do that?” moments.

4. SearchStatus

This add-on displays the Google PageRank, Alexa rank and Compete ranking of the current web page via three little icons in your browser window(you can set the position of the icon via the add-on’s options).

5. HTML Validator

This add-on validates HTML using the Tidy validator. A icon is placed on the statusbar displaying the condition of the page you are viewing. The red x icon means there are errors within the page, the yellow warning icon indicates warnings, and the green check icon indicates there are no validation errors in the HTML. I like this add-on because I can immediately see when there are validation validation errors in my code and also what the errors are.

Well, there you go. My descriptions are brief, but I have included links to all the add-ons where you will find full descriptions. I hope this list was helpful to you. Feel free to recommend your favorite add-ons in the comments!