DailyJS

DailyJS

The JavaScript blog.


Taggeo
Featured

databases node maps geo backbone.js

PinClusterer, Backbone.Routes, Rice, Fiddle.js

Posted on .

PinClusterer

PinClusterer

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.cluster(data);

pinCluster.setOptions({ gridSize: 30 });  
pinCluster.cluster();  

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

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

Backbone.Routes.map  
  '/':
    'NavbarRouter': 'index'
    'HomeRouter': 'index'

Rice

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:

rice.use('myDb')  
  .select({ from: 'People', where: { age: 21 } }, function(result) {
    result.each(function(row) {
      $('<li>').html(row.name).appendTo('#myList');
    });
  });

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

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

Featured

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() {
  $('#location').autoGeocoder();
});

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:

$('#location').autoGeocoder({
  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>

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

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

Swipe

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(
    document.getElementById('slider')
  );
}

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.

Featured

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

CraftMap

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

Scrollorama

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.

Featured

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

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

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

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

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 ++;
});

b.run();

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

Featured

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

FitText

Somehow I missed this companion project to the popular
Lettering.js, but in case you also missed it... FitText (GitHub: davatron5000 /
FitText.js
) 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
\$('#responsive_headline').fitText();.

There's also an interesting comment in the readme about
window.resize:

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

gmap3

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

$('#example').gmap3();

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

$('#example').gmap3(
  { 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

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.