While I’m really loving Dreamweaver CS5 and all of its new features, it’s funny that there are so many features that I’ve just taken for granted for too long. In fact, if you’re like me, you’ve even begun to forget features – only to “rediscover” them later! The Snippet panel is one such feature.

At a recent conference, I had the chance to ask a former Dreamweaver user why he’d begun using Coda instead. One of the reasons he cited was Coda’s snippets feature (called Clips in Coda). I couldn’t help but laugh – and point out that Dreamweaver not only has a snippets panel, it’s been in the program for over 10 years!

Used properly, the Snippets panel becomes one of Dreamweaver’s most productivity-enhancing features. Let’s take a closer look…

Depending upon your current workspace layout, the Snippets panel may or may not be visible. The easiest way to access it (without clicking through the various panel groups) is simply to use the Window>Snippets command. By default, Dreamweaver comes with 8 predefined folders of snippets, providing various pieces of functionality. But honestly, 7 of these are completely useless unless you are an absolute noob. The 1 folder that I actually have found a use for is the Javascript folder. There are actually some really useful snippets in there. For example, I had a recent project that needed a random image displayed. Of course, that meant that I needed a random number to be generated to pick the lucky image from my array. I could have done this with PHP, but wanted to offload the task for client-side processing. And, guess what? There’s a random number script right there in the folder.

I do most of my Javascripting these days with jQuery. And, anyone who uses jQuery will tell you how quickly they tire of writing “$(document).ready(function () {…});” Of course, before you even get that far, you’ve got to write the <script> block. After about the 4313th time of writing it myself, I “remembered” the Snippets panel. Simply write out the desired code once and then highlight it in the Code View. In the Snippets panel, select the desired folder (or create a new folder) to save the new snippet into, then click the new Snippet button at the bottom of the panel.

The code which you highlighted is copied into the dialog automatically. All you need to do is give the new Snippet a name, and decide how you want the snippet applied. You have two choices, you can either wrap code around a selected element (in this case, you would need to write or copy/paste some additional code into the Insert After field), or chose the Insert Block option to simply insert the block of code in the current cursor location.

Now, the next time you need it, you can simply double click the snippet in the Snippet Panel – or, even better, use a keyboard shortcut!

Simply choose the Keyboard Shortcuts command from the Dreamweaver menu on the Mac or the Help menu on Windows (I believe – sorry, I’m a Mac guy). You’ll need to duplicate the standard keyboard shortcut set. Once you’ve done this, you can choose Snippets from the Commands drop-down menu.

Select your newly created snippet, and then simply press the keys that you want to use as the keyboard shortcut. If you accidentally chose a key combination that is already assigned to a command, you’ll be warned and have the option to either choose a new combination, or wipe out the shortcut on the other command and assign it to your new snippet.

Now, all I have to do is use the keyboard shortcut to insert my script block which also contains my initial jQuery code. The biggest challenge now, is simply remembering all of your new shortcuts! I hope this helps you become a bit more productive…