DailyJS

Reznik, JSQA, Riloadr

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

node amd responsive images

Reznik, JSQA, Riloadr

Posted by Alex R. Young on .
Featured

node amd responsive images

Reznik, JSQA, Riloadr

Posted by Alex R. Young on .

Reznik

Reznik (License: MIT, npm: reznik) by Alex Lawrence is a code analysis tool for AMD projects. Given a set of AMD modules, Reznik's server-side component can resolve individual module dependencies on demand. It builds a module list, and then checks the code for circular or missing dependencies.

The author notes that Reznik was developed in Node, but also works in PhantomJS. There's a command-line tool that can run under either of these environments and output module lists using various formats, including HTML and JSON.

JSQA

JSQA from PaquitoSoft uses JSHint to statically analyse your code using an Express/Bootstrap-powered web application. It uses Socket.IO and fs.watch or fs.watchFile so changes to source files are updated dynamically.

The lib/config.js file must be edited to include a path to a suitable JavaScript project.

Riloadr

Riloadr (License: MIT) by Túbal Martín is a cross-browser, framework-independent responsive image loader. The library supports quite a few options, but basic usage involves specifying "breakpoints" for loading the right images based on the viewport's size:

var group1 = new Riloadr({  
  breakpoints: [
    { name: '320px', maxWidth: 320 }, // iPhone 3
    { name: '640px', maxWidth: 320, minDevicePixelRatio: 2 }, // iPhone 4 Retina display
    { name: '640px', minWidth: 321, maxWidth: 640 },
    { name: '1024px', minWidth: 641 }
  ]
});

As this example demonstrates, Riloadr is a useful library for supporting high-density displays.

When Riloadr parses your breakpoints it mimics CSS behavior: Riloadr computes the browser's viewport width in CSS pixels, then traverses your breakpoints to find out the appropiate image size to load and makes use of your breakpoint names to get the correct src (image URL) to load the image.