Live Preview or Die
January 30th, 2006Taking a hint from sjk in a previous comment on this blog, I have added a “live comment preview” functionality, exactly like the one being used on Hawk Wings.
The plugin is called, accurately enough “Live Comment Preview,” and was written by Jeff Minard and Iacovos Constantinou. It installs in true WordPress style – simply download the php file to the WordPress plugins folder and activate it. I think the result is quite impressive and functional. Try it out and let me know what you think!
Thanks to sjk for the suggestion and to Tim Gaden for the pointer to Live Comment Preview.
January 30th, 2006 at 8:01 pm
I was going to leave a comment here, but since I’ve satisfied my need to see my words in print by just watching the live preview, I won’t bother.
January 30th, 2006 at 8:34 pm
I find this sort of thing to be distracting, like trying to watch two different TV shows at the same time. I’m constantly distracting from my typing in the input field by the updating text below.
January 30th, 2006 at 8:59 pm
I like it. Nice idea! :)
Especially I like the opportunity it gives me to catch any typos before my comment disappears into WordPress and I can’t edit it anymore.
Man, is that annoying!
January 30th, 2006 at 9:12 pm
… and to double-check that any HTML has come out right and will display in the posted version.
And to double-check whether I have left anything out of the comment that I wanted to say.
January 31st, 2006 at 10:00 am
I was surprised by John’s “it’s distracting” reaction, but now I am starting to sort of agree. I admit that I enabled it with an attitude of “it only adds value, so it can’t possibly be a mistake.” Now I am wishing I had thought it through, more.
The problem with the Web is that there usually is no “beta phase” (Unless you’re Google, then it’s always Beta!). Whereas with my software I would probably think long and hard before adding a frivolous feature, it seems so easy on the web to just “let ‘er rip.”
So, I guess other people should chime in if they feel strongly. One thing I’ve noticed is that the preview text has now scrolled off the bottom of my screen, so it’s no longer distracting me.
Another thing that occurred to me as I tossed and turned in the night was that offering a preview mode like this might encourage an unwarranted amount of HTML use in comments. I’m not particularly looking for that. I suppose this little box I’m typing in is enough of a preview for most purposes. It’s not like I can’t fix somebody’s messed up link or whatever if they should happen to make one.
The other thing is that it’s just one more dependency on WordPress. As much as I have been raving about it lately, I do sort of like the free-agent status that a minimalist blog affords me.
Maybe a good compromise would be to hack the plugin so it at least requires a checkbox to “turn on” the preview.
February 1st, 2006 at 12:48 am
I had an issue with a similar system where having text that was longer than the text box allowed meant that typing anything scrolled to the top of the box, meaning that you can’t see what you are typing, except in the preview box.
It’s pretty simple to implement a Disable checkflag. In fact, I thought it came with one. You just need to add the HTML Element in the template, and then modify the Javascript that tells it when to update, so it tests against that checkflag before updating.
Some browsers slow to a crawl with these type of systems, so a disable checkbox is essential.
I wrote a pure JavaScript version, if you are interested.
February 1st, 2006 at 11:42 am
OK – I’ve implemented a checkbox for the live-comment feature. It seems like the kind of thing that many people would like to leave turned off while they’re writing most of the comment, and just turn it no before they submit. Hopefully this is a good compromise.
The only problem now is I can’t get Safari to display the label “Enable live preview” next to the checkbox. It seems because the checkbox is part of the overall “comments form,” Safari is padding out the size of the checkbox to match the “Name, Mail, Website” text boxes above. Anybody know how I can fix this? I’ve tried a bunch of stuff including setting a “label” value and “size” value on the checkbox element. No such luck.
It would seem I need to coerce Safari into making the checkbox element “narrower.” Something nasty like setting the right margin to -14.2em sort of does the trick. (Ideally, I’d like to be able to stick my text in that space and have Safari treat text-click the same as a button click, but I can’t figure that out either).
February 6th, 2006 at 6:59 am
p #enablePreviewCheckbox{
width:12px;
}
(Discovered via Firefox’s Web Design Toolbar, and EditCSS Bookmarklet).
February 6th, 2006 at 3:18 pm
Thanks Matt – I could have sworn I tried something like that (not as a style sheet but as a direct attribute on the input element). I must have been using a “width” tag instead of putting it in a “style” tag though. It seems better now! Now if only clicking the label text in Safari would activate the checkbox.
February 16th, 2006 at 6:18 pm
OK – I”™ve implemented a checkbox for the live-comment feature.
Excellent; hopefully everyone’s satisfied with this solution. Thought I’d suggested the idea when it came to mind after reading John’s objection but apparently that unfinished post got stuck in a limbo clipboard file. Thanks for just going ahead and doing it. It’s slicker than I anticipated by leaving the checkbox disabled while typing (undistracted) and only enabling it if there’s a reason (e.g. previewing and tweaking markup before posting).
So, you’ve succeeded in making this my favorite comment previewing for any blog I’ve posted on (Hawk Wings in second place, for now). It’s what I’d like to see bundled with a future WP release. From a usability perspective, what else could be as simple, effective, and non-intrusive?
March 12th, 2006 at 7:43 am
[…] Dizzy after banging my head on the desk, trying to exorcise the evil demon of John Gruber from my WordPress installation and force Live Comment Preview to work, I present the rest of the day’s post as quick links: […]