2016年10月10日 星期一

Introducing ... React Polygon

Due to the need of my recent work, I have published a new library called "react-polygon" on here. It is my first react library and it did help me in many ways.

Here I wanna talk about something about this project:

Q1. Why Reactjs?
A1. Mmm.. There is no specific for it. The main reason is that the project inspired me is built in Reactjs I do want to take the advantage of it and build the helper for me. After it, I make it into a library which can help more people.

Q2. Why specified for Polygons? Isn't there is a D3.js already?
A2. I would say the D3 binding for Reactjs is not well supported yet which I cannot build my own polygon with enough customizations. Therefore I have to write my own polygon generator in Reactjs. Of course, if you are doing something with native Javascript support, you probably need the D3.js instead.

Q3. How good is your own developed "Polygons generator"?
A3. Not the best. But I do think it is good enough for general purpose. You can have a look at the demo here.

Q4. Any other business?
A4. Not a big deal right now as it is built into a stable version and I did publish it to npm now. You can check it here.

You know, this is my first public library ever and I dun really know what I am doing. In order to make this happen, I have to thank the boss of my previous project which inspired me for the idea of this library.

P.s. the library now gets 2 stars from other people. This is a great push for me to go forward.



2016年7月30日 星期六

Take a peep on Genetic Algorithm (a.k.a mimicking naïve evolution)

Pre

Since stuff didn't go that busy on these days, finally got a chance to take a quick look on the Genetic Algorithm (GA) and understand the basics of it. Before this, I was overwhelmed by the side projects as well as the internship. The side projects are mainly about the node app and stuff about html, javascript and css. More specifically, one is React app and another one is Angular app. Doing these two projects simultaneously seems over-killing. Anyway, this is the whole point of life, right?

Let's get right into it


You know, a peep doesn't give you the whole picture. I just watched two great videos which explain the algorithm quite well. 

  1. A open lecture from MIT: https://www.youtube.com/watch?v=kHyNqSnzP8Y
  2. A kinda book sharing of the Nature of Code (good book though): https://www.youtube.com/watch?v=6l6b78Y4V7Y
After these two videos, I got the full picture about the GA. However, it is becomes more and more complicated when the problem size and all the controls you could make to improve the accuracy as well as diversity.

There are a few terms which would be stuck in your head if you are going to look around the GA.

Fitness

A mathematical function (or map function) to evaluate how well the current population is. 

Genotype and Phenotype

Genotype is the data structure (or say the binary) of your population, just like the chromosome (or say DNA) in our body which determined the phenotype.

Phenotype is the physical representation of your genotype. You can imagine it as the iris, hair color, and height of humans.

Evolution

The whole point of GA is to mimic the evolution again in your problem space. There are some basic steps:
  1. Initialize the state or random generate some "creatures"
  2. Evaluate them by the fitness function
  3. Select some amount of population to survive according to some functions (can imagine as a simple probability that higher fitness would be more likely to be selected) [Natural Selection]
  4. Reproduce and Crossover the genotypes
  5. Mutate the genotypes according to a small probability
  6. With this new set of population, go back to step #2 and loop until the appropriate solution is found
Actually, GA is nothing like super fancy. But it sounds quite fancy and professional by itself. I will try to do a simple demo in the following weeks and try to dig more into it and see if I can find out anything special.

Post

After reading through these materials, I just felt like computer scientists are quite keen on mimicking the whole world (maybe be should say God?). Look at what we have today, the neural network, which is going to be competitive to human brains in the following years. So...should there any stance between this kind of mimicking and the nature? In the video, there is one interesting question asked if we put the same algorithm back to real life. Would that be possible? Of yes, that's why we can survive till nowadays. Stop until it grows? We may say "Stop before it starts".


2016年7月20日 星期三

De-the-bug, oh yeah!

Let the bug crawls!

"A bug is never just a mistake. It represents something bigger. An error of thinking. That makes you who you are." - Eliot @ Mr. Robot

Today, we just spent a half day to de-a-bug. This is a tough, really really tough bug. Let me tell you a story of this:

TL;DR

1. Last week, I found that the performance of one of the Power8 clusters for running the Spark is abnormal. Also, it is even slower than another Intel Xeon machine which has "worse" specs than this one. 




2. As the power8 machine has more cores and more memory, even the clock speed is faster than the Xeon machine, we totally have no idea on this issue. 

3. First, we tested with a simple Spark application but no luck. We tried to dig into each stage step by step to see the duration, write time and serialization delay sort of things.


4. After that, we put the focus on the JVM. We suspected that JVM would cause a performance difference as IBM Java and Oracle Java are used on Power8 and Xeon respectively. However, the performance still differed after installing OpenJDK on both machines for a simple Java sorting program.


5. As we did't have any idea on Java, we targeted on something more fundamental --- C.


6. Guess what? After dealing with the optimization flags and all sorts of CPU benchmarking, we concluded that even the Power8 has "higher" specs than Xeon, Xeon stills outweigh it because of an all-rounded functionality and optimized instructions set.




Oh, well ...... my suggestion is ...... don't buy something from a company which you would think whether it has been closed down already. :)

2016年7月16日 星期六

A new journey in Levyx, Inc and More

Turn a new page

After spamming all the companies and startups nearby, I finally got a position in Levyx, Inc. This is a great to place to work, hmm... not exactly only but learn much as well. Great place, nice people, awesome food and free environment make me enjoying here so much!


Diving into Big Data

One of the important goals for me to choose working here is that I can take this awesome opportunity to learn the things that I couldn't learn by myself in terms of resources, environment, and timing.

Before the work, I was told to get familiar with Scala which is a functional programming running on JVM. The reason is that the framework we are using now, the Spark is based on Scala (actually, it does support Python and R natively). 


Spark is a framework which emphasizes on the parallel processing of the data. When you start dealing with Spark, you will get overwhelmed with the term, "RDD" which is "Resilient Distributed Datasets". Because of the power of RDD, Spark could result in high performance in data processing as well as other application like Machine Learning and MapReduce.

Once more thing, I got the access to some "powerful" machines as well for the profiling. The "powerful" I talked here is about 60+ cores and 200GB+ memory with 3TB+ SSD. I will find a better way to utilize (or torture) these machines. 😎

Oh, by the way...

I am still in California for this internship. Yes, I will go back in September. See you guys there~~~


2016年6月9日 星期四

Build your own Speedometer!



**Disclaimer**
This is not a legit tutorial, but just a preview.

Recept of Speedometer


Introduction:

In my class of Embedded System, I decided to build a wireless speedometer for my bike since I didn't buy it for my bike.

Ingredient:

Atmel Atmega32 * 1
40 DIP socket * 1
8Mhz Crystal * 1
HC05 Bluetooth module * 1
Reed Switch * 1
Magnet * 1
9V Battery * 1
LM7805 * 1 (equivalent 5v regulator)
Perfboard * 1
Pin sockets * 1 bunch
Solder wires  * 1 bunch
Single-core wires * 1 bunch

Instruction:

1. Plan out your circuit diagram!!! Make sure you get the right side of the chip and other components (because I made a stupid mistake which made me re-solder everything).

2. Check you circuit diagram again and again. This can save your components second or third lives.

3. Put your components on the perfboard, but not solder yet. You may use some solder wire to hold the temporary position.

4. Hold your breath and solder them!

5. After soldering, check if the circuits are matched with your diagram.

6. Put the components on and ...... boom!

Result:


Besides the hardware, I have also built an Android app for the user interface:




For more information or code, you may have a look of there: https://github.com/peteroid/avr-study-projects (in the folder of bike-speedometer)

Stay tuned for the next awesome project!





2016年5月26日 星期四

Presentation for UCI HKN

Open Source Project

A blog plugin based on React JS.

Your Motivation

Take the chance to learn React JS and make myself the blog plugin.

Steps You Took


  1. learn React JS (obviously)
  2. setup npm: dependencies
  3. setup Webpack: ReactJS, BabelJS, webpack-dev-server
  4. setup Grunt: sass (css preprocessor), uglify (javascript minifior)

Challenges and Obstacles

New syntax for ReactJS (more than JS, more than HTML)


Vulnerable for Cross-site Scripting

Now using: https://facebook.github.io/react/tips/dangerously-set-inner-html.html
Because the output of the contents of a post from Blogger API is purely html......

Results

Main page of the blog

Content page of a post


Future Possibilities


  • Integrate with different blog provider: Tumblr, Facebook blog
  • Make it more modular

2016年5月3日 星期二

Youtube Translation failed :)

When I try to watch a video on Youtube, I found something interesting.


The view number is cropped. As a "web developer", of course, I want to find out the reason for this mistake. Effortlessly, the reason is ensured that they put the Chinese translation in the view counts and the element overflow the numbers into next line which is hidden because of "overflow: hidden".


When I try to prove my hypothesis, I go to the same website using incognito mode which doesn't contain any locale information so that the video should be shown as an international version.


Therefore, everything is resolved now! I think they don't really test with different kinds of language before deployment (you know, at least Chinese is one of the languages that most people used). Then, I am thinking that why Youtube would make such a small mistake. Thus, I test it with some smaller numbers and they work as below.



That means, if they did test with this feature, they only tested the video with the views less than 100,000. What the heck!?

Anyway, as a web developer, don't make this kind of mistake! And most importantly, test before deployment...... 🙃

2016年4月27日 星期三

I want to be a millionaire~~ So freakin' bad~~~

This is not gambling :)

Today I decided to resume one of my old projects: data crawling and mining on the Hong Kong Jockey Club!

From my past experience, it is quite hard to predict the result of a horse race as there are too many variants, such as the horses' and riders'. So I decided to change the subject from horse racing to Mark Fix......

First, let me introduce the "Mark Six" (六合彩):


The concept is like Powerball. There are 49 balls in total. In each draw, 7 balls will be picked random by the machine and one of them is called "special number". To win the first place, you need to guess all 7 numbers correctly. So, we will know the possibility is about 1/85900584 by simple math. 

This time, I will first crawl the data from the official website of Mark Six and then do some data-mining between the data and try to predict the result based on the findings. Except the basic calculations on the possibilities, I will also try to predict it through a neural network by representing the data as a series of binary numbers.

Data Crawling

To crawl the data, I take the advantage of htmlparser2 and shelljs. They are really handy. I do the prototype in a short time as the tools are really easy to use. (That's why I like Javascript very much 🤓) Shelljs will execute the curl commands and pass the standard output to the html parser. Then the parser will generate the database from all possible entries. For now, I just crawled 3000 draws from the site from 1993 to now. That's a special feeling. 🤑

Next, I will start to do the data processing part on python (most likely will use sklearn). Hope that I could be a millionaire somedays~~~


2016年4月24日 星期日

Please, don't cheat on me ...... my dear OPENCV

As I joined a class about the exhibition of digital arts, I get a chance to deal with something really handy about robotics and OpenCV. OpenCV is a power library for the image processing, such as facial recognition and objects detection. My goal for this project is to track a few robots' positions and estimate the velocity and orientations. Then send the information back to the robots and let them interact with "others".

However, I do have a hard time on the installation of the OpenCV. First, I tried to cmake the libraries from the source. But I found that there is a bug for the VideoCapture. Then, I switched to OpenCV 2 with homebrew installations. Soon, I found there are libraries missing in the version 2. That means I have to switch back version 3. Now, I am struggling with the unknown errors emitted in the terminal and tons of retries.

I will update once I got the library working... 😞


2016年4月21日 星期四

What would you do except waiting for luck?

I have tried a very annoying coding challenge yesterday. It's about guessing the random number of the output of Math.floor(Math.random() * 100 + 1). What!? Guessing the number? Even the possibility of doing that is only 0.01. That means you should get it to right in at most 100 trials. However, you know, we are engineers! So, we need a way of engineers to solve this.


Here is the link of the problem and the screenshot of it. ClickMeToTheProblem





Here are some of my trials: (in chronological order)

1. Make the guess to be the var of lucky_number. As expected, it throws out an undefined error because the checking is after executing my code.

2. Guess some numbers.

3. Make the guess to be a function so that it can be get the value of lucky_number later using something like eval('lucky_number').

4. Guess some numbers again ...... :)

5. Make the guess to be a lazy evaluation variable or function so that it can be in the scope of the expected number when it is evaluated.

However, none of these are working because I messed up with the scope. After a few trials, I feel like this problem is unsolvable. Then I tried to look at some discussions. I saw a person asking why the method of changing the kernel random method is not working. It did inspire me. Now, I know the answer ......


Just right before the declaration of my guess, put this magic code:

Math.floor = function (a) {
    return 1
}
var myGuess = Math.floor('hacked it :)')

This question is really interesting and funny to play around. I have spent about 2 hours on this simple question. But I feel like I am leveling up. @@






P.S. I thinking to `open source` this blog plugin which is built in react.js and make it handy for other people to plug in their sites. Let's see.





2016年4月19日 星期二

I am such a bad developer...

Since I arrived U.S., I started my journey of intern finding. After sending a bunch (approximately 30 ~ 40) of emails, résumés, cover letters and application, I received a few app test for me to prove that I deserve it.

This story starts with an app test that I have completed recently. I was told to complete a question on codewars.com. The problem is not that hard actually. Because there are a few different ways to complete it. However, I choose the functional-style to complete it. I dunno why I would do that in such functional style as the problem was asked on Javascript. After 60 minutes of working, I completed it in the last minute.

Here is the question:




The interesting thing about codewars is that I can look at others' solutions so that I can "learn" from them. I will post two answers for this problem underneath and see if you can guess which one is mine ;).

First

function maxSumPath(a) {
  // Your code here
//   console.log(a) 
  var sumList = getSumList(a,
    {
      max: {
        path: '',
        sum: Number.MIN_VALUE
      }
    }, '', 0, 0, 0);
//   console.log(sumList)

  return sumList.max
}

var getSumList = function(inputList, sumList, path, i, j, sum) {
  sum += inputList[i][j]
  // travse the arrays
  if (inputList && i < inputList.length - 1) {
    sumList = mergeMaxObjects(sumList, getSumList(inputList, sumList, path + '↓', i + 1, j, sum))
  }

  if (inputList[0] && j < inputList[0].length - 1) {
    sumList = mergeMaxObjects(sumList, getSumList(inputList, sumList, path + '→', i, j + 1, sum))
  }
  // end condition
  if ((i == inputList.length - 1) && (j == inputList[0].length - 1)) {
    // reach the end, return the object

    // check exist path
    sumList = setMaxProperty(sumList, path, sum)
    // compare the max path
    if (sumList.max.sum < sumList[path]) {
      sumList.max.path = path
      sumList.max.sum = sum
    }

    return sumList
  } else {
    // not the end, return the original list
    return sumList
  }
}

var setMaxProperty = function (obj, key, value) {
  if (typeof obj[key] !== 'undefined') {
    // exist a record
    if (obj[key] < value) {
      // set if sum is greater than the record
      obj[key] = value
    }
  } else {
    obj[key] = value
  }
  return obj
}

var mergeMaxObjects = function (obj1, obj2) {
  for (var path in obj2) {
    obj1 = setMaxProperty(obj1, path, obj2[path])
  }
  return obj1

}

Second

function maxSumPath(a){
    var p='',s=0,r=0,c=0,t=a.map(x=>x.slice()).slice();
    for(var i=0;i<t.length;i++)
        for(var j=0;j<t[i].length;j++)
            t[i][j]+=Math.max((t[i+1]||[])[j]||0,(t[i]||[])[j+1]||0);
        while(r<a.length&&c<a[r].length){
            s+=a[r][c];
            if(((t[r+1]||[])[c]||0)<((t[r]||[])[c+1]||0))
                [p,c]=[p+'→',c+1];
            else if(((t[r+1]||[])[c]||0)>((t[r]||[])[c+1]||0))
                [p,r]=[p+'↓',r+1];
            else break;
        }
    return {path:p,sum:s};
}



How's the guess @@?



Yes, the first one. Such long and unclear coding compared to the second one which is small and clean. (But I think it is a bit de-human. I thought it was the result of minifying.) Anyway, you can see how bad style I code......

This story can tell that I may be not that ready for an internship here. So, I should head back my home and find an internship for my next summer (?).




P.S. hope that I can at least get an interview!!!

2016年4月17日 星期日

Joining the family of React!

After attending the online course of React JS fundamentals, I added this blog component to this site using React JS. Here are some of my feelings toward React JS:

1. JSX is not a big deal
- Some people are arguing if we should put the html-like code, JSX in the javascript. I don't feel that this is a big deal as it is just like splitting the components up. The only I have to get used to is that some keywords are changed for the sake of reversed keywords of Javascript, like "class" and "className".

2. Ready for Single Page Application (SPA)
- As the library will pack the all the components into a single js file, this blog page can only include a single js library to sustain for the while blog application. The transitions between pages are purely powered by javascript (react-router) which can boost up the performance and keep track the whole state of the app.

P.S. actually, this is also a test post for the blog feature. 😏

2016年4月16日 星期六

"Hello World!"

Hello there! The first blog post is here!
As I am a "developer", I need to follow the tradition to say "Hello World" to all of you.

Actually, this blog is made for the plugin on my personal site. Thus, I will try different kinds of tags to test with the API of Blogger. See you on the other side!

I am bigger text.

I am colored text.

Here are my friends: bolditalicunderlinestrikethroughlink and highlight.

I am centered text.


a picture

a video