Pocketcasts/BeardedSpice fix 💚

So I like to listen to podcasts while at work. Nope, I don't find it distracting if it's specific podcasts. I like the background noise.

BeardedSpice is awesome for wiring up your Mac play/pause controls to things other than iTunes. Like the
Pocketcasts web app. Unfortunately it broke recently, but here's the steps to fix.

Extra bonus: it now works in the Pocketcasts Beta 🎉

  1. Allow BeardedSpice to run JS in Chrome
  2. Restart BeardedSpice
  3. Grab the pocketcasts-plus.bsstrategy file in this gist
  4. Open BeardedSpice preferences and import it
  5. Enjoy your podcasts 🎧

Note: The file in the gist is adapted from this PR - thanks! I hope they merge it at some point.

Let's Encrypt

I wasn't really planning anything, but I noticed that my about was a bit out of date and I've been wanting to get Let's Encrypt installed for a while. These are some notes (mostly for my benefit) on what I did and the workarounds

  • I pretty much followed this excellent tutorial from Servers For Hackers.

  • I'm not sure of the exact machine specs required, but my Digital Ocean instance was running out of memory when installing certbot for the first time. This seems to be a bug, as discussed in this issue, which mentions a swap as a possible solution, but I just temporarily upgraded the server to get more memory.

  • The tutorial installs on a pretty vanilla nginx install, but I have a slightly more complex config to support serving alasdairsmith.co.uk and 40thiev.es (a Ghost blog) from the same instance. In short, the blog runs on an internal port which nginx then forwards on.

    • This causes problems with the webroot approach as it expects a given subdirectory to be served with a given response, which is a problem as Ghost handles it's own routing. To workaround this, I found this blog post to be helpful. I didn't copy it exactly, but got me on the right path.
  • Finally, it seems that Let's Encrypt have pretty low rate limits on certificate renewals (~20 per week), which I hit in testing to make sure that my auto-renewal is working correctly. I think it's working, but I won't be able to find out until next week... (Edit: yep, seems to have worked fine 🎉)

Next Steps

TL;DR: I'm joining Overleaf. I'm sticking around in Portsmouth for a bit, but moving to London soonish™. Huge thanks to Radweb for the awesome 2 years there.

I'm super excited to say that I'm going to be starting at Overleaf in mid Feburary. I'll be working as a web developer on both the front- and back-end of their "Google Docs for scientists" product. It'll be a new challenge for me, especially learning Ruby/Rails and LaTeX (which the software is built on).

When I was little, I always imagined myself as a scientist and actually studied Biochemistry at university for a year. So I had a tiny bit of first-hand experience of the crappy tools that scientists use. Frankly it's amazing that they get anything done. Contrasted with the web, where almost by default learning materials and tools are free and open. I'm very happy to say that I'm now working to bring these two worlds together.

At least for the first couple of weeks/months, I'll be remote/commuting from Portsmouth. But I'm looking for a place in London (recommendations welcome for places nearish to the office in King's Cross). Hopefully I'll still manage to get back from time to time - at least to keep up our winning streak at Pub Hack!

Which brings me onto all the awesome people at Radweb - and in particular my fellow #DevsDoDesign-ers. They really have taught me everything I know about the web, so I wanted to finish up by saying a massive thank you to you guys.

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.