The JavaScript blog.


bower build-tools

Private Bower

Posted on .

Private bower

If you've ever wanted to set up a private Bower repository, private-bower (GitHub: Hacklone/private-bower, License: MIT, npm: private-bower) by Barna Tóth might be what you're looking for.

You can install it with npm install -g private-bower, and then run it with private-bower. It accepts some command-line options to change what port it listens on, but all you really need to do is add some lines to your .bowerrc file:

{ "registry": "http://localhost:5678" }

That changes the repository Bower will use. Now whenever Bower attempts to fetch a package, it will check your private server.

private-bower itself will serve packages if they've been downloaded, otherwise it will fall over to the public repository. It's built using Express, and the author has put the API methods in the readme so you can see how it works.


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.


mvc angularjs bower angularfeeds

AngularJS: Installation

Posted on .

I've been working on tidying up the AngularJS tutorial project, which you can find here: GitHub: alexyoung / djsreader. The project was originally created with Yeoman, as part of the topics I wanted to cover on the tutorial series. However, a fresh checkout of my code from GitHub wouldn't run out of the box, so I wrote up some instructions in the readme.

Although I'd prefer it if people could follow the tutorial series from part 1 and build their own version, it's not always possible as dependencies change over time. I get asked about this a lot, and it's just a consequence of the style of tutorials I write on this blog. It would be nice if I could maintain these articles and keep them working with the latest version of each of the major dependencies, but I have to earn a living!

If you just want to check out the AngularJS tutorial source and play with it I've included instructions below.

Installing the Dependencies

To run the project, you'll need to install the following things:

  • Node 0.10.x
  • Bower (npm install -g bower)
  • Grunt (npm install -g grunt-cli)
  • Compass (gem install compass)

Hopefully you already have Node -- which means Bower and Grunt should be easy to install. Compass is annoying: one of the Grunt tasks builds Bootstrap from Sass, which needs the command-line compass Ruby script. It's annoying because Ruby is a mess and unless you work with it professionally you really don't want to have to deal with Ruby version management. Fortunately, I found gem install compass on a fresh Mountain Lion machine worked out of the box. The Ruby version is 1.8.7, which is dated. I noticed sudo gem install compass resulted in a script that wouldn't work and I didn't bother to find out why. I may replace the Grunt task to get rid of this dependency so we can just depend on Node.

Once you've got that installed, npm install will fetch Grunt's dependencies. Then run bower install to get the client-side libraries.

Using and Running It

The gruntfile that Yeoman generated has a few goodies built in. You can build the project with grunt build, run tests with grunt test, and start a server with grunt server -- this is the one you probably want, and if things don't seem to work in the browser just check you've built it first.

Hacking It

If all you want to do is try out some AngularJS ideas or change the HTML, you should familiarise yourself with the project tree. Most of what you want is in app/, and in particular app/scripts/controllers/main.js is what most of the tutorials refer to and app/views/main.html is the corresponding template.

Now you should be able to run the project without following the individual tutorials. Hopefully newcomers can at least try the project out relatively painlessly.


events node modules bower command-line

Node Roundup: CampJS, bower-registry, Helmsman

Posted on .

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


CampJS August

CampJS will be held in the Gold Coast, Australia, on August 9th to 12th. TJ Holowaychuk will be attending, and also Angelina Fabbro.

If you're interested, tickets start at AU$320. DailyJS readers can get a $25 discount by using the code DAILYJS.


If you're looking to set up your own Bower registry, then take a look at bower-registry (GitHub: neoziro / bower-registry, License: MIT, npm: bower-registry) by Greg Bergé. This is an Express web application that stores data in Redis, but the author notes it could be easily adapted to support other databases like MongoDB and PostgreSQL.

Running bower-registry -d redis on the command-line will start a server. Other options can be viewed by typing bower-registry -h. The app can also be loaded as a Node module, and require('bower-registry').Registry is the Express app instance.


Helmsman (GitHub: mattmcmanus / node-helmsman, License: MIT, npm: helmsman) by Matt McManus is an opinionated command-line application development kit. The interface style is based on Git's subcommands:

A common setup for command line applications is <command> <subcommand> <arguments/options> (for example: git commit -m 'message'). Rather than having a giant file that switches or if elses over each potential subcommand, it's much neater to store each subcommand in it's own file (bin/command,bin/command-subcomand, bin/command-subcommand2, etc). Doing this however introduces some annoying manual steps which helmsman hopes to solve.

The subcommand-style API is based on metadata exposed through exports. If the file is run directly rather than loaded with require, then your script should run as it would normally:

#!/usr/bin/env node

// 1. To expose the metadata simply `exports.command`
exports.command = {  
  description: 'Show current worker counts and their pids'

// 2. Then make sure it only runs when it's directly called:
if (require.main === module) {  
  // Parse options and run the magic


mvc angularjs bower angularfeeds

AngularJS: Iterators and Filters

Posted on .

AngularJS has a rich expression-based system for filtering and ordering data based on predicates. The orderBy filter can be used with the ng-repeat directive:

  <li ng-repeat="item in stories | orderBy:predicate:date"><a href="{{ item.link.href }}">{{ item.title }}</a></li>

Today we're going to use orderBy inside a controller using dependency injection to organise multiple feeds into a river of news sorted by date.

Iterating in Controllers

Before sorting and displaying stories, we need to collect them into a suitable data structure. An array will suffice (app/scripts/controllers/main.js):

$scope.stories = [];

Next we need to append stories to this collection, but only if they haven't already been added. Let's use a function to encapsulate that away from fetching stories:

$scope.fetchFeed = function(feed) {
  feed.items = [];

  var apiUrl = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'";
  apiUrl += encodeURIComponent(feed.url);
  apiUrl += "'%20and%20itemPath%3D'feed.entry'&format=json&diagnostics=true&callback=JSON_CALLBACK";

    success(function(data) {
      if (data.query.results) {
        feed.items = data.query.results.entry;

The addStories function just needs to loop over each feed item to determine if it's already been added to $scope.stories. The angular.forEach API in module ng is the perfect way to do this:

function addStories(stories) {  
  var changed = false;
  angular.forEach(stories, function(story, key) {
    if (!storyInCollection(story)) {
      changed = true;

As you can see, forEach accepts an array and a function to call for each item. The storyInCollection function now needs to loop over each existing story to see if it's already been added. Figuring out which story is unique is easy because feeds have an id value:

function storyInCollection(story) {  
  for (var i = 0; i < $scope.stories.length; i++) {
    if ($scope.stories[i].id === story.id) {
      return true;
  return false;

Storing Data

Now we've got a list of stories in our scope, we need to sort them by date just like a real feed reader. Whenever addStories changes the list of stories we should sort it. AngularJS doesn't really have any fancy functional methods like map or some, which you can find in ECMAScript 5 anyway, but it does provide API access to the filtering and sorting modules that are typically used in templates.

To access this functionality you'll need to load $filter:

  .controller('MainCtrl', function($scope, $http, $timeout, $filter) {

$filter will return a function that knows how to sort or filter arrays. That means you need to call it with the name of the desired method, then call the value returned with an array and an expression: $filter(filter)(array, expression). To add sorting to our feeds, call $filter()() and update the $scope.stories array:

// At the end of addStories
if (changed) {  
  $scope.stories = $filter('orderBy')($scope.stories, 'date');

The only thing left to do is update the template in app/views/mail.html:

  <li ng-repeat="item in stories"><a href="{{ item.link.href }}">{{ item.title }}</a></li>

If you add multiple feeds using the app's web interface you should see them combined into a river of news.


The river of news view

You can find this code in commit ff4d6a6.