I've spent the past couple of weeks writing an editor with the specific prupose in mind of making a reasonably full-featured programmer's editor that is useful for the training of HTML. The fruit of my labor is an editor that I'm calling Less Than Slash (LTS).
Why Notepad Stinks
For my web design class, we must have a way to edit HTML files. Currently, the teacher would like us to use Notepad, but only because it is the only raw-text editor on the computer. Notepad is less than a perfect editor, but I imagine that there are many people in class that wouldn't know this. Here are some of the problems to consider in Notepad or in any prospective HTML editor.
Notepad does not autoindent tabs, so you must indent every new line you start when trying to format HTML code. This discourages the use of proper indentation which is essential on complex pages.
Notepad also does not syntax highlight. Syntax highlighting is a very useful feature in a programmer's editor because it allows you to easily distinguish between different sections of code. All of the text in Notepad is black on white, where it might be easier to read the code if tags were blue and text was black.
Another problem with notepad is that it doesn't offer any connection between the source code and the web page output. There is no easy way to view the results of your work. In order to do this in Notepad, you must first save the file, then mess with the clumsy Open File dialog in Internet Explorer. This seems like a trivial task, but it's certainly not one you want to repeat many times while developing multiple pages (which one instance of Notepad can't do, either).
Notepad doesn't offer any reference information. You can't get help on HTML tags from within Notepad. You can keep a separate window open in the background, but you would have to know in advance where to look for help.
Notepad provides no tools for the construction of web pages. There is no way in Notepad to choose a color visually then paste the correct Hex color into the HTML code. There is no easy way to pass your source code to an HTML validator that is either local or online. There is no way to use FTP to transfer files to a web server. There isn't even a spell checker.
Notepad doesn't offer any extra features for an instructor. Displaying code in a large size for use on an overhead projector is possible, but cumbersome.
Notepad provides no image editing capabilities, which might be useful for developing web pages. Even if using Paint with Notepad, there is no way to apply commonplace image-enhancing tools to the images like crop and sharpen.
LTS, Super-Editor
Less Than Slash addresses all of thse issues and more. LTS provides tab support. You can select multiple lines of text and hit tab or shift tab to move the whole block right or left, respectively. LTS also maintains tabs from line to line when you press return so that you don't have to indent everything manually.
LTS provides comprehensive syntax highlighting. The syntax highlighting in LTS is like no other software available. It produces different styles and colors of text for many different regions withing the same file without haveing to switch modes, as required by many other similar programs. Client-side script has a blue background, server-side script has a yellow background, DTD information has a green background, and inline stylesheets hav a pink background. In each of these sections, separate syntax highlighting schemes are used, allowing specific members of each section to retain a style. For example, a class name in a stylesheet section has its own text style, even though no such entity exists in the basic HTML highlighting scheme.
LTS provides two ways to preview your work - while you work. Clicking the Preview tab in the set of tabs on the right side of the window causes a preview of the current code to appear in the window. No save or refresh is required. An embedded Internet Explorer browser handles this display so that the page would display the same in a regular browser window. Toggling to this tab from the HTML Source view automatically updates the displayed page. You can also use a menu to launch the current code in a new IE browser window without saving it first.
Reference information is readily available throughout LTS. Select any tag in the editor and press F1. The Reference tab (along the right side of the window) is activated, and the MSDN reference for the selected tag appears. The MSDN reference works for HTML are more complete than the W3C because they include not only the tags based on standards, but the tags that will actually work in the most used browser in the world.
LTS provides several tools for web page construction, including built-in methods to validate HTML. You can submit your source code directly to the HTML Help online validator, which will check the source code to verify that it is valid. You can also use the built-in version of HTML Tidy to validate and format your source code. A task list from HTML Tidy appears in window at the bottom of the LTS screen so that mistakes can be handled manually, or you can simply double-click the results line to have HTML Tidy do it for you.
You can use FTP to open your files directly from the server with LTS. This doesn't require a multi-step process of downloading, opening, editing, saving, and uploading. With LTS, you can open a file directly from the FTP/web server, make changes, and when you click "Save", it puts it back on the server. Use FTP with web pages or images.
LTS spell-checks the source code in real-time. Possibly misspelled words appear with a squiggly underline. LTS can be configured to display spelling mistakes in regular text, comments, and attributes, or any combination of the three. Use the context menu (right-click on a word) to see suggested replacements for a misspelled word.
Also on the context menu are a couple of other useful features. You can pop up a colorbox to select a color and LTS will automatically insert the correct Hex code for the color you selected. It will even use one of the standard 214 color words if you select that exact color.
Use marquee mode in a classroom to demonstrate code using a projector. Simply highlight the code to display in the marquee, then use the context menu (or the Ctrl-Alt-W hotkey combo) to display that code in the separate marquee window. The syntax-highted code appears in a large font at the top of the screen. Draw over the marquee in any color, just like football sportscasters on TV.
LTS also provides basic image editing capabilities. LTS can open and save many popular image formats. You can crop an image to display only the portion that you want. The quality image resampling features of LTS allow you to decrease the size of your images for faster download from a web site. The filters of LTS allow you to perform many effects on your graphics, such as color reduction, sharpening, blurring, embossing, and applying user-defined matrices.
Perhaps the most valuable feature of LTS, however, is the code autocomplete. Using an algorithm unlike any other HTML editor, LTS reads your source code looking for the DOCTYPE declaration. Using the DOCTYPE declaration, LTS fetches the DTD for the document you are creating and parses it. It then uses this information to provide code insight in the form of autocomplete.
Here's the end effect: You type a less-than, and LTS displays a list of all of the HTML tags that are valid in the context of the tag you just started. So, LTS will only display <title> as an option when the cursor is inside the <head> tag.
When you press space inside a tag, a list of valid tag attributes appears in the autocomplete list. Some of these attributes have fixed values specified in the DTD, and LTS will display those when adding the equals (=) character after the attribute. If the attribute is a color, LTS will display the color popup. Even when editing inline stylesheets, LTS provides insight for different styles.
The key effect is that when switching between Transitional and Strict DTDs, only the correct tags will be displayed.
And all of this (but not the spelling dictionary) fits on a disk. A single floppy disk.
Still Baking
There are a few features that I want to add to LTS before I call it complete, although I'm rapidly approaching the self-imposed project size limit:
- The macro support needs to be completed to include every function.
- The FTP capabilities of LTS are incomplete. I want to create and delete directories and enable the currently non-working "lock" feature.
- I would also like to add some graphics-making features. This would allow you to create images from scratch, since you can now only modify existing images. This editor should also slice images into tables with support for toggling cell backgrounds (Fireworks doesn't do this).
- More stylesheet support would be nice, including downloading references and tag-level styles.
- XML Schema support would be very useful with the code-complete feature.
- I would like to add SSH capabilities so that I can configure server settings without downloading/opening Putty, possibly even through the FTP window.
Want Less Than Slash?
You can download it from here if you like, just read and mentally agree to the below:
- This version of Less Than Slash will always be free.
- It's not finished, so there may be many bugs, but it doesn't look bad to me today.
- You use it at your own risk, so don't come crying to me if you computer explodes while you're running it.
- Don't charge money for it or I will become angry.
- You need an internet connection to make some features work, so be aware of that since I'm not paying your ISP connect fee.
- I fix things at my whim, so a warning - demanding a fix for free software gets you what you paid for. Consider me a fly and bring on the honeys.
That said...
Download the latest version (v1.0.0.8 @ 2003/06/05) here: LTS.exe
And the English dictionary: American.adm
