Developing web apps in 2011

What tools are the best for web development these days? It depends, of course, on what you do and what your personal preferences are. But let me tell you what I use and what works best for me, and most importantly, why I think it works best for me.

These days are over! Or are they? — (cc) ajmexico

Software

IDEs are not my kind of idea of how software should be developed. If your programming language, toolkit or library is so extensive and complicated that you need an IDE to develop, something is wrong. Small is beautiful. A plain old text editor is enough to make the world’s most amazing web applications.

My development work basically falls into two distinct categories, bugs/features for existing products and open source software; and rapid prototyping (there’s also a huge chunk of administrative work of course).

Bugs and features for our existing products/OSS

• MacVIM rules supreme as my editor of choice here, not only it has great customizability and comes loaded with all sorts of helpers, it also can run full-screen, which makes it easy to concentrate on a bit of code, figuring out bugs, and so on. Be sure to grab PeepOpen, the ideal companion app.
• I develop exclusively in Safari. Safari’s Web Inspector is quite an amazing tool to help you get stuff done. I know that many developers prefer Google Chrome, but most just subscribe to Google’s Kool-Aid, while overlooking the issues it has. It’s not as stable as it could be (at least on OS X), doesn’t support hardware-acceleration and 3D CSS properly (I do a lot of work with advanced animations), has inferior typography and the JavaScript engine is actually slower than Safari’s in a lot of real-world situations. Firefox, sadly, is no longer an option as Firebug tends to be buggy and sluggish (Firefox 4 is coming along rather nicely, tho!)
• In addition, I find Benchmark.js, UglifyJS and the DOM Monster incredibly helpful for JavaScript and web development.
• For bug-tracking and support we use our own app, Charm, (it’s awesome, and it will be out soon!)
• Our code is safe and sound with GitHub.
• For cross-browser testing, I use VMware Fusion. I have 5 virtual machines installed, side-by-side, Windows XP with IE6, Windows XP with IE7, Windows 7 with IE8, Windows 7 with IE9 RC, and the latest Ubuntu. These machines are set up in a way to be able to connect to the host (OS X) operating system’s file and Apache servers.
• Other tools and helpers I use include zsh and oh-my-zsh, Homebrew, Transmit, Propane and Skitch.
• Adobe Photoshop and Illustrator are still pretty much a given for any serious web design; with some contenders lining up to (hopefully) change this in the not too distant future.

Rapid prototyping of new products

As above, but I prefer TextMate here. For rapid prototyping I have a much more visual approach on where to add code and files, and TextMate’s project window is pretty great for this.

Hardware

There are two options, either you need to be fully mobile or not. Right now, I’m travelling a lot and basically live in two places, so I need a complete development setup on me. There are some constraints here:

• The hardware must be powerful enough not to make me wait in most if not all situations
• I need to be able to run multiple Virtual Machines (see Software, above), without slowdown (also, these need quite a lot of hard drive space)
• Needs to run cool and quiet (I hate fans), with good battery life
• Need to support all of the previously mentioned software
• Screen size should be big enough to comfortably work on for extended periods of time
• For cross-browser testing, you need to be able to run certain browser/OS combinations: IE6, 7, 8, 9 on Windows; Firefox on Linux, Windows, Mac; Safari on Windows, Mac; Chrome on Linux, Windows, Mac; and perhaps Opera and other exotic browsers, too.
• For mobile web development, simulators or emulators for iOS, Android and webOS should be available.

Basically, what I have is the latest model maxed-out MacBook Pro 15″, with the largest possible SSD drive. I update my computer about once a year. This may seem excessive, but it’s the single most expensive tool I use, and in the overall scheme of things, it’s what I’m sitting in front of every day, for hours. If you’re not getting the very best thing that’s out there, you’re just hurting yourself in the long run.

Your health, well-being, happiness and productivity will be worth the investment.

If you’re asking yourself whether or not to get an SSD, you’re asking the wrong question. Ask yourself whether or not you want to copy 20GB in 3 minutes, if you want to boot in 10 seconds, if you want applications to start instantly, if you want the laptop to be inaudible, if you want no head crashes and if you want longer battery life. The answer is, of course you do, so get the SSD. I just use the Apple-provided 512GB SSD, but if you feel more adventurous you can get even better 3rd-party SSD drives.

One reason to not get 3rd-party stuff is Apple’s incredible support. Anywhere I travel in the world where there’s either Apple Stores or approved resellers, I can get my laptop fixed if something breaks, usually in no time at all. No other manufacturer provides service like this, so conveniently. If all the stuff that’s in the laptop was part of my original order, it’s easier for them and for me to repair it.

In both of my offices, I have external screens, and I can highly recommend the 27″ Cinema Display, because the screen size and ratio is really comfortable to work with, the picture quality is amazing, and the built-in camera, speakers and power for the laptop make it super-convenient.

I use the Apple full-size keyboard (US layout) and a Magic Mouse. I also do use the Magic Trackpad some, as I find it works very well in tools like Photoshop when I need precise control. It just feels more direct than using the mouse there.

For backing up important files I use Dropbox, just don’t be their marketing droid and get the paid plan and be happy. Plus, I’ve time machine backups in place on both sides of the Atlantic, using this 2TB external hard drive.

If I was to live in just one place, I’d probably get an iMac or a Mac Pro; and a MacBook Air for mobile use. The next gen MacBook Airs that are rumored for June might just make me do the switch to a 13″ Air from the MacBook Pro, as these should be powerful enough for my multiple-VM setup.

Oh, and I have an old-school desktop calculator as I just like pressing real buttons from time to time. And headphones. And I’m a sucker for great desk lighting.

But wait, there’s one more thing…

Software development is so much more than just computers and software and hardware.

You want to be in a place that sparks your creativity, that gets you off your lazy ass, that inspires you and where you can relax, too.

More important than any computer you can ever buy is surrounding yourself with the right people. If you’re working from an office cubicle, with all your co-workers just waiting for 5pm so they can go home, you just can’t create great software. Same goes if you’re stting at home, all by yourself, brooding over the keyboard. Not possible. We found our development nirvana in Philadelphia, at IndyHall.