Paul Irish

A site I'm currently working has had boring and barren error pages. Until now!

I wanted some images from failblog.org to liven things up a bit. In a quick 20 minute hack, I took the site's rss feed, parsed it for the right content using Yahoo Pipes, exported as JSON-P, pulled that in with jQuery, and displayed a random image.

Here's the pipe I'm using:

The trick to pulling in Yahoo Pipe data via JSON-P is by adding a "_callback" argument, defining the callback function name.

The script:

jQuery.getJSON('http://pipes.yahoo.com/pipes/pipe.run?_id=0vxHL0Lo3RGc2uL8pQt1Yg&_render=json&_callback=FailImages&callback=?');

function FailImages(data){
  var imgs = data.value.items;
  if (imgs){
    var url = imgs[Math.floor(Math.random()*imgs.length)].url;
    jQuery('< img src="'+url+'">').insertAfter('h1');
  }
}

The result:

And of course..
Demo page

Paul Irish front-end development, jquery

I've been a big proponent of Jing for screencapture for a while. I still love it, and it's top notch for sharing video, but I've come to enjoy a free tool called Gyazo for screenshots. Both of these tools are invaluable when it comes to web development QA.

Below you'll see a screencast demonstrating gyazo to the #jquery IRC channel:

Both Jing and Gyazo provide hosting for you (infinite, eternal store, as far as I've seen), and they both automatically copy the url to your clipboard. Gyazo is a bit quicker for images, and also doesn't have a business model, which is comforting. :)

And it's cross-browser as long as you don't mind some Japanese text:

• Gyazo for OS X
• Gyazo for Windows
• Gyazo for Linux

Oh and open source. :) I think you can even host your own image repo if you don't want to use gyazo.com.

Handy tip, keep the shortcut somewhere totally handy. On Windows, I keep mine with the quick launch icons.

Paul Irish hacks