Safari SVG/jQuery bug workaround

Recently at work we've switched over to using a SVG icon set on our Backbone project. This caused a strange bug where clicking directly on the icon in Safari with a jQuery event handler attached would throw a Javascript error:

TypeError: undefined is not an object (evaluating 'a.nodeName.toLowerCase')  

Clicking the parent element wouldn't throw the error.

After a lot of investigating, and a fair amount of fruitless Googling it turned out to be this jQuery bug. It's caused when an event listener is delegated from a parent element onto an svg use element.

$('#parent').on('click', 'svg use', callback);

This, unfortunately, is exactly how Backbone attaches events on Views when using the events hash.

The Workaround

Okay, okay, onto the bit that you're actually interested in: the fix. In your CSS add the following:

svg { pointer-events: none; }  

You'll also need to make sure that click events are attached to a parent element, not the SVG itself. Clicking directly on the SVG still works as long as the parent wraps or "covers" the SVG.

Huge thanks to this CSS Tricks article for pointing out the fix. I just wish it wasn't quite so buried, and maybe mentioned Safari so that it came up in Google...

Fixing Apache on Yosemite

So it's that time of year: upgrading OSX and fixing all the Apache brokenness that inevitably follows. These are just some quick notes on how to fix it. ProTip™: remember to restart Apache after making a change to the config!

Primarily, the problems seem to be caused by Apple bumping the installed Apache from 2.2 to 2.4. Check out Apache's upgrade notes for the full details.

index.html.en in document root

An index.html.en file is added to the default document root (mine is /Library/WebServer/Documents), which overrides the localhost route. Its unnecessary and can be removed.

Index on localhost

For some reason, the Indexes option is defaulted off in the new Apache config for the document root directory. This means that the list of directories won't be shown. Add Indexes to the Options to fix this.

Vhost permissions

Apache 2.4 changes the syntax for permissions, breaking my default vhost setup, giving 403 errors on any locally-served site. Switch out any Allow from All lines with Require all granted in Directory blocks to fix this.

Enable PHP

Apache doesn't enable PHP by default, so uncomment the line loading the PHP module (LoadModule php5_module ...). Yosemite comes with 5.5 installed, but I've got 5.6 installed through homebrew. Switch out the module path to wherever homebrew installs it (check brew info php56).

Fix broken PHP 5.6

No idea why, but I had to reinstall PHP to get it working correctly. Something about Apache not being able to read the install correctly, possibly related to this issue. Run brew reinstall php56.

Goodwood 2014

Me and my dad have been watching F1 for about as long as I can remember. We've been to Goodwood's Festival of Speed event a couple of times before, and it's a great chance to get right up to the cars. It's pretty damn rare these days in F1.

So anyway, we had a look around the paddock, watched some of the runs up the hill and got up to see the rally stage at the top. Here's some of the pictures:

Bikes panorama

McLaren panorama

Some pretty neat panoramas created by Google+'s auto-awesome feature. (As much as you can hate on it, this stuff is pretty cool).

Pedro de la Rosa in the 2011 Ferrari

Oliver Turvey in the 2011 McLaren

2011 Mercedes

Totally got lucky with the timing here. The cars were just pulling back into the paddock after their timed run (much easier to take pictures...) and we were just in the right place at the right time.

2014 Williams in the paddock - pole sitter in Austria

Damon Hill's championship winning 1996 Williams

2011 Ferrari

Vettel's 2014 Red Bull

Renault's cars for testing the new 2014 engine specs

Michael Schumacher's championship winning 1994 Benetton

Jackie Steward's 1970 Tyrrell-Cosworth

Some of the cars in the paddock. To be honest, it was a bit of a shame that there wasn't too many 2014 cars. They can't be run due to the new testing regs but I hoped they might show them off. Would been interesting to see/hear them in person.

The classic cars are always nice to see, but the Schumacher collection of 1992-1994 cars was a nice tribute. (Hoping for a speedy recovery, Michael :) )

Suburu Imprezza (I'm not so up on my rally I'm afraid)

You can get really close to the rally, almost to the point of being dangerous - in most places there's only a wire and wood fence separating you from the cars... I'm not really up on rally, as I am with F1, but it's impressive to see the speed carried through the forest. Unfortunately it's a bit dark under the trees and all of my pictures were a bust. I did, however, get to see Sebastian Loeb really going for it in his new Citroen.

Jackie Stewart driving his classic Merc Silver Arrow

Finally, here's Jackie Stewart in his - I'm assuming it's his judging from the Stewart tartan on the seat - classic Mercedes heading back down the hill.

All in all, it was a pretty fun day out, despite the ridiculous sunburnt face I'm now sporting.

Back from the dead

So I've finally got round to rescuing this blog from the dead. My last post was nearly 2 years ago. Hopefully I'll be able to keep it up for a while this time!

Originally hosted on Posterous, I started back in April 2009. In the process of bringing it back I've been looking over some old posts, and to be honest it was pretty shitty writing... But I guess that's how everyone sees their O.G. writing.

Unfortunately however, Posterous shut down in April 2013 and deleted all of their user's (my) data. Which I wasn't particularly pleased about, for obvious reasons. Luckily they did offer a backup service to download their data. Since then the blog (and the domain) kind of languished. Partly because I'm fantastically lazy, but also partly because I didn't feel like I had the technical skills to run a server. This is important to me as I'm interested in the indie web movement. I want to own my content in a place that I control.

Anyway, I used their backup to restore my data (by way of Wordpress) into a Ghost.org instance running on DigitalOcean. Hopefully, now that its under my control it won't be going down. I may even experiment with Ghost and other personal projects here too.

Why Ghost? I like they're "it's just a blog" attitude, and the Node, Express & Ember.js underpinnings. I'm patiently waiting on the plugin ("apps") architecture to have a hack around with it's guts.

UPDATE: I just remembered that its possible that there's some dead links on the blog. I've tried to restore as much as I can, but no guarantees :)

WikiVLE open sourced!

WikiVLE is a Virtual Learning Environment that I built for my Web Client & Server coursework in Winter/Spring 2012

WikiVLE

It's a VLE based around the concept of a wiki - all users can work together to create awesome notes about a particular topic that they're learning about. It's kind of a focussed Wikipedia (but nowhere near as good!). Users can upload files such as Powerpoint slides, PDFs and images; edit notes using Markdown syntax and log in using the built in account system or via the University of Portsmouth's LDAP server.

I've decided to open source it, mainly because I'm a big proponent of open source and I want to practice what I preach, but also because I wanted you guys to help me out! Hopefully we can work together (using the magic of Git) to make it awesome :)

The source is available now on Github, and I'm planning to put up a live demo sometime soon. If you're interested get in touch (see alasdairsmith.org.uk) or fork the repo and submit a pull request.

Exciting News...

I haven't blogged in a while, which seems to be the way I start every post here...

Radweb logo

If you've visited my nameplate (alasdairsmith.org.uk) site in the last few months you might have seen a big banner at the top, shamelessly promoting myself :) I'm really pleased to announce that I can now take it down! For the next year, I'm officially part of the small but growing team at Radweb. We (feels weird to write that) create awesome stuff for the web, from WordPress and Magento sites to full blown, built from the ground up, web apps.

I'm going to mainly be working on InventoryBase, a brand new web app that is designed to help landlords keep track of their inventories. We just released a promo video, with an insanely catchy tune that's been playing all week in the office:

InventoryBase is built on BackboneJS, with a backend built from FuelPHP. This is a pretty big step up in level of coding complexity for me, and I'm really excited to dive in some more. At the moment it looks like I'll be full time on this project at least until September, to help bring it fully up to it's potential.

In addition, I'm going to open-source my big coursework project that I've been working on for the last couple of months. Check the blog post, or view the source code.

PS. Try the super-secret cheat code on inventorybase.com - press up, up, down, down, left, right, left, right, B, A on your keyboard to see what I mean.