I like SlideShare a lot (yeah, repetition, I know). It is a great way of spreading your presentations as it allows others to embed them into their blogs and web sites and it also allows people to download and re-use what you’ve done.

One thing I really like about SlideShare is that it creates HTML transcripts of your presentation displayed far down the page as shown in the following screenshot:

Now, the annoying thing is that the SlideShare API - full of goodness as it is – does not provide a way to get to these transcripts in case you want to display them alongside your presentation. You also need to authenticate for detailed information which is very needed but also bad if you just want to offer a JavaScript solution.

Good thing that there is an easy way to retrieve information from any web site out there now and get it back as JSON to use in JavaScript: YQL. Using the YQL console and some XPATH I can for example extract the transcription information and get it back as XML (the slideshare URL is http://www.slideshare.net/cheilmann/shifting-gears-presentation and the XPATH //ol/li):

http://query.yahooapis.com/v1/public/yql?q=select * from html where url%3D”http%3A%2F%2Fwww.slideshare.net%2Fcheilmann%2Fshifting-gears-presentation” and xpath%3D’%2F%2Fol%2Fli’&format=xml

If you define the format as JSON and provide a callback parameter you can easily use this to write a small script to inject transcripts into SlideShare embeds:

slideshareTranscripts = function(){

var div = document.getElementsByTagName(‘div’);

var containers = {};

for(var i=0;div[i];i++){

if(div[i].id.indexOf(‘__ss’)!==-1){

var slideurl = div[i].getElementsByTagName(‘a’)[0].href.split(‘?’)[0];

containers[slideurl]={c:div[i],id};

get(slideurl);

}

	
}

function get(url){

var url = ‘http://query.yahooapis.com/v1/public/yql?’ +

‘format=json&callback=slideshareTranscripts.doit&q=’ +

‘select%20strong,p%20from%20html%20where%20url%3D%22’ +

encodeURIComponent(slideurl) +

‘%22%20and%20xpath%3D%27%2F%2Fol%2Fli%27&’;

var s = document.createElement(‘script’);

s.src = url;

s.type = ‘text/javascript’;

document.getElementsByTagName(‘head’)[0].appendChild(s);

}
	
function doit(o){

var url = decodeURIComponent(o.query.uri).split(‘”’);

var out = document.createElement(‘ol’);

var lis = o.query.results.li;

for(var i=0,j=lis.length;i
var li = document.createElement(‘li’);

var strong = document.createElement(‘strong’);

var p = document.createElement(‘p’);

strong.appendChild(document.createTextNode(lis[i].strong));

p.appendChild(document.createTextNode(lis[i].p));

li.appendChild(strong);

li.appendChild(p);

out.appendChild(li);

}
	
containers[url[1]].c.appendChild(out);

}
	
return{doit:doit}

}();

You can see the script in action and download it for your own use. All you need to do is add it to the bottom of any document with one or several SlideShare embed codes in it. Here’s what the script does:

slideshareTranscripts = function(){

var div = document.getElementsByTagName(‘div’);

We get all the DIV elements in the page (there is probably a faster way using CSSQuery these days, but let’s be bullet-proof).

In order to find out which one of the DIVs is a SlideShare embed, we check for an ID that contains __ss as the embed codes have a generated ID starting with this.

What we will do with each of these is to find out what the url of the slideshow is. This is needed because of two reasons: first of all we want to retrieve the transcript and secondly we need a way of matching the returned data from YQL with the right DIV container.

As generated script nodes are not safe to load one after the other this makes sure that the right transcript gets added to the right slides.

So, what we do is check the ID of the DIV, get the first link, retrieve the url from it, store the DIV in an object called containers and use the url as the property name. This property gets a shortcut to the correct DIV as its value. All we need to do then is to get the transcript data via get():

var containers = {};

for(var i=0;div[i];i++){

if(div[i].id.indexOf(‘__ss’)!==-1){

var slideurl = div[i].getElementsByTagName(‘a’)[0].href.split(‘?’)[0];

containers[slideurl]={c:div[i],id};

get(slideurl);

}

	
}

The get() method is your garden variety script node generation function that calls the YQL API and defines slideshareTranscripts.doit() as the callback parameter. This means that the script will generate a script node, point it to YQL, YQL then gets the transcript information from SlideShare, turns it into JSON and calls doit() with the transcript information as a parameter.

function get(url){

var url = ‘http://query.yahooapis.com/v1/public/yql?’ +

‘format=json&callback=slideshareTranscripts.doit&q=’ +

‘select%20strong,p%20from%20html%20where%20url%3D%22’ +

encodeURIComponent(slideurl) +

‘%22%20and%20xpath%3D%27%2F%2Fol%2Fli%27&’;

var s = document.createElement(‘script’);

s.src = url;

s.type = ‘text/javascript’;

document.getElementsByTagName(‘head’)[0].appendChild(s);

}

	

The job of doit() is to generate the right markup and inject it into the embed codes. We create an ordered list and loop over all the li elements. We create the fitting HTML code for each of the list items and add the content as text nodes (innerHTML would try to render markup used in the slides – not a good idea).

We then retrieve the URL from the uri property and add the list as a new child node to the container div stored previously in the container object.

nt

function doit(o){

var out = document.createElement(‘ol’);

var lis = o.query.results.li;

for(var i=0,j=lis.length;i
var li = document.createElement(‘li’);

var strong = document.createElement(‘strong’);

var p = document.createElement(‘p’);

strong.appendChild(document.createTextNode(lis[i].strong));

p.appendChild(document.createTextNode(lis[i].p));

li.appendChild(strong);

li.appendChild(p);

out.appendChild(li);

}

	
var url = decodeURIComponent(o.query.uri).split(‘”’);

containers[url[1]].c.appendChild(out);

}
	
return{doit:doit}

}();

That’s it. Of course you can simplify this by matching only the OL and using innerHTML to write out the list in one go, but this solutions also allows you to alter the HTML output of the list to – for example – make every http://example.com a link.

Happy transcribing!

Sometimes you come across web services that are so amazingly useful, you wonder why nobody has done it before. One of those is Is my computer on? sent to me this morning by Tomas Caspers.

While the usefulness of the service is indisputable the lack of RSS feed or API is actually annoying (let’s not discuss the HTML quality of the site, I am sure this is because of performance reasons as it is the case with other big players). Likeminded web dwellers like Dion Almaer bemoaned the same fact which is why I’ve taken matters into my own hand and used YQL to turn this service into a JSON API:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fismycomputeron.com%22%20and%20xpath%3D’%2F%2Fcenter%2Ffont%2Ftext()’&format=json&callback=isiton

This version wraps the resulting data (in my case “yes”) in a JSON object and calls the isiton() method. You can try it out for yourself.

If you want to change this simply rename isiton at the end of the url to your function name of choice. If you use alert() as the function name you could even turn this into a useful bookmarklet.

Of course you should never forget to support the library followers if you have a system like that and Mattias Hising came quickly to the rescue and built the system as a jQuery plugin.

I hate having to enter all my details when I fill forms – especially when I know for a fact that I’ve entered them before. Looking at Smashing Magazine’s Twitter Avatar WordPress Plugin I got to play with the show API of twitter, which gives you user information.

For example to get my information in Twitter you can just call http://twitter.com/users/show/codepo8.xml and get all I entered. This is also available in JSON and with a callback parameter. You can also do a lookup by email, by calling http://twitter.com/users/show/show.xml?email=you@yourserver.com. Using both of these together, I thought it’d be a good idea to use this API to automatically fill forms.

I’ve created a quick proof of concept: automatically filling forms with twitter data . If you want to use the script yourself (twitterfill.js), simply add it to the page with your form and give it the right parameters in the init method. For the demo page this is:

The parameters are label, which is the text of the button, loading, which is the loading message, mailfield, which is the ID of the email field (the button will be inserted after it), and name,location and url which are the IDs of the form fields you want to fill.

Things that made me happy this morning:

• A Game that shows you your chances of winning the lottery
• A very sensible and good suggestion for public transport in London (make sure to read the reason why it was denied)
• Tetris found to be very effective in fighting trauma – I knew it still is a game full of win.
• the 7 inch vinyl is 60 years old – I still have a few at home, including the original pressing of “the message” :)
• A collection of cool billboard ads
• Remy Sharp’s HTML 5 script reminds me of IE7.js – it teaches IE HTML5
• The cool physics simulation Crayon Physics is now available as a full version – sadly enough only PC. Do want Mac Version (or maybe my HTC touch will run it?)
• Joe Clark explains the difference between captions and subtitles
• So Sari about your washing machine has some good accounts of how not to enter the India market

Somebody had to. It is life in a nutshell: you get switched on, you play and then you stop.