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;

Prepros – Sass, Compass, JS Minifier and other stuff

I’ve recently started using Prepos, it compiles sass, does compassey things (like create image sprites) and can minify JS. It has a really nice interface, its open source and has a smiley face to congratulate you on not making a syntax error. Contains everything in its rather large 40mb container, no worrying about dependencies.

I’ve used Scout before, but much prefer this, no Adobe Air, a better user interface and a lot more features.  I still haven’t used JS concatenation, which will be very useful. Or this live refresh feature, but will definitely be trying them out soon.

Top tip for Prepos, is in the options menu, click Sass then select Use Compass, Full Compass Support and use config.rb options. See below..

prepos
Prepos Sass options

This will enable proper compass support. You can also configure all your Sassing from within a Config.rb file, allowing you to keep settings constant amongst people on the same repository.

My advice, if you use Sass and your on a Mac or Windows, use Prepos. Why is it better than command line? Because it has a smiley face.

Nginx, a new IP and Node.js

I decided to get Node.js running on the same server as Apache.  I wanted to keep Apache exactly the same, so not messing with .htaccess files and to keep it manageable with Virtualmin. I also wanted to keep using the same server as it had plenty of spare capacity.

Currently the server is a normal LAMP stack as shown by the diagram below.

lamp
LAMP stack

The solution was to get another IP address; get Apache to use one, use Nginx on the other. I decided to use Nginx as its apparently faster at serving static files than Node and will allow other services to be proxied to in the future if needs be. It also looks to be safer as a recent DoS vulnerability in Node is not achievable when Nginx is proxying.

apache nginx nodejs
Apache Nginx and Node.js on the same server

I also decided to try out RethinkDB as a Nosql database for Node.js, it has officially supported drivers for Node and stores data in JSON. I could have used the more popular MongoDB but Rethink’s admin interface caught my attention. Node can also connect to the same MySQL server as PHP currently does. This gives the potential to allow Node to do background processing for PHP sites.

I’ll do another post in the near future detailing how I got it working, including a few bumps along the way.

Offline.js Code of the Week

Offline.js checks your ajax requests to make sure they are succeeding. It can then queue requests so they can be made when the user is back online. Comes with a few nicely styled warnings and reconnection messages.

Looks like it’ll be great for mobile web apps where users can have intermittent internet connections.  But may require changes to your web app as you’ll be receiving a batch of queued up commands.  Make sure you’re not animating every response…

More details about Offline.js

Prestashop white label module

As I discussed in the Prestashop module advertising in back office post, I didn’t want the newish module advertisements being displayed. So I made a module.

Its on GitHub: https://github.com/franksmule/prestashop-whitelabel – Or straight to downloads

What it does

Removes premium/priced modules from Back office module list
list-of-modules

Removes tips and featured modules from the back office dashboard
dashboard

Simply download the release and upload the zip and install as you would any module.

I’m thinking about other features, such as removing the dashboard footer links. Comment any other suggestions you’d like to see.