If it's hard to see the code in the video, I've pasted the relevant Javascript below.

I felt like the example I created for the original post wasn't very exciting, so I created one better. This demo shows how it could look if you used Taggable to save tags on the server as the users interacts with items.

Enjoy!

Summary for the busy

• Allows elements to become "tags" and "taggable"
• Easily customizable actions on tag / untag
• Download here (plugin only)
• Download here (with examples)
• Fork it here

Motivation

I've really enjoyed using jQuery over the last few years. It's been quite wonderful really. Outside of the core being easy to use and very solid, the plugins available really make jQuery sizzle.

So I thought I'd take a crack at writing my very own plugin. My main goal was to imitate the tagging interface you've seen in some desktop UIs, with Evernote being my main inspiration.

Lessons Learned

A few things I learned while writing the plugin:

1. Writing a jQuery plugin is not that hard
2. Developing jQuery plugins is  really really fun (no really, it is)

Details

The plugin requires jQuery and jQuery UI. Once you have the jQuery requirements and the plugin file, using the plugin is simple. Just call .taggable() on the element that you want to have tags attached to. There are various ways to customize it beyond this of course. For those details, check out the README.

Other Tag-ish Plugins Out There

I fought the urge to look at existing work, mainly so that I could learn as much from tripping over my own two feet as possible. Upon writing this post, I decided 'why not' and Googled around for "jquery plugins tag" and other permutations. I was thrilled to see that it doesn't look like there are any other plugins that do quite this. All of the other options turn input into tags or create tag clouds.

About WikiText

WikText is a structured language that is easily readable by humans and is pretty easy to parse. As an example this is how you write a h1:

h1. Main heading

Examples

It really couldn't be any more simple than that. Similar markup exists for a larger part of HTML as well. Here are a few more examples:

*this creates bold text*
__italic text__
#Numbered list item 1
#Numbered list item 2
*Bulleted list item
bc. Block Code in here

An easy to use markup language isn't that interesting on it's own IMO, but when it's natively supported by your tooling things get a lot more useful.

So typing something like this in Eclipse:

Generates something like this:

Eclipse is very happy to convert your WikiText to HTML, DocBook and Eclipse help files.

Even outside of Eclipse, I find this useful as many sites will parse your .textile files. Outside of wiki sites, I think the most notable would be git hub. If you have a README.textile they will parse it and generate the HTML for your project page based off of it.

The Eclipse documentation here talks more about the capabilities but I think the above are the most important (especially if your like me and didn't know about it).

After finding about the Open Calais service from Thompson Reuters I was pretty excited. I've created a custom tag that sends data to the service which in turn returns the resulting semantic data.

The tag is pretty easy to use. Just surround the text you want to parse with the <cf_calais>  tags and off you go. The default variable returned is cfcalais. You can override this by setting the "name" attribute.

Download the tag and code here: http://github.com/jonDowdle/cfCalais

I hope you find this tag useful and let's make Coldfusion an integral part of building Web 3.0!

Good news, it's an easy fix. You'll soon have a nice high-resolution icon for both your dock icons and Eclipse.app.

1. Save the Coldfusion PNG from Wikipedia (http://en.wikipedia.org/wiki/File:ColdFusion_icon.png) to your hard drive
2. Convert the PNG from step 1 to an ICNS and save back to your hard drive. (I used iConvert http://iconverticons.com/)
3. Open /Applications/eclipse (or wherever you installed Eclipse)
4. Right click on Eclipse, select Show Package Contents
5. Go to Contents > Resources
6. [Optional] Rename Eclipse.icns to Eclipse_old.icns
7. Copy Eclipse.icns from step 1 into the Resources folder
8. Launch Eclipse
9. Enjoy.

You should then see something like this:

The basic usage is pretty similar to another oh-so familiar tag:

<cf_yql>
Select * from flickr.photos.recent
</cf_yql>

<cfloop query="cfyql">
 <!---Format of the static urls to flickr images--->
 <cfoutput>
   <img src="http://farm#farm#.static.flickr.com/#server#/#id#_#secret#_s_d.jpg" />
 </cfoutput>
</cfloop>

Creates...

As you can see, the format is pretty similar to cfquery. The table name "flickr.photos.recent" is table supported by the YQL (for a full listing of available tables see the footnotes).

Here is another example using an RSS feed:

<cf_yql format="query">
select * from rss where url='http://rss.news.yahoo.com/rss/topstories'
limit 5
</cf_yql>

<cfloop query="cfyql">
 <li>
 <cfoutput><a href="#link#">#title# &mdash; #Source# &mdash; #pubdate#</a>
 <div>#description#</div>
 </cfoutput>
 </li>
</cfloop>
</ul>

Creates...

In the future, I'd like to take this further by using YQL's newly added 'execute' functionality.

The project is hosted on github. Feel free to fork me or download the code here.

Edit: Yes, I know this looks like Ray Camden's cf_yql example (http://www.coldfusionjedi.com/index.cfm/2009/9/10/Yahoo-Query-Language) posted earlier today (9/10/09). I had written this post originally on 8/28 and just never got around to publishing it. Ray just lit a fire under my arse by posting his, so thanks Ray!

Select pKey, dataCol
From myTable
Where length(dataCol) != char_length(dataCol)

To my surprise this query didn't work. After mulling it over in my mind, I tried a few debugging statements such as:

Select pKey,
  dataCol,
  length(dataCol),
  char_length(dataCol)
From myTable

That only reaffirmed that all return values of the char_length() were equal to the length() results.

Then it hit me, I (or rather the database) was using the latin1 character set. So I quickly cast the data into utf8 and it worked! Below is the resulting query.

Select pKey, dataCol
From myTable
Where length( cast(dataCol using utf8) ) !=
        char_length( cast(dataCol using utf8) )

For a little Saturday fun, I set out to transform Coldfusion code using XSLT. It didn't take long before I ran into some issues.

The first problem I ran into was that most Coldfusion code doesn't have a root element (not to mention it isn't well formed XML in any sense).  You might be thinking "Well CFCs have a root node" and you'd be right. So I tried to transform a really simple CFC and I was somewhat successful.

The only caveat is that the use of a few almost all tags won't work. For example, <cfreturn foo /> isn't proper XML and Saxon complains. So at this point, this is pretty much a worthless exercise (see note above). Either way I ended up with something that did work (in the functional sense, not the useful sense). See the code below if you're interested in what the XSLT looks like.

XSLT Coldfusion

Very Simple CFC

Transformed Output

One of (the many) reasons IE sucks is that it doesn't have an equivalent to Firebug*. Until that glorious day arrives when it does, those calls can render the JS non-functioning. If you have ever seen "console is not defined" you're getting warmer. So to 'neutralize' these calls in any other browser not cool enough to have Firebug all you need is these 3 lines. Don't worry, it shouldn't affect Firefox w/ Firebug installed.

if( typeof(console) == "undefined"){
    console = new Object();
    console.debug = function(str){ alert(str); }
}

* Note: Before anyone yells that there is Firebug Lite, I know that. It still doesn't rule nearly as much. Get Firebug Lite here **

** Note, you don't have to use alert(), actually I implore you not to (it's really annoying)