The IPad is a nice tool for surfing the web from your sofa. However if your like me and sometimes want to check out how certain things are done it’s missing a vital feature. It’s missing a view source functionallity.

So I Googled for it and found the following gist to allow you to view the source of any webpage you’d like.

There are also some more sophisticated ones like Snoopy. Where there are complete installation instructions.

Everyone wants metrics these days, but it takes a while to invest in good quality metrics for your software. However, if your running a javascript based single app page, or well mostly any webpage. You could use Google Analytics to get some basic quality metrics.

What can we measure?

So I’ll briefly cover some things that you can use google analytics for.

  • Ajax response times
  • Ajax failed requests
  • Feature usage
  • some aspects of javascript errors

There are more specialized measuring tools, but one thing that is interesting with using Google Analytics for this is that your accutally measuring what people are using. The response times will be the response time a client acctually has. Which I find quite intresting. But were getting ahead of our selves.

I’ll some some code at the end of the post describing how to measure some of these. Others can be deducted from the code.

Ajax response times

jQuery has these interesting functions you can add, where you get to maniupate the jQuery jqXhr request before sending it. Here you can jack in, take a timestamp and save it on the request for when your sending it. Then when the request recieves is done you can take the timestamp and compare it against the current time. I’m sure there are similar functions with other libraries, and if not you could easily wrap all your ajax calls in a method that support taking these snapshots.

So now we have a measurement of how long a request took to complete the request, and this can easily be sent to Google Analytics as a custom event.

Ajax failed request

Similar to the time calculated, we can also handle the case where the server returns certain error codes, and just measure how much of these error codes we get. It’s quite easy then to see, how many timeouts does our clients get? Are we getting internal server errors? Unauthorized, not found, etc.

Feature usage

You could make a simple function that you call with a given key to log a usage of a certain feature. This can allow you to experiment with the user interface, or just measure the popularity of a new feature.

Be warned, just because a certain feature gets low measures dosn’t necesarilly mean you can drop it.

Javascript errors

Now adays you can pick up on window.onerror in most browsers, which does allow you to keep track on how many javascript / image loading faults you have on your page. There are tools that speciallize in this, such as my own www.js-analytics.com. That will allow you better details regarding such errors, but sometimes just getting a number will be enough.

The code

As you can see the code sets up two functions to save a timestamp and report back the calculated execution time of the ajax request in milliseconds. There is also a function for reporting ajax errors and hooks up on window.onerror.

It should be quite easy to attach a function that reports back usage on a function based on a given key. But as the script does not attach any public funtions I didn’t want to decide on a namespace or object to attach the feature tracking too.

Conclusion

So you can capture a bunch of metrics and report to Google Analytics. You can probably collect even more metrics form the site, that I have yet too think of. Don’t hesitate to point out if I missed anything or you come up with some other brilliant metric to capture.

What is interesting is that the metrics gathered are also gathered along with other metrics such as how long the user stayed on the site, what content he or she browsed, if they used adcampagins to reach the site, etc. Allowing you to correlate the data gathered with the behaviour data already gathered by Google Analytics itself.

This post is called “poor mans metrics” as you need not set up any service and just depend on Google Analytics, which in most cases already is available. I wonder how poor it really is. Then again, it will never give you detailed metrics of your servers behaviour.

So I just spent a few hours debugging a cache manifest. It’s the second time around at there always seems to be issues when first setting up the manifest to work properly.

I thought I’d mention some tools to help debugging issues with the cache manifest.

There are two tools that help you verify that the application cache manifest is set up correctly. First theres the Manifesto Application Cache verification bookmarklet. Also the Cache Manifest Validator verifies your cache manifest via file upload, URI or direct input. For some reason however it no longer validates my cache manifest that is working.

Setting up the logging on all the cache events also helps debugging on for example IPad where all you have to rely on is the console log. This blog post shows how to set things up.

Also, something I ran in to on the IPad you might have to shut down all web applications on the IPad before refreshing your application with a Cache manifest. The symptom is that all files are downloaded (shown with progress events) but when its done the IPad just gets an error message. If this is the case, just shut down all web-applications and Safari and reset the Cache from the settings. That got it working again.

 

We are using Basic Authorization for our REST-api at RemoteX and it’s no surprise that we have a lot of special characters in our usernames (åäö and spaces). What’s interesting is that using JQuery.ajax() with just username and password will fail for these special characters.

Encoding the username and password options to the .ajax() call will make it work on Android but still will not work on iOS.

After some research started using the method outlined here: http://blog.rassemblr.com/2011/05/jquery-ajax-and-rest-http-basic-authentication-done-deal/

Where they set the Request header before sending the request to the server. What we noticed is that doing this will work only if you also clear the username and password options to .ajax()

so for us it became something like:

                options.beforeSend = function(xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + options.base64);
                };
                
                var base64 = Base64.encode(options.username + ":" + options.password);
                options.base64 = base64;                
                    options.username = "";
                    options.password = "";

Also we used the Base64 encoder found here: http://www.webtoolkit.info/javascript-base64.html 

The crypto-js base64 encoding didn’t work for us for some reason.

I’m experimenting with the Jasmine JavaScript testing framework to see if I can create a cucumber style testing framework using JavaScript. I want to go full out TDD on it so I started with a feature file, now I’m working on a spec to get that file running.

However as I work I get stuck on the following:

image

The description is too high level!

What happens when I load the feature file? Obviously a feature is loaded, but how? Something needs to happen between loading the feature and running the steps. My test needs to be more detailed.

Why not describe the load function then?

image

<p>At once I realized that the load function needs to be asynchronous.</p>

I’ve been experimenting with Mustache.js to do templating for a JavaScript project of mine. One thing that I’m having trouble with is that there’s no way to add more dynamic elements to the resulting template. The output is an HTML string.

What I want to do is to insert HTMLElements into a layout I created using Mustache.js.

Being inspired by the Mustache.js partials I came up with this function to run after I’ve constructed my template:

    var to_elements = function(html, elements) {
        var result = $(html)[0];
        for(element in elements) {
            $("#"+element, result).replaceWith(elements[element]);
        }
        return result;
    };

It will run and replace all elements with an id that matches a the members of the object I provided. Here’s an example usage:

        var layout = to_elements("<div><div id='projectform'></div><div id='projectlist'></div></div>", 
            {
                projectform : createProject.element,
                projectlist : projectList.element,
            });

This will produce the following output:

<div>
  <div class="form">
    <input type="text"><button>+</button>
  </div>
  <div class="list">
    <div>aaaa</div>
    <div>test</div>
  </div>
</div>

This output however is in the form of HTMLElements where I’ve attached all events and handling, allowing me to test the individual parts of the individually using templates to coordinate everything together at the end.

javascript_coverMarkus Andersson recently recommended a book to me called JavaScript the Good parts, by Douglas Crockford. As we were discussing inheritance around JavaScript it came up, so to demonstrate to power of my Kindle I purchased it so we could check out the specific example we were discussing.

JavaScript the Good parts is quite different from other language specific books I’ve read. It’s short and to the point, a feature not commonly found around American authors. It is however also opinionated, not everyone might agree with it’s content. Which is great because it means you have to think about the content.

What I really liked about it was how it described the different ways to arrange and encapsulate your JavaScript functionality. It also provides a heads up for a few more common mistakes.

The chapters on Regular Expressions, there is two of them if I remember correctly. One discussing the good and bad parts of Regular Expressions in JavaScript and then a reference chapter.

The book is suited both for people whom are new to JavaScript and to people who’ve worked with it before. But then again it is focused on the language primarily, so more senior JavaScript developers might focus more on different styles of JavaScript implementations.

I got a Tellstick for Christmas together with some Nexa remote controllers for the lighting at home.

I knew that this type of project needed to be started immediately or else it would just loose it self in a drawer somewhere. So I added some tasks to Track and Shuffle and got to it.

I wanted to stick installed in my Linux server that sits in my closet and acts as my home’s central information system. So I was natural to install it there.

Tellstick has more software available for Mac and Windows, but they do have software for Linux as well.

Install the tell stick software on the Linux machine according to the following guide: http://developer.telldus.se/wiki/TellStickInstallationUbuntu

Configuration of devices can be found here: http://developer.telldus.se/wiki/TellStick_conf

Software page seems promising: http://developer.telldus.se/wiki/Software

The install for Linux is just a C library, so I’ll have to set up some services to use the stick, but first. How to set up a device?

Apparently all you have to do is edit the configuration in /etc/tellstick.conf. This is how I did it.

deviceNode = "/dev/tellstick"
device {
  id = 1
  name = "Spotligh bokhylla"
  protocol = "arctech"
  model = "selflearning-switch"
  parameters {
    house = "1"
    unit = "1"
  }
}
device {
  id = 2
  name = "Taklampor bokhylla"
  protocol = "arctech"
  model = "selflearning-switch"
  parameters {
    house = "1"
    unit = "2"
  }
}

I spent a long time to figure out how to find out which house code to use. It turned out that all you do is select on and teach it to the Nexa receiver.

Now for the services?

I want to have it as a webpage, and some way I’m used to programming against. a Rest service comes to mind since I enjoy that model. So I need to create a wrapper for the C library. So what to use: Python? NodeJS?

Bingo, Apparently there is a restful web service already available.

https://github.com/pakerfeldt/remotestick/wiki/rest-api

http://remotestick.org/

I even has a Android app for the server.

With this setup all I had to do was to write a little JavaScript page that turns the lights on or off.

So I did just that, here is the result of the first version.

image

It has support for dimmers, however I haven’t been able to try that out fully due to lack of well… dimmers.

I tried to get it contributed to the remotestick repro, however the author pointed out that it was better to have this as an add-on to the remotestick-server. So the end result is that you can find the GUI here: https://github.com/morkeleb/remotestick-webgui

The all you need to set it up is to download a release available under downloads, and then extract the static directory to the static directory under remotestick-server.

Now I wanted the webpage to be accessible through port 80 without interrupting any of the services already running on my box, luckily this holiday I configured my Linux box to run with NGINX to front all the different services available through HTTP on my box.

Configuring NGINX to run proxy remotestick and handle my JavaScript page

        location /remotestick/ {
                proxy_pass http://localhost:8422/;
                proxy_redirect    off;
                proxy_set_header  Host             $http_host;
                proxy_set_header  X-Real-IP        $remote_addr;
                proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
        }

There is a problem with hosting it under NGINX since it changes the url and the Android app for Remotestick currently only works with IP-addresses, however I haven’t tried the latest version which was released just a few days ago. It should be able to handle more general addresses to the server.

I hope to add a simple guide for adding new devices trough the web interface, since it would greatly improve the setup experience of adding receivers to my home.

Currently the greatest problem with the TellStick is that it’s not quite easy to install and setup, however I hear that TellStick is working on a service called TellStick Live! that is in beta for Windows and Mac users.

We’ll see how this evolves :)