The Non-Designers’ Design Book

I can scratch something on paper, not too ugly.
I can edit photos with PS, only for basic functions.
Never think about design before coming to write a web app.
I finished reading this non-designer’s design book at the last day of 2013.

Four Basic Principles in Design:





1.Proximity: Group related items together.
Avoid too many separate elements on a page.
Don’t stick things in the cornea and in the middle.
Avoid leaving equal amounts of white space between elements unless each group is part of a subset.
Avoid even a split second of confusion over whether a headline, subhead, caption, graphic, etc. belongs with its related material. Create a relationship among elements with close proximity.
Don’t create relationships with elements that don’t belong together. If they are not related, move them apart from each other.

2. Alignment: nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.
Avoid using more than one text alignment on the page.
Try very hard to break away from a centred alignment unless you are consciously trying to create a more formal, sedate presentation. Choose a centred alignment consciously, not by default.

3. Repetition: Repeat some aspect of the design throughout the entire piece. The purpose is to unify and to add visual interest.
Avoid repeating the element so much that it becomes annoying or overwhelming. Be conscious of the value of contrast.

4. Contrast: if two items are not exactly the same, then make them different, Really different. Don’t be a wimp.
The purpose is to create an interest on the page, and to organise the information.
Avoid contrasting brown test with black headlines. Avoid using two or more typefaces that are similar.

Six Variations of Type:

Categories of typeface
Old style: body actually reading
Modern:striking appearance
Slab serif: Advertising
Sans serif: no edge
Script:mimic handwritting
Decorative: fun, distinctive

It also provides major concepts for designing Business Card / Envelope / Flyer / Newsletters / Brochures / Postcards / Newspaper ads / Websites.

Method Parameter Passing: by Value vs by Reference

Pass by value: The local parameters are copies of the original arguments passed in. Changes made in the function to these variables do not affect originals. 

Pass by reference: The local parameters are references to the storage locations of the original arguments passed in. Changes to these variables in the function will affect the originals. No copy is made, so overhead of copying (time, storage) is saved.

The Java Spec says that everything in java is pass-by-value. There is no such thing as “pass-by-reference” in java.

The key to understanding this is that something like

Dog myDog;

is not a Dog; it’s actually a pointer to a Dog.

What that means, is when you have

Dog myDog = new Dog("Rover");

you’re essentially passing the address of the created Dog object to the foo method.

(I say essentially because Java pointers aren’t direct addresses, but it’s easiest to think of them that way)

Suppose the Dog object resides at memory address 42. This means we pass 42 to the method.

if the Method were defined as

public void foo(Dog someDog) {
    someDog.setName("Max");     // AAA
    someDog = new Dog("Fifi");  // BBB
    someDog.setName("Rowlf");   // CCC

let’s look at what’s happening.

  • the parameter someDog is set to the value 42
  • at line “AAA”
    • someDog is followed to the Dog it points to (the Dog object at address 42)
    • that Dog (the one at address 42) is asked to change his name to Max
  • at line “BBB”
    • a new Dog is created. Let’s say he’s at address 74
    • we assign the parameter someDog to 74
  • at line “CCC”
    • someDog is followed to the Dog it points to (the Dog object at address 74)
    • that Dog (the one at address 74) is asked to change his name to Rowlf
  • then, we return

Now let’s think about what happens outside the method:

Did myDog change?

There’s the key.

Keeping in mind that myDog is a pointer, and not an actual Dog, the answer is NO. myDog still has the value 42; it’s still pointing to the original Dog (but note that because of line “AAA”, its name is now “Max” – still the same Dog; myDog‘s value has not changed.)

It’s perfectly valid to follow an address and change what’s at the end of it; that does not change the variable, however,

Java works exactly like C. You can assign a pointer, pass the pointer to a method, follow the pointer in the method and change the data that was pointed to. However, you cannot change where that pointer points.

In C++, Ada, Pascal and other languages that support pass-by-reference, you can actually change the variable that was passed.

If Java had pass-by-reference semantics, the foo method we defined above would have changed where myDog was pointing when it assigned someDog on line BBB.

Think of reference parameters as being aliases for the variable passed in. When that alias is assigned, so is the variable that was passed in.

Copy Rights @

Keywords static and final in Java

static means the variable/method belongs to the class not an instance, so there is only one copy of this data shared between instances.
final is a method to define the variable/method having only one initialization, either in initializing or within a constructor.
A note on final methods and final classes, this is a way of explicitly stating that the method or class can not be overridden / extended respectively.

static variable:
1. A variable which belongs to the class and not to object (instance).
2. It is initialized only once at the start of the execution, before the initialization of any instance variables.
3. Syntax: Class.variable (no need to new an object)

static method:
1. It belongs to the class and not the object (instance)
2. A static method can access only static data unless it uses an instance of some class to indirectly access the instance variable.
3. A static method can call only other static methods  unless it uses an instance of some class to indirectly access the instance method.
4. Syntax: Class.methodName() (no refer to this or super keywords)

static class:
There is a static nested class in java. When you declare a nested class static, it automatically becomes a stand alone class which can be instantiated without having to instantiate the outer class it belongs to.

public class A
 public static class B

Because class B is declared static you can explicitly instantiate as:

B b = new B();

Note if class B wasn’t declared static to make it stand alone, an instance object call would’ve looked like this:

A a= new A();
B b = B();

static block codes:
It’s a static initializer. It’s executed when the class is loaded (or initialized).

static {
        private static Name = "blog";

final keyword
A final class cannot be subclassed.  All methods in a final class are implicitly final. This is done for security and efficiency reasons.

A final method can’t be overridden by subclasses. This is  used to prevent unexpected behavior from a subclass altering a method that may be crucial to the function or consistency of the class.

A final variable can only be initialized once, either via an initializer or an assignment statement. It does not need to be initialized at the point of declaration: this is called a blank final variable. A blank final instance variable of a class must be definitely assigned at the end of every constructor of the class in which it is declared; similarly, a blank final static variable must be definitely assigned in a static initializer of the class in which it is declared; otherwise, a compile-time error will occur.

public class Shirt {
static final String color = "Black";
public class Test {

public static void main(String args[]) {
    System.out.println(Shirt.color); //should provide output as "Black"
            Shirt.color = "white"; //Error because the value of color is fixed.  
    System.out.println(Shirt.color); //Code won't execute.

final static String a = “test” or static final String a = “test” ? 
They are the same as order in keyword doesn’t affect the functionality.

Simple DVD Inventory Management System

I have been reading a data structure book bought about 6 years ago.

I came to a programming practice to write a DVD Inventory Management System.

I finished the coding @ 

I downloaded the Top 1000 movies must see from IMDB, and built a database to store them.

It is pretty raw, next I want to create  a web app top 1000 movies must see todo list, trying to grab the ideas of Node.js.

Experience in Writing Lots of JavaScript for Web App

I am working on revamping a web application for the past few months by myself.

Re-design the UI and Re-code the logic to make it nicer,faster, and maintainable.

But I don’t know how, and I code alone.

This is poorly managed web app, and its JavaScript codes go beyond 20000 lines in a single file.

Many people have edited the codes, and added in many functionalities.

Company hires interns to do the coding, and many of them really don’t know how it works.

Right codes copied, and so were the buggy ones.

It works so far, although it is very ugly.

My consideration is to re-write this web in a module pattern, and keep the core functionalities away from growing requirements.

Basically I try to adapt the JavaScript Module Pattern, and use RequireJS to manage the dependencies.

I also use Object literal notation to manage global values in each module.

I didn’t integrate RequireJS with jQuery for AMD.

I used script tag for jQuery and for other external libraries depends on global jQuery.

The structure likes the following:

init.js  => RequireJS data-main mapping JavaScript
config.js  =>  configuration of global data
util.js => helper functions
core.js  => core logic
ux.js => UI handling
lib/jquery.js, googleapi.js, googlechart.js etc

Inside init.js:

var APP = {}; // define a global value for app
//do init function call in core

Inside config.js:

define([],function(){ = {

Inside util.js,core.js:

define ([‘config’,’core’,’ux’], function(){
var local = ‘’;
//here can use all values in, APP.core, and APP.ux
//avoid using ‘this’ in any function but instead APP.util if calling internal functions
APP.util = {

Inside core.js:

define ([‘config’,’util’,’ux’], function(){
//here can use all values in, APP.util, and APP.ux
//avoid using ‘this’ in any function but instead APP.core if calling internal functions
var local = ‘’;
APP.core = {

As you can figure out that you can add in modules or separate module in to small ones as many as possible.
And you don’t need to worry about their dependencies.

One thing to note is that if you don’t declare global values:
For example, inside util.js:

APP.util = {
var div = $(‘#id1’);
var html = ‘<button onclick=“this.f2(’a’);”></button>’;
//error here. ‘this’ refers to global window, and won’t find f2 function
//should use onclick=“APP.util.f2(‘a’);”
f2:function(a){ alert(a); }

Or you can do:

var div = $(‘#id1’),doc = document;
var btn = doc.createElement(‘button’);
btn.onclick = function(b){
return funciton(){ f2(b); };

Use global values can save a lot of coding for dynamically creating div elements and binding corresponding event handlers, although I don’t think this is a good practice.

JavaScript Module Pattern
JavaScript Design Pattern