5 Nifty Plugins for Firefox, from Your Friendly Neighborhood Lithuanian

When I first starting working at Genuine Interactive, I asked a random question of Genuine’s many web-gurus, who know infinitely more about web development than I do. The particular guru I queried was a Lithuanian MySQL database programmer named Jimbo, who in addition to having a penchant for quoting from the movie The Hunt for Red October, often relates to me, in his thick Russian accent, stories of what life was like in Lithuania.

Before Jimbo attempted to address my question, he pointed out that I lacked all of the great tools I could be using that would enable me to easily answer my question myself. So I pass on Jimbo’s wise recommendations to you!

HTML ValidatorHTML Validator. The validator installs a small, unobtrusive icon at the bottom of your Firefox status bar, indicating whether the site you’re looking at is valid or not, how many errors have caused it to fail validation, and where in the source code the errors are located. Be sure to select the “SGML Parser” when you install the plugin. The validator checks markup against whatever DOCTYPE you specify, so it works for any flavor DOCTYPE—transitional or strict.

Web Developer ToolbarWeb Developer Toolbar. After using this plugin, I find it hard to imagine what development was like without it. The Web Developer Toolbar provides a plethora of tools that allow you to test various aspects of your website before it goes live, right in Firefox. Here’s a list of some of the things it can do:

• Allow you to see how your website performs
  • if javascript is disabled
  • if CSS is disabled
  • if images are disabled
  • when viewed at different resolutions
• Disable your cache, so you can preview your pages without having to worry about old edits popping up
• Outline or display various elements of a page (like headings, tables, links, depreciated elements, etc) that are not immediately (or normally) visible, so you can easily make sense of a site’s structure upon first glance
• Analyze forms

On top of these features, the Web Developer Toolbar also has the ability to push your site to the w3c validator (for both HTML, CSS, and XML feeds), as well as push your site to accessibility validators to test compliance with Section 508 and WAI.

CSS ViewerCSS Viewer. A must have when it comes to developing stylesheets—the CSS Viewer enables you to hover over elements of a page and magically view the CSS properties assigned to each element in a helpful popup window. I find the CSS Viewer invaluable to debugging browser compatibility issues; it’s much easier when you can literally see what’s going on in your page when you desperately need to figure out where stupid Internet Explorer is adding padding to some obscure element you forgot to account for.

FirebugFirebug. Think of Firebug as the web developer’s magnifying glass. Like the Firefox CSS Viewer, Firebug enables you to visually locate elements of your HTML code by mousing over those elements on the page. In a property window, Firebug lays out your page’s hierarchy and shows you all the properties associated with each element in your page. What’s more, Firebug allows you to actively edit a page that’s on the web so you can preview what your changes would look like before you even implement those changes in your markup. Definite wow-factor for any web developer! But don’t forget to implement the changes, of course, when they do pan out as you wanted.

FireFTPFireFTP. Stop using a third-party client to upload your pages to the web! FireFTP, which integrates directly into Firefox, can do all the things your everyday FTP client can do without forcing you to leave your browser.

Sekmes! Geros kloties! And happy coding!