When developing websites, one of the hardest hurdles is crossbrowser testing. In this article, i’ll explain how one can set up a very fine working LAMP environment that makes this crossbrowser testing *almost* bearable. Specifically, this will show you how to make your local websites available to your virtual machines.
1./ Mac Os X. I’ve been using Windows for most of my life, but in 2009 i switched to Mac machines. Because, let’s face it: there is simply no easy way to test Mac browsers without owning a Mac, there was (is?) no way to have Mac Os X running on a virtual machine AFAIT. Oh, and also: Mac Os X started to get a lot of traction around that time, providing a much elegant user experience than the clumsy, alert-please-confirm-apply-prone Windows. Since there are awesome developer tools available on Mac (and the hardware is so gorgeous), I made the shift. Honestly, thank you Microsoft for teaching me so much about PC internals, but i’ll never look back.
2./ LAMP. Mac comes with a preinstalled LAMP setup, but it’s quite messy to configure – and risky. The obvious choice is to go for Mamp (Freeware), and even better Mamp Pro (39,-EUR). In addition to having an easy way to manage your localhost, Mamp Pro allows you to set up custom local domain names. So instead of testing for
http://localhost/clientname/, you test for
http://clientname.dev. It doesn’t seem like much, but this simple feature makes it a no-brainer to manage dozens of dynamic websites (just replace the customer’s TLD with “dev” and, “yup there it is!”).
From there on, you can test your website or web application on Chrome, Firefox, Safari, Opera and what not. If you are on Windows, go with Wampserver and Hostman (see point 4 for more on this), it does the job okay, but keep in mind that you won’t be able to test on a Mac without owning one AFAIK, and Mac browsers account for around 10 to 30% of traffic for the websites i maintain.
3./ Internet Explorer via virtual machines. Although on the decline, IE stills means around 50 to 60% of your average client’s traffic (at least for my share of the internet). Among which, version 7 of the most hated piece of software ever created still accounts for around 7 to 10% of traffic. Now, IE7 and 8 run on Windows XP and windows 7. IE9 and IE10 run on Windows 8.
Thankfully, you can use virtual machines to emulate both environments. After using Parallel Desktops for a couple of years (around 80,- EUR), i’ve happily switched to Virtualbox a year ago, which runs faster, is widely used and… is free! If you do not own a copy of Windows, you’ll be pleased to know that since recently, Microsoft makes available virtualized images of IE+windows combos for free on http://www.modern.ie in a commendable effort to ease the process of testing for IE.
4./ Configuring Windows virtual machine to recognize my local “.dev” host names. One of the good points of the Windows world is the amount of freeware available: Hostman is a free tool that allows you to tinker with your Windows host file and provide it with your local ip and matching host names. Or you can configure your Host file the manual way.
5./ Web coding IDE. On Mac Os X, it is mainly Eclipse-clones like Aptana (buggy) or netbeans (free, which i loved for years, but slow), Textmate, Sublime Text or Coda. I’m perfectly fine with Coda 2, with a zest of a small freeware Fraise (formerly Smultron, and now gone commercial) or the trusty vim for quick editing. Coda allows you to manage website projects so you can set-and-forget your local (.dev) website, your production (.com) website and easily publish from one to the other. It also offer a version control system (although I prefer cornerstone) and an ssh console (which works great). Finally, i also use codekit for Sass development.
6./ Multi-device testing. I used to use Adobe Edge Inspect to automatically refresh connected mobile devices. I have since switched to Muir, as Adobe’s pricing is are just insane. Useful for Responsive web design testing. I also use iOS Simulator (comes with xCode) to test on tablets. I do not do any testing for Android, since the core of my work is websites, not applications, and therefore the testing is more about screen real estate than platform-specific hardware.
Web builders are used to experimenting tools, and change them quite often. I had my share of changes across the years, but this setup seems to stick since a few months. Let me know your own setup and tricks, especially you, Windows user!