TJ Holowaychuk

Stylus gets @extend

Wed, 11 Jan 2012 13:41:23 -0800

@extend is a great little feature which originated in SASS, and now finds a home in Stylus. If you’ve ever written CSS like this, you know it can become quite the pain to maintain large lists of selectors:

.message,
.warning,
.error {
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}

.warning {
  color: yellow;
}

.error {
  color: red;
}

@extend makes this process flow naturally, and even supports inheritance. In Stylus you may use @extend or @extends, I prefer the latter personally but that’s up to you! Using this feature you would define .message on it’s own, and simply __@extend_ it from within the other rulesets:

.message {
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}

.warning {
  @extends .message;
  color: yellow;
}

.error {
  @extends .message;
  color: red;
}

Taking this even further with inheritance:

.fatal-error {
  @extends .error;
  font-weight: bold
}

Would yield the following CSS:

.message,
.warning,
.error,
.fatal-error {
  font-size: 14px;
  padding: 5px 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.warning {
  color: #ff0;
}
.error,
.fatal-error {
  color: #f00;
}
.fatal-error {
  font-weight: bold;
}

Here’s another example:

form
  button
    padding: 10px
    border: 1px solid #eee
    border-radius: 5px

ul
  li a
    @extends form button

Yielding:

form button,
ul li a {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}

And of course you may utilize the alternative Stylus syntax if you prefer:

.message
  font-size: 14px
  padding: 5px 10px
  border: 1px solid #eee
  border-radius: 5px

.warning
  @extends .message
  color: yellow

.error
  @extends .message
  color: red

.fatal-error
  @extends .error
  font-weight: bold

Grab Stylus 0.22.4 for these goodies!

hahaha awesome

Sun, 08 Jan 2012 19:53:05 -0800

hahaha awesome

Why Stylus is the most CSS-like high-level stylesheet language

Sun, 11 Dec 2011 09:09:00 -0800

Why Stylus is the most CSS-like high-level stylesheet language:

This short Vimeo screencast illustrates why Stylus is the most like CSS as a stylesheet “preprocessor”. More on Stylus here.

node "debug" module

Mon, 28 Nov 2011 19:56:00 -0800

node "debug" module

Connect 1.8.0 - multipart support

Thu, 17 Nov 2011 15:47:00 -0800

Connect 1.8.0 is a tiny but substantial release because it adds multipart/form-data support via Felix Geisendörfer’s fantastic multipart parser formidable, it’s great and chances are you’re already using it!

The bodyParser() middleware now unifies multipart, json, and x-www-form-urlencoded parsing, providing the req.body object containing the parsed data. For security purposes the files are placed in a separate object, req.files, however just as accessible. A constant struggle that I’ve seen in the community is the concept of “missing” request data events so this will prevent further confusion. The downside to this is that if you wish to report upload progress, or access files and fields as the request is streamed, you will have to use formidable directly.

Before this addition your use of formidable might look something like the following (with Express):

  app.post('/someform', function(req, res, next){
    var form = new formidable.IncomingForm;
    form.parse(req, function(err, fields, files){
      if (err) return next(err);
      // do something with files.image etc
    });
  });

With the new bodyParser() all you need is:

  app.use(express.bodyParser());

  app.post('/some-form', function(req, res){
    // do something with req.files.image
  })

The middleware takes the same options that are mentioned on formidable’s GitHub repo page, so you can specify things like size limits, retaining extensions, the upload directory etc.

  app.use(express.bodyParser({
    uploadDir: '/tmp/uploads'
  }));

That’s it! but I think this will cover well above the 80% use-case and prevent a lot of headaches that people have with the previous the inconsistencies.

Batman vs Pedophile (vigilante justice)

Wed, 16 Nov 2011 20:38:56 -0800

Batman vs Pedophile (vigilante justice)

Jade & Stylus 0.16.0 released

Mon, 26 Sep 2011 12:56:00 -0700

Jade 0.16.0

This release of Jade adds quite a few new features such block support for include, and template inheritance!

Extended grammar

Jade currently allows you to use JavaScript all over the place, rather than restricting a subset, or implement its own grammar. While this is flexible it tends to make templates look less like … templates! In an effort to make Jade more declarative I’ve added literal support for if, unless, while, until, iteration, assignments and others.

For example I consider it bad practice to define vars in a template, however if you must, you may have previously done something like this:

  - var items = ['foo', 'bar', 'baz']

Jade now allows for assignment, where the right-hand operand is still a regular javascript expression:

   items = ['foo', 'bar', 'baz']

As mentioned if and unless and friends are supported, so the following:

 - if (!(foo && bar))
   p stuff

May now be defined as:

  unless foo && bar
    p stuff

This rule applies to else[ if] as well:

  if something
    p foo
  else if somethingElse
    p bar
  else
    p baz

And finally iteration where each and for are interchangeable:

 - items.forEach(function(item){
   li= item
 - }) 

each item in items
  li= item

for item in items
  li= item

each item, i in items
  li #{i}: #{item}

each val, key in obj
  li #{key}: #{val}

Include blocks

The include directive now supports blocks, so for example one could have head.jade defined as the following:

  head
    script(src='/javascripts/jquery.js')

Allowing you to either include the file as-is:

  html
    include head
    body
      h1 Title

or append to the last block defined, adding additional script tags:

  html
    include head
      script(src='/javascripts/caustic.js')
      script(src='/javascripts/app.js')
    body
      h1 Title

Template inheritance

Jade now supports template inheritance via the block and extends keywords. A block is simply a “block” (indented) of Jade that may be replaced within a child template, this process is recursive.

Jade blocks can provide default content if desired, however optional as shown below by block scripts, block content, and block foot.

// layout.jade
html
  head
    h1 My Site - #{title}
    block scripts
      script(src='/jquery.js')
  body
    block content
    block foot
      #footer
        p some footer content

Now to extend the layout, simply create a new file and use the extends directive as shown below, giving the path (with or without the .jade extension). You may now define one or more blocks that will override the parent block content, note that here the foot block is not redefined and will output “some footer content”.

// index.jade
extends layout

block scripts
  script(src='/jquery.js')
  script(src='/pets.js')

block content
  h1= title
  each pet in pets
    include pet

It’s also possible to override a block to provide additional blocks, as shown in the following example where content now exposes a sidebar and primary block for overriding, or the child template could override content all together.

// funky-layout.jade
extends layout

block content
  .sidebar
    block sidebar
      p nothing
  .primary
    block primary
      p nothing

For the rest of the changes and bug fixes check out the changelog.

Stylus 0.16.0

Fewer changes than the latest Jade however still some good ones!

:= operator

This new operator is an alias of ?= operator, because I think ?= is difficult to read in large quantities for configuration etc:

grid-columns ?= 16
grid-column-width ?= 40px
grid-gutter-width ?= 20px
extra-space ?= 40px

grid-columns := 16
grid-column-width := 40px
grid-gutter-width := 20px
extra-space := 40px

Adjusting color lightness

While the lighten(color, amount) and darken(color, amount) BIFs are still available, the + and - operators now provide the same functionality when used with percentages as illustrated below:

  lighten(black, 50%)
  // => #808080

  black + 50%
  // => #808080

fade-in() & fade-out() BIFs

These small built-in functions are defined in stylus as the following to adjust the opacity:

  // decerase opacity by amount

  fade-out(color, amount)
    color - rgba(black, amount)

  // increase opacity by amount

  fade-in(color, amount)
    color + rgba(black, amount)

For example:

fade-out(#eee, .5)
// => rgba(238,238,238,0.50);

fade-out(fade-out(#eee, .3), .5)
// => rgba(238,238,238,0.20);

Check out the changelog for the other bugfixes and additions.

Stylus 0.15.1 - new property reference & @keyframes fabrication features

Thu, 01 Sep 2011 17:35:08 -0700

Stylus 0.15.x adds a bunch of cool new functionality as well as some important bug fixes.

@keyframes fabrication

The new keyframes fabrication support automatically duplicates your @keyframes definitions to support vendor prefixes. Note that this is only a default, as shown below:

@-moz-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@-webkit-keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}
@keyframes foo {
  0% {
    color: #000;
  }

  100% {
    color: #fff;
  }
}

one can tweak this functionality using the vendors list as shown in the following snippet which will only expand to the -webkit- vendor prefix.

vendors = moz official

@keyframes foo {
  from {
    color: black
  }
  to {
    color: white
  }
}

The vendors property may be utilized more in the future, and perhaps in frameworks like “nib” to unify configuration.

Property reference

The syntax @ has been introduced to reference values of existing properties. For example if you want to re-use values, you may typically do something like below instead of typing the value several times, also allowing you to use functions with w.

.button
  width: w = 50px
  height: w

The new property reference syntax allows you to treat properties as variables, which can also be accessed within mixins:

.button
  width: 50px
  height: @width

Comment compilation

When the compress option is true Stylus will not output single-line nor multi-line comments, which are commonly found used for licensing in stylesheet frameworks etc, so it’s useful to strip these out however you can now force output with the ! character /*!.

New built-in functions

The math functions cos() and sin() were added, as well as exposing PI.

Bug fixes

Fixed @import on windows

Connect 1.7.0 - fast static file memory cache and more

Thu, 01 Sep 2011 16:02:00 -0700

Be sure to update Connect to the latest release 1.7.0 for the following goodies!

staticCache() middleware

1.7.0 now provides a new middleware named staticCache(), acting as a memory cache on top of the regular static() middleware. Older versions of Connect used to provide memory caching, however it was baked right into static(), bloating the middleware more than necessary.

Benchmarks

The test file for these benchmarks is a small 4kb readme:

$ du -h Readme.md 
4.0K    Readme.md

and the following ApacheBench command:

$ ab -n 5000 -c 50 -k http://local/Readme.md

First up we have Connect static(), which does not perform any caching, performing disk I/O each request, serving ~2400rps.

connect()
  .use(connect.static(__dirname))
  .listen(3000)

Next up we have node-static one of the other popular node solutions, serving ~3800rps

var static = require('node-static')
  , file = new static.Server(__dirname);

http.createServer(function(req, res){
  file.serve(req, res);
}).listen(3000);

Then we have the new staticCache() middleware paired with static() serving ~5000rps, a 24% increase over node-static (which also performs memory caching), and ~52% over static() alone.

connect()
  .use(connect.staticCache())
  .use(connect.static(__dirname))
  .listen(3000)

staticCache() is configurable, allowing you to specify the maximum number of cache objects to store, and the maximum size allowed, so you can cap resources appropriately. The middleware implements a Least Recently Used algorithm to prioritize popular files, knocking less popular objects out of the cache.

res.headerSent

Node core has a private flag named res._headerSent, allowing you to check if the header has been written or not, this is extremely useful in some cases, so Connect has publicized this property as res.headerSent until Node core does (if ever), using a getter to reference the private property.

logger() immediate option

The logger() middleware now provides { immediate: true }, as by default this middleware will log the response of a request, not when the request is first received, allowing logging of response-times etc.

Game prototyping with JavaScript & CSS3

Sun, 28 Aug 2011 17:13:00 -0700

I wanted to share a quick few-hour game prototype to hopefully inspire a few people! The industry let-alone browser-based games seem very lacking in imagination and storytelling, or maybe I’m just not looking hard enough ;) but I miss games like Grim Fandango.

Below is a screenshot of the demo, consisting of several DOM nodes to represent parts of the main character, the birds, and the scene. Most of the animation is performed with CSS transitions / animations, some of which are dynamic and use the move.js library.

I have yet to profile anything but it runs quite smooth on my machine, and there are many aspects that could be optimized, and some simple ones like ditching jQuery.

iPhone gaming

Back to the original plan, roughly two years ago before the Ipad came out, I was writing an Objective-C iPhone game with Cocos2d and Chipmunk physics, two really wicked libraries. The iPhone seemed too small, and at the time the resolution was not great either, not to mention the image size restraints that Apple enforced, so I gave up after a few prototypes, and one full-screen PC prototype.

Browser gaming

With the advent of modern browsers, browser gaming is already a lot less shitty than a year or two ago, and it’s only about to get much better with all the work browser vendors are putting into making sure canvas and friends run smooth as butter.

The first prototype I wrote was written entirely with Canvas. One of the main benefits of this is a certain level of control that you obtain, it’s extremely easy to implement features like pausing, to apply post-processing, or ad-hoc features that are difficult with the DOM.

At first I was pretty happy with the result, until I wrote the prototype using CSS3 and HTML, the performance impact was pretty significant (though I had not implemented dirty rects etc). Certain aspects of gaming are significantly easier using the DOM, for example leveraging z-index and CSS transitions, however contrasting canvas pausing and post-processing are more of a problem. At least with the currently state of browser technologies, it’s a good idea to mix and match. You can build a large portion of your game using the DOM, and canvas for aspects like particle emitters, or perhaps even WebGL shaders like this awesome demo.

Demo

The video below shows off some of the interactivity, as well as the tiny scene building tool.

The demo consists of ~200 lines of js and ~200 lines of CSS, using CSS for transformations, animations and obviously for styling, while the js performs some basic interactions like the eye-ball targeting, and randomized cat walk routine. The demo also has a small toolkit for creating scenes, but it’s certainly nothing robust.

Source

You can grab the source on Github. Ping me of you come up with some cool prototypes!

Concepts

Some more concepts:

commander.js - nodejs command-line interfaces made easy

Thu, 18 Aug 2011 18:11:00 -0700

Commander.js is a small node.js module allowing you to define options and interacte with the user’s terminal in a simple and natural way, inspired by the Ruby library of the same name.

Features

self-documenting code
auto-generated help
combined short flags (“-abc” == “-a -b -c”)
option defaults
option coercion
command parsing
prompts

Example

A basic commander program looks something like the following (taken from serve). It’s extremely easy to see what’s going on, all the options provided by the executable are laid out infront of you.

program
  .version('0.0.1')
  .option('-p, --port ', 'specify the port [3000]', Number, 3000)
  .option('-H, --hidden', 'enable hidden file serving')
  .option('-I, --no-icons', 'disable file icons')
  .option('-L, --no-logs', 'disable request logging')
  .parse(process.argv);

In the previous example only --port accepts an argument, and the value of program.port defaults to 3000. The options --no-icons and --no-logs default their properties to true, only when --no-icons is specified will program.icons be false.

The usage information is free!:

$ serve --help

  Usage: serve [options]

  Options:

    -v, --version      output the version number
    -p, --port   specify the port [3000]
    -H, --hidden       enable hidden file serving
    -I, --no-icons     disable file icons
    -L, --no-logs      disable request logging
    -h, --help         output usage information

Utilities

Commander is bundled with some utilities for prompting user input, confirmations, passwords, lists of choices etc. Most of these utilities will ask for input if the user simply hits enter and should respond.

Below is an example of asking for a name using a single-line input prompt:

program.prompt('name: ', function(name){
  console.log('hi %s', name);
});

Multi-line input is easy too, just leave out the trailing space in the message:

program.prompt('description:', function(name){
  console.log('hi %s', name);
});

Coercion is useful for dates, numbers etc:

 program.prompt('Age: ', Number, function(age){
  console.log('age: %j', age);
});

Password prompts masking off input:

program.password('Password: ', function(pass){
  console.log('got "%s"', pass);
});

Or providing a mask char:

program.password('Password: ', '*', function(pass){
  console.log('got "%s"', pass);
});

Confirmations require “yes” or “y” to result in true:

 program.confirm('continue? ', function(ok){
   console.log(' got %j', ok);
 });

There’s also choice support, so users can select from a list:

var list = ['tobi', 'loki', 'jane', 'manny', 'luna'];

console.log('Choose the coolest pet:');
program.choose(list, function(i){
  console.log('you chose %d "%s"', i, list[i]);
});

presenting:

Choose the coolest pet:
  1) tobi
  2) loki
  3) jane
  4) manny
  5) luna

Commands

Though I haven’t had time to polish them up yet, commander supports the idea of .. well… “commands”. The “root” executable is an instanceof Command, and well you can recursively define these to create a rich interface. GIT is a great example of this, many larger utilities use sub-command such as git remote to accept arguments, and may all then have their own options etc, using the same API as the root command. The following is a simple example:

#!/usr/bin/env node

var program = require('../');

program
  .version('0.0.1')
  .option('-C, --chdir ', 'change the working directory')
  .option('-c, --config ', 'set config path [./deploy.conf]')
  .option('-T, --no-tests', 'ignore test hook')

// $ deploy setup stage
// $ deploy setup
program
  .command('setup [env]')
  .description('run setup commands for all envs')
  .action(function(env){
    env = env || 'all';
    console.log('setup for %s env(s)', env);
  });

// $ deploy stage
// $ deploy production
program
  .command('*')
  .action(function(env){
    console.log('deploying "%s"', env);
  });

program.parse(process.argv);

Moar Libraries!

Dont forget to check out these other great CLI-related libraries:

cli-table awesome unicode tables by Guillermo
node-multimeter, ascii progress-bars by SubStack

Introducing Texty & Super Agent screencast

Mon, 08 Aug 2011 20:01:24 -0700

In this 20 minute screencast we dive into the full-text Redis search library reds for nodejs, an introduction to the canvas-only text editing library Texty, discussing how you can style canvas drawings with CSS, and the “ajax with less suck” library superagent.

Reds - light-weight full text search for nodejs backed by redis

Sat, 30 Jul 2011 11:52:00 -0700

Reds (red-s) is a very small (~300LOC) light-weight full text search library for node.js.

I wrote reds with Kue in mind, a priority job queue for node. I wanted to add search capabilities so you can easily find jobs by any of the arbitrary data provided, names, emails, anything.

API

You can use reds for multiple isolated search indexes, which is why you must pass a key to reds.createSearch(), as it’s used for namespacing.

 var search = reds.createSearch('pets');

As mentioned this library could be used with anything, to illustrate this we can even use it with a regular javascript array by indexing the value indices as shown below, where the first value passed to search.index() is the text, and the second is the id.

 var strs = [];
 strs.push('Tobi wants four dollars');
 strs.push('Tobi only wants $4');
 strs.push('Loki is really fat');
 strs.push('Loki, Jane, and Tobi are ferrets');
 strs.push('Manny is a cat');
 strs.push('Luna is a cat');
 strs.push('Mustachio is a cat');

 strs.forEach(function(str, i){ search.index(str, i); });

Within the another process, or the same one, we can then invoke search.query() with a string and callback invoked with possible error and array of ids. With these ids we can then determine their original values, be it an array, object in another data store etc.

 search.query('luna cat', function(err, ids){
   if (err) throw err;
   console.log('Search results:');
   ids.forEach(function(id){
     console.log('  - %s', strs[id]);
   });
 });

Producing:

  Search results:
     - Luna is a cat

You may also remove an id from the index:

  search.remove(id[, callback]);

Implementation

While reds is backed by Redis you can easily use reds with any other data store, as it simply indexes by arbitrary numeric or string ids. This means you could create an index of files on disk, mongodb documents, urls, anything.

The indexing process works like this:

- tokenize words
- strip stop words ("about", "after", "am", "an", ...)
- stem words
- apply metaphone
- add id to metaphone constant set

The process of stemming the words and applying the metaphone algorithm provide leeway so the user does not need exact matches. For example thanks to metaphone the names “steven” and “stephen” both resolve to the constant STFN. The process of stemming reduces variants to it’s stem, for example “counting” becomes “count”, and “waits” becomes “wait”.

When a query is performed the same sequence is applied, resulting in an array of metaphone constants, providing us with the keys necessary to perform the Redis union or intersection to fetch our ids.

Performance

Preliminary benchmarks show that a small 1.6kb body of text is currently indexed in ~6ms, or 163 ops/s. Medium bodies such as 40kb operate around 6 ops/s, or 166ms.

Querying with a multi-word phrase, and an index containing ~3500 words operates around 5300 ops/s. Not too bad.

Indexing performance was decreased by nearly 100% by applying the porter stemmer algorithm in Chris Umbel’s natural library, however reds is still reasonably quick at indexing text. If you have huge documents, you may want to consider allowing users to specify a description instead.

Future

use sorted sets for ordering and priority
ranges
sorting
perf optimization if necessary

Jade Mixins & Includes

Wed, 13 Jul 2011 16:18:00 -0700

The latest release of Jade 0.13.0 adds mixins and includes. Jade users have longed for some method of static include, so it’s (finally) here, and compliments mixins nicely, allowing you to store mixins in one or more separate files.

Mixins

A mixin definition takes the form mixin [( params )] block, where params is identical to JavaScript function params, simply a list, as it’s converted to a JavaScript function within Jade to become part of the output function.

Using a mixin is identical to the definition, however omitting the block. Mixins allow you to encapsulate repeated chunks of a template, such as form fields as shown in the following snippet. This example has a local variable user passed to the template with the properties { name: '...', email: '...' }, which is then accessible throughout any mixins defined without explicitly passing it (though you may if you like).

mixin field(type, name, label)
  .field(class='field-' + type)
    label #{label}:
    input(type=type, name='user[#{name}]', value=user[name])

form
  mixin field('text', 'name', 'Username')
  mixin field('text', 'email', 'Email')
  mixin field('password', 'pass', 'Password')
  input(type='submit', value='Sign Up')

Outputting:


  
    Username:
    
  
  
    Email:
    
  
  
    Password:

Includes

The include directive signals Jade to read and parse the file, then return it’s root node (a block), injecting it into the calling template, as if it were written in the same file. The > given is relative to the dirname of the calling template, which is exposed to Jade via the filename option, which is populated by jade.renderFile() and Express, otherwise you need to supply this.



For example our mixin(s) could live in ./mixins, and our previous example could look something like below:

include mixins/form-helpers

form
  mixin field('text', 'name', 'Username')
  mixin field('text', 'email', 'Email')
  mixin field('password', 'pass', 'Password')
  input(type='submit', value='Sign Up')


Or the classic header / footer example, first index.jade:

html
  include includes/head  
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot


includes/foot.jade:

#footer
  p Copyright (c) foobar


includes/head.jade:

head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')


That’s all for now, hopefully I’ll have some time in the near future to clean things up and get 1.0 (finally again :)) out the door.



The Luna programming language
Mon, 11 Jul 2011 19:31:00 -0700
A few weeks ago I started implementing Luna, an elegant, expressive, and embeddable language written in ANSI C, with performance as a primary focus. For now it’s just a side project, but I thought it would be fun to blog about the different aspects as they unfold, building languages is a really fun process.

Goals

The current goals of Luna are the following:

small, simple, expressive, and explicit syntax
fast, fast, and fast
robust reflection capabilities
opt-in callee evaluated messages
register based VM
embeddable
About Luna’s Syntax

Luna’s syntax is inspired by Python, IO, and Lua, bits of Ruby, and of course, JavaScript.

The language itself will utilize “pure” prototypes for inheritance. When I say “pure”, I mean no confusing class/prototype hybrid monster barfing up poor design, which we all face in JavaScript. The way JavaScript handles prototypes adds to the confusion of what may already be a completely new concept to some. Contrasting with JavaScript this means losing constructors, ditching .prototype, the new operator, instanceof, typeof and other clunky “features”.

Take the following JavaScript for example:

function User(name) {
  this.name = user;
}

User.prototype.toString = function(){
 return this.name;
}

new User('tj')


This is a big W-T-F for some people, some get confused thinking it’s a class, and some get lost trying to understand that the prototype property has to do with anything at all. Simply put, a “prototype” is just an object, that’s it, it’s an object that you “clone”, which for performance reasons typically means you have a new object with the “parent” in a special prototype chain for property or “slot” lookup. That’s it! adding constructors and funky props and stupid keywords to the mix just makes things needlessly confusing, and really takes away from what would otherwise be a pretty elegant language.

Whitespace

Our earlier JavaScript User example might be written as the following, where we first clone the primitive Object, aka the prototype chain now contains Object, then we assign the slot (property) new to a function taking a single argument name. Within this function we clone the User object, so now the prototype chain contains Object, User, and assign the user’s name slot to the arg.

User = Object clone()

User new =: name
  user = User clone()
  user name = name
  user

User toString =:
  self name

tj = User new('tj')


There are a few things to note about Luna’s syntax here. The first being that linear white-space is the slot or “property” delimiter, not . like many languages. Another thing to note is the function literal syntax, which is simply a : character followed by optional params and a block.

Many of you know my thoughts regarding coffeescript, and like I’ve stated in Luna’s Readme, it’s not significant whitespace that I dislike, though it can become nasty very quickly in large doses. It’s of course an honor for any programmer to have a large number of followers, but the reality is that there’s almost nothing original about the language, and instead of striving for something elegant and simple, it just throws more sugar and syntax at the “problems”. The worst part about significant whitespace is that deep nesting, perhaps when defining methods on a class, it’s easy completely lose context, and in a big file/class that can get very annoying, very quickly. The fact that you must specify the receiver for each method reaffirms context within Luna.

Function Literals

So now that you’ve seen the function literal, you’re probably thinking what the hell… yes, the function literal is a single character, :.  Consider the following JavaScript function:

 var greet = function(user, msg) {
   console.log('hello ' + user + ' ' + msg);
 };


The equivalent Luna script would be:

greet =: user msg
  console log('hello ' . user . ' ' . msg)


While this looks like an operator (=:), it’s simply convention, the following is valid as well:

greet = : user msg
  console log(...)


You’ll see that the params do not require a comma, this is because Luna, like JavaScript, does not allow defining defaults in the signature. Personally I find this more flexible as params are often shifted and swapped based on their types or arity, and I find the clutter of defaults makes the signature difficult to read, clouding what would otherwise at a glance give you a hint at what the function does.

greet =: user msg
  console log('hello #{user} #{msg}')


Another example would be a selection of person’s ferrets older than 4. In Ruby this might look similar to below:

person.pets.select do |pet|
  pet.species == 'ferret' and pet.age > 4
end


and the following CoffeeScript:

person.pets.filter (pet) ->
  pet.species == 'ferret' and pet.age > 4


The equivalent canonical Luna would look like this:

person pets select(: pet
  pet species == 'ferret' && pet age > 4
)


Because this looks odd, and because function literals are almost always passed as the last argument, there’s a special-case, allowing a function literal to be defined after the closing ):

person pets select(): pet
  pet species == 'ferret' && pet age > 4


Furthering this special sauce, is the optional parens when no arguments are present:

person pets select: pet
  pet species == 'ferret' && pet age > 4


Taking this even further, I have planned to add deferred evaluation support to Luna, though I haven’t decided yet if it will opt-in (most likely) or not. This feature would provide extremely expressive capabilities, consider the following:

  person pets select(species == 'ferret' && age > 4)


In most imperative languages this would be evaluated before calling the function, so the argument would simply consist of a boolean from this expression. However in Luna these expressions could be evaluated by the callee against a given context, or optionally the caller’s context. Another slick example, mapping the the names of users over 20, and joining them.

users select(age > 20) map(name) join(', ');


Followed by our lovely JavaScript:

users.filter(function(user){
  return user.age > 20;
}).map(function(user){
  return user.name;
}).join(', ');


Number Literals

The one cool thing about Ruby, is that it allows you to place underscores in numbers, which can dramatically increase readability for larger values, so I’ve added this to Luna as well.

million = 1_000_000


Luna also has the typical octal and hexadecimal literals 0755 and 0xff etc, but also implements a few that I have not seen before, because these ones come from CSS! Often when programming in JavaScript with timeouts, intervals etc, so Luna has the s and ms literals. The following are equivalent:

2.5s
2500ms
2500


I’m not a huge fan of getters, visual ambiguity is not an experienced programmers friend, merely a toy that is fun on occasion. That being said s and ms in Luna would be valid slot accessors, as . is not required so they could be implemented within the language itself if it were to have getters:

Number s =:
   self * 1000


Another feature which I first encountered in Ruby, but is no doubt in several other languages is the means to represent a character code, as the character itself. In Ruby this takes the form ?:

?&
// => 38


In Luna the form is #:

#&
// => 38


Operators

Luna of course provides the swath of operators we’ve all come to know and love, along with a few others. I try to stay away form “wordy” operators, such as typical aliases “and”, and “or”, etc. The reason for this is while it does read better as english, large bodies of code quickly become nothing more than a soup of words, which I find tough to look at, after all, english is a terrible language, and an even worth programming language.

Below is the operator precedence table from highest to lowest:

    operator       |  associativity
    ---------------|---------------
    [ ] ( ) sp     |  left
    ++ --          |  right
    ! ~ + -        |  right
    * / %          |  left
    .              |  left
    + -            |  left
    << >>          |  left
    < <= > >=      |  left
    == !=          |  left
    &              |  left
    ^              |  left
    |              |  left
    &&             |  left
    ||             |  left
    ?:             |  right
    = :=           |  right
    not            |  right
    ,              |  left
    if unless      |  left
    while until


The low-precedence not operator is currently the only exception to my rule. This operator is similar to !, however this low precedence is handy, for example:

 User allowed =: realm
   !(banned || blockedFrom(realm))


may become:

 User allowed =: realm
   not banned || blockedFrom(realm)


Lexical Analysis

Luna’s Lexer currently consists of a small body of code (~350 LOC), not yet entirely complete. The Lexer’s job is to transform an input string into a normalized stream of tokens. For example Luna’s internals do not care if the operator == is two or three characters, hell it could be “equal to”, all it cares is that LUNA_OP_EQ is used internally to represent it.

Semantic Analysis

The Parser is in charge of semantics. Using the token stream created by the Lexer, the parser applies rules, and builds an AST, representing the structure of the program. Luna’s parser is a very small (~900 LOC) hand-coded recursive descent parser.

AST Output

For debugging Luna is bundled with an AST pretty printer. The function luna_prettyprint(luna_node_t *node) simply visits each node recursively, incrementing and decrementing the indentation as they are invoked. For example, the following Luna would write a string followed by a LF to stdout:

puts =: str
  stdout write(str . '\\n')


When luna(1) is invoked with the --ast flag, the following is written to stdout:

(= (id puts) (function str 
  (slot
    (id stdout)
    (call
      (id write)
      (. (id str) (string '\n'))))))


The Luna VM

So we’ve talked about syntax a bit, pretty trivial stuff, let’s get to the fun part! I’ve started implementing the VM in a separate branch, once the VM is usable I’ll begin the code generation, after which both will be merged into master. The code generation or “codegen” phase consists of traversing the AST (potentially several times), performing optimizations (such as precomputing expressions such as “10 / 2” to “5”), generating instructions for our virtual machine.

The VM is register based, these faux registers allow us to dramatically reduce the number of instructions, lowering ANSI C dispatch loop overhead, thus increasing performance. The instructions consist of an opcode (operation code), and optional operands. For example the LUNA_OP_ADD instruction would add two numbers. For example with a stack machine, the expression b = a + 10 may be expressed with the following sequence of pseudo instructions, pushing arguments onto the stack:

push 'a'
get
push 3
add
push 'b'
set


As you can see, that’s 6 instructions for a simple expression. In contrast, with our register based VM, we encode the opcode and operands into a 32 bit instruction, as expressed by the following macro used to pack the operands:

#define abc(op, a, b, c) ((LUNA_OP_##op) \
  | ((a) << 8) \
  | ((b) << 16) \
  | ((c) << 24))


With this, our ADD instruction may take the form shown below, where 1 is 2nd register (b), and 0 is the first (a), while 250 is the first constant.

add 1 0 250


Ditching the overhead required by the “abstract” instructions of a stack machine, dramatically increase our performance. While less, more specific instructions is better, the performance benefit is largely due to the fact that our dispatch loop performs less work.

The assembly output below is an ANSI C switch statement with -O3. As you can see gcc create the instruction cmpl here to compare the length of our switch, in this case 12 cases.

L18:
movl    (%rdx), %eax
addq    $4, %rdx
cmpl    $12, %eax
ja  L18
mov %eax, %eax
movslq  (%rsi,%rax,4),%rax
addq    %rsi, %rax
jmp *%rax


I haven’t yet decided on the approach I will take, however I would like Luna to remain portable, but that doesn’t mean we cannot special-case. One solution may be to utilize gcc’s “first class labels” to implement direct (or indirect) threading, using &&label to grab the label’s address. Using this we can perform unconditional jumps, removing the dispatch loop all together. With this technique gcc generates the following for goto **ip++, much better!

movq    (%rbx), %rax
addq    $8, %rbx
jmp *%rax


The End

If you are interested in seeing where the language goes, or trying it out when it becomes usable you can follow the progress on Github. Later I’ll touch on each component in greater detail, but that’s all for now!


Styling Canvas Drawings With CSS
Wed, 08 Jun 2011 18:59:00 -0700
Today I implemented an idea to style canvas elements with CSS, I’ve never personally seen this done, and it’s not always practical, but in some cases it would be very handy. For example a text selection api may be comprised of several “elements”, the text, the caret, the selection range rect etc.

Let’s say by default, our drawing will look the image below:



great, looks fine, but what if designers, or even developers for organizational purposes, could tweak this with CSS. Well you can! Suppose we want to support the following css:

  #editor .text {
    font: 20px helvetica, arial, sans-serif;
  }

  #editor .text .selection {
    background: #DFF3FC;
  }


First, the API to access such data will look very similar to how we wrote our css, however we provide the css property as well:

style('#editor .text .selection', 'font-family')


Now for the implementation details, keeping in mind this is not targeting cross-browser support, it’s simply a quick naive implementation, and I should note this does not cover the case of style changes, only initial styles.

So, firstly we check our cache, to prevent several expensive lookups, here style.cache is a property of our style function, if it’s available, we simply return the result.

  function style(selector, prop) {
    var cache = style.cache = style.cache || {}
      , cid = selector + ':' + prop;

    if (cache[cid]) return cache[cid];

    ...


Next up we will naively split the selector into an array so that we can work with it.

    ...
    var parts = selector.split(/ +/)
      , len = parts.length
      , parent = root = document.createElement('div')
      , child
      , part;

   ...


We loop through the “parts”, creating one div per “part”. This will allow us to see what the computed style is for an element, that otherwise, does not exist! because it’s a canvas. The naive implementation I have here, supports ids and classes only, so we check the first character, and assign the id and class respectively.

    ...
    for (var i = 0; i < len; ++i) {
      part = parts[i];
      child = document.createElement('div');
      parent.appendChild(child);
      parent = child;
      if ('#' == part[0]) {
        child.setAttribute('id', part.substr(1));
      } else if ('.' == part[0]) {
        child.setAttribute('class', part.substr(1));
      }
    }
    ...


Finally we append the root element to the document.body so that the styles are applied, get the computed style for the given prop, remove the element, and cache/return our value.

  ...
    document.body.appendChild(root);
    var ret = getComputedStyle(child)[prop];
    document.body.removeChild(root);
    return cache[cid] = ret;
  }


Example Usage

Now let’s try it out, first, the css, providing a light yellow background:

  #chalk .text .selection {
    background: #FAFFDF;
  }


In our JavaScript text selection logic, we should provide a JavaScript API for altering styling as well, however for this example, let’s add it directly:

 ctx.fillStyle = style('#editor .text .selection', 'background-color');
 ctx.fill(...)


Once applied, we get the following result:



That’s it! you can apply this trick to assign font sizes and families, foreground and background coloring, border colors, anything you can come up with! if anyone comes up with a robust implementation I would love to see it!

Full Source

Here’s the full implementation:

  function style(selector, prop) {
    var cache = style.cache = style.cache || {}
      , cid = selector + ':' + prop;

    if (cache[cid]) return cache[cid];

    var parts = selector.split(/ +/)
      , len = parts.length
      , parent = root = document.createElement('div')
      , child
      , part;

    for (var i = 0; i < len; ++i) {
      part = parts[i];
      child = document.createElement('div');
      parent.appendChild(child);
      parent = child;
      if ('#' == part[0]) {
        child.setAttribute('id', part.substr(1));
      } else if ('.' == part[0]) {
        child.setAttribute('class', part.substr(1));
      }
    }

    document.body.appendChild(root);
    var ret = getComputedStyle(child)[prop];
    document.body.removeChild(root);
    return cache[cid] = ret;
  }



node recap #2
Wed, 25 May 2011 19:20:20 -0700
JSONSelect

This first library is JSONSelect. This library allows you to query JSON using css selectors! this seems like an obvious one, but I haven’t personally seen any other implementations.

It’s not node-specific, however it is JavaScript, so naturally it works with nodejs as well, and over all it’s just a neat concept. Suppose we have the following JSON:

JSONSelect

  {
      "name": {
          "first": "Lloyd",
          "last": "Hilaiel"
      },
      "favoriteColor": "yellow",
      "languagesSpoken": [
          {
              "language": "Bulgarian",
              "level": "advanced"
          },
          {
              "language": "English",
              "level": "native"
          },
          {
              "language": "Spanish",
              "level": "beginner"
          }
      ],
      "seatingPreference": [
          "window",
          "aisle"
      ],
      "drinkPreference": [
          "whiskey",
          "beer",
          "wine"
      ],
      "weight": 172
  }


To grab the languages “Bulgarian”, “English” and “Spanish” we could issue the following query:

.languagesSpoken .language


cool!

node-canvas Image#src=Buffer

A few days ago I added support to node-canvas for Image#src= to accept Buffer objects, not only path strings. This needs to be polished, and to increase format support but we can finally apply image data from arbitrary sources:

 var buf = fs.readFileSync(__dirname + '/textures/jpeg');
 var img = new Image;
 img.src = buf;
 ctx.drawImage(img, 0, 0, 400, 400);


When the Buffer is assigned we can sniff the bytes to determine the format by looking for the “magic number”. For example a PNG starts with the following bytes “89 50 4e 47 0d 0a 1a 0a”, while a JPEG starts with “ff d8”.

Express 2.3.8

A recent Express refactor moved Connect’s router middleware into Express so that I could modify it further. This also means that Connect 2.0 will no longer have router. At first it seemed like a good idea, but routing to specific and it gives people the wrong idea, Connect is meant to be an abstraction layer for higher level frameworks, not to be used directly for application logic. Though this is not true for all cases, such as simply serving static files from a directory or two.

This commit consists of a general refactor of the router, while retaining the public API. What does this mean for Express? flexibility! For example now we may query Express to see which (if any) routes match a specific route path:

 app.get('/user/:id');
 // => [Route]


or routes that match any HTTP method:

 app.all('/user/:id');
 // => [Route, Route, Route]


this is functionally equivalent to:

 app.lookup.all('/user/:id');


Another alternative is “matching” rather than “lookup”. With app.match.VERB() we can query Express to see which routes would match the url passed, for example:

app.match.get('/user/12/edit');
// => [Route]

app.match.del('/user/12');
// => [Route]

app.match.all('/user/12?foo=bar');
// => [Route, Route]


In this commit I’ve introduced the ability to register logic for defining parameters. Within Express core we only support middleware-style param pre-conditions, for example auto-loading a user for any route that includes the :uid param:

app.param('uid', function(req, res, next, uid){
  User.find(uid, function(err, user){
    if (err) return next(err);
    req.user = user;
    next();
  });
});

app.get('/user/:uid, function(){
  // req.user
});


while this is great, some cases can be less verbose, while still expanding to middleware-style functions, this is where express-params comes in. This plugin extends Express with additional app.param() logic, for example via RegExp:

  app.param('uid', /^[0-9]+$/);

  app.get('/user/:uid', function(req, res, next){
    var uid = req.params.uid;
    res.send('user ' + uid);
  });

  app.get('/user/:name', function(req, res, next){
    var name = req.params.name;
    res.send('user ' + name);
  });


or via return value, useful for validations and coercion:

  app.param('id', Number);

  app.get('/user/:id', function(req, res, next){
    var id = req.params.id;
    res.send('typeof ' + typeof id + ' ' + id);
  });


Fabric.js

This one is not node related, but I wanted to sneak it in :) Fabric is a slick client-side library providing an object model on top of canvas. It has a built-in drawing mode and path smoothing, SVG parsing and some other really cool features. If you do a lot of canvas work it’s worth checking out, the author did a good job at keeping the source clean and commented, which is very important when utilizing open source.



node-migrate

node-migrate is a very small abstract migration framework. All it cares about is that you supply an up() and down() method, and invoke the callback when your migration is complete:

 exports.up = function(next){
   next();
 };

 exports.down = function(next){
   next();
 };


node-migrate comes with the migrate(1) executable, allowing you to run and create migrations, for example here we add two migrations, populating ./migrations/0-add-pets.js etc.

 $ migrate create add-pets
 $ migrate create add-owners


The contents of our badass pet adding migration might look something like this:

 var db = require('./db');

  exports.up = function(next){
    db.rpush('pets', 'tobi');
    db.rpush('pets', 'loki');
    db.rpush('pets', 'jane', next);
  };

  exports.down = function(next){
    db.rpop('pets');
    db.rpop('pets', next);
  };


Now all we have to do is run the migrations:

 $ migrate
 up : migrations/0-add-pets.js
 up : migrations/1-add-jane.js
 up : migrations/2-add-owners.js
 up : migrations/3-coolest-pet.js
 migration : complete


The next time we run migrate, we’ll see that they have already been completed:

 $ migrate
 migration : complete


For more information check out the GitHub repo.

Move.js

The other night I noticed that Apple’s new iMac page showcased some really slick CSS3 animations, and wanted a really simple and intuitive way to create similar effects so I came up with Move.js.

Below is an example of the API:

move('#example-13 .box2')
  .set('background-color', 'red')
  .x(500)
  .scale(.5)
  .rotate(60)
    .then()
      .rotate(30)
      .scale(1.5)
      .set('border-radius', 5)
      .set('background-color', 'white')
      .then()
        .set('opacity', 0)
        .pop()
      .pop()
  .end();


It’s still in it’s early stages, and I don’t have much in the way of documentation yet however feel free to check out the site as well as the examples in the repository.


node recap
Wed, 11 May 2011 12:16:00 -0700
Figured I would whip up a quick blog post during lunch to mention some recent additions / releases to node projects.

Express Mongoose

Aaron recently released express-mongoose which is a fantastic plugin for any of you using Mongoose allowing you to pass query promises directly to res.render(), res.partial(), and `res.send() calls, deferring rendering until complete.

For example you may currently be nesting as shown below:

var News = db.model('News');
app.get('/dashboard', function (req, res, next) {
  req.user.getLikes(function(err, likes){
    if (err) return next(err);
    News.getLatest(function(err, news){
      if (err) return next(err);
      res.render('dashboard', { likes: likes, latestNews: news });
    });
  });
});


well now you can simply pass the promises, next()ing exceptions. Much cleaner!

var News = db.model('News');
app.get('/dashboard', function (req, res) {
  res.render('dashboard', {
      likes: req.user.getLikes()
    , latestNews: News.getLatest()
  });
});


Asset

asset is a tiny but helpful utility written with node to manage assets such a JavaScript or css libraries. You could think of this as the homebrew or bundler of assets.

Installing assets is extremely simple, and by default will be installed to ./public. For example we can install g.raphael and g.pie to ./public/javascripts which will install the raphael dependency as well:

$ asset g.raphael g.pie -o public/javascripts

   install : raphael@1.4.7
   install : g.raphael@0.4.1
   install : g.pie@0.4.1
  download : raphael@1.4.7
  complete : raphael@1.4.7 public/javascripts/raphael.js
  download : g.raphael@0.4.1
  complete : g.raphael@0.4.1 public/javascripts/g.raphael.js
  download : g.pie@0.4.1
  complete : g.pie@0.4.1 public/javascripts/g.pie.js


Last night I added a tiny patch which adds support for assets.json, which you can add to your project to list dependencies. For example this file might contain something like below

{
     "g.raphael": "0.4.1"
   , "jquery": "1.5.2"
   , "modernizr": "1.7"
 }


Which we can then install with a single command:

$ asset

    install : g.raphael@0.4.1
 dependency : raphael@1.4.7
    install : raphael@1.4.7
    install : jquery@1.5.2
    install : modernizr@1.7
   download : jquery@1.5.2
   complete : jquery@1.5.2 public/jquery.js
   download : raphael@1.4.7
   complete : raphael@1.4.7 public/raphael.js
   download : g.raphael@0.4.1
   complete : g.raphael@0.4.1 public/g.raphael.js
   download : modernizr@1.7
   complete : modernizr@1.7 public/modernizr.js


Cluster updates

Cluster is a multi-process server manager for node. Recent additions now allow you to run cluster without a server, which is great for processing job queues! below is an example of how to utilize cluster for such a task:

var cluster = require('../');

var proc = cluster()
  .set('workers', 4)
  .use(cluster.debug())
  .start();

if (proc.isWorker) {
  var id = process.env.CLUSTER_WORKER;
  console.log('  worker #%d started', id);
  setInterval(function(){
    console.log('  processing job from worker #%d', id);
  }, 1000);
} else {
  setTimeout(function(){
    proc.close();
  }, 10000);
}


Express Resource

For those of you who have been looking for resourceful routing for Express, you may have heard or express-resource already, and if not express-resource utilizes regular Express HTTP verb/pathname routing dressed up in an API better suited for resources.

Installation:

$ npm install express-resource


Below is an example use-case providing actions for forums and their associated threads. By calling forum.add(threads) routes such as GET /forums/:forum/threads/:thread and GET /forums/:forum/threads are mapped to action callbacks. This library also supports auto-loading of resources, providing them as req.forum, req.thread etc instead of manually doing this using the values of req.params.forum or req.params.thread.

  var forum = app.resource('forum', actionsHere)
    , threads = app.resource('thread', actionsHere)

  forum.add(threads);


For more details check out the documentation and tests in the repo.

RedisKit

Week or so ago I started a small high-level redis library called rediskit. I started creating the lower level structures, and will be building up to composite structures and higher level abstractions.

Install with:

$ npm install rediskit


Example usage:

var list = new List('pets')
  , client = list.client
  , tobi = new Hash('pet:tobi')
  , loki = new Hash('pet:loki')
  , jane = new Hash('pet:jane');

list.rpush('tobi');
list.rpush('jane');
list.rpush('loki');

tobi.set('age', 1);
loki.set('age', 0.5);
jane.set('age', 3);

list.sort.by('pet:*->age').get('#').get('pet:*->age').end(function(err, res){
  res.should.eql(['loki', '0.5', 'tobi', '1', 'jane', '3']);
});


RedBack

I also just saw a tweet about a similar library redback which is worth checking out if you are a redis fan.

Installation:

$ npm install redback


Usage:

var redback = require('redback').createClient();

//redback.create(key)

var user1 = redback.createHash('user1');
user.set({username:'chris', password:'redisisawesome'}, callback);

var log = redback.createCappedList('log', 1000);
log.push('Log message ...');

var user3 = redback.createSocialGraph(3);
user3.follow(1, callback);



Stylus vs SASS vs LESS error reporting
Wed, 27 Apr 2011 19:35:00 -0700
I was curious what SASS did as far as error reporting goes, so I tried the following snippet with SASS, LESS as well as Stylus.

body {
  form input {
    background: foo[fail];
  }
}


LESS

The output from LESS was terrible:

  Syntax Error on line 4


note: that for LESS I had to tweak the input to “foo[fail’]’;” since it simply consumes the input above

SASS

The SASS output was not bad, it shows you a tiny chunk of the line for context:

Syntax error: Invalid CSS after "...background: foo": expected ";", was "[fail];"
        on line 4 of standard input
  Use --trace for backtrace.


note: —trace is for the ruby stack trace, not SASS

Stylus

Then we have Stylus, showing you ~8 lines of context (by default), and even a detailed stack trace including the call sites much like you would find in other languages.

    Error: /tmp/stylus/test.styl:4
       1| 
       2| body {
       3|   form input {
     > 4|     background: foo[fail];
       5|   }
       6| }
       7| 

    cannot perform foo[(fail)]
        at "form input" (/tmp/stylus/test.styl:4)
        at "body" (/tmp/stylus/test.styl:3)



Cluster Live 0.0.1
Sun, 17 Apr 2011 22:34:00 -0700
cluster-live is a plugin for the Cluster server manager written for node. Cluster is similar to Ruby’s “Unicorn”, however is extremely extensible via a simple plugin system.

Cluster is built with the Express web framework, Jade for templates, Stylus for CSS, and Socket.IO for communication.

Below is a screenshot of cluster-live in action. Each worker process is represented by its own smoothie chart, showing the active connections, total connections, and requests issued to the worker. Connections appear as the blue line, and requests as gray, however in the screenshot below a single connection was issued per simulated request.



Administration

Currently the only administration task that can be performed from cluster-live is the spawning and removal of workers by pressing the plus or minus buttons in the top-right corner.



Example

Using cluster, and cluster-live is extremely simple, first install the modules:

 $ npm install cluster cluster-live


Then initialize cluster with cluster(server), and use() the stats() plugin which produces the events that cluster-live uses for reporting, and then of course finally live() itself.

var http = require('http')
  , cluster = require('cluster')
  , live = require('cluster-live');

var server = http.createServer(function(req, res){
  res.end('Hello World');
});

cluster(server)
  .set('workers', 4)
  .use(cluster.stats({ connections: true, lightRequests: true }))
  .use(live())
  .listen(3000);


By default the cluster-live port is 8888, so fire up 3000 and 8888 in your browser to see it in action. See the readme for information changing the port, host, or TLS options.

Future

This plugin is still very much a work-in-progress, but it’s somewhat usable for now although optimizations are still required in order to provide sufficient performance. With minimal profiling it seems that smoothie is currently one of the largest benchmarks but it is something I will have to dig into deeper. It would be great to add some more administration capabilities, as well as more reporting, as many statistics are still currently left out.

More Information

cluster-live github repo
cluster github repo
cluster documentation