Mobile app for Telldus

I recently bought a Telldus Tellstick Net to control the lights and other things in my home. Telldus have a open API so I built a mobile web app with Ionic Framework.

I also took the opportunity to use Traceur-compiler to be able to use all the new and shiny things in ES.next (ES6/ES7) :)

The app is a static HTML5 page with one HTML file, a CSS file for Ionic (from Ionic CDN), a JS file with the traceur-runtime, browserify, Ionic bundle (that contains Ionic + AngularJS), some Node modules (OAuth and Qs), and the traceur compiled ES5 code for the app itself. Everything is cached on the client with HTML5 application cache.

Browserify is used as the module system and built together with Grunt where
grunt-replace and a custom Grunt task is used to generate unique file names (with MD5) and insert it in the application cache manifest and HTML file.

To communicate with the Telldus API, OAuth 1.0 are being used and the OAuth keys are stored in localStorage. The Telldus API does not support CORS or JSONP, so as I described in my previous post I use Yahoo YQL as proxy (over HTTPS) to communicate with Telldus API.

The code is on Github (I will update it later, after I bought more receivers and sensors). And I run it from my Dropbox account (does not matter if the URL is long when you save the app to the home screen and run it in fullscreen mode without the address bar).

Here are some screenshots of the app on my Nexus 5 (after I added it to my home screen so that fullscreen mode works).

Syncing
Looking for devices

Devices
List of devices that can be turned on/off.

Failed to sync
Sync failed.

Syncing
Syncing again.

Configuration
Config. Add Telldus OAuth keys.

Summary
Really nice to work with ES6/7 code! I really enjoy the async/await parts + the simple module system and the arrow functions.

I am not much for big frameworks…But for this use case the Ionic framework felt like the right choise. It was pretty easy to create a mobile app with nice look and feel that seems to work on both iPad 3, iPhone 5 and Nexus 5.

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 :)