Category: CSS

  • A Landmark Year

    2013 was a huge milestone year for Coherence Labs, and it’s with great excitement and anticipation that we look forward to the year to come.

    The first release of TypeMetal, in June, marked the culmination of a year and a half of tireless development — striving to produce an intuitive, professional-grade HTML editing experience unlike anything else on the Mac. To do that, we started from scratch, and built an entirely new editing engine that lives and breathes modern, standards-compliant HTML as its native representation. With its keyboard-navigable UI, fully styled content-focused view, and extensibility via snippet sets to support your own semantic markup conventions, TypeMetal provides a revolutionary and more productive way to write for the Web. In a time when many have retreated to plain text and shorthand markup languages, we felt certain that there had to be a better way — one that makes it easy to tap the full expressiveness and extensibility of modern HTML, while working directly with fully CSS-styled pages. TypeMetal achieves that — embracing HTML as its native document model, while escaping the need for a separate “preview” by making rendered pages fully editable.

    We set out to build a writing app that meets exacting standards of HTML craftsmanship, and have been delighted to see meticulous, demanding content developers start to adopt TypeMetal as part of their workflow. We’re proud to say that TypeMetal’s first release has achieved many of our goals — garnering enthusiastic reviews, while defying expectations and redefining what’s possible for WYSIWYG HTML editing. But we’re just getting started.

    We’ve been working nonstop on a major TypeMetal update. The new version — which will be a free upgrade — adds functionality that’s been part of TypeMetal’s long-term design from the beginning. We can’t say more just yet, but this release is the beginning of expanding TypeMetal’s usefulness to a broader audience, while maintaining and enhancing its existing capabilities for those who work with standalone HTML files. The new version is nearly feature complete, and we can’t wait to take the wraps off and release it to the world. Watch for news to appear in February.

    More than anything, we look back on 2013 with tremendous gratitude for you: TypeMetal’s pioneering first users. Your support, enthusiasm, and feedback have made the realization of longtime dreams possible, and are fueling the ongoing development of still greater advances to come. Thank you, and stay tuned via our News and Twitter feeds. We look forward to giving you even more reasons to enjoy crafting your content using TypeMetal.

    Happy New Year!

  • Crafting an Editor for HTML Craftsmen

    I’m a bit obsessive, when it comes to my work. I like to craft things with attention to detail that goes beyond the strictly necessary, to produce results that are aesthetically pleasing to me. Whether it’s Objective-C source code, HTML, CSS, or anything else of the sort, I strive for elegant simplicity, clarity of structure, expression and presentation, and pleasing formatting down to the last character. All of this has made me a difficult customer to please, and set a very high bar for the app I ventured to create.

    It seemed to me there had to be a better way to write content for the Web — especially in an era when CSS-styled HTML offers nearly unlimited possibilities for beautiful, flexible layout and styling. Tinkering with raw HTML markup might always be the way to go for building page templates, but producing a site’s content — articles such as this one — accounts for a great deal of what we do, and sometimes even an HTML expert and inveterate angle bracket nudger can be forgiven for wanting to escape markup mechanics for a bit and just write.

    I’ve been especially interested in supporting the ways that authors can semantically extend HTML to annotate documents with useful, stylable meaning. This potential — expressed as the freedom to qualify any standard <element> with “class” and “id” attributes — was quite deliberately designed into HTML, and we routinely take advantage of it to style our work using CSS. But developing, maintaining, and consistently applying a CSS-triggering semantic vocabulary without a little help from our writing tools is challenging. I’ve used Markdown to great benefit for years — it’s an elegant shorthand that produces pleasingly streamlined HTML — but Markdown starts to lose its elegant simplicity when saddled with semantic markup extensions.1

    It seemed possible to create a dedicated HTML editor that lets authors work with fully styled content — much as one would in a word processor — without having to sacrifice the kind of control over markup quality that someone like me insists on. There was no fundamental technical reason why it couldn’t be done (though there would be many technical challenges to tackle along the way). The main hurdle, it seemed, would be overcoming the precedent and expectation that most “WYSIWYG” HTML editors had established to date: seemingly unavoidable loss of control over markup structure, and inelegant results that were unsuited to professional use.

    This led to some bedrock principles that would guide TypeMetal’s design and development:

    • Produce exactly the markup the author requests — yielding minimal, modern, streamlined, standards-compliant HTML that isn’t burdened by formatting annoyances or needless extra baggage.2
    • Adapt to the author’s formatting preferences, without making the temptation to obsess over markup formatting a constant distraction.
    • Make the user’s semantic extensions (“class” and “id” vocabulary) first-class peers to the standard HTML element set.
    • Provide guidance as the user writes, to ensure valid, standards-compliant results.
    • Help in ways that are actually helpful, when there is little doubt about the author’s intent (automatically creating and splitting <p>aragraph elements, for example) — but for the most part, don’t meddle or make inflexible assumptions.

    It also led to the design of TypeMetal’s “Source Loupe”, which is as much a means for earning trust as it is a useful tool. I knew there needed to be a convenient way for someone like me to peek at the HTML that their writing in TypeMetal’s visual UI was producing, without overly shifting the focus away from content and back to the HTML markup syntax that we’re striving in some way to escape.

    Easily summoned and dismissed with a familiar ⌥⌘U, TypeMetal’s Source Loupe does exactly that, while also providing a handy way to inspect HTML that you may have inherited. Tracking the insertion point or mouse pointer over your fully rendered page, the Source Loupe highlights the corresponding HTML markup fragment with character-level precision, leaving no doubt as to what will be written to the saved HTML file. (The Source Loupe’s content is generated by exactly the same code path as the file’s final HTML, and thus produces the same result — taking your HTML formatting preferences and all other relevant factors into account.)

    If what you see in the Source Loupe differs in any way from what you intend, TypeMetal’s Path Bar and Block Mode stand ready to help you grasp and manipulate the individual HTML elements and subtrees that need editing. TypeMetal’s insertion point positioning has been carefully crafted to understand the important distinction between a position at the edge of an element’s interior and the equivalent-looking position just outside the element. And TypeMetal gives special attention to whitespace — cleanly condensing it when appropriate, while offering the means to insert explicit non-breaking spaces, and to easily convert spaces between breaking and non-breaking, where desired. When it comes to the formatting of your HTML markup — something many of us have very particular preferences about — TypeMetal’s HTML formatting preferences model combines flexibility with “set it and forget it” convenience, making it easy to produce markup you can take pride in without having to constantly obsess over markup typesetting.

    All this is designed to produce a writing instrument of exacting precision — a trustworthy tool that’s right at home on a meticulous HTML craftsman’s workbench, while offering the same ease of use, convenience, and content-focused experience to casual content authors. That’s a wide range of users to design for, but there turned out to be no inherent contradiction in striving to please most everyone. TypeMetal’s unifying principle — that we’re crafting clean, streamlined HTML whose styling and layout are to be determined by CSS stylesheet rules, instead of attempting an auto-code-generating drag-objects-around-arbitrarily-on-a-canvas experience — is what makes that possible. TypeMetal is a WYSIWYG HTML editor that breaks free of the conventional limitations of its genre, yielding professional-grade results and the degree of control and precision that those of us who love well-written markup insist on.

    TypeMetal is available now on the Mac App Store. It was praised by this month’s MacFormat magazine as “a great value” and “an excellent addition to the toolkit of any web designer or writer for online publications”. There’s a free demo build you can try to get a firsthand feel for what they mean, and you can learn even more about TypeMetal by browsing its product page and online User Guide.

    1. For example: The “Discount” parser extends Markdown with a “pseudo-protocol” syntax, to allow writing [some text](class:thing) to get <span class="thing">some text</span> in the HTML result. It’s a workable partial solution, but is limited to generating <span> elements, and a Markdown document laden with many such annotations quickly starts to lose its elegant, near-plain-text readability. An author who wants to be able to focus on content at this point is better served by a writing tool that gets markup mechanics out of the way.
    2. TypeMetal adds only two custom metadata elements to an HTML files’s <head>, to enable association of a snippet set and per-file HTML formatting preferences (if any). Beyond that, TypeMetal tries to help out by auto-creating <p>aragraphs, but otherwise leaves you in the driver’s seat and strives to stay out of your way.
  • TypeMetal and Semantic Markup

    Posted yesterday and well worth contemplating if you write HTML: a Smashing Magazine article on HTML/CSS philosophy. Author Heydon Pickering briefly touches on one of the main issues that drove me to develop TypeMetal and make snippets-as-first-class-completions a key feature — the difficulty of remembering and consistently applying one’s own CSS “class” names — even as he proposes a strongly “class”-averse approach to markup and styling. Pickering’s objection to use or overuse of class attributes is a philosophical one, that’s well worth giving some thought to. My interest has been in solving the practical problem of how one can apply class-element pairings more easily and consistently, in cases where they’re an appropriate tool for the job.

    I find a lot to recommend in Pickering’s discussion, actually, even though I take a less strict approach to coinage and use of “class” attributes. I agree substantially with the general premise — it makes a great deal of sense to leverage HTML’s existing semantics, in preference to reinventing the wheel, wherever a suitable element exists for a given purpose. (Among other significant benefits, doing so tends to make your content more intelligible to screen readers.) And Pickering’s article does a great job showing just how far one can get, styling-wise, using CSS descendant and attribute selectors alone. I tend to favor that approach whenever it seems reasonable, but there are cases where I think it’s useful and appropriate to leverage the extensibility that HTML provides for, by developing and applying a consistent vocabulary of “class” names. The best approach to doing so, in fact, incorporates a respect for appropriate usage of HTML’s element set — employing “class” identifiers to add further semantic specificity to an appropriately chosen element that’s already in the right neighborhood of meaning. This means avoiding the generic <span> and <div> whenever possible, in favor of more meaning-infused elements such as <code>, <kbd>, <article>, and <section> (to name just a few). While I think the lofty goal of class-free or nearly-class-free markup is in great measure worth striving for, I also think there are inevitably places where it’s useful to be able to express concepts that HTML’s standard vocabulary doesn’t, and can’t be expected to, intrinsically provide for.

    In TypeMetal’s User Guide, for example, I wanted a convention for marking up the names of menu items — in large part, so that I could style them all consistently, and later restyle them at will, but also because being able to find or index menu item references might come in handy someday. HTML’s <menuitem> element being unsuitable, despite a name that might seem to suggest otherwise (<menuitem> is for commands that a page visitor can choose), I went with <strong> (to make menu items likely to stand out from surrounding text, even if one views a User Guide page without its accompanying stylesheet), annotated with a “class” attribute of “menuitem”.

    When you apply class-based styling like this, it’s a given that the class names you’ve chosen, while meaningful to you, are unlikely to mean much at all to Web crawlers and other software that isn’t versed in your particular custom styling vocabulary. That’s part of the tradeoff. My use of <strong class=“menuitem”> is an imperfect choice, but preferable, I think, to not annotating menu item names at all.

    There are many such cases one can readily think of, especially when you get into writing about specialized areas of knowledge. Each has its own objects of interest, that can be useful to identify with formal markup. When you have a writing tool that helps you develop and remember your styling vocabulary, and apply it easily and consistently across a body of work, the potential to do such things becomes much more feasible to realize in actual practice. That’s been a substantial part of my goal in developing TypeMetal, and an area where it’s become tremendously helpful to me. I’m excited to finally have it out in the world, where it can help other HTML authors to achieve the same productivity boost.

    I’d love to hear about cases where people find TypeMetal’s approach helpful, and how it might be improved to provide even more convenience and agility. Please feel welcome to tweet @CoherenceLabs, email “support” at coherencelabs.com, or post in the TypeMetal Support Forum! — Thanks!

  • 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!

  • A Sample Snippet Set

    Snippet sets underpin one of TypeMetal’s most powerful features: its ability to help you extend HTML to suit your own usage patterns and writing semantics. The snippets you create become first-class objects — peers to HTML’s standard element set, that you can choose just as easily as the standard elements in TypeMetal’s “Insert…” or “Wrap in…completion UI.

    A “snippet” is nothing more than a clipping of HTML, that you can insert into a document or wrap around some selected content. A snippet can contain bits of boilerplate text enclosed in an arbitrarily complex tree of HTML elements, if you like — or, it can be as simple as a single HTML element with optional “class” and “id” attributes. Simple snippets are especially useful, for helping you consistently apply the class and id names that trigger your CSS styling magic, and TypeMetal makes them super easy to create and use.

    A simple snippet can be reduced to a very compact shorthand that fully describes it at a glance. TypeMetal displays, and provides for you to edit and input, this convenient shorthand, making simple snippets a snap to create and modify. If you’ve done even basic work with CSS, things like “.box”, “div.box”, and “section#main.content” probably need no explanation. (But if they do, it’s all explained here.)

    A concrete example might help. Let’s look at the snippet set I’ve been using to write TypeMetal’s in-app Help (which is published online as the “TypeMetal User Guide”). You can view the snippet set or download a copy at this link. TypeMetal stores snippet sets in a JSON-based file format that’s documented here.

    When opened using TypeMetal, the snippet set looks like this:

    a window showing TypeMetal Help Snippets opened in TypeMetal

    The top of the window hosts some descriptive info that helps to identify the snippet set and its intended usage. Snippet sets are designed to be easily shared — via version control systems, simple download, or other means — to help groups of contributors collaborate with consistency on a body of content. So it helps to be able to identify your snippet set and tell people a little bit about it.

    Below this metadata area, we see that this set contains two groups of snippets: “Page Structure”, followed by “General Inline Semantic Styles”. Groups exist simply to help you organize snippets for your convenience. They collect your snippets into submenus, that get added under the “Structure” menu’s “Insert…” or “Wrap in…” item, but they don’t affect how your snippets appear in TypeMetal’s completion UI. All snippets and HTML elements are peers in the completion list.

    You can see that all but one of the snippets in this set can be described purely using shorthand. A snippet’s shorthand can be edited simply by clicking on it — the shorthand becomes editable, and TypeMetal guides you to make sure it follows the simple shorthand syntax.

    If you want to, you can expand your view of any snippet, by toggling the disclosure button at its right end, or by double-clicking an inactive part of the snippet capsule. But for a simple snippet, all this does is show you the correspondingly simple HTML markup. A simple snippet’s shorthand alone is enough to completely describe it.

    Let’s look at an example. I use a simple snippet that creates a <section> element with a class of “tip”, to mark up interesting user tips. Wrapping each such tip in a “tip” section enables me to style them consistently using CSS — using a rounded-rect box and a pointing hand glyph to call them out and set them off from the enclosing content flow:

    an example tip, styled using CSS

    Here’s what the “section.tip” snippet looks like when expanded:

    expanded simple snippet

    The “{content}” placeholder capsule indicates that the snippet (like all simple snippets, and some general snippets) can be wrapped around a selection in your document. The wrapped content will go where the “{content}” placeholder sits.

    Expanding a non-simple snippet shows the markup that defines it. In my TypeMetal Help snippet set, I have a snippet I use when creating a new page, that inserts the necessary page-structure boilerplate into a new, empty document’s <body>:

    expanded general snippet

    The full snippet body (which you can see in the snippet editor by scrolling) is:

    <section id="page">
        <header>
            <h1><a href="index.html">TypeMetal</a></h1>
    
        </header>
        <section class="content">
    
            <h2>{content}</h2>
    
    
        </section>
        <footer>
            <p>&#169; Copyright 2011-2013 <a title="Coherence Labs" href="https://coherencelabs.com">Coherence Labs LLC,</a> All Rights Reserved. Made with <a href="about-the-app-name.html"><strong class="appname">TypeMetal</strong></a>.</p>
        </footer>
    </section>

    Whitespace and newline placement isn’t important in a snippet body, by the way. When you insert a snippet in an HTML document, the inserted snippet automatically takes on the same formatting that TypeMetal applies to the rest of the document (either the document’s HTML formatting preferences, or your user HTML formatting preferences — whichever the document specifies). So use newlines and spaces however you like when editing a snippet (outside of element tags).

    General snippets can be useful, but simple snippets are probably what you’ll use most of the time. Slapping a “class” attribute onto an existing, standard HTML element is usually all you need to do, to coin a little custom styling vocabulary of your own. Consistently applying the class attribute — which the snippet makes quick and easy — enables you to style every such occurrence consistently, with the ease and versatility that centralized CSS styling provides.

    Here’s an example of choosing the snippet I use to mark up menu commands in TypeMetal’s Help. After I invoke the “Wrap in…” command with Control+/, typing “mi” and [return] is all it takes! (Note that TypeMetal is smart enough to prefer the allowed <strong class="menuitem"> snippet over HTML’s <menuitem> element, which isn’t allowed in this particular context.)

    choosing a user-defined snippet, in TypeMetal's completion UI

    I hope this introduction has helped illustrate the purpose and power of TypeMetal snippet sets. You can learn more about snippet sets in TypeMetal’s online User Guide. (One easy way to create a simple or complex snippet, by the way, is from a selected example in an HTML document.)

    TypeMetal is available exclusively on the Mac App Store. If you have any questions at all about it, please feel free to tweet us @CoherenceLabs — or chime in or start a new topic on the TypeMetal Support Forum. Follow our News feed for more illuminating short articles like this.