Ding Dong, the Wicked Plain Text Reader Comment Field Is Dead

Friday, April 09, 2010

In response to my recent rant about why it's a good idea to give your users the option of working with rich, HTML-driven text rather than boring old depressing plain text, a reader had this to say in the comments:

Hm. Looking at the user interface that I'm typing this comment into, I see:

"Comment: (sorry! no HTML.)"

Pardon me, I just stepped in a small pile of irony.

And it's true: the humble Coding the Wheel reader comment form, with its special mix of plain text sprinkled with poor-man's BBCode sans preview, isn't exactly a testament to expressive UI.

Not that it's a big deal, not that anybody really cares; but if you have a website where people occasionally submit code samples or bulleted lists or images, it makes sense to do two things:

  • Let people use some sort of markup (HTML, BBCode, Markdown).
  • Let people preview (preferably in real time, on the client side) what their comment/post/thread will look like.

In fact, 1998 just called and it wants its plain-text reader comment form back. So, recalling Jeff Atwood's admonition from A Blog Without Comments Isn't a Blog...

I firmly maintain that a blog without comments enabled is not a blog. It's more like a church pulpit. You preach the word, and the audience passively receives your evangelical message. Straight from God's lips to their ears. When the sermon is over, the audience shuffles out of the church, inspired for another week. And there's definitely no question and answer period afterward.

...and recognizing that allowing people to enter bits and pieces of BBCode is dubious at best, from a usability standpoint, when those people can't see what anything will look like until after they've submitted the comment...publically and irrevocably...

...I went ahead and implemented HTML-and/or-Markdown-driven reader comments with live preview using:

  • The StackOverflow fork of the WMD Editor
  • Brian Jeremy's revised Markdown.NET library
  • No, better make that MarkdownSharp
  • The Atwood HTML sanitizer, with additions.
  • Beyers Cronje's C# port of Roberto Bicchierai's Java HTML sanitizer
  • Microsoft AntiXSS
  • Google Prettify
  • jQuery
  • jQuery Validation
  • jQuery Timers

I'm still working out the kinks, but what it means is that you can write a comment using whatever you want.

  • plain text
  • raw HTML
  • Markdown
  • or, by using the buttons

And you'll see a WYSIWYG (well, technically a WYSIWYM) preview of the comment as you type. Because in today's web, Thou Shalt Not Use HTML for User Comments is a Commandment that's starting to show its age, and I've never though it was a good message to send people anyway.

Tags: XSS

17 comment(s)

Okay, I'll bite.

public class Testing123
{
   public int CoolQuotient { get; set; }
}

I wish like hell they would implement something like this on Blogger. Even if they made it an option, so you didn't have to have it, but u could if you wanted to....

alert('hello world!')

@ XSSor

alert('hello world')
I think you meant something more like this

Boo-urns! It didn't work. :-/

<a href="javascript:alert('hello world')">this</a>

Is a no go, eh? I suppose you still need to make it safe. Looks a lot better JD, keep up the good work.

Oh noes, I so long for the old plain, or almost plain, text field...

In these times, even nostalgy isn't what it used to be.

<PLAINTEXT>

Come on everybody, let's load up the comments with XSS exploits. : )

<IMG SRC="javascript:alert('XSS');">

James I met you out in Vegas a couple years back at the Bellagio. Just wanted to say hello. Like the site, drop me a line sometime (I sent you an email, too).

Love it love it love it. WMD really seems to be catching on.

hello wheel

Excellent work.Its impressive Post! I found good knowledge from here. Its a great source of knowledge for me and for my future.

Great Job. Lots of useful info here. thank you for your info.

Use the form below to leave a comment.






Coding the Wheel has appeared on the New York Time's Freakonomics blog, Jeff Atwood's Coding Horror, and the front page of Reddit, Slashdot, Digg.

On Twitter

Thanks for reading!

If you enjoyed this post, consider subscribing to Coding the Wheel by RSS or email. You can also follow us on Twitter and Facebook. And even if you didn't enjoy this post, better subscribe anyway. Keep an eye on us.

Question? Ask us.

About

Poker

Coding the Wheel =
Code, poker, technology, games, design, geekery.


Hire

You've read our technical articles, you've tolerated our rants and raves. Now you can hire us anytime, day or night, for any project large or small.

Learn more

We Like

Speculation, by Edmund Jorgensen.