George MacKerron: code blog

GIS, software development, and other snippets

Archive for the ‘Web design’ Category

All that’s great about CoffeeScript in 40 characters

without comments

Today, I needed a JavaScript equivalent of Ruby’s Array#compact (which returns the array stripped of any nil values).

A standard JavaScript implementation looks like this:

Array.prototype.compact = function() {
  var x, _i, _len, _results;
  _results = [];
  for (_i = 0, _len = this.length; _i < _len; _i++) {
    x = this[_i];
    if (x != null) {
  return _results;

But since I’m using CoffeeScript, I get this monstrosity of line-noise and distraction for free when I type this:

Array::compact = -> x for x in @ when x?

This is some of the best of CoffeeScript: array comprehensions, implicit return, the existential operator ?, and more. Taking 11 lines of JavaScript busywork and turning it into 40 pithy, elegant characters.

Written by George

October 29th, 2014 at 10:37 pm

Spindlytext: write in the sky with the Google Earth API

without comments

I’ve just released Spindlytext on Github. It’s the library that powers the live data display in Pigeon Sim, by creating KML linestrings in the shape of letters.

Read the rest of this entry »

Written by George

May 2nd, 2012 at 5:30 pm

A depthcam? A webkinect? Introducing a new kind of webcam

with 21 comments

Update, 10 February: Sorry for some serious reliability issues over the last few days. The streaming server is now hosted in-house at CASA, which should be a lot more robust.

At CASA we’ve been looking at using a Kinect or three in our forthcoming ANALOGIES (Analogues of Cities) conference + exhibition.

We’ve been inspired in part by Ruairi Glynn‘s amazing work here at UCL, and Martin has been happily experimenting with the OpenKinect bindings for Processing.

Meanwhile, I recently got to grips with the excellent Three.js, which makes WebGL — aka 3D graphics in modern browsers — as easy as falling off a log. I’m also a big fan of making things accessible over the web. And so I began to investigate prospects for working with Kinect data in HTML5.

There’s DepthJS, an extension for Chrome and Safari, but this requires a locally-connected Kinect and isn’t very clear on Windows support. There’s also Intrael, which serves the depth data as JPEG files and provides some simple scene recognition output as JSON. But it’s closed-source and not terribly flexible.

The depthcam

So I decided to roll my own. I give you: the depthcam!

Read the rest of this entry »

Written by George

February 3rd, 2012 at 7:21 pm

Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier

with 68 comments

Ever noticed how, in Google Earth, marker pins that overlap each other spring apart gracefully when you click them, so you can pick the one you meant?

And ever noticed how, when using the Google Maps API, the exact same thing doesn’t happen?

This code makes Google Maps API version 3 map markers behave in that Google Earth way. Small numbers of markers (up to 8, configurable) spiderfy into a circle. Larger numbers fan out into a (more space-efficient) spiral.

Read the rest of this entry »

Written by George

June 22nd, 2011 at 9:19 pm

Cubic splines in JavaScript (via CoffeeScript)

with 5 comments

For a recent study two colleagues needed to elicit a cumulative probability distribution function (CDF) from survey respondents.

We decided it would be nice to allow respondents to interact with this CDF after providing some key values, and implemented this in the web browser with <canvas> (falling back on FlashCanvas for IE).

In the process, we implemented three kinds of cubic spline calculation in the ever-wonderful CoffeeScript: natural, clamped and (what we actually needed) monotonic cubic splines.

You can play with some examples below: click-and-drag the round handles, or double-click to enter values directly. Feel free to borrow the code (ideally with attribution) if it’s of use to you.

Read the rest of this entry »

Written by George

January 1st, 2011 at 8:36 pm

Blocking the weakest passwords

without comments

The recent Gawker passwords leak once again highlights the widespread use of passwords that offer essentially no security.

Some years ago, when working on a secure web app for a large organisation — let’s call them Secret Testing Ltd — I was keen that people shouldn’t choose hopelessly weak passwords. I was particularly concerned by my sysadmin colleague’s fondness for passwords of the form ‘p/\55w0rd’ or ‘S3cr3t-T35t|ng’.

Read the rest of this entry »

Written by George

December 14th, 2010 at 1:24 pm

Extended and properly-multi-line Regular Expressions for JavaScript

without comments

Perl, Ruby, and some other languages support a readable ‘extended’ regular expression syntax, in which literal whitespace is ignored and comments (starting with #) are available. They also support a multi-line mode where the . character matches anything, including a newline.

JavaScript does neither of these: it doesn’t recognise the extended syntax, and its version of multi-line only allows the ^ and $ characters to match the beginnings and ends of lines within a string (it will never allow the . to match a newline).

So I wrote the following function to convert extended and fully-multi-line RegExp source strings to the basic syntax that JavaScript understands.

Read the rest of this entry »

Written by George

August 8th, 2010 at 7:44 pm

Posted in JavaScript

Signing Amazon Product Advertising API calls in Ruby

without comments

I have a simple site that generates covers for CDs I burn from iTunes purchases and so on (it pre-dates widespread use of JS libraries, and is in much need of prettifying). The site uses Amazon Product Advertising API calls to search and retrieve album cover art and track listings. Since earlier this month, such API calls have to be cryptographically signed.

This is somewhat annoying — the site’s original design has it communicating independently with Amazon (using Amazon’s XSLT API feature to transform their XML data into JSON), and that’s no longer possible with the use of a private key. But it’s not unfixable. The site now sends its API call first to my server, which returns a signed version, and then forwards the signed call on to Amazon.

I found most of what I needed for this on Chris Roos’ blog, but his version still wasn’t quite working for me (the two problems I recall are that Ruby’s CGI.escape doesn’t quite follow Amazon’s requirements, and that times need converting to GMT).

Read the rest of this entry »

Written by George

August 22nd, 2009 at 12:04 pm

Free Adobe fonts

without comments

Quick tip: you can get hold of some of Adobe’s very nice professional fonts for free when you download the InDesign CS4 trial (and possibly other CS4 apps too).

These include:

  • Caslon Pro
  • Chaparral Pro
  • Garamond Pro
  • Minion Pro
  • Myriad Pro

If you don’t want to actually install InDesign, you can get to the fonts like so (if you’re a Mac user):

  • Mount (double-click) the downloaded disk image
  • Mount another disk image found on the newly mounted disk, at Adobe InDesign CS4/payloads/AdobeFontsAll/AdobeFontsAll.dmg
  • The fonts are inside /Assets/contents on this second disk

Note that these fonts may well be covered by a very restrictive licence: I haven’t checked.

Written by George

May 28th, 2009 at 1:17 pm

Posted in Mac,Web design

Testing in Internet Explorer for VMWare Fusion users

without comments

You might have noticed that Microsoft has lately started making available time-limited Virtual PC images of Windows installations with (separately) Internet Explorer versions 6, 7 and 8.

This is brilliant for Mac users who need to test websites in IE, because you get a real installation of each browser in its home environment, with the right JavaScript engine and working conditional comments, plug-ins, Windows Media Player, and so on. With the alternatives, such as running under Wine or using Multiple IEs in a single Windows virtual machine, one or more of these things tends to be missing.

Read the rest of this entry »

Written by George

May 28th, 2009 at 10:25 am

Posted in Mac,Web design