UK mac keyboard

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)

birthdaycake

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: OddPrints.com. 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 :)

birthdaycake
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:

spinner

Urgh.

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:

1
  <div class="spinner"></div>
  <div class="spinner"></div>

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:

1
2
3
4
5
6789
.spinner {
  width: 50px;
  height: 50px;
  border: solid 3px #DB73D7;
 
  -webkit-border-radius: 50%;     -moz-border-radius: 50%;          border-radius: 50%;}
.spinner {
  width: 50px;
  height: 50px;
  border: solid 3px #DB73D7;

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

Arc

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:

1
2
3
456
7
8
9
10
.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%;
}
.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%;
}

Animate

Now all that’s left is to animate it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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);}
}
.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:

1
2
3
4
5
6
.spinner {
  ...
  border: solid 3px rgba(0,0,0,0);
  border-top-color: #DB73D7;
  ...
}
.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 :)

Create a giant map of everywhere you’ve been

Google have just announced that they’re giving Latitude the boot. Not in the distant future but next month (August 9th). I’m gutted as I was just getting used to relying on its awesomeness. At first I panicked because I’ve been using the Location History feature to log my location for the past 3 years. Thankfully, that feature is spared the chop (well, for now at least).

If you have also been using it to log your location then you’ll be glad to hear you can download your location history. Unfortunately, once downloaded, there isn’t an easy way to view the history so I decided to write something. Here is the output image of everywhere I’ve been in the last 3 years (click through for a glorious high-res version):

Map of where I've been for 3 years

It includes some time I spent travelling (ahh… good times…) so I’ll print a poster to hang on the wall.

There may be whole continents I’ve not been near but if you zoom in, you’ll see I’ve got Bristol pretty well covered ;)

gps-uk

Want a map of everywhere you’ve been?

Currently the process is a fiddly manual one. If it’s something you’d pay for, let me know in the comments and if there’s enough interest I’ll add it as a product on my photo-printing site: OddPrints.

-Matt

4 reasons to design your logo in CSS (and a few why you shouldn’t)

Intro

I recently changed the OddPrints logo on the website from an image to simple text styled with CSS and @font-face. To me it seems like the obvious thing to do but very few websites seem to employ the technique. I thought I’d explain my thoughts and I’d love to hear what you think…

1 – Sharper

This is the main reason. I recently bought a Retina MacBook Pro and the screen quality is amazing. I like to think I’m an optimist and I would normally just be happy with the obvious upgrade. The reality is that I mainly notice the apps and graphics that are not “retina ready” and just look soft and fuzzy. This in turn makes me feel dirty that I have to interact with something so dated and stupid. Here is an exaggerated example of what my logo looked like when zoomed in.

and now using @font-face…

For a programming geek, I am relatively late to stumping up the cash to join The Retina Revolution. Until now, I was blissfully unaware that work needed to be done to make your site shine on such a device. If you don’t own a retina device, pop in your local fruit shop, grab a retina macbook pro and browse a few websites. It won’t take you long to find a website that has a logo or icons that look noticibly fuzzy next to that the razor-sharp text in the body. I hope it’s not your site. People much smarter than me agree that you should make sure your logo and icons look good on such a display. The recent launch of the Chromebook Pixel should be further evidence that we’re on the brink of a future with more pixels.

2 – SEO

This should be obvious but images aren’t as simple as text when it comes to being indexed by Google. Keeping things as plain html markup means I don’t have to worry about sensible alt attributes or whatever. You can still cut-and-paste the text which is handy sometimes (but not so handy that it deserves its own section, jeez). This isn’t a big reason, more a bonus feature.

3 – Internationalisation

If you happen to write an awesome website that is used by people around the world, they probably want to read it in their language. I can’t be bothered to internationalise my sites when Google translate does such a good job. I recently saw a French blog post and this screenshot made me look twice:

Now, of course this could be seen as a bad thing if your logo is poorly translated or your branding is so important that you need full control of the exact appearance. As I’m writing this, the more I’m going off this point. It not like my url changes so why should my logo… thoughts please!

4 – Accessibility

<h1>Awesome Homepage</h1> is about as simple as it gets for html markup. If you’re blind or using some obscure text-based web browser, this is handy.

Cons

Legacy browser support is sketchy. Initial page load may be slower if using javascript or the font files are big. You may experience a flash of un-styled text in some browsers. These problems can all be reduced with crazy tweeks like only including the characters you need in the font file, or base64 encoding them in the css. Tools such as fontsquirrelGoogle’s web fonts (and loader) solve most things, but even that takes a little reading just to get your head around. This all boils down to the same con: It’s hard to get right. Of course, if you’re already using web fonts elsewhere on your site, you’ve already solved these problems ;)

Alternatives

If you still want to serve images, and I’m not putting forward a fantastic argument why you shouldn’t, I strongly recommend serving higher-resolution alternatives to displays that need them. It’s pretty simple to do with libraries such as retina.js. For example, when on my laptop, microsoft.com serves me a nice high resolution version of their logo. Fail to do this and your site just lost 5 subconscious quality points in your customer’s noggin.

You could also just upload your logo as a vector image. Similar problems with browser support but certainly a valid option.

Conclusion

Designing your logo as a simple font that can be rendered in a browser isn’t for everyone. Big companies pay designers to draw clever graphics that need more than just a font file, and many websites care more about appearing the same on as many devices and browsers as possible. If however you just want something that looks great on most platforms but you care more about impressing those visitors on modern, expensive devices, maybe a font-face/css/svg logo is for you.

How to track e-commerce sales in Google Analytics with the Google Wallet Java SDK

If you have your cart built up in javascript then just follow Google’s documentation. If you submit your Google Wallet cart server-side using the java SDK and want to track the sale using Google Analytics’ ecommerce feature, then this blog is for you…

Before you start, make sure you have enabled the ecommerce feature in Google Analytics.

In your Java code, you need to set the analyticsData (String) in the cart:

1
merchantflowSupport.setAnalyticsData(analyticsData);
merchantflowSupport.setAnalyticsData(analyticsData);

To get that analyticsData string, I pass it to my server with a query param using a bit of javascript:

1
2
3
4
5
6
7
8
9
$("#google-purchase-link").click(function(e){
    _gaq.push(function() {
        var pageTracker = _gaq._getAsyncTracker();
        setUrchinInputCode(pageTracker);
        console.log(getUrchinFieldValue());
        window.location = "/purchase/google?analyticsData=" + getUrchinFieldValue();
    });
    e.preventDefault();
});
$("#google-purchase-link").click(function(e){
    _gaq.push(function() {
        var pageTracker = _gaq._getAsyncTracker();
        setUrchinInputCode(pageTracker);
        console.log(getUrchinFieldValue());
        window.location = "/purchase/google?analyticsData=" + getUrchinFieldValue();
    });
    e.preventDefault();
});

I use the async version of Google Analytics, jQuery, and Jersey so I’ve skipped that stuff because that’s not important and you probably do it differently. If you use the old ga.js and GWT, then this blog post may help you better.

If you get stuck, I use this solution for OddPrints.com which is open-source so that should fill any gaps.

Build a super fast PC in 2013 for just £566

Looking to build a new PC? Want to build one that will play nicely with Windows or Linux or could even be a Hackintosh? Making sure you choose the right combination of components is important and a pain to research. If you’re feeling lazy, here’s my shopping list for the machine I built that I’m using right now.

By the way, it’s faaaaaast ;)

CPU – Intel Ivy Bridge (i5-3570K) - £169
SSD – SanDisk 120GB (SDSSDX) - £73
HDD – Seagate 1TB (ST31000524AS) - £59
RAM – Corsair 4x4GB (CMZ16GX3M4A1600C9B) - £67
DVD – Sony (AD-7280S-0B) - £17
PSU – Corsair (CX430V2) - £34
Case – Corsair (Carbide 400R) - £79
Motherboard – Gigabyte (Z77-DS3H) – £68

Total price – £566

I’ve been using this machine for a couple of months now and it is a pleasure to use. Here are some notes:

  • It boots into Ubuntu in about 10 seconds.
  • I’ve not overclocked my build, because it’s already faster than me anyway.
  • Don’t skip the SSD, it’s essential for a fast machine!
  • It supports mSATA, but don’t be tempted, just stick with a separate SSD. Keep your OS and apps on the SSD, and your files on the HDD.
  • I’m using the stock CPU fan and it works well and is quiet.
  • The case is pretty big. I prefer that but a much smaller one would be fine.
  • I don’t play games so this build doesn’t have a graphics card. The onboard graphics are more than good enough for me (no problems with HD video etc.). No doubt I’ll buy one in a year or two when I need to drive a 50″ retina display ;)
  • View all the parts in this Amazon wish list.
  • You don’t need any special brackets for the SSD, this case already has mounting screws for it.
  • You don’t need any thermal paste, it all just clicks together.

Got any improvements or updates? Post in the comments below.

Connecting to EC2 from Chrome’s Secure Shell using only a PEM file

Gee, what a title. I know this post is going to be popular.

First, you need to generate your public key from your private key like this:

ssh-keygen -y -f yourkey.pem > yourkey.pub
Then, in Secure Shell, select the ”Import…” link to bring up a file picker. You must import two files for each identity.  A private key and a public key.  For example, you would select both “yourkey.pem” and ”yourkey.pub”.
It should look something like this:
Then just connect! Once connected, you can bookmark the page for instant access.