Hidenari's Random Thougths

About

Sat, 20 Jun 2015 14:02:37 +0200

My name is Hidenari Nozaki. I’m a software engineer.

I like prototyping and designing services.

About

programming languages that I like these days: JavaScript, Go, and Clojure.
married with two kids
since 2012, living in Auckland, New Zealand
from 2000 to 2012, I was working in Japan for these companies:
- Motorola: doing mobile network and telecom stuff
- Kodak: developing a first-of-a-kind WiFi camera
- Zerobase: a small web consulting firm with very smart people
- Orange: a small R&D lab in Tokyo for a giant mobile carrier in Europe
from 1993 to 2000, I was living in the States as a student:
- learning English at a language school
- spent quite a few years in community college trying various kinds of stuff
- transferred to UC Berkeley and finished with a CS degree

Backbone, RequireJS, Jasmine, PhantomJS, Bower, and Grunt 4.1

Sun, 09 Jun 2013 00:00:00 +0000

When I wrote Backbone, RequireSS, Jasmine, PhhntomJS, and Grunt, Grunt was still version 3. But with introduction of version 4 series, they changed a lot. So, I’m updating my post with the grunt version 4 series. And, since many people are using Bower these days, I’ll use bower for managing JS packages.

Installing Grunt-cli and Bower

To start using the latest grunt, you have to install grunt-cli. We also need Bower, so let’s install these two.

npm install -g grunt-cli bower

Setting up directories

mkdir -p app/js/models test/spec/models test/lib

Installing JS Packages with Bower

We need jquery, underscore, backbone, requirejs, and jasmine. We can write a bower.json file to specify all these but since I don’t care too much about versions, let’s just install via command line. But before doing that, I need to specify where to install packages. Create a file called .bowerrc and write the following:

{
    "directory": "app/components"
}

Now, we can install each libraries through bower.

bower install jquery --save
bower install underscore --save
bower install backbone --save
bower install requirejs --save
bower install jasmine --save

After that, you should have a bower.json file with the following content:

{
  "name": "backbone-blog",
  "version": "0.0.0",
  "dependencies": {
    "backbone": "~1.0.0",
    "jasmine": "~1.3.1",
    "requirejs": "~2.1.6",
    "underscore": "~1.4.4",
    "jquery": "~2.0.2"
  },
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ]
}

Setting up Jasmine

Grab run-jasmine.js. This script loads a page and parses the results from Jasmine.

curl https://raw.github.com/ariya/phantomjs/master/examples/run-jasmine.js -o test/lib/run-jasmine.js

Here is index.html loading Jasmine and RequireJS files.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jasmine Spec Runner</title>
  <link rel="stylesheet" href="../app/components/jasmine/lib/jasmine-core/jasmine.css">
</head>
<body>
  <div id="sandbox" style="overflow:hidden; height:1px;"></div>
  <script src="../app/components/jasmine/lib/jasmine-core/jasmine.js"></script>
  <script src="../app/components/jasmine/lib/jasmine-core/jasmine-html.js"></script>
  <script src="../app/components/requirejs/require.js" data-main="SpecRunner"></script>
</body>
</html>

RequireJS picks up /test/SpecRunner as the first file to load as data-main specifies.

SpecRunner.js has two parts: RequireJS configuration and starting Jasmine. Here is the config part of SpecRunner.js:

require.config({
  baseUrl: "/app/js",
  urlArgs: 'cb=' + Math.random(),
  paths: {
    jquery: '../components/jquery/jquery.min',
    underscore: '../components/underscore/underscore-min',
    backbone: '../components/backbone/backbone-min',
    spec: '../../test/spec'
  },
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

‘baseUrl’ sets the application root for JavaScript files.
‘urlArgs’ is attached as cache buster.
‘paths’ is specifying actual location of files or directories relative to ‘baseUrl’. In this case, we specify the locations of jquery, underscore, and backbone. And, we also set ‘spec’ directory.
‘shim’ is where you specify none-AMD library for managing dependencies and global exports. As backbone depends on underscore and jquery, they are listed as deps.

Here is the Jasmine part of SpecRunner.js:

require(['jquery', 'spec/index'], function($, index) {
  var jasmineEnv = jasmine.getEnv(),
      htmlReporter = new jasmine.HtmlReporter();

  jasmineEnv.addReporter(htmlReporter);

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  $(function() {
    require(index.specs, function() {
      jasmineEnv.execute();
    });
  });
});

Two dependencies, jQuery and spec/index.js.
index.js lists the spec files.

This is index.js just returning an array of spec files.

define(function() {
  return {
    specs: [
      // list spec files here
    ]
  };
});

Setting up Grunt

Now, add package.json to the root for installing grunt packages. It’s a bit different from my previous entries. Now it has grunt-contrib-connect for setting up a static server and grunt-contrib-watch for watching file changes.

{
  "name": "todo-phantomjs-grunt-exec",
  "version": "0.0.1",
  "private": true,
  "dependencies": { },
  "devDependencies": {
    "grunt": "0.4.1",
    "grunt-exec": "0.4.1",
    "grunt-contrib-connect": "0.3.0",
    "grunt-contrib-watch": "0.4.4"
  }
}

Install these packages as usual.

npm install

Let’s create Gruntfile.js to configure our test setting. In the grunt version 3, it was called grunt.js but now it is renamed to Gruntfile.js.

'use strict';

module.exports = function(grunt) {
  grunt.initConfig({
    connect: {
      test: {
        port: 8000,
        middleware: function(connect) {
          return [
            mountFolder(connect, 'app')
          ];
        }
      }
    },

    watch: {
      files: ['test/spec/**/*.js', 'app/js/**/*.js', 'test/SpecRunner.js'],
      tasks: 'exec'
    },

    exec: {
      jasmine: {
        command: 'phantomjs test/lib/run-jasmine.js http://localhost:8000/test',
        stdout: true
      }
    }
  });

  grunt.loadNpmTasks('grunt-exec');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['connect:test', 'exec', 'watch']);

}

To check everything is in place properly, let’s run it.

$ grunt

It should run the jasmine task but it fails and waits for file changes.

Writing the First Test

Let’s write a test. Todo model should have a title with default being empty string.
test/spec/models/todo_spec.js

define(['models/todo'], function(Todo) {
  describe("Todo Model", function() {
    it("should have a default empty string title", function() {
      var t = new Todo()
      expect(t.get('title')).toBe("");
    })
  });
});

Add this file to index.js.

define(function() {
  return {
    specs: [
      "spec/models/todo_spec"
    ]
  };
});

As you don’t have a Todo model yet, it still gives an error. It cannot load the Todo model yet. Let’s add it: app/js/models/todo.js

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({});
  return todo;
});

Now, you see a failing Jasmine output. And, adding a default title to the model should pass the test.

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({
    defaluts: {
      title: ""
    }
  });
  return todo;
});

From here, you can add more specs and Backbone models, collections, and views.

The Gruntfile.js that I created is really primitive. You probably want to add more stuff such as minification, livereload, copy, clean, build, and so on. But I’m saving that for my next post probably.

Here is the sample code that I compiled for this blog post: https://github.com/ghiden/backbone-requirejs-jasmine-phantomjs-bower-grunt-setup

Playing with Yeoman, AngularJS, and CoffeeScript

Tue, 12 Feb 2013 00:00:00 +0000

Yeoman looked really good so I tried it, and here are some finding that you should be aware of, at least with the version 0.9.6.

My original intention was to write a small app using AngularJS in CoffeeScript.

Coffee to JavaScript: a strange behavior

$ mkdir example
$ cd example
$ yeoman init angular --coffee
...
$ yeoman coffee
Running "coffee:compile" (coffee) task
File app/scripts/app.js created.
File app/scripts/controllers/main.js created.
File test/spec/main.js created.

Done, without errors.
$ mkdir test/spec/services
$ touch test/spec/services/dummy.coffee
$ yeoman coffee
Running "coffee:compile" (coffee) task
File app/scripts/app.js created.
File app/scripts/controllers/main.js created.
File test/spec/controllers/main.js created.
File test/spec/services/dummy.js created.

Done, without errors.

Nothing fancy here, just plain yeoman.
1. Invoking an “init” for angular app with coffee option which generates files in coffeescript. At this point, we have the following coffeescript files:

app/scripts/app.coffee
app/scripts/controllers/main.coffee
test/spec/controllers/main.coffee

Invoking “coffee” command to generate js files. This is where this strange behavior starts. Javascript files for two coffee files under ‘app/scripts’ are generated in the same directory as their corresponding coffee files. But ‘main.coffee’ file under ‘test/spec/controllers’ is generated one above where coffee file is located.
If you two files in two different directories under ‘test/spec’, js files are generated like the ones under ‘app/scripts’.

Build doesn’t compile main.scss

$ yeoman build
$ yeoman server:dist

If you open the page with your browser, you see a plain-looking page with no css. This is already a known issue and will be fixed in 1.0. https://github.com/yeoman/yeoman/issues/348 But for now, just remove main.css in ‘app/styles’ and it should be fine.

Generator-generated CoffeeScript is not minification-safe

/app/scripts/controllers/main.coffee breaks when it goes through minification.
/app/scripts/app.coffee is fine though.

Here is the one generated by the generator.

'use strict'

angular.module('exampleApp')
  .controller 'MainCtrl', ($scope) ->
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Testacular'
    ]

As the minification changes names of function arguments, you have to change the method invocation to alternative minification-safe form.

'use strict'

angular.module('exampleApp')
  .controller 'MainCtrl', ['$scope', ($scope) ->
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Testacular'
    ]
  ]
]

It’s a bit cumbersome form, but to make it run, you have to do it. Hopefully in yeoman 1.0, ngmin will take care of minication without having to write this alternative format.

Conclusion

I’m looking forward to play with Yeoman 1.0 when it becomes available.

AngularJS ngPluralize example

Tue, 29 Jan 2013 00:00:00 +0000

This is an example of ngPluralize in AngularJS.
I combined the Select example and the ngPluralize example from the official API reference.

testing angularjs

Sun, 20 Jan 2013 00:00:00 +0000

AngularJS is really nice. It shows a totally different approach from Backbone.
Since I might be involved in a project using Angular, I did some experiment.

Going to the official page, and watching the two screencasts and just read top to bottom of the home page, I was very much interested in AngularJS. Then, I did the whole official tutorial which is very well organized and highly recommended.

Now what? I had to write something using Angular. But something bothered me while I was following the tutorial. It keeps using controllers defined in global namespaces. I’m sure it’s intentional not to confuse beginners with nitty-gritty details. After asking Google, I found out that there are two ways to define controllers or so-called angular modules. One is using typical javascript scheme, using app namespace, and the other is using angular.module function.

Using App namescape, not really

The step 7 of the official tutorial introduces “App Module” which combines all the necessary components into one app. Since it returns the app module, you can assign it to some variable and use it like the app name space. Technically it is different from just creating an Object and adding attributes like we typically do. As in this case, it is an angular app module. But it does look like the typcial js namespace scheme.

// app.js
var todoapp = angular.module('todoapp', []);

// controllers.js
todoapp.controller('TodoController', function($scope) {
  $scope.todos = [
    {title: 'test 01', completed: false},
    {title: 'test 02', completed: false},
    {title: 'test 03', completed: false}
  ];
});

To test TodoController, you write something like this.

// controllersSpec.js

describe('TodoController', function(){
  var scope, todoController;

  beforeEach(module('todo'));
  beforeEach(inject(function($controller) {
    scope = {};
    todoController = $controller('TodoController', {$scope: scope});
  }))

  it('should validate the controller to be defined', function() {
    expect(todoController).toBeDefined();
  });

  it('should have todos', function() {
    expect(scope.todos.length).toBe(3);
  })
});

Using angular.module

This is to use ‘angular.module’ function which is according to the official doc, it “is a global place for creating and registering Angular modules.”

To define a controller, you do something like this.

angular.module('todo.controllers', []).controller('TodoController', function($scope) {
  $scope.todos = [
    {title: 'test 01', completed: false},
    {title: 'test 02', completed: false},
    {title: 'test 03', completed: false}
  ];
});

Again, to test, you write something like this.

// controllersSpec.js

describe('TodoController', function(){
  var scope, todoController;

  beforeEach(module('todoapp.controllers'));
  beforeEach(inject(function($controller) {
    scope = {};
    todoController = $controller('TodoController', {$scope: scope});
  }))

  it('should validate the controller to be defined', function() {
    expect(todoController).toBeDefined();
  });

  it('should have todos', function() {
    expect(scope.todos.length).toBe(3);
  })
});

One good thing about this approach is that when you start writing your code, you don’t have to have app.js that previously initialized ‘var todoapp = …’
And, when you are ready to write your app.js, you write your app.js with necessary dependencies.

// app.js
angular.module('todoapp', ['todoapp.controllers', 'todoapp.services']);

I like the latter way of defining angular modules as it does not force you to have the app module.

Backbone 0.9.9's validation behavior

Mon, 14 Jan 2013 00:00:00 +0000

Just as a follow-up to the Backbone.js testing articles, I was adding a few tests and surprised that it started to fail.

First, I added some more default values, such as ‘completed’ field should start with false and timestamp needs to be 0 as its initial value.

it("should have a default title, completed, and timestamp", function() {
  var t = new Todo()
  expect(t.get('title')).toEqual("");
  expect(t.get('completed')).toEqual(false);
  expect(t.get('timestamp')).toEqual(jasmine.any(Number));
});

By adding a couple more defalut values passes the test of course.

var todo = Backbone.Model.extend({
  defaults: {
    title: '',
    completed: false,
    timestamp: 0
  }
});

Then I moved on to validation: title should not be empty when you save. I suppose it’s quite a natural flow, isn’t it? I create a Jasmine Spy object and set it as error callback for this todo instance. And, when I save, I check if the spy opbject has been called or not and the error message was received ok or not.

describe('validation', function() {
  it('should not save with empty title', function() {
    var errorSpy = jasmine.createSpy('error_event'),
        t = new Todo();

    // think of this as a stub for returning 'url' for models
    t.collection = {url: '/collection'}

    t.on('error', errorSpy);

    t.save({title: ''});

    expect(errorSpy).toHaveBeenCalled();
    expect(errorSpy.mostRecentCall.args[1]).toEqual('cannot have an empty title');
  });
});

Of course it fails as we don’t have any validation yet. So I added the following code to Todo model.

validate: function(attrs) {
  if(!attrs.title) {
    return 'cannot have an empty title';
  }
}

Voila! Strange things happen.

Expected undefined to equal ''.
...
Expected undefined to equal false.
...
Expected undefined to equal <jasmine.any(function Number() { [native code] })>.
...

I spent a couple hours testing and googling and then I found this issue with 0.9.9 release of Backbone.
https://github.com/documentcloud/backbone/issues/1961

From 0.9.9, the behavior of validation changed. Model is validated when instantiated too. It does not allow any ‘invalid’ state to be instantiated. So the above code does not pass with 0.9.9.

To get it passed, you need to go with either 0.9.2 or head.

If you just use 0.9.2, it works as expected.
If you want to go with the head version of Backbone, you have to change a bit. Event is called ‘invalid’ not ‘error’, so when you set the callback, it needs to set it for ‘invalid’ event.

describe('validation', function() {
  it('should not save with empty title', function() {
    ...
    // HEAD version
    t.on('invalid', errorSpy);
    ...
  });
});

Now, you can keep on testing hopefully.
https://github.com/ghiden/backbone-requirejs-jasmine-testem-setup/tree/blog2

Backbone, RequireJS, Jasmine, PhantomJS, and Grunt

Thu, 10 Jan 2013 00:00:00 +0000

Following the yesterday’s post. This time, using PhantomJS and Grunt.
Testem does pick up PhantomJS and can run against it. But, maybe some people just want to use Grunt because they use Grunt for something else such as for making a build.

Setting up directories

First, let’s create two directories: app and test. ‘app’ holds the application and ‘test’ of course contains test stuff. Inside ‘app’ directory, create a structure like this with required library files:

app/
  js/
    lib/
      backbone-min.js
      jquery.min.js
      require.js
      underscore-min.js

Under ‘test’ directory, you have this with Jasmine files:

test/
  lib/
    jasmine-html.js
    jasmine.css
    jasmine.js
    run-jasmine.js     // from PhantomJS example
  spec/
    index.js
  index.html
  SpecRunner.js

run-jasmine.js, you can grab it from here at PhantomJS repo.
https://github.com/ariya/phantomjs/blob/master/examples/run-jasmine.js
This script loads a page and parses the results from Jasmine.

Here is index.html loading Jasmine and RequireJS files.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jasmine Spec Runner</title>
  <link rel="stylesheet" href="/test/lib/jasmine.css">
</head>
<body>
  <div id="sandbox" style="overflow:hidden; height:1px;"></div>
  <script src="/test/lib/jasmine.js"></script>
  <script src="/test/lib/jasmine-html.js"></script>
  <script src="/app/js/lib/require.js" data-main="/test/SpecRunner"></script>
</body>
</html>

RequireJS picks up /test/SpecRunner as the first file to load as data-main specifies.

SpecRunner.js has two parts: RequireJS configuration and starting Jasmine. Here is the config part of SpecRunner.js:

require.config({
  baseUrl: "/app/js",
  urlArgs: 'cb=' + Math.random(),
  paths: {
    jquery: 'lib/jquery.min',
    underscore: 'lib/underscore-min',
    backbone: 'lib/backbone-min',
    spec: '../../test/spec'
  },
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

Here is the Jasmine part of SpecRunner.js:

require(['jquery', 'spec/index'], function($, index) {
  var jasmineEnv = jasmine.getEnv(),
      htmlReporter = new jasmine.HtmlReporter();

  jasmineEnv.addReporter(htmlReporter);

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  $(function() {
    require(index.specs, function() {
      jasmineEnv.execute();
    });
  });
});

Two dependencies, jQuery and spec/index.js.
index.js lists the spec files. It doesn’t have to be externalized. I included spec files in SpecRunner in the previous post, but for a change, I separated it into a different file.

This is index.js just returning an array of spec files.

define(function() {
  return {
    specs: [
      // list spec files here
    ]
  };
});

Setting up Grunt

Now, add package.json to the root for installing grunt packages.

{
  "name": "todo-phantomjs-grunt-exec",
  "version": "0.0.1",
  "private": true,
  "dependencies": { },
  "devDependencies": {
    "grunt": "0.3.17",
    "grunt-exec": "0.2.1"
  }
}

We install grunt and grunt-exec packages. Grunt-exec is one of the simplest tasks. All it does is it executes shell commands.

$ npm install

Let’s create grunt.js to configure our test setting.

module.exports = function(grunt) {
  grunt.initConfig({
    server: {
      port: 8000,
      base: '.'
    },

    watch: {
      files: ['test/spec/**/*.js', 'app/js/**/*.js', 'test/SpecRunner.js'],
      tasks: 'exec'
    },

    exec: {
      jasmine: {
        command: 'phantomjs test/lib/run-jasmine.js http://localhost:8000/test',
        stdout: true
      }
    }

  });

  grunt.loadNpmTasks('grunt-exec');

  grunt.registerTask('default', 'server exec watch');

}

‘server’ section is obvious, it sets up static http server that comes with grunt, hosted at port 8000 and pointing to the root.
‘watch’ section specifies what files to monitor, and ‘tasks’ specifies what action to follow. In our case, ‘exec’ command will follow.
‘exec’ section specifies what command to issue. It runs phantomjs with run-jasmine.js and loading the test/index.html. Next is loading ‘grunt-exec’ task and registering a default task which starts server, runs exec once, and starts watching files.

To check everything is in place properly, let’s run it.

$ grunt

It should run the jasmine task but it fails and waits for file changes.

Writing the first test

Let’s write a test. Todo model should have a title with default being empty string. First, I will create a directory ‘models’ under ‘test/spec’ and create a file called todo_spec.js.

define(['models/todo'], function(Todo) {
  describe("Todo Model", function() {
    it("should have a default empty string title", function() {
      var t = new Todo()
      expect(t.get('title')).toBe("");
    })
  });
});

And, add this file name to index.js.

define(function() {
  return {
    specs: [
      "spec/models/todo_spec"
    ]
  };
});

As you don’t have a Todo model yet, it still gives an error. It cannot load the Todo model yet. Let’s add it. Create ‘models’ directory under ‘app/js/’ and create todo.js.

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({});
  return todo;
});

Now, you see a failing Jasmine output. And, adding a default title to the model should pass the test.

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({
    defaluts: {
      title: ""
    }
  });
  return todo;
});

From here, you can add more specs and Backbone models, collections, and views.

Thanks to Uzi Kilon for writing this article, this post is heavily influenced by this:
Running Jasmine Tests With PhantomJS.

Reposity of this sample code: https://github.com/ghiden/backbone-requirejs-jasmine-phantomjs-grunt-setup

Backbone, RequireJS, Jasmine, and Testem

Wed, 09 Jan 2013 00:00:00 +0000

Lately I’ve been playing with Backbone.js a lot. I use [RequireJS]() to manage dependencies and optimizing the file size. For JS stuff, I was never a big fan of testing because I was too lazy. But, as you build bigger and bigger apps, you start to feel that you need to test them. As for testing javascript, popular ones are Jasmine, QUnit, and Mocha. For this blog post, I will use Jasmine and explain how to setup and get started.

Just running Jasmine specs from browser every time you change your code is quite tedious. Then, you need something that reloads page as you change code or spec files. Testem is a very good tool that does it for you. There is a nice introduction at Tutsplus.

I want to write a Todo app as always. And, I want to do it in BDD way.

First, let’s create two directories: app and test. ‘app’ holds the application and ‘test’ of course contains test stuff. Inside ‘app’, create a structure like this with required library files:

app/
  js/
    lib/
      backbone-min.js
      jquery.min.js
      require.js
      underscore-min.js

Under ‘test’ directory, you have this with Jasmine files:

test/
  lib/
    jasmine-html.js
    jasmine.css
    jasmine.js
  spec/
  index.html
  SpecRunner.js

Here is index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Jasmine Spec Runner</title>
  <link rel="stylesheet" href="/test/lib/jasmine.css">
</head>
<body>
  <div id="sandbox" style="overflow:hidden; height:1px;"></div>
  <script src="/test/lib/jasmine.js"></script>
  <script src="/test/lib/jasmine-html.js"></script>
  <script src="/testem.js"></script>
  <script src="/app/js/lib/require.js" data-main="/test/SpecRunner"></script>
</body>
</html>

We don’t have testem.js but it’ll come after we install testem.
RequireJS picks up /test/SpecRunner as the first file to load as data-main specifies.

SpecRunner.js has two parts: RequireJS configuration and starting Jasmine. Here is the config part of SpecRunner.js:

require.config({
  baseUrl: "/app/js",
  urlArgs: 'cb=' + Math.random(),
  paths: {
    jquery: 'lib/jquery.min',
    underscore: 'lib/underscore-min',
    backbone: 'lib/backbone-min',
    spec: '../../test/spec'
  },
  shim: {
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    }
  }
});

Here is the Jasmine part of SpecRunner.js:

require(['jquery'], function($) {
  var jasmineEnv = jasmine.getEnv(),
      htmlReporter = new jasmine.HtmlReporter(),
      specs = [];
        
  jasmineEnv.addReporter(htmlReporter);

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  $(function() {
    require(specs, function() {
      jasmineEnv.execute();
    });
  });
});

Pretty much typical jasmine setup, except the last part loading spec files. The array ‘specs’ which holds the names of spec files are loaded by RequireJS. Currently it has no files to read in.

Now, you need to install Testem. Suppose you have npm installed onto your machine. Install it globally is the easiest.

$ npm install -g testem

Now, you need to configure testem. Usually you don’t need to configure much but since I want to run it with RequireJS, I want to use my own test index.html. Here is testem.yml for configuring testem:

test_page: test/index.html

It is just one line simply specifying the html file for Jasmine.
Now, you can start testing with testem.

$ testem

Go to the URL from your browser. You probably see TEST’EM ‘SCRIPTS! on the lower right corner on the page.
As we have no specs yet, it doesn’t show any Jasmine output yet. But right after you access the page, the shell prints out that what browser you use and shows a message: “No tests were run :(“.

Let’s write a test. Todo model should have a title with default being empty string. First, I will create a directory ‘models’ under ‘test/spec’ and create a file called todo_spec.js.

define(['models/todo'], function(Todo) {
  describe("Todo Model", function() {
    it("should have a default empty string title", function() {
      var t = new Todo()
      expect(t.get('title')).toBe("");
    })
  });
});

And, add this file name to SpecRunner.

  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  specs.push("spec/model/todo_spec");

  $(function() {
    require(specs, function() {
      jasmineEnv.execute();
    });
  });

As you don’t have a Todo model yet, it gives an error from RequireJS. It cannot load the Todo model. Let’s add the model. Create ‘models’ directory under ‘app/js/’ and create todo.js.

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({});
  return todo;
});

Now, you see Jasmine output both on console and the browser. And adding a default title to the model should pass the test.

define(['backbone'], function(Backbone) {
  var todo = Backbone.Model.extend({
    defaluts: {
      title: ""
    }
  });
  return todo;
});

Without reloading, right after you save this file, testem picks it up and reload the test.
From here, you can add more specs and Backbone models, collections, and views.

Thanks to the authors of these two articles, this post is heavily influenced by them:
Testing Backbone + RequireJS Applications with Jasmine by Uzi Kilon.
Setting Up a Jasmine Unit Testing Environment with Testem by Joe Zim.

Reposity of this sample code: https://github.com/ghiden/backbone-requirejs-jasmine-testem-setup/tree/blog1

Google's application specific passwords

Mon, 13 Aug 2012 00:00:00 +0000

I quite like the Google’s application-specific password scheme.
1. Go to your Google Account page 1. Click “Security” 1. Click “Edit” button for “Authorizing applications and sites” 1. Probably you get prompted for your password, then you see the page.

It is a bit risky to use your Google account password for every app that accesses your Google hosted services; for example, my Gmail account setting on my iPhone. By using app-specific passwords, in case you lose your phone, you can easily revoke them anytime.

For my experiment, I generated one for my python script that reads Google Reader’s starred items.
To support that, I’ve added a config file that stores an email address and a password.

CONFIG_FILE = os.path.expanduser('~/.gstar-reader')

def init_config():
    if not os.path.exists(CONFIG_FILE):
        print """Config file not found
Please create a file ~/.gstar-reader with the following contents
[base]
email:name@example.com
password:password"""
        sys.exit()

    parser = ConfigParser.SafeConfigParser()
    parser.read(CONFIG_FILE)
    CONFIG['email'] = parser.get('base', 'email')
    CONFIG['password'] = parser.get('base', 'password')

I’ve never used ConfigParser before. It’s quite handy for stuff like this.

Gist: https://gist.github.com/2509075

Adding Colors to Disappearing Dots

Mon, 30 Jul 2012 00:00:00 +0000

This is a second iteration to the disappering dots.
As the title says, I’m adding colors to dots.
How about some nice color variations in blue.

I found a very minimum implementation of HSV to RGV conversion here: http://spphire9.wordpress.com/2011/03/03/javascript%E3%81%A7hsv%E3%81%8B%E3%82%89rgb%E5%A4%89%E6%8F%9B/

Hue is a random value from 200 to 240.
Saturation is between 50 to 100.
Value is also between 50 to 100.

Size of circles is also randomized this time.

Use of HSV, I learned from this lecture notes: http://yoppa.org/cuc_prog12/3766.html
It’s all in Japanese but code is in processing, so you don’t really need to read Japanese.

window.onload = (function(win, doc) {
  var c,
      TWOPI = 2*Math.PI, 
      last = +(new Date()),
      // a bit slower fading out
      MY_BLACK = "rgba(0, 0, 0, 0.4)",
      WIDTH = 400,
      HEIGHT = 400;

  var hsva(h, s, v, a) {
      var f = h/60,
          i = f^0,
          m = v-v*s,
          k = v*s*(f-i),
          p = v-k,
          q = k+m;
          return 'rgba('
            +[[v,p,m,m,q,v][i]*255^0,
            [q,v,v,p,m,m][i]*255^0,
            [m,m,q,v,v,p][i]*255^0,a].join(',')
            +')';
  }

  function randomWithin(a, b) {
      var diff = b - a;
      var val = Math.floor(Math.random() * diff + a);
      return val;
  }

  var randomPoint = function() {
    return Math.floor(Math.random() * WIDTH  + 1);
  }

  var draw = function() {
    var now = +(new Date());
    c.fillStyle = MY_BLACK;
    c.fillRect(0, 0, WIDTH, HEIGHT);
    if (now - last > 1000) {
      // hue being 200 to 240 generates bluish color variations
      c.fillStyle = hsva(randomWithin(200, 240), 
                         randomWithin(50, 100)/100,
                         randomWithin(50, 100)/100,
                         .5);
      c.beginPath();
      c.arc(randomPoint(), randomPoint(), 5, 0, TWOPI, true);
      c.fill();
      last = now;
    }
    win.requestAnimationFrame(draw);
  }

  var init = function() {
    var canvas = doc.getElementById("ground");

    c = canvas.getContext("2d");
    c.fillStyle = "#000";
    c.fillRect(0, 0, WIDTH, HEIGHT);

    win.requestAnimationFrame(draw);
  };

  return init;
}(window, document));

Disappearing Dots

Sat, 28 Jul 2012 00:00:00 +0000

Japan is too hot.
Here is a little toy animation using canvas.
It looks a bit like snow falling on the ground and dissappearing.

window.onload = (function(win, doc) {
  var c,
      TWOPI = 2*Math.PI, 
      last = +(new Date()),
      MY_BLACK = "rgba(0, 0, 0, 0.05)",
      WIDTH = 400,
      HEIGHT = 400;

  var randomPoint = function() {
    return Math.floor(Math.random() * WIDTH  + 1);
  }

  var draw = function() {
    var now = +(new Date());
    c.fillStyle = MY_BLACK;
    c.fillRect(0, 0, WIDTH, HEIGHT);
    if (now - last > 1000) {
      c.fillStyle = "#fff";
      c.beginPath();
      c.arc(randomPoint(), randomPoint(), 5, 0, TWOPI, true);
      c.fill();
      last = now;
    }
    win.requestAnimationFrame(draw);
  }

  var init = function() {
    var canvas = doc.getElementById("ground");

    c = canvas.getContext("2d");
    c.fillStyle = "#000";
    c.fillRect(0, 0, WIDTH, HEIGHT);

    win.requestAnimationFrame(draw);
  };

  return init;
}(window, document));

A Quick JavaScript Test on Scope and Closure

Thu, 26 Jul 2012 00:00:00 +0000

I found this article on how scope works in JavaScript at DailyJS.
JS101: A Brief Lesson on Scope

There is a code snippet that demonstrates a possibly confusing behavior of closure and scoping for beginners. Here is the code:

function example() {
    var o = {}, i = 0;
    for (i = 0; i < 3; i++) {
        o[i] = function() { console.log(i); };
    }
    o[0]();
    o[1]();
    o[2]();
}

example();

This returns the following in console:

3
3
3

So I was thinking, next time I interview someone for hire, I might show this snippet and ask him/her to make it return 0, 1, 2 instead.

If you read the comments in the original post, you can find two solutions.

Open Google Reader's Starred Items Part II

Mon, 09 Jul 2012 00:00:00 +0000

The previous entry on retrieving Google Reader’s Starred items had some problems. - Occassionally, it was failing to open a site - There are times that I want to just check how many items that I starred - It wasn’t easy to read

So, I revisited the code and revised it.

Executing a command

I found out that using os.system to execute a command is considered not a good practice.

os.system("open %s -a 'Google Chrome'" % url)

I see that I didn’t even check the result.
To have better control, I use subprocess.call which takes arguments in list.
Here is the code. By the way, I made it as a function for better readability.

def open_in_browser(url):
    # open in Chrome
    result = subprocess.call(["open", "-a", "Google Chrome", url])
    if result != 0:
        print "Error opening the item"
    return result

If it returns a non-zero value, the function shows an error message and returns.
The items that it fails to open should not be unstarred. Otherwise, it’ll be forgotten forever.

Adding options

It was easy. I just need to use OptionParser. - ‘-s’ for not to clear stars.
- ‘-b’ for not to open in browser.

parser = OptionParser()
parser.add_option("-s", action="store_true", default=False, 
        help="not to clear stars")
parser.add_option("-b", action="store_true", default=False,
        help="not to open in browser")
(options, args) = parser.parse_args()

With these options, I can just invoke this command with -s and -b for not clearing the stars and not opening in browser, just to show list of starred items in terminal.

Getting a ‘continuation’ param

Google Reader API returns a parameter called ‘continuation.’
By supplying the continuation to subsequent query, they return the following items.
Without it, I had to unstar everything to get other starred items.
Or maybe I could bump up the number of retrieved items to 1000 or something, so that I can get all the items at once. But it sounds very crude, so I decided to use the continuation.
The ‘continuation’ param is included in the result from API call.
It is enclosed in “ns2:continuation” element.
I use regular expression to get the value.

def get_continuation(feed):
    pattern = re.compile(r"""ns2:continuation>(.*)<\/ns2:continuation""", re.M)
    result = pattern.search(feed.ToString())                                     
    if result:
        return result.group(1)
    else:
        False

If I have a ‘continuation,’ that means I have more starred items.
If I don’t, there is no more starred items.

Revised Code

Overall, I changed top-to-bottom-one-long script to bunch of small functions.

#!/usr/bin/env python

import sys
import gdata.service
import subprocess
import getpass
import urllib
import re
from optparse import OptionParser
from gdata.service import BadAuthentication

URL = '/reader/atom/user/-/state/com.google/starred'
SERVICE = gdata.service.GDataService(account_type='GOOGLE',
                                     service='reader',
                                     server='www.google.com',
                                     source='MyReader')
CONFIG = {'email':'YOUR-EMAIL@gmail.com', 'password':'DUMMY'}

def unstar(entry, token):
    i = entry.id.text
    s = entry.source.extension_attributes['{http://www.google.com/schemas/reader/atom/}stream-id']
    ret = SERVICE.Post(urllib.urlencode({
        'i':i,
        'r':'user/-/state/com.google/starred',
        's':s,
        'T':token
        }),
        '/reader/api/0/edit-tag',
        converter = lambda x:x,
        extra_headers = {'Content-Type':'application/x-www-form-urlencoded'})
    print "Unstar result: %s [id: %s]" % (ret, i)
    if ret == "OK":
        return 1
    else:
        return 0

def get_continuation(feed):
    pattern = re.compile(r"""ns2:continuation>(.*)<\/ns2:continuation""", re.M)
    result = pattern.search(feed.ToString())
    if result:
        return result.group(1)
    else:
        return False

def password_prompt():
    CONFIG['password'] = getpass.getpass('Enter your password for Google Reader: ')

def open_in_browser(url):
    # open in Chrome
    result = subprocess.call(["open", "-a", "Google Chrome", url])
    if result != 0:
        print "Error opening the item"
    return result

def login():
    try:
      SERVICE.ClientLogin(CONFIG['email'], CONFIG['password'])
    except BadAuthentication:
      print "Wrong password!"
      sys.exit()
    # authenticated token
    return SERVICE.Get('/reader/api/0/token',converter=lambda x:x)

# collect starred items
def starred():
    # n = number of items to read per query, default is 20
    params = {}
    entries = []

    while True:
        query = gdata.service.Query(feed=URL, params=params)
        feed = SERVICE.Get(query.ToUri())
        cont = get_continuation(feed)
        entries.extend(feed.entry)
        if cont:
            params['c'] = cont
        else:
            break
    print '*' * len(entries)
    return entries

# process starred items
def process_starred(token, entries, options):
    total = len(entries)
    cleared = 0

    for entry in entries:
        url = entry.GetHtmlLink().href
        print entry.title.text
        print url
        if options.b != True:
            result = open_in_browser(url)
        else:
            # -b is set, always return 0
            result = 0

        if options.s != True and result == 0:
            # now unstar it
            cleared += unstar(entry, token)
        print "==============================================================="

    return (total, cleared)

def main(options):
    password_prompt()

    token = login()

    entries = starred()

    (total, cleared) = process_starred(token, entries, options)

    print "%d starred item(s) found and %d cleared" % (total, cleared)

if __name__ == '__main__':
    parser = OptionParser()
    parser.add_option("-s", action="store_true", default=False, 
            help="not to clear stars")
    parser.add_option("-b", action="store_true", default=False,
            help="not to open in browser")
    (options, args) = parser.parse_args()
    main(options)

gist: https://gist.github.com/2509075/

Creating a bar graph using D3.js

Wed, 04 Jul 2012 00:00:00 +0000

I had to create a bar graph for a page showing some stats.
So, I started searching for available options.

I tried several options such as Highcharts, Google Graph API, Raphael, etc.
Highcharts is great, but it a bit too much for a small internal project. Google Graph API, I thought it was kinda dull. Raphael, I felt it was a bit difficult to work with. Then D3.js, after doing some experiments, I found it easy to use. And SVG graph looks quite good.

D3.js

Here is a nice example showing how to create a bar graph from the official site..
A Bar Chart, Part 1

This tutorial is fine but it’s a bit too minimum.
It doesn’t provide how to add labels to each bar.
So, in this article, I will add labels to each bar.

Data

First, here is some fake data to work on: John, Tim, Sam, Greg, and Charles had a competition on how many hotdogs they can eat.

John:  8
Tim:   4
Sam:   9
Greg: 12
Charles: 11

Sure, Greg is the winner, and let’s visualize it with bar graph.

Step 1: Blank sheet

Let’s start with a blank canvas, but not the canvas in HTML5 sense, just an area in SVG where we draw the chart.

Select the element
Append an SVG element
Set class to ‘chart’
Set width to 400px and height to bar’s height times the number of data

var names = ['John', 'Tim', 'Sam', 'Greg', 'Charles'],
    hotdogs = [8, 4, 9, 12, 11],
    chart,
    width = 400,
    bar_height = 20,
    height = bar_height * names.length;

chart = d3.select($("#step-1")[0]) 
  .append('svg')
  .attr('class', 'chart')
  .attr('width', width)
  .attr('height', height);

Stylesheet

As a starter, we need a background color and a little bit of margin.

.chart {
  background: #b0e0f8;
  margin: 5px;
}

Step 2: Bars

Now, it’s time to add some bars.

Add scaling function for x.
It uses linear, domain, and range functions.
Add positioning function for y.
It uses ordinal, domain, and rangeBands functions
Select all “rect”, but since there is none, it returns an empty selection
Set data
Enter each node and append an SVG rect
We don’t actually need to set position in x since we want it to be 0. So attr(“x”, 0) can be removed. But, let’s leave it here for clarification.
Set y position using the function y which basically returns 0,20,40,…
Set width of each bar using the function x which takes each value from hotdogs and calculate its appropriate width.
Set height for each bar with y.rangeBand which returns 20

var x, y;
x = d3.scale.linear()
   .domain([0, d3.max(hotdogs)])
   .range([0, width]);

y = d3.scale.ordinal()
   .domain(d3.range(hotdogs.length))
   .rangeBands([0, height]);

chart.selectAll("rect")
   .data(hotdogs)
   .enter().append("rect")
   .attr("x", 0)
   .attr("y", y)
   .attr("width", x)
   .attr("height", y.rangeBand());

Stylesheet

Adding a thin white line around each bar and set the filling to steelblue.

.chart rect {
  stroke: white;
  fill: steelblue;
}

Step 3: Add values

Let’s show the value for each bar so that we know exactly how much they eat.
We want the value printed on each bar on far right.

Select all “text”, but again there is no “text” elements. We will get an emplety selection.
Set data
Enter each node and append an SVG text
Set position of the text to be the width of bar by using the function x
Set y position using the function y and adding the half of each bar height. This sets the position of y to be the middle of bar height.
Move the text a little to the left by setting dx to -5px
Set dy to .36em. Why? Here is why:
I use bootstrap for the whole styling.
It sets font-size to 13px and line-height to 18px.
13 divided by 18 is about .72, and y is now at the middle of the bar height.
We want the text to be exactly positioned vertically in the middle within each bar.
So, we have to push down by half of the font height.
That is .72 divided by 2 which is .36. Therefore, we need .36em here.
Right-justfied the text by setting “text-anchor” to “end”
Set the value as String

Add the following code after the Step 2.

chart.selectAll("text")
  .data(hotdogs)
  .enter().append("text")
  .attr("x", x)
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dx", -5)
  .attr("dy", ".36em")
  .attr("text-anchor", "end")
  .text(String);

Stylesheet

Just set the color of text for the values.

.chart text {
  fill: white;
}

Step 4: Add names

Before adding names, we need some space on the left of chart.
Then, add all the names.
Names are centered on the name column.

Define left_width to 100px. This becomes the offset for the whole chart.
Draw bars. This is same as before.
Draw values. This is a bit different.
This time, we select text element with ‘score’ class. We need this because we will add more text elements later, and this will prevent name collisions to happen.
We add class ‘score’ by using attr(‘class’, ‘score’).
Position of x moves to the right by left_width too.
Draw names.
1. Select text elements with ‘name’ class.
2. Set data to be ‘names’ array.
3. Set x to be the center of left_width by dividing by 2
4. Set y and dy as we did for the values too in Step 3
5. Set the text to center by using ‘text-anchor’ with ‘middle’
6. Add class ‘name’
7. Set the value as String

var left_width = 100;

chart = d3.select($("#step-4")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', left_width + width)
  .attr('height', height);

chart.selectAll("rect")
  .data(hotdogs)
  .enter().append("rect")
  .attr("x", left_width)
  .attr("y", y)
  .attr("width", x)
  .attr("height", y.rangeBand());

chart.selectAll("text.score")
  .data(hotdogs)
  .enter().append("text")
  .attr("x", function(d) { return x(d) + left_width; })
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dx", -5)
  .attr("dy", ".36em")
  .attr("text-anchor", "end")
  .attr('class', 'score')
  .text(String);

chart.selectAll("text.name")
  .data(names)
  .enter().append("text")
  .attr("x", left_width / 2)
  .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
  .attr("dy", ".36em")
  .attr("text-anchor", "middle")
  .attr('class', 'name')
  .text(String);

Stylesheet

Setting the name to black.

.chart text.name {
  fill: #000;
}

Step 5: Add margins and etc

I will wrap it up with adding few extra things: - Bars are bit too tight, so add gaps in between - Add paddings so that it doesn’t look squashed - Add rules for the chart - Add a bit of css hovering effect

Define gaps

Define the gap between each bar to be 2px top and bottom.
Redefine the function y to adjust the gap.
The height of each bar area is bar_height + 2 times ‘gap’.

var gap = 2;
y = d3.scale.ordinal()
  .domain(hotdogs)
  .rangeBands([0, (bar_height + 2 * gap) * names.length]);

Add paddings

Set width to be 40px wider
Set height to be 30px taller
Append Graphics context ‘g’ and transform the origin of cooridate to be 10,20. Then, we don’t have to worry about adjusting the position for each element that we have been doing so far.

chart = d3.select($("#step-5")[0])
  .append('svg')
  .attr('class', 'chart')
  .attr('width', left_width + width + 40)
  .attr('height', (bar_height + gap * 2) * names.length + 30)
  .append("g")
  .attr("transform", "translate(10, 20)");

Draw ticks

d3.max returns the maximum value given an array of elements.
ticks function returns “approximately count representative values from the scale’s input domain.” In this case, it returns 0,1,2,…12. These numbers work as tick marks.
Draw a vertical line from (x1, y1) to (x2, y2).

chart.selectAll("line")
  .data(x.ticks(d3.max(hotdogs)))
  .enter().append("line")
  .attr("x1", function(d) { return x(d) + left_width; })
  .attr("x2", function(d) { return x(d) + left_width; })
  .attr("y1", 0)
  .attr("y2", (bar_height + gap * 2) * names.length);

Add rules

This is just like other text elements. Only difference is that we write the numbers 1, 2, 3, … horizontally.

chart.selectAll(".rule")
  .data(x.ticks(d3.max(hotdogs)))
  .enter().append("text")
  .attr("class", "rule")
  .attr("x", function(d) { return x(d) + left_width; })
  .attr("y", 0)
  .attr("dy", -6)
  .attr("text-anchor", "middle")
  .attr("font-size", 10)
  .text(String);

Add bars

Set y position to be the value returned from the y function plus one gap.
Set height to be bar_height, not y.rangeBand().

chart.selectAll("rect")
  .data(hotdogs)
  .enter().append("rect")
  .attr("x", left_width)
  .attr("y", function(d) { return y(d) + gap; })
  .attr("width", x)
  .attr("height", bar_height);

Add values and names

Same as before.

chart.selectAll("text.score")
  .data(hotdogs)
  .enter().append("text")
  .attr("x", function(d) { return x(d) + left_width; })
  .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } )
  .attr("dx", -5)
  .attr("dy", ".36em")
  .attr("text-anchor", "end")
  .attr('class', 'score')
  .text(String);

chart.selectAll("text.name")
  .data(names)
  .enter().append("text")
  .attr("x", left_width / 2)
  .attr("y", function(d, i){ return y(d) + y.rangeBand()/2; } )
  .attr("dy", ".36em")
  .attr("text-anchor", "middle")
  .attr('class', 'name')
  .text(String);

Stylesheet

The rest of the setting that we need.

.chart line {
  stroke: #c1c1c1;
}

.chart .rule {
  fill: #000;
}

/* removed the while stroke as we don't need it anymore */
#step-5 .chart rect {
  stroke: none;
}

/* a bit of hovering effect for each bar */
#step-5 .chart rect:hover {
  fill: #64707D;
}

Gist

Here is the code at gist: https://gist.github.com/3046929

Open Google Reader's Starred Items

Fri, 27 Apr 2012 00:00:00 +0000

Here is my routine for every weekday.
I come to work and start checking emails and Google Reader’s Starred pages that I mark during my commute time.
I always felt that this Google Reader part is quite cumbersome and time consuming even though it’s not a lot.

These are the steps that I do: 1. Open up Google Reader on my browser 2. Type ‘gs’ that is a shortcut for opening the starred page view 3. Type ‘v’ to open it up in a new tab. 4. Type ‘j’ to go down the list and do ‘v’ again and repeat.

So, I thought would it be nice if I can just type one command and open all the starred pages at once.

Here is the recipe. First, you need to install gdata-python-client And, follow the steps here.

config = {'email':'YOUR-ACCOUNT@gmail.com', 'password':'PASSWORD'}


service = gdata.service.GDataService(account_type='GOOGLE',
                                     service='reader',
                                     server='www.google.com',
                                     source='MyReader')


service.ClientLogin(config['email'],config['password'])

Get your token and retrieve starred items

token = service.Get('/reader/api/0/token',converter=lambda x:x)


query = gdata.service.Query(feed='/reader/atom/user/-/state/com.google/starred')
feed = service.Get(query.ToUri())

Open each item: in my case I open it with Google Chrome

for entry in feed.entry:
    url = entry.GetHtmlLink().href
    # open in Chrome. This part varies depending on your system and your preference
    os.system("open %s -a 'Google Chrome'" % url)
    print entry.title.text
    print entry.GetHtmlLink().href

Unstar each item:

for entry in feed.entry:
    i = entry.id.text
    s = entry.source.extension_attributes['{http://www.google.com/schemas/reader/atom/}stream-id']
    ret = service.Post(urllib.urlencode({
        'i':i,
        'r':'user/-/state/com.google/starred',
        's':s,
        'T':token
        }),
        '/reader/api/0/edit-tag',
        converter = lambda x:x,
        extra_headers = {'Content-Type':'application/x-www-form-urlencoded'})
    print "Unstar result: %s [id: %s]" % (ret, i)

This is the whole thing in one shot. This code has more stuff.
In case you don’t want to keep your password inside this little script, it uses getpass command to ask you every time. But if you don’t care, you can just leave it out.
And, I added some exception handling.

#!/usr/bin/env python

import sys
import gdata.service
import json
import subprocess
from getpass import getpass
import urllib
from gdata.service import BadAuthentication

# password prompt
password = getpass('Enter your password for Google Reader: ')

config = {'email':'YOUR-ACCOUNT@gmail.com', 'password':password}

service = gdata.service.GDataService(account_type='GOOGLE',
                                     service='reader',
                                     server='www.google.com',
                                     source='MyReader')

try:
  service.ClientLogin(config['email'],config['password'])
except BadAuthentication:
  print "Wrong password!"
  sys.exit()

# authenticated token
token = service.Get('/reader/api/0/token',converter=lambda x:x)

query = gdata.service.Query(feed='/reader/atom/user/-/state/com.google/starred')
total = 0
cleared = 0

while True:
    feed = service.Get(query.ToUri())
    count = len(feed.entry)
    total += count
    if count == 0:
        break
    for entry in feed.entry:
        url = entry.GetHtmlLink().href
        # open in Chrome
        result = subprocess.call(["open", "-a", "Google Chrome", url])
        print entry.title.text
        print entry.GetHtmlLink().href

        if result != 0:
            print "Error opening the item"
        else:
            # now unstar it
            i = entry.id.text
            s = entry.source.extension_attributes['{http://www.google.com/schemas/reader/atom/}stream-id']
            ret = service.Post(urllib.urlencode({
                'i':i,
                'r':'user/-/state/com.google/starred',
                's':s,
                'T':token
                }),
                '/reader/api/0/edit-tag',
                converter = lambda x:x,
                extra_headers = {'Content-Type':'application/x-www-form-urlencoded'})
            cleared += 1
            print "Unstar result: %s [id: %s]" % (ret, i)
        print "==============================================================="
print "%d starred item found and %d cleared" % (total, cleared)

You can just name this little script to something recognizable and execute it from your shell.
I guess it would be nice if it is a little app that sits on my desktop and by double-clicking, it opens all my starred items.
I guess if I have time, I’ll make one. But I don’t think this script gains any popularity.
It is just saving my little time from everyday routine. If there is someone like me, it might help, but not many for sure. Or, I might rewrite it in Ruby just for fun. I first tried googlereader gem, but it turned out that it’s 5 years old and didn’t work. I stopped using Python regularly 5 or 6 years ago, it was the time I converted to Ruby. Python is nice. I never hated it or anything. So, this was quite refreshing exercise to program in Python.

Thanks, I stole most of code from this page:
http://moimoitei.blogspot.jp/2011/03/google-python-google-reader-api.html.
Here is my gist.