jQuery vs Dojo Toolkit vs Prototype vs MooTools

This is a very quick, unthorough rundown of the most popular Javascript frameworks at the time, and why I currently favor jQuery.

I did not make a significant time investment in my investigation, but there were a couple of factors I was interested in:

• I wanted a framework that did not include a faux class-based object framework. Javascript is prototype based and very powerful that way. (I'll write my Javascript in Javascript, thank you.)
• I wanted a framework that imposed minimal littering of the current window's global namespace.
• I wanted a framework that was simple to learn and easy to use.

jQuery best fit the bill. There are no false classes in jQuery; it leaves coding style up to you (not so in Prototype or MooTools). In jQuery, there is minimal littering of the global namespace -- the only exported symbols are jQuery and the optional $. (Again, this is not the case with Prototype and MooTools.) Lastly, jQuery wins hands down on ease of use. You could pick it up in five minutes if you are a seasoned web developer. The Dojo Toolkit looks promising -- I especially like its module packaging framework -- but it will require a more significant time investment than the elegant jQuery.

Here's a closing thought: I would like to see an entirely independent module packaging framework for Javascript. Anyone know of one?

I'm sure that this post will be controversial to some of you MooTools and Prototype zealots. Tell me why I'm wrong! I'd love to hear your take.

Tipjoy post-icon widget for Blogger

After my last post about micropayments (and Tipjoy in particular), I had several inquiries as to how I added the "Tip 25 cents" icon below each blog entry.

It's pretty simple really.  First go to http://tipjoy.com/banners/custom/ to create your custom Tipjoy button. You can then place it anywhere you want on your site and even style it with custom CSS... Or you can forget the default button and CSS and just make your own (like on flyingpizzakitty.com and this website).

My button code looks like this.

<script language="javascript" src="http://tipjoy.com/socnet/widget?username=techhead&url=blog.techhead.biz&message=Thank's%20for%20your%20support!&amount=0.25">script>

And I didn't bother copying the CSS portion because I didn't really want to show the default button. So to avoid showing the button, I wrapped the button code in...

<div style="display:none">...</div>

To add a Tipjoy icon to the bottom of each entry, I wrote a short jQuery script, so you'll need to make sure that jQuery gets loaded sometime prior to the script being executed.

Your blog may be loading jQuery already. If not, add the following to the section of your template or just directly above the icon script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Once you have jQuery available, you can add a "tip reminder" icon to each blog entry by copying the below script either directly into your blog template or by adding an HTML/Javascript Page Element to your Layout.

<script type="text/javascript">
(function($) {
  $(function() {
    $('.hentry').each(function() { // for each blog entry
      var icon = $('<span><a href="javascript:tipjoyOpenLightbox()">Tip 25&#162;</a></span>');
        $('a', icon).css({
          'padding':'1px 5px 5px 22px',
          'background':'url(http://techhead.biz/tipjoy/tipjoystar.gif) no-repeat scroll 0 0'});
      $(this).find('.post-icons').append(icon); // add the Tipjoy icon
    });
  });
})(jQuery);
</script>

And that should do the trick! Of course, you may want to change the figure from "25 cents" to something else. If you do, just remember to change it in both the Tipjoy button script and in the icon script.

If you would like to place an additional tip reminder in the text of your blog post itself, here is another little formula.

<a href="http://tipjoy.com/u/myusername" onclick="if (window.tipjoyOpenLightbox) {tipjoyOpenLightbox();return false} else return true">TEXT OR IMAGE HERE</a>

Speaking of which, if you found this article helpful, please help keep the monkey playing.