Distract me not: Faux WriteRoom in the CMS
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.
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!
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!