Viewing localhost in VirtualBox on your Mac

Posted by Jeremy Gillick on 28 Apr 2008 11:04 pm in Funny & Technical

Last week I explained how to convert the IE6 - IE8 VirtualPC disk images to VirtualBox on the Mac. This week I noticed something critically wrong, I can’t access localhost or any LAN IP address from inside VirtualBox. This is a huge problem if you want to do local testing in IE.

The problem is that Mac support is still rather early with VirtualBox and they only provide a NAT networking option. I wont explain what NAT is because I don’t completely understand it myself. If you’re on Linux or Windows you can simply use the bridged network and it’ll work fine.

As with any problem, there is a solution! You could go buy VMWare Fusion, which should support this out of the box, but what’s the fun and challenge in that? The fun and free solution is to use a service called DynDNS.

What is DynDNS

If you’re like most people your ISP gives you a dynamic IP, which means that your home network doesn’t always have the same IP address and every so often your ISP will assign you a different one. DynDNS will give you a free domain name that always points to your ever changing home network IP address.

This means that when you’re done you’ll load a URL like “http://<you>.dyndns.org/” instead of “localhost” inside VirtualBox. This also assumes that you have some sort of web server running on your computer to serve up the pages.

Step 1 - Web Server

Setup a simple web server like Apache or the free version of LightSpeed (free version is at the bottom of the download page).

Make sure the server is installed and running properly before proceeding.

Step 2 - DynDNS Account

Go to DynDNS, register an account and create a new host. The site has good help sections to assist you through any issues or questions you run into. (see the DynDNS How-To section)

After creating the new host, download, install and run the DNS update program. This will update the service with your new IP address every time it changes.

Step 3 - Router

If your network uses a router, you might need to update it’s settings to let the requests through to your computer inside the network. At this point it is important to realize that your router has the “main” IP, which is provided by your ISP, and each computer inside your network will get their own “internal” IP address, provided by the router itself.

First test the new DynDNS URL you created. When you load the URL in your browser does it show pages from your local web server or does the browser sit there and mock you as it endlessly spins the “loading” animation?

If your web server didn’t load anything, you might need to alter your firewall settings and/or setup port forwarding in your router. Start by checking your router manual for information on how to login and change settings on it. On my SMC wireless router after logging in I found the settings I needed under Advanced Setup > NAT > Virtual Server. There I entered the last number from my “internal” IP address (IP on my computer) and the port that should direct to that computer. So if my internal IP is 192.160.2.53 and my web server is setup to respond to port 80, I enter “53″ and “80″ into the fields.

Step 4 - Static Internal IP

If you had to setup port forwarding in the last step, you should also create a static internal IP on your computer. Otherwise next time you restart your computer it’s IP might be different and your URL wont work.

This step is surprisingly simple:

  1. Open your network preferences
  2. Go to the network you use (in my case “Airport”)
  3. Click Advanced (or similar button — I’m using Mac Leopard)
  4. Go to the “TCP/IP” area.
  5. Change the dropdown menu from “Using DHCP” to “Using DHCP with manual address”
  6. Enter the internal IP address you added to the port forwarding setting in your router.
  7. Done

Troubleshooting

If you have any problems with the setup, check out the troubleshooting page at DynDns.

Done

Now you should be able to access your local computer from inside VirtualBox with your new URL.

Running IE6, IE7 and IE8 on your Mac

Posted by Jeremy Gillick on 20 Apr 2008 02:54 pm in Software

I use a Mac, which means testing my work in IE6, IE7 and IE8 is a pain. I have Parallels installed but I don’t want to buy extra copies of Windows just to test in IE. Plus, Parallels doesn’t compress the virtual hard drive so each OS takes about 10 - 20GB of space.

The good news is that Microsoft provides free VirtualPC disk images for each of their browsers:

http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B…

The bad news is that they wont run on Mac and VirtualPC wont run inside Parallels or VMWare Fusion — but I’ve found a solution! We can convert the disk images to work for VMWare Fusion or VirtualBox.

Setup

First go and download the versions of IE you want to use:


http://www.microsoft.com/downloads/details.aspx?FamilyId=21EABB90-958F-4B…

To do the conversion you’ll need a copy of the Qemu command line tool. I couldn’t get it to work on Mac, so you’ll probably need to use it on a Linux or Windows machine. (you can do this through Parallels or VMWare Fusion too) Download, extract and install Qemu tool on your computer.

Linux

WILL NOT work on windows because it was not compiled to support files over 2GB.
http://fabrice.bellard.free.fr/qemu/

Windows

Download “Qemu-0.9.1-windows.zip” from:
http://lassauge.free.fr/qemu/

VMWare Fusion

This is the easiest way to go, except it means you’ll need to buy a copy of VMWare Fusion — whereas VirtualBox is free.

The process will probably take less than an hour and require about 2Gb of space. These instructions are tailored more towards Windows for the file conversion. If you’re using Linux you’re probably smart enough to adapt these instructions to your system.

  1. Open a command prompt: Start > Run and type “cmd”
  2. Use “cd” to go to the directory you download and extracted Qemu.
  3. Run:
    qemu-img.exe convert -f vpc "XP SP2 with IE7.vhd” -O vmdk XPIE7.vmdk

    • “XP SP2 with IE7.vhd” is the path to the IE VPC file you downloaded
    • “XPIE7.vmdk” is the new file that VMWare Fusion will use.
  4. Wait…(will probably take 15 - 30 minutes)
  5. Move the new “.vmdk” file to your mac.
  6. Open VMWare Fusion and click File > New
  7. Go through the wizard and when you get to the “Virtual Hard Disk” page, expand “Advanced disk options”, check “Use an existing virtual disk” and use the dropdown to find the new “.vmdk” file.
  8. Finish the wizard and start it! (If prompted to upgrade the virtual harddrive, click “Yes”)
  9. Be sure to install the VMWare tools as soon as Windows boots up.
  10. You’re done!

VirtualBox

The great thing with VirtualBox is that it’s free and available for most OSes! The process will take a little longer and will temporarily require about 20Gb - 30Gb of disk space. In the end your IE virtual disk will only be about 2Gb.

You might be tempted to do the VMWare Fusion conversion, outlined above, and use the “.vmdk” file in VirtualBox. It’s true that VirtualBox supports “.vmdk”, but everytime I tried it I ran into massive problems.

These instructions are tailored more towards Windows for the initial file conversion. If you’re using Linux you’re probably smart enough to adapt these instructions to your system.

  1. Open a command prompt: Start > Run and type “cmd”
  2. Use “cd” to go to the directory you download and extracted Qemu.
  3. Run: qemu-img.exe convert -f vpc "XP SP2 with IE7.vhd” -O raw XPIE7.bin
    • “XP SP2 with IE7.vhd” is the path to the IE VPC file you just downloaded
    • “XPIE7.bin” is the new file.
  4. Wait…(will take about an hour)
  5. Move the new “.bin” file to your mac. (or try the next 2 steps on the same machine)
  6. Install VirtualBox
  7. Convert and compress the “.bin” file. (This can also be done on Windows or Linux if you have VirtualBox on that machine)
    1. Open a terminal or command prompt.
    2. Go to the directory where your “.bin” file is.
    3. VBoxManage convertdd XPIE7.bin XPIE7.vdi (FYI: on Windows, VBoxManage is in “C:\Program Files\innotek VirtualBox\”)
    4. VBoxManage modifyvdi XPIE7.vdi compact
  8. Open VirtualBox
  9. Click New
  10. Go through the wizard

    • Give it at least 350MB of “Base Memory”
    • Use the new “.vdi” file as the “Boot Hard Disk”.
  11. Finish wizard and start it!
  12. Be sure to install the VirtualBox tools as soon as Windows boots up.

Now you can have all IE versions running on your Mac. Enjoy!

Return of the Singing Keyboard

Posted by Jeremy Gillick on 03 Apr 2008 05:06 pm in Funny

Since posting my DIY instructions for the Singing Keyboard Prank, a couple years ago, it continues to be one of the most viewed entries on this site; and the most fun to write. So when I saw that Instructables.com was having an April Fools contest, I had to enter it. I’m still not even sure what the prize is, but I’m motivated to win!

So please checkout my instructable and give it a vote!

Plagiarism Claims

Some people on the site have already added comments accusing me of copying KipKays video. On closer inspection you’ll notice that he posted that video a whole 8 months after my original post. In fact his video follows exactly the same steps and procedures that my instructions outlined. I’m not mad, I think his video is excellent and I’m glad somebody took the time to do that. However, I would have liked him to give credit where it is due.

To take other peoples work and claim it as your own is wrong.

Thanks for the vote

With that said, checkout my new instructable and if you like it, throw it a vote. Thanks!
California home loan mortgage refinance loan california
Home equity loan calculator
Credit life and disability insurance
Credit repair business
Disability insurance canada
Consolidation debt elimination
Student loan servicing center
Student loans apply online
Mint credit card uk
Repairing credit score
Advantages of whole life insurance
Buying life insurance
Credit report fico score
Federal long term care insurance
Payday loan calculator
Fair credit and reporting
Best airline credit card
Credit card offer
Low cost health insurance
Card credit interest low
Broker commercial loan mortgage
Payday advance loan
Experian credit score
Missouri payday loan
Instant credit score
Instant issue life insurance
Creditreports
Illinois auto insurance
Three major credit reporting
Uk home loan house refinance mortgage rates
Consumer credit reports
Credit reporting bureau
Leads insurance annuity
Do credit scores
Irs tax debt relief
Accept card credit
3 bureau credit report
Federal home life insurance company
Long term care insurance policies
Discount life insurance
Dispute credit reports
Fha home loans
Credit cards no apr
Legal credit repair
Student loans consolidated
Free credit score only
Credit card application for
Clean credit report
Creditreport
Extended auto warranty california
Debt relief settlement
Online auto loan
Health insurance quotes texas
Credit report identity theft
California home equity loan rates
Government free credit reports
Credit repair sample letter
Canadian credit report score
Compare renters insurance
Auto loan rates
College student loan
Rhode island health insurance
Credit immediately online report
Term vs Whole life insurance
Instant payday loans
Renters insurance co
Best credit card offer
For credit reports
Free credit repair letter
Home loans bad credit
Cancer health insurance
Student loans for bad credit
Online credit report
Denver home refinance
Bad credit california home loans
Repairing bad credit
Credit report laws

This has been an interesting week with software for me. I decided to try a few software apps and had some surprising results.

Parallels vs. VMWare vs. Entourage

I’m a mac user who works in a PC environment. As such I have to learn to work with MS Exchange in the best way possible. I’ve tried Thunderbird with IMAP — but that simply didn’t work since I couldn’t schedule or respond to meetings.

Eventually I went with Parallels so I could use Outlook on my mac. It worked well, not great, but good enough for my purposes. My biggest problem was that somethings just didn’t seem to work well. For example after the computer would wake up from sleep Parallels thought it would be a good idea to reopen the apps that were already running. So windows would have 5 new Outlook processes and 3 new IE processes open at the same time. This can be very annoying.

So this week I decided to try out VMWare Fusion. Everyone I’ve talked to says it’s awesome and so much better than Parallels. I was very optimistic and downloaded the demo and imported the Parallels vhd into it. Unfortunately I found VMWare to be kludgier than Parallels. More specifically:

Problems with VMWare Fusion

  • Often times ran slow, or had a significant delay when I tried to access it.
  • It doesn’t know I have a dock and when I maximize widows, they expand under it.
  • (the kicker) No cross application support. For example, when I click a link in Outlook it opens in the Firefox on Windows. I want it to open in Firefox on the mac side.

Parallels doesn’t have these problems, so I am back to using that.

Except that’s not the end of the story. I also won a copy of Office 2008 for Mac at the Geeks Love Bowling event at SXSW. We didn’t win for the most points, but for consuming the most alcohol; we had to live up to our team name: “The Beer Liberation Front”. (See Pictures).

I got excited that Entourage in Office 2008 might actually be usable. After installing it I was impressed — the UI looked great and the calendar wasn’t pink! (Entourage 2004 was pink) Entourage is very usable but I still fell back to Outlook because I couldn’t totally get used to it. Here are some points:

Problems with Entourage 2008

  • Local folders are far down on the left bar, so you have to scroll to get to most of them.
  • Not many options to customize.
  • Sorting email by “conversation” doesn’t build the message tree like Outlook, so you don’t really know who replied to which message.
  • Not as easy to skim through the email list.
  • NO WAY to directly import PST files from Outlook (The same company produces both of these products, right?)
  • (the kicker) Dragging an email to your local folder COPIES it instead of moving it! How does that make sense?

Overall these are mostly small issues, but the app wasn’t good enough to make me totally switch to it. Maybe someday.

Pandora vs. Last.fm

I’ve been using the Pandora music player for the last 6 months and have found so many great new artists through their music recommendations; I love it. They’ve always had big advertising around the player, and I never minded. They provide a valuable service to me and I think they should get paid for that. The problem is this week their player took a turn to the dark side: It would play a song or two, but refuse the next one until you put focus on the browser window with the player. This is unacceptable! I cannot stop what I’m doing every 5 - 10 minutes to jump to that page just to get another couple songs!

This was enough of a push to send me to try another thing that I’ve been hearing everyone rave about: last.fm. With so many people talking about it, it must be good, right? I signed up, downloaded the software and “scrobbled” (WTF?) my itunes library. Coming from Pandora I expected that by having their program send the titles from my itunes library to my account it would know what I like and give me recommendations on that. No luck. It didn’t tell me what to expect from it, so I decided maybe it was waiting for me to listen to some music first.

I open the player and entered “Pink Floyd” — my favorite band — and pressed play to listen to them and similar artists. Nice so far. I have a rather eclectic music taste so as much as I like Pink Floyd I don’t want to listen to them and similar music all day. In Pandora can setup stations and add a range of artists like Metallica, Ludo, Booker-T and the MGs, RJD2, Moby, Bob Marley, etc. The point is I like my music to switch up ever couple of songs and give me a different sound. Last.fm wont give that to me.

It feels very restrictive. I have to pick an artist or genre and I can’t add anything to it. If I get tired of the music selection I need to start over. The site isn’t helpful either. No real instructions or guidance, they just expect that you get it or are going to take the social approach and search for users like you. I’m sorry; I just want to listen to good music.

For example, take the following screen (notice it tells me the recommendations are a “Sample”):

Give me real results

It says that there aren’t any “real” recommendations for me yet because…why? It read my itunes library, I’ve listened, and scrobbled, a lot of songs. So at what point is it going to recommend something to me? I’ve done everything it has asked me to do. BAD USER EXPERIENCE == FAIL!

The good news is that I’ve found that several projects that have created desktop applications that play music from Pandora and they don’t have the stupid “pause” behavior that is present in the web player. So I’ve downloaded PandoraBoy and can now groove to my stations. In fact as I type this blog post Pandora is playing a list of fantastic selections — I’m very pleased. (at this second it’s playing “Sunday”, by Moby)

Summary

So at the end of the week, even though I’m back where I started, I’m happy I tried these products and got a taste for what’s out there. It seems I was using the better apps to begin with. Big Win!

Back from SXSW with a little Scurvy

Posted by Jeremy Gillick on 21 Mar 2008 04:24 pm in Conferences

SXSW this year was fantastic! I built my foundation last year (it being my first), so this year I had loads more fun partying with my existing friends, meeting lots of new people and scheming new ideas. The panels were OK and the conference center floor plan was horrible — but then again SXSW is really about the networking.

Sadly I returned with what is now widely known as the SXSW Scurvy! It seems everyone who went to the 5 day conference came back with a bad strain of the flu. To make everyone feel better Stephanie Trimble, Josh Gillick and I put together a giant Get Well card and patient registry for all who are infected.

The SXSW Scurvy Get Well Card

Not only did I return with the scurvy, I also came back with a sprained ankle and now I need to wear this walking boot for 4 - 6 weeks.


The walking boot for my ankle

All-in-all though, it was totally worth it. I extended my network in many important directions and had a great time with friends. I’m already planning a list of panel ideas in hopes of actually speaking at the 2009 conference. The ideas are revolving around JavaScript, how social sites connect people in real life and easy progressive enhancement techniques. I’m hoping that next year will have a stronger technical path and design panels with fresh information and strategies.


I have a W3C Scarf

More photos from SXSW.

Back From India and off to SXSWi

Posted by Jeremy Gillick on 11 Mar 2008 12:05 pm in Travel

My trip to India was a huge success!

It was great to finally meeting all the people who I had been exchanging emails with over the past 14 months at PayPal. There is something very human and refreshing when you put a face to the name. The training went very well and both weeks were very interactive with lots of great questions and discussions. We were able to get through beginning JavaScript and ended on intermediate OO JavaScript techniques. Everyone was really friendly and always made sure Kimberly and I were comfortable and having a good time.

While I was there I also received a comment on my blog asking me to do a talk at a local webcamp in Chennai. Even though I wasn’t able to make it out to that, it was very flattering to receive a request out of the blue like that. Thanks Prabhu!

Over the weekend we flew up to Delhi and Agra to see the Taj Mahal and a few forts. There aren’t words to explain how amazing of an experience it was. From seeing the amazing architecture and history to watching people putting the time, heart and pride into making a marble inlaid dinner table which takes a full year and a half to complete.

After the 2 weeks were complete I realized that it truly wasn’t about the training; it was about the people. There’s not enough room on my blog to thank everyone who affected my journey, but I want to say a special thanks to Guru Prasath and Reena Bansal. Guru made sure Kimberly and I were always comfortable and not getting ourselves into too much trouble and Reena became our tour guide through Delhi and helped us negotiate good prices for things in the market and let me borrow he camera when mine ran out of battery.

WebDev and UED in Chennai, India

See more pictures…

After I returned to California I had 6 days to readjust before jumped back on a plane to head down to Austin, Texas for 5 days at the SXSW Interactive conference. More on that later…

Off to India to do Taining

Posted by Jeremy Gillick on 15 Feb 2008 05:44 pm in Miscellaneous & Technical & Travel

In a few hours (5.5 to be exact) I’m jumping on a plane to travel from San Francisco to Chennai, India. PayPal is sending me to do the JavaScript training for the Web Development team there.

My plane leaves tonight at 12:05a and lands in Singapore for an 8 hour layover. I expect to leave the airport of a few hours of sight seeing and sampling the local food. Then I jump back on the plain to hop over to India.

I’ll be in India for 2 weeks and doing the “Intro to JavaScript and DOM Scripting” class for half the team each week. Over the weekend my boss, Kimberly Blessing, and I will be traveling up to Agra to see the amazing Taj Mahal. I’ll be taking lots of pictures and posting them on Flickr along the way. I love how every time I tell someone I’m going to India their eyes light up and they instantly have stories and advice for places to go and things to do — it’s fantastic! (and yes I’ve had my shots, pills and will avoid the water)

OK, off to finish packing now. Wish me luck!

SXSW Panel Follow-up

Posted by Jeremy Gillick on 07 Jan 2008 02:47 pm in Conferences

I received word from the SXSW planning committee that my panel idea was not chosen for the 2008 SXSW schedule. I can’t say that I’m surprised, since documentation isn’t a very exciting or compelling topic.

I still would like to contribute to a SXSW topic, so if you’re putting together a panel and need another person, let me know. Personally I specialize in standards based web development where my target areas are:

  • Unobtrusive and accessible JavaScript
  • Semantic [X]HTML/CSS
  • Logical use of XHR (i.e. don’t use it for everything — only where it matters)
  • Discussing where certain Web 2.0 and Ajax patterns are over used and abused

If you’re interested, leave me a comment below and I’ll get back to you. Don’t send me an email since I get too much spam at my public address.

Flickr / Twitter Mashup = Twickr (or maybe Flitter)

Posted by Jeremy Gillick on 01 Jan 2008 08:27 pm in Software & Twickr

I’ve been using Twitter (https://twitter.com/jgillick) for a little over a month now and the one that’s lacking is picture messaging. What I want is to upload a photo to Flickr, create a TinyUrl for it and sent that plus a short description as a Twitter update. Well now it’s possible.

After a little research I found a tool, called TwitterGram, which does just this. You enter your Flickr username and Twitter username/password and it will automatically send updates to your Twitter log when you upload a photo. Unfortunately it didn’t work for me, so I went ahead and made my own which you can download and run on your servers!

My script starts by reading the Flickr feed (rss or atom), checks for new images that were uploaded within the last 12 hours (this can be set by $timeout — see configuration), gets the TinyUrl for each new photo and sends it with the Flickr title to Twitter.

Setup

Configuration

The options PHP variables at the top of the file.

$twitter
The username/password for your twitter account
$flickr
The flickr feed URL to watch. This must be in atom or rss2 format. NOTE: RSS1.0 does not have timestamps and can cause duplicate entries or other unexpected behavior.
$cacheFile
This file holds the last 50 flickr image URLs uploaded in PHP serialized form to prevent duplicate entries.
$timeout
Filters out photos from your stream that were uploaded before this number of hours ago.
$debug
Set this to TRUE if you want to test the script and do everything but send the message to twitter.

Flickr Feed

Using a Flickr feed lets you limit the Twickr tweets to a specific tag. Here’s how to get the feed URL:

  • Login to Flickr
  • Click “Your Photos”
  • Add the following to the end of the URL “tags/twickr/” (change “twickr” to any tag you want to limit the app to)
  • Click the RSS icon (Subscribe to a feed of stuff on this page...) towards the bottom of the page.
  • The page that loads is your Flickr feed, copy that URL into your $flickr configuration variable.

Testing

Before finishing the setup be sure to test it. Edit the script and set $debug to TRUE and then run it from the command line:

php -f twickr.php

A common error will be “Permission denied” when it tries to create the cacheFile — which is used to store the URL of the last 50 images tweeted to prevent duplicates. This file is saved in the same directory as the script. Be sure the user which calls the script has access to write to this directory.

Remember to set $debug back to FALSE when you’re ready to use the script for real.

Cron Job

If you’ve never setup a cron job before, use this command:

sudo crontab -e

The to have the script (which in my case is at /usr/local/bin/twickr/twickr.php) run every 10 minutes enter the following as it’s own line:

0,10,20,30,40,50 *   *   *   *   php -f /usr/local/bin/twickr/twickr.php

(More information about cron)

Now whenever you upload a photo to flickr with the required tag it’ll automatically send a tweet with the Flickr image title and URL (as a TinyUrl).

Download

Download or get the latest from my SVN repository.

Web Service

If you do not have a web server or are want to have somebody else host the script I’m considering putting together a simple site to do just that for you. If you’re interested let me know in the comments and subscribe to my blog to hear about updates like this in the future.

Updates

Subscribe to my blog to learn about updates.

Make Sure You’re Site Says “Hello” to New Users

Posted by Jeremy Gillick on 29 Dec 2007 10:56 pm in Useability & Websites

I can’t tell you how many sites I’ve stumbled upon which do not tell me who they are on their homepage. Yeah they have a cool design — BUT WHAT DO YOU DO? This is more common on (sadly) open source project websites, but I’ve also seen them on sites which are trying to sell some sort of Enterprise software. I’m sure if I dig through the folds deep enough I’ll find out who you are, but I just don’t have the time.

An example I saw today, and what compelled me to write this post, was when I dropped in on the PunBB website (http://punbb.org/). It tells me “It’s called PunBB. It’s the only way to fly.”, hmmm, OK sure, whatever that means. Then the main column part of the page is News, with the developers talking about milestones and progress and other stuff they’re doing on this mysterious product. Why wont you just come out andtell me who you are? When you finally look around and discover the “About” link, you find out that “PunBB is a fast and lightweight PHP-powered discussion board.” Oh, why didn’t you say so?

PunBB Website

This is a perfect example of poor design and user interaction. As a web developer or designer you should always ensure that the user immediately understands what you do as soon as they hit your site. Don’t waste your homepage with talking about progress and milestones; put that on another page. At most you should only have the latest update on the homepage and all other news on a dedicated page. If you forget this many users will come, glance around the homepage, be confused and run away with a negative feeling about your website — not the product. This is dangerous because that feeling will last and can mean they’ll never use your service or product.

PHP Nuke (http://phpnuke.org/) is another example of this. This site does have a tagline, although you might have to look for it: “Professional Content Management System - Official Website”. Unfortunately that’s the last bit of coherent content you’ll find. So tell me more about this professional CMS. Half the links send me to pages with content which doesn’t help me at all. Cut down on the links and the noise. Put the most important information and links for new users at the top.

Don’t fall into the same bad habits. Take time and care to make sure your homepage is clear, self explanatory and easy to navigate — you know what they say about first impressions.

Next Page »