DailyJS

jQuery Roundup: FitText, gmap3, Awesomemarkup

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

jquery plugins geo typography

jQuery Roundup: FitText, gmap3, Awesomemarkup

Posted by Alex R. Young on .
Featured

jquery plugins geo typography

jQuery Roundup: FitText, gmap3, Awesomemarkup

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

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.