Borloz.com

There are a few web development tools that I find myself using on a regular basis, so I figured I would tell everyone else about them. Some of them are pretty widely used, so you may already be familiar with them, but here goes…

Firefox Extensions:

HTML Validator:

This one provides a nice, easy way to see if your pages validate using Tidy and OpenSP. When your page validates, it shows a green checkmark in the lower-right corner of your browser. If not, it will show how many errors and warnings it found. Viewing source will show you which line the errors are on, as well as the specification for each.

Another nice thing about this extension vs. others is that all of the validation is done locally. I often work on pages for my company’s intranet that are behind a firewall, and therefore, cannot be validated using the W3C validation website or other tools that go out to the Internet to provide validation. The W3C does provide a way to upload files, but to me, this is a pain, and is why I would rather validate locally.

Firebug:

This is the only Javascript debugger that I’ve found that’s worth anything. And believe me, this one’s worth its weight in gold. Anyone who has done any type of debugging of JavaScript without a debugger is painfully familiar with using alert() to display debug messages. And then removing them all is yet another pain. With Firebug, you don’t have to do this. It lets you step through the code, watch variables and set breakpoints. This beats pop-up boxes any day.

One of my other favorite features is the DOM inspector. This is invaluable when you have a complex set of styles and you are trying to figure out which ones are being applied to a particular element.

Web Developer:

This is, by far, my favorite Firefox extension. I can’t even begin to tell you about all of the features, so I’ll highlight some of my favorites:

View Generated Source (View Source > View Generated Source):

This is different than the standard ‘View Source’ in your browser. It allows you to view the source of the page in its current state; which means, if you manipulated the page in JavaScript, you can see the resulting HTML and figure out why the page no longer looks right.

Outline Current Element (Outline > Outline Current Element):

This feature outlines each element as you hover over it and is great for debugging CSS issues. For example, if you’ve got a div that’s not lining up correctly, you can hover over other elements around it to see if it’s getting hung up on one of them. As you hover, it also shows the elements ancestry (at the top of the window), all the way back to the HTML root element.

Edit CSS (CSS > Edit CSS):

Ever see a page in your browser and wanted to try changing the CSS to see how it would look with a different font or background color… or any other CSS property for that matter? Well, this feature lets you do just that. It doesn’t even have to be a page that you wrote or have access to the server it’s hosted on. You can go to any page and edit the CSS real-time at the bottom of the screen.

Disable JavaScript (Disable > JavaScript > All JavaScript):

I use this all the time to see how nicely (or not) my pages degrade for those users that don’t have JavaScript enabled. It’s a simple but incredibly useful feature.

Websites:

Type Tester

This site allows you to see what various fonts look like at different sizes, leading, alignments, word spacing, colors, etc. It’s a really quick way to see how things are going to look without coding the CSS. Even after you have chosen your options, you still don’t have to code the CSS by hand. There’s a handy ‘Get CSS’ link that generates the CSS for you based on the options you’ve chosen.

Colour Lovers (Color Pallette Chooser)

This is an absolute must for people like me who struggle with which colors to use in everything they create. It’s basically a site that allows users to submit palettes of colors that they think look good together. Users name their color palettes and votes determine the most popular palettes.

Colr.org

This is similar to Colour Lovers, but it has a few extra features. You can upload your own image or type in a URL and it will grab the color palette from the image or URL. It also has a pretty cool story behind how it was created.

Color Contrast Checker

This tool helps you check to see if your foreground and background colors provide enough contrast to be easily viewed by users with a vision deficit or who are viewing your pages on a black and white device. I love the sliders on this one.

If you’ve got any other cool tools or sites to share, please leave a comment. I’ll continue to post new blog entries as I find new ones.