Web Site Development Environment Recommendations
Tuesday, September 27th, 2011
I frequently get asked what I use to develop my clients’ web apps or if I could recommend a tool to do such-and-such. It’s a good question. Web development is constantly evolving as quickly as the web itself. With so many choices, it’s easy for new developers to get overwhelmed, and harder still for experienced developers to stay on top of the tools. What follows is a list of tools and hardware I use to create complex custom web applications for my clients.
Overview
- Development Hardware: Mac Pro Quad-Core
- Display: 1x 24″ monitor, 2x 21″ monitors
- RAM: 16GB
- SSD/HD: 256GB Crucial C300 SSD, 3x 2TB WD Green onboard, 2TB WD My Book Studio II, 2x 1TB rotated external backups
- System Backup: SuperDuper!
- The Best Code Editor: Coda
- The Best MySQL Query Editor: MyQuery Builder
- The Best MySQL Database Manager: phpMyAdmin
- Version Control: Subversion + Versions.app
- FTP Client: Transmit
- Text Editing: TextWrangler
- Text Expansion: TextExpander
- QA: phpUnit and Fake.app
Various Types of Expensive Metal and Plastic
So the first choice to make is Mac or PC. Speaking personally, the advantages of developing on a Mac are too many to count. Some of the highlights are as follows:
- OS X and Linux are different flavors of the same ice cream; you’re developing on the same foundation that your sites are deployed on.
- There are long-term cost of ownership and lost-productivity costs associated with Windows-based development.
- There’s the superior fit-and-finish of the tools available on the Mac, which makes working on stuff much less about banging your head against your desk and more about getting stuff done.
- You can still run Windows through virtualization or Boot Camp, so you’re covered on browser testing across both platforms and can even go deeper into older versions of Windows and IE with virtual hosts.
The list goes on and on. Bottom line, I can’t imagine developing for the web on anything other than a Mac. I made The Switch in 2005 and have never looked back. Not for a second.
My personal choice of a Mac Pro over, say, a laptop is driven more by the need to use three monitors. This is a luxury, but I find it incredibly useful to have all this screen real estate. At the very least, I would recommend the biggest primary monitor you can afford and throw a second monitor on if at all possible.

Stringer Sites World Wide Headquarters (support staff pictured underneath desk)
With the Mac Pro came the ability to add gobs of RAM which I did a while back for my MapTechnica project that required every bit of RAM it could get its hands on to pre-process the millions of ZIP code tiles. Under normal circumstances, I’d recommend no less than 4 GB of RAM but as much as you can afford. Remember that after-market RAM is often vastly expensive than Apple’s.
On the hard drive front, I split my drives up across the 4 bays. The primary drive is the biggest SSD they sold at the time, a Crucial C300. Slapping that drive in was like getting a whole new computer. The downside is that I had to do a lot of hard drive shuffling to get my media and non-essential files onto a second 2TB Wester Digital Caviar Green. With symbolic linking, this is a snap. I use my 3rd and 4th 2TB WD Greens for Time Machine and media backup, respectively. I keep a 2TB WD MyBook external drive attached for daily backup using SuperDuper! that I plan to yank and toss out the door in the event of a fire. Finally, I rotate two 1TB drives into a safe deposit box monthly. Let’s just say I’m paranoid about my data backup.
As if I didn’t already cause brownouts throughout the DFW metroplex, I also have various laptops of all flavors and OSes for QA purposes. My main road machine is a basic white Mac Book which I love. On the Windows side, my main Windows 7 machine is a Dell XPS laptop that is absurd in every way. It weighs 12 pounds, not including the 4 pound power brick that’s the size of a cinder block. It’s loud. It’s hot. It has the battery life measured in minutes, not hours. It often takes 15-25 minutes to boot and be productive (that’s Windows’ fault, not Dell’s). Let’s just say I hate everything about it, but it’s a necessary evil.
Finally, I have various iOS and Android devices around for testing and mobile development.
IWDE: Coda
For years and years, I was a die-hard Dreamweaver user. But with each subsequent release after Adobe purchased Macromedia, the product has become increasingly bloated, buggy, and difficult to use. It got to the point with DW5.5 that I finally had to divorce it for good. I didn’t realize how much I was burdened and locked into certain (bad) coding styles until I made a clean break from Dreamweaver once and for all.
Related Article: How you can make a clean break from Dreamweaver, too
In its place, I’ve found Panic’s Coda to be a breath of fresh air. Yes, I wish this Integrated Web Development Environment (IWDE) had more robust code completion and better support for frameworks, but living without those conveniences (presumably until Coda 2 comes out) is a small price to pay for the efficiences in production, the flexibility in coding, and the integration with various tools. You know the adage it’s far better to do one thing well than everything poorly? That applies here. Coda is a simple tool; it does not try to be all things to all developers in the way Dreamweaver does. Instead, Coda focuses on providing a clean, elegant work environment where I can get my coding done efficiently and swiftly.
MySQL Query Editor: MyQuery Builder
Here’s where I depart a bit from the norm. I’m a DIY kind of developer; if I can’t find a tool that does something I need, I build it. Which is where MyQuery Builder started. Using Dreamweaver’s canned server behaviors is great for developing scaffolding quickly, but I would never in a million years put Dreamweaver’s canned code into a production site. So I started looking elsewhere for solutions and found none that let me edit MySQL queries efficiently while building advanced features into my clients’ sites. So I built one that did. My goal was to build the best MySQL query editor available on the net and make it available to fellow developers.
MyQuery Builder at its heart is a MySQL query editor that lets you build up complex SELECT queries by dragging and dropping components around. It combines this query editor with a code builder that cranks out the production-ready functions, classes and procedural code that are integral to dynamic web sites. For the next upgrade, I’m looking at adding more flexibility into the code builder to allow for a wider variety of custom code building solutions, not just my own.
Related Article: MyQuery Builder Makes Editing MySQL Queries Easy
Database Management: phpMyAdmin
While I use MyQuery Builder to edit my queries, I use phpMyAdmin to manage the databases themselves. This isn’t surprising since PMA is the de facto standard of MySQL database managers.
Version Control: Versions.app
There are many advantages to putting a site under version control, not the least of which is that it keeps your client work safe from screw-ups and overwriting that can easily happen if you don’t. Version control also lets a team of developers work safely on a site without fear of overwriting each others’ work. Finally, a site under version control can update itself almost instantly on the live server, vastly eliminating the likelihood of breaking the site while your FTP client uploads files one at a time.
Since Subversion is built into OS X, and it’s relatively easy to use, it’s my recommendation for the flavor of version control to use. Git is fine and all, but it doesn’t have the robust choices of client apps and managers Subversion does. Plus, Subversion is ideally suited for the types of files typically used in web development.
Related Tutorial: Starting Subversion on OS X Startup
To put a face on Subversion, I highly recommend the most excellent Versions.app. It’s by far the most fully-featured SVN app out there, and it’s a pleasure to use.
FTP Client: Transmit
While Coda has a lot of Transmit’s features built in, I still like my FTP capabilities to stand alone. Transit is the best FTP client in its class by a mile. Enough said.
Text Editing: TextWrangler
TextWrangler is free, simple, and unbelievably useful. In short, if its text related in any way, it starts in TextWrangler.
There’s also TextWrangler’s best-in-class multi-file search and replace. I’ve yet to find another app that comes close. Now, Coda’s is fine for routine S&R, but if I’m doing any serious multi-file searching, I have TextExpander instantly available on a hotkey.
Text Expansion & Snippets: Text Expander
There are many choices here, so it’s hard to go wrong. TypeIt4Me is also very popular, and I plan to try it soon. Which is to say, it doesn’t matter much which text expansion app you use, just use one. Personally, I found TextExpander about three years ago and I have no idea how I lived without it. I have a library of code snippets that I can blast out with a few key strokes. You’d be surprised at how fast you can crank out a complex page of code with a helper like this.
Quality Assurance: phpUnit and Fake.app
phpUnit is a free framework that makes it easy to set up a series of tests that stress your classes and functions in a variety of ways. The utility here is ideal for testing core functionality. Let’s say you develop a big, complex class that does something useful. You’d set up a series of unit tests that stress that class in various ways. Then let’s say that many moons later you go in and extend that class. You can simply re-run the unit tests to make sure you didn’t break any legacy functionality while you develop the new features.
While phpUnit shines at unit testing stand-alone classes and functions, it is not very helpful testing a site in a more human-oriented way. Here’s where Fake.app comes in extremely handy. Like phpUnit, you set up a series of scripts that interact with your site in the same way a user would. You run the scripts in Fake.app as you develop your site to ensure everything’s still working before you check it in.
Between phpUnit and Fake.app, it’s like having your own QA department. It’s a godsend, and it will vastly improve the quality of your work. Your clients will thank you for it.
Conclusion
These are the primary developer tools in my arsenal. There are probably a dozen more apps and tricks I use, but these are particular to my own environment. I’d love to hear what others are using in their workflows. Feel free to leave comments with your own setup.
Sphere: Related Content



Good news, everyone! MyQuery Builder is now available as an app
Closeup of MyQuery Builder’s SELECT Query Builder
After ten long years, I’m finally kicking Dreamweaver to the curb. I’m done. I’ve had it. I’m divorcing Dreamweaver.
As a standard practice, I set up a Google Apps for my small business clients. Between these and the Apps accounts for my various sites, I have so many Google logins that I’ve lost count. It’s well into the dozens, which, I’m sure, is hardly a record for your typical indie web developer.
If you’ve been considering buying a MapTechnica Tile Set (c’mon, you know I’m talking about you), you now have a risk-free way to try a sample tile set to see if it will work for your map project.
Apple has just launched an effort to support more widespread adoption of HTML5 in the developer community. 