minimal design

Before getting into the meat of the subject, I need to point out that this article is written primarily for OS X users. Although many tips are OS independent, most of the apps mentioned are OS X specific. I also need to clarify that the type of web development I’m talking about here is: HTML/CSS/Javascript and PHP/MySQL. I won’t be covering any Microsoft technology, Flex, etc…

Despite the rather dramatic title of this article, this is not meant to be the “one and only” possible setup but rather a description of what I narrowed it down to after many years of trial and error. It’s working very well for me, but I’m curious to find out what others have come up with…

A bulletproof foundation

First of, you don’t want to ever lose a client’s job because if you do, you’ll be totally (excuse my French) screwed. So, in addition to a sound backup strategy, you need to have a version control system in place. The main options in that department are: CVS, SVN, and Git. SVN is usually considered superior to the older CVS while Git is the newest of the three and has a lot going for it, but SVN has been around much longer so they’re many great OS X apps for it, my personal favorite is Versions.

SVN might seem daunting at first but it’s actually really easy. I recommend you save yourself an afternoon to read through at least the “Basic Usage” chapter from the “Version Control with Subversion” book and start playing with it.

You can setup your repositories on a server in the cloud or locally. I have two repositories hosted locally on my main computer: one for work, and one for personal projects. Both are located in my Documents folder, and I keep the working copies in my Sites folder.

When starting with SVN for the first time, be careful when renaming and/or deleting folders. SVN creates invisible folders in all directories of a project. That’s how it keeps track of everything. So edit/delete folders through SVN instead of the Finder or else you’ll run into problems.

With Versions, you don’t even need to install subversion separately, it’s included in the package and has a menu command under “Bookmarks” to create local repositories.

A consistent architecture

When I first started working, I only had a few clients and I didn’t pay much attention to the way I organized my jobs. But soon enough, with dozens of clients and hundreds of projects, I wish I spent a little more time coming up with a future proof file architecture… Here’s what I’m using now:

Files pertinent to each project go into: ~/Documents/work/client name/job name/

In that job name folder, I have:

• _from client/ I put all the resources I get from the client, in folders named according to the date I receive them. Something like 081107/ for “November 07 2008.”
• 01 Strategy/ includes contract, creative brief, etc…
• 02 Structure/ includes architecture diagram, wireframes, etc…
• 03 Design/ PSD comps, illustrations, Branding elements, etc…
• 04 production/ sliced PSD files ready for export.

In parallel, the sites themselves, hosted locally (more on that later), are organized as such:

• ~/Sites/work/client name/job name/public/ is the site for clients to review at each project milestone.
• ~/Sites/work/client name/job name/in/ is where the real work happens.

Tip: you can exclude folders named “public” from SVN by adding “public” to ~/.subversion/config uncommenting the line that says global-ignores. For instance, my config file looks something like that:

global-ignores = *.o *.lo *.la #*# .*.rej *.rej .*~ *~ .#* .DS_Store public cache

But keep in mind that you can only use global-ignores on stuff that has not been added to your repository yet.

Hosting environment

I like to host all my sites locally during development. That way, I can have my clients review what I’m working on without having to upload the files on another server. That means I can keep my SVN repository locally too, and everything I’m working on is backed up every night automatically.

In order to do that, you need 2 things: a URL pointing to your computer and a server. By far the easiest way to get a URL is to signup for a DynDNS account. For the server, although OS X comes with Apache and you can easily use it by turning on “Web Sharing” in the System Preferences, MAMP Pro is a much better alternative. One of my favorite feature is the way you can add subdomains in seconds. It makes it a breeze to have unique URLs for all your projects. For instance, let’s say you got a job called “the_job.” If your DynDNS URL is my_url.dyndns.org, you can point the_job.my_url.dyndns.org to ~/Sites/work/client name/the_job/public/ in 15 seconds and 4 mouse clicks. This is very convenient to let clients review the progress on their sites.

One important detail about MAMP Pro vs. the free MAMP version (not “Pro”): upgrading the free version is a total pain whereas MAMP Pro is as easy to update as any other OS X app. That itself is worth the price of admission in my book.

MAMP Pro has MySQL and phpMyAdmin included out of the box, but I personally recommend Navicat for any MySQL tasks. It’s much faster, more powerful, and more reliable than phpMyAdmin. It also has the ability to connect to any remote server via SSH tunneling and can run scheduled routines. This makes it very easy to schedule daily backups of your client’s live databases. A good security measure to have in case they delete something by accident…

Coding

There are many good OS X apps for coding, but I personally think TextMate is the best one of them. It does require a little bit of customization though. You do that by installing bundles and plugins. Here’s what you’ll need:

1. TextMate HTML bundle: makes coding HTML much faster than with the default HTML bundle.
2. TextMate CSS bundle: same thing… but for CSS.
3. TextMate ReMate Plugin: fixes a TextMate annoyance when working on remote projects.
4. TextMate ProjectPlus Plugin: Adds lots of nice features, such as SVN status icon in the project drawer for instance (look on the blog for possible updates, the author doesn’t have a specific page for the latest version).
5. You might also want to check out my TextMate minimal Theme and see if you like it.

Follow the links above to get a lot more info about each one of those additions. I also highly recommend you check out the Text Transformations screencast and Inserting HTML Tags screencast by TextMate’s developer.

There’s only one other tool I use constantly when coding HTML and CSS, although its function is completely unrelated to coding itself: xScope. This app is a collection of incredibly useful visual tools that let you check spacing, dimensions, and alignments, as you’re translating the design from PSD to HTML. The almost magical “Dimensions” tool is simply brilliant.

Testing and debugging

Here are the tools I use for troubleshooting. By far, the best is Firebug, a Firefox add-on that lets you inspect the DOM and modify it, as well as the CSS that’s attached to it, on the fly. Firebug is also invaluable when you need to audit someone else’s code.
Another useful Firefox add-on is Web Developer. I use it mostly to quickly validate HTML and CSS, but it has loads of useful features that are worth investigating.

I also like to turn on “Show Develop menu in menu bar” in Safari (in the advanced section of the preferences) and use Safari’s “Activity” window (option+command+a) often. I like the way it shows information better than Firebug.

Finally, for IE, I use the Internet Explorer Developer Toolbar. It’s definitely not as good as the Firefox version, but it’s sometimes useful in figuring out IE bugs. Although I almost always find black magic to be more effective…

In order to run IE6 and IE7 on my Mac, I use VMware Fusion. I find it more solid, faster, and better integrated than Parallels.

Working online

To upload stuff online, I use Transmit. I’ve used every FTP programs known to mankind, and I always come back to Transmit. If you’re looking for a free alternative, Cyberduck is almost as good.

If you got everything setup the way I described it above, you should be working locally off of a SVN repository most of the time, but sometimes you might need to work directly on a live site. The best way to do that with TextMate is to use Macfusion (ExpanDrive is another option. I haven’t tried it myself but it’s considered better by quite a few knowledgeable people; it’s not free though). I’ve already written a detailed article on working remotely with textmate.

Conclusion

As I already mentioned, this is just my way of doing things. I welcome feedback and comments. I’d love to learn a couple of new tricks for other developers… And feel free to let me know if you’d like me to expend on anything, or if something is unclear.

I Hope it helps!