The JavaScript blog.


jquery plugins ajax forms backbone.js images widgets

jQuery Roundup: Queuing Ajax Requests, imagefill.js, Feedback Me

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Queuing Ajax Requests

In Queuing Ajax Requests in JS Web Apps, Alex MacCaw talks about how to queue requests with jQuery.ajax and safely retain the sequence of operations generated by Backbone and Spine applications.

We still have a problem if a particular request fails, as the interface will now be out of sync with the database. I usually recommend treating this as an exceptional circumstance, and prompt the user to reload the page. Incidentally, this is exactly how Facebook and Twitter solve the problem.

The plugin can be used like this: jQuery.ajax({type: 'POST', queue: true}), and is available as a Gist at maccman / jquery.ajax.queue.coffee.

He's also recently published Memory Management in JS Web Apps, which discusses how to properly clean up Backbone and Spine controllers when DOM elements are removed using jQuery's special events.


imagefill.js (GitHub: johnpolacek / imagefill.js, License: MIT/GPL) by John Polacek is a jQuery plugin for making images fill their containers. It can be configured to run once, or throttle the frequency at which container sizes are checked. The author suggests this plugin could be useful for creating responsive sites.

Feedback Me

Feedback Me (GitHub: vedmack / feedbackme, License: _MIT, jQuery: feedback_me) by Daniel Reznick is a UI widget that shows a feedback form that appears from the side of a page. It is designed to work out of the box with jQuery UI and Bootstrap, and includes allows each label in the feedback form to be configured.


google community backbone.js media

Echotube, Community Updates

Posted on .



Echotube (GitHub: orizens / echoes, License: MIT) by Oren Farhi is a Backbone.js and RequireJS YouTube media manager. It's open source, and the code is all JavaScript, so you can easily see how the author has structured the Backbone code around YouTube's API.

The design is derived from Bootstrap, but there are a lot of custom widgets and CSS transitions which keep it feeling original. Also, Jasmine tests have been included, which is interesting because it seems like a slightly awkward thing to test.

If you're looking for fully-fleshed out Backbone/RequireJS applications to learn from then give it a look.

Community Updates

I occasionally receive messages about major updates to libraries and products that I don't always write about, but I thought it would be nice to start publishing those as well. If you read about BromBone -- a service that provided access to headless browsers -- then you might be interested to hear that BromBone is now a service for bringing better SEO to single page apps. It works by adding redirects to yoursite.brombone.com based on the crawler's user agent. The documentation has a simple .htaccess file which will work for Apache.

Also of note is Vincent Voyer's lazyload script has been updated to 2.0:

Feel free to contact us about your module/script/app's major updates and I shall endeavour to find space to write about it.


jquery plugins backbone.js text bootstrap wysiwyg

jQuery Roundup: Backbone Associations, bootstrap-wysihtml5

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Backbone Associations

Backbone Associations (GitHub: dhruvaray / backbone-associations, License: MIT, bower: backbone-associations) by Dhruva Ray is a plugin for one-to-one and one-to-many associations between models and collections:

applications can listen to any kind of change (change, add, remove, reset, sort, destroy) in this hierarchy using standard Backbone events and respond to them. (views can re-render for example). The implementation strives to be tiny (2.2KB), easy-to-understand, light-weight and fast.

Once the plugin has been loaded, models can be defined using Backbone.AssociatedModel, and then relationships can be set up with Backbone.One and Backbone.Many.

var Product = Backbone.AssociatedModel.extend({  

var User = Backbone.AssociatedModel.extend({  
  relations: [{
    type: Backbone.Many,
    key: 'locations',
    relatedModel: Product

The reversed association is automatically inferred, so a product could be set for a user. Values can be traversed using fully qualified paths as well:


Fully qualified paths can also be used to assign event listeners:

emp.on('change:works_for.locations[*]', cb);  

The author has written up a full tutorial for Backbone Associations, and has included unit tests and full documentation.


bootstrap-wysihtml5 (GitHub: jhollingworth / bootstrap-wysihtml5/, License: MIT, bower: bootstrap-wysihtml5) by James Hollingworth is an amazing text editor component. It's highlight consistent with Bootstrap's design, and has many features you may take for granted when editing text, like the usual keyboard shortcuts.

Trantor Liu sent in his fork, trantorLiu/bootstrap-editor, which pairs up the project with jQuery-File-Upload. This adds support for things like upload progress, drag and drop, and cross-domain uploads. Trantor notes that the demo won't currently work because there's no server-side support, but he's provided instructions on how to set it up locally.


mobile css backbone.js grunt

Backbone and Azure, Yass.js, grunt-stripmq

Posted on .

Backbone Adapter for Azure

Olivier Bloch sent in a Backbone adapter for Windows Azure (GitHub: MSOpenTech / backbone-azure-mobile-services, License: Apache 2.0). It's distributed by Microsoft Open Technologies, and syncs data with the Windows Azure Mobile Data Service.

If you're interested in trying out the server-side API without Backbone.js, I noticed there's a tutorial here: Get started with data in Mobile Services.

To use Azure with Backbone, all you need to do is include the adapter, an additional JavaScript file provided by Microsoft, and some settings for your collections:

var People = Backbone.Collection.extend({  
  client: client,
  table: 'Table1',
  model: Person

The authors have included build scripts (Grunt) and tests (Jasmine).


Yass.js (GitHub: EightMedia / yass.js, License: MIT) by Jorik Tangelder is an adaptive image script that adds support for srcset tailored to mobile browsers. Once yass.js has been added after the last image on a page, it will ensure the optimum image is loaded.

It's currently very small (less than 500 bytes when compressed), and has been tested in Chrome 28, Android 4.2, IOS6, BlackBerry10 and IE6.


grunt-stripmq (GitHub: jtangelder / grunt-stripmq, License: MIT, npm: grunt-stripmq) also by Jorik Tangelder is a "mobile-first CSS fallback":

A Grunt task to generate a fallback version of your fancy mobile first stylesheet. Since IE9 doesn't support media queries, you can use a JavaScript like respond.js to enable this, or generate a fallback version with this task.

So if you've invested a lot of time developing modern, mobile-optimised sites, then you should be able to jam them through Grunt to spit out something desktop-friendly.


plugins backbone.js

Backbone Fetch Cache, Backbone.VirtualCollection, WTCSS

Posted on .

Backbone Fetch Cache

Backbone Fetch Cache (GitHub: mrappleton / backbone-fetch-cache) by Andy Appleton caches Backbone's collection and model fetch requests. Data is stored in localStorage to speed up rendering. This is useful for caching Ajax requests with APIs that don't allow control over response cache headers.

The plugin supports preloading data with the prefill option which can be passed to fetch, and the author has included some Jasmine tests.


Backbone.VirtualCollection (GitHub: p3drosola / Backbone.VirtualCollection, License: MIT, npm: backbone-virtual-collection) by Pedro Solá allows Backbone.Marionette's CollectionViews and CompositeViews to be used with instances of Backbone.Collection. This allows collections to be projected and sorted.

This example is from the project's documentation:

var virtual_collection = new Backbone.VirtualCollection(tasks_collection, function (task) {  
  return task.get('user_id') == 13;

var view = new TaskListView({  
  collection: virtual_collection

The project has Mocha tests and some details on its philosophy in the readme.



WTCSS (GitHub: benfoxall / wtcss, License: MIT) by Ben Foxall uses PhantomJS to analyse the CSS on a page, then attempts to visually indicate where each rule applies to using a Canvas overlay.

It looks impressive -- there are demos on the project's homepage, and I suspect it could form the basis for a more advanced CSS analysis and debugging tool.