The JungleDragon comment system explained »

FERDY CHRISTANT - DEC 13, 2009 (07:27:30 PM)

In this post I would like to give you an overview of the JungleDragon comment system that I developed from scratch. I will show you what it looks like, tell you about the features, and I will go into how it's made.

First things first: What it looks like

The screenshow below shows the comment system in action on an image uploaded to JungleDragon. This should give you an idea of its placement and looks. Click to enlarge.

This screenshot zooms in on the comments:

The features

The screenshot above shows most of the features in action. Still, here's the overview:

Only authenticated users can post comments
Comments are validated to be 5 characters in length at least, 2048 characters at most
Comments can contain any UNICODE, one of the commenters above is posting in the Bengali language
HTML and any other dangerous tags are properly escaped
Comments are automatically wrapped to fit the box. The design never breaks down
Comments can be nested to an infinite level in the back-end yet is restricted to a fixed treshold in the front-end due to limited screen width. This treshold is a configuration parameter that can be changed easily. No matter the nesting, the total width of all comments will never overflow into the secondary column
All nestings can easily be expanded or collapsed using the buttons on top. By default, nested comments are collapsed.
Each comment show a rich representation of a user, which includes his/her name, avatar, and status in the JungleDragon repution system. This includes the user's level (below the avatar) and class (on the right).
All dates in the comment system are formatted in a friendly way, for example "posted one hour ago" instead of "2009-12-13".
Users can add a comment to the main thread using the form below the comments
Users can reply to a comment (creating a nested comment) using the "Reply" link. This will show an inline comment reply form. This inline reply form will slide down, if you cancel it, it will slide back up. When the inline reply form slides down, it will automatically slide up any other inline reply form that you may have open.
Users can vote comments up or down using the vote buttons. You can only vote on comments of another user (not those made by you), and only on comments that you did not yet vote on. Otherwise the vote buttons will be greyed out. The comment vote is done using Ajax, it will not reload the entire page.
When a comment is voted down or when its score is below a configurable treshold, it will be minimized, as can be seen in the last comment, made by user "Troll".
When a comment is posted, it does reload the page yet it jumps to the position on the page where your new comment is. Comments currently cannot be edited or deleted, only administrators have this capability.
Events associated with the comment system are linked to the JungleDragon reward system, the KarmaEngine. Of particular importance is the event where a user votes on one of your comments. This will give you karma, it will depend on the reputation of that voter how much karma you get.
The comments looks and works fine in IE, Firefox, Chrome, Safari and Opera. All styling is controlled by CSS, the markup is pure.
Viewing comments and posting main comments works fine with Javascript disabled. Inline replies and expand/collapsing comments will not work, for obvious reasons.

The missing features

I think the comment system described above is fairly rich and robust. Still, it is only fair to also describe what it does not have and why:

No edit capability for normal users. Some comment systems allow for comment editing for x seconds after it was posted. I may add this later, but most comment systems do not have this capability and I see few users complaining. Allowing comment edits can also make a conversation confusing when somebody replies while you are editing your original comment.
No filtering. There is no way to sort or filter the comments (for example by treshold). It could make for a nice feature for power users, but I think simplicity is better. Less is more.
No Ajax posting. This means that when you post a comment, it reloads the page at the position where you made the comment. It is possible to implement a comment post on the page directly using javascript, but I find it adds little value yet a lot of complexity.
No pagination. I am assuming there will not be hundreds of comments for a single entry, and that pagination of comments is not needed. I might add it later if I'm proven wrong.

How it's made

Building a comment system like this from scratch is a ton of work, and not as easy as it looks. It would go too far to explain every little detail of the development process and code. Nevertheless, I will give some high level pointers about the most important areas:

First, storing comments. Since comments can be nested and there is no limit to the deepness of the nesting, in essence we're storing hierarhcical data. Doing this in a relational database is not hard, all you need to do is creating a foreign key to the primary key of the comment table to indicate a parent relationship. However, querying a table designed like that is highly inefficient. That's why I'm using a so-called lineage technique. I've written a dedicated article about it before.

The lineage technique makes querying a set of comments in the correct reply order easy. The next step is to output those results into markup. This is simply a question of looping through the comments and keeping some counters to track how deep we are in the nesting. Based on that logic, the following is outputted:

A top level comment place holder that is the container for all comments
Next, per row either a comment container or a comment group container, depending on the nesting deepness and whether there is a change in that deepness
Per comment:
- A comment header, which is used for the user information, such as the avatar and class
- A comment body container that contains the actual comment text
- A comment vote block which include the vote score, and the up and down buttons
- A comment reply link, which reveals the inline reply form when clicked
- A comment replies link, that indicates the number of replies and a link to expand or collapse them
- Identification attributes that are used by the Ajax behavior
Finally, the main comment form that sits below all comments

Up next is the styling. There is not much to say about this, it's all normal CSS really. What's cool is that the markup is very simple and the CSS is very rich. Pretty much everything is controlled in CSS. One important aspect of the CSS is the trick I use to indent a comment below its parent. It works no matter how deep a comment isin the nesting. It looks like this:

.c-nest { float:left; padding-left:3%; display:none; width:97%; }

The c-nest class is in essence a group of comments within the same deepness. In this group there can be other c-nest groups to indicate one level deeper and so on. Using the CSS above, comments are always indented below their parent yet never take more horizontal space than the fixed comments container allows.

Finally comes the interaction, the Javascript. It is all based on jQuery. The following methods are implemented:

Comment voting. This will do an Ajax post to my back-end, retrieve the new score, render the new score, and disable the vote panel to prevent a double vote. When a comment is voted down, it will collapse the comment body.
Exand / Collapse all comments. This script simply looks through all nestings and sets the visibility to true, thereby showing all replies.
Expand / collapse per comment. Does the same as above, but this time only for one comment.
Inline reply. This script slides down an inline reply form at the place where the user clicked "Reply". It will slide it back up when the user hits "Cancel". The form that appears is not hardcoded markup in jQuery, it will actually get the form markup from the back-end, using Ajax.
Toggle. This toggles the visibility of one comment's body, for example when a comment is below a treshold or voted down.

This completes the JungleDragon comment system overview. It is actually one of my favorite parts of JungleDragon, since it is quite rich, yet still robust and light. If I ever need to develop another comment system from scratch, surely I will lean on what I created here.

I'm curious to hear what you think about it. I'm also willing to answer any questions you may have about its implementation. Keep that feedback coming please.

BOOKMARK THIS CONTENT