DogTags ... a Custom Tag experiment in your browser.

Looking to get others to try your latest AJAX hack ??

Try giving them something that's easier to read and even easier to get started with in their own environment.

I've always liked the "custom tags" framework available in server-side scripting languages like ColdFusion and JSP. Let's give that a shot in your local browser using a custom DOM element called "dog" from our new fictitious API called "dogtags" ...

• Import the "library" which will recognize and process our custom tags ....
  
  <script src="http://www.figital.com/dogtagsapi"></script>
  
  
• Let's add a button to fire off the initial event ...
  
  <button onclick="initDogTags( );"> Click To Begin </button>
  
  
  
• Now add our two fictitious dog tags ... both called "fido" but each firing different events ...
  
  <dog name="fido" action="bark">
  
  <dog name="fido" action="appear">
  
  
• And finally to show briefly how this might interact with an existing web page we'll add a traditional DIV tag called "playground" ...
  
  <div id="playground" style="padding:30px;border:1px solid green;width:200px;height:200px;"></div>

You can view the demonstration here at http://www.figital.com/dogtags.

 

Notes:

• I've removed the .js extension from the Javascript library. That's just visual clutter you might not need in a demo.
  
  
• The button I've used to fire our initial events is easily eliminated and fired by default from within the library.
  
  
• The DIV tag I've used for a "playground" can easily be hidden and dropped into your document using Javascript's appendChild method.

So to squeeze the demo down even further we could whittle the example down to just two elements ...

<script src="http://www.figital.com/dogtagsapi"></script>  

<dog name="fido" action="doSomeTricks">

Here's a very cool demo I saw today on Digg.com recreating the DiggSpy.

I'm going to guess there is a large percentage of web users and developers who would love to recreate something similar in their own pages who might be initially scared off by "code" but would be game if adding something easy like a "custom tag" to their own pages ...

<spy feed="http://mysite.com/feed" width="400" height="400" speed="2">

So if you're as excited about the new AJAX UI paradigm as I am and are putting together your own libraries consider experimenting with something like this to make your handiwork spread as far and wide as possible.