Accessibility
 
 
Field Work: Understanding Snippets
A Snippet Here, A Snippet There
HomeSite Unleashed, Installment 1

by Amy Cowen

Snippets are the primo way to develop customized, site-specific chunks of reusable code for HTML, JavaScript, CSS, DHTML, or your other favorite scripting language. If you're not using snippets yet, you're missing out.

In the first release of HomeSite, "snippets" weren't called "snippets," and they sat in a horizontal toolbar. So, your number of "folders" was limited. When I first upgraded to 3.0, I hated the new handling of snippets -- a window on the resources tab.

Today, as I peruse my 15+ site-specific snippet folders, I can't imagine using my snippets any other way.

A Snippet By Any Other Name

A snippet is, basically, a chunk of reusable code. But, it doesn't have to be code that gets dumped in one place in your page. It can contain both a pre- and post- -- or start tag and end tag -- set of information. Whatever you highlight in your HTML serves as the cornerstone. Double clicking the appropriate snippet drops the specified opening and closing code into place.

Snippets

1001 Uses
Once you start using snippets, you'll find yourself creating them for any and every site you work on. That's the beauty of them. You don't have to just have tags that allow you to wrap a highlighted section in <FONT SIZE="+1>"</FONT> tags. If that's all you want, you can use the built-in font toolbar for a quick-click wrap.

More advanced developers won't stop with the quick-click. After all, it can be quicker.

Imagine a site that uses specific fonts, sizes, and colors in various places and at various levels. Even headlines are similar but different depending on where they are in the site. Snippets for each can save a lot of time and make your code more consistent as you'll always be applying the tags in the same order (and exact same spacing). This will allow you, down the road, to make site-wide changes via search/replace with confidence.

An HREF snippet makes link preparation a breeze, especially on a framed site like E Business where each link also needs TARGET="_top. Similarly, the http:// snippet contains just that bit of code: http://. This allows me to single-click the prefix in place when I'm coding links for which the full address wasn't provided.

The "space" snippet is one of my most-used snippets, and I've recently started putting a copy in all of my site-specific snippet folders for easier access. It contains the chunk of code I use to separate "sections" of a page -- when a <BR> or a <P> isn't enough, in other words.

The more sites I work on, the more snippet folders I create, and the more varied my snippets become. A new site, dependent on Style Sheets, led me to start creating <SPAN>-specific snippets as well as generic <SPAN> snippets like this one:

<SPAN CLASS="">
</SPAN>

Creating a Snippet
In the "Resources Tab," you'll see a "Snippets" tab. Activate that tab, and you'll see a tree of snippets folders (ones you've created), much like the Explorer tree. The folders expand and collapse so that you can see what's in them.

To create a folder, right-click in the window and select "Create Folder." A folder appears, ready to be named. After you name it, you're ready to add your first snippet.

Right-click on the folder, and choose "Add Snippet." The pop-up window allows you to name the snippet (make sure you name it in some logical fashion so that you can tell your snippets apart) and insert the start and end information.

When done, click "OK." The snippet is now in the folder. Anytime you double-click it, the start/end information will be inserted into your code -- either around highlighted text, or at the point of the cursor, if nothing was highlighted.

When you're working with a string of code -- for example, a long formatting line, it's a good idea to give it a CTRL-C (copy) before you start to add the snippet. That way you can paste the start info in place in the snippet window.

You also want to think about how you like your code to look as you design your snippet. Space it out, add line breaks, and so on, as necessary, so that the snippet produces the exact same kind of code you write day in and day out.

Better with Each Rev
In the 3.0 release of HomeSite, the snippets tree wasn't arranged alphabetically. In the 3.01 upgrade, the tree is alphabetical. As you begin to use more folders of snippets, you may wish you could rearrange them at will -- that way you could put the folders you're working with at any given time in the most convenient section. That's not possible, but maybe someday. My other maybe someday is the ability to create subfolders within snippet folders. For example, rather than having "E Business April," "E Business May," "E Business June," and so on, I'd like to have "E Business," and have a series of sub-folders within.

In the interim, I'm a content snippets user. I'm a serious coder, and I code by hand. The fact that I use HomeSite and am smart enough to take advantage of time-saving features like snippets doesn't make me less of a coder. Smart coders, today, realize the benefit of customizing their code, creating reusable pieces where possible, and streamlining the processes involved in any given site. Snippets are just one of the HomeSite perks, and the more you use them, the more you'll wonder how you ever did it without them.

Amy Cowen is a Web developer and a freelance contributor to the Allaire DevCenter

Copyright; Hewlett-Packard Company, 1998.
Presented with permission from HP E Business Magazine July 1998 / Issue #21 / E Talks Tech