I think it’s safe to say that cross platform web development can be a pain in the butt. Although browsers are more similar than ever, there are still countless rendering inconsistencies to keep you up at night. Add the differences between Windows and OS X to the mix, and you’ve got the recipe for a stressful development process.
Thankfully, there are some terrific tools available to make this process quite a bit more streamlined. The situation is even better if you’re on a Mac, where great virtualization programs like Parallels and VMWare Fusion allow users to run one machine with dozens of operating systems available for your testing needs. But what if you’re on a tight budget?
In this brief guide, we’ll show you how to turn that shiny new Mac into the Ultimate Sandbox for web development, and all for less than $1.00.
Why a Mac?
It’s time for a confession: I love my Mac, but that hasn’t always been the case. For years, Macs were just the expensive computers that looked cool but couldn’t reasonably function as a reliable work horse. OS X held a lot of promise with the new technologies built into the core of the operating system, but it was still a piece of software in it’s infancy.
Around 2005, OS X Tiger began to woo me with its lightning fast “Spotlight” search and other features that began to make my trusty copy of Windows XP begin to feel long in the tooth; I found myself lingering at the new Mac in our testing suite longer than necessary, lusting after it’s snappy new OS and wonderfully designed native applications. In November of that year, my wife and I purchased a new iMac and never looked back.
Shortly after our switch to the Mac, something magic happened. Steve Jobs announced a new partnership with Intel that would deliver faster chips for their computers and more possibilities for the growth of their platform. This was a welcome change of course, but the big news to me was the new found ability to run a virtualized copy of Windows at almost full speed.
Although my love for OS X had increased exponentially since switching over to the platform, it was always an arduous process to develop sites on our Mac and then find a Windows machine to use for hours of testing (the same could be said for developing on a PC and testing on a Mac). With one fail swoop, Jobs and Co. gave the development community something of a “holy grail” for web development: one machine that could be used to develop and test sites on all platforms from start to finish, without the need for musical chairs and hours in lost productivity (something that can’t be done on Windows).
Are you ready to take advantage of your Mac’s untapped potential? Put on your favorite album, grab a cup of coffee and get ready to make your development process a whole lot less stressful. Let’s get started!
Step 1: Install Virtual Box and a copy of Windows XP
Last week, I found a great mini-guide covering an open source virtualization solution from Sun called Virtual Box. Much like VMWare Fusion and Parallels (only free), Virtual Box allows you to run multiple operating systems directly inside of a window in OS X (Virtual Box is also available for Windows, Linux and Solaris). Combine this with freely available (and legal!) disk images from Microsoft, and you have a potent one-two punch for the budget-conscious web developer.
The folks at Yeti Software have developed an excellent guide about the installation process; I’m not going to reinvent the wheel here, so go follow the guide to install Windows XP SP3 with Internet Explorer 6. Join me back here at step 2 when you’re finished.
Step 2: Internet Explorer is fickle, so install several versions for testing
If you’re reading this, it’s likely 30 minutes later and you’re excited about your free testing copy of Windows XP running IE 6 like a champ, all from within OS X. Good job… I’m proud of you; now lets get to the cool stuff.
So, Microsoft has different disk images available to test the multiple versions of Internet Explorer, but who wants to go through the trouble of downloading and installing 3 separate images just to test a web browser? I know I don’t.
This leaves us the option of finding some sneaky way to force Windows into running multiple versions of Internet Explorer from the same install. Over the last year, I personally have used TredoSoft’s standalone version of IE 7 with great success. However, with the recent release of IE 8, we need a more flexible solution.
Thankfully, the folks at Edskes Software have come to the rescue with their excellent bundled collection of every version of Internet Explorer imaginable. It installs quick, works great, and has been extremely stable in my testing so far. Grab the Internet Explorer Collection here and follow the instructions to get everything installed in your Virtual Machine. When you’re all set up, move on to Step 3 to put the final touches on your sandbox.
Step 3: Install other popular browsers and start your server
Now that you have more versions of IE than you can shake a stick at, take a few more minutes to get your Virtual Machine set up with other popular browsers available for the Windows platform. For your convenience, here are some links to the most popular ones:
So, you should now be all set up to test your HTML/CSS on a variety of browsers to your heart’s content. But what happens if you want to test some server-side code like PHP?
Thankfully, there’s a great solution in the form of the Apache Web Server built right in to OS X. Simply head to System Preferences > Sharing and enable Web Sharing to use the built-in server. You’ll need to host your code in “home/sites” in order for this to work properly. Once your files are in the right place, simply use the address listed in the Web Sharing screen to access your code from any machine on your local network (including your virtual machine).
Step 4: Learn a new hobby (optional)
You’re going to have a lot more free time now that you’re not skipping from machine to machine to test your code; it might be a great time to start a new hobby (we recommend a career in competitive eating).
I hope this guide has been helpful in giving you a free and fast way to test all of your code. Oh, and in case you were wondering where the $1.00 came in, I just assumed you’d probably take a trip to the vending machine while some of this software was downloading. Enjoy your new sandbox!
Have any testing tips or software that you would like to recommend? Let us know in the comments below.