Archive for September, 2009

How Self-Executing Anonymous Functions Work

September 24th, 2009

In my recent post on creating a jQueryUI widget, I referenced the concept of self-executing anonymous functions. I've actually had a few questions come up at the office lately about how they work, so I figured turning it into a blog post might not be a bad idea. It's an important concept in Javascript many don't know about. Others know how to use them, but don't really understand how or why they work. Today I'll cover step-by-step how to go from a traditional function to a self-executing anonymous function; hopefully it will be clear at the end how these things work.
» Read more: How Self-Executing Anonymous Functions Work

View Comments »

Posted in Development

Tags:

Create a Basic jQueryUI Carousel Widget

September 17th, 2009

One of the topics that was of great interest at #jqcon was jQueryUI and it's impressive widget library.  What didn't receive as much attention was how exactly to go about creating widgets that are compatible with jQueryUI.  In this first of a series of articles in jQueryUI development, we'll cover the basics of creating a simple jQueryUI widget.  In future articles, we'll look at how to pair widgets together using the Publisher / Subscriber (pub/sub) pattern.

This carousel is probably not quite robust enough to be deployed to production and I urge you to avoid copying and pasting this code into your live site. This basic carousel aims to teach you how to build one yourself as well as how to build a jQueryUI widget.

Create the Basic HTML Markup

To begin, we need a basic page and some photos thumbnails to work with. The thumbnails, as you'll see later, can be any size you choose and our carousel will expand to fit them. Note especially that we're only including some basic shell markup.  There are a few good reasons for this decision: First, it keeps our basic document clean and free of extraneous markup. Second, it is far less work for people implementing our widget—and fewer potential points of error in their process.

<div id="slide">
    <div>
         <img src="img/carousel/0_10.jpg" width="78" height="29" alt="" />
    </div>
    <div>
         <img src="img/carousel/0_11.jpg" width="78" height="58" alt="" />
    </div>
    <div>
         <img src="img/carousel/1_6.jpg" width="78" height="58" alt="" />
    </div>
    <div>
         <img src="img/carousel/1_4.jpg" width="78" height="58" alt="" />
    </div>
    <div>
         <img src="img/carousel/0_9.jpg" width="78" height="58" alt="" />
    </div>
</div>

For demonstration purposes, I've chosen the Cupertino theme available for download from the jQueryUI ThemeRoller application. You can choose any theme you desire—or create your own. Also, you can see I've created a reference to a  carousel.js file. We'll create this file as we continue.

Create the basic framework of a jQueryUI plugin

Now that we have our basic structure in place for the carousel, we can begin to create the javascript that will control the animation and interaction. jQueryUI provides a great construct called $.widget() that will encapsulate all of the functionality of the widget within a single namespace and construct. Let's start by creating a basic widget:

» Read more: Create a Basic jQueryUI Carousel Widget

View Comments »

Posted in Development

Tags:

Collected (abridged) thoughts on #jqcon

September 14th, 2009

I spent September 11-14 in Boston for jQuery Conference 2009.  For $150, this conference was probably the best value I've seen in a conference.  Packed with great speakers on great topics, it was more than I was expecting.

I spent most of my time tweeting the event using the #jQCon tag, but I wanted to collect some thought here in a slightly more robust way than I could using Twitter.  Here it goes:

  • jQuery 1.3.3 looks really sick; John and the whole core team have done some fantastic work.  I really appreciate that these guys are really committed to making jQuery competitive in the running for "fastest" JS library.  A 3.5x speed increase overall in 1.3.3 is nothing to sneeze at.  I can't wait for the release!
  • There are a lot more implications selectors being parsed right-to-left in jQuery than you might imagine.  As always, specificity plays a big role; but not necessarily in intuitive ways.  I'll probably write a more full post on this topic as my mind really got swirling around this one.
  • People are totally stoked about jQueryUI and jQueryUI Labs.  That's a good thing as I see absolutely huge potential for jQueryUI and I've been developing some widgets that I plan to release on github relatively soon.
  • The guys from JavascriptMVC are interesting characters.  And they get huge props for handling an attendee asking them to "fast forward" their presentation in a humorous way.
  • ARIA is fantastic technology that people should really, really be looking into.  An interesting project would be to make all jQueryUI widgets ARIA-compliant.
  • People who use and preach jQuery love Event Delegation.  I was in really good company with these guys and I was happy to see it getting so much press.  jQuery's $.live() handles delegation for you which is just slick.
  • TestSwarm, as I anticipated, is going to rock. Javascript testing got a lot of press too and I'm really stoked that it did.  I was a little disappointed that there wasn't much coverage of testing frameworks (not even qunit)
  • Steve Souders is even more passionate about front-end performance than I expected him to be.  Also, big ups for doing his presentation on less sleep than I had the night before.
  • There's a lot of talk about how to organize your code with jQuery.  It seems that the fact that jQuery doesn't enforce some type of structure is both a blessing and a curse.  I've often said that for ATC, a big barrier has been that prototype's class functionality gives us something that we haven't been able to replace in jQuery.  The good news is that a lot of people are thinking about it and there are some great solutions out there.

I also have some thoughts about the social aspects of the conference

  • The question I was asked most:  "how about the ratio?"  It had to be at least 25:1; but it could have been 30:1
  • There's an iPhone version of the drinking game "Circle of Death" out there.  That made for every bit as much fun as you might imagine.
  • After enough adult beverages, John Resig's "smooth-jazz" voice does lighten a bit. :)
  • It was great to find so many people there who were truly social.  I was expecting to have a harder time getting people to open up--but there were others there that shared my mindset.
  • Off the top of my head (and if you're not on the list, it's because I simply didn't think about it very long or we only talked briefly) it was great to meet and spend time with @bobholt, @jeresig, @voodootikigod, @rmurphey, @snookca, @bitofgrace, @bpartridge, @binary42, @Cowboy, @defunkt, @dainbrain
  • I still wish I'd met even more.

Great time; more to come from me on the conference.  But that's an early round-up!

For those that weren't there, @bobholt set up a site to aggregate the slides.  

View Comments »

Posted in briancrescimanno.com