How to use node.js and npm behind a company firewall

This morning at work I tried to get YUIDoc up and running using the standard node.js npm install approach. At work we are behind a proxy which means you have to manually edit the node.js config.

The Error

If you get an error similar to this you’re probably being blocked by the company firewall.

npm ERR! network connect ETIMEDOUT
npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "-g" "install" "yuidocjs"
npm ERR! cwd C:\Users\mfasani\Documents
npm ERR! node -v v0.10.21
npm ERR! npm -v 1.3.11
npm ERR! syscall connect
npm ERR! code ETIMEDOUT
npm ERR! errno ETIMEDOUT
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     C:\Users\mfasani\Documents\npm-debug.log
npm ERR! not ok code 0

The Fix

It’s easy to fix the above problem assuming it’s your company’s firewall causing the issue. Speak to the network team and find out the details of your work's proxy server. Then edit the node.js config as follows:

npm config set proxy http://proxy-server-address:8080
npm config set https-proxy http://proxy-server-address:8080

Now you should be able to continue using the npm to install your packages as normal.

Debugging on the iPad, iPhone or iTouch

I’ve been working on some responsive designs recently for the iPad. Sometimes debugging on mobile devices or tablets can feel almost impossible. Luckily with the iPad you can debug remotely fairly easily.

Remote debugging for the iPad, iPhone or iTouch

There are plenty of articles and forum posts on how to connect your device to your Mac and remote debug the DOM. Unfortunately it’s not quite as easy at it looks. Many people including myself have issues with the Safari DOM inspector not working correctly, for example not fully loading CSS or HTML. This will just add to your frustrations. I have also seen people having troubles with the JavaScript debug console. It’s a classic case of two steps toward and one step back.

WebKit nightly builds to the rescue!

A post on Stack Overflow suggested debugging with the WebKit Nightly Builds browser instead as the best solution to the problem. I simply downloaded the Nightly Builds browser and from there I was able to access the remote DOM inspector in the same way without any issues.

How to?

This will only work with an Apple Mac and either and iPhone, iPad or iTouch, for best results you should upgrade to the latest OS on both devices.

Step 1:

You will need to download WebKit Nightly Builds and install it on your Apple Mac.

Step 2:

Connect your iPhone, iPad or iTouch to your Apple Mac using a USB cable.

Step 3:

Open up the WebKit Nightly Builds browser and go to “Safari > Preferences > Advanced” and check the “Show Develop menu in menu bar” checkbox.

Step 4:

On your Mobile Device go to “Settings > Safari > Advanced” and turn on “Web Inspector”.

Step 5:

In the WebKit Nightly browser go to “Develop > iPad” and from there you can access the DOM inspector (If your using an iPhone or iTouch, then it will say that device instead of the iPad).

Debug to your hearts content

This actually really speeds up the debugging and development process and once your set up it becomes super quick to test, view and fix code for any Apple device.

A Simple Backbone WordPress Example

I’ve been working on this blog now for a little under two weeks and I’ve started to build out the front end using Backbone.

WordPress JSON API

The first thing I needed was the blog content being returned via JSON so my backbone app could easily consume the data.

Plugins to the rescue, turns out some one has already done a pretty good job at creating a WordPress JSON API, I installed it and it seems to work perfectly.

Creating the backbone Front End

I’ve tried to keep this example as simple as possible. We use a model, a collection and two views.

The model is super simple:

var PostItem = Backbone.Model.extend({});

The collection contains a single API end point and a function to iterate over the data so we can push that data into the models.

var PostList = Backbone.Collection.extend({
 
  model: PostItem,
 
  url: 'http://blog.michaelfasani.com/api/get_posts/',
 
  parse: function (data) {
    var parsedData = [];
 
    //This is all the post data returned by the API call above.
    $(data.posts).each(function () {
      var id = this.id,
          type = this.type,
          slug = this.slug,
          url = this.url,
          status = this.status,
          title = this.title,
          title_plain = this.title_plain,
          content = this.content,
          excerpt = this.excerpt,
          date = this.date,
          modified = this.modified,
          categories = this.categories,
          tags = this.tags,
          author = this.author,
          comments = this.comments,
          attachments = this.attachments,
          comment_count = this.comment_count,
          comment_status = this.comment_status,
          custom_fields = this.custom_fields;
 
      parsedData.push({
        id: id,
        type: type,
        slug: slug,
        url: url,
        status: status,
        title: title,
        title_plain: title_plain,
        content: content,
        excerpt: excerpt,
        date: date,
        modified: modified,
        categories: categories,
        tags: tags,
        author: author,
        comments: comments,
        attachments: attachments,
        comment_count: comment_count,
        comment_status: comment_status,
        custom_fields: custom_fields
      });
    });
 
    return parsedData;
  }
 
});

Our first view is a view to display a single model:

var PostSingleView = Backbone.View.extend({
 
  tagName: 'li',
  
  className: 'single-post',
 
  template: _.template($('#single-post').html()),
 
  render: function() {
    this.$el.html(this.template(this.model));
    return this;
  }
});

Our second view is a list view which will display all of the single model views:

var PostListView = Backbone.View.extend({
 
  el: '#post-list',
	
  initialize: function() {
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
  },
 
  render: function() {
    this.$el.html('');
    this.collection.each(this.addSinglePost, this);
    return this;
  },
 
  addSinglePost: function(singlePost) {
    var view = new PostSingleView({
      model: singlePost.attributes
    });
  this.$el.append(view.render().el);
  }
});

I have put together a simple CSS style sheet and sample HTML page which contains my underscore templates and some containers for my views to work with.

All of this code can be downloaded and viewed via a GitHub Gist.