jQuery Roundup: AMD-Utils, jquery.mentionsInput, Echo Nest API Plugin, i18next

by

at 2011-12-20 08:00:00

original http://feedproxy.google.com/~r/dailyjs/~3/YJpM8ieCUe8/jquery-roundup

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

AMD-Utils

AMD-Utils (GitHub: millermedeiros / amd-utils, License: MIT) by Miller Medeiros is a set of modular utilities written using the AMD API.

All code is library agnostic and consist mostly of helper methods that aren’t directly related with the DOM, the purpose of this library isn’t to replace Dojo, jQuery, YUI, Mootools, etc, but to provide modular solutions for common problems that aren’t solved by most of them.

The modules written so far include some of the things covered on my Let’s Make a Framework tutorial series, like a functional style Array module, and other commonly required number and string utility functions often added by large frameworks.

jquery.mentionsInput

jquery.mentionsInput (GitHub: podio / jquery-mentions-input, License: MIT) by Kenneth Auchenberg and the Podio Dev Team is a UI component for handling @mentions. It’ll display an autocomplete list for matching names and allow one to be selected. Once a name is selected, it’ll change colour in the text box, as shown above.

The authors have packaged it with CSS, so it’s easy to get started right away. It does expect some data, rather than automatically searching an API like Twitter’s, so the expected format looks like this:

$('textarea.mention').mentionsInput({
  onDataRequest:function (mode, query, callback) {
    var data = [
      { id:1, name:'Kenneth Auchenberg', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:2, name:'Jon Froda', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:3, name:'Anders Pollas', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:4, name:'Kasper Hulthin', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:5, name:'Andreas Haugstrup', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' },
      { id:6, name:'Pete Lacey', 'avatar':'http://cdn0.4dots.com/i/customavatars/avatar7112_1.gif', 'type':'contact' }
    ];

    data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1 });

    callback.call(this, data);
  }
});

Echo Nest API Plugin

Echonest-jQuery-Plugin by Samuel Richardson is a plugin for The Echo Nest which is a real-time API for accessing music data. Song data and audio fingerprinting are just some of the cool things that this API provides.

Let’s say I needed to get a set of album images. All I’d have to do is this:

var echonest = new EchoNest('YOUR_API_KEY');
echonest.artist('Radiohead').images(function(imageCollection) {
  $('body').prepend(imageCollection.to_html('<img src="${url}">'));
});

Combined with a templating system, this makes working with music data extremely convenient. The only issue with this approach is the API key is exposed. Echo Nest uses the API key for enforcing rate limits, so it’s not safe to expose it publicly. As it stands, I’d probably use client-side Echo Nest API code as a way of rapidly prototyping a music service built on this platform, then create my own server-side bridge to obscure the API key.

i18next

i18next (GitHub: jamuhl / i18next, License: MIT) by Jan Mühlemann is a client-side translation plugin with lots of features, including: plurals, localStorage, namespaces, and variables. JSON resource files can be used to store translations, and then i18next will load them as required.

Given a suitable file at /locales/en-US/translation.json:

{
  "app": {
    "name": "i18n"
  },
  "creator": {
    "firstname": "Jan",
    "lastname": "Mühlemann"
  }
}

Then $.i18n.init can be used to load the resource and access translations:

$.i18n.init({}, function(t) { // will init i18n with default settings and set language from navigator
  var appName = t('app.name'); // -> i18n
  var creator = t('creator.firstname') + ' ' + t('creator.lastname'); // -> Jan Mühlemann
});

The i18next documentation contains more examples and shows how to change languages, organise translations with nesting, and use variables.

Google Reader