Wijmo Open – Open Source jQuery UI Widgets #

Thanks to Chris Bannon for letting us know about Wijmo.

Wijmo Open is a complete kit of jQuery UI widgets. Wijmo is an extension to jQuery UI and adds new widgets and features to your arsenal. Every widget was built to jQuery UI’s standards and framework. Some widgets like slider and dialog literally extend their counterpart from jQuery UI. Each widget is ThemeRoller-ready and comes styled with our own theme called Aristo.

By the looks of things, this project was just Open Sourced this past week (October 20th, 2010). Documentation is still pending (maybe this Friday), but they have a nice little demo for you to check out. Also be sure to check out the samples directory of the project for usage details.

Visit the Wijmo Forum for discussions and questions, but you’ll need to register for an account. Wijmo Open can be licensed under the MIT or GPL licenses.

Wijmo Open also has a commercial counterpart. If you’ve used Wijmo, be sure to tweet or email us at ping@thechangelog.com.

Check out the codes

[Source on GitHub]. Documentation? [Read their blog] for now.

gury: A jQuery-inspired chainable JavaScript helper for HTML5 Canvas #

With more and more browser and mobile device support, adoption of the HTML5 <canvas> object is accelerating. For developers who are used to working with JavaScript libraries, using the native Canvas JavaScript APIs might seem a bit cumbersome.

Ryan Sandor Richards aims to wrap those Canvas APIs in a bit of jQuery-inspired convenience. Gury, pronounced “jury”, introduces some basic chaining, allowing you to build your canvas scenes and animate them in one expression.

Usage

To use Gury, reference the Gury script in your document’s <HEAD> and add a <canvas> element with an DOM Id to your page. Use the $g function to operate on your canvas to set size and colors, add objects, and finally call draw().

$(function() {
  // Get the canvas as a gury object
  $g('screen')

    // set its size,
    .size(256, 256)

    // and background color
    .background('#111')

    // Now add a simple function that draws a diagonal line
    .add(function(ctx) {
      ctx.strokeStyle = '#f00';
      ctx.beginPath();
      ctx.moveTo(10, 10);
      ctx.lineTo(246, 246);
      ctx.stroke();
    })

    // Draw the scene's objects onto the canvas
    .draw()

});

Animation

Gury also handles animation. Simply call play() passing in the refresh interval in milliseconds.

$(function() {
  // Get the canvas as a gury object
  $g('screen')

    // set its size,
    .size(256, 256)

    // and background color
    .background('#111')

    // Add a more complicated animated object
    .add({
      x: 20, y: 20, dx: 1, dy: 2, s: 10,
      draw: function(ctx) {
        ctx.fillStyle = "#0ff";
        ctx.fillRect(this.x, this.y, this.s, this.s);

        this.x += this.dx;
        if (this.x >= 246 || this.x <= 10) {
          this.dx *= -1;
        }
        this.y += this.dy;
        if (this.y >= 246 || this.y <= 10) {
          this.dy *= -1;
        }
      }
    })

    // Draw the scene's objects onto the canvas
    .draw()

    // And finally begin playing the animation!
    .play(16);
});

Ryan has some excellent demos in the repository, including this simple color matching puzzle:

Demo screenshot

[Source on GitHub]

zepto.js: Minimalist JavaScript framework for mobile WebKit with jQuery-like chaining #

It may seem strange that the author of Prototype-based script.aculo.us would embark on creating a new jQuery-esque JavaScript library for mobile devices, but that’s exactly what Thomas Fuchs has done with zepto.js.

One reason JavaScript frameworks have become popular is because they abstract browser differences and let the developer focus on the work at hand, not on how it’s done. Since zepto.js targets only Webkit browsers, a lot of the cruft found in other frameworks can be eliminated. Modern JavaScript features such as forEach can be assumed so the framework is leaner, critical for building mobile apps.

zepto.js is under heavy development (growing by 2x since we first spotted it yesterday), but looks to deliver on its goal of being a “~2k library that handles most basic dredge work for you in a nice API so you can concentrate on getting stuff done.”

Features

zepto.js uses the familiar $ function and includes the usual suspects:

get(): return array of all elements found
get(0): return first element found
html('new html'): set the contents of the element(s)
css('css properties'): set styles of the element(s)
append, prepend: like html, but append or prepend to element contents

Ajax support

Methods you’d expect for Ajax-fied GETs and POSTs are there as well:

$.get(url, callback)
$.post(url, callback)
$.getJSON(url, callback)

Installing and using

Thomas recommends not linking to zepto.js directly in your document <head>, rather copy and paste the contents of zepto.min.js directly into a <script> tag.

Thomas knows a thing or two about mobile optimization. Be sure and catch his thoughts in how he optimized Every Time Zone for mobile devices.

[Source on GitHub]

Lettering.js: Radical web typography with jQuery #

Even with the improvements @font-face brings to typography, web designers still don’t have quite the control as their print counterparts. Basic tasks like per-letter or per-word styling involves a lot of <span>’s and stupid markup tricks.

Dave Rupert aims to help with Lettering.js, a jQuery plugin for “radical web typography.”

Screenshot

How it works

In this example, Lettering.js takes over the tedious task of creating all of those per-letter <span>’s:

$(document).ready(function() {
  $(".fancy_title").lettering();
});

… which yields

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

You’re now free to style each individual letter with the resulting CSS classes.

Don’t need that fine-grained control? Lettering.js can handle per-word options as well:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

[Source on GitHub] [Blog post]

handlebars.js: Optimized JavaScript templating based on Mustache.js #

If you’ve ever used Jan Lehnardt’s Mustache.js, a port of Chris Wanstrath’s logic-less views project Mustache, be sure and checkout Handlebars.js from Yehuda Katz. Handlebars builds on Mustaches’ namesake {{mustaches}} data binding syntax by adding support for path-based expressions, block helpers, and optimized partial support.

Paths

Binding deep hashes with Mustache can be cumbersome. Yehuda’s new path-based expressions let you specify XPath-style expressions to bind to values deep within a nested data structure. Given the following data:

var data = {"person": { "name": "Alan" }, company: {"name": "Rad, Inc." } };

you could bind to company name with an expression like:

{{#person}}{{../company/name}}{{/person}}

[Source on GitHub] [Yehuda’s blog ppst]

slablet: Stylish CSS layout for iPad and more #

If you like Sencha Touch, the HTML5 mobile framework we recently covered in Episode 0.3.0, but long for a more declarative, markup-driven approach, then keep an eye on Slablet from Fellowship Technologies.

Landscape

Slablet, as defined by Urban Dictionary:

(n.) – a slang word for a computer tablet such as the iPad or other branded tablet devices

Unlike Sencha’s JavaScript-centric approach, Slablet opts for a more unobtrusive implementation. Content is created in HTML, styled with CSS, and driven by jQuery. The project uses iScroll to provide overflow:scroll in its fixed height elements.

Fellowship has provided a few nice looking demos.

Horizontal

If you’re wanting to start developing split-pane interfaces for the iPad, give Slablet a look.

[Source on GitHub]

jStorage – stash that hash using jQuery, Prototype, or Mootools #

jStorage from Andris Reinman is a small (2kb) simple wrapper for popular javascript frameworks to abstract local storage. HTML5 local storage is used if present and it even supports userData in older versions of IE.

compatibility chart

The simple API supports, get, set, delete and flush operations:

// set a value
$.jStorage.set(key, value)

// retrieve a value with a default if not set
value = $.jStorage.get(key, "default value")

// delete a key, throws exception if not set
$.jStorage.deleteKey(key)

// flush entire cache

$.jStorage.flush()

[Source on GitHub] [Homepage]

xkcdfools: Mock a UNIX terminal in jQuery #

As seen on xkcd’s awesome April Fool’s homepage, xkcdfools is a mock terminal client written in jQuery. Many familiar commands are supported:

guest@xkcd:/$ ls
welcome.txt
license.txt
blag/
blog/
fora/
forums/
store/
about/

Terminal history works by hitting the up arrow, and there are even some funny Easter eggs included as well including:

guest@xkcd:/$ whoami

You are Richard Stallman.
guest@xkcd:/$

as well as the famous Konami code (↑, ↑, ↓, ↓, ←, →, ←, →, B, A). Woot!

[Source on GitHub] [Demo]

Quicksand: Awesome jQuery plugin to filter/animate HTML lists #

Quicksand from Jacek Galanciak is a jQuery plugin to help you filter and animate items in an HTML list.

With code like this:

$("#content").quicksand($("#data > li"), 
  {
    // all the parameters have sensible defaults
    // and in most cases can be optional
    duration: 1000,
    easing: "easeInOutQuad",
    attribute: "data-id",
  }
);

You can get the eye candy in this video:

Quicksand depends on jQuery 1.4+ and most any browser that isn’t abbreviated IE6.

[Source on Github] [Homepage] [Demo] [Happy Webbies!]

JSpec: Robust BDD for both client and server JavaScript #

JSpec from @visionmedia wants to be your BDD framework no matter where you run your JavaScript. JSpec supports not only JavaScript in the browser and popular client-side frameworks like jQuery, it also supports server-side JavaScript including Rhino and Node.js.

From the README specs may be written using JSpec grammar:

describe 'ShoppingCart'
  before_each
    cart = new ShoppingCart
  end

  describe 'addProducts'
    it 'should add several products'
      cart.addProduct('cookie')
      cart.addProduct('icecream')
      cart.should.have 2, 'products'
    end
  end

  describe 'checkout'
    it 'should throw an error when checking out with no products'
      -{ cart.clear().checkout() }.should.throw_error EmptyCart
    end
  end
end

or in pure JavaScript:

JSpec.describe('ShoppingCart', function(){
  before_each(function{
    cart = new ShoppingCart
  })

  describe('addProducts', function(){
    it ('should add several products', function(){
      cart.addProducts('cookie')
      cart.addProducts('icecream')
      expect(cart).to(have, 2, 'products')
    })
  })

  describe('checkout', function(){
    it ('should throw an error when checking out with no products', function(){
      expect(function(){ cart.clear().checkout() }).to(throw_error, EmptyCart)
    })
  })
})

[Source on GitHub] [Homepage]

jquery.behavior: chunk up your jQuery into ‘behaviors’ #

If you’ve written more than a trivial amount of jQuery, you quickly wonder about the best way to organize your JavaScript. @rodpetrovic’s take is called jquery.behavior:

// 1. Create behavior:
function BadBehavior(element, config) {
  this.misbehave = function () {
    alert('Oh behave!');
  }
}

// 2. Attach behavior:
$('.bad-behavior').behavior(BadBehavior);

// 3. Use behavior:
$('.bad-behavior').behavior('misbehave'); // alert('Oh behave!')

[Source on GitHub] [Homepage]

Slidify: Lightweight slider plugin for jQuery #

A lightweight jQuery plugin that transforms input elements into UI Slider controls:

Example from the README:

<input type="text" value="0" name="lol" id="lol" class="example">
<input type="text" value="0" name="lol2" id="lol2" class="example">

$(document).ready(function() {
    $(".example").slidify({
        width: 400,
        height: 20,
        /*
          wrapperClass/sliderClass are provided by default, 
          no need to specify if you don't want 
        */
        wrapperClass: "slidify_slider_container",
        sliderClass: "slidify_slider_knob",
        maxValue: 500,
        callback: null 
    });
});

[Source on GitHub] [@ryanmcgrath on Twitter]

jQuery-Haml: A Haml-like language written in JSON #

WOW! Haml is making in-roads to JSON! jQuery-haml is a Haml-like language written in JSON. This allows for easy DOM building so that web apps can do more work independent of the server for a better user experience.

You can see a small example page using it at http://static.creationix.com/jquery-haml/examples/index.html. View the source to see that all the content is built after page load.

To be clear this project was recently split. The server-side half of the component stayed at the old name of haml-js and has it’s own documentation and everything there.

Hat tip: Ushttp://thechangelog.com/post/265338825/picard-a-micro-framekwork-for-node-js

Similar to Sinatra and uses Haml-js. Looks like things are heating up for Node.js.

[code at GitHub] [demo] [homepage]