The JavaScript blog.


databases node maps geo backbone.js

PinClusterer, Backbone.Routes, Rice, Fiddle.js

Posted on .



PinClusterer (GitHub: rtsinani / PinClusterer) by Arti Sinani is a library for clustering pins on Bing maps. Pins are grouped together based on a grid size setting:

var pinClusterer = new PinClusterer(map, {  
  gridSize: 40

pinCluster.setOptions({ gridSize: 30 });  

The pin settings are all configured the same way as a standard Microsoft.Maps.Pushpin. The author has included a stylesheet that will create circular icons with a shadow and gradient.


Backbone.Routes (License: MIT) by Teng Siong Ong is an alternative API for routing in Backbone.js. It helps centralise routes, and can trigger multiple routes for a given URL.

It seems more like the way Rails routing works, and the author indicates he's been influenced by Rails in the project's source code. Here's an example:

Backbone.Routes.prefix = YourApp.Routers

    'NavbarRouter': 'index'
    'HomeRouter': 'index'


Rice (License: MIT) by Yuri Neves is a database library that uses the Web SQL Database API. Although Firefox supports Indexed DB instead, this API can be used with PhoneGap.

Usage looks like this:

  .select({ from: 'People', where: { age: 21 } }, function(result) {
    result.each(function(row) {

The source is available here: rice.jscraft.org/src/rice.js.


Fiddle.js (License: MIT, npm: fiddle) by Craig Condon is a MongoDB-inspired object manipulation library. Operators like $inc, $set, $unset, and more are supported.

The fiddle method itself accepts a modifier object, and then filters and targets. The targets represent the data to modify:

// Increment age by one
var fiddled = fiddle({ $inc: { age:1 } }, null, { name: 'Craig', age: 21 });  

The results returned by fiddle can be filtered and otherwise iterated over.


jquery ui mobile plugins geo

jQuery Roundup: Auto-geocoder, Jade for jQuery, Swipe

Posted on .

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

jQuery Auto-geocoder

jQuery Auto-geocoder

jQuery Auto-geocoder (GitHub: tristandunn / jquery-auto-geocoder, License: MIT) by Tristan Dunn enables incremental search for Google Maps. A text input is displayed, and the results of a location search on Google's geocoding API are displayed in the map view.

$(function() {

The autoGeocoder method also accepts options -- for example, delay can be used to control how often locations will be geocoded, and initial contains the options used to create the map.

One thing I wanted to do when testing this plugin was allowing the marker to be dragged. As far as I can tell, there's no direct support for manipulating the resulting marker position. However, it's possible to bind to the events used by the plugin, then the listener will be in the right context to access the marker:

  initial: {
    zoom: 1
  , center: [34, 0]
  , draggable: true
  , mapTypeId: google.maps.MapTypeId.ROADMAP
  , mapTypeControl: false
}).bind('auto-geocoder.onGeocodeResult', function() {
  this.marker.draggable = true;

I had to write a similar interface widget once that allowed people to search for a location, then fine-tune the position.

Jade for jQuery

Jade for jQuery (License: MIT/GPL v2) by Jeremy Martin is a lightweight jQuery wrapper for Jade. Seeing as both of these technologies are all about CSS selectors, I've always felt like it makes sense to use them together. In my own work, Jade has formed the server-side templates. How does this look for a client-side template solution?

<script id='my-template' type='text/x-jade'>  
h1 Hello #{name}!  

<script type="text/javascript">  
$('#my-template').jade({ name: 'World' }).appendTo('body');

It's also possible to render string templates with $.jade(template, data).


Swipe screenshot

Hirvesh sent in Swipe (GitHub: bradbirdsall / Swipe, License: MIT/GPL) by Brad Birdsall:

Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

It works with a series of elements inside a container, and the author recommends using it with a feature detection library like Modernizr:

if (Modernizr.csstransforms) {  
  window.mySwipe = new Swipe(

One of the nice features in Swipe is scroll prevention -- it'll detect if a swipe was intended to scroll the screen down, or slide content horizontally.


animation jquery plugins maps geo

jQuery Roundup: CraftMap, Scrollorama, Plugins Archive

Posted on .

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



CraftMap (License: free for non-commercial use, Price: $49, Size: 13KB, Minified: 6.5KB) by Marcin Dziewulski is a lightweight plugin that turns an image into a map, complete with overlays and markers.

The plugin comes with lots of options, including saving position to cookies, map positioning, and controls.

Marcin has also written a whole slew of other plugins:



Scrollorama (GitHub: johnpolacek / scrollorama, License: MIT and GPL, Size: 9.63KB) by John Polacek is a plugin for controlling animations as a page is scrolled. Once a page is split into blocks, events can be triggered as blocks become visible:

var scrollorama = $.scrollorama({  
  blocks: '.scrollblock'

scrollorama.onBlockChange(function() {  
  alert('You just scrolled to block#' + scrollorama.blockIndex);

Elements can be animated, like the examples on Scrollorama's site:

scrollorama.animate('#example1', {  
  duration: 400, property: 'opacity'

Plugins Archive

After the official jQuery plugin site was shelved, the old content has now been reinstated at archive.plugins.jquery.com.

The new site is open source and can be found at GitHub: jquery / plugins.jquery.com. It can be installed locally, and requires a web server, PHP, MySQL, WordPress, Node, and Git.


testing node modules geo

Node Roundup: 0.4.10, Geocoding, Bunker

Posted on .

You can send your node modules and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).

Node 0.4.10

Node 0.4.10 has been released. This version mainly contains bug fixes:

  • #394 Fix Buffer drops last null character in UTF-8
  • #829 Backport r8577 from V8 (Ben Noordhuis)
  • #877 Don't wait for HTTP Agent socket pool to establish connections
  • #915 Find kqueue on FreeBSD correctly (Brett Kiefer)
  • #1085 HTTP: Fix race in abort/dispatch code (Stefan Rusu)
  • #1274 debugger improvement (Yoshihiro Kikuchi)
  • #1291 Properly respond to HEAD during end(body) hot path (Reid Burke)
  • #1304 TLS: Fix race in abort/connection code (Stefan Rusu)
  • #1360 Allow _ in url hostnames
  • Revert 37d529f8 - unbreaks debugger command parsing.
  • Bring back global execScript (it was removed from v8)


Geocoder (GitHub: wyattdanger / geocoder,
License, npm: geocoder) by Stephen Wyatt Bush is a module for using Google's
geocoding and reverse geocoding services:

var geocoder = require('geocoder');

geocoder.geocode("Atlanta, GA", function(data) {
  // do stuff with data

// Reverse Geocoding
geocoder.reverseGeocode(33.7489, -84.3789, function(data) {
  // do stuff with data

He's planning to add error handling support, although I'd have expected
the callback signature to be err, data rather than
data, err.


Bunker (npm: bunker, License: MIT/X11) by James Halliday generates code coverage reports
using the author's burrito

There's a simple example that demonstrates the project's event-based

var bunker = require('bunker');
var b = bunker('var x = 0; for (var i = 0; i < 30; i++) { x++ }');

var counts = {};

b.on('node', function (node) {
    if (!counts[node.id]) {
        counts[node.id] = { times : 0, node : node };
    counts[node.id].times ++;


Object.keys(counts).forEach(function (key) {
    var count = counts[key];
    console.log(count.times + ' : ' + count.node.source());

This is actually a native JavaScript parser based on AST data generated
by UglifyJS. Bunker doesn't
currently provide a generalised script for analysing your project's test
coverage; for something like that TJ Holowaychuk's
node-jscoverage can work in conjunction with a test framework like


jquery plugins geo typography

jQuery Roundup: FitText, gmap3, Awesomemarkup

Posted on .

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


Somehow I missed this companion project to the popular
Lettering.js, but in case you also missed it... FitText (GitHub: davatron5000 /
) by Dave Rupert
and Paravel resizes text to fit the parent
element. It makes creating fluid magazine-like layouts possible, just by
using appropriate CSS and

There's also an interesting comment in the readme about

If you oppose window.resize(), it's worth mentioning that @chriscoyier created a fork of FitText using a debounced resize method.

The original post about debouncing is here: Debouncing Javascript


gmap3 (GitHub: jbdemonte / gmap3) by Jean-Baptiste Demonte
makes working with Google Maps a lot simpler, leveraging jQuery's
succinctness rather nicely:


It also takes parameters in the form of an array of objects. Each object
has an action:

  { action: 'init',
    options: {
      center: [46.578498, 2.457275],
      zoom: 5
  { action: 'addMarker',
    latLng: [48.8620722, 2.352047]
  { action: 'addMarker',
    latLng: [48.8620722, 2.352047]


Awesomemarkup (GitHub: clint-tseng / awesomemarkup, License:
WTFPL) by Clint Tseng is a framework-agnostic library for generating markup. When used with jQuery, it'll add \$.tag:

// Instead of doing this:
var markup = '' + '' + article.title + '' +

// Awesomemarkup makes this possible:
var markup = $.tag({
  _: 'div',
  class: [ 'content', article.contentType ],
  style: {
    display: { i: article.visible, t: 'block', e: 'none' }
  contents: {
    _: 'h2',
    contents: article.title

Clint has also added CommonJS support, which means Awesomemarkup can be
used in Node too.