1Bit is a simple way to let you preview MP3s linked in a web page. It’s a combination of Javascript and (a tiny bit) of flash to automatically pre-pend links to MP3s with a little play icon, allowing you to listen to the track inline. It’s been quite popular, mostly with music blogs. It was built by and myself a year or two ago.

Towards the end of last year James Weiner got in touch about 1bit, he’s an Oxford-based web developer/designer who i’ve had the pleasure to meet a few times at Pub Standards. He’d been using it on some client sites and wanted to add some new functionality.

Mark and I were too busy with work to add the features ourselves, but were happy for James (with some help from his brother Ben Weiner. The source for 1Bit is public and open (including the flash), so anyone can work on it if they like. Ben and James did just that and added the feature they wanted. Even better than that, they were happy to share the changes and for us to integrate them with the current version of 1Bit.

1Bit on Github

As a starting point for integrating these changes I’ve put the source for 1Bit on GitHub. I’ve been using Git for personal projects for a while and GitHub itself makes it easy for anyone to get involved, add code, fix bugs or fork a project entirely. It’s the natural choice for a project like this.

For now I’ve create a branch to start adding James and Ben’s new feature (modal playback) and you can follow the progress if you like. I’ve also start adding some basic Javascript testing with QUunit to ensure I don’t break anything while making changes. There’s only simple, high level tests at the moment but I plan to refactor the internals a bit so 1Bit can be tested in smaller cleaner chunks.

The future of 1Bit

It’s exciting to be working on the project again, getting development completely public and incorporating changes from other people. Expect a new version with modal support in the future and possibly even some experimental HTML5 features. I’d also like to make 1Bit easier to use with major Javascript libraries, as that’s been bugging me for a while - particularly being able to use their selector functionality, which is vastly superior to the limited selector rules 1Bit supports. Keep an eye on the GitHub page for changes.

Now it’s launched in London I’ve been playing around with the Foursquare API. While it’s not the best API i’ve come across it gives you reasonable access to their data, so i’ve been pretty happily building some small tools using their data.

hit a rather usual bug with JSON parsing for a Foursquare venue, in this case the Bricklayers Arms (The home of Pub Standards). The JSON response looks something like this:

{
    "venue": {
        "id": 145975,
        "name": "Bricklayers Arms",
        "address": "31 Gresse St",
        "city": "Camden Town",
        "state": "Greater London",
        "zip": "W1T 1",
        "phone": 02076365593,
        "geolat": 51.5176421,
        "geolong": -0.1334817,
        "stats": {
            "checkins": 0 
        }
    }
}

Looks pretty reasonable, right? But my JSON parser chocked on this and called it invalid. Running it through JSON Lint gives a bit more information, but is still a bit vague:

syntax error, unexpected TNUMBER, expecting ‘}’ at line 9

Let’s see, line 9 is the phone number key/val, that seems like it should be valid, I mean the leading zero is odd but… oh. You may, or may not, remember that standard notation for octal numbers is a leading 0, it’s not something you run in to very often.

So why is an octal number invalid? Because the JSON spec doesn’t explicitly support octal numbers as native types and parsers aren’t compelled to either. Some may do, but this is probably more luck than judgement - a side effect of loose typing.

I’ve reported the bug to the Foursquare team and it sounds like it’ll be fixed shortly (as part of an API rewrite), in the mean time i’ll be using a dirty regex to quote the offending number before parsing.

If there’s one thing to take from this it’s how important validation is, even if it does nothing more than prove it’s not your bug. Looking at the original response and trying to work our why it didn’t parse with validation would have been very painful, it’s not a bug easily caught by a human, you need rigorous machine testing.

A 5 minute video introduction to the Selenium IDE.

My good friend Mark Wheeler has been puting together a neat little embeded flash/javasript mp3 player called 1 Bit, which i’ve been writing the Javascript for.

1 Bit Audio Player is a very simple and lightweight Adobe Flash MP3 player with automatic JavaScript insertion. It’s main purpose is to act as a quick in-page preview for audio files you link to from your website or blog.

It’s prety neat, you can preview mp3s in page, we’ve been using it at Headhug, a friends mp3 blog for a while now. Best of all it’s really easy to get it up and running.

The first version used jQuery which caused a few problems, but it’s been re-written from scratch for the latest version. The main aims are to make it unobtrusive, easy to use and to play nicely with other JS libraries. So far, it’s pretty good.

The main version is available from the official 1Bit site, which has the downloads, documentation. Everything you need to use it on your own site or blog. There’s also the in-development version on my site where i’ve been playing around and trying to improve it, it also has some more demo’s.

So go check out 1 Bit, its nifty.

If you not familiar with the FAMFAMFAM Silk icons they’re a set of 1000 beautiful little 16×16px icons that you’re free to use under the CC-Attribution license.

I’ve been using them a little recently for a few things, including this blog and some coding projects. The problem is, with 1000 icons, finding the ones that are suitable for what you’re doing.

The Silk webpage used to have every icon on the page, with a little search box to only show ones matching your search. This was great, you could filter down to the more relevant ones, while still comparing them on the same page.

Unfortunately this seems to have gone now, so I thought I’d put together a version of it myself, mostly to make it easier to find icons, but also as an excuse to play around with jQuery.

jQuery is one of the huge variety of Javascript libraries around at the moment. It’s got very powerful selectors, cross browser events and animation and is built around the idea of chaining. I’ve used it a little recently at work and it has made Javascript fun.

The Icon Selector

In half an hour or so I knocked together a quick demo of (as i’ve now dubbed it) the Icon Selector. I’m pretty happy with how it turned out, it’s easy to search for and preview the icons you want.

I’ve made a few tweaks since to speed it up a little, you can take a peak at the Javascript source if you want to see the jQuery magic, it’s pretty cool.

Most impressively it works well on all modern browsers. jQuery handles a lot of the inherent differences in the DOM and event models. Conclusions? jQuery is very nice, definately something i’ll be using more in the future.