Encouraged Commentary
Recently, I've begun an expedition with jQuery. My first major experiment has been in improving the commenting system on this blog. Sparked by an email discussion with Tomas Carrillo I've implemented a handful of small interactions which make it much easier for you to get involved in the conversation.
Update! I've added detailed directions on how to get this system setup on your own blog.
Reusing a Good Idea
How does it work? Well the primary premise is based off a design pattern that Aza Raskin demonstrated with Ubiquity. Simply highlight any text in the body of this post and a 'Respond' bubble should fade in near your mouse. As in Ubiquity, the bubble maintains a low opacity in order to be fairly unobtrusive unless you mouse over it. Clicking the respond button scrolls you to the comment box where it is now populated with an html blockquote of the selected text. Now you can type your comment easily and immediately whilst quoting the article.
This works even nicer within comments. If you select any text within a comment the 'Respond' bubble will appear here as well. This time however, a directive '@author name' link is generated for you in addition to the blockquote. It's that easy to respond directly to a given comment!
More Controls Within Comments
But why not take it a step further? After all, discussion goes back and forth. Sometimes you may want to follow a specific comment author to find out what else they said, or maybe you want to easily find responses aimed at a specific comment. I've implemented a simple set of lists that appear adjacent to a given comment if applicable content was found. These navigational lists are intended to allow you to jump between related comments and responses quickly. In addition to scrolling - the targeted comment is highlighted for you.
Last but not least, when you mouse over any comment you will be presented with two faded controls in its top left corner. These alternatives to the text highlighting utility explained earlier allow you to reply or quote another author without highlighting any text. Click on the 'reply' control and you simply target that comment. Click on the 'quote' control and the entire comment (sans embedded block quotes) is quoted for you. Similar to the highlighting technique except this method quotes the entire comment instead of a specific selection.
Get the Source and Contribute
While I just hacked this code together in jQuery. I want anyone to feel free to use it on their blogs. I'm not going to attempt to create some kind of plugin. Each implementation will be too specific and require too much thought for a generic plugin. Instead I have setup a public repository on github so that anyone who would like to use this technique on their own site can go ahead and adjust the source for their own purposes. If you are handy with javascript and would like to extend this idea, modify it, rewrite it in another javascript framework, or make it easier for others to redeploy - you are more than welcome to feel free to fork away.
Sorting & Single Tiered Threading
As an experiment to help make the conversation flow more naturally the script now sorts responses after their parent and marks them as a response. This keeps everything decently sorted and prevents excessive layers of responses.