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!

[Python] Hosting static web pages locally on mac

Looks like I can simulate a simple FTP server locally without setting up an actual FTP or web server when development static websites. 

On your terminal, navigate to the directory of your project and start this:

$python -m SimpleHTTPServer

 And when this is printed: 

Serving HTTP on 0.0.0.0 port 8000 ...

Open localhost:8000 in browser and you should able to see your index.html rendering!

This is very handly to test out all file path of static files and simulate a FTP server locally. I can finally skip my skeleton.js node server :)

Have fun coding! 

source: http://stackoverflow.com/questions/3800143/ad-hoc-webserver-for-static-files-on-unix-macosx

Amazing Google+ Event Themes

I been noticing these awazing subtle animated backgrounds on the Google+ events I have been invited to.

Here is a couple of them.

Even the static ones are super nice.

However, there are so much to choose from and I am dissappointed that I have to preview each one of them by clicking on the left and right arrows.

Catogorizing by the style or type of event will totally help the selection process.

[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/

Scala - Memory Management

Since Scala runs on Java Virtual Machine, JVM’s garbage collect is responsible of clearing up Scala program’s memory when it becomes obsolete. At this note, we can say that Scala’s memory management schema is relatively the same as Java. Every time an object is instantiated at run-time, Scala reserves some memory to hold the objects states; which includes its variables. Memory leak is also being prevented from JVM’s run-time environment.
However, on a side note, since Scala comes with many powerful built-in functions (such as filter, mapping), developer might be using more memory that they needed. These functions often generates new objects which many costing additional memory usage. 

Scala - Objects

Now that we know something about Scala’s built-in type, let’s look at its objects. Objects in Scala are created in classes. Classes are like the skeleton to objects. As a companion to classes, singleton objects can be declared using the keyword ‘objects’. When a class and an object share the same name, they are companions to each other. In addition, they are able share each other’s member, including private members. Objects can be declared as ‘Traits’ in Scala as an alternative. ‘Traits’ is very similar to Java’s interface, however ‘traits’ can be implements solely.


Different from Java’s interface, traits can be ‘mix-in’ with other traits and classes when constructing methods.