Coherence Labs

Category: TypeMetal

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

  • Using TypeMetal with WordPress

    Updated, March 2014: TypeMetal 2 contains integrated WordPress support that makes this manual process unnecessary. The general technique outlined here can still be useful, however, for using TypeMetal with other content management systems.

    It’s pretty easy to use TypeMetal to draft posts (as well as “pages”) for use with WordPress or other blogging software. I’ve been using TypeMetal to write the News posts and other pages for this site. It’s a fully round-trip process — any last-minute edits you decide to make in the WordPress editor can be pasted right back into TypeMetal for safe-keeping.

    A few simple tips will get you started using TypeMetal with WordPress:

    1. Create a new .html file in TypeMetal for each new post or page you want to draft.

    2. Write with ease and agility! Then, when you’re ready to copy your work into WordPress…

    3. Set your file’s HTML formatting preferences to not put element tags on a new line. (You’ll probably want to set “Custom” preferences for your file, instead of setting your default HTML formatting preferences this way for all files.) I use the following settings:

    These preferences determine the formatting of HTML that you copy to the pasteboard.

    WordPress tries to be helpful by automatically inferring line and paragraph breaks from what you type in its editor, but its helpfulness can yield bad markup when you paste fully-formed HTML that already contains paragraph tags. Leaving the line breaks out of what we copy and paste into WordPress avoids that.

    4. Use the path bar segment context menu as a handy way to copy the HTML you want to the pasteboard. TypeMetal’s “Copy Interior as HTML Source Code” command (here, applied by right-clicking the <body> segment) was designed exactly for this! The HTML gets copied using the formatting preferences that we set in (3).

    5. Create a New Post in your WordPress Dashboard. Click the “Text” tab to use the Text editor instead of the Visual editor, and paste your HTML into the editing area (Cmd+V). Save your draft and preview it. You should be all set!

    If you do end up making some last-minute adjustments in the WordPress editor, pulling your changes back into TypeMetal is easy:

    1. Select all (Cmd+A) and copy (Cmd+C) from the WordPress post editing content area.

    2. In TypeMetal, right-click <body> in the path bar and “Select Contents of <body>”.

    (You can also just Cmd+A to Select All, which selects <body>’s interior. The “Select Contents of …” approach is more general, and allows for you to replace the contents of any element you want — see below.)

    3. Paste! TypeMetal interprets HTML in pasted plain-text, giving you a suitable replacement of your content. (When you want to paste plain text without interpreting any HTML in it, you can use “Paste as Plain Text”.)

    If you want to get fancy, and see your posts styled using your WordPress theme while you type, you can save (using your Web browser) a copy of the archive page for an existing post. Then open the .html file in TypeMetal and replace the existing post’s body with your new content. Instead of copying the interior of <body> when you’re ready to copy your post content into WordPress, copy the content of the container element that holds your post’s content. (I’m using a standard WordPress setup, and in my case the container is a <div> element with classes “entry-content” and “e-content”.)

  • Rise of the Plain Text Editors

    The recent rise in popularity of plain-text and markup-shorthand editors has been an interesting and, to me, somewhat surprising phenomenon. As a software engineer, I’ve always felt right at home taking notes in plain-text form (I’m by now quite used to my wife shaking her head incredulously when she notices me jotting notes down in TextMate instead of Word), but I wouldn’t have expected the practice to gain momentum in the broader computer-user mainstream the way that it has.

    I think a combination of several factors accounts for it — including:

    • HTML being a somewhat verbose markup language
    • a desire to avoid the tempting distractions of text styling and reclaim focus on our content
    • lack of advanced styled text editing support on the immensely popular iPad and iPhone, where people are spending more and more of their time
    • frustration with word processing apps that try to be “too smart” about auto-styling content
    • aversion to entrusting our work to proprietary file formats

    The new generation of plain-text and markup-shorthand apps includes many that are delightful in their clever inventiveness and UI styling, and there are absolutely times when plain text, or a simple and convenient shorthand based on plain text, is what one wants. I’ve used, enjoyed, and recommended Markdown for years (having TrunkNotes on my iPad and iPhone has made it especially valuable to me), and I’ve benefitted greatly from the elegant solution it offers. Yet I can’t help but wonder whether the resurgence of interest in plain text editors also points, in part, to a failing. Why aren’t tools for conveniently writing sophisticated, modern HTML in its native form more common? Why are we still writing HTML by hand, or writing things other than HTML to get an HTML result, in cases where the content being written is primarily styled text? And where are the tools to support us in developing, and consistently applying, our own semantic styling conventions?

    These questions have been the driving motivation behind TypeMetal. I believed it was possible to do better — to elevate HTML to a more fully supported, first-class editable data type on OS X, by providing an adept, Mac-native editing experience that gains pliability without sacrificing power. Just as a 3D modeling app is a far better tool for building and editing 3D models than a plain-text editor, we ought to have the option of specialized apps to support us in producing HTML with greater ease and agility. For those who want to embrace modern best practices and produce first-rate, CSS-ready HTML, I believe TypeMetal is a great way to go, and I look forward to making it even better.

  • TypeMetal’s Approach

    Most HTML editing apps can be grouped into one of two basic design camps:

    • Source Code Editors, that present raw HTML source code for users to edit. The best of these provide syntax-coloring, completion, snippets, templates, project management, and other genuinely handy assistive features, but ultimately they leave page authors to wrestle directly with HTML syntax — which isn’t rocket science, but can be a needless distraction from the substance of the content you’re sitting down to write. In a source code editor, previewing a rendered page as site visitors will see it typically happens side-by-side, in a separate view or window from where the actual writing and editing is done. You’re writing markup over here, but you’re shown what the result will look like over there.
    • Layout-Focused WYSIWYG Editors, that present a canvas where users can position text boxes, media, etc. wherever they want, using whatever fonts and other styling they wish, with the app then generating whatever HTML, CSS, and supporting images are necessary to make a published page look the way the user requested.

    Each has its place. The former will probably always be where a certain amount of nuts-and-bolts HTML development is done — particularly template development, and work that involves scripting. The latter can be of great help to users who just want to get pages of content up, without having to learn even a bit of HTML, but in worst-case scenarios the challenge that’s posed to such apps can produce bloated and overly complex code.

    My chief design goal for TypeMetal has been to strike a useful balance in the under-explored territory in between. I wanted to be able to write and edit content with the intuitive ease of a conventional word processing UI, while having my cake too and producing elegant, minimal, standards-compliant HTML that conforms exactly to the element usage conventions I want.

    The point of this approach is not that “HTML is hard” — by design, TypeMetal empowers you to get as technical as you want with your content, and you’ll absolutely benefit from, and be rewarded for applying, knowledge of HTML’s element set when you do so. The point is that sometimes it’s helpful to have the mechanics of HTML fade into the background for a bit, so you can put your focus on the ideas you’re expressing. When I write using TypeMetal, as I’m doing right now, I still think about the HTML elements and CSS-triggering “class” names I can choose from, and which are most appropriate to apply for the context I’m in, but the thought is in the background — a fleeting, select-and-apply step that I get into and out of more quickly than I can when hand-assembling HTML. This puts me back in my train of thought while I still have it, instead of luring me into HTML’s abundant opportunities for becoming distracted by the mechanics. (“Should I put this element tag on a new line? Indented? How many spaces should I put here?” And on and on…)

    I wrote TypeMetal with a deep appreciation of, and the goal of producing, elegant, well-crafted HTML that will meet users’ highest standards. There are worthwhile rewards of styling flexibility, semantic expressiveness, and pleasing conciseness to be had, for those who go to the effort to craft lean, modern, streamlined HTML, and I wanted to empower myself and others to obtain those rewards with greater ease than ever before. TypeMetal is a highly technical HTML-building app when you want it to be, but also lets you treat it as a simple, distraction-free notepad when that’s what you want. To me, this strikes a novel and very useful balance that I’ve long been looking for. I hope others will delight in using TypeMetal and find that it fills an unmet need for them too.

  • Introducing TypeMetal

    I’m delighted to announce the release of Coherence Labs’ very first app — a groundbreaking HTML editor for the Mac called TypeMetal, that’s now available on the Mac App Store.

    TypeMetal Application Icon

    At TypeMetal’s core is an innovative new editing engine, a year and a half in the making. Built atop WebKit’s heavily field-tested parsing, layout, and rendering foundation, TypeMetal’s editing functionality provides a suite of precise, fully undoable operations designed to work intuitively and give you full control down to the last element and character. Most remarkable of all, TypeMetal provides this degree of control while you work with fully rendered pages, not with HTML markup.

    Developing TypeMetal has been a labor of love — a much-enjoyed challenge of building an app that I couldn’t wait to use myself — and I’m thrilled to finally be able to release it to the world for others to use and enjoy.

    In addition to the summary and 60-second intro video on the product page, you can browse TypeMetal’s entire User Guide — the same in-app Help that comes with TypeMetal — online. One of the best parts of this project has been getting to write TypeMetal’s User Guide … using TypeMetal!

    Now that the wraps are off, I’ll be posting here more often — offering tips and bits of conceptual background that will help you get to know TypeMetal and its capabilities, and learn how to leverage them to greatest advantage. I’ve also added a public support forum to the site. It’s the place to go to get questions answered, report surprises, and send us feedback. And for quick questions, you can also reach us on Twitter @CoherenceLabs.

    I truly hope TypeMetal will delight people. I’ll be spending the next few weeks making sure its pioneering first users are happy with their purchase and any serious issues that arise get resolved quickly. From there out, I have many more great improvements in mind for the future. I am absolutely dedicated to making TypeMetal the best it can be, and an app people enjoy using. Stay tuned to our RSS feed — there’s more to come soon!