The JavaScript blog.


pdf games node backbone.js

Impossible Mission, Full-Text Indexing, Backbone.Projections

Posted on .

Impossible Mission

Impossible Mission

Impossible Mission by Krisztián Tóth is a JavaScript remake of the C64 classic. You can view the source to see how it all works, if things like this.dieByZapFrames and this.searchedFurniture sound appealing to you.

Krisztián previously sent in Boulder Dash and Wizard of Wor which were similar remakes written using the same approach.

Client-Side Full-Text Indexing

Gary Sieling sent in a post he wrote about full-text indexing with client-side JavaScript, in which he looks at PDF.js and Lunr: Building a Full-Text Index in JavaScript. I briefly mentioned Lunr by Oliver Nightingale back in March.

One great thing about this type of index is that the work can be done in parallel and then combined as a map-reduce job. Only three entries from the above object need to be combined, as "fields" and "pipeline" are static.


In relational databases, a projection is a subset of available data. Backbone.Projections (GitHub: andreypopp / backbone.projections, License: MIT, npm: backbone.projections) by Andrey Popp is the equivalent for Backbone collections -- they allow a transformed subset of values in a collection can be represented and synced.

The supported projections are Capped and Filtered. Capped collections are limited based on a size and function -- the function will be used to order the results prior to truncating them. Filtered projections filter out results based on a function that returns a boolean.

Projections can be composed by passing one project to another. This example creates a Filtered projection, and then passes it to a Capped projection to limit and order the results:

var todaysPosts = new Filtered(posts, {  
  filter: function(post) {
    return post.get('date').isToday();

var topTodaysPosts = new Capped(todaysPosts, {  
  cap: 5,
  comparator: function(post) {
    return post.get('likes');

The author has written unit tests with Mocha, and documentation is available in the readme.


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


pdf datauri

JavaScript PDF Generation

Posted on .

I searched for JavaScript PDF generation just to see what server-side
technologies are available. I found
jsPDF, which works both server-side and in browser. It currently works best in Safari, Firefox 3+ and Opera.

It uses the data URI
to send the data
to the browser, which is a problem for IE.

The code is easy to follow -- if you want to learn about PDF generation
it's interesting to read through. There's a demo
usage examples and the resulting PDFs.

Usage looks like this:

var doc = new jsPDF();
doc.text(20, 20, 'Hello world!');
doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
doc.text(20, 20, 'Do you like that?');

// Output as Data URI

jsPDF doesn't have many options yet -- fonts are hardcoded for example
(to helvetica). It's an interesting demonstration of the power of client-side programming though.