Valnatt

Tröttnade på val-TV:n och skrev ihop en Node.js-applikation på ca 1 timme som hämtar valresultat från valmyndigheten. Blev inspirerad av en medlem i Facebook-gruppen Kodapor som gjort samma sak, fast i Python.

Applikationen består av:

      Ett bakgrundsjobb som varannan minut hämtar zip-filen från valmyndigheten och packar upp dess innehåll till en katalog.
      En webbserver (Express) som läser XML-fil från resultatkatalogen.

Koden finns här:
https://github.com/nekman/valnatt

Demo finns här:
http://valnatt.azurewebsites.net

Givetvis går allting att förbättra avsevärt, men det var inte vitsen med detta hack :)

CORS, JSONP and Promises

Some API sites (eg. api.flickr.com) (and old browsers) does not support CORS (Cross Origin Resource Sharing). So you cannot do a XMLHttpRequest to another domain. A cheap workaround is to use JSONP instead.

A JSONP-request can easily be done by using jQuery:

Demo

Of course, sometimes you don’t want to include jQuery just for this.
Luckily, a script for handling JSONP-script inserts are easy to implement. Just do something like:

  1. Create a script-tag (var script = document.createElement('<script>');)
  2. Define a (global) window.jsonpHandler function
  3. Add the query string ?callback=jsonpHandler to the requested URL
  4. Insert the url in the created script tag (script.src = url)
  5. Do something with the result data in the jsonpHandler function.

Here is a working example: http://stackoverflow.com/a/22780569/141363.

And, here is a improved version of the script that are using:

  • Promises to determine when the JSONP-request has completed/failed.
  • Possibility to add a custom callback name (?callback=foo)

Usage:

Demo

So far so good…But some API:s does not even support JSONP. This is where you need to create a server side proxy for the request…OR, you could just use Yahoo YQL as a proxy to accomplish the same thing :)

Just embed the requested URL in a YQL-query like:

And, the great thing about Yahoo YQL is that it is CORS-enabled :)

Here is an example that uses native CORS with Promises in a Yahoo YQL query to get images from Flickr API.

Demo.

See also
CORS – http://www.html5rocks.com/en/tutorials/cors/
ES6 promises – http://www.html5rocks.com/en/tutorials/es6/promises/

Binder.js: Two-way databinding

Just started to work on a small JavaScript two-way databinding library for modern browsers (IE9+).
I know that there is a lot of DOM-based databinding frameworks out there and I encourage you to use them!

Why?

  1. I wanted to learn more about DOM Level 3, ES5 and ES-Harmony
  2. I needed a databinding library, that only did databinding and not forced me to use a certain (MV*) design pattern
  3. I want to write my templates as valid HTML (not in a script-tag)
  4. I needed a small simple two-way databinding library for my own projects

Goals

  1. Simple and easy to use
  2. Small in size (currently ~5.5KB minified and gzipped)
  3. No dependencies (other than a polyfill for Object.observe)

Basic usage


More advanced usage
Fetch github repositories from a user:

More examples at the project website: binderjs.com
Code at github: https://github.com/nekman/Binder.js

For now, this is just a proof of concept, that I will continue to develop and use for my own small projects. But of course, I appreciate any feedback and/or criticism :)

Object.observe

Soon we should be able to use Object.observe which can be used to observe JavaScript-object changes.

From ecmascript.org:

Object.observe allows for the direct observation of changes to ECMAScript objects. It allows an observer to receive a time-ordered sequence of change records which describe the set of changes which took place to the set of observed objects.

This feature can be tested in Google Chrome Canary where it is enabled by default. Also note that the current version of Google Chrome is M34, so this will be available in very a near feature (probably in M35) :)

Usage:

var person = { shoeSize: 43, name: 'nekman' };

Object.observe(person, function(changes) {
  var change = changes[0];
  console.log('Changed property "%s" from %s to %s.', 
      change.name, 
      change.oldValue,
      change.object[change.name]
  ); 
});

// change a object property...
person.shoeSize = 44;

Object.observe will make frameworks like Polymer/EmberJS/AngularJS a lot faster because they no longer need to do their own “dirty checking” to detect changes for their two-way-databinding.

Until Object.observe is fully supported, the following polyfills can be used instead:

https://github.com/Polymer/observe-js
https://github.com/KapIT/observe-shim
https://github.com/jdarling/Object.observe
https://github.com/melanke/Watch.JS (not Object.observe but similar).

More about Object.observe:

http://addyosmani.com/blog/the-future-of-data-binding-is-object-observe/
http://addyosmani.com/blog/a-few-new-things-coming-to-javascript/