Wildly useful free Web development programs

There are probably tens if not hundreds of thousands of programs out there for almost anything you can imagine and a small portion of those are geared solely toward Web development but they're not all top notch. Now, when I refer to Web development, I mean all sides of it including graphics, coding, and everything else. Sure, there are the usual players like the Adobe/Macromedia products but what I enjoy the most are the small free programs that someone made in their free time and decided to release to the world in case anyone else might need them. These sometimes require some hunting down to find and can be well worth it. I thought I'd take some time to share some of my favorites and hopefully learn about some more from my readers.

I've been involved in Web development since 2000 but not seriously and professionally until a little over a year ago. I'm amazed at what I've picked up during this small period of time and have enjoyed every bit of it. Often, I've found myself wishing for small programs that did just a portion of what the big ones do to save me the time of opening them up just do complete some minor task. I know I'm not alone in this either. Thankfully, those who know more about creating programs have helped me out here and created some wildly useful programs that are made just that much better by being free.

I should mention that most of the programs I'll be covering here will, as far as I know, work on machines running Windows. I'm not a Mac user so I haven't had a need to hunt down Mac-friendly programs. I'm not against them—it's just that Windows machines have come into my life more often. There are probably Mac-equivalent versions of everything mentioned here and those versions could very possibly be better than the Windows versions. With the new Dashboard setup on the latest OSX incarnation from Apple, the possibility of these better versions will probably increase quite a bit. I wouldn't mind having a Mac Mini to try some of these things out one of these days. Anyway, enough babbling from me. Let's get to the list. The image* accompanying each description is a link to download the program it depicts.

Firefox

Before the groaning starts, anyone who's a Web developer knows that this is an essential tool. Its many extensions help me daily and make my online experience a lot easier. I could sit here and write pages extolling its virtues but we've all heard it before so there's no reason to repeat it. Bottom line is, it's good, I use it, and it should be an essential tool in anyone's toolbox. In answer to some possible complaints, yes Opera is wonderful too but I just prefer Firefox. Download Firefox.

Web developer toolbar

One of the most valuable extensions next to Adblock, Web developers should not be without this bag of goodies. Chris Pederick created this brilliant extension and packed it full of useful tools for examining virtually any aspect of a Web page. Like the browser on which it runs, others have written about its good points quite a bit and I won't go into it much here. Simply put, if you're a Web developer, you must have this. There is a similar tool for IE called the Web Accessibility Toolbar but I'm not too fond of it. I tried it out and aside from just feeling bulky, it didn't seem to work right. It's been a while since I tried it and maybe I should again but for now, I'll stick with the one for Firefox. Download the Web Developer extension for Firefox.

MeasureIt

As a recent find and a newcomer to the Firefox extension pool, MeasureIt has saved me time already. It's a simple concept of an on-screen ruler but it's built to work right on the screen within Firefox so users don't have to open up Photoshop, IrfanView, or any other program just to get some quick dimensions or estimations. I still use Photoshop to get up close and personal with measurements but this tool is a great for getting some fast info. I highly recommend it. xScope appears to be the best Mac equivalent but it can do much more and it's a stand-alone program rather than an extension. I'd love to see someone create an xScope for Windows or at least have someone point me in the direction of an existing one. Download the MeasureIt extension for Firefox.

Multiple IE versions

The enjoyment factor of this item isn't all that high for me but it's very useful to have older versions of IE on the same computer. Ethan Marcotte (Sidesh0w) posted a tutorial a while ago titled Multiple IEs in Windows that detailed how to run older versions of IE side by side without interfering with each other. Thankfully, Ryan Parman, owner of Skyzyx, followed the tutorials and helped everyone out by creating stand-alone versions of each IE so all that's needed to run them is unzipping some files. No need to configure any files. The usefulness of this comes into play when testing functionality and layouts for any site. Instead of having multiple machines with older versions on them, you can have all the necessary older versions on one computer. This saves a lot of time and money. Now if only someone could get some Mac browsers to run on Windows… Of course a Mac Mini with a switcher would help out in that department. Download multiple IE versions.

WinKey

This could be considered a bit of a stretch for a Web program but considering I use it in combination with them every day, it makes my list. I found this small program years ago and the simplicity is what kept me using it since. It allows users to use the Windows key on keyboards in combination with any other key to launch other programs. There's no installation required so to have it running at all times, just put it in your startup menu so it will start when your computer runs. Currently, I'm seeing it take up 3 MB of memory and I don't know if that's good or bad but I've never had any performance issues on the past three computers I've owned.

It's because of this that my desktop is devoid of icons. Everything I launch is from keystrokes or through a very organized start menu. It's much faster to make a quick calculation, pick a color, or make a note using keystrokes to launch the programs than using the mouse. At least it is for me. Using this in combination with most of the programs I'll be mentioning here saves a lot of time and assuming you have a good memory to remember what they key combinations are, keeps you organized. I'm sure there are other programs that do the same thing but this is the one I found and it's never given me any reason to use another. Download WinKey.

ColorPad

This is a very tiny but wonderfully useful program. It's essentially an eyedropper like that in Photoshop or any other graphics program except you don't have to wait forever for it to launch. It's skinnable and has few options, but for an eyedropper, not much more is needed. Click and hold for half a second on the main color square to activate the eyedropper tool after launching and it'll show whatever color you're on in both hex and RGB values simultaneously. Once you've picked your color, just press Ctrl + C to copy the hex value to your clipboard. No need to highlight and copy—just copy. I've combined it with WinKey to have the shortcut key of Windows Key + P so I can open it quickly and the classic Alt + F4 closes it just as easily. No muss, no fuss. Download ColorPad (scroll down about two-thirds to find the link).

Regex Coach

I just found Regex Coach a little while ago and it's already saved me a bit of time. It's another small program as quick and easy as ColorPad. As the name implies, it coaches you when building regular expressions and test them on the fly. I'm still a beginner when it comes to regular expressions so I need all the help I can get and often need to go through a lot of testing to get one that works just right. Testing can be a bit bothersome though especially when you need to create a test page, set up the script, and create the markup just to test an expression. Even after you've done all that, you still have to adjust the code and refresh the page each time you need to test your changes. This eliminates all of that.

The setup is fairly simple. You type your regular expression at the top and the string your testing on the bottom. If it matches, it'll highlight the matching portion of the string. It also attempts to provide an informational version of the regular expression by explaining each part with words. A tree view is available which shows a simplified graphical version of the regular expression and how it is handled to match strings. While it's a tad daunting at first for a beginner, it's easy to pick up on how everything works.

I almost gave this entry to the Rad Software Regular Expression Designer (RSRED) which is another helpful building tool because it offers a useful library of regular expression elements and explanations of their meanings. The one thing that kept be from doing so is that RSRED requires you to hig F5 or click a button to test the expression. Regex Coach checks with each keystroke. It's the little things that matter in cases like this but both are excellent programs and worth downloading. Giving Regex Coach the shortcut key of Windows Key + X and RSRED Windows + Ctrl + X allows me to quickly test expressions with ease with either one. Download Regex Coach or Rad Software Regular Expression Designer.

PowerToy Calc

Yes, I know every operating system under the sun comes with its own calculator but I don't like to go blind when trying to read the one that comes with Windows and I'm of the generation that became very used to graphic calculators. I like to see the entire equation I typed in so I don't have to wonder if I typed it correctly and if the answer is really the right answer. This calculator is part of the PowerToys package for Windows XP and while it can do complex functions and graphs, I don't currently have a large need for them. Still, I enjoy that it keeps a running history of calculations I've done instead of just one number at a time. Some might wonder why I included this program in this list. If you've ever needed to do layouts or design graphics or just check some basic calculations, you'll need a calculator and this is an ideal one. The initial layout of the program is a bit bulky but with a little tweaking, you can get it down to a small but still very useful size. Assign another shortcut key of Windows Key + C and its handiness increases two-fold. Download PowerToy Calc.

Notepad++

I also found this program only two weeks ago and it's quickly become my coding program of choice. I've been looking for something like it for a long time though. I, like many Web developers and any other coder out there, spend hours on end staring at code/markup and while there is a default Notepad that comes with windows, it simply isn't enough. It works just fine but it has virtually no wildly useful features. I think the most advanced thing it can do is insert a time and date. I even managed to create a clone of it myself back in the day with very little knowledge and effort.

I know there are large packages out there like Dreamweaver, Go Live, Homesite, and others but I don't use 99% of the features they offer. I used to use Homesite at work but it's text rendering bug made it impossible to write code efficiently on slow machines (like mine at work). I used to use Dreamweaver at home but didn't need all of its extras. I think I've used Go Live once or twice but didn't see the need for it when I had Homesite and Dreamweaver available. What all of these programs do have that I like are MDIs and syntax coloring. As any coder will tell you, syntax coloring is incredibly useful and much easier on the eyes than the default black and white coloring you get with Notepad in Windows.

This is where Notepad++ comes into play. Notepad has the syntax coloring and draggable tabs that I like but none of the extra junk that I never use like site management or a WYSIWYG interface and it doesn't take a long time to load. I don't like having to wait forever while a program checks all its settings to make sure everything is okay. I just want to code. I used to use Notepad2 before I found Notepad++ but it lacked the MDI that I sorely wanted. It had everything else though and is still an excellent program but the MDI is what sold me on Notepad++. It's simple, fast, and when given the shortcut key of Windows Key + N, wildly useful. Download Notepad++.

So that's about it. Those are the primary programs I use everyday and they've made me much more efficient almost everything I do at my job or just in my free time. I'm about the pickiest person you'll meet when it comes to programs and I love the small, light-weight, unobtrusive programs the best; so it takes a lot to get me to love and use one everyday. Simplicity is sometimes best and these programs prove that. I highly recommend all of them and encourage everyone to at least try them. I'm also interested in finding more so if you have any others that you know of, please let me know.

* These images ended up being more than just a simple aesthetic feature and turned into a full-fledged project. Each depicts the logo/icon of the program to which it links and in most cases with the exception of the Firefox and IE logos were created from scratch using very small icons as guides. I enjoyed making them and I hope you enjoy them too.