A few weeks ago was Highland Fling, a conference in Scotland organised and run by a very enthusiastic person, Alan White. I spoke twice at that event in the past and one thing I loved most about it was how it handled the Q&A of the audience.

The issues with Q&A

After-talk Q&A is always a pain to get right. There are a few issues that keep cropping up:

• People are too afraid to ask a “probably stupid” question in front of the rest of the audience (funnily enough a lot of times this is the question a lot of others have but are as afraid to ask)
• People asking questions use the opportunity to profile themselves or their company/product instead of asking a valid question (thus wasting everybody’s time)
• Speakers and/or the audience can’t hear or understand the question (and speakers need to repeat it so it gets recorded/is heard by everybody thus using up even more time)
• Speakers can’t see the audience properly (lights in their eyes) which means some half-hearted requests don’t get recognised
• The people asking questions are asked to wait for the microphone to be comprehensible to everybody which takes up time (and not everybody knows how to handle a mic)
• Interesting questions at the beginning of the talk get forgotten halfway through
• Speakers get stuck answering one question or deviate rather than answering swiftly and getting more questions in

The Highland Fling way

The Fling does it differently: instead of having an open Q&A session after the talk the conference has a moderator who not only introduces the speakers but also does a 20 minute interview with them after the talk. Conference participants can tweet questions to the interviewer during the talk. This works around most of the issues mentioned earlier.

This year I was lucky enough to be the moderator/interviewer.

Original photos by Drew McLellan

As you may know, I have a background in radio where I spent a lot of time interviewing people on the phone and live. It was a lot of fun going back to that and especially interesting to have a mixed group of speakers all with different specialist topics to chat about.

Judging from the Twitter feedback at the conference I must have done a good job, and it was great to see speakers be more relaxed when they sit on a sofa and know some questions will come rather than hoping there are some.

I think more conferences should adopt this idea.

Following questions I had about my talk at Highland Fling about badges for distribution and a twitter nagging by Tantek about the official twitter badge I thought I’d have a go at creating a twitter badge following some of the best practices I mentioned in my talk. Here’s the result.

The markup

Instead of HTML containers that will be seeded with real data when JavaScript is available and pointless when it isn’t, I wanted to build on top of HTML that makes sense without scripting and get all the info my script needs from there.

	












My twitter updates









	

In order to customise the badge, I allow for CSS classes with information to be added to the main container:

	












My twitter updates









	

They mean the following:

• amount-n defines the amount of tweets to be displayed with n being an integer
• skin-name defines the skin you want to use (for now this is grey and blue)
• userinfo defines if the user’s avatar, name and location should be displayed.

The script

Here’s the full script and we’ll go through the bits one by one.

twitterbadge = function(){

var config = {

countDefault:5,

badgeID:’twitterbadge’,

userID:’twitterbadgeuser’,

tweetsID:’twitterbadgetweets’,

userinfo:’userinfo’,

stylesmatch:/skin-(w+)/,

amountmatch:/amount-(d+)/,

styles:{

‘grey’:’twitterbadge.css’,

‘blue’:’twitterbadgeblue.css’

}

	
};

var badge = document.getElementById(config.badgeID);

if(badge){

var link = badge.getElementsByTagName(‘a’)[0];

if(link){

var classdata = badge.className;

var head = document.getElementsByTagName(‘head’)[0];

var amount = config.amountmatch.exec(classdata);

var amount = amount ? amount[1] : config.countDefault;

var skin = config.stylesmatch.exec(classdata);

if(skin && skin[1]){

var style = document.createElement(‘link’);

style.setAttribute(‘rel’,’stylesheet’);

style.setAttribute(‘type’,’text/css’);

style.setAttribute(‘href’,config.styles[skin[1]]);

head.insertBefore(style,head.firstChild);

}
	
var name = link.href.split(‘/’);

var resturl = ‘http://twitter.com/statuses/user_timeline/’ +

name[name.length-1] + ‘.json?callback=’ +

‘twitterbadge.show&count=’ + amount;

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

script.src = resturl;

script.type = ‘text/javascript’;

function show(result){

if(classdata.indexOf(config.userinfo) != -1){

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

user.id = config.userID;

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

img.src = result[0].user.profile_image_url;

img.alt = result[0].user.name;

user.appendChild(img);

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

var data = [‘screen_name’,’name’,’location’];

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

if(result[0].user[data[i]]){

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

li.appendChild(document.createTextNode(result[0].user[data[i]]));

ul.appendChild(li);

}
	
}

user.appendChild(ul);

badge.appendChild(user);

}
	
var tweets = document.createElement(‘ul’);

tweets.id = config.tweetsID;

for(var i=0,j=result.length;i
var username = result[i].user.screen_name;

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

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

span.innerHTML = result[i].text+’ ‘;

li.appendChild(span);

var link = document.createElement(‘a’);

link.setAttribute(‘href’,’http://twitter.com/’ + username +

‘/statuses/’+result[i].id);

link.appendChild(document.createTextNode(relative_time(result[i].created_at)));

li.appendChild(link);

tweets.appendChild(li);

}
	
badge.appendChild(tweets);

}
	
function relative_time(time_value) {

var values = time_value.split(” “);

time_value = values[1] + ” ” + values[2] + “, ” + values[5] + ” ” + values[3];

var parsed_date = Date.parse(time_value);

var relative_to = (arguments.length > 1) ? arguments[1] : new Date();

var delta = parseInt((relative_to.getTime() – parsed_date) / 1000);

delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {

return ‘less than a minute ago’;

} else if(delta < 120) {

return ‘about a minute ago’;

} else if(delta < (60*60)) {

return (parseInt(delta / 60)).toString() + ’ minutes ago’;

} else if(delta < (120*60)) {

return ‘about an hour ago’;

} else if(delta < (24*60*60)) {

return ‘about ’ + (parseInt(delta / 3600)).toString() + ’ hours ago’;

} else if(delta < (48*60*60)) {

return ‘1 day ago’;

} else {

return (parseInt(delta / 86400)).toString() + ’ days ago’;

}
	
}

}
	
}

return {

show:show,

init:function(){

head.appendChild(script);

}
	
};

}();

twitterbadge.init();

I am using the revealing module pattern to keep code short and avoid global callback methods. However, there is a slight Opera oddity with generated script nodes in module patterns so we have to deviate from the norm there with an extra init() method call after the main module.

The first thing I thought of providing is a configuration object for the script. This makes it easy to change settings of it without having to hunt through the whole script and is just a nice service for the implementer:

twitterbadge = function(){

var config = {

countDefault:5,

badgeID:’twitterbadge’,

userID:’twitterbadgeuser’,

tweetsID:’twitterbadgetweets’,

stylesmatch:/skin-(w+)/,

amountmatch:/amount-(d+)/,

styles:{

‘grey’:’twitterbadge.css’,

‘blue’:’twitterbadgeblue.css’

}

	
};

Here we have all the IDs in use, the style names and the corresponding file names and the regular expressions to get the data from the CSS class name. All of the IDs and classes are hooks to define your own skins. There is also a countDefault variable to define how many items should be shown when the amount class is not set.

var badge = document.getElementById(config.badgeID);

if(badge){

var link = badge.getElementsByTagName(‘a’)[0];

if(link){

I test for the badge and that it contains a link as this is where we will get all our configuration data from.

var classdata = badge.className;

var head = document.getElementsByTagName(‘head’)[0];

var amount = config.amountmatch.exec(classdata);

var amount = amount ? amount[1] : config.countDefault;

var skin = config.stylesmatch.exec(classdata);

if(skin && skin[1]){

var style = document.createElement(‘link’);

style.setAttribute(‘rel’,’stylesheet’);

style.setAttribute(‘type’,’text/css’);

style.setAttribute(‘href’,config.styles[skin[1]]);

head.insertBefore(style,head.firstChild);

}

	

Then I am ready to read the information from the class. I set a shortcut to the document head and read the amount of tweets to be displayed. If there is no amount-n class set I fall back to the default.

Next is the skin, I check if the class was set and if that is the case I create a new link element pointing to the right skin. I get the href from the configuration styles object.

Notice that I use insertBefore() to add the style to the head of the document and not appendChild(). This ensures to a degree that the skin css file will not override settings that might be in other stylesheets. The last included style sheet rules them all.

var name = link.href.split(‘/’);

var resturl = ‘http://twitter.com/statuses/user_timeline/’ +

name[name.length-1] + ‘.json?callback=’ +

‘twitterbadge.show&count=’ + amount;

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

script.src = resturl;

script.type = ‘text/javascript’;

Now it is time to find the user name (by splitting the href attribute of the link) and assemble the REST url to get the twitter data. Normally I would have added the new script node to the head directly aftwerwards, but Opera doesn’t like this.

function show(result){

if(classdata.indexOf(config.userinfo) != -1){

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

user.id = config.userID;

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

img.src = result[0].user.profile_image_url;

img.alt = result[0].user.name;

user.appendChild(img);

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

var data = [‘screen_name’,’name’,’location’];

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

if(result[0].user[data[i]]){

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

li.appendChild(document.createTextNode(result[0].user[data[i]]));

ul.appendChild(li);

}

	
}

user.appendChild(ul);

badge.appendChild(user);

}
	

Now it is time to start the core functionality: the show method that will be invoked by the twitter REST API callback. I check if the userinfo has been set and create the markup accordingly. Nothing amazing here.

var tweets = document.createElement(‘ul’);

tweets.id = config.tweetsID;

for(var i=0,j=result.length;i
var username = result[i].user.screen_name;

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

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

span.innerHTML = result[i].text+’ ‘;

li.appendChild(span);

var link = document.createElement(‘a’);

link.setAttribute(‘href’,’http://twitter.com/’ + username +

‘/statuses/’+result[i].id);

link.appendChild(document.createTextNode(relative_time(result[i].created_at)));

li.appendChild(link);

tweets.appendChild(li);

}

	
badge.appendChild(tweets);

}
	

Next I get the tweets information, assemble a list and add it to the badge.

function relative_time(time_value) {

[...]

}

	
}

}
	
return {

show:show,

init:function(){

head.appendChild(script);

}
	
};

}();

twitterbadge.init();

The relative_time method is actually taken from the original twitter badge and calculates how old the tweets are. I end the module with a return statement that defines the public methods (in this case only show) and add the script node to call the REST API in an init method. This is only necessary to fix the Opera issue.

Download and Example

You can download the twitter badge and see it in action.