FWebDe

Putting Together a Web Development Toolkit

January 22, 2010, in Programming,Web Design, by Eric Bannatyne.

In web development, organization is just as important as anything else. One way of being organized is by putting a web development toolkit, containing basic templates, copies of CMSes, and other tools, organized in a directory for quick access.

Here are some of the things that I keep in my web development toolkit.

Copies of CMSes

To speed up setup of websites, I keep some CMSes in my toolkit, ready to be uploaded and installed without waiting to download them. Right now, I have WordPress and SMF in my toolkit, but you should add the CMSes that you use often.

Make sure that you have the latest versions, so that you don't end up realizing that you have to go and upgrade after you've installed.

Basic Templates

I don't know about you, but I can't remember all of those document types. So, I keep some basic HTML and CSS templates so that I can have a simple design ready by simply modifying some HTML, and adding some CSS to make it look nice.

The ones that I keep include 2-column, 3-column, 2-column with subsections, and a few others.

Code Snippets

I usually like to keep little bits of code ready to be used, whether they are just small fixes for bugs, or complete features.

For example, while not exactly a snippet, I keep the user authorization functions from Part 7 of Creating a PHP CMS so that they can be used whenever they are needed.

Cheat Sheets

Cheat sheets are excellent reference guides when working on a project. Here is a list of cheat sheets that are useful to have around.

• CSS Cheat Sheet
• Hexadecimal Colour Chart
• HTML Character Entities
• Regular Expressions
• WordPress Help Sheet

If you know of any other good cheat sheets, be sure to leave a comment to let everyone know!

IDEs And Editors

Rule number one when choosing an editor: Don't use a WYSIWYG editor!

WYSIWYG editors generally create horrible code and gets in the way of actually learning to develop websites the right way.

When doing development, your integrated development environment is an important thing to consider. I could write an entire post on this alone, but I will stick to a few that I like, for now.

• Vim — An awesome, lightweight editor from the old days of Unix. It can be difficult for beginners who aren't used to modal editing, but once you learn the keys, you'll be editing much more quickly.
• Eclipse — A nice IDE, originally intended for Java development, that can be easily extended with plugins such as Aptana. The only real downside I see with this is that it is a bit on the slow side, and uses up quite a bit of memory on my machine.
• Komodo Edit is my current choice of editor for web development. The main reason is for the Vim keybindings built right in, so I can get the quick editing power of Vim, with all of the nice features like code completion, file browser, and project management.

So make it easy for yourself and pick one of those examples, or go find a new one. Be sure to try out different editors, and just see what you like!

I would just like to mention another IDE that I enjoy: Code::Blocks. It's a very good C++ IDE, though I don't use it for web development.

A Development Server

It's very useful to have a local server setup, so that you can work on projects without having to reupload your files every time you make some changes. I installed Apache, PHP and MySQL on my computer all separately, but if you don't have time, you can use XAMPP, which includes everything I mentioned, and is easy to setup. Also, it will work on on Windows, Mac OS X and Linux!

Other Useful Tools

In addition to the rest of this toolkit, there are some other tools that I should mention.

• Firefox Web Developer Toolbar
• Firebug
• IE NetRenderer
• YSlow Firefox Plugin
• Gimp — Useful for those not using Windows or Mac OS X, or who don't want to pay hundreds of dollars for a piece of software.

Does anyone else have a web development toolkit? If so, please share it with us!