FlipClock Updates

There's a updated version of FlipClock available today on the Chrome Web Store with a couple new features.

Changes: 

• Option to switch between 12 and 24hr modes.
• Options to enable or disable seconds
• flipclock.us now works better on mobile devices with smaller screens and in porttrait orientation.

 You can get the updated verions on the Chrome Web Store, or at http://flipclock.us/ 

FlipClock Available on the Chrome Web Store

I just published my FlipClock webapp to the Chrome Web Store.

It was remarkably easy to package it up. I have to hand it to Google, they've made it pretty easy to publish a JavaScript based webapp to their store. The process basically entailed adding a manifest.json to the project and packaging the directory into a ZIP file. If you're interested, you can check out the source on Github or bitbucket.

In short, you should install it and enjoy watching the time flip away...

Cross-domain AJAX, Express.js and Access-Control-Allow-Origin

I have a tip for anyone working with node.js frameworks, in my case it's the Express framework, but this applies to any framework that binds to URL patterns.

I've been working out some JavaScript on jsFiddle that involves AJAX requests to an endpoint I have running on a node.js server external to jsFiddle. Part of this requires that the Access-Control-Allow-Origin header be setup to allow access from external domains. You can do this in Express by adding the header to your response object with:

res.header("Access-Control-Allow-Origin", "*");

I had a route that looked something like this:

app.get('/posts', function(req, res){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    res.send(
        { posts : ... }
    );
});

But it wasn't working in Chrome, I kept seeing the error "XMLHttpRequest cannot load http://... Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin." even though I was setting the correct header.

Turns out that there was a OPTIONS request being sent before the GET request that didn't match my route and it was failing with the previous error. Problem is, Chrome didn't show the request in the Inspector's Network tab so it took me a long time to figure out what was happening.

The fix is a pretty simple one; you need to make sure your route in Express matches the OPTIONS request as well as the GET request. The easiest way to do that is to bind with app.all(...) to match on all requests. So the updated and working code is:

app.all('/posts', function(req, res){
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.send(
        { posts : ... }
    );
});

It's also important to note that I needed to set the Access-Control-Allow-Headers header to allow "X-Requested-With". Without it, it generated a similar error: "XMLHttpRequest cannot load http://... Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers."