plain text editors—unsung heroes
October, 2000.
By Molly E. Holzschlag. (Link to original article.)
In the whirlwind of high-end tools that make our lives easier, there's nothing so practical as the plain text editor. Think about it. Text editors are available on every conceivable platform. They provide programmers and Web authors a quick and ready utensil to help them be lean, mean coding machines.
If I were on a desert island and had only a notebook computer with no added software, a modem, and a cell phone, I could still write an article and get it off to my editor, or make a major Web site fix.
There are a few more reasons that text editors are so cool. Let's begin with money. We all like it, use it, and need it. Native text editors are free. So you don't spend any of the money you like and need. And, many of these text editors are pretty easy to use—unless you're using vi. Oops, I may just have started a Jihad (Unix and Linux folk tend to choose vi or Emacs, but rarely the twain shall meet), but there you have it, my opinion.
Let's take a little tour of these magical wonders. (See "Online" for a list of sites with discussions and examples of plain text editors.)
Unix, linux, and operating systems like that
Designers who use Mac and Windows may not be familiar with these editors, but using them empowers you to make changes directly on the server.
Let's begin with vi. For those who don't know, pronounce it "vee-eye," or hard-core users will laugh at you. vi was created by none other than Sun cofounder Bill Joy way back in 1976. That aside, vi is considerably powerful. The vi editor works in two modes: the insert (see Figure 1) and command modes. Depending on which mode you're in, different things happen. You enter data when you're in the insert mode, but to copy, paste, or generally adjust your file, you have to switch over to command mode.
Figure 1. Using vi in insert mode.
Next up is Emacs. Fans of this editor find it especially powerful because while at its core it's a plain text editor, it's a whole lot more too. You can add tools to Emacs to help you write HTML or SGML, and use it to code a variety of languages. Like a lot of Open Source software, it has plenty of detailed online documentation and modules. You can add other features such as spell check or data encryption, or write your own. Emacs also has additional support for programming languages.
t's available for other platforms too, so if you like using it, you can take it with you—and no matter what language you speak and write, there's probably a version in that language. Of course, some folks vehemently believe Emacs is the one true text editor, but for most designers not accustomed to text-only environments, it can be somewhat difficult to learn.
The third option, which is more my speed, is Pico, which stands for Pine Composer. It's part of the Pine email system, which is where I first found it back in days before Mosaic and all things Web GUI. I like Pico because it's really, really easy. The keystroke combinations aren't in the least obscure. Control-D is delete, control-X is exit. Of course, Pico's simplicity also makes it much less powerful than other editors, but for writing quick code from the command line, I think it's great.
Macintosh and windows
If you're working with Mac or Windows operating systems, you're likely to be familiar with their native text editors. For those who aren't, the Mac comes with a great text editor known as SimpleText (see Figure 2). Fire up SimpleText and you'll find a truly simple interface. A nice feature is that you can view the clipboard as you edit, and if you cut something you need, SimpleText stores it there for you to review.
Figure 2. Coding on a Mac using a SimpleText.
SimpleText goes a bit further than most text editors in that you can actually view graphics and other binary files with it. This is actually quite useful if you need to check a file's integrity. You can also play sounds, and have it read your text to you by adding Text To Speech software from Apple.
If you're not satisfied with SimpleText, you can try SimpleText Enhancer. This shareware program sports an enhanced look and adds keystroke shortcuts, including Command-S for save. Use it to set margins, time stamp documents, create a custom glossary, or change case. Someone even created a "Made With SimpleText" home page to celebrate SimpleText as the best authoring tool for HTML.
Windows Notepad is plainer than SimpleText (see Figure 3). It offers many of the same features: the ability to cut, copy, paste, and find (but not replace). You can use most common keystrokes, except Control-S to save. As with SimpleText, you can set fonts and styles within the document, but these are for display only, as the output is plain text, which means no document formatting code is created from within the program. There are lots of enhanced shareware and freeware versions available.
Figure 3. Windows Notepad.
Skills in demand
Okay, so the text editor is free, it's available, and you've fired up one or the other at some point in your life. How can these tools really assist you in your daily work? If you're using a text editor, you can't fake it. Naturally, you'll make mistakes and have to debug, but the mistakes you generate will be your very own—not the fault of a visual interface that generates code for you.
If I write an HTML document using a text editor, I have to know HTML syntax. I can use a book or online tutorial to help me, but basically, it's up to me and my fumbling digits to lay down the law. This doesn't necessarily mean I'll be writing better code. I can still make plenty of mistakes. But a text editor can be an inspirational way of getting folks to author clean documents.
To prove my point, I'm going to use several visual editors and show you the difference between code created by the editor and by me.
In the first comparison, I used Netscape Composer to generate a very simple HTML 4.0 transitional page. (See Listing 1.)
Composer doesn't make such beautiful music. The listing shows arbitrary markup, such as unnecessary font tags, nonbreaking space tags, and three lines of metadata—none of which is necessary for this page to work. There's no alt attribute in the image tag. And with font tags in the picture, it can't be considered a strict HTML 4.0 document, despite the fact that it's actually clean, basic formatting.
Now with a text editor, I created the same document in HTML 4.0 (see Listing 2). Not only is this code leaner, it's also accurate and accessible enough to be considered strict HTML 4.0.
More importantly, I can't yet set WYSIWYG applications to write to the current Web markup standard, XHTML 1.0. But with any text editor and my own knowledge, I can. So the same document can now conform to XHTML, as shown in Listing 3.
et's take a look at a more complex and professional visual editor, Dreamweaver UltraDev. I took a detail page from artist Joe Forkan's Web site (www.joeforkan.com), and set it up using Dreamweaver's tools. Listing 4 shows the code results.
While Dreamweaver tends to do a pretty good job generating HTML, it still generates flawed code. Look at the BODY element of my example. Note that none of the link- or text-color code has a hash sign (#) in front of it. This is because I just filled in the Dreamweaver dialog with the numbers I had jotted down. If you don't know the hash mark is supposed to be there, Dreamweaver can't know it for you. As a result, you have incorrect markup. A browser will probably forgive it, but it won't validate as standard HTML.
Not only is the code nonstandard, but there's extraneous code also. It produced unnecessary paragraph tags and those pesky font tags. WYSIWYG editors tend to compensate for the problems inherent to the font tag by placing every unique instance of text in its own font tag even if the only difference is an added boldface or italic style.
Another problem with generated markup from a visual tool is that it's less organized. Dreamweaver's markup is all jammed together. I would write my document with a lot of white space, flush certain tags to the left, and add comment tags. I would add the DOCTYPE declaration and accessibility features like the ALT attribute, and follow a standard. If I were truly writing this code today, I'd write it as XHTML 1.0, which Dreamweaver UltraDev—a brand new product—can't do.
This doesn't mean that visual editors can't play an important role. However, if you know the code, you have more control over your documents. You also can use text editors to make quick changes to code generated by WYSIWYG editors.
Ultimately, with a plain text editor, you've got more power, more control, and the ability to make documents that conform to standards but still display perfectly well in Web browsers.
Loyalist leanings
Text editors aren't particularly good looking. They're not especially hyped or marketed or fussed over by the media. Those who love these little unsung editors are the hard-working folks behind the Web scenes, hand-coding away. While I've seen and undeniably experienced the value of more explicit editing toolsand I certainly need a few select graphic programs and so on—I am, at heart, a lover of the simple. And that's why plain text is just fine with me.
