Coherence Labs

Category: Development

  • TypeMetal’s Unique Editing Engine

    One of TypeMetal’s most unique features is in large part invisible: a modern HTML editing engine unlike any other, that I’ve devoted over a year and a half to developing and refining. Appreciating the motivation and design philosophy behind TypeMetal’s engine will help you understand the challenges TypeMetal is uniquely positioned to solve, and get a feel for what it is and isn’t.

    I developed TypeMetal to be an app I’ve long wanted to have: a Mac-native writing tool that lives and breathes modern, streamlined, professional-grade HTML as its model. I wanted an easy way to dash off bits of top-quality HTML, without having to manually manage the mechanics of markup syntax and formatting. I also wanted an app that helped me to develop, and consistently apply, semantic CSS styling vocabularies, in the course of producing a large, stylistically cohesive body of work — such as TypeMetal’s User Guide, or the News posts on this site. It’s struck me as odd that writing HTML by hand, or writing shorthands other than HTML to get an HTML result, is still so common. Can’t we do better? I felt compelled to find out, and TypeMetal 1.0 is the first result.

    Needless to say, in the process of developing TypeMetal, I quickly found out why the app I’d wished for hadn’t already been written: There were a number of fundamental challenges to solve. In particular: Undoable editing of a tree-structured document model, such as HTML’s, is a whole level of complexity beyond working with a flat attributed-text model. Every operation — from applying styling (which, in HTML, means wrapping content in elements) to simple Find and Replace — is substantially more complicated than with simple, linear text. WebKit provides the field-tested HTML parsing, layout, and rendering that underpins TypeMetal, but TypeMetal’s editing functionality and UI are entirely its own. The challenges inherent in their development were many, but the rewards of persisting through tackling them have been great — for much of HTML’s utility and expressiveness lies in its inherently tree-structured document model. Sectioning of content for layout and styling depends on that model, and there is great potential, both in use and yet-to-be-fully-realized, for automated document processing to leverage it.

    One thing I haven’t done with TypeMetal is try to solve every possible use case for an HTML development tool. Solving problems well in software requires focus. Without it, you get lost in a swamp of intractable generality and likely don’t find your way out to a finished or comprehensible product. I didn’t want my efforts to end that way.

    TypeMetal’s focus is content editing: providing a helpful, productive, and rewarding way to write the text, interleaved with images and other media, that is a website’s entire reason for existing. That’s what TypeMetal really strives, above all else, to shine at.

    Within that focus, I’ve gone to great lengths to make TypeMetal as general as possible, all the way down to its foundations. TypeMetal will work with any HTML file or fragment you give it, and puts the expressive power of HTML’s entire element and attribute vocabulary at your fingertips. Block Mode’s exacting selection capabilities make some remarkably general structural editing feats possible, making it much easier to assemble trees of nested <section>s, <div>s, and other elements. You could leverage this capability to build or prototype a page template for a site, but that’s straying a bit outside the realm of what TypeMetal is really designed to be best at. Similarly, TypeMetal doesn’t attempt to be a visual layout editor or CSS editor. Those problem domains have been well explored by other apps, and have more to do with establishing or changing the look of a site than producing the content that the site will host. TypeMetal’s entire focus is crafting exacting HTML content that meets your highest standards, and is suitable for use either as standalone pages, or with whatever templating, styling, and content management system you use. (As I’ve mentioned before, I write all the News posts for coherencelabs.com using TypeMetal, then incorporate them into my WordPress workflow as described here.)

    The first version of TypeMetal has gone a very long way toward achieving my goals. I have exciting things in store for the future, but have also been greatly enjoying the chance to finally use the app that TypeMetal already is. I hope many others will find it as handy and helpful as I do. Your support means everything to TypeMetal’s future (Thank you!), and I’m committed to continuing to refine its user experience based on users’ feedback.

    Whether you’re using TypeMetal already, or weighing the possible purchase and looking to learn more about it, please accept this invitation to drop by the TypeMetal Support Forum, where I reply to questions daily. It’s an excellent place to post any questions you may have about what TypeMetal is and isn’t, drop suggestions for ways it could be extended, and get all manner of other help.

    I also encourage you to subscribe to the RSS feed for News posts like this one. And if you use Twitter, please feel invited to message us @CoherenceLabs!

    Happy content editing!

  • Full Circle

    Did you know…?

    The first web browser — or browser-editor rather — was called WorldWideWeb as, after all, when it was written in 1990 it was the only way to see the web. Much later it was renamed Nexus in order to save confusion between the program and the abstract information space (which is now spelled World Wide Web with spaces).

    I wrote the program using a NeXT computer. This had the advantage that there were some great tools available — it was a great computing environment in general. In fact, I could do in a couple of months what would take more like a year on other platforms, because on the NeXT, a lot of it was done for me already. There was an application builder to make all the menus as quickly as you could dream them up. there were all the software parts to make a wysiwyg (what you see is what you get — in other words direct manipulation of text on screen as on the printed — or browsed page) word processor. I just had to add hypertext (by subclassing the Text object).

    — Tim Berners-Lee

    Tim Berners-Lee's WorldWideWeb Browser-Editor

    It’s been nearly seventeen years since Apple acquired NeXT, and made NeXT’s OS and developer technologies the foundation for what would become Mac OS X. In the time since, Mac OS X (now just “OS X”) has advanced considerably beyond its NeXTSTEP beginnings. Yet many of the same developer-productivity-enhancing fundamentals, and the software engineering insights that gave rise to them, still underpin the OS X we know today — from the multiprocessor-ready Mach kernel, to the dynamic, loose-coupled Objective-C language, to the application frameworks that provide versatile software building blocks.

    As a longtime fan of the technology that began life at NeXT, and whose further development I enjoyed the privilege of contributing to while at Apple, I’ve found a special bit of delight in developing an HTML editor on OS X using modern-day descendants of NeXT’s revolutionary frameworks and tools. TypeMetal isn’t alone in this category, but it does represent a fundamental shift in the way we write for the Web — innovating aggressively in ways that I believe will greatly improve Web content authors’ productivity, while making the process a lot more fun. I’m still experiencing the most fun and greatest productivity I’ve ever enjoyed, developing apps on OS X — factors that I’m certain have contributed greatly to TypeMetal’s successful development and to the powerful functionality it offers.

    HTML has also evolved since the dawn of the Web, and there’s a great deal more to writing a full-fledged HTML editor than simply “subclassing the [NS]Text object”, as I can readily attest after the 20 months of intensive development that produced TypeMetal 1.0. But tackling the challenge of generalized, Undo-able DOM tree editing opens doors to a whole new way of intelligently, symbolically working with our content. There’s great power and potential encapsulated in TypeMetal’s innovative editing engine, and I look forward to the even greater innovations that its groundbreaking foundation will make possible in the future.

    Follow @CoherenceLabs on Twitter, and subscribe to our RSS feed, to keep apprised of the latest developments!

    I wrote this post using TypeMetal with WordPress.