Saying stuff about stuff.

Bash script to convert media to MP3 and add it to iTunes

Despite this task sounding difficult it’s actually very simple, FFmpeg does all the hard work (I suggest using Homebrew to install brew install ffmpeg) and not only converts other audio formats to MP3 but can also extract audio from video files.

Adding to iTunes is also ridiculously easy nowadays. There’s no mucking about with AppleScript, you simply have to move the file to a special iTunes folder (~/Music/iTunes/iTunes Music/Automatically Add to iTunes/) and iTunes will assimilate the file into its directory structure.

Here’s the Gist.

Input favicons

20110125 rcxdstc42m9qu75eermg3xbsax

The newly available <input> types are one of the easiest and most useful (well, when viewed on an iPhone at least) ways to practise HTML5 citizenship. I have an <input> that is used for a URL and the excellent news is, lo and behold there is an <input type="url">. But I also wanted to add an extra little nicety by displaying the URL’s related favicon along with the <input> as above.

This can achieved really simply using Google’s unofficial favicon API and a sprinkling of jQuery:

$("input[type=url]").change(function() {
  var match = /^(?:https?:\/\/)?([\w\d\._-]+)/i.exec(this.value)
  var domain = (match && match[1]) || ""

    "url(" + domain + ")")

Suprisingly this actually works in IE8(!) and in IE6/7 everything will degrade gracefully: the browser falls back to using type="text" and jQuery won’t find the correct <input>s to add the behaviour to - the user simply won’t see the functionality.

Of course the same thing could have been achieved by using a class="url" instead of type="url", it would have even worked in IE6/7, but that just wouldn’t have felt so right - plus it’s exactly what IE users deserve!

P.S. You’ll need to add a teeny bit of styling, Google’s favicon images are 16×16px and this did it for me:

input[type=url] {
  background-repeat: no-repeat;
  background-position: 2px 2px;
  padding: 3px 3px 3px 19px;

P.P.S. also looks interesting and it’s even open-source, though that looks suspiciously like SVN. SVN‽

Minify command-line tool

While creating the jQuery plugin “onScreen” I had a sudden burst of inspiration and hacked together a quick command-line script to minify JavaScript files. It’s a really simple way to generate a .min.js version of a file and is particularly helpful when distributing JavaScript like the aforementioned jQuery plugin.

Here’s the Gist.

At its most simple you can pass a single argument which is the path to the JavaScript file to minify, a .min.js version will be created for you in the same directory. So the following will create jquery.myplugin.min.js:

$ minify jquery.myplugin.js

You can also pass more paths and it will concat and minify them into a single file - the last argument is always the output file:

$ minify input.js output.min.js
$ minify a.js few.js files.js output.min.js

Internally it uses Google’s Closure Compiler via the closure-compiler Gem (which requires Java and, obviously, Ruby) so all the hard work has already been done for me.

I’ve been writing a few command-line tools like this one, it feels great to scratch your own itch. I also recently wrote ding which - yes you may chuckle - I find surprisingly useful!


I made a simple jQuery plugin called onScreen that can detect whether an element is currently visible on-screen. It adds a custom :onScreen selector to jQuery allowing you to do something like this: $("span:onScreen").

The example is a little contrived:

$(function() {                          // On document load
  $(window).scroll(function() {         // when the page is scrolled
    $("h2")                             // get all <h2>s
      .css("background-color", "")      // reset their background colours
      .filter(":onScreen")              // get only <h2>s on screen
        .css("background-color", "red") // give them a red background

I’ll explain exactly how I’m using it another time, in the meantime it’s on GitHub for your perusal.

Bespin Bookmarklet

I’ve been watching Bespin for a while and am impressed with the feature-set and their rapid development pace but their latest addition is really nice - a bookmarklet to turn any <textarea> field into a code editor.

Their demo gives a perfect use-case with github’s gist creation: Introducing the Bespin Bookmarklet.

Peity Goes Global

Peity seems to be getting some global love, here in Japanese and Slovakian.

I think people will like the new “line” and “bar” chart types that @ismasan and I have added. My personal favourite is “line” - go check them out!

It’s official: Peity is helpful!

It’s not quite “best jQuery plugins ever” or even “best jQuery plugins of 2010” but Peity being listed #3 on 12 Helpful jQuery Plugins to Check Before Ending April 2010 - even though it’s already May - will do for now :)

Peity • progressive <canvas> pie charts

Towards the end of last year I created a simple jQuery plugin to “progressively enhance” content and convert something like <span class="pie">3/5</span> into a nice mini pie chart.

Recently ismasan and olivernn made it a bit cooler and fixed it in Firefox (respectively) and I’ve been impelled to show the documentation page a bit of love - of course it’s open-source and on github.

Anyway check it out, you never know you might actually find it useful!

Quick Ruby Script to the Google Closure API

Closure is a Google tool for intelligently optimising - minifying - your Javascript. There’s a command-line tool, an online version and a REST API.

Here’s a quick Ruby script for accessing the REST API:

CSS3/jQuery Gallery

Many years ago I wrote a Flash photo gallery library (used in the Sheldon Cooney site I made) and after seeing this example of CSS3 3D features a while back I wondered if I could recreate it in CSS3/Javascript.

I finally found a little time and threw something together so here’s my quick CSS3/jQuery gallery. A newer version of WebKit appears to be required at the moment - Safari 4 will do and, amazingly, it works almost perfectly on the iPhone.