The Top 10 Most Essential Time Saving Tools for Web Developers

Bruce Lee once said, “Use only that which works, and take it from any place you can find it.” Those are very powerful words. Being a huge Bruce Lee fan, I took those words very seriously when I first heard them. At first I took it to learn that it means you have to be a sponge for new knowledge. As time went on and I have needed to be more efficient I have learned it also means you don’t need to waste your time re-inventing the wheel. Or worse, give up because you don’t think you can’t do it.

Anyways, now that you have read about Bruce Lee on Wikipedia and realize how right he was here are my top 10 most essential tools for a web developer based on my own real true life experience. These may not be the coolest, or most sexy, we’ll get to that in another article. This one is all about the essentials.

10. GIMP / Photoshop CS5
Boring I know, but it is essential isn’t it? Yes it is. You must have an image editor handy if you are a web developer, designer, or basically anyone these days. I use Photoshop, but for those of you looking for a free alternative, GIMP is free and open source. I spend quite a bit of time unfortunately each day in Photoshop. Quick tip – record actions to save time.

9. Google Chrome
Really? A web browser is essential for development? Yes it is, and more than you will ever know. I stopped using Firefox because it crashes too much and I finally figured out how to make Chrome Bookmarks work like I want them too. Use Google Chrome for the element inspector. It is way better than Firebug in my opinion. It has all different kinds of features such as CSS, HTML element inspector, resource charts, and performance testing. I use it most of the time to inspect CSS styles and see how folks are doing what they do!

8. Adobe Dreamweaver CS5
If you are getting bored you should just skip to the top 5. Dreamweaver should really be #1, but I took the list of 10 and picked my personal favorites. Dreamweaver, for those that may not know, is an FTP client to upload and download files from web servers, manage multiple site configurations, and edit code. CS5 does a lot better job supporting the latest version of CSS and will debug your code as you type javascript, html, css, or php. I’m sure there are plenty of other cool features like the spry framework, but I don’t really use that anymore.

7) netrenderer
I use netrender for one reason plain and simple: testing sites in IE6 and IE7. I have all the other browsers loaded to my computer, so I don’t really need a complete solution. I am pretty confident with how I code so I know which things will break in IE6 (transparent PNGs being my #1 pet peeve). So really I end up using this essential, fast tool just to see what my site looks like in crappy Internet Explorer 6. On a side note many companies, even fortune 30 companies, are still using IE6. So thank God your not in a corporate development shop.

6) StumbleUpon
StumbleUpon is a web application for sharing cool websites. It is best embodied and used by mes as a Firefox extension. To get started, get a free accoun and setup your preferences as a web developer or designer (and maybe stick some funny videos in your preferences too – for break time only, kids!). Anyways once you get this up and running simply click ‘Stumble!’ on your toolbar and you will be magically wisked away to various sites that have been ‘liked’ by others. Think that’s a waste of time and you already have limited space because your using delicious? Think again! StumbleUpon has been around for a few years now if not more and I have found more cool random stuff on there than I ever would have using Digg, DevZone, or Delicious. The element of randomness adds a freshness to it that gets you slightly more excited and willing to read / skim through whatever page it sends you too.

5) BluePrint CSS
Even though I don’t really use BluePrint CSS that much anymore (read #1 and you will see why), I think it has been one of the single most essential tools I have ever used.

BluePrint CSS is a simple, easy to implement CSS Framework. Even if you don’t use it as a complete solution, it has a great reference guide which I use frequently to troubleshoot problems with my CSS, look for best practices, or simply grab a chunk of CSS code and use it (I recommend using their.error and.success classes for providing user feedback). You see it all over the place.

The single best reason why you should put BluePrint in the top shelf of your toolbox is to understand the importance of being thoughtful about layout and typography. You know how sometimes you go to a website and think, man this looks great, why do my fonts not look like that? What font are they using? Well, for one, they are probably using similar if not the same fonts as you, but it is the character spacing, line height, and font size relationships between elements that they have optimized for viewing. Study BluePrint CSS, if not for the aforementioned but because man, its #5 on the list!!!

4) Webappers
All I can say is: Great Website. I found it once on StumbleUpon (#6 on this list) and probably go their every few days and also have an RSS feed I check on my iGoogle page. This website has a ton of content and is separated out into components, design, and extras. I would say that if your looking for anything from icons, color schemes, charting techniques, photo galleries, video embedding techniques – this is a great site to use.

3) SimpleScripts
Another tool I hope you have used. SimpleScripts is like Fantastico but way better, more advanced, and I believe has more software options. It is used as a feature to most hosting providers in the administration panel for users to manager their installations of third party software like WordPress, Joomla, and Drupal. Two main reasons why this is the most essential tool are the fact that it automates the installation process but also it manages and monitors updates so that you don’t end up with a site that is exposed to hackers who will setup a phishing site. Content Management Systems are easy targets if they are not updated timely.

2) JQuery Tools
I can’t even begin to say how much I love JQuery Tools. Nicknamed, “The missing UI for the web”, JQuery is my solution for form validation, tooltips, image transitions, and horizontal sliders. The code is great and it usually works in every browser. They are the same guys who brought us flowplayer (see #4). I used to use lightbox, but now I use Overlay, which is an essential tool for providing feedback to a user or showing a nice popup form without opening a new window. The other great thing is that there is a nice user community and a bare essential example for each tool to get your started and up and running fast.

1) Artisteer
Ok, you might not have actually heard of this one! Artisteer is what I like to call”PowerPoint for Web Development”.

Sure Artisteer actually costs money. But it really is worth it. You design XHTML / CSS compliant web sites through a GUI without writing any code. But the real kicker is that you can export the result as a WordPress, Joomla, or Drupal template. Missing link, anyone? I had always wanted to create customized themes so I could actually be efficient enough to make a website with a CMS as its backend without just using a template that is already out there.

I have found that Artisteer does a great job of automating a lot of things that you would never do, like making consistent styles for all your elements, even elements like which usually end up looking like the default html styling because you simply don’t have time to make a UI that is consistent from top to bottom. Its also great for prototyping, messing with typography, and designing killer menus.