HTML

Via yesterday's Vimcasts episode, "Converting markdown to structured HTML with a macro", check out this most-excellent Vim plugin:

Surround.vim: Delete/change/add parentheses/quotes/XML-tags/much more with ease

Surround.vim is all about "surroundings": parentheses, brackets, quotes, XML tags, and more. The plugin provides mappings to easily delete, change and add such surroundings in pairs. While it works under Vim 6, much of the functionality requires Vim 7.

Anybody editing HTML or other markup can definitely use this.

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."

-- Tim Berners-Lee

Note: while I'm no longer using special icons to indicate external links on the site, this is still a useful tip.

Another "text instead of image" trick like RSS in CSS is the small arrow icon you see next to external links. Some sites do that with small images. While checking out Wikki Wakka, I noticed theirs were actually text, rendering an HTML entity code of an infinity symbol -- ∞ -- which in the raw HTML is ∞

Splendid idea, I thought, but I didn't want to do the same exact thing they had.

Enter the Web Design Group's (WDG) HTML entities reference page, where you can find all sorts of neat letters and symbols, including the ⇒ "rightwards double arrow" or ⇒

And then Notanda, during its processing of my saved plaintext file entries, automatically adds that code at the end of external links.

On the previous version of this site, I had a couple of badges of the ubiquitous RSS/XML variety:

What's different about them versus the run of the mill versions were that they were just text, not images like most versions. It's all done in CSS. Here's how.

For a given badge, enclose the text you want to appear in a paragraph block and make it a link. Give the paragraph a suitable class name. I used "feeds" for mine. Viz:

<p class="feeds"><a href="http://www.celsius1414.com/index.xml">RSS 2.0</a></p>

Then in your CSS file, use something along these lines:

.feeds a {
     background: orange;
     color: white;
     padding: 2px;
     border: outset thin;
     font-style: normal;
     font-weight: bolder;
     text-decoration: none;
}

Which will produce something like what you see in the picture. A simple trick, but useful for all sorts of things.

Check out External Link Icon for a related tip.

Where Taco HTML Edit is featureful for basic HTML editing, Smultron goes without any tag handling beyond syntax coloring, save for a Close Tag command that is really handy. It also operates with a multiple-documents-per-window arrangement that you either tolerate or not -- but at least its execution is somewhat more elegant than the BBEdit drawer action. The Smultron window does remain visible even with no documents open, which is annoying, so I wind up hiding the program with a Command-H most of the time.

You can install a CLI utility along with Smultron -- check under the Help menu -- giving you the ability to issue commands like smultron README.txt to open docs in the program. Piping input from another command doesn't seem to be available as yet.

Another feature I appreciate, especially as an occasional NaNoWriMo participant, is the ability to have a running wordcount in the status bar.

There isn't much that is advanced about Smultron, but it's not trying to be more than a slightly more-than-basic text editor. And it does that job quite serviceably.

This is a work in progress (what open source program isn't?) but who can resist the jolly, candy-like strawberry icon?

Continuing the theme of naming text editors after food (see Smultron), Taco HTML Edit is a bare-bones[1] text editor geared towards -- wait for it -- editing HTML.

Nothing too fancy-schmancy: commands/dialog boxes for adding tags, clippings, project files, syntax coloring and checker, preview, etc. There is some basic PHP support as well.

Keyboard shortcuts are generally good. The most-used tags have direct key combos, and there's an Advanced Insert palette you can bring up to step-by-step add tags and sub-attributes pretty easily. The only beef I have is that the long list of tags in that palette does not allow you to jump ahead by pressing initial letters (like jumping to <em> by hitting the letter e). This forces you to either scroll with the arrow keys for a long time, or use the mouse -- and since this is one of the few if not the only places that happens in this program, it definitely could use that extra feature.

The one thing I missed from using BBEdit was the HTML support, and since Taco adds Cocoa Tiger goodness like the new in-place spell-checking plus thesaurus action -- not to mention a non-abusive Preferences dialog, always a plus -- this program is definitely worth a look. Especially if you're just looking for a text editor that will let you do some markup but stay out of your way.

Taco HTML Edit is free, though not open source, so be aware it could go commercial any time.

Update May 2010: Yep, it's now $24.95. Not sure when it went non-free, as I haven't been paying attention to it, but that's the way it goes sometimes.

[1] pun not originally intended, but what are you going to do?

Textile is a simple markup system that allows for what the author refers to as "humane" text entry. There is an online generator that will take markup and generate HTML from it. There are also numerous interpreters and libraries available for use in larger projects.

One of these is PyTextile, a Python port of Textile, originally written by Mark Pilgrim and now maintained by Roberto Antonio Ferreira De Almeida. See also RedCloth for Ruby.

Here's a cool, comprehensive Textile Reference.

During my recent planning of the next version of Notanda, I had been considering programming my own interpreter of a subset of Textile markup -- but I've just about decided to use a pre-existing package. Probably PyTextile, as I'm rewriting Notanda in Python. However, I'll want to peruse the code before deciding.

Update: wound up settling with Markdown after all.