Saying stuff about stuff.

onScreen

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.

Flickr/Twitter Integration

I have discovered that too few people know about Flickr’s Twitter integration so I thought I’d mention it here. Now you don’t have to mix with any of those twitpic/yfrog/etc-types and you can get some more Flickr views ;)

And here is in action with a nice flic.kr short URL.

Me through the looking glass

I am James Hill - Ben Pickles

The other day I had the fortune of being photographed by my good friend James Hill for a personal project of his. The result is a sincere and slightly revealing portrait of me, so check me out.

Autotest and Growl

I’ve been trying without success to setup autotest Growl notifications for some time but never quite managed to get it fuly working. There are plenty of solutions out there already but things still didn’t seem to come together for me… until today - the latest version of seems to have smoothed things.

Unfortunately there’s a bug in growlnotify so whether the Growls will actually be displayed is another question (they randomly don’t appear). There is a fix for this, however, which provides a drop-in workaround - remember to stop and start Growl from Preferences.

Last but not least is the pièce de résistance: what pass/fail image(s) shall I show? Fortunately somebody has already answered that for me and in the most pleasing way possible.

A little tweaking here and there (like renaming the fail images 1-5) and I give you my .autotest Growl hook.