Learning jQuery 1.3 Review

Learning jQuery 1.3 Book CoverI recently finished reading Learning jQuery 1.3 written by Jonathan Chaffer and Karl Swedberg, and while this version is merely a rewrite of an earlier edition, my review will be based on the book as a whole and will not compare differences. If you’re looking looking for that, try this review.

Being an intermediate jQuery user, I found the book a bit too basic. It seems to be written mostly for beginners. With that being said, it is an excellent book for beginners. I was really impressed with the quality of the examples. The authors always keep in mind progressive enhancement and graceful degradation. They even mention event delegation! Those are a few topics I wish I knew about when I first started JavaScript development. They are good habits to get into.

Though you should probably have an understanding of JavaScript before learning jQuery, there is also some good material that applies to general JavaScript authoring, such as closures. I found the description of events pretty comprehensive as well.

Anyone will find useful the list of resources and plugins at the end of the book. Something missing from the jQuery plugin repository is a way to filter through bad plugins to find the good ones. The list of recommended plugins in this book is a good place to start.

If you’re a jQuery beginner, I highly recommend this book. If not, you might want to pass it up for something more advanced. Here is a sample chapter on effects if you’d like to take a look

Valerie 0.6

I’m getting ready to release Valerie 0.6 (form generation/validation/filtering) and I could use some help testing it.

To get the latest code, check out trunk with svn: http://valerie.googlecode.com/svn/trunk/

None of the documentation is up to date in the docs folder, but the inline documentation is. There’s also a working demo to take a look at.

I’m particularly looking for feedback on ease of use. Let me know what you think!

Related to a previous post, you can view docs generated from the inline documentation, but note that this is a work in progress and the location will definitely change once it’s ready to be released.

JibberBook 2.3 Released

JibberBook 2.3 is out and contains a few bug fixes for xml storage and additional options, mostly for combating spam. Read the groups message for more information or download it.

Enjoy!

Generated Docs with Code Illuminated

I really like the documentation generated by Code Illuminated, but I don’t like the inline documentation format, which has to look something like this:

// ** {{{ App.addMenuItem() }}} **
//
// Adds a menu item to the {{{element}}} DOM node showing the {{{label}}}
// text.  If {{{urlOrCallback}}} is an URL, choosing the item causes a new
// window to be opened with that URL.  If it's a function, it will be called
// when choosing the item.
//
// If the node does not have a menu yet, one will be created.

I think this renders the inline documentation unreadable. Natural Docs has a lot nicer format that would look like this:

/*
  Function: App.addMenu

  Adds a menu item to the element DOM node showing the label
  text.  If urlOrCallback is an URL, choosing the item causes a new
  window to be opened with that URL.  If it's a function, it will be called
  when choosing the item.

  If the node does not have a menu yet, one will be created.
*/

So I took Code Illuminated and made half of it into a PHP script so it wasn’t limited to same-domain ajax calls. I also added a very basic Natural Docs parser and a Markdown parser, code highlighting courtesy of GeSHi, and caching. Here’s a demo. It’s nothing special right now and needs a lot more work. In particular, I need a full-fledged Natural Docs parser in PHP. Anyone have one handy?

Is anyone interested in this? I’ll be using it for JibberBook documentation, but I don’t know if I’ll release it unless there’s an interest in it.

Emenu, a jQuery plugin

I suppose since I’ve given up MooTools, I’d get more familiar with jQuery, which I’ve used primarily for work. And what better way to do that than to port one of my Mootools plugins to jQuery! You can find it in the jQuery plugin repository.

I made it more flexible than the original because now you can use whatever effect you want. There are four custom events that I’ve added, and here are the defaults:

$('#containerId').emenu({
  over: function(event, bg){
    bg.stop().fadeTo(400, 0.5);
  },
  out: function(event, bg){
    bg.stop().fadeTo(400, 1);
  },
  show: function(event, ul, li, width, height){
    ul.css('visibility', 'visible').stop(true).fadeTo(200, 1);
  },
  hide: function(event, ul, li){
    ul.stop(true).fadeTo(200, 0, function(){
      ul.css('visibility', 'hidden');
    });
  }
});

There are three ways to add your own. You can overwrite them like above by passing in your own or you can do $.fn.emenu.defaults.[event] = function(){...}. Plus since they are custom events attached to the container, you can also do $("#containerId").bind('emenu.[event]', function(){...}). Keep in mind this won’t overwrite the defaults unless you unbind them first.

The custom events receive a few arguments worth explaining.The events over and out receive the div element that contains non-menu-related content; show and hide receive the item menu moused over/out and its submenu. Additionally, show receives the height of the menu and the width of the submenu if you’ve used auto-calculation.

There’s a demo and additional options listed on the plugin page.

I think I’ll be working on converting my other scripts to jQuery as well so keep an eye out for them!