Web Dev .NET: Differences Between jQuery .bind() vs .live() vs .delegate() vs .on().

With jQuery 1.7 came on() and went live(). live() was used and abused by many, so if you haven’t kept up with its deprecation, this article is for you.

Document are becoming even more dynamic, so managing your events can become a true test of your planning and logic skills. Unfortunately it’s also somewhat common to take the easy way out and end up with a situation in which you’re not careful with binding events. That leads to a degraded experience and slow running pages, something we want to avoid at all cost.

Elijah Manor is a super smart guy, and he’s put together an extremely straightforward piece outlining the difference between the various methods of binding in jQuery. Definitely set aside some time to give it a read.

Advertise here with BSA

This is quite impressive. Based on Lettering.js, Arctext.js facilitates curving the path of text along an arc. Check out the demo for some nice examples.

Advertise here with BSA

Yesterday seems to have been the day of project releases. scrollorama is a neat little piece of work that helps you better utilize “scrolly stuff”. The demo page outlines just a few things you can do when combined with other great things like lettering.js.

Scroll-based behavior changes, when used properly (read: responsibly), can really be an integral piece of your UX.

Advertise here with BSA

This is a very interesting project. Responsive design will continue to be a steady topic of conversation in 2012 and tools like this help propel us to talking about it applicably.

Without going into too much detail about responsive design itself, I’d like to point out what Response JS does differently. Their spin is to be a mobile-first responsive design implementation. By piggybacking jQuery you’re able to be much more aggressive in optimizing for the mobile experience in a number of ways.

1. Serve resolution-optimized images
2. Swap code blocks based on breakpoints
3. Methods and hooks to trigger responsive actions

There’s definitely some cool stuff to check out, and with the Web moving to an increasingly JavaScript-dependent environment, we might see more implementations along these lines to make responsive designs more mobile-focused.

As with all good things, there are drawbacks however. Being this aggressive can sometimes take away from the core purpose of being a single document with ‘conditional’ styling that responds to the environment at hand. I’m not saying this direction is a bad thing, in fact I really like that it keeps the idea of progressive enhancement in mind with all it does.

Related: Nathan Smith’s Adapt.js can’t go without mention here.

Advertise here with BSA

jQuery’s .live() caught on like wildfire, and for good reason. Unfortunately, as with most good things, it got abused. It was misused to the extent of the jQuery team deprecating it as of version 1.7 (currently at 1.7.1 at the time of this posting) and replacing it with .on().

Along with an explanation of the new function, this article explains very well some other aspects to the changes in jQuery 1.7+ that you should keep in mind and in practice.

Advertise here with BSA

jQuery sometimes gets knocked for it’s popularity, as many things do once a certain degree of popularity is reached. One of the most common digs I hear with jQuery surrounds filesize. File size is our number one enemy as front end developers (insert IE joke here) and jQuery has definitely grown over time.

I’m one of those people that tends to stray away from things when they get super duper popular. The “market” tends to become utterly flooded with people trying to get the most bang for their buck which results in lots of redundancy and lots of ridiculousness.

jQuery has avoided that for me. I still to this day love working with jQuery, and it’s popularity and activity has turned it into one of my most valuable tools. The people behind it are smarter than I could ever hope to be and it thrills me to hear that the focus for subsequent versions continue to refine based on the needs of the community and the users of jQuery (read: everyone on the Internet and the Internet herself).

There are lots of good things to look forward to, and this blog post about upcoming changes should serve as a reminder that although jQuery has become extremely prevalent, that’s no excuse to get lazy with keeping up with changes to the code base.

Advertise here with BSA

I’ve recently had the pleasure of reading Master Mobile Web Apps with jQuery Mobile by Matt Doyle for Elated. Admittedly, this has been my first in-depth experience with jQuery Mobile and I’m beyond inspired to start work on a mobile Web application in one form or another just as soon as humanly possible.

jQuery Mobile is an optimized JavaScript framework that sits on top of jQuery and enhances the environment in the mobile context. It builds upon the foundation provided by jQuery by providing a set of encompassing functions that make creating a mobile Web app nearly trivial.

With Master Mobile Web Apps with jQuery Mobile being my first experience with jQuery Mobile, I need to take a minute to explain how truly impressed I am with the work done so far by the jQuery Mobile team. From start to finish I was increasingly impressed with the breadth and depth of planning that must have gone into the features of jQuery Mobile. With just a few additions to your HTML5, you can have a fully functioning mobile optimized version of your app in a very short amount of time.

Master Mobile Web Apps with jQuery Mobile is an ambitious project, with jQuery Mobile being at Beta 3 at the time of this writing, and at Beta 2 at the time of it’s publishing. The great thing here is that the book is an eBook, so updates will be made available as circumstances change over time. The book covers the major conventions of jQuery Mobile, and I would consider the information to be extremely reliable and unlikely to change in any sort of debilitating degree between now and jQuery Mobile Final.

Book content

This book is a great technical resource, reference piece, and walkthrough of jQuery Mobile. Code samples and documentation are littered throughout, and the author goes into just enough context when it comes to extraneous details about implementation.

The book is broken up into three main sections followed by an elaborate set of appendices. Part I is a couple of chapters on the introduction and explanation of jQuery Mobile and some very basic usage of the framework. Part II gets into a lot more detail through seven chapters of jQuery Mobile Essentials. In these chapters a number of big picture ideas are explained including the concept of ‘pages’ in jQuery Mobile, button creation and usage, toolbars, dialogs, forms, list views, and content formatting. The third part of the book focuses on theming in jQuery Mobile, it’s API, and covers the complete Web app example “Task Tango”, a well rounded mobile task manager.

I couldn’t have asked for the book to be organized in a better way. I can usually guess what’s going to be covered next throughout a book, but in this case I was so surprised by the coverage of jQuery Mobile itself I was consistently thinking about the impressiveness of the framework itself. I recall consistently thinking ‘whoa, they even included that?’ as I read through a number of sections in the book.

In true jQuery fashion, jQuery Mobile has thought of so many things when it comes to customization. A ton of really smart defaults have been set, but customization has been left completely open, and you can override pretty much every aspect of the standard implementation. I can only hope we begin to see more and more Web applications follow the conventions set by jQuery Mobile though, there is a lot of really great stuff within.

Overall reaction

I’m thrilled to have had the opportunity to read Master Mobile Web Apps with jQuery Mobile by Matt Doyle for a number of reasons. First and foremost, it’s a really elaborate manual for jQuery Mobile. I’ll be using it repeatedly as a reference in tandem with the jQuery Mobile Docs.

The book is full of code examples, including a fully documented to-do application built on PHP, MySQL and jQuery Mobile. That alone provides an extremely valuable first-hand look at the implementation and usage of jQuery Mobile in a targeted fashion. I try to learn by example as much as possible, so capping off the end of the book with a fully functional Web app was a genius move in my opinion.

I highly recommend Master Mobile Web Apps with jQuery Mobile by Matt Doyle if you’re looking for an in-depth look at the ins and outs of jQuery Mobile, even if you’ve worked with it before.

Giveaway details

Matt Doyle has been super generous in providing two copies of Master Mobile Web Apps with jQuery Mobile to raffle off here on Monday By Noon. Since it’s an eBook, there are no geographical limitations in place, so anyone can enter! The rules for entry are pretty simple: retweet the announcement for the giveaway and link to it in a comment below explaining your experience with jQuery Mobile so far and what you’d like to do with it after reading the book should you win.

You’re limited to one retweet/comment combination and entries will be closed October 3rd, 2011 at 11:59am ET. Good luck!

Advertise here with BSA

I like using well built things as inspiration for work down the line. Apprise is one of those cases.

Advertise here with BSA

You’ve probably seen David DeSandro‘s (@desandro) work many times, but perhaps you haven’t known it to be his. He’s kind of a magician. He’s one of those super creative intelligent guys always pushing the limits and making a whole bunch of people say “wow.”

I’ll go out on a limb and say that he’s probably most famous for jQuery Masonry, which is a layout plugin for jQuery. It’s quite nice, and it’s been used on more sites than I could count. His latest project is the successor(?) to Masonry, and it’s called Isotope. It’s definitely Masonry to the next level, and the screencast is a great illustration of how far it’s come.

Keep your eyes peeled, sounds like it’s being released quite soon.

Advertise here with BSA

This is super super sweet. Creating elements the ‘old’ way did feel a little wrong, but this is all sorts of right (from the article):

$('<div />', {
  'id': 'charles',
  'click': function(e){
    e.preventDefault();
    $(this).animate({opacity: 0.7});
  }
});

So much nicer, and more… programmatic. I like where this is going. To be implemented in my processes immediately. More in the docs.

Advertise here with BSA