Single Page Application (SPA) Must Haves

Front-end development is fun and resourceful, with all those fancy js libraries sometimes it can get out of hand. For the past year, I have been working on turning a web-based game into a single page application/game and here are some of the library I been loving.

Path.js

https://github.com/mtrpcic/pathjs

When it come to SPA development, its all about staying in one page. However, your app/game is more complicated than that, it has components. location.hash is your friend, it will help you 'simulate' page redirects, gives your app structure that it needs. Path is a tiny library that lets you manage your hashes with ease. 

Underscore.js

http://underscorejs.org/
Underscore saves you time parse your objects or arrays. _.pluck and _.filter are definitely my favourites out of many many useful functions. 

Handlebars.js

http://handlebarsjs.com/
Embedded javascript template system can make template more complicated than it is, when logic are pushed to the template, it can be hard to maintain. Handlebars keeps templating minimal by letting you register Helper classes outside of your template.

I am not going over Frameworks like Angular, Ember, or Backbone since it is out of the scope of this topic, however, you might be able to find traces of these library I mentioned in those frameworks!

[Javascript] Photo Upload - Client-side image manipulation with HTML5 canvas

Sometimes our smartphones take amazing photos, but often they would be quite large.  If for some reason, you want to downsize or resize the images before upload to server (uploading large image and resize on server side is rather expensive...), we can use HTML5 canvas to help do the magic.

First get the file from <input>

HTML:

<input type="file" id="uploadInput" name="files[]" style="visibility: hidden" accept="image/*" >

JS:

var file = document.getElementById('uploadInput').files[0];

Above will obtain the file and we can trigger that with a change event binding with jQuery. 

jq('#uploadInput').change(function(){  

var file = document.getElementById('paFileUploadInput').files[0];

  // do things with file}

With the File object, we are able to draw it onto a HTML5 canvas and do whatever we want with it!

In this case, we can to resize it to at least 500 x 500.


    var canvas = document.createElement('canvas');

    var ctx = canvas.getContext('2d');

    var img = new Image;

    var MAX_WIDTH = 500;

    var MAX_HEIGHT = 500;
    img.onload = function() { 
     // code to manipulate the image
    }
    var theURL = window.URL || window.webkitURL;
    img.src = theURL.createObjectURL(file);


the img.onload function will execute when we set the src attribute of the element.  The src is obtained by createObjectURL on the very last line. 

Now, lets continue with the onload function. Since we want to resize the image, we shall get a new set of image dimension.


    var width = _width = img['width'];
    var height = _height = img['height'];
    if (width > height){
         if (width > MAX_WIDTH){ 
             height *= MAX_WIDTH / width;
             width = MAX_WIDTH;               
            }
     }
      else {
         if (height > MAX_HEIGHT) {
              width *= MAX_HEIGHT / height;
              height = MAX_HEIGHT;  
              }
      } 

With the new width and height, lets update the canvas size:

      canvas['width'] = width;
     canvas['height']= height;


And draw our image onto the canvas.

ctx.drawImage(img, 0, 0, _width, _height, 0, 0, width, height);

Lastly, we need to get the new base64 data of the new image to send to server:

var dataurl = canvas.toDataURL("image/jpeg");

[UnderscoreJS] - check for Null values inside a JSON object

Let say you have a JSON object:

var my_object = {
  'name' : 'Catherine',
  'email' : 'abc@abc.com',
  'city' : 'Vancouver',
  'age' : null,
  'school' : 'Simon Fraser'
}


To look for any null values might be a bit of work, since we will have to get the list of attributes, and loop through them.

With UnderscoreJS, we are able to validate the object easily.

_.contains(_.values(my_object), null)

_.value(my_object) will return a list of values in your object, in this case it returs:

['Catherine', 'abc@abc.com', 'Vancouver', null, 'Simon Fraser']

_.contains(list, value) returns true if the list contains the value or else return false.

For more: http://underscorejs.org/