Here at Atlantic BT (we’re also known as ABT), the browser of choice for our designers and developers is Mozilla Firefox. The main reason for that is it empowers our web development team with a great deal of tools to help in the development process while properly rendering our code.

Firefox recently released Add-ons Collections to provide an easy way for users to share groups of related add-ons (also known as extensions) for their browser environment. This provides like-minded users the ability to share their collections of add-ons  similarly to the way Delicious enables users to share bookmarks.

The initial ABT Web Dev Collection consists of seven of the most essential add-ons in our web development arsenal. For this post we will highlight our current top five. From color sampling and screen grabbing to bug squashing and validating, this add-ons collection greatly improves our productivity and we hope you will find it beneficial.

Web Developer Toolbar

This add-on is considered a staple for web developers of all types. It’s the all-in-one solution where you can quickly disable styles, update CSS, and disable Javascript code. It gives you the ability to troubleshoot on the fly, where you can analyze or make changes to your source code and changes return immediately.

Firebug

Firebug’s developers have coined their add-on as “web development evolved” and we can’t agree more. Similar to the Web Developer Toolbar but different. It’s similar in the sense that you have access to all the same pieces to investigate, debug, etc. but it allows a WYSIWIG view of the inner workings of your web page. To list a few, you can: inspect and edit HTML, modify your CSS, monitor network activity, and quickly find errors.

HTML Validator

As web designers we all know and should strive for valid HTML markup. The HTML validator provides a quick and easy way for you just to do that. If you have error-free markup you get a nice green checkmark letting you know all is well. But if you have errors or warnings it will tell you exactly where in your markup you need to review. Having valid HTML helps contribute to better SEO rankings, browser rendering, and to future-proof your site.

Operator

If you are a web designer and have no idea what microformats are you better get to learning. Put simply, “microformats are a set of simple, open data formats built upon existing and widely adopted standards.” (Source: microformats.org) Microformats help us speak the same language when it comes to standards and as we move towards a semantic web (where we can search for topics  in a question format rather than keyword format) they will become a requirement. Operator gives you the ability to leverage and debug microformats. This is a necessary add-on as you are learning how to properly apply microformats.

ColorZilla

Do you need to quickly create a palette from a web image? Then ColorZilla is your add-on. With ColorZilla you can get a color reading from any point in your browser using an eyedropper tool. In addition you can add colors to your favorites, page zoom, easily adjust colors and paste into another program. A must-have for any web designer.

Be sure to download the new Mozilla Firefox Add-on Collector and then subscribe to our ABT Web Dev Collection to keep up to date with our tried and true collection of add-ons. As we come across other add-ons that we just can’t live without, we’ll add to our collection so you can stay on top of your web development.