This snippet adds placeholders to the mix, shown here in its XML glory:-

<?xml version="1.0" encoding="utf-8"?>
<CodeSnippet 
  Format="1.0.0" 
  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  <Header>
    <Title>Bind jQueryEvent</Title>
    <Author>Paul Alan Taylor</Author>
    <Shortcut>bindJQueryEvent</Shortcut>
    <Description>
      Basic jQuery event bind with selector, 
      event and function shortcuts
    </Description>
    <SnippetTypes>
      <SnippetType>Expansion</SnippetType>
    </SnippetTypes>
  </Header>
  <Snippet>
    <Declarations>
      <Literal>
        <!-- First place holder
             For CSS selector.  

             I have defaulted it to # to assist with
             assigning events with IDs
        -->
        <ID>selector</ID>
        <Default>#</Default>
      </Literal>
      <Literal>
        <!-- Event placeholder.
             The event we're trying to capture

             Defaulted to 'click'
        -->
        <ID>event</ID>
        <Default>click</Default>
      </Literal>
      <Literal>
        <!-- Finally, the function placeholder 
             Where we would expect to place the text

        -->
        <ID>function</ID>
        <Default>/* hook me up */</Default>
      </Literal>
    </Declarations>
    <!--
       Code block is contained in CDATA

       Declarations are expanded by wrapping the ID 
       in dollar signs.

       NB: If you need actually need a literal dollar,
       as in the jQuery dollar sign, use a double
       dollar ($$).

    -->
    <Code Language="JScript">
      <![CDATA[$$('$selector$').bind('$event$', function () { $function$ });
      ]]>
    </Code>
  </Snippet>
</CodeSnippet>

SnippetType

There are two types of snippet, expansion or surrounds-with.   Expansion snippets are inserted at the cursor, while surrounds-with snippets will wrap themselves around a selected piece of text.

<SnippetTypes>
   <SnippetType>Expansion</SnippetType>
</SnippetTypes>

The intention is to be able to create a quick binding before specifying event behaviour, so this is an expansion snippet, as declared in the SnippetType node.

Declarations

The next real section of note the the Declarations node.  This node is used to define tokens that will be recognised and replaced in the code section.

I’ve defined three tokens for this snippet:-

• selector – The CSS selector I’m using to target my elements
• event – The event type I’m looking to capture
• function – The internals of the anonymous function, or the behaviour.

I’ve given selector a default of #, largely because I forget the hashtag when I select by DOM identifier   Also, I’ve given the event token the default type of click.

<Declarations>
  <Literal>
    <ID>selector</ID>
    <Default>#</Default>
  </Literal>
  <Literal>
    <ID>event</ID>
    <Default>click</Default>
  </Literal>
  <Literal>
    <ID>function</ID>
    <Default>/* hook me up */</Default>
   </Literal>
</Declarations>

I have chosen to include the default comment /* hook me up */ as the default for my function token.  If, as I suspect, that soon becomes annoying, I can simply remove the default.  Placeholders do not have to have default values.  Visual Studio will still recognise them as such and allow you to tab to them.  They’re just a little more difficult to spot.

Code

The last important part is of course, the code snippet we want to insert, which lives in the Code element.  The Language attribute specifies what sort of code it is, and is largely used to determine which snippet area ( i.e. My Jscript snippets ) the snippet should be installed to.  The code itself is wrapped a CDATA block, which means that by and large, you can go about your coding business without having to replace characters with special meaning in XML.

Placeholder tokens that have been defined in the Declarations section can be expanded anywhere in the CDATA block by wrapping dollar signs around them.

<Code Language="JScript">
  <![CDATA[$$('$selector$').bind('$event$', function () { $function$ });
  ]]>
</Code>

When the snippet is inserted into the code, each token will be replaced with the default values assigned in Declarations.  They also represent the points

Warning

Be careful with the dollar sign. The snippet engine uses dollar signs as token delimiters,  so if you need a literal dollar, type $$ instead of $.  I have done precisely this when using the $ short-hand for the jQuery method :-

$$('$selector$').bind('$event$', function () { $function$ });

Snippet in action

When running the snippet in VS, ( import primer ), we get the following:-

$('#').bind('click', function () { /* hook me up */ });
// ^         ^                     ^
// Placeholder locations

Upon insertion, the cursor will jump in the first place holder.  You can move between the snippet placeholders by using the tab/shift-tab combination.  The net result is that you only touch the stuff you need to touch, resulting in a big boost in productivity and code accuracy.  I’m really starting to like snippets.

Downloads

• jQuery Event Binder Snippet
• Document ready snippet

Links

• Snippet Good

I have found it particularly handy with Javascript stuff, an area which Visual Studio supports but frankly, is a bit slow on the uptake.  I’m sure that many coders have waited patiently for VS 2010 to decide that, “yes, that is valid Javascript – I shall remove my annoying error highlighting forthwith”.

So a small Christmas present to fellow coders everywhere.  A little document ready snippet for your jQuery needs.

To include in Visual Studio, download and go to Tools ->Code Snippet Manager.

Then click Import on the dialog that pops up.

Navigate to wherever you downloaded your cut-out-and-keep document.ready snippet to and select.  Visual Studio will now ask you where you’d like to keep your snippet.  I chose My JScript Snippets (JScript! – you just won’t let it go, will you Microsoft?).

Click Finish to add the snippet permanently.  Now let’s put this bad boy to use.  Hit a code file where you’d expect to have a bit of Javascript ( .js, .aspx, .ascx ) and right click on the screen.

Choose Insert Snippet.

Navigate into My JScript Snippets -> Document ready snippet.  Click it.

Tada!  One problem solved forever.

Further reading

Of course, Snippets aren’t confined to Javascript. If you want to create your own snippets, take a look at:-

How-To : Create a Visual Studio Code Snippet over at Writings of Urda.

Downloads

Document ready snippet

I had a similar experience this week with Star Wars : The Old Republic.  Being the colossal geek I am, this game has been on pre-order for some time.  A big part of my pre-order decision hinged on Electronic Arts promise of Early Game Access, which to be fair to them, they’ve duly delivered.  That said, the overall experience was patchy.  For starters, I received a lot of email telling me that my time had come, and that I could get on with installing a galaxy far far away onto my PC.  Brilliant, eh?  Not quite.  Upon installing the client, I was informed that “no active subscription existed on the account”.  What?  I put my code in.  It’s showing on the site!  What’s happened to my pre-order and the much desired Early Game Access?  Do I have to buy it again?

With a bit of Googling, I landed on a technical support page and found out that there was nothing wrong; EA were just staggering access to the game, and despite the emails telling me that I was good to go, their software was telling me something else.  Luckily, I’ve seen all this before.  I’m technical, and this stuff happens all too often.  What about everyone else, though?  Mixed messages detract from the user experience, and a bad first experience can become the last experience.  I persevered with the Old Republic because I had actually spent money on it.  I might not have been as industrious in seeking resolution if I’d had a bad experience on a web site being provided for free.

Computer literacy has come a long way since the 1980s, but there are still people out there who are scared of the machines in their homes.  Coders need to remember that.  We might be experts, but not all of our users are.  When something goes wrong, we need to tell our users what has happened in plain English and ideally, what they need to do to resolve it.  Human beings are wonderfully prone to mistakes, and most computer programs are marketed squarely at our species.

Human error is a fact of life.  Coders need to to account for that, and not compound our idiosyncratic tendencies with obscure messages.