[Original article published on DevLounge - please post comments there]
When you unpack your shiny new version of Rails and generate your first Ajax link, you are using the Prototype library. It’s beautiful to use. It adds many Rails-like constructs into the Javajscript language, e.g. the each method to iterate a closure over an array. Sexy stuff.
But the following effect isn’t done using Prototype:
It was done in a few lines of Javascript using the jQuery library [1].
$(".tick").hover(function() {
$(this).removeClass("tick-off").addClass("tick-on").announceButton(this)
}, function() {
$(this).removeClass("tick-on").addClass("tick-off");
});
Prototype provides a comprehensive library of base classes, such as Element and Hash, where as jQuery is fundamentally different. It provides just one entity – the jQuery object. This is created using the familiar $ function and represents a collection of DOM nodes, rather than just one.
The jQuery object is then extended and extended and extended with all the functionality you need – scriptaculous-like effects, Ajax calls, prototype-like manipulations, etc. JQuery plugins
Yehuda Katz – author of autoDB – the dynamic admin console for Rails apps – has his feet deep in jQuery land as well. He manages the Visual JQuery documentation, and recently wrote an article comparing the philosophies of Prototype and JQuery, to help people understand how they are different.
The core problem for Rails developers who might like to try out jQuery is that it eventually conflicts with the prototype library when you start to use Rail’s “in-built” helpers for prototype.
But perhaps you do not need to use these helpers, as an increasing number of jQuery plugins start to provide more and more elegant client-side functionality. For example, an InPlaceEditor extension, and many others.
Want something truly pretty developed using jQuery – how about the planets revolving around the sun?
Work is also underway to integrate jQuery into Rails, including its own set of helpers, code named JQuails.
Many Rails developers might not be familiar with the abilities of alternative Javascript libraries as they get prototype/scriptaculous embedded for free. Yet it would be wise for all developers to be aware and competent in multiple frameworks, so that the best tools for each job can be selected. There is certainly some momentum behind jQuery in the wider development community. To Rails developers I say, Keep a Look Out!
[1] The Hover Demo Script was written as pure Javascript to make it easy to download. Firstly it disables the static image (for RSS feed and non-JS environments), and then creates the DIVs for the effect. The hover effect is then setup by applying the hover function to all elements of the class tick. The two functions we pass it perform the CSS class manipulation that gives the effect. Note the use of chain calls that make the syntax so attractive.
Note also that we’ve added a custom function to the jQuery object – announceButton. It assumes that only one button is active at a time, uses this[0] to determine which one it is. The function then returns the jQuery object (stored as this) to allow the standard method chaining to continue.
While other people in the world have been doing real work, I’ve been on maternity leave. Thus in spare time, I’ve been cooking up something much more fun…
Today, you get to see a magic trick. No code to download, no brain cells to engage. Its Sunday after all. A day of rest, BBQs, beer, football, and magic tricks. Everyone knows that.
But I can’t show you the trick here in your feed reader… the lighting is terrible. Jump to my site for the live magic show itself.
…pausing…
Ok, at the top of the screen… I introduce to you the Magic Announcements. They are just brilliant, and good looking to boot.
Once you’ve read each one, you click on them to make them go away and they will never return. Once you’ve read the announcement of verson 0.7.1 of Dr Nic’s Magic Models, you will never see another announcement until a new version is released (be it 0.7.2, 0.8.0, or 1.0.0, etc). Nod your head with me, this is cool.
When you get your hands on this, it will be a pure Javascript install into any page (or domain of pages such as a blog). It will fetch announcements AND version change information from anywhere on the web, not just the presentation site. For example, the version information for the two projects are being retrieved from the project home pages themselves. This way, I never have to modify my blog to enter new announcements or versions: I just update the relevant data at the relevant place.
How cool is this? Imagine if you could plug the Magic Announcements directly into RubyForge or SourceForge, etc, and whenever you released a new version of your code to *Forge, your blog automatically started announcing it to your readers! Keep nodding, sexy, yes.
I’m still writing up the install/usage docco for it, but I hope to release it within a day or two.
But to give you some preparation time, for each project you want to provide announcements for, you will need to create files that look like this:
MagicAnnouncement.show('magicmodels', '0.7.1');
If you want to provide generic site announcements, like “Welcome to my website”, then it will look like this:
MagicAnnouncement.show('general_notes', 1,
"Very rarely, you\'ll learn something here. Mostly, you'll just be entertained by the programming magic.",
"<strong>Welcome to Dr Nic's Magic Castle of Programming Mystery</strong>");
In both cases, the 2nd argument is the announcement version number. The 3rd is an additional description (useful for version announcements and site announcements), and the 4th is for the header. You’ll normally want the header to be generated for you for version announcements, as per the Magic Models and Composite Keys announcements above.
Bonus: want to see the announcements again? Turn on the Debug Controller…
There isn’t much connecting your open source projects – written in one language and possibly stored on a SourceForge/RubyForge server – to your blog – written in some other language and stored on a different server. Pity.
Sure, you can list your available projects/gems/plugins/libraries on your sidebar, and that’s great for new visitors but what about the old warhorses? What about the people who actually use your code? It would would be snazzy to inform them if a new version of your projects was available.
Sure you can spam your entire subscription list about every minor update. And during the lean weeks, you might just do that so people know you’re alive. But you’re a professional, and you want something cool. Something automatic and, dare I say it, magical.
Today, we’ll just do automatic. Tomorrow, soon maybe, we’ll all share a newer, improved magical version! Kazzam!
If you look on the sidebar of my site –
http://drnicwilliams.com – you’ll see the dubiously short list of my projects – Composite Primary Keys and Dr Nic’s Magic Models. Your keen eyesite will notice version numbers next to them. On the assumption I’ll change the site one day, here is a screen shot…
The version numbers are not stored at http://drnicwilliams.com – they are both stored at their respective websites: http://compositekeys.rubyforge.org and http://magicmodels.rubyforge.org. This is the super best part – once I start a new project and add it to the list on the sidebar, I never need to touch the blog templates again. Automatic. Almost magical.
Tourists and weary travellers can check if a new version of any project is available whenever they visit the site. If they don’t visit the site because they use feed readers, then now they have a reason to visit the site. Weird logic. Look, the next release of this idea will be so super cool that all your readers will just HAVE to come to your site. I promise. Perhaps you can flog some advertising. Anyway, your mother will be impressed.
How do I get sweet Live Version Numbering love for my projects?
What follows below will work for your 100k line mega-framework down to your 10 line Rails plugin. As long as you can create and modify one file on your project’s website.
Let’s call that file version.js, and give it the following innards:
var myproject_version = "0.7.1";
document.write(" - " + myproject_version);
This is a small Javascript program that you will run within your blog to generate the version number. Its separated on to two lines so that it will be super easy for you to change the version number whenever you need to in the future.
Let’s say you’ve saved this file at the web address: http://www.myproject.org/version.js
Now, modify your blog to include your homebrew wizardry. Go to the templates, and edit the sidebar, or wherever you already have your projects listed. NOTE: if you currently have the projects generated for you from a blog list (like in WordPress) then you’ll need to stop using the list generator, and hand craft the html yourself. Be a man, its only one time.
For me, my original html for the two projects was:
<li><h2>Open Source Projects</h2>
<ul>
<li><a href="http://compositekeys.rubyforge.org">Composite Primary Keys</a></li>
<li><a href="http://magicmodels.rubyforge.org">Dr Nic's Magic Models</a></li>
</ul>
</li>
To get the Live Version Numbers working make the following changes:
<li><h2>Open Source Projects</h2>
<ul>
<li><a href="http://compositekeys.rubyforge.org">Composite Primary Keys</a><script src="http://compositekeys.rubyforge.org/version.js" type="text/javascript"></script></li>
<li><a href="http://magicmodels.rubyforge.org">Dr Nic's Magic Models</a><script src="http://magicmodels.rubyforge.org/version.js" type="text/javascript"></script></li>
</ul>
</li>
Let’s call this Cross-Site Scripting; other people do. If the javascript wasn’t coming from a known site – your project site – it’d be considered a security problem.
So now you have Live Version Numbers working, what do you do if you release a new version of one of your projects? You change the version number in the version.js file. You score extra points if your release mechanism can automatically update this value for you.
The future of Live Version Numbers – the Magic Edition
What your readers really want is an “in your face” notification or dropdown box if they need to know about a new version. Yes you could do a dedicated RSS feed instead/as well, but we’re trying to impress people here. RSS isn’t impressing anyone: if they understand it, they’re not impressed; if they don’t understand it, they’re not impressed.
So, the future version will include cookie support and magical information boxes to inform each individual visitor about changes to projects. This will definitely be magical. Your mother will know her school fees did some good.
