Posts Tagged JavaScript
Working with the Application Cache Manifest for offline JavaScript applications
Posted by Morten in Uncategorized on August 15, 2011
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.
Basic Authorization fails for special characters with JQuery on mobile-web-kit
Posted by Morten in Uncategorized on June 20, 2011
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.
The power of nested describes in Jasmine
Posted by Morten in Uncategorized on June 6, 2011
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:
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?
At once I realized that the load function needs to be asynchronous.
Adding elements to mustache.js templates
Posted by Morten in Uncategorized on May 2, 2011
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.
Book Review: JavaScript the Good parts
Posted by Morten in Uncategorized on April 18, 2011
Markus 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.
Home automation using TellStick and Linux
Posted by Morten in Uncategorized on December 30, 2010
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
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.
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
My presentation at AS2010
Posted by Morten in Uncategorized on May 15, 2010
I held a presentation at AS2010 about handling defects. The slides are up, unfortunately there is not text in the slides and there’s no audio track… but for those who wish to see my slides you can find the at:
Presenting JS-Analytics
Posted by Morten in Uncategorized on May 4, 2010
With the success we had with EQATEC Analytics at RemoteX I started looking around for something similar, but for JavaScript. I didn’t find anything that satisfied my needs.
Thus I created my own error collecting and analysis tool, and named it JS-Analytics.
You use it similar to how you use Google Analytics, you add a few given script tags to your website and JS-Analytics will try to collect any unhandled JavaScript error that occurs, and send information about it back to JS-Analytics website.
JS-Analytics uses a combination of window events to collect errors. These events aren’t available on all browsers so JS-Analytics will use JQuery to provide cross browser support. This means that cross browser support is only available for JQuery code.
For more information about how it works I recommend this page.
Right now this JS-Analytics provides just some basic analysis. But I felt that it was better to announce it and hopefully get some feedback on it, than to carry on without any feedback.
Are you writing JavaScript or JQuery?
Posted by Morten in Uncategorized on November 22, 2009
I’ve noticed that more and more, when I search for infromation for JavaScript I search for JQuery not JavaScript. Have I reached the point that I consider developing JavaScript code to be JQuery development? It is of sort natural, as JQuery close to eliminates alot of the work required for multi-browser support, it is better to have a JQuery backed solution.
I can only speak for myself, but it would seem that a lot of people are doing the same thing.
A library that acctually positions itself above the language it is written in? Accepted by both Google and Microsoft? The impact of JQuery on the web-development community is truly facinating,
RemoteX Localization Editor final touches
Posted by Morten in Uncategorized on November 19, 2009
I’ve been working on a JavaScript client for our REST-service. So far it’s an editor for Localization and pick list options. But I was on a roll!
So we charge by the amount of users each installation, lets add an easy way to calculate the amount of users. Download the list of users, and just count them. Pretty easy when then REST server is already in place. To the right here you can see the end result of the view of the users. I did a similar one to calculate what we call resources.
While I was on that I figured I could add some graphs. I have a small thing for visual data. I found the JQuery Flot plugin, which suited my needs quite well.
I combined the flot plugin with our REST based search API and created some graphs. All cooked together I could produce a statistics view like this:
To finish things up I added the style used on RemoteX website, to get a consistent feel. This took some sweat, as the style sheet is generated HTML and CSS from dotNetNuke, and not exactly the same as my carefully handcrafted HTML. In the end I got it in and here is the end result.