Welcome to the jQuery Roundup 27. You can send your plugins in for review through our contact form or @dailyjs.

jQuery 1.4.3 Release Candidate 1

jQuery 1.4.3 Release Candidate 1 has been released. The areas that have major changes are:

• CSS handling methods
• Logic for determining element visibility and toggling of display in animation code
• Traversing logic (is, filter, closest, find)

There’s no release notes yet (unless you feel like reading through lots of commit logs):

Full details concerning the release are forthcoming – for now we just need your help in catch regressions.

jQuery at Dusk

jQuery at Dusk by James Padolsey is a book about jQuery. It refers to jQuery’s internals a bit like our Let’s Make a Framework series, so if you’re an experienced jQuery hacker but haven’t tinkered under the hood it might be worth reading. The book has been around a while (last update was 29th March), but it’s new to me.

jQuery Placeholder

jQuery Placeholder (MIT and GPL) by Michael J. Ryan adds placeholder text to input fields using a label tag:

This tag will then be absolutely positioned over the text input, so that it displays over the top when the input has no value, and is not focused.

The author has provided some suitable CSS, referencing html5 placeholder support.

jQuery-Placeholder

Almost the same day, Daniel Stocks sent us jQuery-Placeholder. Is there some kind of war of placeholder supremacy going on? Anyway, this one is designed to bring HTML5 placeholder support back to older browsers. Stocks says it supports IE6 as well. There’s a demo with more browser support details.

jQuery Collapse

I noticed the same author also created jQuery-Collapse (available on GitHub) which can be used to make “progressive disclosure” panels, with state saved to cookies.

The plugin has been designed with WAI-ARIA in mind which defines a way to make Web content and Web applications more accessible to people with disabilities.

Functional Koans by David Laing is a way of learning functional JavaScript through testing. Each koan has associated tests that fail, and your job is to correct the code to make them pass. The koans presents a fundamental concept which you must master to be able to fix the code.

The project is based on Ruby Koans by Jim Weirich, which made a fairly big impact amongst Ruby developers. The word Koan is used in reference to Zen Buddhism:

As part of the training of teachers, monks, and students, koan can refer to a story selected from sutras and historical records. They may consist of a perplexing element or a concise but critical word or phrase extracted from the story.

Ringo 0.6

Ringo 0.6 is out, which includes improvements to http server and client libraries, no more extending JavaScript objects (that code is now effectively namespaced), CommonJS unit testing, and bunch of other changes.

The RingoJS tutorial has “App Engine Deployment” listed in the table of contents, but the content hasn’t been written yet. Gabriel Munteanu took this example and extended it to work more like a fully-functional blog, and called it Ringopress. The project’s documentation explains how to configure and deploy App Engine. If you’re new to Ringo or App Engine, this might be a nice project to play around with.

If you haven’t yet looked into App Engine and JavaScript, AppengineJS is a JavaScript port of the Python SDK by George Moschovits.

eyeballs.js

eyeballs.js (MIT License) by Paul Campbell is an MVC framework that works with a library like jQuery or Prototype, yet provides a layer of features for organising your code.

eyeballs.js can sit on top of an already implemented web app with a well thought out object model. It can also be used to build standalone javascript apps, backed by HTML5 local storage or something like CouchDB.

Models are defined like this:

o_O('Post', function(post) {});

o_O('Post', function(post) {
  post.validates_presence_of('title')
});

var post = Post.initialize({ title: 'All work and no play makes Alex...' });

Now you can see where the library gets its name from. I’m not sure if I’ll get tired of typing o_O, admittedly it made me laugh.

Routing and controllers work using the URL hash, much like many similar frameworks out there. The framework ships with tests and a little Sinatra app so REST can be tested.

Artisan JS

Artisan JS (GPL/MIT) by David Brooks is another Canvas library. It targets Canvas specifically, so it doesn’t work with IE. You might be wondering why you’d bother with such a library when Raphael is cross-browser and very popular; well, it may suit projects when you really do only need to work with Canvas but you’re frustrated with the Canvas API.

Brooks has included support for layered data — graphics can be layered and flattened when rendered, but the data remains. This means the data can continue to be manipulated after it is rendered — read more in Layers in Artisan JS.

The Artisan site has some good documentation, and there’s also a GitHub repository at davidbrooks / Artisan.

Markup.io

I don’t usually feature commercial projects here — this site is more of an open source kind of place. But I was impressed by Markup.io, it’s a web annotation service built using Node, Express and Connect.

Whenever I work with new technology my boss at the time (or client) asks “so what commercial projects are built with this?” I’m going to add Markup.io to my growing list of JavaScript server-side app bookmarks. Please send yours in as well, whether they’re Node, Rhino, Ringo, Narwhal… or something else!

Welcome to part 33 of Let’s Make a Framework, the ongoing series about building a JavaScript framework.

If you haven’t been following along, these articles are tagged with lmaf. The project we’re creating is called Turing.

Last week I wrote about packaging the project using Node scripts. This week I’m going to talk about feature detection.

querySelectorAll

The selector engine we built for the core of turing.dom was based on the way Firefox interprets CSS selectors. I liked the approach for the context of these tutorials, because it’s a very pragmatic approach that’s easy to follow.

Browsers have been shipping with querySelectorAll for a while, which reduces the amount of work required to implement DOM lookups.

That means turing.dom.get could be rewritten:

// Original code minus all the
// magic in the Searcher class and tokenizer
dom.get = function(selector, root) {
  var tokens = dom.tokenize(selector).tokens,
      searcher = new Searcher(root, tokens);
  return searcher.parse();
};

// New selector API
dom.get = function(selector) {
  return document.querySelectorAll(selector);
};

But not all browsers support this yet, so let’s check if it’s available:

dom.get = function(selector) {
  var root = typeof arguments[1] === 'undefined' ? document : arguments[1];
  if ('querySelectorAll' in document) {
    return root.querySelectorAll(selector);
  } else {
    return get(selector, root);
  }
};

In the Wild

jQuery will check for querySelectorAll, but it’ll only use it under certain conditions. This is from jQuery 1.4.2:

if (document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle, div = document.createElement("div");
    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

    Sizzle = function(query, context, extra, seed){
      context = context || document;

      // Only use querySelectorAll on non-XML documents
      // (ID selectors don't work in non-HTML documents)
      if ( !seed && context.nodeType === 9 && !isXML(context) ) {
        try {
          return makeArray( context.querySelectorAll(query), extra );
        } catch(e){}
      }

      return oldSizzle(query, context, extra, seed);
    };

    for ( var prop in oldSizzle ) {
      Sizzle[ prop ] = oldSizzle[ prop ];
    }

    div = null; // release memory in IE
  })();
}

The use of an element for capability detection is common in frameworks — sometimes it’s the only reliable way of detecting a browser’s behaviour.

It’s a little bit different in Dojo 1.5, but the same Safari issue is mentioned:

  // some versions of Safari provided QSA, but it was buggy and crash-prone.
  // We need te detect the right "internal" webkit version to make this work.
  var wk = "WebKit/";
  var is525 = (
    d.isWebKit && 
    (nua.indexOf(wk) > 0) && 
    (parseFloat(nua.split(wk)[1]) > 528)
  );

  // IE QSA queries may incorrectly include comment nodes, so we throw the
  // zipping function into "remove" comments mode instead of the normal "skip
  // it" which every other QSA-clued browser enjoys
  var noZip = d.isIE ? "commentStrip" : "nozip";

  var qsa = "querySelectorAll";
  var qsaAvail = (
    !!getDoc()[qsa] && 
    // see #5832
    (!d.isSafari || (d.isSafari > 3.1) || is525 )
  );

  //Don't bother with n+3 type of matches, IE complains if we modify those.
  var infixSpaceRe = /n\+\d|([^ ])?([>~+])([^ =])?/g;
  var infixSpaceFunc = function(match, pre, ch, post) {
    return ch ? (pre ? pre + " " : "") + ch + (post ? " " + post : "") : /*n+3*/ match;
  };

  var getQueryFunc = function(query, forceDOM){
    //Normalize query. The CSS3 selectors spec allows for omitting spaces around
    //infix operators, >, ~ and +
    //Do the work here since detection for spaces is used as a simple "not use QSA"
    //test below.
    query = query.replace(infixSpaceRe, infixSpaceFunc);

    if(qsaAvail){
      // if we've got a cached variant and we think we can do it, run it!
      var qsaCached = _queryFuncCacheQSA[query];
      if(qsaCached && !forceDOM){ return qsaCached; }
    }

    // Snip

Here the browser and version are derived from the user agent string.

has.js

I recently wrote about has.js which is a clever little project that contains a library of feature detection tests.

Browser sniffing and feature inference are flawed techniques for detecting browser support in client side JavaScript. The goal of has.js is to provide a collection of self-contained tests and unified framework around using pure feature detection for whatever library consumes it.

Using has.js as inspiration, we should be able to rewrite the previous code like this:

dom.get = function(selector) {
  var root = typeof arguments[1] === 'undefined' ? document : arguments[1];
  return turing.detect('querySelectorAll') ?
    root.querySelectorAll(selector) : get(selector, root);
};

Feature Detection Implementation

Making a library of feature tests is fairly easy with a plain Object. Tests can be referred to by name and easily looked up at runtime. Also, a cache can be used to store the results of the tests.

The core of this functionality is something inherent to JavaScript programming rather than just browser-related, so I put this in turing.core.js:

var testCache = {},
    detectionTests = {};

turing.addDetectionTest = function(name, fn) {
  if (!detectionTests[name])
    detectionTests[name] = fn;
};

turing.detect = function(testName) {
  if (typeof testCache[testCache] === 'undefined') {
    testCache[testName] = detectionTests[testName]();
  }
  return testCache[testName];
};

The results are cached because they should only be run once. This type of capability detection is intended to be used against the environment, rather than features that might load dynamically in runtime, so I think it’s safe to run the tests once.

Then the jQuery-inspired querySelectorAll test can be added in turing.dom.js:

turing.addDetectionTest('querySelectorAll', function() {
  var div = document.createElement('div');
  div.innerHTML = '<p class="TEST"></p>';

  // Some versions of Safari can't handle uppercase in quirks mode
  if (div.querySelectorAll) {
    if (div.querySelectorAll('.TEST').length === 0) return false;
    return true;
  }

  // Helps IE release memory associated with the div
  div = null;
  return false;
});

Conclusion

Looking through popular JavaScript frameworks made me realise that most of them still use the user agent string to determine what capabilities are available. This might be fine most of the time, but I don’t consider it best practice. The way jQuery tests capabilities using techniques like the dummy DOM element creation seems like a lot of work, but it relies on browser behaviour rather than the user agent string.

I originally wanted to write this article about querySelectorAll and its family of related methods, but adding generic capability detection support became an interesting little rabbit hole. I hope this illustrates how simple tasks can require extra effort to make code highly reusable.

Welcome to the Node Roundup. Send in your apps and libraries using our contact form or @dailyjs.

Faker.js

Faker.js (MIT License) by Marak Squires can be used in Node or a browser. It allows fake data to be generated, for testing or rapid prototyping:

var Faker = require('./Faker');
Faker.Name.findName(); // Maximillia Hodkiewicz
Faker.Internet.email(); // Gabriella.Hermann@bartholome.co.uk

There’s a demo showing the types of data the library can generate.

I like using libraries like this with factories for quickly writing tests (yes, I’m that lazy!)

Nodestream

Nodestream released through LearnBoost under an MIT License is a library used to connect realtime code to templates. It’s built on Jade and Socket.IO and adds a :realtime option to your Jade templates.

The simple example in the documentation demonstrates how to count the number of people viewing your site:

var connections = 0;
var nodestream = io.listen(app).nodestream()
  .on('connect', function(){
    connections++;
    this.emit('connections', connections);
  })
  .on('disconnect', function(){
    connections--;
    this.emit('connections', connections);
  });

Template:

:realtime(repaint: 'connections', local: 'connections')
  .connections
    - if (connections > 1)
      p #{connections} people are editing right now
    - else
      p You're all alone, loser

The Socket.IO library (server, client) supports various transports depending on the browser: WebSocket, Flash, forever iframe, XHR long polling, and XHR multipart encoded. These are abstracted to look like a WebSocket-like API.

Soda

Also from LearnBoost (by TJ Holowaychuk and Adam Christian) is Soda, which is a Selenium adapter for Node. This allows you to script browser tests, like this:

browser
  .chain
  .session()
  .open('/')
  .type('q', 'Hello World')
  .testComplete()
  .end(function(err){
    if (err) throw err;
    console.log('done');
  });

Lingo

Meanwhile, I noticed TJ has released Lingo, which provides inflection support and other string transformations. For example:

en.pluralize('fox');
// foxes

en.singularize('foxes');
// fox

lingo.capitalize('hello there');
// Hello there

There’s i18n support and a bunch of other methods.

STDIN Support for Node

While I was looking through Lingo I saw that TJ also wrote a Node patch to add STDIN args. His patch adds – and —stdin flags to the command line arguments. I didn’t realise Node couldn’t do this already, which is surprising because it’s pretty important for shell scripts.

Welcome to the jQuery Plugin Roundup 26. You can send your plugins in for review through our contact form or @dailyjs.

jquery-swapable

jquery-swapable (MIT License) by Vadim Kiryukhin is a little bit like Sortable but instead swaps items. Usage is similar to Sortable, except it also requires a cursorAt parameter:

$('#swappable').swappable({
  items: '.itemClass',
  cursorAt: { top: -10 } 
});

It will work with lists, grids, and horizontal rows.

The project is hosted on Google Code: jquery-swapable.

jQuery Templates

I’ve mentioned Scott Guthrie’s Microsoft-supported jQuery plugins before, but now there’s news jQuery Templates will be included with jQuery 1.5.

Read more in jQuery Templates, Data Link, and Globalization Accepted as Official jQuery Plugins.

jquery.sg.video

jquery.sg.video (MPL) by Filippo Pacini is based on Video for Everybody, an idea put forward by Kroc Camen. The plugin uses feature detection from Modernizr, and can provide information on format support through $.support.video. For example, the browser I’m using right now returns this:

{"ogg": "", "h264": "probably", "webm": ""}

If your videos have the same file name with different extensions for each format, you can set up a video like this:

 $('#video-container').video('video_file_name', options);

This is a minimal yet useful plugin — most video plugins attempt to provide a complete solution, with fancy player graphics and other features. This one keeps things simple instead.

Zepto.js is a small library for working with mobile WebKit browsers by Thomas Fuchs and released under the MIT License. The library’s API is similar to jQuery, allowing method chaining, and familiar syntax for and element functions. Here are a few examples:

// Return paragraph tags
$('p')

// Change the HTML inside a paragraph
$('p').html('Hello World')

// Change the style too
$('p').html('Hello World').css('background-color: red')

// Iterate over each element
$('div').each(function(element) {
  // element is the actual node
})

// Animate an element using webkit-transform
$('div').anim('rotate(720deg)', 0.5, 10);

Zepto contains a lot of tricks to keep the library size down. Targeting WebKit is one way it keeps a smaller size — if you follow our framework series you’ll know how much work cross-browser support can be.

The first thing I noticed was a lot of void 0, rather than a comparison against undefined or typeof variable === 'undefined'.

The chained API is created by returning fn inside $():

function fn(_){ return fn.dom.forEach(_), fn }

Because $() can accept many different types (Array, String, Element), there’s a complicated set of ternary operators to correctly set up the DOM querying state. It looks confusing at first, but there’s some neat code in there. For example, to check if the function has already been run on the argument, (typeof _ == 'function' && 'dom' in _) will return true. Here the in operator is used to detect a property. Just to illustrate:

'dom' in { 'dom': 'example', 'another': 'example 2' }
// true
'another' in { 'dom': 'example', 'another': 'example 2' }
// true
'example' in { 'dom': 'example', 'another': 'example 2' }
// false

Fuchs has been actively updating Zepto since he announced it. It’s full of interesting tricks to keep space down (like Emile), but use what you learn from these libraries with caution — they’re specifically designed to be small rather than easy for colleagues and collaborators to read!

Fuchs also released JS1k intro: fun with CSS transforms and hardware acceleration today (madrobby / js1k-finals) which is like a mini old school scene demo.

Tutorial: Simple Game with HTML5 Canvas

Michal Budzynski has written another HTML5 game tutorial. This one is a five part series: here’s part one.

These tutorials are based on Michal’s 10k entry, and cover set up, animation, physics, controls, collisions, scrolling, and game states.

has.js

has.js by Peter E Higgins, tentatively released under three licenses (Academic Free License, New BSD License, and the MIT License), is a library of tests for feature detection. The author’s first example illustrates the intended usage:

mylibrary.trim = has('string-trim') ? function(str) {
    return (str || '').trim();
} : function(str) {
    /* Implement trim here */
}

Tests can be added like this:

has.add("some-test-name", function(global, document, anElement) { });

Higgins mentions that it’s likely that people will use portions of the library rather than the entire thing. The project doesn’t have a build script yet, but I imagine in future their build script will allow the required tests to be specified to.

Take a look at the tests in detect/ to get a feel for the library.

Why is getElementsByTagName() faster that querySelectorAll()?

In Why is getElementsByTagName() faster that querySelectorAll()? Nicholas C. Zakas discusses the performance characteristics of the NodeList object for static and live NodeLists.

The author refers to WebKit source code, so he’s dug into the issue pretty deeply:

Live NodeList objects can be created and returned faster by the browser because they don’t have to have all of the information up front while static NodeLists need to have all of their data from the start. To hammer home the point, the WebKit source code has a separate source file for each type of NodeList: DynamicNodeList.cpp and StaticNodeList.cpp.

Welcome to part 32 of Let’s Make a Framework, the ongoing series about building a JavaScript framework.

If you haven’t been following along, these articles are tagged with lmaf. The project we’re creating is called Turing.

Last week I wrote about building an event delegation chaining API. This week I’m going to talk about packaging.

Packaging with Node

In part 12 I talked about using Narwhal to create a Jakefile to build and minimise Turing. I thought it would be interesting to look at doing the same thing with Node, because I know a lot of DailyJS’s readers already have Node installed.

I’m using node-jake, available from npm with npm install jake.

Detecting Node or Rhino

At the moment Narwhal uses Rhino. Narwhal and Node have slightly different globals available, so I’m using these to detect the active environment:

if (typeof global.system === 'undefined') {
  nodeTasks();
} else {
  narwhalTasks();
}

If you’re writing your own build tasks I strongly recommend selecting a single build tool (or perhaps one to suit each major platform). My Jakefile only caters for both to support these tutorials, it’s actually rather impractical.

File Concatenation

I’ve made the concat task synchronous to make it easier to read:

task('concat', [], function () {
  var files = ('turing.core.js turing.oo.js turing.enumerable.js '
              + 'turing.functional.js turing.dom.js turing.events.js '
              + 'turing.touch.js turing.alias.js turing.anim.js').split(' '),
      filesLeft = files.length,
      pathName = '.',
      outFile = fs.openSync('build/turing.js', 'w+');

  files.forEach(function(fileName) {
    var fileName = path.join(pathName, fileName),
        contents = fs.readFileSync(fileName);
    sys.puts('Read: ' + contents.length + ', written: ' + fs.writeSync(outFile, contents.toString()));
  });
  fs.closeSync(outFile);    
});

The output file is opened first, then each file is read into it.

Minifier

There’s also a npm package for minimising JavaScript, called node-jsmin. It’s pretty easy to use:

var jsmin = require('jsmin').jsmin;
jsmin(code);

This is based on Crockford’s original script. You might get better results by pasting Turing into Google Closure or Dean Edwards’ Packer.

For now I’m going to stub this task out until there’s a better minifier.

I haven’t found any particularly strong minifiers for Node yet. jQuery actually uses Google’s compiler, as a Jar file. That means they can also run jslint as well, which is useful. These could be run in our Jakefile simply by shelling out. It’s also interesting to note that jQuery will build with unix make, Ruby’s rake and ant (which makes life easier for Windows users).

Organising Tasks

node-jake allows you to run a list of tasks before the current one:

desc('Main build task');
task('build', ['concat', 'minify'], function() {});

This is equivalent to the old Narwhal build task:

jake.task('build', ['concat', 'minify'])

280 North’s Jake is clever enough to realise a function hasn’t been specified, whereas the current version of node-jake will crash if you run: task('build', ['concat', 'minify']);

Running Tasks

After installing node-jake, run it with jake -T to see a list of tasks. To build the project, run jake build.

A default task could be added (called default) but I’d like to use that to generate documentation and I haven’t picked a JavaScript-friendly documentation system to do that yet.

Conclusion

Both node-jake and 280 North’s Jake are largely compatible, and are good choices for your own project. If you’re working on a node or Narwhal project, the choice is obvious, but when you’re building a web-based library it’s really up to you.

Welcome to the Node Roundup. Send in your apps and libraries using our contact form or @dailyjs.

Node.js Memory and GC Benchmarks

In Update on my Node.js Memory and GC Benchmark by Hannes Wallnöfer, the author discusses a conversation with Ryan Dahl about Node’s garbage collection performance in reference to RingoJS vs. Node.js: Runtime Values.

V8 uses a stop-the-world garbage collector, which technically means it will stop execution when performing garbage collection. The intention of V8’s design is to make an accurate and reliable garbage collector. The Design Elements document explains this in more detail.

What Wallnöfer appears to be saying is V8 isn’t perfectly tuned to the types of workloads we see in web applications. I think he makes a good point, but as I haven’t had any gripes about real world performance with Node it’s not something I’m too worried about right now.

Nutshell

Nutshell by Shahriar Haque, available at shahriarhaque / nutshell is a unix shell that runs on Node. The author’s example makes usage pretty clear:

ls -l | filter ""function(file) { return file.size < 2000; }""

In a sh style shell this would be written as follows:

ls -l | awk '{ if ($5 < 2000) { print $0 }}'

Haque’s idea is to try to make the shell more intuitive:

But if the second command is to do anything useful with this input, it has to go and parse it first. That’s what the awk command is doing. It is splitting the output of ls -l ,taking the 5th token of each line, performing the comparison, and printing the whole line if the test succeeds. This is where shell scripting is unproductive. It’s all about parsing output

Why node.js disappoints me

Why node.js disappoints me by Eric Florenzano is a brief critique of Node. I feel like the author might be a little irked by the constant stream of excited coverage (Hacker News loves those Node articles), but I still found the post interesting.

Yet one of Node’s advantages that you’ll hear repeated again and again by its proponents is that you can now code in One Language, and you won’t have to deal with the cognitive load of context switching between different languages.

I personally haven’t heard that sentiment repeated “again and again” — I became interested in Node because I respected the work that went into V8 and enjoy writing JavaScript. My JavaScript skills carry over intuitively and Node builds easily on all of my platforms, so I never really thought about it like that.

He also mentions that people have written libraries for Node that depend on Node, which effectively makes the Node environment a subset of JavaScript. There are libraries out there which are distributed with npm but work in a browser or another JavaScript interpreter. I’m not sure if the author is familiar with CommonJS, but the Node developers certainly don’t work in ignorance of it.

The article has some good comments by the usual suspects (Tim Caswell for example), which are generally not of the screaming-and-pitchfork-waving variety but more like a real conversation.

Welcome to the jQuery Plugin Roundup 25. You can send your plugins in for review through our contact form or @dailyjs.

Lettering.js

Lettering.js by Dave Rupert (and some other folks) can split a container into spans that contain each letter, like this:

$(".fancy_title").lettering();

Which generates:

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

It’s hard to visualise what kind of effects might be possible with this plugin, but the heading in the blog post is a great example (pictured above).

Word wrap can also be used. The author makes an interesting point about performance in the blog post:

Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document . On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don’t see the FOUT.

This plugin is available on GitHub: davatron5000 / Lettering.js. There’s no licensing information yet.

jSlider

I’ve covered quite a few of these plugins now, but this one is shaping up to be a smart little project. jSlider (GPL/MIT) by Fredrik Forsmo is an extensible image slider. Just run $.jSlider('#container') and you’re done.

The project is on GitHub at Frozzare / jSlider.

Catch My Fame

The Catch My Fame site also has a lot of jQuery gallery plugins. Panel Gallery in particular has a lot of effects and is interesting because it doesn’t require images to be sliced or edited, it’ll shove images into containers appropriately.

JSConf.eu – 2010 was this weekend, so a lot of interesting things have been going on in the JavaScript community. I wasn’t actually at the conference, but Oleg (who interviewed Ryan Dahl) stopped by, which means we should have more awesome interviews soon.

Videos of the talks haven’t been posted yet, so keep your eyes on @jsconfeu.

JS1k Winners

The JS1k winners were announced at the conference, with Legend Of The Bouncing Beholder by Marijn Haverbeke taking the top prize. This is also one of the demos that most impressed me, in particular the whimsical graphics.

I feel like this contest was a huge success, and has been both well-received and respected by the community. I look forward to the next one!

Slides

I’ve compiled all the slides I could find from the talks:

• Browser Extensions for Web Hackers by Mark Wubben (source)
• JavaScript + Web Standards II: The Quickening by Jenn Lukas
• The Front-end Takeover by Aaron Quint
• Pirating the Semantic Web with JavaScript by Thomas Steiner
• Rapid Prototyping for Multiple Platforms with JavaScript by Joe McCann
• Lessons learnt pushing browsers to the limit by Ben Firshman
• PhoneGap: Love the Web and Lose the SDK by Brian LeRoux
• Techniques and Tools for Taming Tangled Twisted Trains of Thought by Tim Caswell (PDF)

Announcements

Joyent quietly announced a limited public beta of their Node.js service. The people who have been playing with it seem impressed so far.

Promotejs.com was widely shared during the conference. It’s an attempt to get better search engine results for serious JavaScript documentation (instead of dodgy dotcom-era sites).

Sound bites

‘Does it run JavaScript’ is the new ‘Does it run Linux’ @phiggins

Don’t know about you, but to me, giving a talk with Brendan Eich and Douglas Crockford in the audience is pretty intimidating. :-) @robertnyman

I don’t know an unemployed JavaScript developer. @rmurphey

surrounded by sleepless drunk people listening to crockford – it must be jsconf @aq

Thanks all for making this night so very memorable. @jsconfeu

Sequelize

Sequelize by Sascha Depold is an ORM for Node and MySQL. It can be installed with npm install sequelize. Creating mappings to tables is straightforward:

var Project = sequelize.define('Project', {
  title: Sequelize.STRING,
  description: Sequelize.TEXT
})

After defining these structures, Sequelize can create suitable tables:

Project.sync(function(table, error) {
})

This library also supports associations:

Project.hasMany('tasks', Task, 'projects')

And finders with a familiar API:

Project.find(1, function(project) {
})

I like the look of the chainQueries method, which is a query chaining helper.

Son

Son by Tim Farland converts JSON to CSS — it’s a little bit like Sass but designed to be more JavaScript-native. This example is provided in the README:

(function(){
  var myColour = '#ff0000';
  var styles = {
    "#navbar": {
      width: "80%",
      height: "23px",
      ul: {
        list: {
          "style-type":  "none"
         }
      },
      li: {
          "float": "left",
          border: "1px solid " + myColour,
          padding: "10px",
          a: {
              "font-weight": "bold",
              color: myColour
          }
      }
  };

  return styles;
})();

As well as variable support, it also has a mixin helper. The author has written up a list of gotchas and ideas for future features, so it seems like he’s using it actively.

Welcome to part 31 of Let’s Make a Framework, the ongoing series about building a JavaScript framework.

If you haven’t been following along, these articles are tagged with lmaf. The project we’re creating is called Turing.

Last week I wrote about event delegation in popular frameworks. This week I’ll demonstrate a simple implementation for Turing.

dom.findElement

This method will make dealing with event delegation much easier. Recall last week’s tutorial:

$('navigation').observe('click', function(event) {
  var element = event.findElement('a');
  if (element) {
    // Handler
  }
});

This Prototype code simply uses the event’s target element to see if it matches a selector. Turing’s delegation API could wrap this up a method with a signature like this:

turing.events.delegate(document, selector, 'click', function(e) {
  // Handler
});

The body of delegate will look a bit like the Prototype example above.

There’s a few obstacles to building findElement with Turing’s event library as it stands though. A few months ago we built a class called Searcher that can recurse through the DOM to match tokenized CSS selectors.

The Searcher class could be reused to implement findElement, the matchesAllRules method in particular is of interest.

Tests

I’d like the following tests to pass (events.js):

given('a delegate handler', function() {
  var clicks = 0;
  turing.events.delegate(document, '#events-test a', 'click', function(e) {
    clicks++;
  });

  should('run the handler when the right selector is matched', function() {
    turing.events.fire(turing.dom.get('#events-test a')[0], 'click');
    return clicks;
  }).equals(1);

  should('only run when expected', function() {
    turing.events.fire(turing.dom.get('p')[0], 'click');
    return clicks;
  }).equals(1);
});

To get there, we need findElement and corresponding tests (dom.js):

given('a nested element', function() {
  var element = turing.dom.get('#dom-test a.link')[0];
  should('find elements with the right selector', function() {
    return turing.dom.findElement(element, '#dom-test a.link', document);
  }).equals(element);

  should('not find elements with the wrong selector',function() {
    return turing.dom.findElement(turing.dom.get('#dom-test .example1 p')[0], 'a.link', document);
  }).equals(undefined);
});

This test depends on the markup in dom_test.html.

Adapting the Searcher Class

After I looked at matchesAllRules, in turing.dom.js I realised it shouldn’t be too hard to make it more generic. It previously took an element and searched its ancestors, but we need to include the current element in the search.

To understand why, consider how findElement should work (this is simplified code):

dom.findElement = function(element, selector, root) {
  while (element) {
    if (matchesAllRules(selector, element)) {
      // We've found it!
      return element;
    }
    // Else try again with the parent
    element = element.parentNode;
  }
};

All I had to do was refactor code that relies on matchesAllRules to pass an element’s parentNode instead of the element itself.

The start of the matchesAllRules method now looks slightly different:

Searcher.prototype.matchesAllRules = function(element) {
  var tokens = this.tokens.slice(), token = tokens.pop(),
      matchFound = false;

The code that refers to the ancestor element has been removed and the element argument is used instead.

The Event Delegation Method

We need to wrap the user’s event handler with one that checks the element is one we’re interested in, and other than that it’s standard Turing event handling:

if (turing.dom !== 'undefined') {
  events.delegate = function(element, selector, type, handler) {
    return events.add(element, type, function(event) {
      var matches = turing.dom.findElement(event.target, selector, event.currentTarget);
      if (matches) {
        handler(event);
      }
    });
  };
}

This code checks to see if dom is available because we don’t want interdependence between the modules. Then it sets up a standard event handler and uses findElement to ensure the event is one we’re interested in.

Conclusion

This implementation is very naive and there’s no easy delegate event removal, but it illustrates the fundamentals: event delegation depends on existing DOM methods and event handling to be developed in a reusable style.

Welcome to the Node Roundup. Send in your apps and libraries using our contact form or @dailyjs.

Streamie

Streamie (try Streamie here) by Malte Ubl is a Twitter client implemented with Node — the source is released under a Simplified BSD License. The author has tried to make the project as cutting edge as possible, using HTML5 and CSS3. He has also written a great blog post detailing how to get started hacking your own version: I just forked a running website: Streamie.org.

The project uses lots of other interesting things, like Less.js, Require.js, and Socket.IO.

daemon.node

daemon.node is a Node module for creating daemons. The author also wrote a blog post, Writing Daemons in Javascript with node.JS which is informative if you haven’t done that sort of thing before. The process is similar to most languages, and in this instance the module is implemented in C++.

node-video

node-video by Peteris Krumins is a module for encoding Theora/Ogg videos from RGB buffers. The author said the following on his blog, catonmat.net:

I wrote this module for my StackVM startup so that anyone could record virtual machine video screencasts. See StackVM demo video #1 at around 1min 23secs, where I demo this module in action.

Welcome to the jQuery Plugin Roundup 24. You can send your plugins in for review through our contact form or @dailyjs.

In this week’s jQuery Roundup I’m going to review some of my favourite jQuery UI themes and related extensions.

jQuery UI

If you’re not familiar with jQuery UI, it’s a collection of useful abstractions for animations and themeable widgets. The APIs for each component are consistent and easy to learn.

• Demos and documentation
• Themes — Themeroller can be used to quickly make your own themes

jQuery UI is split into interactions, widgets, and effects. Interactions include things like a drag and drop API, which can be combined with most interface elements to give your application an intuitive feel. Widgets are high-level, with a nice Datepicker and tabs. The effects APIs will be familiar to those of you schooled in Scriptaculous.

The jQuery UI design and planning wiki has a status for current and planned work. There are many useful things in the planning stage, in particular the tree view and even a data visualisation API.

Aristo

Aristo by Tait Brown (demo) is a theme based on Cappuccino’s theme. The look and feel is best described as Mac-like, and you can get great results with little effort.

It’s licensed under Attribution-ShareAlike 3.0 which allows you to remix and share the work. You must attribute the theme, and it’s distributed under permission from 280 North and Pinvoke.

Absolution

Absolution by Michaël Vanderheeren (demo) is another jQuery theme that attempts to go beyond the defaults provided by jQuery UI. The author actively updates the repository (as do the Aristo developers).

Uniform

We’ve covered Uniform before, and it’s not specifically for jQuery UI, but it works well in combination with it. Uniform replaces standard form controls with themed ones which work like real controls but are cross-browser (and arguably look better).

Pixastic

Pixastic (MPL) uses the canvas element to apply effects to images. The supported effects include blur, noise, emboss, brightness/contrast, desaturate, and noise removal.

The source code is available on GitHub under jseidelin/pixastic. There’s also a photo editor demo that uses the library.

Like many similar libraries, the core of the plugin relies on getImageData from the canvas API.

A JavaScript TLS Implementation

Forge is a JavaScript TLS implementation. TLS (Transport Layer Security) is a cryptographic protocol for secure client/server communication. Forge currently depends on Flash for sockets, but it could remove the dependency in the future.

The authors have written a detailed background to the library in two parts, including the rationale behind implementing TLS in JavaScript:

• Part 1
• Part 2

Wink: not just another mobile JavaScript framework

About two months ago, Orange Labs released the Webapp Innovation Kit (Wink) within the Dojo Foundation. Wink is an Open Source mobile JavaScript framework primarily targetting the mobile WebKit based browsers you can now find on the iPhone or Android platforms.

It has been thought and built to meet the constraints of the mobile environment (low bandwidth, limited device resources, various screen sizes). People working on Wink really tried to keep it smart and simple.

Wink has been divided in several packages:

Wink core (20kb minified) offers all the basic functionality a developer would need (performing XHR, manipulating the DOM, publishing events, applying CSS transforms…) plus some useful mobile only features like touch events handling.

Wink ui gathers all the graphical components of the toolkit. Some are quite familiar like the date picker or the carousel whereas it’s more surprising to see a full HTML 3D tag cloud running on a mobile browser.

These examples demonstrate some of the 3D features:

• Carousel
• Tag cloud

In this package you can also find layouts like scrollers (preview) or sliding panels if you which to make your application “iPhone-like”.

In Wink ux, you can find everything related to user interaction. Of course, touches and multitouch gestures but also related stuff like Drag and Drop (preview), or even the adaptation of a gesture recognition engine (preview).

Wink ux also offers solutions to handle the browser’s history or to detect orientation changes on devices other than the iPhone.

Wink net includes a set of loaders. The JsLoader can load external JavaScript ressources, which can be very useful in a mobile environment when you don’t want everything to be downloaded at the page startup, but it is also adapted for JSONp. Images and CSS preloading are also part of the package.

The instantiation of the components always stays simple and allways follow the same pattern. For instance, if you want to load images and data asynchronously:

jsLoader = new wink.net.JsLoader();
jsLoader.load('http://server2.example.com/getjson?jsonp=parseResponse');

imagesLoader = new wink.net.ImagesLoader();
imagesLoader.load([
  './img/test1.jpg',
  './img/test2.jpg',
  './img/test3.jpg'
   ]);

Wink fx contains all the CSS effects libraries to help you with the 2D and 3D transforms; the Wink API provides abstraction layers above the HTML5 local storage and geolocation and the new Wink multimedia package now contains an HTML5 audio player for iPhone and iPad.

Where Can I Find Wink?

Wink can be downloaded directly at http://www.winktoolkit.org/

What New Features Can We Expect?

The team is currently working on new features:

• Feature detection
• HTML5 video player for iPad
• UI components based on the canvas tag
• Easy resource caching (for better performance)
• New layouts and more

Welcome to part 30 of Let’s Make a Framework, the ongoing series about building a JavaScript framework.

If you haven’t been following along, these articles are tagged with lmaf. The project we’re creating is called Turing.

Last week I wrote about mixing event handlers into the DOM finder chainable API. This week I’ll cover event delegation.

Ryan Cannon commented on last week’s post to ask where event delegation was. I was planning on leaving this out until later, but Ryan reminded me how important event delegation is to modern browser-based JavaScript.

Event Delegation

Event delegation is where an event is attached to a parent element (or the whole document), then selectors are used to determine if a handler should run.

Consider the following markup:

<ul id="navigation">
  <li><a href="#page_1">Page 1</a></li>
  <li><a href="#page_2">Page 2</a></li>
  <li><a href="#page_3">Page 3</a></li>
</ul>

An event handler could be attached to #navigation and watch for clicks on the links. The advantage of this is new links can be added (perhaps through Ajax) and the event handler will still work. It also uses less events when compared to attaching events to each link.

This approach was a revelation 5 or 6 years ago, but it’s now considered best practice for a wide range of applications.

Implementations

jQuery offers two methods for dealing with this:

$('#navigation a').live('click', function() {
  // Handler
});

$('#navigation').delegate('a', 'click', function() {
  // Handler
});

The live and delegate methods are very similar and share the same code underneath.

The way this used to work in Prototype (and other Prototype-influenced frameworks) was like this:

$('navigation').observe('click', function(event) {
  var element = event.findElement('a');
  if (element) {
    // Handler
  }
});

As you can see, jQuery’s API saves a little bit of boilerplate code. Prototype 1.7 introduced on which can be used like this:

$('navigation').on('click', 'a', function(event, element) {
  // Handler
});

This is more like jQuery’s delegate method.

Underneath

jQuery relies on several things to handle delegation. The main method is liveHandler, in event.js:

1. jQuery.data is used to track event handler objects in the current context
2. closest is used to find elements based on the event’s target and currentTarget, and the selectors found in the previous step
3. Each matching element is compared against the selectors to generate a list of matching elements
4. This element list is then used to run the user-supplied event handlers
5. If the handler returns false or propagation has been stopped, false will be returned

The Prototype approach is simpler — it loses some of the flexibility of the jQuery approach — but might be a better candidate to base our framework code on. Let’s target the original Prototype style (that used findElement) and make it generic.

function findElement(event, expression) {
  var element = Event.element(event);
  if (!expression) return element;
  while (element) {
    if (Prototype.Selector.match(element, expression)) {
      return Element.extend(element);
    }
    element = element.parentNode;
  }
}

This code loops through each element, going up the DOM, until an element is found that matches the selector. Turing already has some internal DOM methods we can use to implement this feature.

Next Week

In next week’s tutorial I’ll explain how to implement findElement and use it to create a simple event delegation API.

Welcome to the Node Roundup. Send in your apps and libraries using our contact form or @dailyjs.

Lodge

Lodge is a HTTP to syslog proxy by Kord Campbell. Logging to Lodge is straightforward:

curl -d "127.0.0.1 - all work and no play makes Jack a dull boy" https://localhost/inputs/d00dadc0ffee

It’s a fairly simple little script, and can work with Syslog-NG. Campbell has written up a detailed blog post with some useful examples in Lodge: A HTTP to Syslog Proxy with Node.js.

Node.js and MongoDB

I noticed Node.js and MongoDB on How to Node which is a brief roundup of popular MongoDB libraries for Node. The issue of indentation is mentioned in reference to the mongodb-node-native library, which Mongoose attempts to solve.

My personal projects have been mongodb-node-native so far, with my own wrappers to cut down syntax. I haven’t actually used Mongoose in anger still, but it might be time to switch.

Which database best fits node.js?

Which database best fits node.js is a thread on the nodejs mailing list. In it people voice their support for various SQL and NoSQL databases.

I recently predicted that if you wrote a blog post containing references to NoSQL, benchmarks, and Node, the traffic from Hackernews would turn your server into a blazing pile of slag. It’s a hot topic, mainly because there’s suddenly so many good database options out there. I’ve had a lot of luck with MongoDB and Node, how about you?

Node Knockout Winners

The Node Knockout Winners were announced earlier this month. Swarmation was the overall winner, which I had a lot of fun playing with.

The JS1k contest has also finished. The winner will be announced at JSConf EU, which is on the 25th and 26th of September.