Skip to main content

Posts

Wildly useful free Web development programs

By Nicholas Rougeux, posted on May 28, 2005 in Software, Web

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

Download FirefoxBefore 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

Download the Web Developer extension for FirefoxOne 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

Download MeasureItAs 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

Download multiple versions of IEThe 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

Download WinKeyThis 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

Download ColorPadThis 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

Download Regex CoachI 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

Download PowerToy CalcYes, 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++

Download 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.


Comments

  1. 1 Brian Benzinger

    Posted on June 15, 2005

    Excellent list of applications. I have been looking for a Regular Expression program like that for a long time now. Great find. And also the Notepad seems rather nice. I just installed both of them and going to try them out.

    Thanks for the great list!

  2. 2 Oni Lukos

    Posted on June 25, 2005

    Firefox + Adblock + WebDev Toolbar = Instant win. I also use a Validator plugin which is picking up errors on your site. You might want to check it out. I forget the exact name, but it uses a different method than the W3C online one, so it often picks up errors that the online one misses. It's based on Tidy. I haven't seen this MeasureIt plugin before, though. I'll check it out.

    I've been using RegexCoach for quite some months now. Very handy program.
    I should check out the PowerToy Calc and WinKey, too. Sounds neat.
    I use jEdit as my text editor. It's nice.
    Also, if you want to test your site for Safari compatibility, I recommend using iCapture: http://www.danvine.com/icapture/
    Nice logos, by the way.

  3. 3 Michael Witt

    Posted on July 18, 2005

    Indispensible Firefox extensions:

    Linky - Linky will increase your power to handle links. Open/download/validate links and pictures in tabs or windows.

    FirefoxView - Open Firefox with the current page or a selected link displayed in Internet Explorer. Adds "View in Firefox" menu items to the content and link context menus in IE.

    IE View - Adds "View page in Internet Explorer" links to the content and link context menu. Handy for previewing pages in IE, loading up IE-only pages when you run across them in Mozilla, etc.

    Also useful is fireFTP for when IE's FTP isn't enough and you want an FTP client that more resembles WSFTP or others of the sort but don't have the rights to install a completely new program. (I do a lot of work for Universities where this comes in handy.)

    Eyedropper - http://www.inetia.com/eyedropper_eng.php (english version) Very similar to ColorPad but has a zoom and other customization options.

    Web Accessability Toolbar (for IE) - http://www.nils.org.au/ais/web/resources/toolbar/ Many similarities with the Web Developer Toolbar extension for Firefox. Adds many useful tools for dealing with and understanding accessability issues. A must have.

  4. 4 James

    Posted on November 18, 2005

    I use eclipse for full on coding, makes programs much more reliable and integrates everything. Also I hear textmate for mac is an excellent program. For firefox I found inspect element was useful, but now im using firefox 1.5RC2 and that extension is not available yet.

  5. 5 Postie

    Posted on January 29, 2007

    One of my favorite editors is Jedit. It's written in Java and has a lot of plugins. It's platform independent so you can use the same editor on every machine.

  6. 6 Lefteye

    Posted on January 29, 2007

    Looks like 'WinKey' is no longer available? Any update for that one?

  7. 7 Nicholas Rougeux

    Posted on January 29, 2007

    Lefteye, thanks for letting me know. I've made the file available for download from this site so there is little chance of it breaking.

  8. 8 Andrew

    Posted on January 29, 2007

    Thank you for your great list of developer's tools. I am using weaverslave (http://www.weaverslave.ws/) for MDI coding. It highlights CSS; JScript, PHP, HTML and ships with some other very powerful tools. If you don't need WYSIWYG, you might want to have a look at it.

  9. 9 Nate

    Posted on January 30, 2007

    You should also check out ColorCop - a color grabbing tool a friend of mine wrote back in college and has been updating ever since. Available at www.prall.net

  10. 10 Niall Doherty

    Posted on February 25, 2007

    For getting at and launching programs quickly, noting beats Launchy. Great time saver.

  11. 11 ian

    Posted on April 4, 2007

    Great tips. I've been using several of them for a long time now, and find that the Firefox extensions you mentioned plus notepad++ especially are real productivity boosters. You might also check out ColorZilla, which is a Firefox extension that does essentially the same thing as ColorPad, except there's no launching needed, since it's built right into the browser. Very useful!

  12. 12 skooter

    Posted on December 11, 2007

    Why use MeasureIt? The web developer toolbar has a ruler... Greate list and greate site, dude.

  13. 13 ana

    Posted on July 23, 2009

    You should also check out ColorCop - a color grabbing tool a friend of mine wrote back in college and has been updating ever since.

  14. 14 Flash O\' Rama

    Posted on December 30, 2009

    Awesome List.. Use most of them

  15. 15 Flash O\' Rama

    Posted on December 30, 2009

    Awesome List.. Use most of them
    http://www.flashorama.com

  16. 16 big john

    Posted on November 29, 2010

    IRELAND FTW!!!!!

  17. 17 Anand Mistry

    Posted on July 8, 2011

    This is really good list for free web development programs. But, I have little bit mind bubbles with free programs. Does it matter with quality? In current trend, web development or web design is most important aspect to compete in market. If any web development program comes with personal communication or mutual understanding with clients so it does matter rather than spoil all tasks to users. What you think about it?

  18. 18 obat asam urat

    Posted on December 25, 2011

    Thanks for writing this informative post. I never knew that opinions could be this varied. Peaceobat asam urat


Related posts

Stay in touch