Code of the Week – DynoSRC

A very interesting script popped up on Hacker News just. A Node.js module that sends the diff of JavaScript files, instead of the whole file, DynoSRC.

It seems to work by storing the JavaScript file in local  storage, it keeps the whole copy of version 1 of your JavaScript file. Now you come to update it and add just a few lines of data, normally the client would have to re-download the whole file just to get these extra lines. But with DynoSRC it just sends the diff and the whole file is reassembled locally, allowing for massively faster updates.

It uses Git to do the diff, and includes a nice wrapper for it. Admittedly there are limited uses for this, a normal site with infrequent JS changes wouldn’t benefit. But a large web app? Would definitely help clients with slow internets.

Again it mostly wins because of its name.

Windows 8.1 saving to SkyDrive by default

The most annoying thing caused by updating to Windows 8 is by far defaulting saving files to SkyDrive. Its even more annoying than all of the Laptops drivers failing to work correctly, I blame Sony for that.

Every time you got to save any file on the computer, or load any file from the normal windows browse for file window – Massive lag. I’m assuming its because its wandering off into the cloud and having a look. The worst decision Microsoft made was to force SkyDrive to be default for Windows 8.1

To remove start, search for skydrive, select skydrive storage, and change ‘Save documents to SkyDrive by default’ to off.

skydrive

 

Speed restored.

Code of the Week – Handlebars.js

This week it is Handlebars. The JavaScript templating library.  After starting out with Express JS for Node, it defaults to Jade templating language. Whilst I’m sure its an amazing language will lots of bells and whistles, it is quite different from normal HTML. It requires you change all of the HTML into its format.
I’d prefer to stick with normal HTML, to keep it similar to other languages I work with (PHP) and easier to use frameworks such as Bootstrap.

Handlebars.js

I had a quick look around for an easy to use templating language that would play nicely with Express, and be easy to use, from someone coming from PHP / Smarty background.
I found Handlebars, which allows you to print variables with a double curly bracket {{var}}. Nice and easy.
The real reason I chose it was of course, because it is currently Movember and Handlebars whilst already being a style, is derived from the moustache templating language. Handlebars adds features  to Moustache and has a polished and easy to use Node.js modules. I personally chose ‘Express3 Handlebars’ installable with ‘npm install express3-handlebars’. I tried another but this one worked perfectly first time.

I’d recommend Handlebars to anyone new to Node / Express who’s looking for a familiar template engine.

Code of Last week – FastClick

Code of last week, because I forgot.

Apparently mobile browsers have a 300ms delay between tapping and the JavaScript onclick event being fired. Its apprently to allow detection of double tapping in the browser for zoomings. Who knew? Well ftlabs did and they made a library that listens for mobile browsers with the delay and removes the delay.

FastClick simply requires you include the js file and add a cheeky listener on the window load, preferably to the document body. It’ll make your website seem snappier for mobile visitors and who doesn’t want that?

Code of the week – Socket.io

This weeks code of the week is Socket.io a easy to use and nicely packaged web sockets framework. Installing it with npm can’t be easier, and it works nicely with express too.

Best features are the easy to use listeners, broadcasting to just the client, everyone but the client or everyone. Which all come in very useful. It falls back to flash for old browsers seems stable and lots of documentation available online.

I built my cake off count down using Socket.io to broadcast users mouse movements to each other, so you can see their little spaceships whizzing around. I will open source the code to it soon, but for now I most worry about going to the airport for 4am.

Code of the week – oboe.js

This weeks code of the week is Oboe.js a JavaScript Ajax library that lets you access data from a JSON feed before its finished loading. Think of it as a replacement for jQuery’s .ajax function.

Some uses that are shown on the Github page that are quite cool:: stopping the request when you have that data you need, processing the data as it comes, and visual feedback that the page is updating.

Its very easy to speed up page rendering from Ajax requests by parsing the JSON returned and rendering the items one by one. Would work very nicely in a search situation, giving the user faster results.

One use that is really skipped over is the casually mentioned ‘Visual feedback as page is updating’, the example in the docs is to say when foods have been read from the JSON feed as they are received. But this can be used for other uses such as long processing jobs, providing the user with feedback about what is currently processing.  It gives the user a good sense of progress, that a spinning wheel just can’t.

I have deployed oboe.js in a long running PHP Ajax call, the call processes a lot of data, and had two problems, the spinner didn’t show progress to the user, and Nginx could timeout if PHP took too long to process. This was nicely solved with using Oboe.js to read the JSON data from the processing script and showing status messages to the user.

First I needed to get PHP to flush the data to the browser without waiting for the page to finish processing.

function sendProgressMessage($message) {
echo str_pad(',{"progress":"'. $message . '"}', 1024, " ");
ob_flush();
flush();
}

This function takes a message string, pads it to 1024 characters to force a packet to be sent, wraps it into JSON message echos it out, and flushes the buffer.  You will need to already echo out the start of the JSON array, and ending when you’re done processing to make it valid JSON.

Then in Oboe.js follow the updating example, and using the progress text to replace the currently displayed text. You now have a nicely updating loading screen.

Things to remember: You have to disable Gzip, anywhere its enabled for this request – Apache and Nginx if you use it.  You may also need to disable the Nginx buffer, using proxy_buffering off;