Richard York

Web Developer, Author, and Artist



October 16, 2009 by Richard

Over the past few weeks I've been delving into a lot of things that have always been on my todo list, but always seemed too esoteric or complex to explore.

The first item I gave some development time to was "contentEditable" support. The idea of contentEditable is that you can make any item in a document editable, merely by assigning contentEditable="true" in either JavaScript or as an HTML attribute. This is the technology that drives most browser-based WYSIWYG editors.

The good news is, contentEditable isn't some half-baked proprietary technology anymore that only IE supports. Other browsers like Safari, Chrome, Firefox, and Opera not only support this technology, but they support it much better than IE. Yes, there are gobs of cross-browser issues that you have to work-around if you want to support IE and everyone else . The good news is that many have treaded these waters before you and their hard fought wisdom is ripe for the picking. I refer you to some documents that I found very helpful in writing a very remedial implementation of contentEditable.

If you follow along with the knowledge presented in those two articles, you too can have basic editable content. So far, the only caveats that I have come across is that while all the browsers now support contentEditable, they do not yet support all of the new features that one another have added to the legacy IE API. For example, Webkit doesn't yet support all of the useful extensions made to the API by Mozilla.

Another caveat that I've come across is with creating controls and maintaining a selection in the editable area. In Webkit, at least, the buttons that you make to control the editor cannot be arbitrary elements like <div> or <li>. If you do not use the right elements for editor controls, any selection that you make in the editor disappears when you click on the control. To maintain a selection, you must use form controls for your editor controls, like <button> elements.

Appcelerator Titanium

Another item on my todo list was to build a desktop application with Titanium, a new SDK from a company called Appcelerator, which allows you to build desktop applications using Webkit and web technologies. This is similar to the Adobe AIR SDK.

In tinkering with Titanium, I have, in fact, managed to package and build the "Finder" portion of my framework as a fully functioning desktop application. Even at this early alpha stage of its development, I found that it is superior to Adobe AIR in many ways.

  • Native UI controls, giving you the ability to create a desktop app indistinguishable from other native desktop apps.
  • Shell access. You have the ability to run shell scripts! A big boon for Unix/Linux desktop apps, where the shell offers a fantastic amount of functionality. On Mac OS X, I can already integrate support for the system keychain, spotlight, and a plethora of other services without a single line of Cocoa, since those services all provide terminal APIs. Even CoreImage, with the help of Marc Liyanage's excellent CoreImage shell binary.
  • Scripting support for PHP, Ruby and Python. With what we think of traditionally as "server-side" scripting support, it becomes increasingly easy for web developers to build desktop applications using web technology. Although I found the PHP support non-functioning in my OS, Snow Leopard, I'll be very pleased when the PHP support becomes stable and functioning.
  • Recent, up-to-date Webkit, with all the recent Webkit goodies, like CSS gradients, box shadows, animations and transitions, etc.
  • Native executables, making installation of Titanium apps even more seamless and indistinguishable from desktop applications.
  • Less bloat. Adobe AIR carries a lot of baggage to support both Flash and Flex.
  • A companion mobile SDK that allows you to deploy apps to the iPhone and Android platforms.

To be fair to Adobe AIR, I've read that a forthcoming release of AIR is ripe to address at least some of these issues, but presently, I find that Titanium is poised for excellance.

The following is a screenshot of my "Finder" application built as a Titanium desktop application. It's becoming more and more indistinguishable from the real thing.

Titanium Finder

Mozilla's Bespin

Finally, I decided to give Bespin a whirl. Bespin is a new project from Mozilla that provides a code editor, complete with syntax highlighting, keyboard shortcuts, and the like, in a browser. However, unlike many previous attempts at providing this functionality, Bespin does it using HTML5 and the <canvas> tag. It, quite literally, implements text editing at the lowest level possible, by custom painting the editable text area using canvas APIs.

I opted to use Bespin's farily recent embedded editor component, so that I could integrate Bespin into my framework's editor interface. This functionality provides only the editable text area and syntax highlighting and the relevant keyboard shortcuts associated with that.

I found that Bespin provides a beautiful, responsive interface. It is still in an early stage of development, however. The experience in webkit is a bit more sluggish than in Firefox. I found that the theming portion of Bespin is still very much under development. It presently only supports three themes, white, pastels, or coffee. I found that the white theme didn't always respond when I attempted to modify colors.

I also disliked the custom scrollbar interface, and found myself wanting the scrollbars to match my OS's native UI.

Having mentioned the kinks, I think it's a marvelous step forward, however, and I can't wait to see what future improvements will bring. Yesterday I only had a plain textarea, today I have syntax highlighting.

Following is a screenshot of my Bespin experiment:



There are no comments posted at this time.

Leave a Comment

Simple HTML is allowed: <code>, <b>, <i>, <u>, <var>, <strong>, <em>, <blockquote>, <ul>, <ol>, <li>, <p> (no attributes). All spacing and line breaks in your comment will be preserved.

* All comments are moderated and are subject to approval.
Your comment will appear once it has been approved.
Posting multiple times will not expedite the approval process.


© Copyright 2014 Hot Toddy, All Rights Reserved.