A practical walkthrough of using map/reduce with MongoDB to aggregate statistics for generating a report.
Sugar augments the existing JavaScript environment with helper methods on existing objects. From fixing broken support of standard methods, widening acceptable arguments, multi-lingual and improved regex support on strings, nice supplementary string methods like words()
, and shortcut methods to Math object methods. Additional helpers for Dates, Objects, Functions and Regex. An library for a consistentising JavaScript across different imlementations.
Addy Osmani introduces backbone.js as one part of the toolkit for building mobile JavaScript web applications. Backbone is an MVC-like framework to structure your application, simplifies server-side persistence, decouples the DOM from data, succinctly separates apps into Models, views and routers and provides synchronisation between DOM, model and collections.
Klaus Komenda takes us through the history of development patterns of JavaScript demonstrating the pros and cons. Taking a typical JavaScript feature he starts with the old-school global functions method and iterates through a Singleton, Module Pattern, Revealing Module Pattern, Custom Objects and Lazy Function Definitions bringing the same feature up-to-date.
Ben Cherry, web developer at Twitter, takes us step by step through the Module Pattern. He introduces the standard features of Anonymous Closures and avoiding global scope, and covers advanced concepts such as augmentation, cloning, inheritance, private state and sub-modules.
A simplified explanation of closures by Morris Johns: A closure is the local variables for a function - kept alive after the function has returned.
A clever hands-on interactive mini-course by Nathan Whitehead that guides you through bite-sized chunks from variables, to functions, to return values, to functions as first-class objects and right into closures and finally continuations. The hands-on exercises are JS Linted and unit-tested which gives you ample space to try out your new-found knowledge.
Remy Sharp dissects a piece of jQuery code pointing out the red flags. Each flag is taken in turn, explained and shown how to correct. Takes into account context and the flexibility of jQuery
Mike Alsup builds up to an elegant plugin development pattern for jQuery plugins, starting with requirements and adding a piece at a time. By explaining the reasoning and though behind each piece of the puzzle, it explains a number of important good parts of the JavaScript language
Fellow co-worker Lawrence Carvalho discusses the Undo functionality, and as web based applications start to replace desktop ones, this crucial bit of functionality will become expected by application users. Lawrence talks about the Memento design pattern and guides us through designing objects that can undo their changes. He builds an undoable text widget.
Cory Hudson sees callbacks as benefiting from currying JavaScript functions, and defines currying as turning a function with two arguments into a function with one argument that returns a function of one argument. He starts off with two functions and shows how to combine them into one curried function, and also builds a generic version. He shows a good usage of a curried function in an array map()
function, which is similar to Prototype's bind()
.
Jonathan Snook demonstrates when JavaScript passes by reference or passes by value. Essentially, primitive types are passed by value, objects are passed by reference. Passing functions however, makes things look like a pass by value if the this
keyword is being used in the code. Snook offers workarounds to this by passing objects so that the context is correct, or using the call()
function to ensure the context is correct.
Dan Webb describes curried functions as a way of creating reusable callback functions for event handlers or Ajax requests, or anything that takes a function as an argument. By using closures, curried functions have a simple way of persisting data between calls. He also offers an elegant way of running a lots of methods on objects, with a simple map function written as a curried function.
Svend Tofte discussed currying JavaScript functions, which he describes as a way to partially evaluate functions. Its a function that returns another function. In an example, one function either adds together two numbers, or if only one parameter is sent, returns a function that can be called later to supply the second number.
Tim describes another two different approaches to using the Module Pattern (a way of creating Singletons). The first example takes advantage of the natural indentation to clearly see which methods are private and which are public. The second is a curried function, a function that returns another function.
Tim Huegdon uses JavaScript to fix Safari's bug where clicking on a label doesn't set focus to the corresponding field element (a useful accessibility aid). Using YUI and event delegation Tim walks us through the development of this piece of code involving attaching an event listener, getting the target of an event, then finding the field that corresponds to the label, and focusing on it if its a text field, or activating / selecting the form element if its a radio button or checkbox.
Christian Heilmann offers another incremental improvement to the Module Pattern, and calls it the Revealing Module Pattern. This defines an anonymous object that contains a list of methods and properties that are publicly available. Christian notes that this method also allows you to set up a public property that's privately generated by a method. Christian's improvement makes it quickly clear which properties and methods are public.
Simon Willison blogs about how JQuery won him over. From its faddish start based around CSS selectors (getElementsBySelector), and method chaining, Simon now sees the library in a new light. Simon shows how jQuery supports modern development best practice such as namespaces, giving a quick nod to the richness of jQuery selectors (DOM, CSS and XPath). JQuery's event handling looks natural and offers an event when the dom is ready. It exposes custom events for non-trivial Ajax requests. Simon's so convinced about jQuery that he's willing to overlook his rule that developers should know how a library works before using it.
Christian Heilmann compares the Object Literal to Douglas Crockford's Module pattern and finds that the Module pattern fixes a major problem of the object literal - the difficult choice of using this or fully qualified references to functions in the same block. Christian also covers the improvements in the Module Pattern, like the decluttering of the return block, which makes the resulting a little easier to work with.
Klaus Komenda discusses a number of ways of encapsulating JavaScript functions into objects and namespaces, and shows how to use each pattern. He covers Singletons, Douglas Crockford's Module Pattern and Custom Objects, building the same functionality with each technique.
Tim Huegdon and Mark Aidan Thomas create an elegant wrapper to the YUI Connection Manager that manages repeating Ajax JSON requests. Tim describes the use of Custom Events, and the use of the Observer design pattern, dissects the code and offers a tidy demonstration of the working code. This simplifies JSON requests into declaring a simple function to process the returned JSON object, and a single line to fire off the request (within a setInterval if required)
An online copy of O'Reilly's 2002 book Creating Applications with Mozilla. It focused on pre-1.0 versions of Mozilla, so details about the application structure has changed, but the XUL elements are relatively stable.
Stuart Colville investigates the differences between form.getAttribute('action') and form.action, also the cross-browser differences, when the action is a relative URL. One way returns a relative URL, and the other returns a fully qualified URL.
Dean Edwards takes Mozilla's newly introduced forEach method, and implements it for non-Mozilla browsers, for enumerating over objects and arrays.
All JavaScript implementations implement a debugger statement, which can be called at any point in your script. Also we have console.debug in Firebug.
Douglas Crockford's JavaScript code conventions. Covers indentation, line length, comments, variable and function declarations, minification, statements and labels, whitespace, scope and eval.
Instead of creating a new XmlHttpRequest object for every request, this post provides code to pool these objects together and reuse them. This saves a great deal of processing times, particularly in IE.
An example of a Decorator pattern based on the flexibility of prototype to extend a JavaScript object. Decorating an object allows customised functions to be called before and after a method call, the real method call is wrapped between the before and after hooks. One method of Aspect-oriented programming with JavaScript
Three top features of jQuery: the multitude of selectors, manipulating attributes, and tacking Ajax/JSON requests. Choses jQuery over Prototype
Christian Heilmann describes an approach to building complex web application by basing them around events, particularly around YUI's CustomEvent class.
Christian Heilmann offers us Dishy, a JavaScript REST API for talking to del.icio.us. Taking full advantage of del.icio.us' JSON format and the script element, Dishy doesn't need a server-side proxy. Its a useful helper class for easily getting information from del.icio.us.
Christian Heilmann's excellent guide to writing unobtrusive JavaScript. Takes the reader from the inline JavaScript world right through to a clean dynamically attached events with all the JavaScript code in external files. Covers DOM Scripting. This is the key reference to unobtrusive scripting.
Christian Heilmann does a tree menu without using loops. It demonstrates the flexibility and power of Event delegation - catching events at a higher level in the document. It drastically cuts down on the number of events you need to add to a document. One event handler per menu, rather than one per link in the menu.
Michael Mahemoff runs into a problem with Protypes $$ function when looking for class names. Its taking over 90 seconds when more than 100 matches are returned. The advice is: Avoid $$(".classname") on large DOMs.
Stuart Langridge provides unobtrusive JavaScript that makes HTML tables sortable by their table headers. To enhance a table to be sortable requires the addition of the classname sorttable
Christian Heilmann demonstrates delegating events, and compares it to the main alternative of assigning event handlers to each individual node. Its a technique that's important for writing applications that can scale.
Dustin Diaz discusses the Object Literal form of JavaScript, pointing out benefits such as better organisation of code in a namespace / wrapper.
Douglas Crockford discusses how to create private members and methods, and using privileged methods to bridge the gap between public and private. It also contains the simplest and most understandable definition of closures I've ever seen.
Douglas Crockford discusses his method of exposing the powerful prototypal inheritance from JavaScript, using his object function which untangles JavaScript's classical-adopted constructor pattern.
An explanation of scope in terms of an execution context and scope chain. Also describes how we can alter the this reference using apply and call.
An overview of object literals and object oriented programming, referencing attributes and functions, prototype objects, creating singletons.
Apart from being an elegant debugger, FireBug offers the developer hooks that can be used from JavaScript, offering logging, assertions, performance measuring, and command line functions for inspection or traversing a document.
Ryan Campbell volume tests Prototype's each() Enumeration function and finds that although the code is more elegant than the for loops, the overhead is quite heavy, and the performance impact too high. The summary: If basic JavaScript will do the task, then use basic JavaScript
Gez Lemon reviews Christian Heilmann's recently published book. Its a thumbs up, and recommended for developers working with standards and accessibility, regardless of their JavaScript level.
LowPro is a scripting extension to Prototype written by Dan Webb to make unobtrusive DOM Scripting much easier. Included are an onReady event, adding behaviour using CSS selectors, fixing the this reference to always refer to the element within events, and a mechanism for triggering events.
Dustin Diaz makes the case for using YUI Event Utility over the currently popular addEvent. The benefits Dustin points out include automatic scope correction, automatic browser abstraction.
As well as supporting CSS based selectors, jQuery also supports XPath expressions. This page lists a plethora of code snippets demonstrating jQuery's XPath matching capabilities.
Covers all the methods available on the jQuery library, along with inline code examples. Interestingly, the same documentation is also available as XML and JSON.
A fairly active mailing list for jQuery, covering using the library, JavaScript questions, and announcements of jQuery plugins. The archive goes back to January 2006.
A useful overview / introduction of the jQuery library, covering using selectors and XPath expressions to target specific elements in a document, simple Ajax requests, the basic animations available, restructuring a document, creating jQuery plugins.
A collection of gotchas and guidance in Greasemonkey scripting. Positioned as an addition to Mark Pilgrim's dive into Greasemonkey
Mark Pilgrim's essential online book about developing Greasemonkey scripts. Excellent starting point for Greasemonkey developers. Covers everything from setting up a Greasemonkey scripts to common DOM coding idioms, as well as a brief rundown of XPath, and case studies of Greasemonkey scripts.
Mark Pilgrim dissects the security issues of the 0.3 Greasemonkey, and describes how the new architecture of Greasemonkey works, pointing out pitfalls and how to address them.
Speeding up object detection by doing the detection once. Dean Edwards demonstrates a quick improvement using the ubiquitous addEvent function.
Dean Edwards counters Dojo's Alex Russell's hideous hacks with two standards friendly approaches. Looking at the The DOM Content loaded problem and the sluggishness of walking a DOM Tree, Dean talks about speed improvements, including the use of XPaths.
Dean Edwards presents his improvement to Scott Andrews' famous addEvent()
functions. Solving the cross-browser this
reference differences, and passing event
objects correctly.
An elegant mechanism for extending and overriding JavaScript classes in an object oriented fashion. It eases the pain of object oriented JavaScript.
Dean Edwards gets to grips with the window.onload
problem - where it only gets fired once the document and its associated styles and images are loading. The ideal solution is one that that detects when the document is available as a DOM.
IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.
cssQuery() is a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
A lightweight library designed to elegantly dealing with common, repetitive tasks. Great as a small library to handle getting various nodes in a document, adding events, and rendering simple effects.
Dustin Diaz names his top ten list, which includes Scott Andrew's addEvent(), Dean Edwards' cssQuery(). The cookie manipulation functions take the first three places, and the Prototype $() gets an honourable mention. Dustin also includes a JavaScript file containing all 10 favourite methods.