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.
Azra Raskin demonstrates how ubiquity can be done with only a mouse.
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!
Jason Santa Maria wrote a post earlier last month on the hassles of dealing with large discussion threads.
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.
Jim Jeffers Says:
5:14 pmJan 04This is an example of a comment quoting the body text.
Jim Jeffers Says:
5:14 pmJan 04@Jim Jeffers
This is an example of a direct response to a comment.
Brian Shaler Says:
5:38 pmJan 04@Jim Jeffers:
Awesome!
Jordan Says:
8:08 pmJan 04@Brian Shaler
Agreed.
me Says:
8:12 pmJan 04Indeed, why not?
istoica Says:
8:12 pmJan 04Really interesting, the user interaction is really beautifully implemented. I would like to see this implemented in places like wikipedia.
istoica Says:
8:14 pmJan 04hmmm…. the quote didn’t seem to work. I really like the concept and the user interaction is simple and clean. It would be great to see this implemented in wikipedia.
Jim Jeffers Says:
8:20 pmJan 04@istoica:
Ah, sorry about that istoica. You should start your comment below that line. I’m going to incorporate a fix here shortly to adjust the message accordingly. Nothing like live user testing
Ryan Merrill Says:
10:14 amJan 05@istoica:
Seems like it’s working for me.
Chris Says:
11:14 amJan 05Wow — amazing job.
One completely unrelated note: you should drop some php in your footer so the copyright always stays up to date. Maybe it’s just the new year, but the 2007 jumped right out at me.
Mostly though thanks for pushing comments forward considerably!
Jim Jeffers Says:
11:23 amJan 05@Chris:
Thanks Chris - I completely forget about that sort of thing sometimes. I updated the footer per your comment.
Owen Says:
9:47 pmJan 05@Jim Jeffers:
Quoting emoticons doesn’t seem to work (I highlighted the image too in the above quote).
Neat idea though!
Jim Jeffers Says:
9:52 pmJan 05@Owen:
Actually Owen, it depends on your browser. While nothing is perfect the alt text of an image should get included in your selection with certain browsers. I’m running the latest version of firefox and the text highlight does capture the emoticons alt text in this case. I think that this discrepancy is a minor issue at most.
dkoh Says:
11:09 pmJan 05@Brian Shaler:
I know, too bad your website doesn’t do that. and thanks for getting me nothing for christmas.
Sunny Thaper Says:
1:59 amJan 06@dkoh:
Where would we be without DKOH?
Jason Says:
12:46 pmJan 06Really interesting concept. Perhaps rather than break the flow of reading that you’re doing while you comment (by taking you to the bottom “Leave a Reply”), have it pop-up a box (i.e. almost like lightbox) right where you are on the page that lets you respond from where you are…really cool though!
DLarsen Says:
12:49 pmJan 06Yes! I like it!
Jim Jeffers Says:
12:54 pmJan 06@Jason:
Jason, I really like this idea. I will actually try something like this out later in an update. I think that is a much smarter idea. Then again - this may change the way people view commenting entirely as they may not read through the article before they comment - or they may start writing multiple comments as they are reading through it. Interesting. I think it’s worth trying out.
m_eiman Says:
1:03 pmJan 06@Jim Jeffers:
You could put a floating comment box on the right side where each copied snippet is placed, and additional snippets are appended. Encourage the user to read the whole article and comments before submitting the comment by hiding the Submit button until the page has been scrolled all the way down.
Dan Wilson Says:
1:27 pmJan 06Testo testo
ewfwefwef Says:
1:29 pmJan 06its f@#$%ed in IE
Time Says:
1:41 pmJan 06This is truly awesome. However, I’m wonding what it would take to make the equivalent script for WordPress. I gather the script is easy (my buddy here says he can do it tonight in like 10 minutes), but whose toes are being stepped upon to do so?
Wilks Says:
2:14 pmJan 06Fantastic job here. Really well thought and executed. And super cool of you to make this available for everyone’s particular uses without trying to dictate the conversation. Thanks a million.
Jim Jeffers Says:
2:27 pmJan 06@Time:
This is actually a wordpress blog running here. It’s all javascript based any way so you just need to adjust the markup in your theme and include the script.
Jim Jeffers Says:
2:37 pmJan 06@ewfwefwef:
Yes - but IE only three percent of my site’s traffic. I should and could make it work in IE. Later though. Those issues are CSS based and not related to the script.
ppd Says:
2:47 pmJan 06@me:
i agree !!
joe Says:
3:00 pmJan 06haha niiceee
Dan Mayer Says:
3:16 pmJan 06So this is really interesting but seeing the responded to another users comment still isn’t as easy to follow as tabbed in threaded comments. I love the ability to comment on a section of your actual blog post. But the respond to in the comments would be better served by pure threading.
Very cool though, interesting work keep it up.
peace,
Dan
Omar Bohsali Says:
3:23 pmJan 06It would be awesome to see this kind of feature in disqus.
Jim Jeffers Says:
3:47 pmJan 06@Dan Mayer:
Yeah I think you are right - I could easily adjust this script to thread the comments but I would be a little bit weary to do this just because it could create too much heavy lifting on the client. I may give it a shot just to see how well systems can handle it. I would assume that threading is best done on the server side.
We could potentially hide all responses and turn comments that have responses into accordions that could reposition comments on demand. This might be worth a shot.
Mike Atlas Says:
4:00 pmJan 06@Jim Jeffers:
Backscratching.
Mark Says:
4:07 pmJan 06Why not create a plugin for a popular system…. wordpress? maybe
Brian Caldwell Says:
4:27 pmJan 06Freaking cool! I love it….
Andy Coffey Says:
4:31 pmJan 06That is beautiful! Simply beautiful. Now if we could add this kind of intuitive functionality to oh, say the iPhone, that would be magical.
krz9000 Says:
5:12 pmJan 06@Omar Bohsali
bonaldi Says:
5:32 pmJan 06the or an will be fine, not both.
Here, this brings up a drawback of this method: I’ve just come straight from the mistake to the comment box bypassing all the comments, and so have no idea if it’s already been addressed.
Jim Jeffers Says:
5:45 pmJan 06@bonaldi:
Sure but this brings up another point - would you commented at all had you had a conventional way of commenting and you had to scroll through hundreds of comments or hundreds of tangents to get lost in before you made your original point. Or would you necessarily have even remembered that typo after reading the rest of the article and existing comments. There is no way to tell. Either way has it’s drawbacks.
Thank you for posting about that typo as no one had commented on it already. I have since corrected the article!
Ben Says:
6:16 pmJan 06@Jim Jeffers:
Meh I don’t really care if it’s assed in ie. You can still read it and post like old school.
Ben Nolan » Blog Archive » Jquery and Wordpress Says:
6:24 pmJan 06[...] Jim Jeffers has been using Jquery to do some interesting things with the comments on his [...]
durbin Says:
7:45 pmJan 06lame… j/k
asdasd Says:
7:47 pmJan 06Opera support, this is crazy!
AW Says:
7:56 pmJan 06This is brilliant. Also, your blog is beautiful.
Bandini Says:
8:51 pmJan 06Fun!
Jason Newlin Says:
8:53 pmJan 06@jimjeffers, this is dope. It’s very simple and easy. Very well executed. It just makes sense to have a respond button when highlighting text, just awesome, nice work.
Katrina G. Says:
11:56 pmJan 06Test…interesting
Katrina G. Says:
11:56 pmJan 06test
Lisa Says:
12:17 amJan 07leung Says:
12:36 amJan 07make the conversation more natural
GP Says:
12:44 amJan 07@Ryan Merrill
Nice. I’ve been waiting for a better way to follow comments.
Jacques Says:
3:20 amJan 07Great! Certainly a huge improvement.
Some additions (I don’t code Java myself):
- including a ‘follow this post’ check box (= send mail once a new comment is posted - that way people return to a post, as, after posting, you forget about it - unless you bookmark it - yet, then you have to manually check pages - doesn’t work over the months)
- commenting on another comment, if the email address of the original poster is submitted, send him a mail that someone commented, so he can follow up
- also, some mechanism to PM commenters - after you leave a comment, you get a list of all commenters that left an email address (without displaying them, of course) - you can then send them some private comment
Keep up the good work!
Peter Marshall Says:
5:41 amJan 07Todd Says:
5:44 amJan 07A+++ for bringing context to comments! My biggest gripe about the comments people make is they so often fail to reference the exact part of a post they are referring to.
This post got a Re-Tweet from Chris Messina.
http://twitter.com/factoryjoe/status/1100580297
lqd Says:
5:57 amJan 07This is really interesting.
- It could be nice to have a counter left to each paragraph that was commented on showing how many comments were made of a quote starting in this particula paragraph, something a la the old jack slocum’s block comment (now nowhere to be found, http://web.archive.org/web/20071213160241/http://www.jackslocum.com/yui/2006/10/09/my-wordpress-comments-system-built-with-yahoo-ui-and-yahooext/ ). It’s hard to describe just by reading about it, but it was a way of seeing everything that was commented on, every comment right there in the page, and access those comments. So basically adding the number of comments, summaries, and links to access them would be another way to provide context, as you do in the comments hover box on the right (more comments by this author, X replies, etc) but directly in the page.
Your/Aza’s way of doing lowers the cost of quoting and that’s great.
- As well, the respond button could help you respond right here. Not with a lightbox as someone suggested, because it’s modal and would actually prevent you from reading comfortably the other comments or the article if you wanted to while responding, since the lightbox hides the page under it, and dims the rest of it. By inlining it, something along the lines of http://worrydream.com/InlineSpellcheck/ but with a comment respond form of course, would go *with* the flow of commenting and not actually interfere with it.
Nice job really
Don Says:
7:19 amJan 07I plan to add it to my Blogs ASAP
Fostering comments in important.
http://www.songdoibdcitytalk.com/blog/
Jake Says:
7:26 amJan 07@Jim Jeffers:
Amen
Me Says:
7:32 amJan 07Jean-Marc Liotier Says:
7:32 amJan 07Sweet ! Anything that can get people to quote properly is welcome. I would love to see that on forums - instead of quoting the whole entry and then pruning it in the edition field, beginning with just the section you want to quote would be a nice improvement.
Apart from that I can only join the crowd who awaits a Wordpress plugin…
Richard Says:
7:49 amJan 07@Ryan Merrill
and for me
Saliem Than Says:
8:10 amJan 07Beautiful idea. /* adds you to my reader */
Kurt Says:
9:09 amJan 07Very slick indeed!
Nathan Says:
9:15 amJan 07awesome!
matthew Says:
9:20 amJan 07Commenting
Matt Says:
10:01 amJan 07@Nathan
Indeed!
may Says:
10:15 amJan 07great!
WE Says:
10:17 amJan 07Non tecchie users would probably not like seeing code in the comment field…
Chris Boese Says:
10:37 amJan 07Wow, this is really neat, and I like the direction you are taking things.
Particularly, I like the commenting controls that appear on mouseover with the different commenters.
Here are just a few design issues you might considered, just building on what you already have.
#1. Sure would like to not have to scroll all the way to the bottom to get to the comment entry fields. If I had my druthers, I’d prefer to have comment entry fields be available as expandable layers at both the top and the bottom of long strings of single-threaded comments, but in a dream world, wouldn’t it be nice if that expandable comment entry field layer could appear between any comment in the list, and still append the comment to the end of the string as usual? Just to make it more contextually convenient and eliminate some scrolling.
#2. Regarding the neat mouseover commenting controls when you are looking at the contributions of different commenters, they appear to be organized by date/time of contribution, which is chronologically helpful, but contains no information cues. Obviously you can’t stick the kitchen sink there, but date/time of comment is an abstract marker that has no meaning relevant to the comment’s content. What if a short bit of truncated text excerpt also appeared with the date marker, so a person can remember which comment is which?
#3. The issue of threaded comments on blog-like entries is another ball of wax altogether, and most often overkill, when the goal is to get people talking. All the excessive threading and nesting on sites like Slashdot drive me crazy, for instance. I know geeks like it, but I don’t know that it gives community-building folks the warm fuzzies. The entries themselves form enough of a contextual thread to unify the concepts under discussion, but your quoting system with the blockquote formatting is quite nifty!
But when my mind drifts back to the days of hypertext theory in the 1990s, I can dream up an implementation of your contextual quoting system that is two-way rather than one-way. In other words, in addition to grabbing that quotation, wouldn’t it be cool if the system “wrote to” the post code and inserted an anchor tag, and embedded the link to the anchor tag inside the comment, on the fly? In the old days, folks might have envisioned some kind of graphical marker indicating a portion of the text where there are a lot of comment anchors as well, to show conversational or dialogic “heat” (could easily be done with CSS, when the anchor is inserted). But it would need a prettier visual design than was usually used with the old hypertext designers of the Ted Nelson era.
Kamal Says:
10:37 amJan 07This is a beauty!..love it..
Conrey Says:
10:42 amJan 07I don’t think that this is too individualized to be a plugin, but I’m no java wizard either.
snoflingor Says:
11:31 amJan 07@Chris Boese:
agree with the above comment 100%. Should the reply/quote buttons be at the bottom instead of the top of the comment? Though the mouse overs are really nice aesthetically I worry that it violates Nielsen’s heuristic of “Recognition rather than recall.”
MXM Says:
11:45 amJan 07TESTING MXM
Margaret Says:
11:57 amJan 07This is awesome! I wonder if this could be applied to web forums as well?
Margaret Says:
12:00 pmJan 07Another excellent idea!
‘Encouraged Commentary,’ helping or hurting? « Michelle Walls Weblog Says:
12:04 pmJan 07[...] of the blog and how this “encouraged commentary” can help. You can view the demo here. As mentioned in my Evolution of Digital Media class last night, things will tend to evolve to [...]
James Says:
12:12 pmJan 07Well done. I love it
Margaret Says:
12:20 pmJan 07Word. I usually give up in frustration when looking for threads on Slashdot.
Keane Li Says:
12:20 pmJan 07@Margaret
Hopefully it doesn’t get too tiered or it takes away the simplicity of single-stream conversations!
Jim Jeffers Says:
12:39 pmJan 07@Keane Li:
You are correct. I recently experimented with threading. It wasn’t doing this before. But it is now. I had some design decisions to make. At first I was only going to re-sort the responses. That way you could still follow conversations logically. Instead I also opted to mark responses as a response. This means there is tiering but only one degree of it so you don’t get that endless indent chain from people responding to responses of responses.
Jim Jeffers Says:
1:03 pmJan 07@WE
You are absolutely correct. A similar adaptation could be made to do this in textile. Or to keep the response and quote external from the comment field and add it later.
Jim Jeffers Says:
1:06 pmJan 07@snoflingor
That is a good point. I originally had them at the bottom and then moved them to the top. Some changes to the UI should be tested to determine a best practice in this regard.
bonaldi Says:
1:10 pmJan 07@Jim Jeffers:
Oh yes. It’s an ineffable rule of the internet that when all other voices fall still, a grammar nazi will pipe up
Jim Jeffers Says:
1:11 pmJan 07@Chris Boese:
Absolutely. I think if anything sorting is more important than threading. If we resort comments so all of the responses are in the flow of discussion instead of chronological timestamps things are much easier to follow. I’ve added ‘threading’ here now as well but as you see it only goes one level deep. This helps distinct a response to comment from a response to the post. I think this is the best route as multilevel threading doesn’t work very well. At least in my opinion. Readers tend to respond to the last comment in the thread so you end up with a massive depth of unnecessary threads.
Alex Berger Says:
1:48 pmJan 07Jim,
Fantastic feature and project. I positively love it.
stephen Says:
1:56 pmJan 07Ditto with Chris Boese, it would be great if each quote-section was collapsible. Having to scroll so far down the page to leave a comment is painful.
Jim Jeffers Says:
2:13 pmJan 07@stephen:
Yeah you are right there are still a few issues that need to be addressed. I think we’ve reduced the issue of the scrolling a lot by automating it if you choose to use this inline response system. I’m a bit weary of collapsing the comments but it might be worth a shot. It may be as easy as providing a collapsable comment form at the top of the comments.
Chuck Reynolds Says:
2:56 pmJan 07@Chris:
Glad to see your great idea getting big exposure Jimbo..
jon Says:
3:01 pmJan 07super cool! congrats!!
BM5k Says:
3:07 pmJan 07What’s more amazing: how obviously awesome this idea is, or that no one else has done it before?
Linton Says:
3:16 pmJan 07Pretty cool!
Danny Trejo Says:
3:18 pmJan 07Alocado !
riché Says:
3:27 pmJan 07OK, I try. I don’t know this word whilst (but I’m french).
mwhitman Says:
3:46 pmJan 07@riché
Checking out the functionality here for potential use on our blog.
snydez Says:
5:46 pmJan 07just testing,
cool
would it appeared if someone just wandering around the mouse without selecting it?
pestwave Says:
6:37 pmJan 07@mwhitman:
good
wxg Says:
7:43 pmJan 07test
Wythe Says:
9:41 pmJan 07It is a good idea!!
Kang Yang Says:
11:03 pmJan 07@snydez:
So coooooooooooool
ak74 Says:
11:11 pmJan 07doubted
jack Says:
12:45 amJan 08how to do…
Suze Ingram Says:
1:31 amJan 08Sweet. I like it.
a Says:
1:53 amJan 08probando
laughskydragon Says:
3:37 amJan 08just a test
recruit Says:
3:40 amJan 08So cool it is!
vandalizmo Says:
5:08 amJan 08@Sunny Thaper:
nice
Przem Says:
6:50 amJan 08@durbin:
Does it work?
soupenvy Says:
6:59 amJan 08Nice!
Rubens Says:
7:15 amJan 08This is the engine for inovation.
Brilliant.
Roi Says:
8:35 amJan 08test123
Jorge Martinez Says:
10:20 amJan 08This is pretty neat. But as with any new technology, how will new users know what to do? Do we need to add instructions on our pages letting users know how this works? Any thoughts into this?
Jorge Martinez
http://twitter.com/pixelbug
Jim Jeffers Says:
10:37 amJan 08@Jorge Martinez:
I honestly don’t think many users will know how to react to this at first. I think that curiosity sparked by it will allow users to start learning it. In reality, the pattern needs to become more commonly used for a variety of tasks in different implementations so that it becomes common knowledge. I think that you could put directions up on a page informing users of the feature but my idea is that it’s not a necessary feature that users utilize. So if they don’t discover it, it’s still OK.
Encouraged commentary « Digital News blog Says:
10:57 amJan 08[...] To see it in action or try it yourself, visit Don’t Trust This Guy’ blog [...]
Steven Shaffer Says:
1:51 pmJan 08I love jQuery
MotoWilliams Says:
2:01 pmJan 08Wow, pretty neat - It would be cool it remove the ‘quoted’ text out of this box so that non-html’er don’t get confused. Good demo.
Travis Hardiman Says:
2:10 pmJan 08@MotoWilliams:
badass!
Travis Hardiman Says:
2:12 pmJan 08@Rubens:
Very brilliant!
Travis Hardiman Says:
2:15 pmJan 08This is the best commenting system I’ve ever seen.
Doug G Says:
2:46 pmJan 08@Jorge Martinez:
It works so well with the usual process of how you quote that I don’t think it needs any instructions. Users may find it a little jarring to have this ‘Respond’ button appear out of nowhere. However, it’s clear enough what clicking that button will do that I would say a user will try it just to see what happens.
Jim Jeffers Says:
2:59 pmJan 08@Travis Hardiman:
Glad you appreciate it
Jim Jeffers Says:
3:00 pmJan 08@MotoWilliams:
I most likely will be trying this out in the next iteration.
Evan Byrne Says:
3:18 pmJan 08Really nice system you got here, so simple and straight forward. I agree with Travis, this is one of the best commenting system I’ve ever seen.
Wiktor Ceg?a Says:
5:33 pmJan 08@Evan Byrne:
Actually, I’d love to use it in my e-mail client as well. Brilliant and so simple; terrific user experience. Apple guys are so buying it from You.
Jay Robinson Says:
6:25 pmJan 08@Wiktor:
Apple Mail.app does this. In Preferences > Composing it reads:
When quoting text in replies or forwards:
And there is an option for: include selected text if any, otherwise include all
toul Says:
6:40 pmJan 08okay, i like it. but i have to prove more…
toul Says:
6:43 pmJan 08@Travis Hardiman
pfui
coffeelone Says:
8:39 pmJan 08try
see Says:
12:01 amJan 09see see
Leon Poole Says:
1:13 amJan 09What a great idea (and beautifully executed too) well done!
Cómo mejorar los comentarios en nuestro blog con jQuery - Blog Marketing Online - e_make Says:
2:30 amJan 09[...] Jim Jeffers ha publicado un artículo en el que nos enseña la forma de mejorar la legibilidad de los comentarios de su blog. [...]
samsul Says:
7:34 amJan 09Very good idea! I’m getting the source
Ben Says:
2:21 pmJan 09Sorry, this is just a test.
toshism » links for 2009-01-09 Says:
5:04 pmJan 09[...] Encouraged Commentary | DontTrustThisGuy.com sweet commenting enhancement. comment on specific blocks of text (tags: comments webdev jquery webdesign javascript) [...]
Pietro Desiato Says:
1:47 amJan 10nice but i’d rather hide the html code in the textarea of the form, what do you think?
Jim Jeffers Says:
1:53 amJan 10@Pietro Desiato:
Yeah I’m working on adding listeners to the comment form so that we can perform the content generation just prior to the form submission. I also plan to add a live preview and lightbox so that if you choose to cancel your comment you do not need to scroll back to where you left off.
xj Says:
4:45 amJan 10powerful~
Ben Jacob Says:
9:10 amJan 10Thanks dude… ! And this is my participation to the loop !
Great idea.. I will be using this on my designs.
Interesante forma de mejorar los comentarios con jQuery : Blogografia Says:
5:07 pmJan 10[...] Jim Jeffers ha publicado un artículo a modo de ejemplo para mostrar una forma de mejorar la legibilidad de los comentarios de su blog. [...]
kai Says:
3:07 amJan 11@Jim Jeffers:
nice work, easy to initiate. a simple text box plus live preview would be cool. as one said before: won’t it be possible to display the “comment box” right below the post one wants to comment on?
firmy Says:
4:32 amJan 11test
Webcode Podcast » 02 - CES? Never heard of it Says:
10:03 amJan 11[...] Encouraged Commentary from DontTrustThisGuy.com by Jim Jeffers [...]
Porche Design Koffer Says:
10:30 amJan 11I really like the appearing “respond” bubbles on the comments. This system will make blogs more interactive. I hope a lot of blogs will get to use it. It’s really nice when someone, especially the author, gives response on my comment when I check back on their blogs.
Jim Jeffers Says:
11:25 amJan 11@snydez:
No it would not. Though it is possible to make it do that. I think that would add to more confusion as you can’t do anything with it unless you’ve highlighted some text.
Dan Says:
6:47 pmJan 11TEST
Dan Says:
6:48 pmJan 11So good!
Rewolucja w komunikacji (a raczej: w komentarzach) « Wiktor Ceg?a Says:
6:46 amJan 12[...] mniej wi?cej takiej, jak w usenetowych postach. Jim Jeffers, najwyra?niej, te?, wi?c napisa? Encouraged Commentary, dzi?ki któremu… a zreszt?, patrzcie u niego. Po prostu zaznaczcie lewym przyciskiem myszy [...]
Max Design - standards based web design, development and training » Some links for light reading (13/1/09) Says:
3:26 pmJan 12[...] Encouraged Commentary [...]
Moe Says:
4:26 pmJan 12Absolutely incredible!
Raena Says:
5:43 pmJan 12Stupendously clever!
I’d have left out the comment and the paragraph elements though; they might be a bit confronting on a blog that doesn’t have web folk as its audience.
Technology Blog » Blog Archive » Can ‘Encouraged Commentary’ Bring Conversations Back to the Blog? Says:
10:51 pmJan 12[...] the premise behind Jim Jeffers’ new Encouraged Commentary project. Encouraged Commentary takes its inspiration from Mozilla’s Ubiquity plugin. In Ubiquity, [...]
Adamantium Says:
3:24 pmJan 13What about ubiquity users(wouldnt it get in the way? haven’t tried myself because the mouse interface doesn’t work for me). Maybe someone could write a generic ‘comment’ verb for ubiquity similar to yours
Jim Jeffers Says:
5:22 pmJan 13@Adamantium:
I don’t think that’s necessarily the best path to go down. That means a content creator has to depend on Ubiquity to provide this. Let’s say they do. Am I going to encourage my users to go off and install ubiquity or just allow all of their users to utilize the functionality with a 5kb download behind the scenes. The new york times used a similar patter on their site for a while. I think that ball is in ubiquity’s court as they will need to accommodate how to handle such a situation when ubiquity encounters it. I did make the respond bubble offset down and to the right so that it wouldn’t overlap the ubiquity control though I haven’t tried it myself either.
links for 2009-01-14 « boblog Says:
3:04 amJan 14[...] Encouraged Commentary 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. (tags: webdesign wordpress) [...]
viriidity Says:
6:08 amJan 14easy it is
Allison Weiss Says:
11:03 amJan 15Nice feature. Like it.
Michael DiBenedetto Says:
12:06 pmJan 16What an awesome way to start a project. I am going to watch this one. I like it a lot.
Encouraged Commentary Brings Comments in Right Direction | The Qwidget Blog: Stories, Updates, and Thoughts From the Qwidget Makers Says:
12:37 pmJan 16[...] Write Web recently covered a new online commenting tool built by Jim Jeffers called Encouraged Commentary. As RWW writes, “The new commenting features … [allows] users to highlight the [...]
Jim Jeffers Says:
12:55 pmJan 16@Michael DiBenedetto:
Good news is a powerful update is in the works for this weekend!
tomo Says:
7:29 amJan 18Now, this is truely a great innovation. Its great to see people speed up evolution of the way we usually do things…
One thing though, it might be good to let the “jump to links” (like reply and quot) change the browser url hash.
That way, you can press the back button and scroll back to the comment you are replying to and see some comments around it and such. This way, I have to scroll back up, and visualy look for the most similar comment to find that one (and they all look the same!), or read them all!?
Some kind of scroll back and forth functionality is essential here, I think.
Another thing, a very simple wyswyg editor would suffice for styling the html of the quote so that users dont interact with html and can’t accidentaly delete it or mess it up…
test Says:
3:34 pmJan 18test
Jim Jeffers Says:
3:34 pmJan 18@tomo:
Tomo - I think we’ve got it covered. Try it out now. The latest version of encouraged commentary covers both of these issues quite well.
Now the HTML is generated dynamically and your comment box behaves as normal. The comment response opens in a pop up in a lightbox so you aren’t taken away from where you left off. The only addition that could make this better would be to allow comments to post via AJAX requests.
Jim Jeffers Says:
5:34 pmJan 18@test
Well it looks like your test worked. And this is me doing one last test on the revised version of encouraged commentary.
Ormus Says:
1:21 pmJan 19Nice one!Two suggestion:Not all blogs are in english, so it would be nice to have translations for the resource strings or have a way to set them. (for example the ‘respond’ on the button)Plus it might be a good idea, to prefix all your classes. One of the class names was already in use in my blog engine (Serendipity).Keep it up!
Mukul Chaudhuri Says:
2:46 amJan 20very nice line of thought…Actually I was thinking of such a system to be implemented on our company site on asset publishing blog. [http://www.stalagmitesoftware.com/ssca/assets-discovery.php]I found similar sys here http://gplv3.fsf.org/comments/gplv3-draft-2.htmlThis is too has similar and very interesting commenting system… Keep it up the good work
Mukul Chaudhuri Says:
2:48 amJan 20@Mukul Chaudhuri:
Formatting system of commented text is not good at all
test Says:
3:16 amJan 20@Jim Jeffers:
teegergergr
vasudeva Says:
5:35 amJan 20This is great! What do you think about the ability to multi-quote — to let the commenter select-quote or click-quote from multiple comments in one post? Currently, any subsequent quoting will clobber the first, requiring readers to structure to multi-post if they want to engage multiple parts of the discussion.
Jim Jeffers Says:
11:14 amJan 20@Mukul Chaudhuri:
What problems were you experiencing?
Test Says:
6:38 amJan 23@vasudeva:
Testing reply
Rich Says:
2:04 pmJan 25Really impressive.
ken testing Says:
3:00 amJan 26@test:
testing a reply
Here’s to the lazy ones: a semantic LazyBar « chimney Says:
3:12 amJan 26[...] buttons that only appear when you hover over “Kraak & Smaak” (similar to Encouraged Commentary). But how do we do this without being [...]
Interesante forma de mejorar los comentarios con jQuery | aNieto2K Says:
11:49 amJan 26[...] Jim Jeffers ha publicado un artículo a modo de ejemplo para mostrar una forma de mejorar la legibilidad de los comentarios de su blog. [...]
Thibaut Allender Says:
1:08 amJan 28Interesting and useful (not to be too specific ;-)), thanks!
jan Says:
7:27 pmJan 29@Katrina G.:
just trying
jan Says:
7:29 pmJan 29just trying again
lkh Says:
11:55 pmJan 30liut
Links w#6 - CSS Says:
3:12 amFeb 03[...] Encouraged commentary Un joli système de commentaire contextuel dans un blog… encore une idée qui dépasse la simple technologie ! Made in JQuery. [...]
Troy Says:
10:58 pmFeb 04Why does StumbleUpon keep sending me jQuery stuff? I don’t do web development, I don’t care about it.
Nicolas Says:
6:36 amFeb 06I think that`s a great innovation that will help everyone a lot.
Jussi Pasanen Says:
9:12 pmFeb 06Hi Jim, first of all what a brilliant idea!I am just in the process of implementing this in a blog as per the instructions on github.The comment-specific Reply and Quote buttons work fine when the lightbox functionality (class ‘encouraged-form’ in the comment form) is enabled, however they only seem to take you to the top of the page with no other action when the lightbox is disabled.Is this likely to be just misconfiguration or is something else amiss?Cheers, Jussi
Wordpress Themes, WP Themes - Best themes for Wordpress powered blogs » Blog Archive » Quotable Commentary Says:
2:50 amFeb 07[...] Commentary to quote post snippets within WordPress fast and easy. It easily integrates the Encouraged Commentary by Jim Jeffers into [...]
Jim Jeffers Says:
12:11 amFeb 10@Jussi Pasanen:
It certainly sounds like something is definitely amiss. I will look into it and let you know when I have it resolved. thanks for pointing out the issue as I otherwise may not have noticed!
Steven Haddox Says:
12:41 pmFeb 12@Jim Jeffers:
Jim this pop-up lightbox looks amazing and makes it much easier for when comments start getting really long and aren’t paginated. Kudos on the the entire interface and coding. Have you thought about making this a jQuery namespaced plugin so that you can keep those functions and variables out of the global jQuery realm?
Steven Haddox Says:
12:45 pmFeb 12Once I get around to redesigning my blog (probably a few months off), I’ll try and namespace this a little in jQuery (yes, I’ve just recently converted). I’ll share my results with you of course to let you know about it. I absoultely love this again and can’t wait to put it on my new blog. Thanks for helping inspire me to switch to jQuery Jim
Jim Jeffers Says:
4:43 pmFeb 12@Steven Haddox:
I haven’t had time to do this but it’s open source so if you’d like to work on it just fork it on github and give it a go
Simon Wells » Encouraged Commentary Says:
11:28 amFeb 19[...] are some similar technologies being developed elsewhere on the web. One of these technologies is encouraged commentary which uses JQuery to provide a nice interaction mechanism for dealing with comments on a blog. The [...]
Jamp Mark Says:
10:39 pmMar 16Wow! This makes easy to quote any text on the post or comments.
Phoenix13 Says:
5:35 amMar 21So, it would be nice to be able to go back within discussion. Something like “go to the quote source” button placed near every quote.Just another free idea for this awesome code =) I have a lot of them, but this is the most needed one. If you’ll need ideas for more features, you may count on me. That’s bad that I don’t code at all…
Test Says:
9:39 pmMar 24Neat! Really neat.
ashe Says:
7:34 amMar 27testing by IE7
Sneha Says:
10:24 pmMar 29@istoica:
I second this… I wonder how wikipedia will look then… perhaps on the Talk page it will work well.
roseee Says:
7:54 pmMay 06wowww!!! cute!
New jQuery Comment Function! | TheAkiba: Your Portal to Japan Says:
4:50 amMay 14[...] is populated with an HTML blockquote of the selected text. This is a new trick I got just now from Jim Jeffers who demonstrates the function in helping improving discussion on [...]
joonee kim Says:
1:08 amMay 25Very exciting!