Month: July 2013

  • TypeMetal 1.0.4

    …is now live on the Mac App Store.

    This update makes the path bar context menu work again, fixing the regression that appeared in version 1.0.3. (Sorry for the inconvenience that caused — we’ll be more careful next time!)

    1.0.4 also fixes a bug wherein using the arrow keys inside a <pre> element would collapse whitespace, just as TypeMetal does in ordinary text. Condensing whitespace makes sense in most parts of an HTML document, but it’s not something you want in a preformatted text block, where whitespace and newlines are significant. With the fix in 1.0.4, you now can safely use the arrow keys inside a <pre> element, without disturbing the formatting of its content.

    <pre> elements are especially useful for featuring clippings of literal markup or program source code in your writing, by the way. A common construct for this is a <pre> wrapped around a <code>, where the <pre> element preserves spaces and line breaks, and the <code> element marks the content as being some kind of program source code, typically prompting appropriate styling such as use of a monospaced font.

    You can assemble a <pre><code> construct easily by inserting a <pre> element (Control+/ p r [return]), then inserting a <code> element (Control+/ c o [return]). This leaves you inside the <code> element ready to type. Note that when you’re all done typing the content of this code block, and you want to type what follows the <pre><code> block, you can simply hit the [tab] key to pop out of both the <code> and the enclosing <pre>.

    Creating this kind of construct will give you something like this in your HTML:

    <pre><code>for (id thing in collection) {
        [thing doYourThing];
    }</pre></code>

    which, with CSS styling applied, might be rendered something like this:

    for (id thing in collection) {
        [thing doYourThing];
    }

    If this is a construct you use a lot, you might want to create a snippet to make it even quicker to assemble. The snippet body would look like this:

    <pre><code>{content}</code></pre>

    With that snippet added to my HTML file’s associated snippet set, I’m able to insert a <pre><code> construct by typing Control+/ p r e c [return].

    If you ever want to paste some HTML markup for people to read as markup, note that you’ll need to use TypeMetal’s “Paste as Plain Text” command (Command+Shift+Option+V). Ordinary “Paste” (Command+V) would interpret the HTML markup, putting the described elements in your document, instead of the HTML source code description of them. By pasting “as Plain Text”, you get the exact text that’s on the pasteboard, without any interpretation of HTML element tags it might contain. (Relevant User Guide page: Paste)

    I hope you’ll enjoy this update! Stay tuned for more improvements to come!

  • TypeMetal 1.0.3

    …is ready to download from the Mac App Store!

    This update includes a number of enhancements and fixes that were suggested by users in the TypeMetal Support Forum. If you haven’t visited the Support Forum yet, head on over: It’s a great place to ask questions and file requests that can turn into improvements to the app!

    One key enhancement in this update is the ability to enable JavaScript execution. Normally, it’s best to play it safe and leave JavaScript disabled when editing your documents, since some scripts may modify a document’s structure or content — not something you’d usually want to allow during editing. But if you’re working with well-understood scripts that you’d like to have active and running during editing, you’re free to turn JavaScript on now, in TypeMetal’s General preference pane.

    We’ve also made the Source Loupe a little less transparent, to make its contents easier to read, and fixed a variety of mostly minor issues affecting attribute validation. Most notably, TypeMetal no longer bothers you about unknown (“proprietary”) attributes if you’ve checked “Allow user-defined attributes” in TypeMetal’s General preferences. TypeMetal also more reliably takes you to the site of a validation issue when you click it in the validation issue list. It even opens the attribute editor and focuses the affected attribute for editing, if the validation warning applies to an attribute.

    See the new Version History page for the complete list of changes in this and prior versions. And thanks again to our enthusiastic customers for supporting TypeMetal! Stay tuned for further updates: We have lots more great improvements in the development pipeline!

    Update 2013-07-23

    I just noticed a regression in TypeMetal 1.0.3: The path bar context menu only appears once, the first time you right-click or Control+click a path bar segment. I have a well-understood fix for this already in hand, and will expedite submitting a 1.0.4 build that remedies this issue. In the meantime, if you make frequent use of the path bar context menu, you might want to skip the 1.0.3 update, or revert TypeMetal to 1.0.2 (by restoring from a Time Machine backup or other backup). I apologize for this oversight, and will get a fix out as soon as possible.

    Update 2013-07-26

    TypeMetal 1.0.4 is out, and includes a fix for the context menu regression.

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

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

  • TypeMetal 1.0.2

    …is now up on the Mac App Store!

    This update adds robust, stall-free URL completion, that quickly and reliably tracks changes to surrounding file trees, and keeps the URL completion list from spilling off the edge of your screen. It also makes the shorthand field for newly created empty snippets editable, as it was meant to be, and we’ve fixed the snippet shorthand “Read more…” Help link and snippet disclosure button.

    Pasting or dropping HTML while in Block Mode now adds the magic block boxes and handles as it should. We’ve also fixed a rare crash on document close, and a styling glitch in the Welcome document.

    Please don’t hesitate to post questions, problem reports, and feedback to the TypeMetal Support Forum. (Create a new topic if you wish.) We love hearing how we’re doing, and are eager to do everything possible to make your TypeMetal experience a delightful one!

    We’re posting handy TypeMetal tips daily @CoherenceLabs on Twitter, and will be posting more in-depth “How To” articles here in the near future. There’s also a rare opportunity to be the first to review TypeMetal on the Mac App Store. If you’re enjoying TypeMetal, we’d greatly appreciate your helping us spread the word! — Thanks!