By: Alex Walker

August 5th, 2004

Reader Rating: 9

Ok, so you shelled out $US400 for DreamWeaver. Your latest PhotoShop upgrade was another US$170, and Illustrator cost about the same. Your pockets are a lot lighter than they ought to be, but all you have is the bare essentials.

Never fear! We've got 5 powerful tools that will smooth your development without costing you a single penny (unless you choose otherwise).

ColorPic by Iconico

There certainly is no shortage of specialized eyedropper utilities, but few have pulled all the right functionality together as usefully and elegantly as Nico Westerdale's ColorPic [1].

If you're starting off a project without much more than a logo or a photo, ColorPic is an absolute gem. Get up close and personal using the handy zoom window, grab the main colors with a snappy CTRL-G, then just pick out the 'bridging' colors from the anti-aliased edges.

Each set of chips is savable as a "palette" so you can easily recall archived project color sets in seconds. All colors are available in RGB and Hex.

The app is offered free of charge from Nico's site at Iconico.com [2], but he offers other, equally great, inexpensive software for you to test-drive. You'll no doubt notice the brilliant product, Screen Calipers, which is also worthy of mention. The full version is only US$15 and includes transparency options, skinning and multiple units of measure. Grab them both and at least write him a nice thank you letter!

Download Colorpic here [3].

MWSnap by Mirekw.com

Screen capture? What's wrong with the old Print Screen button? Nothing at all… but MWSnap [4] is one of those nicely crafted little apps that makes it faster and easier for you to continue working the way you already do. It's all about ease and convenience.

Most importantly, MWSnap allows you more easily to target specific areas of the screen, be it a small section of your graphics, a separate menu, a complete window, an entire application view, or your whole desktop. Images can be captured directly to your clipboard and flipped into you favorite image-editing program in seconds. Alternately, you can effortlessly capture dozens of images to a directory simultaneously -- and have filenames auto-generated for each (great for site demos).

That may well be all you ever need from MWSnap, but it also offers a range of useful little widgets, including rulers, programmable hotkeys, dummy cursors (very nice!), color-pickers, crop and rotate tools and info panels.

MWSnap is mighty useful little app provided for your designing pleasure through the good grace of the very talented Mirek Wojtowicz.

Download MWSnap here [5].

TopStyle Lite from BradSoft

Back in the mire of the primordial Internet (well, the mid 90s, actually), Nick Bradbury got sick of the HTML editor he was using and decided to sit down and darn well write his own. HomeSite went on to become one of the early success stories of HTML editing until it was eventually subsumed by the Macromedia Megaship. Nick snuck out of HomeSite, but continued doing what he does best -- writing nifty little editors for burgeoning technologies. In this case, it's a beautiful little CSS editor called TopStyle [6].

Now, Nick provides two flavors of TopStyle: a 'Pro' and a 'Lite' version.

TopStyle Pro is the complete package, capable of high-level editing on much more than just CSS. At around $US80, it represents real value for anyone who spends a significant part of their day working with CSS. The browser profiles alone are worth the entry price.

But we're here for free stuff, right? Let's talk TopStyle Lite.

What do you need a separate CSS editor for? Inline auto-complete features in products like Dreamweaver give you all the options you need. Maybe so, but do they let you do any of the following?

• Instantly check property support across a range browsers and specs
• Manage complex sheets easily by expanding and collapsing rules as you work with them
• Construct rules line by line with a powerful style inspector
• Preview changes instantly.

I have to admit, when I started seriously to work with a CSS layout, this little app moved me through the learning curve quicker then anything else I could find. Books, online resources and cheat sheets are all great, but the month I spent absent-mindedly flipping through the Style Inspector panel in TopStyle Lite had me quickly experimenting with CSS I'd never even heard of. It doesn't take long to develop a comfortable familiarity with CSS this way.

All in all, even if you never decide to spend the extra to get the goodies in the Pro version (including most notably 'Split-screen, multi-browser preview', a 'Style Sweeper', validators and 'HTML Tidy' integration), TopStyle Lite will likely serve you very well for years to come.

Download Topstyle Lite here [7].

FireFox and the Web Developer Toolbar: Chris Pederick

Ok, I know I'm probably preaching to the converted here. If you're at SitePoint you're likely well-versed in the functional, security and virtue-enhancing advantages of using the Mozilla FireFox browser. But if, by chance, you happen to be waiting for that last little push to get you over the FireFox line, the Web Developer Toolbar [8] is an almighty shove.

As 'Spooky', the only user to comment on the WDT download page, put it, "OMG- What did I do before this???"

Chris's initial version of the WDT was released in June 2003 and had a killer set of tools for the Web professional, including:

• Convert POSTs to GETs
• Cookie Information
• Current Window Size
• Disable Styles
• Display Form Details
• Enable Autocompletion
• Hide Images
• Outline Block Level Elements
• Outline Images Without Alt Tags
• Outline Table Cells
• Resize to 640x480
• Resize to 800x600
• Resize to 1024x768
• Validate CSS
• Validate HTML
• Validate Section 508 Accessibility
• Validate WAI Accessibility
• View Source

It was impressive. But, just a little over 12 months later, the WDT now has over four times the functionality and it's all killer -- no filler!

There are just far too many features for me to do justice to the current version of WDT in the limited space here. So, here are just a few of my personal faves:

• Edit CSS -- Alter CSS on any site live in the browser as you watch
• Disable JavaScript/CSS/Java without having to wade through the Tools/Options menus
• Generate customized site speed reports with one click
• Display inline dimensions of all images
• Display ID and Class detail (very handy for CSS debugging)
• Outline images without ALT attributes -- pick up your accessibility errors at a glance
• 7 different code validators, plus a facility for you to add your own custom validator (perhaps running on a local network)

Chris has even designed an amazing 1-click 'topographic view', which graphically displays the 'nested-ness' of every element on a page -- the deeper the nesting, the lighter it's tone. Amazing.

Suffice to say that, about once every couple months, one of the SitePoint team members downloads the latest of Chris's babies and we have a collective 'Bill and Ted' moment as we test the new features -- 'Awwwwesome!' (all nodding knowingly).

Download the Web Developer Toolbar here [9].

Accessibility Toolbox from Accessify.com

Feeling a bit guilty about all this accessibility stuff? Me too. My forms and popup code had been perfectly fashionable for years, but all of a sudden people started to roll their eyes at my code, and snigger at me in hallways. Ok, maybe that's the coffee talking, but you know where I'm coming from. You probably want to mend your ways, but you're not sure exactly what the current state of play is.

Enter: Ian Lloyd and his Accessibility Toolbox. Ian has pulled together some of the accumulated wisdom found at his renowned Accessify.com [10] site, and distilled it into this useful little code wizard. At this point, it comprises of an 'accessible form element builder' paired with an 'accessible pop-up builder'. There are buttons reserved for 'accessible tables' and 'accessible forms' but there's no word as to whether these are due any time soon (Ian is happily gallivanting across the globe as we speak, so no breath-holding).

No matter. The two tools provided give you the working code you need in a handful of clicks.

The popup code is designed to take advantage of JavaScript when it's available, without failing miserably when it's not. The code is also clever enough to bring a 'defocused', lost pop-up back to the front position any time the user attempts to re-launch it -- a particularly frustrating failure when it's not adequately accounted for (nod to Creatas.com [11]).

The form element builder is a great way to start moving away from traditional table-layout forms. Using the 'label and input pairs' produced by this little wizard, drizzled liberally with a some tasty CSS (SitePoint Tech Times, Issue 58 [12]), and you'll have low-fat, nutritious and appetizing forms in minutes.

Keep in mind that Ian has worked tirelessly on all the tools and wizards [13] on Accessify.com since early 2003 without asking for a penny. As he has quit his most recent employment to spend a year traveling, I hardly need to make the point that he'd appreciate any Paypal donations you could spare, should you find his tools helpful to your work.

Download the Accessibility Toolbox here [14].

Five Fantastic Freebies

There you have it: 5 little gems, gratis! Download the tools, give them a spin and let us know what you think. But do note that Nico, Mirek, Nick. Chris, and Ian each have ways you can repay them a little for their labors. Keep it in mind as you use their excellent tools.

Over the coming weeks, I'll be looking more closely at a few other design tools, along with tips, tricks, and tutorials in our new design-centric newsletter. Sign up here to receive your monthly copy of the SitePoint Design View [15].

[1] http://www.iconico.com/colorpic/index.aspx
[2] http://www.iconico.com
[3] http://www.iconico.com/colorpic/index.aspx
[4] http://www.mirekw.com/winfreeware/index.html
[5] http://www.mirekw.com/winfreeware/index.html
[6] http://www.bradsoft.com/topstyle/
[7] http://www.bradsoft.com/topstyle/
[8] http://www.chrispederick.myacen.com/work/firefox/webdeveloper/
[9] http://www.chrispederick.myacen.com/work/firefox/webdeveloper/
[10] http://www.accessify.com
[11] http://www.creatas.com/
[12] http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=58
[13] http://www.accessify.com/tools-and-wizards/default.asp
[14] http://www.accessify.com/tools-and-wizards/accessibility-toolbox.asp
[15] http://www.sitepoint.com/newsletter/manage.php