Tools of the Trade

New to the series? Then checkout parts 1, 2, and 3.

If you’re going to build a blog/website then you must be equipped with the proper tools. Makes sense, right? But how do you kind of tools to use and which ones? Well, that’s what this post is for. Enjoy!

Web Browsers & Extensions
Mozilla Firefox: First things first, you’ve got to have a good web broswer to do you work in. Firefox is the best, plus its free and extendable. I recommend installing web developer extensions to make it even better.

First, download the web developer toolbar. This toolbar is indespensible to a serious web developer. It allows you to easily view the page source, css, images. It has links to validation services, allows you to resize your browswer to see what your page would like like in 800×600 and other custom sizes, allows you to manipulate forms, outline tables, and many other wonderful features.

Next, get Colorzilla. If you ever wondered what color someone was using, then use this handy tool to find out. Colorzilla provides an advanced eyedropper, colorPicker, page zoomer and other colorful goodies.

Third, install MeasureIt. Draw out a ruler to get the pixel width and height of any elements on a webpage. Very useful if you’re trying to determine the width of a Div or image.

Fourth, download IEView. Unfortunately, we live in a web where not everyone knows the joy of using FireFox. So, as designers and coders we must make sure our pages look like there supposed to in Internet Explorer (which doesn’t always render code correctly). This plugin adds a handy right-click shortcut to “Open link target in IE”.

HTML Validator is another useful tool. This one isn’t essential, but it does allow you to get a quickly see the of any errors when looking at the HTML source code.

Session Saver 2 isn’t really a developer tool, but I find it extreemly useful. It restores your browser -exactly- as you left it, every startup, every time. Not even a crash will phase it. Windows, tabs, even things you were typing — they’re all saved. So, if you have to shut down your computer, but don’t want to lose all the items you have opened in tabs, this is for you.

Even though you are web savvy and use the great Firefox browser, not everyone is. So, I recommend having at least 2 other popular browsers intalled just to check and see if your web page look correct in them. Remember, not every browser renders code the same. So, most importantly get Internet Explorer 6. Notice, I said 6 because it is the most used. IE7 beta is out (and a big improvement over IE6 in terms of usefulness and rendering), but few people use it yet. At this time you can’t easily have both IE6 and IE7 on the same machine. Opera is the other semi-popular browser. I actually like Opera’s design, except for its code rendering abilities.

Now that you’ve got the basic browswer tools, it’s time to move on to some more technical stuff.

File Transfers
FTP is the best way to upload files to your web server. Filezilla is my FTP client of choice. FileZilla is a fast FTP and SFTP client for Windows with a lot of features. It makes transfers as easy as drag and drop.

Code Editors
A good “code friendly” text editor is also needed. You could get by with Notepad, but why not use a tool provides syntax highlighting? Trust me, it makes programming easier. There are a few popular editors available.

Notepad ++: is a fairly popular code editor. It is a free source code editor (and Notepad replacement), which supports several programming languages, running under the MS Windows environment.

Firstpage 2006: is a pretty nifty tool. It highlights code, has tabs, provides a quick preview of your site. Also, it contains lots a list of freqently used tags. Firstpage 2000, I don’t use 2006, is my choice for an HTML editor. It provides all the functionality I need and more.

RadRails: is an IDE for the Ruby on Rails framework. The goal of RadRails is to provide Rails developers with everything they need to develop, manage, test and deploy their applications. Features include source control, debugging, WEBrick servers, generator wizards, syntax highlighting, data tools and much much more.

Nvu: is a WYSIWYG HTML editor. It is similar to Dreamweaver and Frontpage. I do not recommend using a WYSIWYG editor, but thought you should know about the option anyway.

Eclipse: is an open source community whose projects are focused on providing a vendor-neutral open development platform and application frameworks for building software. This one is pretty powerful, not really a simple Notepad like tool. It probably isn’t what you need unless you plan on writing some serious code.

Visual Web Developer 2005 Express Edition: Another powerful application development tool for ASP.Net. In an effort to compete with powerful open source technologies Microsoft has created a free version of Visual Studio called Visual Web Developer 2005 Express Edition.

Textmate: is an option for Mac OS X. I believe it is the popular choice for Ruby on Rails programmers. However, this one isn’t free.

CSS Edit: is exactly what it sounds like. Again, for Mac OS X and not free.

5ThirtyOne has a list of the Top 10 OSX apps to supplement blogging.

Note: I listed a few Mac tools above. I don’t do any web development on my Mac. Strangely enough, I prefer Windows. Probably because I don’t know what tools to use. Please let me know if you know of some good ones.

Image Management
GIMP: GIMP is an acronym for GNU Image Manipulation Program. It is a freely distributed program for such tasks as photo retouching, image composition and image authoring. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image render, an image format converter, etc. GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. Think of it is an open source Photo Shop.

Picasa is a nice, easy to use image organizer. In includes some basic image manipulation features as well. Think of it is iPhoto for Windows.

Email
Gmail: The default choice for all my email needs. Gmail provides over 2.5 gigs of storage, brillant search funcanilty, auto filters, conversations, and chat all built in. Plus, it integrates with Google Calendar.

Thunderbird: prefer something a little more tradiional than web mail? Thunderbird is the way to go. It is from Mozilla (the same people who brought you FireFox) and it competes with Microsoft Outlook. You can even check your Gmail accout with it. Learn how here.

Bonus
As a bonus, check out Google Pack for some other free and useful tools.

Share the tools you use in the comments below.

Footing the Bill