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:

Screenshot_2014-11-04-23-06-51

Hang on… WTF!

rect5240

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?

How to access your app engine dev server from another machine

I keep forgetting how to do this so I’m writing it down in the vain hope I may commit it to memory.

The problem

You want to access your locally running dev server on another machine on your local network or maybe even from a virtual machine. whatevs.

The solution

Start your dev server with this extra program argument (you can find this under “debug configurations” in eclipse):

--address=0.0.0.0

Now remember it you stupid brain.

aoc-u2868pqu

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…

OSX

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

Ubuntu

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

01_MG_3677

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 https://github.com/mattburns/chromecast-backgrounds.git
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?

1
2
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
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:

1
2
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
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:

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

Test it worked:

1
2
3
4
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)
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)
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