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

Alex R. Young





jquery ui plugins music amd translation

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

Posted by Alex R. Young on .

jquery ui plugins music amd translation

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

Posted by Alex R. Young on .
Note: You can send your plugins and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).


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 (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:

  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
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

var echonest = new EchoNest('YOUR_API_KEY');
echonest.artist('Radiohead').images(function(imageCollection) {

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 (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.