Category Archives: Uncategorized

Using an SSL certificate on a custom domain with Google App Engine

This post is more a reminder for me. Sorry.

Get an SNI certificate from Gandi. And download the certificate

Screen Shot 2015-03-04 at 10.09.09

It will have a name like:


You need to create public and private pem files for google like this:

openssl rsa -in cameraforensics.key -text > private.pem
openssl x509 -inform PEM -in certificate-123456.crt > public.pem

(cameraforensics.key is my private key from when I created the SSL certificate from Gandi)

In Google Apps domain manager, upload those files under “Security > show more > SSL for custom domains“: Screen Shot 2015-03-04 at 09.26.24

I was upgrading my certificate so I see both the current and the new certificate:

Screen Shot 2015-03-04 at 09.28.06

I had to delete the assigned url from the old certificate, then assign it to the new certificate and then save changes:

Screen Shot 2015-03-04 at 09.29.09

Ahh, green padlock goodness:

Screen Shot 2015-03-04 at 10.21.17


But wait, you’re not finished… It turns out that while Chrome on desktop give a nice green padlock, Chrome on Android still doesn’t trust it. You need to go back to Gandi, “Download the intermediate certificate” then append it to your public certificate. You’ll then need to upload that to Google instead. Eg:

cat public.pem intermediate.pem > publicAndChain.pem

You can check the certificate here:

If you’re seeing this problem: “The identity of this website has been verified by Gandi Standard SSL CA but does not have public audit records. The site is using outdated security settings that may prevent future versions of Chrome from being able to safely access it.” Then follow this advice from Gandi

You currently have a SHA1 certificate which is no longer the preferred standard for Chrome but is still a very valid form of encryption with which other browsers have no issue.

If you wish, you can generate a SHA2 certificate for free.

To do this, please first generate a SHA2 CSR :

Then, please follow the regeneration procedure (you will have to go through the validation process onceagain):

For information, you will receive an email once the certificate is regenerated, you can then install it on your server. However the order will still show as pending because of the revoking of your previous certificate : the operation stays in this state for about 48 hours after the certificate issuance before showing as completed.

For more information on SHA1 and SHA2

Garmin forerunner 620 verses the 205. The Good, the Bad and the Ugly

I previously had the (very popular) forerunner 205 so this review will be based on comparing it to that. I bought the 205 when it came out in 2006 and it’s still going strong. I love tech though so decided to treat myself to an “upgrade”…

Forerunner 205
Forerunner 620

The Good

  • Wifi and bluetooth data uploading. This is really handy. Saves getting the computer out. The live tracking is also good, but it requires you to take your phone on your run, 
  • Dedicated button for showing the current time of day.
  • It’s smaller.

The Bad

  • No multisport. If you want to enter a triathlon and have transitions etc. you’ll need a different watch. In fact, this watch was unbelievably released without any cycling mode but that is now available in the latest firmware.
  • No navigation features. So no back to start, or following a route for you. You’ll need a different watch.
  • Fewer data fields. The 205 lets you see 4 fields at once.

The Ugly

  • GPS isn’t as accurate! In fact, it’s pretty poor. See
This means my GPS data often sends me swimming and accidentally collecting Strava segments I didn’t even run…Screen Shot 2015-01-14 at 22.47.51

A paragraph where a summary would normally be

Well, I’ve been pretty critical of this watch and that’s mainly because there are so many steps backwards for such an expensive watch. I still own my 205 but I don’t use it. That’s because uploading data with a cable and the Garmin uploader was such a terrible experience I’d do anything to prevent it.

Ugly business practices at Facebook

Facebook have broken its messenger feature into its own app. Lots of people freaked out thinking Facebook wanted to use it to spy on them as it requires excessive permissions etc. In reality, it probably needs all those permissions, I don’t really care about that, privacy died years ago. What bothers me is that people use it instead of emailing me. I strongly prefer email. It’s searchable and owned by me. I know I’m swimming against the tide a bit, but I’m clinging on to email for as long as possible.

Anyway, I don’t have the Messenger app installed on my phone, and nor does Karen but she saw this on her phone yesterday:


Hang on… WTF!


I’m not using the messenger app, but facebook are showing my adorable trustworthy face to her as a recommendation. Admittedly I occasionally use the messenger feature on the website when I have to, but I have never installed or used the app.

Seriously facebook, what are you playing at?

Running the 4K AOC U2868PQU and Intel HD4000 graphics…

Ok, I just bought a 4K display, whoop!

I knew when I bought it that neither my late-2012 Retina Macbook Pro, or my Ubuntu desktop machine would actually drive the monitor at 4K because they both rely on Intel’s HD4000 graphics which is built into their Ivy bridge CPUs. I did however expect to get at least 2560×1440 (if only at 30Hz) which is fine by me, and then I’m ready when I next upgrade…


Unfortunately, I initially couldn’t get the Macbook to run at anything above 1080p (which looks horrible) (as you can see from my stackexchange question).

I then managed to get full 3840×2160 @30Hz using mini-displayport and an app called SwitchResX. Here are my custom settings, you need to reboot the machine to apply them:

Screen Shot 2014-09-30 at 16.42.52

As a word of warning, this does make things eye-bleedingly small. (Pretty cool though)

Screen Shot 2014-09-30 at 17.17.13

Personally, I found the ‘scaled’ resolution of 1920×1200 to be the best for me because it uses HiDPI to give you that retina feel you’re used to. It will look like 1920×1200 but actually use more pixels to paint it. Here are the settings:

Screen Shot 2014-09-30 at 17.09.01

This is much more sensible (although I would like it smaller to be honest):
Screen Shot 2014-09-30 at 17.11.33

The downside is that you lose some of the screen down the sides. Let me know if you have any better suggestions.

If you find the colors going a bit funny, I used SwitchResX to change the color profile to sRGB IEC61966-2.1 like this:
Screen Shot 2014-09-30 at 17.13.17


Thanks to Linus himself, I was able to get 2560×1440 working on Ubuntu:

xrandr --newmode 2560x1440_30.00 146.27 2560 2680 2944 3328 1440 1441 1444 1465 -HSync +Vsync
xrandr --addmode HDMI2 "2560x1440_30.00"
xrandr --output HDMI2 --mode "2560x1440_30.00"

If you make any mistakes, you can remove them with:
xrandr --delmode HDMI2 "2560x1440_30.00"
xrandr --rmmode 2560x1440_30.00

That will have to do for now although I may buy another graphics card for the Ubuntu machine, suggestions welcome 🙂

How to download Chromecast background images

Google’s friendly little chromecast has some great background images.

If you want to download all of those images so you can have a nice high quality screen saver on your laptop/mobile etc. just do this:

git clone -b patch-1
cd chromecast-backgrounds/
npm install lodash q request nopt chalk
node cli.js --download=images --size=1024 --load=backgrounds.json

Change the size from 1024 to whatever maximum size you want to download.

I had to tweak the source from this project on github. Hopefully my fork will get folded in.

Using Java 7 on OSX

Does your current version point to JDK6 even though you’ve installed JDK7?

matt$ ls -l /System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK
8 lrwxr-xr-x  1 root  wheel  59 21 Nov 14:43 /System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK -> /System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents

The do this:

sudo rm /System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK
sudo ln -s /Library/Java/JavaVirtualMachines/jdk1.7.0_51.jdk/Contents/ /System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK

If it’s not already, set JAVA_HOME accordingly in your ~/.bash_profile:

export JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/CurrentJDK/Home

Test it worked:

matt$ java -version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) 64-Bit Server VM (build 24.51-b03, mixed mode)

Using a UK mac keyboard on Ubuntu

If you’re using a UK edition usb keyboard with Ubuntu, you may be swearing every time you want a relatively common characters like £, # or |.

I’ve been suffering with a poorly mapped keyboard for months. I’ve no idea why, I just assumed I must have tried when I installed the OS and deemed it impossible. Anyway, I’m an idiot because it’s really easy.

Open up your keyboard settings and pick “Layout Settings”:

Screenshot from 2014-04-17 17:37:21

Click the little “+” to add a new input source:

Screenshot from 2014-04-17 17:38:00

Select “English (UK, Macintosh)”:

Screenshot from 2014-04-17 17:45:13

Move it to the top of your list and BOSH! You’re done.

Screenshot from 2014-04-17 17:59:45


(Warning: You may still swear looking for the # key because it’s not printed on the keyboard like it is on a macbook. It’s alt-3)

Will you be our 1000th customer?

Before OddPrints

A short while ago I wanted to print some photos for a little frame (4x4cm). I don’t own a printer and so I wanted to get it printed online. However, the smallest size offered by most online labs is 4×6″. I’m a programmer and amateur photographer, if anyone should find this easy it should be me. How hard can it be?
Somehow, I needed to resize and re-save my photo so that it had just the right border around the edge so that when the new image was printed at 4×6″ my picture would be in the middle at exactly 4x4cm ready for me to cut out. I scratched my head, searched around and even asked some experts for advice. I ended up installing a command-line image resizing tool and calculated just the right command to convert my photo:
“C:\Program Files\ImageMagick-6.6.0-Q16\convert.exe” input.jpg -border 137.5%x75%  output.jpg
The values 137.5 and 75 are the magic here that I had to work out myself using a bit of maths. This is clearly too complicated and enough of an effort to make it one of those jobs that never gets done.

OddPrints was born

Although I spend my days working on and improving StolenCameraFinder (my baby!) I made time to knock up a basic website that solved this problem online in a simple way: Now anyone can just upload a photo, type in the size of their frame, and re-download the image ready for printing. We run the site for free with no watermarks or adverts or any other nonsense. There are too many crappy websites on the internet and we’re doing our best not to contribute to that!
Since then we now allow people to just order prints directly from the site. We don’t force people into doing that, we just offer people a simple honest service that they are welcome to use. If you want to use the site for free then print the images at home or in the local chemist that’s fine with us. We’re not going to slap watermarks over it or spam you or anything else that’s evil. Why do companies do that?! In fact, when you order prints from OddPrints you don’t even have to register and log in or any of that BS. Just pay with PayPal and we’ll get the prints posted to you. Done.

1000 Customers! (almost)

Anyway, now comes the reason I’m writing this post. I just looked at my logs and somehow there has been over 900 customers so far. Now I know this is absolute chicken-feed for big companies, I’m sure photobox get that daily, but for me it feels fantastic. I have a folder full of emails from customers saying how happy they are with their prints. When I get one of these I reply personally with a big smile on my face thanking them. There are photos of babies, weddings and happy holiday moments hanging on your walls and being given as presents thanks to this little site.

That’s why I’ve decided that our 1000th customer will get their order for free and a £50 voucher to use on the site 🙂

I hope that doesn’t sound like a cheap marketing gimmick, I genuinely want to thank every customer and everyone else that’s helped support the site and this is my way of showing that. Who knows, maybe I’ll be writing a similar post marking the 10,000th customer soon 😉

Create a smooth loading spinner using only CSS

We’ve all seen loading spinners and they generally look like this:



This is just an animated gif and has the following drawbacks:

  • Limited to 256 colours
  • Need to regenerate the image if you want a different colour.
  • Framerate and resolution set when you create the image. (and increasing either will hurt load times).
  • Playback is jerky until all frames are downloaded

Wouldn’t it be better to use some vector magic and hardware-accelerated loveliness to get a spinner like this:

Mmmmm, hot-diggity, how delicious is that?!

Let’s do it!

For all the examples, there is no javascript and the only html markup is this:


Rounding a square

To create the loader I had to be a bit creative. Firstly, the circle is simply the border of a div with corners so round it become a circle:

.spinner {
  width: 50px;
  height: 50px;
  border: solid 3px #DB73D7;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;


But we don’t want a circle, we want an arc, so one way is to set the border-width to 0px except for one edge:

.spinner {
  width: 50px;
  height: 50px;
  border: solid #DB73D7;
  border-width: 3px 0px 0px 0px;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;


Now all that’s left is to animate it:

.spinner {
  width: 50px;
  height: 50px;
  border: solid #DB73D7;
  border-width: 3px 0px 0px 0px;

  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;

  -webkit-animation: spin 0.5s infinite linear;
     -moz-animation: spin 0.5s infinite linear;
       -o-animation: spin 0.5s infinite linear;
          animation: spin 0.5s infinite linear;

@-webkit-keyframes spin {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}

@-moz-keyframes spin {
  from {-moz-transform: rotate(0deg);}
  to   {-moz-transform: rotate(359deg);}

@-o-keyframes spin {
  from {-o-transform: rotate(0deg);}
  to   {-o-transform: rotate(359deg);}

@keyframes spin{
  from {transform: rotate(0deg);}
  to   {transform: rotate(359deg);}

Square capped

Alternatively, you can set the border-color to transparent except for one edge. This gives the arc a more traditional square capped edge:

.spinner {
  border: solid 3px rgba(0,0,0,0);
  border-top-color: #DB73D7;

You can play with the code in this JS Bin. You can easily change the speed, size, colour. Why not try replacing the simple “linear” animation with something a bit more interesting like:

cubic-bezier(0.1, 0.2, 0.4, 0.1)

If you make something interesting, please post links to your creations in the comments below 🙂