Coherence Labs

Month: July 2013

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