The JavaScript blog.


ui graphics images icons Microsoft

Material Design Icons, rdljs, PhotoSwipe

Posted on .

Material Design Icons for Angular

Google's Material Design stuff is amazing, and their recent UI and animation libraries are useful for those of us who don't want to spend too much time developing a totally new UI for every project. However, these tools have limitations. Urmil Parikh found that the official Material Design Icons were hard to recolour without patching the SVG files.

Material Design Icons

To work around this issue, Urmil created Angular Material Icons v0.3.0 (GitHub: klarsys/angular-material-icons, License: MIT, Bower: angular-material-icons, npm: angular-material-icons). By including this project, you get a new Angular directive called ng-md-icon which supports options for style and size. It also optionally supports SVG-Morpheus -- this allows you to morph between icons which might work well in animation-heavy material design projects.

This library works by hard-coding the SVG paths in an object called shapes. The paths can be embedded in svg elements with the required size and style attributes.


André Vale sent in rdljs, a library for Microsoft RDL/RDLC reporting. This technology is completely new to me, so I had to ask him for clarification. Apparently, RDL stands for Report Definition Language, and is used with Microsoft SQL Server Reporting Services. RDL files are XML schemas for designing reports, so André's library allows you to take RDLC files and render them in a browser.

The library comes with a demo, but you'll need to run a webserver to try it out. It's intended to be used with a server side application that sends the XML using Ajax requests. It uses D3 and jQuery. The source that does the XML parsing looks extremely involved, so it would be interesting to see what people can do with it who've got RDL experience.


PhotoSwipe (GitHub: dimsemenov/PhotoSwipe, License: MIT, Bower: photoswipe) by Dmitry Semenov is a mobile-friendly image gallery. It works through instances of the PhotoSwipe object, and there are methods for things like going to the next/previous slide, and skipping to a specific slide. The API also supports events.

There's full documentation in website/documentation/api.md which explains how to add slides dynamically, so you can load slide data asynchronously if required.

One thing I liked about the PhotoSwipe was the mouse gestures: if you click and swipe it works in a similar way to swiping on a touchscreen. It also feels fast and lightweight.


node modules images grunt build bower

Gulp, bLazy, grunt-bowercopy

Posted on .



Last night I was reading a post about Gulp by Martin Genev. Martin traces the appearance of Gulp into the JavaScript community, through GitHub comments and Tweets.

Apparently Gulp is a new build system made by Fractal, a Node consultancy with several popular Node modules under their collective belts.

Gulp is built around streams, so it feels more like idiomatic Node. You can pipe files through processors, so if you had a set of LESS files you could convert them into CSS with something like gulp.src('less/*.less').pipe(less()).pipe(minify()).pipe(gulp.dest('styles/screen.css')). It supports tasks as a unit of work, and tasks can have names and dependencies.

The project has 13 contributors already -- most of the work is by Eric Schoffstall who you'll see all over Fractal's other projects. It has tests written with Mocha, and some decent documentation already.


bLazy (GitHub: dinbror / blazy) by Bjoern Klinggaard is a lazy loading image script. It doesn't have any dependencies, and supports callbacks for loading failures:

var bLazy = new Blazy({  
  success: function(ele) {
  error: function(ele, msg) {
    if (msg === 'missing') {
      // Data-src is missing
    } else if (msg === 'invalid') {
      // Data-src is invalid

There's a blog post about bLazy that documents the full API.


I seem to waste a lot of time detangling Bower dependencies to make my client-side builds more efficient. Timmy Willison may have solved this with grunt-bowercopy (GitHub: timmywil / grunt-bowercopy, License: MIT). It allows you to specify where dependencies should go, and can reduce the amount of duplication when creating builds.

It looks like it works the way I expect Bower dependency management to work in Grunt, so I'm going to go back and look at my Grunt/Bower projects to see if I can clean then up with this.


node apps modules git images

Node Roundup: 0.10.16, ungit, image-size

Posted on .

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

Node 0.10.16

Node 0.10.16 has been released, which includes an update for npm, and fixes for the crypto, http, and stream modules.


ungit logo

ungit (GitHub: FredrikNoren / ungit, License: MIT, npm: ungit) is a web-based UI for Git, written with Node. It makes Git repositories easier to visualise, a bit like gitk or git instaweb, but it has some GitHub-specific tweaks.

ungit repo

It can be installed with npm install -g ungit, and is run with ungit on the command-line. You can set up an .ungitrc which is a JSON file that currently just changes the port.

Once you're running ungit, you can make commits, discard them, fetch remote changes -- pretty much the standard Git operations you're used to, with a friendlier workflow.


If you need to get image sizes without using command-line binaries, then take a look at image-size (GitHub: netroy / image-size, License: MIT, npm: image-size) by Aditya. It looks at the relevant bits in a file by using a Node buffer, and supports popular formats like PNG, GIF, BMP, and even PSD.

It has an asynchronous and synchronous API:

var sizeOf = require('image-size');  
sizeOf('images/example.png', function(err, dimensions) {  
  console.log(dimensions.width, dimensions.height);


libraries browser images angularjs

RgbQuant, Scoping AngularJS Directives

Posted on .



RgbQuant (GitHub: leeoniya / RgbQuant.js, License: MIT) by Leon Sorokin is an image quantization library that runs in browsers:

Color quantization is the process of reducing an image with thousands or millions of colors to one with fewer (usually 256). The trick is to balance speed, cpu and memory requirements while minimizing the perceptual loss in output quality. More info can be found on wikipedia. Various algorithms can be found on rosettacode.org.

Internally it uses typed arrays, some ES5 array methods, and a Canvas element. The API allows the number of colours to be defined, and some more low-level control over the algorithm.

Scoping AngularJS Directives

James Donaghue sent in his articles about scoping AngularJS directives: Scoping AngularJS Directives Part 1 and Scoping AngularJS Directives Part 2.

... when both are applied to the same element, regardless of order, they have the same scope which is the scope type 3 (isolated scope). This is the most important combination to understand as you other directives may be expecting either direct or prototypical access to the nearest controller scope, but when paired with an isolated scope directive they no longer have this access. This can lead to many unexpected errors. In my opinion isolated scopes should be used only very judiciously and with exact intention understanding this behavior.


jquery plugins ajax forms backbone.js images widgets

jQuery Roundup: Queuing Ajax Requests, imagefill.js, Feedback Me

Posted on .

Note: You can send your plugins and articles in for review through our contact form.

Queuing Ajax Requests

In Queuing Ajax Requests in JS Web Apps, Alex MacCaw talks about how to queue requests with jQuery.ajax and safely retain the sequence of operations generated by Backbone and Spine applications.

We still have a problem if a particular request fails, as the interface will now be out of sync with the database. I usually recommend treating this as an exceptional circumstance, and prompt the user to reload the page. Incidentally, this is exactly how Facebook and Twitter solve the problem.

The plugin can be used like this: jQuery.ajax({type: 'POST', queue: true}), and is available as a Gist at maccman / jquery.ajax.queue.coffee.

He's also recently published Memory Management in JS Web Apps, which discusses how to properly clean up Backbone and Spine controllers when DOM elements are removed using jQuery's special events.


imagefill.js (GitHub: johnpolacek / imagefill.js, License: MIT/GPL) by John Polacek is a jQuery plugin for making images fill their containers. It can be configured to run once, or throttle the frequency at which container sizes are checked. The author suggests this plugin could be useful for creating responsive sites.

Feedback Me

Feedback Me (GitHub: vedmack / feedbackme, License: _MIT, jQuery: feedback_me) by Daniel Reznick is a UI widget that shows a feedback form that appears from the side of a page. It is designed to work out of the box with jQuery UI and Bootstrap, and includes allows each label in the feedback form to be configured.