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.

Heads up, developers: the PHP folks have announced their intention to deprecate the old MySQL database extension.

As they say, “Don’t panic.”  It’s not like MySQL-extension-based sites are suddenly going to start throwing exceptions; this is more a documentation change and a community education effort.

Going forward, the PHP team recommend two alternative extensions for new site development: pdo_mysql and mysqli, with PDO being the PHP way and main focus of future [PHP team] endeavors.

If you’re currently a Dreamweaver user or are just using the old MySQL extension out of habit, I developed a free tool in MyQuery Builder that will convert your existing code to both procedural or class-based MySQLi code, your choice.

Sign up for free and click on the Tools tab once you’re in to use the “MySQL->MySQLi Converter.”

Good news, everyone! MyQuery Builder is now available as an app in the Chrome Web Store. Once you install it, an icon will appear on your new tab and/or home screens. Click on that icon, and it takes you directly to the Query Builder (assuming you’ve signed up, etc.).

MyQuery Builder, if you don’t know, is a visual MySQL query editor and php code building tool designed for php web developers. Try it for free or find out more information at myquerybuilder.com.

I’m proud to announce the launch of my latest project, MyQueryBuilder.com!

MyQuery Builder is a visual tool for professional PHP developers who need to construct MySQL queries reliably and easily. If you have ever needed to build database functionality into your site, you’ll want to check MyQuery Builder out. The tool is a web-based app that can run either in the cloud or locally on your dev server. It is designed work in harmony with your existing tools (e.g. Dreamweaver, Coda, BBEdit, etc.) and to be an integral tool in your production pipeline.

At the heart of MQB is the SELECT Query Builder that lets you drag and drop tables and fields on one another to build your query up interactively. It’s a really slick way to build even complex queries with multiple JOINs and condition statements. Find out more and see the SELECT Query Builder in action.

Its counterpart is the Utility Query Builder that lets you build UPDATE, INSERT, REPLACE, TRUNCATE, and DELETE queries with just a few clicks.

Both tools can throw their resulting queries over to the PHP Code Builder that construct functions and class methods (or stand-alone procedural code) with ease. If you’re working on multiple projects simultaneously, you can use saved Sets that create code to your custom coding standards. It even supports both the old MySQL and the newer MySQLi PHP extensions.

The starter account is free, so there’s no risk at all to kicking the tires. For more advanced developers or situations where you need to access secure data, there’s an option for you to download and install MQB on your local development server. Compare the features and pricing over at MyQueryBuilder.com.

MyQuery Builder is an integral part of my development workflow, and I hope it will be for you, too.

To help spread the word about MyQuery Builder, you’ll get a free month of the Pro or Locally Hosted plans for every user you sign up. Simply put your referral link up on your blog or site and you can conceivably never pay for the service.

After ten long years, I’m finally kicking Dreamweaver to the curb. I’m done. I’ve had it. I’m divorcing Dreamweaver.

In this article, I’ll chronicle my journey and describe the choices I made along the way. I committed to switching away and used the productization of my MySQL query building tool, MyQuery Builder, as the testbed for this experiment. After a few jarring days, I grew to love Coda and I haven’t looked back since.

If you have ever thought about looking for an alternative to Dreamweaver but have never made the leap due to difficulties in learning new tools or finding equivalent functionality, you’ll be interested in my story.

My Breaking Point

I have been seriously thinking about eliminating Dreamweaver from my development workflow since the release of CS3. Since Adobe’s purchase of Macromedia, the app has steadily gotten worse. This is not a knock on the very capable members of the Dreamweaver development team, more the inevitable result a publicly traded company’s demand to upgrade a product that tries to serve too many disperate audiences. Designers are not developers, and the tools they need are vastly different. In an effort to serve both audiences, Dreamweaver has ultimately failed both. The app is crumbling under its own weight.

With each CS release, the app became less usable, more buggy, and increasingly bloated with shore-horned features that try to serve too many masters yet ultimately serve none. With CS5.5, Dreamweaver things reached a critical breaking point. Between the crashes, the bugs, the data corruption, and the addition of yet another bucketload of features I didn’t need or want, I’d had it. I was done.

This is the app I cut my developer teeth on; the app that used to be indispensable; the app I recommended to colleagues; the app I deployed to my teammates; the app that I could count on for professional-quality web development.

Alas, Dreamweaver ultimately became the app I loathed with every keystroke and cursed with every click.

It’s sad, really. As with the end of a real marriage, I mourned the history I have with Dreamweaver. I’ve developed hundreds of web sites using Dreamweaver. I’ve developed entire production pipelines and internal tools based specifically to work with Dreamweaver. But in the end, the relationship was rotten to its core, and I needed to move on.

Removing Dreamweaver from my production pipeline has mostly been an exercise in finding—and in some cases, building—equivalent tools. But more than anything, it has been an exercise in unlearning practically every development pattern I know and overcoming ancient habits.

In the end, I write this saying it’s done. It’s over. I did it. And you can do it too. You can step off the ledge. You won’t fall.

First, the End

The biggest challenge has been finding equivalent tools. Here’s what I ultimately landed on:

• For the day-to-day, bread-and-butter coding, Coda is the best tool around. The biggest hurdle to using it was getting past its differences between Dreamweaver. Trying to work in Coda after a decade of doing it the "Dreamweaver Way" is, in a word, shocking. There are some tricks I’ll describe later to ease this shock, but you still have to fight through it. However, I’m here to say that not only can you make the transition, you should. It’s a much better live out here on the other side.
• One gaping hole in Coda’s feature set is support for dynamic site development ("Server Behaviors" in DW parlance). For this, I significantly upgraded and productized some internal tools I’ve developed over the years. The end result is MyQuery Builder which lets you build MySQL queries and wrap them in PHP code. In fact, it was the project to productize MyQuery Builder that I chose to ween myself off of Dreamweaver.
• For version control (which I never really used Dreamweaver for anyway), Versions.app is the tool of choice.
• For direct file transfer, Transmit can’t be beat even by Coda’s built in FTP capabilities.
• I still use the Mac’s Terminal app for command line work, TextExpander for snippets, and Dropbox for seamless development across development machines.

So between these tools, I have 98% of my development work covered. The one thing I still miss is the ability to scaffold forms quickly. I’m sure I’ll figure this out, though. It has to be a solved problem. I simply have to find—or write—the right tool. In the mean time, I can code by hand.

Now, the Journey

Now that you know the end, what follows is the journey that got me here.

It took a little over a week to work through the loss of productivity learning the new tools. Here goes…

Standing at the Ledge

For years, I’ve been building up to dumping Dreamweaver. My production pipeline is a patchwork quilt of tools that all have the same characteristic: each overcomes some shortcoming in Dreamweaver. Site-wide search and replace is done in TextWrangler; complex MySQL query construction was accomplished in MyQuery Builder; code cleanup and formatting in various internal tools; JavaScript development in BBEdit. File transfer with Transmit and version control with Versions. But at the core of all of this was Dreamweaver.

Over the years, I’ve tried replacing Dreamweaver. I experimented with alternative tools like Espresso, hardcore tools like TextMate, and even <shudder>Java-based PHP IDEs.</shudder> I was desperate.

However, change is hard. My life is a series of deadlines, so I never found the time to work through that initial shock of learning a new tool. After every attempt, I would hit some brick wall of productivity and just figured it wasn’t worth the time and effort, so I kept coming back to Dreamweaver for my day to day PHP coding.

With CS5.5, the cost/benefit scales titled. Not only was Dreamweaver quirky, slow, and inefficient, it was now crashing like mad and corrupting my data. I was done.

Facing failure again, I knew that a successful jump depended on a wholesale commitment to finding and adopting the right tool for me. I knew this would be hard to do with a client site, so I chose an internal project that had no strict deadlines and upon which I could experiment.

The Perfect Guinea Pig

MyQuery Builder is a visual query builder that lets you build complex MySQL queries by dragging and dropping fields on one another. It started life strictly as an internal tool, but I knew it would be of benefit to other developers, so I decided to productize it and make it work in a wider variety of environments. Thus, MyQueryBuilder.com was born.

Being built in Dreamweaver originally, the proto-MQB was a hodgepodge of frameworks and standards all necessitated by the desire to make the tool compatible with Dreamweaver’s widgets and tools. A massive benefit to eliminating this dependency on Dreamweaver editability: much cleaner code. Dreamweaver’s tentacles reached way down into functions, classes, site structure and file organization. It was nuts.

So I had a project that had no deadlines that was also a perfect testbed for experimentation. It was perfect, so I jumped.

The rest of this article is a diary of sorts chronociling the difficulties I encountered and the techniques I used to overcome them.

Epilogue

So it’s been about a month since I removed Dreamweaver from my Dock. That was a huge psychological moment for me. Since then, I’ve opened Dreawever twice; once to build an unbelievably complex form, and the other time to open a legacy site that wasn’t set up in Coda yet for a quickie, one-sentence edit.

My conclusions:

• Coda is the bomb. Coda2, I hope, will overcome a few of the rough spots that remain in the feature set, but they don’t need to change much.
• Not only is it nicer working in Coda than in Dreamweaver, I never realized how deeply the "Dreamweaver Way" impacted my site architecture choices and coding style. It’s like getting rid of a limp you never realized you had.
• Replacing Coda’s default syntax highlighting themes with ones that more closely matched Dreamweaver’s overcame one of the biggest, yet most subtle, psychological barriers in this process
• If anything, this effort has made me realize just how bad Dreamweaver is. I never knew…

So there you have it. It’s done. Dreamweaver is out of my life, and I’m better for it.

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.

Until recently, this has become only a minor inconvenience when, say, juggling logins for testing Google Checkout (which I’m kicking to the curb…more posts on that later).  Now with the advent of Google+ supporting only Gmail accounts, the problem has boiled over for me.

The good news is that there is a solution for that: the paid version of Fluid. Let’s call it “Fluid Pro,” although that is not it’s official designation.

If you don’t know, Fluid is a little app that leverages WebKit and functions identically to Safari.  Although, it creates a little self-contained app complete with its own icon.  However, the free version of Fluid shares its cookies with Safari, so it didn’t solve the multiple-login problem.

I was poking around the preferences and found this little item:

матрациNot to be outdone by Apple’s recent launch of their HTML5 playground, Google has launched their own HTML5 Developer Resource site called HTML5Rocks.com.

The site has some useful tutorials and an interactive sandbox, but for the time-impaired, they also have an excellent presentation that shows you quickly what is new and different. As with most things Google, it’s not the prettiest site, but it gets the job done. Check it out.

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.

I created a special tile set that contains the Rhode Island tile set and supporting data, along with sample files that help you get going quickly. For more details, visit the Free 5-Digit ZIP Code Sample Set Information page over at MapTechnica.

Apple has just launched an effort to support more widespread adoption of HTML5 in the developer community. This page showcases a bunch of cutting-edge demos, and this page digs into the demos more deeply and provides more resources to learn how to develop features using HTML5.

Standards aren’t add-ons to the web. They are the web. And you can start using them today.

Dropbox [link] is a highly recommended service that lets you share large files amongst different groups and machines that I’ve written about before [here].  MobileMe is a very not-free service that provides marginal utility for Mac users.

If you’re like me, the only reason to use MobileMe on a daily basis is to keep my machines in sync.  So if there was a technique to use DropBox rather than MobileMe to handle all that syncing of data, wouldn’t we all just drop MobileMe in a heartbeat?  I know I would.

Well, so far, I’ve managed to replace the syncing for my third-party apps with sym linking, terminal, and DropBox.  I won’t go into detail here.  Instead, I’ll refer you to a very excellent walkthroughхотелско обзавеждане of the technique provided by the makers of TextExpander over at SmileOnMyMac. Link to the story here.

You’ll want to signup and download DropBox for free if you haven’t already done so.

Now, if we can figure out how to sync first-party apps, we can finally kick MobileMe to the curb and spend that $100 a year on something better.