DailyJS

DailyJS

The JavaScript blog.


Tagdebugging
Featured

webgl debugging space instrumentation

Orbit Viewer, Earhorn

Posted on .

Orbit Viewer

Orbit Viewer

Orbit Viewer is a Chrome Experiment by Kevin Gill that helps visualise the orbits of comets and satellites. You can watch the famous comet Shoemaker–Levy 9, or see the current position of the International Space Station. It should work with most WebGL capable browsers.

A sort of "Where are they now" for spacecraft and comets: Check out realtime positions, along with historical and projected flight paths of our solar system's trailblazing spacecraft and comets. All in a zoomable/rotatable 3D interface. Using historical and real-time trajectory information for NASA's JPL Horizons system, and in-browser WebGL and Three.js rendering.

Earhorn

Earhorn (GitHub: omphalos / earhorn, License: MIT) by "omphalos" is a library for instrumenting JavaScript. You pass earhorn$ a label and a function, and then you can view the function as the values change.

The mouse example shows how this works: the source for a jQuery mousemove listener is displayed, and whenever you move the mouse the integer values for the current coordinates will be reflected in real time.

An iframe is used that loads the earhorn/index.html page which knows how to display an instrumented version of the function. Internally, Earhorn uses Esprima to generate an abstract syntax tree that is manipulated to allow the code to be observed.

It reminds me a little bit of the Watches feature in Light Table, and some of the recent improvements to WebKit Inspector.

Featured

libraries node browser editors debugging yeoman

Yeoman Configstore, Debug.js, Sublime JavaScript Refactoring

Posted on .

Configstore

Sindre Sorhus sent in configstore (GitHub: yeoman / configstore, License: BSD, npm: configstore), a small module for storing configuration variables without worrying about where and how. The underlying data file is YAML, and stored in $XDG_CONFIG_HOME.

Configstore instances are used with a simple API for getting, setting, and deleting values:

var Configstore = require('configstore');  
var packageName = require('./package').name;

var conf = new Configstore(packageName, { foo: 'bar' });

conf.set('awesome', true);  
console.log(conf.get('awesome'));  // true  
console.log(conf.get('foo'));      // bar

conf.del('awesome');  
console.log(conf.get('awesome'));  // undefined  

The Yeoman repository on GitHub has many more interesting server-side and client-side modules -- currently most projects are related to client-side workflow, but given the discussions on Yeoman's Google+ account I expect there will be an increasing number of server-side modules too.

Debug.js

Jerome Etienne has appeared on DailyJS a few times with his WebGL libraries and tutorials. He recently released debug.js (GitHub: jeromeetienne / debug.js, License: MIT), which is a set of tools for browser and Node JavaScript debugging.

The tutorial focuses on global leak detection, which is able to display a trace that shows where the leak originated. Another major feature is strong type checking for properties and function arguments.

Methods can also be marked as deprecated, allowing debug.js to generate notifications when such methods are accessed.

More details can be found on the debug.js project page.

Sublime Text Refactoring Plugin

Stephan Ahlf sent in his Sublime Text Refactoring Plugin (GitHub: s-a / sublime-text-refactor, License: MIT/GPL). The main features are method extraction, variable and function definition navigation, and renaming based on scope.

The plugin uses Node, and has some unit tests written in Mocha. The author is planning to add more features (the readme has a to-do list).

Featured

testing node modules parsing text debugging memory

memdiff, numerizerJS, Obfuscate.js

Posted on .

memdiff

memdiff (GitHub: azer / memdiff, License: WTFPL, npm: memdiff) by Azer Koculu is a BDD-style memory leak tool based on memwatch. It can either be used by writing scripts with describe and it, and then running them with memdiff:

function SimpleClass(){}  
var leaks = [];

describe('SimpleClass', function() {  
  it('is leaking', function() {
    leaks.push(new SimpleClass);
  });

  it('is not leaking', function() {
    new SimpleClass;
  });
});

Or by loading memdiff with require and passing a callback to memdiff. The memwatch module itself has an event-based API, and includes a platform-independent native module -- so both of these projects are tied to Node and won't work in a browser.

numerizerJS

numerizerJS (GitHub: bolgovr / numerizerJS, License: MIT, npm: numerizer) by Roman Bolgov is a library for parsing English language string representations of numbers:

var numerizer = require('numerizer');  
numerizer('forty two'); // '42'  

It's currently very simple, and doesn't support browsers out of the box, but I like the fact the author has included Mocha tests. It'd work well alongside other libraries like Moment.js for providing intuitive text-based interfaces.

Obfuscate.js

Obfuscate.js (GitHub: miohtama / obfuscate.js, License: MIT) by Mikko Ohtamaa is a client-side script for replacing text on pages with nonsense that may be more desirable than private information. Mikko suggests this might be useful for making screenshots, so post-processing isn't required to blur out personal information. The obfuscate function takes an optional selector, so either the entire body of a document can be obfuscated, or just the contents of a given selector.

It walks through each child node looking for text nodes, so it's lightweight and doesn't have any dependencies. It also tries to make the text look similar (at a glance) to the original text.

Featured

node modules documentation authentication debugging markdown

Node Roundup: Markdox, node-authenticate, node-codein

Posted on .

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

Markdox

Markdox (License: MIT, npm: markdox) by Charles Bourasseau is a documentation generator based on Dox (which TJ changed to output JSON only) that produces Markdown. It can be used in the shell, or programatically.

This is a straightforward way of generating API documentation that works with services that support Markdown, like GitHub.

authenticate-pam

authenticate-pam (License: MIT, npm: authenticate-pam) by Damian Kaczmarek is an asynchronous PAM authentication addon. It uses libpam to authenticate users with a simple, idiomatic Node API:

var pam = require('authenticate-pam');  
pam.authenticate('myusername', 'mysecretpassword', function(err) {  
  if (err) {
    console.log(err);
  } else {
    console.log('Authenticated!');
  }
});

node-codein

node-codein (License: MIT, npm: node-codein) by "ketamynx" is a Windows-friendly Node interface based on WebKit Inspector. It can display objects graphically as trees, and can also execute code.

Although it looks like a debugger interface, it seems like the author intends for it to be used as a friendly alternative to the REPL.

Featured

frameworks animation node debugging

Meteor, Qatrix, WebKit Remote Debugging 1.0

Posted on .

Meteor

Meteor (License: GPL v2, GitHub: meteor / meteor) is a web framework that provides the same APIs for both the client and the server. It has similar goals to other projects we've featured on DailyJS before, such as Derby, and already includes some great documentation.

Applications run using Node, but the authors have provided an installation script rather than distributing it with npm. Instead of using Node's asynchronous API style, fibers have been used. Code that's only suitable for the server is kept inside server/ directories. Rendering is performed client-side -- server-side templates are generally lightweight.

An important aspect of Meteor application structure is the use of a client/server model. A MongoDB database is used, and data is distributed between the server and clients. Clients subscribe to messages that they're interested in. Templates are data-driven, and this is modelled using the reactive programming paradigm.

Meteor comes with scripts to bundle and deploy applications, and applications can be deployed to Meteor's servers for free:

$ meteor deploy myapp.meteor.com

This can be used on a trial basis:

We provide this as a free service so you can try Meteor. It is also helpful for quickly putting up internal betas, demos, and so on.

For all the excitement around Meteor, and the famous developers who founded the project, there are a few glaringly obvious problems with it. For example, Google can't see Meteor's website at all (search for site:www.meteor.com). This may not be a problem for applications, but I'd consider developing the public pages with something else or as a static site. It also includes its own packaging system, which is confusing to me as a Node developer. Finally, authentication is not addressed, but the developers are working on it.

Qatrix

Qatrix (GitHub: qatrix / Qatrix, License: MIT) by Angel Lai is a client-side framework with some bold claims. There are four Qatrix benchmarks which will compare performance to jQuery 1.7.1, and it's meant to support IE6-10, but there aren't yet any unit tests so I'm not sure how solid these claims are right now.

The developers have written some pretty good documentation for Qatrix already, and after reviewing the code on GitHub I realised what their angle is: it's jQuery without the friendly chainable API in order to boost performance.

Consider this jQuery example:

$('.box_wrap span')
  .text('I found this span!')
  .attr('title', 'this is title')
  .css({
    'color': '#C15547',
    'font-size': '18px'
  });

This is the equivalent in Qatrix:

$select('.box_wrap span', function(item) {
  $text(item, 'I found this span!');
  $attr.set(item, 'title', 'this is title');
  $css.set(item, {
    'color': '#C15547',
    'font-size': '18px'
  });
});

It's not a world apart from the jQuery example, and someone could build a chainable API wrapper around Qatrix if they really wanted to. The GitHub history only goes back to March 17th, so it's a very young framework -- I expect the authors would appreciate contributions from fellow client-side hackers.

WebKit Remote Debugger

Version 1.0 of the WebKit remote debugging protocol has been announced: Announcing Remote Debugging Protocol v1.0. Remote debugging can be enabled in Chrome, and WebSockets are used for communication with the debugger.

It's even possible to connect one WebKit browser to another, because Chrome includes a small HTTP server -- Web Inspector can be used as a remote debugging client.

Driving Google Chrome via WebSocket API is a tutorial by Ilya Grigorik that shows how to write a remote debugging client. His example is in Ruby, but it's just HTTP requests and JSON:

The example above illustrates a very simple interaction with the Network API, but the protocol exposes much more. You can drive the JS debugger, control the V8 VM, modify and inspect the DOM, and track Timeline events amongst half a dozen other capabilities.