Distract me not: Faux WriteRoom in the CMS

Faux WriteRoom

As punctual to the party as ever: I only recently got around to trying out the excellent WriteRoom, a text editor / word processor which seeks to reduce distraction while writing by completely removing everything else from the screen. I was instantly smitten – having the attention span of a semi-retarded goldfish, I'm easily distracted, and I'll take all the help I can get when it comes to writing. I tend to write in plaintext format anyway, so I don't need a whole bunch of formatting options – as it happens, most of my writing is for the blog, and I usually put posts together in textedit initially.

While thinking this process over, it occured to me earlier today that it would probably be pretty trivial to put together a 'Faux-WriteRoom' writing environment right there in my CMS. The article creation / editing interfaces in the site's backend are pretty simple (see below) – the main action happens in a couple of standard textarea elements (one for the 'pre-jump' intro, and one for the article itself). All formatting, links, and images are placed using a simplified markup I devised years back for my first CMS project, so it's plaintext all the way.

Plain CMS screengrab

With this in mind, I quickly put together a little jQuery function that can be applied to any textarea elements on the page (or to all of them, by default). When the element gets focus, a class is applied to the body element, as well as to the element itself. Alternate styles linked to these classes cause all other page elements to be hidden, and for the textarea to be scaled and formatted appropriately. On losing focus – for instance, by clicking the big orange button (my one UI concession) or hitting escape – the classes are removed and the formatting is returned to normal. Quick and simple distraction-free writing!

Faux WriteRoom in action

At the moment this is pretty jury-rigged, but if other people are interested in using this functionality in their projects it could easily be refactored into a plugin. Having just written this article using it, it's a definite improvement!


There are no comments on this article at present. Feel free to have your say!

Leave a comment

Comments on semiBad require you to log in with your Twitter account – it really only takes a couple of seconds! Get logged in, or find out what data we access (short version – pretty much nothing).