I recently tested all of the following extensions on Firefox 1.5rc3 and OS X. Your mileage may vary.

Web Developer extension
This extension has long been a mainstay for web developers, and I’m extremely happy that it’s being actively updated to work with the latest Firefox releases. When installed, the Web Developer extension adds a toolbar that gives you quick and easy access to a huge number of useful utilities, ranging from viewing and editing CSS through one-click CSS, HTML, and Section 508 validation. It is absolutely indespensible for serious web development work.

View Source With
The ViewSourceWith extension allows you to specify any external application with which to view the source of a web page. If you’re not a fan of the standard View Source system in Firefox, this extension gives you the freedom to use the application of your choice.

Measure It
If you’ve ever needed to know exactly how many pixels it is from point A to point B on a web page, Measure It is here to save the day. This little extension allows you to “pull” a ruler from any point to any other point within the browser window to get precise pixel measurements for height and width. It’s turned on and off with a simple click in the bottom left-hand corner of the browser. Very handy for those pixel-perfect layouts.

View Rendered Source Chart
This is easily one of my favourite new-to-me extension discoveries. View Rendered Source Chart creates a beautifully formatted and shaded rendering of your page source (including dynamically-generated source, static source, and JavaScript output) that clearly and cleanly displays the nested elements. I’d say this is a must-have extension for developing today’s complex page structures.

Link Checker
Fast, simple, visual link checker. This is an absolute godsend of an extension for maintaining web pages and fending off the nefarious demons of link-rot.

UrlParams
Essential for testing and debugging form submissions or other URLs that contain a number of name-value pairs, this extension stays continually updated while you surf. In a nicely designed and compact sidebar, the extension displays the bare URL (without parameters), the referring URL, GET and POST values, the ability to add more name/value pairs to a set, and the option to submit or resubmit (in current window or new tab) the URL values.

Screen Grab
Requiring Java (JVM), you can take full “screen shots” of entire web pages with this extension. Unlike normal screen shots that only capture what’s displayed within the confines of the browser window, Screen Grab will capture an image of the whole page from top to bottom.

EditCSS
While still imperfect, EditCSS is a quick and easy way to view and play with the CSS files for many pages. The CSS file is loaded into an editable area in the sidebar, and the main window is dynamically updated to instantly show the results of your changes and additions. This is a handy extension for CSS debugging and experimentation.

View Cookies
Adding a new tab in the “Page Info” dialog (accessible on any page via the right-click context menu), View Cookies displays all of the cookies and cookie values associated with a page. This is an obvious boon for tracking and debugging cookies during development.

There are many other incredibly useful web developer extensions out there, but not all are updated to work with the latest releases of Firefox at this point. I’ll update my list and do another post like this after Firefox 1.5 is released. If you know of other web developer extensions that are updated for Firefox 1.5, leave a comment here.

I’ve stumbled across the site a few times in the past, but I just checked it again and was floored by some of the designs people are making freely available. Check it out:

Open Web Design

There’s a pretty good chance I’ll be using a design from OWD to create a new WordPress theme here.

If you’re looking for colour inspiration for your latest website design, look no further than ColorBlender. This tool mixes and matches a set of six colors based off a main color that you adjust with some very slick Red-Green-Blue color sliders. For the seriously inspiration-impaired, there’s the “Load a random blend” link. It also provides Pantone colour matching, and auto-generated Photoshop and Illustrator palettes. Extremely useful. Below are three palettes I generated in about 15 mins:

If you’re working on a new design and are stuck for colour inspiration, this short post has a great hint: Pixelate a favourite photograph.

The basic concept is that a photograph, being a natural juxtaposition of colours and shades, will render up colours that naturally complement or contrast with each other without looking garish. I gave it a try to see what it would produce.

1) Find a photograph. This part’s easy.

2) In Photoshop, go to Filter > Pixelate > Mosaic, and adjust so the mosaic squares are pretty large in relation to the photograph.

And that’s basically it. Once you have the pixellated photo, just pick and choose a set of 5-6 colours from it and lo, you have a palette. The following three palettes are all obtained from this experiment: the first is a set of unaltered colours from the photo, the second has had its value and saturation adjusted slightly, and the third is a result of playing with the “Hue” slider in the “Hue/Saturation” adjustments dialog.

Here are a few more quick examples I just cooked up, unadjusted from the original: