The JavaScript blog.


libraries ui ajax dom http rest

Databound, Typist

Posted on .



If you use Ruby on Rails, then you might like this Rails REST library wrapped: Databound (GitHub: Nedomas/databound, License: MIT, npm: databound, Bower: databound) by Domas Bitvinskas. The API looks a bit like the Rails syntax for database models:

User = new Databound('/users')

User.where({ name: 'John' }).then(function(users) {  
  alert('Users called John');

User.find(15).then(function(user) {  
  print('User no. 15: ' + user.name);

User.create({ name: 'Peter' }).then(function(user) {  
  print('I am ' + user.name + ' from database');

Install it with npm, Bower, or as part of a Rails asset pipeline. The author also notes that you can use it with Angular as an alternative to ngResource.


Typist (GitHub: positionly/Typist, License: MIT, Bower: Typist) by Oskar Krawczyk is a small library for animating text as if it's being typed. It can work with responsive layouts, and the author claims it has improved click-through-rates on a commercial homepage.

It doesn't have any dependencies, and is invoked by a constructor that accepts options for the animation intervals. The required markup should specify the text to be typed in the data-typist and data-typist-suffix attributes.


libraries ui ajax utilities dom http rest

Curl Converter, aja.js, sneakpeek

Posted on .

Curl Converter

Chrome's "Copy as cURL" menu item is useful, but what if you want to duplicate the same request with Node? Curl Converter (GitHub: NickCarneiro/curlconverter, License: MIT, npm: curlconverter) by Nick Carneiro can convert between cURL syntax and Node's popular request module. It also supports Python, and can be installed with npm.


aja.js (Bower: aja, npm: aja, License: MIT) by Bertrand Chevrier is an Ajax library that supports JSON and JSONP. It can be used to load large chunks of HTML or JSON, and can be installed with npm or Bower.

The API is fluent, so it can be used as a REST client like this:

  .data({ firstname: 'John Romuald' })
  .on('200', function(response) {})

It also supports some DOM manipulation:


It comes with tests that can be run with Grunt, and the readme has more examples for things like posting data.


If you're looking for a library to hide the header when the page is scrolled, then sneakpeek (GitHub: antris/sneakpeek, License: MIT, npm: sneakpeek) is nice because it's small, installable with npm, and has no external dependencies.

It's a bit like headroom.js, but easier to use with Browserify.


ajax angularjs di

ngActivityIndicator, angular-cog, dijs

Posted on .



ngActivityIndicator (GitHub: voronianski / ngActivityIndicator, License: MIT) by Dmitri Voronianski is an Angular provider for loading indicators, which you can use on directives, controllers or services.

Adding an indicator to a controller looks like this:

var app = angular.module('exampleApp', ['ngActivityIndicator']);

app.controller('MainCtrl', ['$activityIndicator', '$timeout',  
  function ($actvityIndicator, $timeout) {
    $timeout(function () {
    }, 3000);

There's a directive called ng-activity-indicator which can be used to inject the indicator into the DOM automatically.


angular-cog (GitHub: chinmaymk / angular-cog, License: MIT) by Chinmay Kulkarni is a library for writing declarative Ajax requests with Angular.

The full set of directives are as follows:

<div cog-verb="{url}"  

Requesting JSON content should place it in the $data variable, so you can access it in cog-success and then pass it to something bound in $scope.

The documentation includes notes on how to set up a loading indicator -- maybe you could try ngActivityIndicator?


dijs (GitHub: cmtt / dijs, License: WTFPL) by Matthias Thoemmes is a dependency injection module for Node and browsers that's inspired by Angular. There are methods for defining a namespace, describing the modules, and resolving dependencies.

For describing dependencies, it supports function notation and array notation:

// Function notation
var mod = Di();  
mod.provide('Pi', Math.PI, true);  
mod.provide('2Pi', function(Pi) { return 2*Pi; });

// Array notation
var mod = Di();  
mod.provide('Math.Pi', Math.PI, true);  
mod.provide('2Pi', ['Math.Pi', function (Pi) {  
  return function () {
    return 2*Pi;

There's a lot more to it than this, and you might find it useful if you've got used to DI through Angular but want to use it elsewhere.


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.


frameworks jquery ui testing plugins ajax

jQuery Roundup: jKit, ZinoUI, jQuery.ajax.fake

Posted on .

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


jKit's site includes demos of every effect and component.

jKit (GitHub: FrediBach / jQuery-jKit, License: MIT) by Fredi Bach is a relatively small (47 KB) UI toolkit. It can work with data attributes, so adding data-jkit attributes to the relevant elements will invoke various components.

There are a lot of effects and components, including tooltips, charts, parallax scrolling, and a lightbox. The project has detailed documentation on each of the bundled plugins, and a simple introduction for non-programmers.


The ZinoUI TreeView component.

Coincidentally, Dimitar Ivanov also sent in a UI toolkit of sorts: the ZinoUI Framework (License: CC BY-NC 3.0). This framework requires commercial licensing starting at $50 per site, and includes advanced widgets more comparable to jQuery UI, like a calendar and tree view.

ZinoUI is WAI-ARIA compatible, so may suit projects with stricter accessibility requirements. It has been tested with Google Chrome 12+, Firefox 4+, Safari 5+, Opera 11+, and IE8+.


jQuery.ajax.fake (GitHub: anasnakawa / jquery.ajax.fake, License: MIT, component: anasnakawa/jquery.ajax.fake) by Anas Nakawa can be used to mock jQuery $.ajax calls. A mocked call will be made when passing fake: true as an option to $.ajax. It can be disabled globally, and works with deferred calls.