A little test from work using the GoPro HD2.

Since I'm thinking about all things WordPress, I've updated my Custom Captcha for WordPress into a proper plugin called Stop Registration Spam.

The idea is the same as before: to prevent automated registrations, and the spam that comes with them, by posing a question that will be simple for your visitors to answer, but impossible for a robot.

It now includes proper configuration via an options page in the WordPress Settings menu, where you can enter a unique question, answer and error message without altering the code.

You can download the plugin from the WordPress Plugin Directory, here.

I realised the other day that it's been almost five years since I erased everything on this web server and installed WordPress. At the time, I wrote:

.. I'll also put the old CSS design, or something like it, back as soon as I can convert it to a WordPress theme. For the meantime, though, this is it.

And, predictably, I never got around to doing anything of the sort. Instead I installed the standard Kubrick theme, tweaked it a bit, and used that. And over the years, as screens got bigger and bandwidth got cheaper, I tweaked it again and again, increasing the space available for photos and hacking the background, until it looked rather out of proportion.

Time to sort that out, then.

So, this is it – a new look, and the first WordPress template I've coded from scratch: all new php templates, all new css, all new Typekit fonts, all valid XHTML and a thing at the top to show off my latest photos from Flickr. I never liked the sidebar much, so that's gone, but all the functions it held are now in the top menu. If you see any bugs or strangeness, please let me know.

Comment is free, but reading below the line could cost your sanity. So here's how to remove the temptation.

I've now been asked a few times about a version of Kitten Block to remove below-the-line comments from news websites, and the Guardian's Comment is Free in particular. The good news is that it's generally very easy to zap comment areas out of existence using CSS, although you do have to do it on a per-site basis. As an example, here's how to erase the stupid from CiF:

1) Install Stylish – a clever tool that lets you add or override CSS on websites. Firefox here, Chrome here.

2) Stylish adds a small S icon to the browser (Chrome – top right. Firefox – bottom left). Select it and choose 'Write new style'.

3) Call the style something appropriate ('Don't read below the line..')

4) For Firefox, copy and paste this in:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("guardian.co.uk") {
#discussion-comments{
display:none;
}

5) For Chrome, set the 'Applies to' rule to 'URLs starting with' and enter 'http://www.guardian.co.uk', then paste in this rule:

@namespace url(http://www.w3.org/1999/xhtml);
#discussion-comments{
display:none;
}

6) In both cases, save the style and reload any CiF pages you have open.

.. and that's it. Stlyish applies this CSS when on a Guardian article, overriding the page styles to hide the comment box. It's very easy to create similar rules for other sites – the key is to find the class or ID of the comment container. As this is often added dynamically after initial page load, you'll need to inspect the DOM using a developer tool such as Firebug.

Oh, and by the way – you can also use Stylish for all manner of useful and important internet business..

I always prefer to read API data in XML, but there are times when that becomes problematic – especially due to cross domain access policies. If you're working on a single app it's possible to solve that by proxying the XML with a local PHP script, but if you're working with the browser only – in an HTML app, for example – that's no good. One way around is to use JSON.

Except that I have never really understood JSON.

So, using Flickr as an example, here's how to reach to the API, execute the API call, and parse the JSON results into something useful. It builds on this useful post at Webhole and assumes you know the basics of jQuery etc.

Step 1: Sort out the API URL

You'll need to know the API endpoint URL. I'm using the photosets.getPhotos call.

http://api.flickr.com/services/rest/?format=json&jsoncallback=?&api_key=YOURKEYHERE&photoset_id=YOURSETIDHERE&method=flickr.photosets.getPhotos&per_page=5

Note the inclusion of format=json&jsoncallback=?, which is needed. Also, I've limited the results to five just for testing's sake.

Build this URL in the usual way, and stash it in a variable called apiurl.

Step 2: Check the results

If you bung that URL in a browser, you should get something like the following:

jsonFlickrApi({
"photoset":{
"id":"72157627904918000",
"primary":"6244703830",
"owner":"40732557432@N01",
"ownername":"tomroyal",
"photo":[
{"id":"6243961525", "secret":"x", "server":"6091", "farm":7, "title":"Meiji Jingu Torii", "isprimary":"0"},
{"id":"6243946793", "secret":"x", "server":"6050", "farm":7, "title":"Sad Polar Bears", "isprimary":"0"},
{"id":"6243947391", "secret":"x", "server":"6229", "farm":7, "title":"Rainy Shinjuku", "isprimary":"0"},
{"id":"6244679360", "secret":"x", "server":"6170", "farm":7, "title":"Tokyo to Kyoto", "isprimary":"0"},
{"id":"6244162047", "secret":"x", "server":"6042", "farm":7, "title":"Hikari Shinkansen", "isprimary":"0"}
],
"page":1,
"per_page":"5",
"perpage":"5",
"pages":23,
"total":"112"},
"stat":"ok"})

So, in there you have a group of data called photoset containing load of value pairs (ownername = tomroyal, etc), and also an array containing another set of pairs per photo. I'll explain how to get one of the values, and to loop through the photo data.

Step 3: Document Ready

Add the following to your document.ready:

$('#button').click(function(){
$.getJSON(apiurl,function(json){
// do stuff
});
});

Obviously this function fires when somebody clicks the object with ID = button. The getJSON line fetches the API feed using the address we stored in the variable apiurl. Once that's fetched, we can process the results.

Step 4: Get your data

Now you'll need to add the bit that gets the data out of the pesky JSON. Replace the // do stuff line with:

$("#results").append('<p>"'+json.photoset.id+'"</p>');
$.each(json.photoset.photo,function(i,myresult){
$("#results").append('<p>"'+myresult.id+'"</p>');
});

To get a single value, we simply use json.photoset.variablehere – in this case json.photoset.id, or json.photoset.ownername.

To l0op through an array, use $.each. Our array is json.photoset.photo, so we loop through that, treating each entry as myresult. Values inside the array row can then be accessed with myresult.variablehere (eg, myresult.secret).

That's it. Easy once you know how.

Complete code:

<html>
<head><
script type="text/javascript">
var apiurl = "XXXXX"; // build your URL here
$(document).ready(function(){
$('#button').click(function(){
$.getJSON(apiurl,function(json){
$("#results").append('<p>"'+json.photoset.id+'"</p>');
$.each(json.photoset.photo,function(i,myresult){
$("#results").append('<p>"'+myresult.id+'"</p>');
});
});
});
});
</script>
</head>
<body>
<div id="button">button</div>
<div id="results"></div>
</body>
</html>