Persevere on Heroku

By on December 4, 2013 9:52 am

It is becoming increasingly popular to deploy Node.js-based applications to Node-friendly hosting services to take advantage of the pre-built, reliable, robust architecture and infrastructure these services provide. Persevere, a JavaScript server framework for developing RESTful applications on Node.js, is an excellent fit for these types of hosting services. In this post I will show you how easily a Persevere application can be built and deployed on one such service, Heroku, but the process can be easily replicated on other providers that offer similar functionality.

Building UI Components with xstyle

By on September 17, 2013 8:36 am

xstyle_transparentIn this post, we will walk through creating widgets, or UI components in xstyle. CSS itself has a basic component-like unit, a CSS rule. However, xstyle enables a level of advanced UI for constructing rich components, beyond what can be specified with basic CSS. The simple extensions in xstyle allow us to generate DOM elements, respond to events, and encapsulate functionality for easy reuse and composition.

Building an application with xstyle

By on September 10, 2013 11:10 am

xstyle_transparentIn this post, we want to walk through how you would get started building an application using xstyle, an extensible CSS framework. xstyle provides extensions that allows us to declaratively describe an user interface, making use of data bindings, element generation, and components, giving us an elegant means to create an application. In this tutorial, we will be using xstyle with Dojo, and use xstyle completely for our UI. Before starting, remember that you can use xstyle to any degree desired. xstyle can simply be used to make CSS improvements, it can build more sophisticated UI components, and it can be used to describe the entirety of the user interface (combined with a JavaScript-driven data model). Here we will be looking at the application level usage of xstyle, and we will create an app with a simple list of contacts and a form to edit the contact.

Improving your CSS with xstyle

By on September 4, 2013 9:15 am

xstyle_transparentxstyle is a framework for extending CSS, which can be used to improve the quality, maintainability, and performance of your stylesheets. While xstyle can be used as a full framework for building applications with data bindings and UI generation, in this post we will focus on making progressive improvements to stylesheets within the traditional role played by CSS.

Goals and Philosophy of xstyle

By on August 29, 2013 9:57 am

xstyle_transparentxstyle is a framework for enhancing or building applications by extending CSS. xstyle is intended to be simple and unobtrusive enough to provide transparent shimming for standard CSS, yet powerful and expressive enough to provide an entirely new and elegant approach to building web applications. xstyle is both a set of small CSS tools, as well as a framework for building entire applications using declarative syntax and reactive constructs, allowing you to define UI components, sub-components, bindings, styling, and layout all within encapsulated UI definitions, while leveraging cascading layers to intelligently create separation of concerns.

Dojo WebSocket with AMD

By on November 5, 2012 12:23 pm

Dojo has an API for Comet-style real-time communication based on the WebSocket API. WebSocket provides a bi-directional connection to servers that is ideal for pushing messages from a server to a client in real-time. Dojo’s dojox/socket module provides access to this API with automated fallback to HTTP-based long-polling for browsers (or servers) that do not support the new WebSocket API. This allows you start using this API with Dojo now.

Lazy Property Access

By on October 19, 2012 3:53 pm

The easiest way to provide access to data from an object is to simply provide it as a property of the object. However, what if you want to give others direct property access, but computing the value of the property is non-negligible, and you want to avoid computing it if it is not used?

This scenario is where ECMAScript 5’s getters are valuable, as they allow you to define a property that is computed on access. We can go a step further and cache the result so it is only computed once at most (even for multiple accesses), while still avoiding computation if it isn’t necessary. This can be accomplished with this function:

var lazyProperty = function(target, propertyName, callback){
	var result, done;
	Object.defineProperty(target, propertyName, {
		get: function(){ // Define the getter
				// We cache the result and only compute once.
				done = true;
				result =;
			return result;
		// Keep it enumerable and configurable, certainly not necessary.
		enumerable: true,
		configurable: true

Dependencies of dgrid

By on September 25, 2012 9:01 am

The dgrid is a fast lightweight grid component, built on Dojo. It represents the start of the art in web development, utilizing numerous modern techniques for modularity and performance. While dgrid is a great component to simply use, there are a number of useful tips we can learn from how dgrid is built, specifically from its dependencies.

The dgrid component was built to minimize dependencies, and only relies on a bare minimum set of modules. These modules were carefully selected because of the critical value they provide dgrid.


Since dgrid was primarily built by SitePen, it should come as no surprise that it is built on Dojo. However, dgrid does not require full base, but only utilizes a selective set of Dojo modules. These include:

  • dojo/_base/declare – This is used to create the dgrid classes.
  • dojo/on – This new event handling module in Dojo is used extensively in dgrid, and is lighter than the old dojo.connect.
  • dojo/aspect – This provides aspect oriented programming functionality that is used to augment methods.
  • dojo/has – This provides feature detection syntax that can be leveraged by the build process for further optimization and removal of unneeded blocks of code. This is also used to conditionally load touch scrolling.
  • dojo/_base/sniff – Several bugs in IE are corrected with dgrid, and would be very expensive to feature detect for. This is only used for past issues, and not future features, so it is future safe.
  • dojo/_base/kernel – Used for deprecated warnings.
  • dojo/_base/lang – Used for mixins and delegates.
  • dojo/_base/Deferred – Used with promises, primarily for interacting with object stores.

A few other Dojo modules are used by some of the plugins (and so they are only loaded if you load the plugin).
A number of the plugins use dojo/query for DOM querying. The ColumnResize plugin uses dojo/dom-geometry and the DnD plugin uses Dojo’s DnD modules. The DijitRegistry plugin uses the registry module from dijit

Real-time Updates with dgrid

By on September 24, 2012 10:46 am

The new dgrid is designed to work with object stores, which makes it easy to create grids that are driven by real-time updates. This is a great feature for rapidly changing data like stock prices or game scores.

To make a dgrid update in real-time, we just need to back it with a real-time object store. This can be accomplished by simply wrapping it with the Observable store wrapper. If we start with a JsonRest object store that retrieves data through REST calls, we can wrap that with Observable:

var stockStore = new Observable(new JsonRest({

Now our stockStore is real-time ready. Next we have to write some code to notify listeners of changes in data. Observable stores provide a notify() method that we can call to notify the store of changes in data. Typically, for a real-time application with rapidly changing data, we would create a Comet connection to a server, and as we receive data from the server, we could notify our store, which would automatically trigger updates in the grid. This might look something like:

// create a socket or long-polling connection to a server and then listen for messages
mySocket.on("message", function(message){
   // got a message   
   var data =;
   // assuming the data is the object to update, we can update the store with: