CIW Community - Get caught in the Web!

Perhaps the most exciting thing about Firefox is that it demonstrates CIW's intent to turn mere Internet consumers into Internet producers. While any 13-year old can dazzle an adult with true browser prowess, fewer people know how to turn Firefox into a true enterprise-level development environment. Eric Meyer, one of the fathers of CSS, never uses Adobe or Microsoft software to develop or design. Rather, he uses Firefox and a plethora of add-ons/extensions, available at Firefox's searchable Add-on page. Our Web developers and designers at CIW do the same thing. Below is a collection of add-ons that members of the CIW community have determined are useful:

• Fangs: A screen reader emulator. Displays the text of a Web page in exactly the same way a screen reading application would for an application that renders text into voice. Primarily meant to help ensure accessibility. For example, making sure your page renders well in Fangs can help you make sure sight-impaired people can access your page. Also, this tool would be helpful for making sure your pages can be rendered in mobile phone displays.
• Firebug: A very sophisticated add-on that allows you to validate and edit documents. Allows you to edit, monitor and even debug XHTML, HTML, and even JavaScript live on a page saved locally to your hard disk. Pretty cool stuff. Designers and developers polled by CIW have identified this add-on as extremely useful.
• YSlow: Sure, all of us know that we need to be careful to create pages and sites that download quickly. That's a priority right behind making sure they're compatible with all browsers and accessible by those with disabilities. But have you ever wondered why a page is faster or slower? This add-on will tell you why, according to Yahoo's best practices document on how to create (or even speed up) high-performance Web sites. There's another one of those long hyperlink sentences again!
• ColorZilla: If you want to manipulate colors and ease color-related tasks on a page you are developing, this is the tool to use. Designers and developers polled by CIW have identified this add-on as extremely useful.
• DOM Inspector: Used to inspect the Document Object Model (DOM) of a Web or page. You can also edit the documents directly (on the local system, of course). Also works on XUL applications.
• FireFTP: An FTP client that resides right within Firefox. Yet another FTP client? Yep. But this one's pretty convenient.
• Marc Guery's Html Validator: A solid HTML validator. Can be used offline. Can't tell right now what platform this thing works on; haven't used it in a while, as I tend to use Total Validator, Firebug, and Relaxed.
• HTML Validator (based on CSE HTML Validator): A validator brought to you by CSE HTML, a for-profit company. This fact sometimes bothers people, but the add-on is still free, and it's open source as well. Sometimes having a company support an add-on helps ensure the it remains current.
• Total Validator: An interesting validator, in that it doesn't just target non-standard code. It also does type checking, as well as WCAG-based accessibility checks. It's much more capable and current than HTML Tidy, for example.
• Relaxed the HTML Validator: Yep, another one. And no, this one wasn't designed by the band Frankie Goes to Hollywood. Thank goodness. Oops. Just aged myself. Anyhow, this is another strong validator. Designers and developers polled by CIW have identified this add-on as extremely useful.
• IE Tab: For Windows users who want to open an instance of IE from within Firefox.
• IE View: From within Firefox, allows you to open the current page into an instance of Internet Explorer. Helps ensure that your Web pages work well in multiple browser environments. Designers and developers polled by CIW have identified this add-on as extremely useful.
• Image Zoom: Have you ever wished that you could enlarge and view a particular image right from within your browser? Wish no more. This tool is excellent not only for end-users, but also for developers who need to drill in to an image and check out the finer details while developing.
• MeasureIt: Ever need to know the length or width of something on your Web page in pixels? MeasureIt will tell you, with a graphical ruler and all. Very cool. Brought to us by Kevin Freitas. Designers and developers polled by CIW have identified this add-on as extremely useful.

• Mozilla Accessibility Extension: I think it was primarily people with disabilities who wanted a convenient way to see content on a page. Developers have embraced it because it allows them to determine how well their code accommodates the disabled.
• NoScript: Meant as a way for end users to lock down Firefox so that it won't execute JavaScript or Java applets. Developers have embraced this add-on because it helps them find out what their pages look like in browsers and screen readers that don't support their code.
• SessionSaver: One of the many add-ons that restores your browser's state after you've closed it, or even after the browser has crashed. Restores everything, tabs and all. Useful for developers because most of the time we've got multiple windows open, and it's always nice to not have to remember where you were and exactly what you were looking at. After all, just because the computer reboots, why does a designer have to do a complete mental reboot? Designers and developers polled by CIW have identified this add-on as extremely useful.
• SpiderZilla: Downloads an entire Web site directory structure, including all XHTML, CSS, images. What's more, all links are saved as relative links, so you also have a nicely preserved linking structure.
• View formatted source: For developing CSS. Color-codes your source code and CSS information.
• Aardvark:Provides a pop-up menu that allows you to select and edit any element on a page. Designers and developers polled by CIW have identified this add-on as extremely useful.
• View Source Chart: Provides a hierarchical, color-coded graphical chart of your Web page. Excellent tool for determining the structure of your page.
• ViewSourceWith: Another add-on that is meant to turn Firefox into a development environment. In current development, and sports a particularly strong list of choices, including the ability to open the GIMP or any other application from right within the browser, as well as excellent CSS, JavaScript, and XHTML editing support.
• Web Developer: Turns Firefox into a development environment, just like Firebug, ViewSourceWith, and others. Particularly strong at CSS. Not sure that it's being supported right now as much as others (e.g., Firebug and ViewSourceWith).Designers and developers polled by CIW have identified this add-on as extremely useful.
• Blogging add-ons: Okay, so I just violated the nice, easy flow of the patterns all of these bullet points use. It's fun to drive editors crazy. Anyhow, this particular link is quite useful for all you bloggers out there who would like to get your posts up as quickly as possible.

Not Firefox add-ons per se
Below are a few tools that aren't Firefox add-ons, but can nevertheless become part of your development environment:

• Complex Table Inspector: For verifying that your tables are properly created. Meant to ensure proper accessibility. Brought to you by Juicy Studio, a group of Web designers and developers. As an added little benefit, here's an article from "Gez Lemon", the person(ality?) who created this add-on. Gee, think "Gez Lemon" is a developer/geek name? Maybe I should call myself "Geezer Zeppelin." How about "Juicy Zeppelin?" Ah, forget it.
• FirefoxView: Adds a "View this Page in Firefox" right-click context menu in Internet Explorer. Eases the task of viewing pages in multiple browsers, perhaps the primary repetitive task for any Web designer. Designers and developers polled by CIW have identified this add-on as extremely useful.
• The W3C HTML Validation Service: A terrific resource that allows you to validate your pages using an engine developed by the folks who brought you HTML and XHTML in the first place. You've got to have Internet access, but it's a great engine.