selective
June 5th, 2013

Making time to polish and publish the pieces: new jQuery plugins from Apostrophe 2

Tom Boutell
Chief Software Architect

 We've been working hard on Apostrophe 2, our new content management system. In fact, it's already running in production on the Delaware River Waterfront website. (Yes, we'll share a proper case study of that project with you soon.)

And if you're an early adopter who's on fire to experience the benefits of node.js today, you can get hold of Apostrophe 2 today and start hacking away. Your contributions to this open source project are very welcome. More and better documentation is coming, don't let us slow you down! But this post isn't (just) about that. It's about sharing the pieces, and sharing them in their proper shapes.

Since we've been so focused on Apostrophe 2 and the needs of our first client projects built with it, we haven't had much time to ask questions like:'


  • Is this feature really specific to Apostrophe 2, or is it more universal?
  • Could other people and projects benefit?
  • Would we get more feedback on and contributions to this code if it were available separately?
  • Why the heck isn't this feature a jQuery plugin?

But last week, Kerry Gilbert and I ran away to jsconf, where we learned a lot of things and were reminded of many others. Sure, there were lots of technical lessons learned, but for me the most important were about managing and sharing your work.

I didn't attend sessions where speakers directly addressed these things, with the notable exception of Rebecca Murphey's excellent talk "Optimizing for Developer Delight." Mostly I learned or was reminded of them by the vivid examples being set around me by presenters and fellow attendees:


  • There is always time to make it better.
  • There is always time to "refactor" it - to break it up into the right pieces.
  • There is always time to document it.
  • There is always time to release it to the world.

Why is there always time? Because if you don't make the time to do those things, you will pay for it later. But also because it creates opportunities to take pride in the quality of your work, interact with a community, benefit from community contributions and feedback, and experience small victories that make the faraway goal of launching a large project feel less like a journey to the moon and more like the high point of a journey with many fascinating stops along the way.

True, sometimes the time is not right this minute. But it should be very soon. And there is always a crisis in the way, from somebody's point of view. If you wait for a week without a crisis, you'll probably wait forever.

So if you can't seem to find the time to do these things in the course of your work week... make the time!

On that note, we've busted loose a number of components from Apostrophe 2 and made them available as separate jQuery plugins. You don't need to be using Apostrophe 2 to benefit from these. If you use JavaScript and jQuery in the web browser in your work (and pretty much all developers do), these may come in handy. And we look forward to your feedback on them.

Some of these plugins are very small. That's intentional. If a few lines of code save us from repeating that code many times and getting it wrong half the time, then those lines of code are worth sharing. In a sense,$.radio is more valuable than $.selective, because it fills such a widely recognized need.


New jQuery Plugins from P'unk Avenue and Apostrophe 2


$.selective provides multiple selection with autocomplete: a list to which items may be added by typing part of the label. Items may be reordered and removed from the list. It is especially useful when there are too many options to be presented in an ordinary dropdown list, or even downloaded to the browser, and you need to permit more than one to be selected.

$.bottomless is an infinite scroll plugin (think Tumblr) that has been torture-tested by naive users with old browsers. Which is important because permanently replacing pagination with infinite scroll on a public facing site is a high risk, high benefit proposition. $.bottomless has a sweet and simple API, and an army of elderly relatives looking for wedding photos were unable to break it.

$.projector is a slideshow plugin. Are there lots of those already? Surely. But we like the way $.projector allows you to create your own markup for the slideshow and enhance it in a straightforward, SEO-friendly way. And $.projector also plays nice on the page when the height of your images varies, by taking advantage of our $.imagesReady plugin.

$.imagesReady was built to solve a tricky problem in $.projector. $.imagesReady waits for a group of images to be ready for use in the browser, then reports the maximum width and height as well as the tallest ratio of height to width. If you've ever tried to build a slideshow that doesn't cause the rest of the page to "jump" when images vary in height, you'll know why this is useful.

$.findByName provides a less bug-prone way to find elements by their name attribute. In particular, when the name attribute is stored in a variable it is very bug-prone to write a selector for it by hand every time.

$.radio lets you get and set the current value of a group of radio buttons, filling a gap in jQuery's $.val. It is not a replacement for radio buttons. It just makes working with them more pleasant.

$.getOuterHTML lets you get the "outer HTML" of an element, including the element itself, even in browsers that do not natively support that. This is a very small plugin which does not include a setter for those who don't need a setter.

Tom Boutell
Chief Software Architect