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