judah’s blog

This is still a work in progress but this is how I test my sites across all browsers and operating system’s without uploading to a server and using only one computer. What’s the catch? You need a Mac. …wait for it. Ok, now that the Windows and Linux readers have stopped reading let’s make fun of their operating systems. Windows is all like, too blue and stuff. And Linux users have to type a lot of stuff. HAHAHA. (long pause) Anyway, my disclaimer. I’m not a Mac fanboy. I like it now that I’ve been using it for a while. Before this I used Windows PC’s and through a series of work related events I purchased a Mac. It wasn’t “all that” but I prefer it now for development and if I need to I can run Windows independently through a separate partition using bootcamp or from within Mac OS X through VMware Fusion. Moving on…

Requirements

VMware Fusion 2
Mac
I have a Macbook with OS X 10.5.6, 2.4 GHz Intel and 4GB Memory. I don’t know if it will work on your computer but if you can run VMware Fusion 2.0 then you should be good.

Setup your Virtual Machines

1. Create a new virtual machine for Windows XP – Tutorials

Create a Virtual Machine and Install Windows XP
Create a Virtual Machine from an Existing PC
Create a Virtual Machine from a Boot Camp Partition
Handle Windows Activation Issues

Note: It may ask you during setup if you want to share files or have a shared folder. You can choose no.

In general you might have 3 or more virtual machines. The main ones I have are:

Windows XP with IE7, Firefox, etc
Windows XP with IE6, Firefox, etc
Windows Vista with IE7, Firefox, etc

2. Once you have a virtual machine up and running power it down and go into the settings for that virtual machine. You can get to the settings by selecting the virtual machine in the Virtual Machine Library and clicking the Settings button.

3. In the Network settings make sure the Network is set to use NAT. This option will, “Share the Mac’s network connection (NAT)” with this virtual machine and ultimately share the site across all our testing browsers.

Setup your local server

4. Install web server if you don’t have one already. I recommend MAMP, XAMPP‘s inbred cousin (a PHP, mySQL and Apache server).

5. Start your web server. If you are using MAMP you can go to the MAMP Control Panel, Applications > MAMP and click the Start Servers button. When your server is running this button will change to “Stop Servers”.

6. Once your server is running open your browser to, “http://localhost:8888/” or “http://localhost:8888/MAMP/”. It should show the MAMP start page.

Note: If you have more than one website, which I’m sure you do, you can separate them by placing each site in it’s own folder in the MAMP > projects folder. You may need to create the projects folder if it isn’t created already.

Note: You can switch between which projects you see when you go to, “http://localhost/” by opening the MAMP Control Panel and going to Preferences > Apache.

Find your Server IP Address

1. Go to Applications and open Utilities > Terminal
2. Type ifconfig vmnet1 and press Enter. This will tell you the IP address of your server. You are interested in the address after the word “inet”.
3. Copy and write down the inet address. This is an alias or loopback IP address, like http://localhost/, that points specifically to your pc. If you go to another computer and type this address, it will point to their pc.

Confirm the Connection

1. Open your browser that you had open before.
2. Browser to these url’s again, “http://localhost:8888/” or “http://localhost:8888/MAMP/” except this time replace “localhost” with your “inet” address. For example, change this, “http://localhost:8888/” to “http://172.16.152.1:8888/” using your inet address.

It should point you to the same web pages as before. This is because “localhost” and your inet address point to your computer and the port, “8888″ points to the MAMP server. If you couldn’t get this to work go back and check that the inet address is correct. If you haven’t got this step to work the following steps won’t work.

3. In your browser window Copy the URL

Test the Connection in a Virtual Machine

1. Open VMWare and open a VM. For example, your Windows XP VM.
2. Open a browser and paste the URL into the address bar or type in, “http://localhost:8888/” or “http://localhost:8888/MAMP/” and replace “localhost” with your “inet” address. View the page. It should point to your server.

What I usually do at this point is bookmark the address on the virtual machines browser, place the bookmark on the toolbar and name it, “machost”.

I also take the virtual machine window, drag it into another “Space” (drag to a corner) and display it full screen. I’ve setup a key combination to switch (ctrl + left arrow / right arrow) to switch between spaces. Now, when I switch spaces I go directly from full screen Mac OS X to full screen Windows XP and back again. It’s really cool. You can also drag your browsers to the Mac dock and launch them from there.

Workflow

So, now that it’s setup here is my workflow:

• Create a site or project
• Publish it to it’s own directory in “Applications/MAMP/projects/project_name”
• Point the server to it using MAMP Control Panel. MAMP > Preferences > Document Root > “Applications/MAMP/projects/projectName”
• Test the site in Firefox using Firebug to inspect HTML elements and check for JavaScript errors.
• Confirm it works in Firefox
• Since I use Flex Builder which publishes a Flash Player swf I’m done. I don’t have to test it on every browser.

If you are a poor soul who has chosen to work in HTML you know what you have to do and how much it sucks. I feel for you. If I was in your situation, which I was, I would learn Flex, which I did. Flex jobs are in high demand. And now with Flash Catalyst coming out (eta. late 2009) there are going to be new jobs for that.

BTW I’m working on a new Flex framework that would let you transition to Flex from HTML easily. Watch this blog for it. I’ve also wrote an article that shows you the differences between HTML and Flex code (the good stuff is after the first page). I wrote it just for you. The article contains a Flex project file that contains more than 10 examples of things with code comparisons between Flex and HTML.

This entry was posted on Thursday, February 19th, 2009 at 2:17 pm and is filed under Flash, Flex, General. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.