Jiangyue Zhu

Impossible is Nothing


Leave a comment

True Color

This Saturday, I took my girlfriend to Alcatraz, which was an horrible prison and got abandoned in 1963. My girlfriend, Christina, has studied in SF for 2 years but never been on that island. While, I have ever been there once, which was 5 years ago when I traveled with parents during my junior year’s summer vacation. There is one famous quote about Alcatraz, “Break the rules and you go to prison, break the prison rules and you go to Alcatraz..”.

Personally, I still cannot find out the connection between such a terrible place and the most famous city around Bay Area, California, the city with art and peace. I can see the surprise from my girlfriend’s eyes, and I am sure she was shocked by all the things she saw.

It took us 2 hours to finish the whole tour, and finally went back to “harmony” – Pier 39. It was raining, light, but in the sun. At a sudden, I noticed this beautiful rainbow across the sky.

rainbow

As far I remembered, this is the second or third time seeing a rainbow after raining( I am 25, about to be 26 in next two days). It is never too tired to checking out something beautiful. At that moment, really, there is one song lingering in my brain,

“I see your true colors, shining through”

“I see your true colors, that’s why I love you”

“So don’t be afraid, to let them know”

“Your true colors, true colors, are beautiful, like a rainbow”


Leave a comment

Greedy Snake Game–Using HTML5 Canvas and JavaScript

A couple weeks ago, I used HTML5 canvas and JavaScript, jQuery to implement a greedy snake game. The logic is pretty simple, compared to some complex animation game. And the all of the implementation is based on HTML5+JavaScript+CSS, without any usage of Flash.


snake

The UI is simple but the functionality is working fine, what the users need to do is to use keyboards(up-arrow, right-arrow, down-arrow, left-arrow) to control directions of the snake. The score will be recorded once the snake hit the targe and the snake’s size will be auto-increment. The game will end if the snake hit itself or the edge.

The source code can be found on GitHub: https://github.com/zhujy8833/Snake

There is another version which I put in jsFiddle: http://jsfiddle.net/zhujy_8833/bRMjV/

Click Here to view the live demo.


Leave a comment

Javascript OOP

It is true that javascript is very different from other programming languages, so maybe that’s why lots of people even professional programmers don’t think javascript is a good language and don’t understand it well. A year ago, I had the same feeling, but after I started my work of front-end web development and read the book “Javascript: The good parts”, I have to say I am falling in love with this beautiful and powerful language. One of the most beautiful part of javascript is its prototype property, which makes the inheritance easily.

First of all, we must know that every object in javascript has an internal prototype property(in order to distinguish it with function’s external prototype property, I would use [prototype] to denote internal ones). There are three ways that you can use to create an object:

1. var obj = {};
2. var obj = new Object;
3. var obj = Object.create(null);

All of these three ways are equivalent in creating an empty object. Once the object was created, it will have that internal [prototype] property, note that [prtotype] is still an object so it also has internal prototype prototype property of which value is the object that is inherited from Object’s external prototype. How can we access to the internal [prototype]? A standard way is to use Object.getPrototypeof(), the other way that you can use is the __proto__ property, but I think it is only built in Chrome.

Function is also a kind of object in javascript, but function has an unique property which is the external prototype.  This external prototype property is the important key for us to implement OOP in javascript. The normal way of implementation of OOP is like this:

function Person(){
    this.name = "Tom";
    this.age = 23;
}
Person.prototype.run = function(){
    console.log(this.name+" is running! ");
}
var p = new Person();   //this will create an instance of Person
p.run();

Now, let me explain the above codes:

You may ask what happened when we use the new keyword. Actually, when new keyword is used, three things happened:

1. An empty object is created, just like {}, very simple.
2. It sets the function’s prototype property’s value to the instance object’s internal [prototype], so here, we can say
      p.__proto__ = Person.prototype
3. The function’s constructor will be executed, in which the constructor is the constructor in that function’s external prototype. Then the instance will replace this in the constructor. In this example, p will have property name and age.

Oh, here is another thing I need to mention. When access to a property of an object, it will firstly detect whether the object has the property directly, if not then goes to its [prototype] ,if still not, goes to [prototype]’s [prototype]…until reaching the root and return found or not found. That’s another important concept in javascript, called prototype chain.  In the above example, it is easy to find the property ‘name’ and ‘age’ as they are directly attached to that object. But if we want to check if the object has ‘run’ property, since it is not attached to that object directly, we need to go deeper to p.__proto__ which is inherited from Person.prototype(Remind!), now we find ‘run’.

The problem here is that why we do not put ‘run’ in Person’s constructor directly? Why we attach it to prototype property of Person?

OK. if we put ‘run’ to the constructor:

function Person(){
    this.name = "Tom";
    this.age = 23;
    this.run = function(){
      console.log(this.name+" is running! ");
    }
}

It seems fine, right? Yes, it will produce the same result, but the problem is that this approach is not efficient. What I mean is that function ‘run’ will be redefined everytime when a new object is created, it does not share with other objects. But if we use prototype.run, then every object instance which inherits from Person will automatically have that function without redefinition.

Here are two links which are very good articles and a good answer from stackoveflow about ‘new’ keyword:

Two articles:

1. Learning JavaScript Design Patterns

–this is my favourite article, very good explanation about Javascript OOP and also good module pattern, helping us write good codes.

2. Object Oriented Programming in Javascript

–Good explanation about OOP, prototype, and how prototype chain works.

One good answer from Stackoverflow:

http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript/3658673#3658673

–I believe that is one of the best answer I’ve ever seen in Stackoverflow, precise and nice example


Leave a comment

Javascripts-The Good Parts

This is a talk from Douglas Crockford. He is the author of the book: Javascript-The Good Parts. It is true that Javascript does have good parts even though some people don’t believe it. From his book and this talk, let’s see why Javascript is powerful and good. Probably, we really overlooked some good features from this “controversial” language.


5 Comments

Development Team’s Programming Challenge

It is funny that our development team held a small-scale coding challenge. The challenge question is like:

Take an array of the form:

[[1, 4, 6, …],

  [3, 6, …],
[1, 1, 8, 5, …]]and sum each row, then multiply these sums. For example above the expected result would be (1+4+6) * (3+6) * (1+1+8+5)

It is free to choose any programming language to solve that. Here is my answer: (Using PHP)
<?php
$array = array(
array(1,2,3,4),
array(3,2,8),
array(4,6)
);function add($a,$b){
return $a+$b;
}
function multiply($a,$b){
return $a*$b;
}

function run($arr){
$return_arr=array();

$return_arr = array_map(function($row){
return array_reduce($row,”add”);
},$arr);

return array_reduce($return_arr,”multiply”,1);
}

echo run($array);

?>

Basically, I used array_map to apply callback to each of the elements in the original array in order to get the sum-up result for each row. During this process, I applied array_reduce() which can reduce the array to a single value using a callback function “add”.
After that I should get an array which stores the sum-up result for each row. For example, if the original array is [[1,2,3],[3,5],[7,3]], then at the end of this stage, we can get the outcome like [6,8,10].
Then the rest task is to multiply iteratively for this array. So, what I did was using array_reduce again, but this time I changed the callback to multiply() and also added an additional parameters as the initial value.
Note that if the initial value is lacking, then the output would be 0. Because at the beginning of the array_reduce execution, it would do something like 0*…. So no matter what the value we have, the outcome would be zero… So put in the third param here as the initial value. Then that’s it. The output would be 480 if using the example above


1 Comment

Implement a carousel effect by using jQuery

In this post, I am gonna share my experience of implementing a carousel effect just like slide effect using jQuery. I have ever done this using prototype.js. But, due to my own preference, I like do the same thing again using jQuery since it is really amazing, expecially for the animation part.

Basically, I wrote a jQuery plugin which enable elements invoke it easily. Before we do anything, we should have a HTML structure just like what shown below, presenting the basic contents we want to show.

For the css, please take this as reference:

In the <script></script>, access to the <section> element and call carousel plugin, then everything is set.
To view the live result, please click this url: http://www.sis.pitt.edu/~jizhu/carousel/index.html
And for the source code, please go to my repository located in GitHub: https://github.com/zhujy8833/Carousel
Thanks

					
		
	


Leave a comment

Survivor Game–PHP Programming

I did a PHP program as a coding test for one technical interview. The test was to use PHP to implement a function to play the ‘Survivor’ game. The game rule is like this:

You are in a room with a circle of 100 chairs.  The chairs are numbered sequentially from 1 to 100.At some point in time, the person in chair #1 will be asked to leave.  The person in chair #2 will be skipped, and the person in chair #3 will be asked to leave. This pattern of skipping one person and asking the next to leave will keep going around the circle until there is one person left… the survivor.

 

So what the function needs to do is to find out the survivor (which chair the survivor is sitting in).

My codes are like this:

<?php
/* Function remove consists of two args. One is the integer array, the other is
 * the token to control removal: 1--remove 0--not remove
 *
 * When there is only one element left in the array, then the survivor found
 */
function survivor($array,$rmToken){

 /**
 * if only one left, return it. The survivor found!**/
 if(count($array) == 1){

 return $array;
 }
foreach($array as $key => $element){
 /**
 * token equals to 1
 * Remove current element from array
 * set token to 0, continue loop
 */
 if($rmToken){ 

 unset($array[$key]); 

 $rmToken = 0; 

 }

 /**
 * token equals to 0
 * skip this element
 * set token to 1, continue loop **/
 else { 

 $rmToken = 1; 

 }

 }// end foreach

 return survivor($array,$rmToken); //recursive 

}

// create an array containing a range of elements, from 1 to 100.
 $arr = range(1,100);
$result = survivor($arr,1); //call survivor function, return result
echo "The survivor is sitting on #".array_pop($result);
 // print_r($result);
?>