Archive for the ‘Web design’ Category
All that’s great about CoffeeScript in 40 characters
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) {
_results.push(x);
}
}
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.
Spindlytext: write in the sky with the Google Earth API
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.
A depthcam? A webkinect? Introducing a new kind of webcam
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!
Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier
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.
Cubic splines in JavaScript (via CoffeeScript)
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.
Blocking the weakest passwords
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’.
Extended and properly-multi-line Regular Expressions for JavaScript
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.
Signing Amazon Product Advertising API calls in Ruby
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).
Free Adobe fonts
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.
Testing in Internet Explorer for VMWare Fusion users
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.