Monthly Archives: May 2012

VirtualBox, IE9, OSX, Test Environment

Leave a reply

Since switching to developing on a Mac a year ago one thing which has always been a bit of a pain for me is when I need to test a site specifically on Internet Explorer. Whilst things have improved greatly recently in the need to support this as a browser there are still occasions, albeit quite infrequently, when I simply need to replicate an issue on IE. These occasions are infrequent simply because I use a good base point for my FE work, and IE8/9 are actually quite good (in comparison to IE6/7). Coupled with a policy of progressive enhancement seems to get me 95% of the way there most of the time.

Still there is always those odd occasions to deal with. Because they are so infrequent I have so far gotten along with hi-jacking a colleague’s PC and hoping its a quick fix. Of course this was never going to be a long term solution as its not always going to be a quick fix and it isn’t always going to be available to me. A more permanent solution is required.

As I saw it I had 3 options:

  • Buy a test machine
  • Purchase Parallells and a Win7 License
  • Find a free option

The yorkshire man in me wanted to opt for the third option, after all I have spent a hefty sum on a Mac to do development, spending more money for the odd occasion irked me. Ultimately tho I didn’t hold out for a free option so have been looking to buy a test machine which could double as a machine for my wife. Only problem here is that if my wife has it and I need it then back to square one.

Well this morning I stumbled upon a tweet which looked like it could fulfil my needs. I’d heard of VirtualBox (and even had it installed) but the idea of subsequently having to install an OS such as Win7 seemed like more expense and a lot of hassle. Step forward Greg Thornton who has provided a wonderful script that does everything for you to get up and running with VirtualBox in kinda no time!

Visit Greg’s github page for instructions on how to install it on Mac, then be prepared to wait as it downloads a massive 4GBish of data, just to install IE9. But post install I finally had IE9 available on demand on my Mac for free.

There were a few things I had to discover post install to help with dev which I will detail below but its all available with a quick Google and certainly isn’t a complaint from me.

  • Password to login as Admin was “Password1″ – this gets hinted to you on the login screen but still would be nice to be in the README file
  • To access my Mac’s localhost, use the IP 10.0.2.2
  • Hosts file needs to be edited as administrator, right-click on Notepad.exe and select “Run as Administrator”

And thats it, I was happily debugging an IE7 mode in IE9 without having spent a penny. The silver lining was that the money I was saving for a test machine I have spent on a shiny new 27in LED monitor :-)

Doing more with {less}

Leave a reply

Been a while since my last blog which disappoints me a lot, didn’t want to leave it too long as I fear just like the gym, once you stop, you stop for an extended period of time. So this is just a quick post to extend my appreciation for Less.

I’m very late to the party here, CSS pre-processors have been around for a while now. I hadn’t looked at them for a few reasons:

  • I didn’t want to learn a new syntax
  • I was worried about source control
  • I was worried I would become dependent on it
  • The compile step may slow me down
  • I don’t actually do a great deal of new projects, I do a lot of maintenance

I’m sure people who haven’t used css pre-processors probably would consider the above to be a pretty standard list, I’ve heard others like you can’t work remotely on a file that then needs compiling etc. Lets be honest though none of the above have that much weight really. Probably the biggest reason was that I was being lazy.

So when I got my last small project which was a 2 day max start to finish brochure site I decided to bit the bullet and go for it. I had a choice between SASS and Less to make, I don’t know if there is a religious war between these two but I chose Less for no other reason than I have used Twitter Bootstrap in the past. A big project like this which uses Less seems like a pretty good advocate of the system. It also gave me a ready made reference guide with real world examples.

I solved the compile issue by purchasing LiveReload which not only compiles Less/Sass on the fly it also refreshes your browser without needing to switch to it. I am not feeling the full benefit of this part yet as I mostly work from my laptop in a single screen scenario, which is less than ideal. But a quick tab back and forth is still quicker than a tab, Cmd-R. I thoroughly recommend this app.

As to learning the new sysntax, it took me roughly 5 minutes to get used to it. Mixin’s – a breeze, the nested structure – intuitive, variables – a god send. In short I can’t believe I hadn’t used it earlier it was amazing. I also downloaded Less Elements which was a handy starter library for common mixins, a great way to get used to them.

I still have concerns over source control, because in a multi-person team someone could edit the css file direct and then the less file is out of date. This is a communication/discipline issue however and should be addressable.

Did I grow to depend on it, well not yet, but I could see it happening easily. Even now when I am doing a maintenance task I find myself wishing I could use Less on it. Just like when I don’t have my favourite MVC framework available I have to slow down and think about things and wish I had a convenient wrapper library about some basic functionality. If anything not using it all the time means that when I use it again I will probably have to re-learn it, which doesn’t worry me in the slightest.

If you’re not using a CSS pre-processor I seriously recommend giving it a shot.