The JavaScript blog.


search optimisation productivity angularjs

Grasp, Optimizing AngularJS

Posted on .


George Zahariev sent in his latest project, Grasp (GitHub: gkz / grasp, License: MIT, npm: grasp). Grasp allows you to search and replace JavaScript code based on its abstract syntax tree.

Unlike programs such as "grep" or "sed", it searches the structure behind your code, rather than simply the text you've written - this allows for much more powerful searches.

It uses a language inspired by CSS selectors for creating intuitive search expressions. For example, given this code:

var obj = {  
  toEven: function(x) {
    if (isEven(x)) {
      return x;
    } else {
      return x + 1;

assert.equal(false, isEven(7));  

Searching for obj.props func! #isEven would match the call to isEven inside the property toEven on the object obj. References outside, like the assertion at the bottom, will not be matched.

My preferred solution for searching code is The Silver Searcher, but I like the idea of combining an AST with search and replace -- it seems like a potentially fertile ground for experimentation.

Optimizing AngularJS: 1200ms to 35ms

In Optimizing AngularJS: 1200ms to 35ms, optimisations for AngularJS are discussed. It's actually a lot deeper than you might expect: it goes from caching DOM elements to bypassing watchers for hidden elements, and deferring element creation:

A straightforward AngularJS implementation of the log view took 1.2 seconds to advance to the next page, but with some careful optimizations we were able to reduce that to 35 milliseconds. These optimizations proved to be useful in other parts of the application, and fit in well with the AngularJS philosophy, though we had to break few rules to implement them. In this article, we'll discuss the techniques we used.

The conventional wisdom for AngularJS says that you should keep the number of data-bound elements below 200. With an element per word, we were far above that level.

Using Chrome's JavaScript profiler, we quickly identified two sources of lag. First, each update spent a lot of time creating and destroying DOM elements. Second, each word had its own change watcher, which AngularJS would invoke on every mouse click. This was causing the lag on unrelated actions like the navigation dropdown.

The post got a huge amount of interest, so the authors are working on open sourcing their AngularJS directives.


libraries node security search benchmarking

localStorage DOS, Lunr.js, Vlug

Posted on .

localStorage DOS

Even though the Web Storage specification says user agents should limit the amount of space used to store data, a new exploit uses it to store gigabytes of junk. The exploit is based around storing data per-subdomain, which gets around the limits most browsers have already implemented. Users testing it found Chrome would crash when run in incognito mode, but Firefox was immune to the attack.

Other security researchers have raised concerns about localStorage in the past. Joey Tyson talked about storing malicious code in localStorage, and Todd Anglin wrote about some of the more obscure facts about localStorage which touches on security.


Oliver Nightingale from New Bamboo sent in his extremely well-presented full-text browser-based search library (GitHub: olivernn / lunr.js, License: MIT), which indexes JSON documents using some of the core techniques of larger server-side full-text search engines: tokenising, stemming, and stop word removal.

By removing the need of extra server side processes, search can be a feature on sites or apps that otherwise would not have warranted the extra complexity.

Trie is used for mapping tokens to matching documents, so if you're interested in JavaScript implementations of data structures then take a look at the source. The source includes tests and benchmarks, and a build script so you can generate your own builds.


Vlug (GitHub: pllee / vlug, License: MIT, npm: vlug) by Patrick Lee is a small instrumentation library for benchmarking code without manually adding log statements. The Vlug.Interceptor object takes a specification of things to log, which will dynamically invoke calls to console.time and console.timeEnd to collect benchmarks.

Patrick has tested it with browsers and Node, and has included Vlug.Runner for running iterations on functions. The readme and homepage both have documentation and examples.


JSON cli node modules search unix sandbox

Node Roundup: 0.8.17, 0.9.6, gelf-node, jsong, Stuff.js

Posted on .

You can send in your Node projects for review through our contact form or @dailyjs.

Node 0.8.17, 0.9.6 (Unstable)

Node 0.8.17 was released last week with a security fix for TypedArrays, so you should upgrade if you're using them:

If user input can affect the size parameter in a TypedArray, an integer overflow vulnerability could allow an attacker to write to areas of memory outside the intended buffer.

The unstable branch also saw a new release with 0.9.6. The streams API has changed slightly again as it continues to be developed: Isaac Schlueter added the readable.push method, and there are also fixes for TypedArrays in this branch too.


I've had a lot of luck with ElasticSearch. The last time I used it was on a project that used Node HTTP crawlers to index thousands of sites, and it was all backed by ElasticSearch. It worked extremely well and I actually got paid! If you're also using ElasticSearch, then you might be interested in the gelf-node module (GitHub: robertkowalski / gelf-node, License: MIT, npm: gelf) by Robert Kowalski. It works with Graylog2, allowing messages to be sent from Node:

var Gelf = require('gelf');  
var gelf = new Gelf({  
  graylogPort: 12201,
  graylogHostname: '',
  connection: 'wan',
  maxChunkSizeWan: 1420,
  maxChunkSizeLan: 8154

// The readme has an example message
gelf.emit('gelf.log', message);  

Graylog2 itself is released under the GPL (version 3).


jsong (GitHub: textgoeshere / jsong, npm: jsong, License: MIT) by Dave Nolan is a CLI tool and module for filtering JSON. It's built with streamin and clarinet, and shows full paths to matches:

$ cat my.json | jsong -k 'z\wp'

foo.bar.zip: val1  
foo.bar.zap: val2  
quux.zip: val  

Because it's built using streams, it should handle large JSON files.


Here's another project by Amjad Masad from Codecademy: Stuff.js (GitHub: Codecademy / stuff.js, License: MIT) -- an easy way to run arbitrary HTML and JavaScript in an iframe. It uses node-static and uglify-js to create a sandbox for securely running user-contributed code.

There's an example in Amjad's blog post that shows how to use it:

stuff(secureIframeUrl, function (context) {  
  var html = CodeMirror.fromTextArea($('#html'), {
    onChange: reload
  , mode: 'text/html'
  var js = CodeMirror.fromTextArea($('#js'), {
    onChange: reload
  , mode: 'javascript'
  var css = CodeMirror.fromTextArea($('#css'), {
    onChange: reload
  , mode: 'css'

  var t = null;
  function reload () {
    t = setTimeout(function () {
      var code = '<!DOCTYPE html><html><head>';
      code += '<style>'  + css.getValue() + '</style>';
      code += '<body>' + html.getValue();
      code += '<script>' + js.getValue() + '</script>';
      code += '</body></html>';
    }, 50);


pdf audio search

pdf.js, VisualSearch.js, Voice Debugger

Posted on .

pdf.js: Rendering PDF with HTML5 and JavaScript

In pdf.js: Rendering PDF with HTML5 and
Andreas Gal
discusses a project to determine if HTML5 is complete enough to render
PDFs. The GitHub pdf.js project
contains progress so far, and it looks like Andreas is updating it

There's also another related post, Overview of pdf.js
which explains how it works:

pdf.js (currently) parses raw arrays of bytes into streams of PDF "bytecode", compiles the bytecode into JavaScript programs, then executes the programs. Yes, it's a sort of PDF JIT. The side effect of those programs is to draw on an HTML5 Canvas.

It sounds like a fascinating project, particularly the PDF stream


VisualSearch.js (GitHub: documentcloud / visualsearch,
License) from DocumentCloud is a novel take on search design. It allows
field-level options to be specified using dynamic inline completion,
using simple icons and drop-down menus.

Voice Debugger

Voice Debugger (GitHub: ferrante / Voice-Debugger) by Damian
Wielgosik is a little HTML5 experiment to catch JavaScript errors and
read them out. A set of standard errors are saved as WAV files, and then
played with an audio tag.

I've been doing some pretty heavy HTML audio work lately, so I found
this extremely amusing...