Comment preview, only 32 months late!

Ever since I started this blog, people have been complaining, quite rightly, about the dumb comment box, which was tiny and had no preview feature.

Blog comment boxes are generally unsuitable for posting really big comments, because it's painful to edit a lot of text in even a large preview box, and because if something times out or otherwise dies when you click "submit", you can easily end up losing everything you wrote. But there's a large grey area between "quick one-liner" comments, small enough that you could dash them off via SMS if you had to, and "comments you obviously have to write in a text editor". Numerous people found themselves lost in this grey area, and many comments were hideously maimed.

I presumed it would be difficult for me to fix this, and back-burnered the problem for years on end. (I also hand-corrected comments that were screwed up because the author couldn't preview them. It was the least I could do.)

As it turns out, though, it's piss-easy to give a Blogsome blog a proper JavaScript live comment preview. All you have to do is paste some stuff into one of the template files.

So now, at long last, there's a proper comment preview on How To Spot A Psychopath. Do tell me if it doesn't work properly in whatever browser you're running; I've only checked it in Firefox, Chrome and IE6 on Windows.

(Bonus points if you have to tell me via e-mail, because the preview box screws up your browser so badly that you now can't post a comment at all! Oh, and because the preview is done in JavaScript, it of course won't work if you have JavaScript disabled or blocked, or if you're using some antediluvian/mobile-phone/C64 browser that doesn't support JavaScript at all.)

Yes, I am suitably embarrassed about not having taken the five minutes to do this at some previous point in the last two and a half years.

(I still have the silly CAPTCHA thing, where if you're not logged in you're told to fill out the CAPCTHA to post your comment, and then you discover that you actually can't comment at all unless you're logged in, and further discover that the CAPTCHA disappears entirely once you are logged in. I consider this slight imperfection in my blog to be evidence of its hand-crafted nature, and may take another two and a half years to fix it.)

41 Responses to “Comment preview, only 32 months late!”

  1. j Says:

    I'm running Opera 9.64, and the fancy preview thingy looks fine to me.

    And for giggles (or googles), here's a link.

    Ah, very nice. An elegant solution, if a long time coming. Cheers, Dan!

  2. magetoo Says:

    Great, just when I have installed a bookmarklet to deal with tiny comment boxes. Literally two or three hours ago.

    Oh well, anyone who is interested in making life easier can follow the link for more goodies you didn't know you needed.

    And the preview is neat. (I might even enable JavaScript for the site!)

  3. evilspoons Says:

    Firefox 3.5 (with TraceMonkey!) on Mac - a-ok.

    Ironic how I sorta had to type the above sentence without actually knowing it was ok, and instead using it as my test sentence.

    I'm just going to keep on typing because this is actually sort of amusing.

    Hmm.

  4. iworm Says:

    .enod lleW .melborp oN .enif skroW !taerG

  5. Popup Says:

    Ohh, nice!
    I just have to try it out!

    Turns out it works just as well in both Firefox and Konqueror under Linux.

    Thanks!

    (And, by the way, thanks for all the editing in the past! Hopefully it won't be needed anymore.)

  6. Red October Says:

    So far it seems to work just fine under Maxthon, which is bloody obscure. I mean, as far as I can tell it works just ti*$^@#@&$--***NO CARRIER

  7. Jono4174 Says:

    OK I type:

    This previews normal

    and I get:

    This previews bold

    and/but (please delete one) the preview looks nice and bold

  8. Jono4174 Says:

    That should read
    OK I type

  9. Jono4174 Says:

    Take 3
    the preview shows the mangled HTML code how I wanted you to see it (with slash b and so on), but it disappears once posted.

    So no more tutorials:
    A- they are boring
    B- you probably know more that me anyways

  10. Chazzozz Says:

    Another Opera 9.64 user here (on Windows, FWIW), and it appears to be working fine. If I can be bothered, I may even boot into Ubuntu and try Opera there, too. Just for laughs, I'll try it later from my phone using Opera Mini 4.1.

  11. Daniel Rutter Says:

    Yes, there can probably be many differences between what you see in the preview and what actually gets posted when you click "Say It!", for the same reason that people's comments were mangled before when they contained a not-quite-closed link or something so everything after the link got turned into a description for the link, which now went nowhere, etc.

    All of that will still happen, because the same thing is still happening when you click the submit button; WordPress "corrects" your comment to prevent unclosed tags from rampaging down the page, and so on, and it's not very good at DWIM.

    The preview doesn't do that; as far as I can see, it just lets the browser render your broken or unfinished HTML as it would if the code were part of a static page.

    If you're not deliberately trying to make mangled HTML for demonstration purposes, though, the preview ought to be close enough to WYSIWYG for government work.

  12. Shivoa Says:

    Degraded gracefully here to old version without j/s support.

  13. Simulant Says:

    this is A TEST

  14. Simulant Says:

    I really didn't mean intend to click "Say It!" Sorry.

  15. Alex Whiteside Says:

    Testing, testing, one two three. I am a chunky monkey from Funky Town.

  16. Johnny Wallflower Says:

    Sending from Safari 4 on OS X (which has the built-in abilty to resize text boxes). Works fine.

  17. RichVR Says:

    Since other people have done a fine job of testing, I won't have to.
    So I shall not.
    Ignore this post, please.

  18. jnz Says:

    So nobody else has tried using HTML entities yet.

    ========

    If you want to make some text bold, write this:

    <b>This text will be bold</b>

    and it will appear like this:

    This text will be bold

    ========

    Well it looks fine in preview. Lets see how it does going live.

  19. rodenti Says:

    The preview doesn't work on IE for Windows mobile... but it looks like I can still comment!

  20. topdeck Says:

    Testing in Opera 10 Alpha on OS X. Looks good so far.

  21. Stark Says:

    Humph... new fangled whiz-bang gadgetry...who needs it I say? I long for the old days when we posted comments in binary! Dang new fangled widgets!

    01010111011001010010000001101000011000010110010000100000011101000110111100100000011101110110000101101100011010110010000001110101011100000110100001101001011011000110110000100000011101000110111100100000011000010110111001100100001000000110011001110010011011110110110100100000011100110110001101101000011011110110111101101100001000000111010001101111011011110010111000100000010010010110111000100000011101000110100001100101001000000111001101101110011011110111011100101110

    Seriously though, it's so much nicer than the old ways... but I will miss the automatic editing service you used to provide.

  22. Stark Says:

    Hmmm... long binary strings do not seem to play nice. Sorry.....

  23. Chazzozz Says:

    This is from Opera Mini 4.2 (a minor step later then I originally thought) on my phone. Preview isn't immediately useful because clicking in the textbox opens a new screen for entering text. Let's see what happens when I go back...

    (closes screen...) (opens screen...)

    When I close the screen I still don't see the preview, which is odd 'cause Opera Mini normally handles Javascript fine.

    Let's try some HTML.

  24. Chazzozz Says:

    @Stark

    Your binary is still readable, it just disappears off the edge of the screen and results in a (gasp!) horizontal scroll bar.

    BTW...was that "uphill both ways"? ;-)

  25. n17ikh Says:

    I'm currently testing the comment preview in my Android-based T-Mobile G1, in the third-party (but still Chromium-based) Steel browser. Small screen resolution and large comment-box awkwardness aside, live preview works perfectly.

  26. n17ikh Says:

    Now I'm testing it in the Chrome/Webkit native Android browser. Seems to work fine, HTML and all.

  27. jmguazzo Says:

    Tant va la cruche à l'eau qu'à la fin le captcha me les brise.

  28. Daniel Rutter Says:

    Well, if I knew it was gonna be that kind of party, I woulda҉ stuck my ҉ d҉ck in th ҉OH MY G҉D҉҉҉҉҉҉҉҉

  29. TwoHedWlf Says:

    *Jumps on bandwagon*

    Yup, it works.

  30. pywaket Says:

    This is a post from 1.5.0.7 (what can I say, I can't find a theme I like in 2 or 3....) on linux

  31. Bob M Says:

    Testes testes testes... 1,2,3. Is this thing on? *Tap* *Tap* *Tap*

    Well this seems to work reasonably. After that mangled posting I made a few of days ago, I for one appreciate the ability to fix the postings I put up once every 4 years.

    P.S. Thanks Dan!

  32. Stark Says:

    @ Chazzoz - Indeed, both ways!

    And just for good measure :
    01000111011001010111010000100000011011110110
    01100110011001100001001001110010000001101101
    01111001001000000110110001100001011101110110
    1110001000010000110100001010

  33. Chazzozz Says:

    Heh. Binary is so 0011000100110000 minutes ago. Let's try an 8-bit encoding instead:

    436F6D6D656E74207370616D2100

    Or, for the ham radio enthusiasts out there:

    -- --- .-. . -.-. --- -- -- . -. - ... .--. .- --

    (Gee, the preview works really well. I was able to spot and correct errors straight away. Nice.)

  34. RichVR Says:

    ... .--. .- -- --..-- / ... .--. .- -- --..-- / -... . .- -. ... --..-- / ... .--. .- -- / .- -. -.. / ... .--. .- -- .-.-.-

  35. phrantic Says:

    No new posts from Dan for a few days is not entirely unusual, but no new TWEETS from Dan makes me wonder if there's been some kind of accident.

  36. Popup Says:

    No new posts from Dan for a few days is not entirely unusual, but no new TWEETS from Dan makes me wonder if there's been some kind of accident.

    Nah, I'm sure he's just busy assembling his new PC.

    I'm looking forwards to reading all about it, as soon as he's managed to put it all together. (I'm sure it's just a matter of minutes while he manages to figure out why the sata cable is two cm too short, how to fit an metric screw in a UNC hole, and how to silence the fans without overheating the graphics card.)

  37. Daniel Rutter Says:

    Yeah, fiddling with the new PC (about which I did just tweet!). I've only made it fail to POST once so far, which is a bit disappointing. Must have lost my touch.

    I can, however, reveal my results so far in the only benchmark that could possibly matter to anyone: With a spot of overclocking, a Core i7 920 is about 5.7 times as fast for distributed.net's OGR calculator than was my old 2-core Athlon. Hence, a sudden leap in my OGR stats.

    (Do feel free to make my stats go nuts by all telling dnetc.exe, if you run it, that your e-mail address is dan@dansdata.com!)

  38. Stark Says:

    .. / -.. --- -. .----. - / .-.. .. -.- . / ... .--. .- --

  39. Stark Says:

    However...SSBkbyBsaWtlIGVuY29kaW5nIHNjaGVtZXMhDQo=

    Exactly what encoding scheme that is, is an exercise for you, the geeks like me! :)

  40. Jonadab Says:

    Seems to work here (Firefox 3.0 on Lenny).

    It causes an amount of CPU usage that's discernible if one is actively looking at a system monitor applet at the time, so it might cause perf issues on an extremely old system, but I'm writing this on midrange 2005 hardware (albeit, with added RAM) without maxing anything out, so it's clearly not a very big deal.

    The more likely compatibility problem someone could run into is a tiny screen (say, on a mobile device) that can't show the textarea and the preview at the same time. But I suspect that's unavoidable, and they can always scroll.


Leave a Reply