Rowlando’s Blog
(I’m not a Brazilian football player)

Stuff I want to check out soon

Over the past few weeks I have come across a number of tools, libraries, etc… that I hope to check out soon.

I’ve noticed Firefox has gotten slower with each new release. I am looking for a replacement development browser and have read today that WebKit’s WebInspector has recently been overhauled and seems to be a great alternative to Firebug.


Posted by Nick on November 10th, 2009 :: Filed under development,Uncategorized

svn: PROPFIND request failed on…

I had some problems checking out from Subversion. I got the error message:

svn: PROPFIND request failed on '/xxx
svn: PROPFIND of '/xxx: could not connect to server (http://xxx.xxxxx.com)

After a bit of searching, Vernon suggested it could be proxy server settings. I checked them by opening up a terminal and typing:

vim ~/.subversion/servers

Scrolling down to the line starting with http-proxy-host it was obvious I had set a proxy previously as it was pointing to a previous clients internal proxy server. I haven’t command-line subversion client on my Mac for a while because I’ve being using the svn client installed in Aptana. Commenting out the offending lines fixed my problems.


Posted by Nick on October 21st, 2009 :: Filed under development,mac

Continuously test your front-end code automatically

When I worked at The Guardian, before committing code to Subversion, unit tests were run against the Java codebase. This is pretty standard. Sometimes, things slipped through and were caught at the Continuous Integration stage where an automated build would perform deeper tests and verify the code integrations of each developer hadn’t broken anything. This approach works extremely well.

When it came to the front-end, the only tests that were run was pushing JavaScript code through JSLint. This wasn’t set up as a pre-commit hook. Rather, it was up to the developer to execute a command-line script that performed these tests. I am in no way complaining about this. It was the first and only place I have worked that actually bothered to set up any formal testing of front-end code.

A few months ago I went to a presentation given by Neil Crosby at Skills Matter. Neil spoke about a project he has been working on that addresses the lack of automated frontend testing.

Most web developers will occassionally validate HTML and CSS, and put their JavaScript through JSLint. If this were automated, a lot of time would be saved. Some bugs can take hours to fix and in the end, for example, all that was missing was a closing span tag in the HTML.

Neil’s come up with a framework, called Frontend Test Suite, that automatically runs frontend code through the above tools. The suite is built in PHP and it is recommended that you install local copies of the HTML Validator, CSS Validator and JSLint so your IP doesn’t get banned.

I followed Neil’s installation steps in the file SETUP, which are briefly listed here:

  1. Installed PHP (didn’t really because it’s already installed with Mac OS X 10.5.7
  2. Installed PEAR
  3. Installed PHPUnit
  4. Downloaded Frontend Test Suite
  5. Installed HTML Validator locally
  6. Installed CSS Validator locally (thanks Jen)
  7. Installed Rhino
  8. Downloaded JSLint.js

I use Aptana regularly so, alongside the project I’m currently working on, I created a new project, dumped the Frontend Test Suite files into it and made the necessary edits to the example file. I execute the tests via the command line but at some point I will set up Aptana so I can execute it from there.

Next I need to workout how to get subversion to run these tests pre-commit.


Posted by Nick on May 29th, 2009 :: Filed under css,development,html,javascript

Using Subversion to share global CSS amongst different websites

I’m currently working for one of the UK’s big banks. Recently, the bank in question decided to unify its visual identity (VI) for any sites being built now and in the future. This is a wise step but has created difficulties for the 2 websites that are currently in build.

Being a front-end developer, I have spent the past few months building the HTML, CSS and JavaScript. When you’re told that all the work you’ve done is now to change it’s slightly frustrating. When I say all my work I mean all the work I have physically outputted, i.e. the code. To produce the code, meetings a plenty were had, IA wireframes and design inconsistencies were picked over, bugs were fixed, lots of coffee was drunk, etc… What I have now is plenty of project knowledge and the benefit of hindsight.

The design of the new VI attempts to stay structurally the same as the old VI. There has been a lot of tightening up, less inconsistencies between different modules, all of which ultimately result in less markup and less styles. So, outwith the old HTML, that has been put into templates already, and in with the new.

Unified HTML modules and CSS

There are now 2 front-end developers working on 2 different websites for the same company. They need to share the same VI. At first, because I had already developed the code for one of the websites, we were going to have 2 separate sets of HTML and CSS for the same VI; one for each web site.

This is not a good start as over time the look’n'feel would suffer because maintanance overheads would rocket as more web sites were built. Future developers would get very confused.

Time isn’t on our side but nevertheless we opted for the sensible option in the end. We have built up a shared set of HTML modules and CSS and have put this into Subversion. We continually build upon this shared set of code. Now we also have our own projects to worry about. This is where Subversion’s external property comes in handy.

The external property allows one to allocate a directory name that will suck in another Subversion project, a particular revision of this project if so required. Whenever an SVN update occurs Subversion will do its regular update but will also check the projects set in the external property for any changes.

I set up the 2 web projects to follow the same structure, with an external property set on each. The external property points to the shared HTML modules and the global assets folder. I haven’t set any revision on the external property because I want all updates to automatically come through when doing an SVN update. There will most likely be some point in the future where I want to switch to a particular revision in order to stabilise development.

It’s very easy to set up properties using TortoiseSVN. Jesper has a very easy to follow example of setting up external property via TortoiseSVN.

I like learning new things. I new this concept must have been a common requirement and my searching was worth it at the cost of frustrating my fellow developer!


Posted by Nick on January 29th, 2009 :: Filed under development
Tags ::

Reaching localhost from VMware / virtual machines on a Mac

I’m in the process of setting up a development environment on my mac. I’ve set up IE8 testing by converting Microsoft’s VPC images to a VMware compatible image. So the next thing I need to do is view my local webserver from VMware. Typing http://localhost doesn’t work because the virtual machine is an entity in itself so localhost is local to the virtual machine.

Having done a little of this in the past I knew the hosts file in folder c:\windows\system32\drivers\etc would need an entry, mapping my Mac’s IP address to a domain name. Sean Sperte reveals a secret VMware IP address that is particularly handy when you use a laptop because a laptop’s IP address is not likely to remain static. I’ll quote Sean here:

Type ifconfig vmnet1 into a Terminal window. You should get a return like this:

vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
    inet 192.168.115.1 netmask 0xffffff00 broadcast 192.168.115.255
    ether 00:50:56:c0:00:01

The “inet” number is your “secret” IP (in my case, 192.168.115.1).

Now that we have that number, we can edit the hosts file on the VM. We find it in: C:/WINDOWS/system32/drivers/etc. Just open the host file with Notepad, and add each virtual host (domain) on it’s own line at the end of the document, like so:

192.168.115.1  dev.triumphofgrace.com

… and save. Afterwards refresh the VM’s DNS cache by typing ipconfig /flushdns in a command line window.

This worked perfectly for me.


Posted by Nick on January 11th, 2009 :: Filed under development,mac
Tags ::

Using IE6, IE7 and IE8 Virtual PC images on Mac using VM Fusion

Okay, here goes my first blog entry on rowlando.com. I switched to a Mac in November 2008 after many years of developing on Windows. At my current place of work I still use Windows but I plan to remedy this by creating a development / testing environment on one machine. I must say that I’m still figuring out how to use my MBP, weening myself of Windows ways on a daily basis.

Most web developers need to test their work on Internet Explorer, version 6, 7 and now 8. If you don’t, you have an understanding, forward thinking client, and one who’s probably missing out on potential visitors / customers. Anyway, I digress. On a PC I use Microsoft Virtual PC to test web pages on each version of IE, by downloading VPCs from Internet Explorer Application Compatibility VPC Image webpage. This method is free but has an annoyance in that the images are time-limited, so one has to download updates every 3 months or so.

Understandably, I wanted the same free method of testing when switching over to Mac. A quick search led me to Mozmonkey’s blog, where he describes how to do just what I wanted. The only killer is that for some of the steps one would need a PC. I don’t have a PC anymore. Comments to the rescue! In the blog’s comments there are lots of helpful hints in how to reach the end goal without a PC. Hooray! So here is my attempt at Mac only install of IE, in this case IE8 Beta 2.

1. Download Microsoft Compatibility VPC Image and extract

  1. Download the appropriate file from Internet Explorer Application Compatibility VPC Image webpage. It’s an EXE file.
  2. On Windows, one would open the file to extract the VHD. Use Zipeg, as suggested by Craig, to unzip the contents of the file you downloaded. Simply rename the extension EXE to ZIP, then open the file in Zipeg.

2. Convert the VHD image to a VMDK image

  1. Download and install Q from www.kju-app.org
  2. Purely for simplicity, rename your VHD file so it doesn’t have spaces in
  3. Open up a terminal
  4. Navigate to the folder where the VHD file is
  5. Type in the following command, replacing the filenames as appropriate:/Applications/Q.app/Contents/MacOS/qemu-img convert -O vmdk -f vpc XPSP3withIE8.vhd XPSP3withIE8.vmdk

It took a couple of minutes for my MBP to complete this command, after which you should have a VMDK file, suitable fodder for VMware Fusion.

3. Install and configure VMware Fusion with the created image

I don’t have VMware Fusion yet so I’m now going to download the trial version of VMware Fusion. If it works I may buy it.

Installation Done.

  1. Open VMware Fusion
  2. Click File > New
  3. Click the “Continue without disk” button
  4. Select the “Use an existing virtual hard disk” option and find the VMDK file that you created earlier
  5. A warning may popup. If so, convert your disk to the newest format.
  6. Click continue
  7. I chose Windows XP Home as the operating system then hit Finish.

After this, I started Windows XP and attempted to install VMware Tools.

Installing VMware Tools

After several unsuccessful attempts at installing VMware tools I started googling. I found some instructions by Jay Levitt and followed his directions where possible. I had to use keyboard commands because the mouse (trackpad) was not working yet. I did this:

  1. Press CTRL-ESC, R, “SECPOL.MSC”, RETURN.
  2. Navigate to Local Policies\Security Options.
  3. On the right is “Devices: Unsigned driver installation behavior”. Change it from “Warn but allow installation” to “Silently succeed”. Close Local Security Policy.

Jay mentions going into regedit but the registry entry Jay mentioned was not present in the version of Windows I downloaded from Microsoft so ignore that’s why it’s not listed above. Next I followed Jay’s steps to remove Microsoft’s Virtual PC drivers:

Now you’ll need your Windows XP installer CD or image.

  1. Press CTRL-Command to escape the guest.
  2. On the Fusion menu bar, select Virtual Machine | CD/DVD | Choose Disk Image… and find your ISO (or insert the real CD into your drive).
  3. The Windows Installer will autorun. Choose “Exit”.
  4. Go to Control Panel -> System -> Hardware Tab. (Shortcut: Command-F15, right-arrow, right-arrow). Click the “Device Manager” button.
  5. Under MSIE6 -> Batteries, you’ll see an Unknown Device, with an exclamation point. Right-click (or use the Action menu) and select “Disable”. Confirm “Yes”. Close the Device Manager and the System panel. My battery driver was okay already
  6. Go to Control Panel -> Add or Remove Programs, and remove the “Virtual Machine Additions” program.
  7. When you see the “You must restart your system” dialog, answer “No”.
  8. Close Add or Remove Programs, and close the Control Panel itself.

I’m not too sure why a disk image is needed. I was lucky enough to have a Windows XP disc sitting in a CD wallet next to me :-) Maybe Step 2 above can be skipped or maybe it’s needed in order to remove the Virtual Machine Additions.

Next I followed Jay’s instruction to install VMware Tools:

  1. Press CTRL-Command again, and select Virtual Machine | Install VMware Tools.
  2. A pop-up appears. Click the “Install” button.
  3. In the installation wizard, click “Next”, “Complete”, “Next”, “Install”.
  4. Problem #2: When it tries to install the mouse, it will ask for i8042prt.sys. This is not provided VMware Fusion tools; my other VM doesn’t use this driver for the VMware mouse, and I am not sure why it needs it. However, you can point it at C:\WINDOWS\SYSTEM32\DRIVERS and click “OK”. I didn’t have this problem
  5. Problem #3: When it tries to install the printer, it will ask for pscript5.dll, which is not yet installed, and not on the VMWare Tools CD. Just press ESC. Again, I didn’t have this problem

When prompted, I restarted my system. However, I must point out that each time I try to restart or shut down Windows it hangs on the “Windows is shutting down” screen. To overcome this, I select Virtual Machine > Restart Guest from the VMware menu.

Success! My mouse is working and, unlike Jay did with past versions of the VPC images I had no driver hell. I am able to fire up IE8 and browse the internet. I can’t actually believe this works! Now I just have to do the same for IE6 and IE7, plus workout how to view webpages on my localhost.

I hope my first blog entry helps someone out there.

Update: I’ve worked out how to view web pages on my local development server from VMware.


Posted by Nick on January 9th, 2009 :: Filed under development,ie6,ie7,ie8,mac
Tags ::