Ajax Bestiary: A Javascript Field Guide
 
Ajax Bestiary: A Javascript Field Guide
 
 

Underscore.js: jQuery without the DOM

Posted by Dave Mahon

DocumentCloud bills Underscore as “the tie to go along with jQuery’s tux,” but I think that this description is misleading.

In less than 4KB, and without manipulating object prototypes, it provides a superset of jQuery’s set manipulation, fills the gaps in IE’s implementation of arrays, types variables correctly and provides several other neat tricks.

Neat tricks, you say? How about automatically changing the value of this when you call a function? Or providing a very simple templating engine? Or elegantly handling variable name conflicts? Those would be the bind(), template() and noConflict() methods, respectively.

To top it all off, it uses native methods, in browsers that support it, and offers both object-oriented and functional coding support.

With no dependencies, a tiny footprint, and a huge punch, it’s a powerful tool at your disposal.

Accounting.js A handy formatting library for numbers and finance

Posted by Don Albrecht

Today I stumbled across a handy little javascript framework called accounting.js.  Like the handy date.js library.  It focuses ongoing one thing extremely well. Convert numbers between simple strings of digits into nicely formatted easily readable strings.

it has just a few functions.

formatMoney()

by default, format the string to USD with 2 decimal places, comma separation at the thousands and a $ sign.  Optional params of [currencySymbol], [precision], [thousands separator], [decimal separator].

formatColumn()

just like formatMoney, but it takes an array of values and white space pads their conversions to the same length.

unformat(string)

parse a given number formatted string and return its numerical value.

Joss Crowcroft’s Original Blog Announcment is here:

http://www.josscrowcroft.com/2011/code/my-weekend-project-accounting-js/

And the GitHub site is here:

https://github.com/josscrowcroft/accounting.js

Lettering.js A fun way to spice up Typography

Posted by Don Albrecht

CSS is awesome, but it lacks the ability to fine tune typography to the nth degree.  Want a spectacular drop cap, tighter kerning on a few letters, magical rainbow type?  You’re stuck with a bespoke and labor intensive solution.  Lettering.js can help alleviate those pains.

How it works, calling .lettering() on a text node, the node is broken up into a collection of spans uniquely classed for each letter.

For Example:  the HTML Node

<code><h1 class="fancy_title">Some Title</h1></code>

Can be transformed by

<code> $(document).ready(function() {    
 $(".fancy_title").lettering(); });</code>

And yields

<code><h1 class="fancy_title"> 
<span class="char1">S</span> 
<span class="char2">o</span>
 <span class="char3">m</span>
 <span class="char4">e</span> 
<span class="char5"></span> 
<span class="char6">T</span> 
<span class="char7">i</span> 
<span class="char8">t</span> 
<span class="char9">l</span> 
<span class="char10">e</span> </h1></code>

Now, you can style the code with css char# classes!

Check it out here:

http://daverupert.com/2010/09/lettering-js/

Date.js My New Favorite Javascript Date Library

Posted by Don Albrecht

Earlier this week, I discovered that Safari doesn’t support dates in ISO 8601 UTC combined format:  “2010-06-19T03:11Z”.  This was a problem as my production system was delivering me a json file with dates in this format and my project was simply a new UI for the existing server.  A quick round of googling found DateJS a powerful chainable Date extension that enables both unified parsing and mask based date rendering.  I’d only played with it for a few minutes before I was completely hooked on it.  Just look at what it can do.

   1: // What date is next thursday?

   2: Date.today().next().thursday();

   3:  

   4: // Add 3 days to Today

   5: Date.today().add(3).days();

   6:  

   7: // Is today Friday?

   8: Date.today().is().friday();

   9:  

  10: // Number fun

  11: (3).days().ago();

  12:  

  13: // 6 months from now

  14: var n = 6;

  15: n.months().fromNow();

  16:  

  17: // Set to 8:30 AM on the 15th day of the month

  18: Date.today().set({ day: 15, hour: 8, minute: 30 });

  19:  

  20: // Convert text into Date

  21: Date.parse('today');

  22: Date.parse('t + 5 d'); // today + 5 days

  23: Date.parse('next thursday');

  24: Date.parse('February 20th 1973');

  25: Date.parse('Thu, 1 July 2004 22:30:00');

And Yes It supports ISO 8601 UTC combined format!.

A quick replacement of my existing date toolkit in the project and my bugs were fixed.

Meet Base2, A Javascript Reset from Dean Edwards

Posted by Don Albrecht

Base2 is exactly what the title says,  Unlike the major libraries that strive to enhance javascript with shiny new features, Base2 strives to achieve a clean, browser independent execution environment.  In many ways base2 does for javascript what Blueprint, Tripoli et al. do for CSS.

Key Features:

  • Inconsistent enumeration across platforms
  • instanceof doesn’t always work
  • typeof is inconsistent (RegExps identify as type “function” in Mozilla browsers)
  • Consistent object/platform detection
  • Other various bugs

And the sugar:

Playing with the library, it really is a breath of fresh air in many respects.  It’s lightweight (20kb compessed & 6kb) gziped and loaded with features that make day to day javascript development faster and easier.  Most importantly, it raises the bar for all browsers by providing Javascript 1.6 features to browsers other than Firefox.

You can get it online at

http://code.google.com/p/base2/ 

and there’s an excellent introduction at

http://dean.edwards.name/weblog/2007/12/base2-intro/ 

FastInit: SuperCharge Your Pageloads

Posted by Don Albrecht

What is it:

FastInit is a small JS file to create a Faster window.onload. It implements a powerful onload function queue that fires once teh dom is ready and before all images have been downloaded. Ideally, this results in a dramatic decrease in a pages initialization time.

How it Works

You any functions to the queue by using the FastInit.addOnLoad( function 1, function 2, …); function. All functions are fired in the order in which they were added to the queue. addOnLoad can be called as many times as is necessary. It fails gracefully to standard handlers if the browser doesn’t support the faster methods.

Requirements

As of version 1.4.1 the need for Prototype has been removed freeing the code for use in any project where a speedy onload method is needed.

Check it out here:

http://tetlaw.id.au/view/javascript/fastinit

Prototype UI: A consolidated library of Prototype / Scriptaculous widgets

Posted by Don Albrecht

An effort is underway to merge several well known Prototype based widgets into a single widget library built on top of the prototype / scriptaculous stack.  It’s already in a usable form combining the following widgets into a single js file.

  • Dock
  • Carousel
  • Shadow
  • Window

You can find it online at http://www.prototype-ui.com/