Tools Every Web Developer Should Know About

It is important to understand various disciplines of web development, but it is NOT important to master them all. Let me bring some balance to the thought of web development focus.

Cross training is a proven practice to help improve a professional runner's performance. The runner will often bicycle, swim, and lift weights; however the athlete is known for his running because that is his focus.

The same applies to any general vocation, like, say, web development. I am a web developer with a focus on building web applications. I have found that cross training in various disciplines makes me a better web application builder. Whether you are a veteran developer or a newbie, below is a well rounded list of tools that can help you improve your development productivity.

Graphics with Adobe's Photoshop

No matter what your focus is, if you are in web development, image editing will be required at least once in your career. Programmers may not be busting out website mockups, but they may need to enhance a photo or two.

Photoshop needs very little introduction. You can get by with a lesser tool if you need to, but Photoshop is the industry standard and is my tool of choice. Remember I am not the expert on this, so you design gurus out there, be easy on me.

PaintShop Pro is a less expensive alternative if you primarily work with photos. I started using PaintShop Pro in the late 90's back when it was still held by the original development company, JASC (Just Another Software Company). Corel bought them out in 2004.

GIMP is the open source (free) alternative. Open source projects are just cool! Some do better than others. Unless there is a thriving community to support the app, then open source projects usually have to settle for a cult following. This application has come quite a ways since I first tried it out, I would not have recommended GIMP a few years ago. Now I would say it is worth giving a try. Its free.

Code Editor with some flavor of Eclipse

Ok, I am not going to be religious about this, because I know this is not a hill worth dying on.

Eclipse is an open source project with a thriving community. Eclipse is a development framework that can be extended by other developers. Hence, what flavor of Eclipse you choose is broad. To me Eclipse seems a bit clunky. I would prefer to use something like Coda, but there is one thing that holds me back....

Zend Studio is an extended commercial version of Eclipse. I primarily develop with PHP and JavaScript/jQuery Framework. The reason I like Zend so much is the code completion for PHP. You can quickly comprehend a complex OOP system by just setting it up in Zend. Just start typing a class and a nice little context menu will give you all the variables and methods. That has saved me so much time, especially when developing in a system foreign to me.

NotePad++ is a less bulky open source alternative to Eclipse.

Note: Do NOT use Dreamweaver. If you need a WYSIWYG, then stop reading this and go learn HTML and CSS. That being said, I was a Dreamweaver WYSIWYG developer at one time. But ultimately, if you truly want to be a pro, then learn to hand code and use a cool framework like WordPress.

FireBug Is An Absolute Must Have!

I can't emphasize enough how important this tool is in your tool belt. Developing web applications without FireBug is like a carpenter without a hammer. The catch is, to use FireBug efficiently, you will need the Firefox browser because FireBug is a handy addon. You should only test on a standards compliant browser like Firefox anyways.

FireBug is especially useful for Ajax developers. Explaining all the things wrapped up in this cool app does not fit the purpose of this article. Maybe some other time.

CSS Editor Made Easy With Stylizer

Before you use Stylizer, you should know how to hand code CSS. If you're disciplined enough this tool can help you learn CSS. Stylizer can be used without much or any knowledge of CSS. It is so easy to use. After you have some hand coding under your belt this tool makes complex CSS layouts a breeze and really speeds up productivity.

Filezilla FTP Client

I am forced to use a FTP client because the FTP extension in the current version of Eclipse I use really stinks.

Filezilla is my tool of choice. I was just about to switch to a different tool, when a recent version added that local/server synchronizing. This means that I can navigate my local folder structure and the server structure changes with me. Before that feature I had to drill down to the local folder of files I want to upload, then drill down to the matching folder on the server.... oh talk about annoying. But it is fixed now. Go Filezilla!

Navicat Makes Database Management Easy

Navicat is a must have if you work with MySQL, Oracle, or Postgre databases. Gone are the PHPMyAdmin days (MySQL). Moving data from database to database, synchronizing, or exporting data into various formats is so easy with Navicat.

Local Testing Server With XAMPP

If you are only working with HTML, CSS, and JavaScript you can get by with a nice editor and browser. When you need to run a server side language like PHP or use a MySQL database, then XAMPP is your friend. You can have a local testing server on Mac, Windows, or Linux in just a few short steps.

Obscure, But Useful Tools

  • Pixie Color Picker - Ever wanted to know what the hex number for a color is anywhere on your screen? Then you will like Pixie.
  • Pixel Ruler - Measure anything on your screen with ease.

This only scratches the surface of tools available. But I have had much success using this combination of tools.

Remember, having the best tools will help, but won't make you a good web developer. Give Usain Bolt a pair of Wal-Mart special shoes and he will still burn the track up. In the same instance, having the best custom designed track shoes money can buy won't make you the fastest runner in the world.



  • David Rosales

    December 23, 2010

    Never knew about pixie color picker or pixel ruler very handy thanks for the advice on that. Do you know of anything that lets you add or choose different fonts within wordpress (CMS not the blog version)


Add Comment