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. 

Amazon Lockers - On site!

So, finally we drove down to Seattle, and arrived at the locker last Friday.

This is the screen in the middle of the lockers, where you input your pick-up code indicated in the pick-up confirmation email.

After the code is validated, locker number will be displayed in screen and that locker will pop open automatically. 

Yay, nice and smooth!

I would say it was definitely a great experience shipping to purchases to an Amazon locker. I am very glad that the timing worked out perfectly as it was my biggest concern at the beginning. 

Poster Design - Final

Our idea is to promote a newly opened skateboard park in the city since project topic is Community. (Completely fictional!)

So after hours photoshopping, we had the final product!

After presentation, we had feedbacks on the figure not being 'rough' enough. Which I agree in my opinion. 

I love the typography and the hierarchy relationship among them. 

After all, it was a great experience in the process of making this project.