Loyal readers know that I am developing a comment system for JungleDragon from scratch. Part I was the database model. Part II the basic markup generation. On to part III:

Part III is all about enriching functionality, improving the display, but mostly adding AJAX functionality for the interaction. Here's the progress:

• Comments that are scored below a certain treshold are collapsed by default (see gray bars in screenshot), yet users can click the "show" link to expand them.
• Users can expand the replies of a comment to reveal them or click on more to hide them again. Visually this shows a "twistie" image being opened or closed.
• Users can expand/collapse all replies of the thread in one go
• Users can vote a comment up or down. In both cases, the score of the comment is updated on-screen, and the vote buttons are disabled (you can only vote once). When the user votes the comment down, it is collapsed. They can click "show" again to reveal the contents of the comment
• Users can add a comment in the bottom, but they can also add an inline comment at any nesting level using the "reply" link below the comment. 
• Both Unicode and HTML can be entered for comments, yet HTML is of course escaped. Basically, what you enter is what you will see.
• Extremely long words are properly wrapped during display time, so that they do not break the layout of the comment system
• I have a server-side setting that controls the maximum nesting level for comments to enter. The backend can handle an infinite amount of nesting, but of course I have to limit it somewhat in the front-end.
• When authenticated, comments made by yourself are highlighted in green.
• When authenticated,vote buttons are disabled for comments you already voted on
• When not authenticated, you can still vote. You will then be redirected to the login screen, and then back to the page you were voting on. You can even comment when you are not authenticated, once again your action is remembered and as soon as you are authenticated, it is processed.

Lessons learned so far: building a rich comment system from scratch is a ton of work, and can be quite complex at times. Luckily, the hard parts are behind me. As you can see, proper styling is still a big todo. I also want to enrich the user display for each comment. Currently, you only see the username of the commenter. I'm thinking of including things like an avatar and basic user characteristics, such as the user's karma. If I'm feeling ambitious, I may even include a dropdown menu where you can directly interact with the user (view profile, add as friend, etc).

Note: Some of you may recognize some elements of the screenshot as similar to the Digg.com comment system. Correct, I very much like the Digg comment system, I think it is one of the best ones out there. My plan is to use the good concepts, yet also come up with significant differences in styling and functionality.

Happy Easter all!

BOOKMARK THIS CONTENT

	Bookmark at:

	Articles
	Blog entries
	Comments