The JavaScript blog.


jquery plugins apps social images markdown

jQuery Roundup: SocialCount, Literally Canvas, Socrates

Posted on .

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


Social buttons can slow down page loading times due to a variety of reasons. One solution is to lazy load them, and this is exactly what the SocialCount (GitHub: filamentgroup / SocialCount, License: MIT) from Filament Group does. It can show "like" style buttons, counts, and lazy load the social network's original buttons.

It's designed using progressive enhancement techniques, and is tested against IE 7+, as well as the other major browsers, and various touchscreen devices. It also includes QUnit tests.

Literally Canvas

Drawing with a trackpad is tricky business.

Literally Canvas (GitHub: literallycanvas / literallycanvas, License: BSD) by Stephen Johnson and Cameron Paul is a drawing widget built with jQuery and Underscore.js. It has some basic drawing tools and can upload images to imgur.

The plugin accepts an options object that can be used to enable or disable certain features:

  backgroundColor: 'rgb(255, 0, 0)', // default rgb(230, 230, 230)
  keyboardShortcuts: false,          // default true
  sizeToContainer: false,            // default true
  toolClasses: [LC.Pencil]           // see coffee/tools.coffee


Real-time Markdown editing with Socrates.

Socrates (GitHub: segmentio / socrates, License: MIT) by Ilya Volodarsky and Ian Storm Taylor is a Markdown editor and previewer. It's built with jQuery, Backbone.js, and a client-side Markdown parser by Christopher Jeffrey.

The data is stored in Firebase, so you'll need an account with Firebase to install your own instance of Socrates.


libraries prototype audio node browser social graphs

App.net Node Module, Prototype 1.7.1, Self, Qwerty Hancock, MilkChart

Posted on .

App.net Node Module

There's already an App.net Node module: damienklinnert / appdotnet (License: MIT, npm: appdotnet. Created by Damien Klinnert, it uses the popular request HTTP module, and has Mocha tests. It supports authentication, users, and posts.

Creating a post is very simple:

client.createPost(config.post_data, function(err, post) {  
  // Do something with `post`

Prototype 1.7.1

(SFX: Simple Minds - Alive And Kicking)

Prototype 1.7.1 has been released, which includes a rewrite of the DOM code, ECMAScript 5 compatibility, as well as other bug fixes.

Many of you have wondered whether Prototype is "dead," and I can say that it definitely isn't. But because of the way I work on Prototype - months of inaction followed by a flurry of commits and bug fixes - it's fair to say that Prototype hibernates for long periods of time.


Self (License: MIT, npm: self) by Ryan Munro is a class library based on Python. It supports inheritance, mixins, static properties, and can work with plain old prototype classes and Backbone.

Self is class-based sugar that's perfect for continuation-passing style. No more var that = this;! The implicit this variable is changed to an explicit self variable that your inner functions inherit. Self plays nicely with existing prototypal, and Backbone OOP.

Self can be used with browsers and in Node programs, and includes tests for both environments.

Qwerty Hancock

Query Hancock

Qwerty Hancock (GitHub: stuartmemo / qwerty-hancock, License: MIT) by Stuart Memo is a "vector qwerty keyboard". The project's site demonstrates the keyboard by hooking it up to some Audio API code, so it's actually a reusable keyboard widget that could be used to build other music-related projects.


MilkChart (License: MIT) by Brett Dixon is a graph library for MooTools. It generates graphs that look like Excel. It's designed to transform HTML tables into charts, so it's easy to integrate it with existing markup that requires graphs.


libraries modules social parsing

Echo JS, brid.js, ql.io

Posted on .

Echo JS

Echo JS (GitHub: antirez / lamernews) is a social news site
that focuses on JavaScript. I've already found some interesting
libraries through it, and I basically read about JavaScript every day so
it gets my vote.

It's built with "Lamer News" which is a Ruby-based Hacker News
implementation. Can't someone write them a slick real-time Node version
with the cutting edge server-side and client-side libraries that we all
know and love?

If you prefer Twitter for consuming news, there's also
@echojs. It's currently getting around five posts a day which seems promising. Judging by the Twitter account,
Echo JS was launched on December 1st, so hopefully posts will increase
in regularity rather than petering out.


I'm not sure what to make of
brid.js (License: MIT, Demo: brid.js demo). It's a small Lisp implementation that uses JSON instead of S-expressions. On
one hand, it's a fun and interesting project, and on the other it seems
like affront against nature.

This is a Hello World example in brid.js:

["println", ["quote", "hello world"]]

Adding numbers looks closer to Lisp:

["+", 1, 1]
// Lisp: (+ 1 1)

Lisp's parenthesized syntax is analogous to the JSON representation, but
the quoting required to create valid JSON is a little bit hard to get
the hang of.

If you're interested in parsing in JavaScript, then you might enjoy
looking at the source. We've covered
Jison on DailyJS before, but context-free grammar isn't the only way to build parsers, and hand-coded
parsers like this are just as useful to learn from.


ql.io (GitHub: ql-io / ql.io, License: Apache 2.0) from eBay
is a "declarative, evented, data-retrieval and aggregation gateway for
HTTP APIs". It has a DSL inspired by JSON and SQL for declaring API
calls and their interdependencies.

The code itself is built on Node, and is comprised of several packages:

  • ql.io-engine: This is the core ql.io engine
  • ql.io-ecv: Checks servers are responding with JSON
  • ql.io-mon: Statistics on the ql.io runtime
  • ql.io-uri-template: A small URI template processor
  • ql.io-app: An app template for building sites using ql.io
  • ql.io-compiler: A PEG.js-based parser with a compiler (ql.peg contains the main grammar)
  • ql.io-console: Provides the HTTP interface for ql.io
  • ql.io-mutable-uri A utility for manipulating URIs

This is a diverse and complicated project, employing some interesting
techniques. I'm particularly intrigued by the use of PEGs (parsing
expression grammar) over context-free grammar, as Jison seems like the
easiest way to write parsers in JavaScript at the moment.
PEG.js (GitHub: dmajda / pegjs, npm: pegjs) is available for
Node and browsers.

Announcing ql.io at the
eBay Tech Blog has more details on the design and architecture of the


node modules scraping social facebook

Node Roundup: hotcode, fbgraph, browser

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


hotcode (License: MIT, npm: hotcode) by Mathias Pettersson is a small Express app that watches for changes on a given path, then reloads an associated app when files

To use it, follow the instructions in the project's README file. When
hotcode is run it'll print out a link to some JavaScript
(it should be -- this will need to be added to your project to get automatic reloading in
the browser.

Projects can be configured in ~/.hotcode so the path
doesn't need to be entered each time hotcode is started.
This can be set per-domain as well.

One of the interesting things about hotcode is it can be run against
practically any app in any language. If you're sick of having to restart
your app and refresh the browser every time you make a change, then
you're going to love this.


fbgraph (GitHub: criso / fbgraph, License: MIT, npm:
fbgraph) by Cristiano Oliveira provides consistent access to the Facebook graph API. According to the author:

All calls will return json. Facebook sometimes decides to just return a string or true or redirects directly to an image.

Given suitable configuration options, people can be authorised using

var graph = require('fbgraph')
  , authUrl = graph.getOauthUrl({
      'client_id':    conf.client_id
    , 'redirect_uri': conf.redirect_uri

Once the Facebook dialog has been displayed,
graph.authorize is called to complete the process and get
the access token.

API calls are made with graph.get or
graph.post, so most of the API is oriented around HTTP

graph.get('zuck', function(err, res) {
  console.log(res); // { id: '4', name: 'Mark Zuckerberg'... }

graph.post(userId + '/feed', wallPost, function(err, res) {
  // returns the post id
  console.log(res); // { id: xxxxx}

This is a clean, well-documented, and well-tested Facebook library,
which is surprisingly refreshing.


browser (License: MIT, npm: browser) by Shin Suzuki is an event-based library for browsing and scraping URLs, whilst maintaining cookies. Requests are built up using
the library's object, and then triggered with .run():

var $b = require('browser');

Building up a sequence of events is possible with the after

var $b = require('browser');


  .after(); // browse after previously registered function


Event callbacks can also be registered:

$b.on('end', function(err, res) {

Now load up jsdom and you'll be able
to scrape faster than you can say "deep-linking lawsuit"!


jquery plugins autocomplete social

jQuery Roundup: 1.6.2 RC 1, jquery-lifestream, Better-Autocomplete

Posted on .

jQuery 1.6.2 RC 1

jQuery 1.6.2 RC 1 was
released last week. This version is a maintenance release, with bug
fixes for IE, and a long-standing animation
that I ran into recently.


jquery-lifestream (GitHub: christianv / jquery-lifestream,
License: CC Attribution 3.0 Unported) by Christian Vuerings displays a
list of activity for lots of social networks, including Twitter,
Last.fm, Pinboard, and GitHub. The author has even made a little tool
that can be used to create a

Usage is straightforward:

      "service": "github",
      "user": "christianv"
      "service": "twitter",
      "user": "denbuzze"


Better-Autocomplete (License MIT and GPL) by Didrik Nordström is an autocompletion plugin that supports searching arrays, objects, and remote JSON data out of the

var colors = [
      title: 'Red',
      description: 'The color of the heart.'

  'Yellow', // You can even mix real result objects with plain strings
    title: 'Green',
    description: 'If you look at your plants, they will likely be green.'

$('#color').betterAutocomplete('init', colors, { charLimit: 1 }, {
  select: function(result) {
    alert('You selected ' + result.title);

$('#geonames').betterAutocomplete('init', 'http://ws.geonames.org/searchJSON' // ...

It makes creating "rich" result sets quite easy -- try the colours

to see what I mean. This plugin also has

Although Better-Autocomplete only targets modern browsers and the author
admits IE support isn't a priority, it seems lean and well made.