How to Animate Simple Text Change in ReactJS

I wanted to show the fade in effect for the text change on an element in ReactJS. I looked into ReactCSSTransitionGroup, and noticed it could not serve my need. ReactCSSTransitionGroup does very well animate the added and removed DOM node. If I just want to animate a text change without a DOM change, I will need to find a new solution.

Finally, here is my solution:


@-webkit-keyframes jump {
  0% {
    opacity: 1;

  50% {
    opacity: 0

  100% {
    opacity: 1;

.jumpie {
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;

The parent component sending down the text change.

module.exports = React.createClass({
  getInitialState: function () {
    return {
      counter: 0
  componentDidMount: function () {
    var self = this;
    setInterval(function () {
        counter: self.state.counter + 1
    }, 2000);
  render:function () {
    return (

); } })

The child element animates the text change.

import React from 'react';

module.exports = React.createClass({
  getInitialState: function () {
    return {
      text: this.props.text

  componentDidMount: function () {
    React.findDOMNode(this.refs.jumpie).addEventListener('webkitAnimationEnd', function () { = '';

  componentWillReceiveProps: function (nextProps) {
    var self = this;
    if (nextProps.text !== this.props.text) {
      React.findDOMNode(this.refs.jumpie).style.webkitAnimationName = 'jump';
      setTimeout(function () {
          text: nextProps.text
      }, 500); //This is half the animation time we defined earlier in the CSS animation

  render: function () {
    return ({this.state.text});




Creating a Website with 99 Cents

I recently built a website for collecting funny stories of kids. These stories are as short as one liners, which collected from social media. It is not only for fun, and at the same time I would like to do a series of experiments on it. This is also my first time of building something end to end for myself by myself. I have been working on for 3 weeks, one hour per day, and have learned many many things.

Nowadays, it is so easy and so cheap to build a website. Many companies provided PaaS. Domains are so cheap. Here is my combination:

  1. Domain from GoDaddy – 99 cents/year (Purchased through mobile, much cheaper than website on desktop)
  2. Hosting from OpenShift – Free tier with 3 gears (So far I only use 2 gears, NodeJS and MongoDB. Need at least 1 ping during 48 hours to get the host running)
  3. Google Analytics – Free (I have seen great experimental results.)
  4. Back End Tools – Free (ExpressJS, Passport, MongoJS or Mongoose etc.)
  5. Front End tools – Free (Bootstrap, Font Awesome, etc)

Because I know JavaScript much better than other languages. NodeJS is easy. MongoDB is easy. The Front End tools are so convenient that I’m worried that people will not need FE engineers any more. 🙂

Here is the website Funny Kiddo. Hope you can enjoy it.



[Deep Dive] var foo = foo || {};

var foo = foo || {};

I came across this line several days ago while doing a code review for a colleague. I never used this before. First, I questioned him on whether this would work. I thought it would an exception saying “foo is not defined” if foo is not declared. Then I tested it, and was surprised I was wrong. This line is perfectly working fine.

After allowing this line twisting my brain for a little while and do research on hoisting, here is my understanding of this line.

That line becomes:

var foo;
foo = foo || {};

If foo is previously declared, foo is redeclared at the TOP of the scope, which is OK in JavaScript, and keeps the same value.

If foo is not previously declared, foo is hoisted inside this scope. As foo is declared and undefined and {} is the fall through value, foo will be {}.

The brain twisting part is that you can redeclare variables in JavaScript.


Interesting UI Problem

Today at work I came across an interesting UI problem:

One box stacks on the top of the other. The height of the outer container is controlled by the window size. When the window is short, the height of the top box is fixed, and the height of the bottom box varies; when the window is tall, the height of the bottom box is fixed, and the height of the top one varies.

I kept thinking of using min-height or max-height together with absolute positioning to solve this problem, but the real solution to this problem is to use media query min-width.


Try resizing the window, and you will notice the smooth transition.


jarsigner not working for signing or verifying APK


I tried to manually sign the APK, using:

$ jarsigner -verbose-sigalg MD5withRSA -digestalg SHA1 -signedjar<output.apk><input.apk> somealias

but the jarsigner always had errors, like:

jar signer error: gnu.javax.crypto.keyring.MalformedKeyringException: incorrect magic

Also, I noticed that the version of jarsigner I was having did not have -sigalg and -digestalg attributes.

When I tried to verify a APK,  using:

$ jarsigner -verbose -certs -verify my.apk

The error I got was:

Signature Block missing for ANDROIDD


Signature Block missing for CERT

It was not very clear to know where the problem was.


Update to JDK7.

Looks like jarsigner does not work as expected if you use JDK 6 to sign your Android APK.

Make Boxes In Columns

BTW, I scored 1 wobbly ball at our Friday Golf Tournament (A weekly team event)!

My colleagues often come up with great questions, and those questions are usually great challenges. Today, the challenge is, how to align a list of boxes (e.g. div’s, li’s) into 2 columns. When the first column reaches the bottom, the next box will be at the top of the second columns. Traditionally, with CSS2, from my experiences, it is impossible to do unless you have some logic running at the server side to draw the boxes in a particular order. With CSS3, I regret about saying no so easily.

Here is something I got after playing with it:


<div class=”container”>


 .container {
    width: 400px;
    color: #fff;

.container div {
    width: 200px;
    height: 200px;
    float: left;
    clear: left;
    font-size: 40px;

div:nth-child(odd) {
    background-color: blue;

div:nth-child(even) {
    background-color: red;

div:nth-child(n+4) {
    float: right;
    clear: right;
    position: relative;
    top: -400px;

Demo on jsFiddle

Pure CSS Star Rating System

I often asked interview candidate to build something, and at the meantime I wish they should present something different – something using pure CSS3. JavaScript can do everything related to user interaction, but a lot of developers have not noticed how powerful CSS3 can do.

I believe there are many other ways to implement this star rating system. Here is a piece I wrote today using radio buttons.


<div id=”container”>
<input id=”star-1″ type=”radio” name=”star” />
<input id=”star-2″ type=”radio” name=”star” />
<input id=”star-3″ type=”radio” name=”star” />
<input id=”star-4″ type=”radio” name=”star” />
<input id=”star-5″ type=”radio” name=”star” />
<div id=”stars”></div>


#stars {
    height: 18px;
    width: 95px;
    background-image: url(stars-sprite.png);
    background-repeat: no-repeat;
    background-position: -98px -259px;
    position: absolute;
    top: 0;
    z-index: -1;
input {
    width: 15px;
    height: 15px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
input#star-1:checked ~ div {
    background-position: -79px -259px;
input#star-2:checked ~ div {
    background-position: -60px -259px;
input#star-3:checked ~ div {
    background-position: -41px -259px;
input#star-4:checked ~ div {
    background-position: -22px -259px;
input#star-5:checked ~ div {
    background-position: -3px -259px;
#container {
    position: relative;

Demo on jsFiddle

HackDay Retrospective

Last week, I pitched my ideas for the Search and Discovery HackDay at my company, and luckily both of my ideas got picked. I decided to take one and compete for this event. I recruited two  of my colleagues to join me for this hack.

HackDay is intense. It requires good ideas, great skills and physical endurance, and of course leadership and team collaboration. At the same time, it is so fun and rewarding. It is like building your own business and implementing your own ideas in a quick way with low cost. That’s why I love this concept of HackDay. This was the second time I was competing for a 24-hour hackathon, and the first time I led a team for hacking my idea.

Here are the good and the bad (need to improve).


1. Planning early

I got the estimating skills from sprint meetings.

  • “Working backwards” (Write user stories)
  • Split the project into small actionable tasks;
  • Assign ownership;
  • Finish the learning/ramp-up tasks before the HackDay;
  • Have a check-in schedule;
  • Settle down the mock-up.

2. Checking in on time

Long span projects are easy to slip by due dates because of few check-in times. Check-in times make sure team members on the same page, and focus on reducing dependencies. Even we cannot finish the action items on time, it can be a good chance to communicate and gives us sense of urgency to finish the tasks promptly.

3. Teammates’ commitment

I was lucky that two of my team members made commitment to this challenge. Because it was out of work responsibility, I was really happy they stayed late with me to finish the work.

4. Refocusing quickly

My original idea was about an mobile app related to camera. Developing an Android app in 24 hours does not seem realistic. Luckily, I found an alternative solution using HTML5.

5. Great demo

The demo we had was really really good in my opinion. It was fun and engaging judges and audience.

6. Recruiting the right number

The maximum number of the team was 6, but I thought 3 was enough to complete this project. Bringing too many people on board might make the team hard to operate.


1. Trust

I wish I could trust my teammates more. When we were very tired, and realized we failed to finish items according to the schedule, I was nervous, and prepared to finish my team member’s task if he could not finish. However, it turned out he was slow because he was trying to find an automatic way to get the results. Of course, he provided a good result, but I wish I could trust him more and I could focus on my action items.

2. Making it work first

I was so sensitive to the way I wrote code, that sometimes it took me time to fix namespacing, styles, variables, etc. What it matters at the end is a working demo with a good user experience, which is only judges and audience can see. Focus on those first, and let go the minor things. When you get a working demo, now it is your time to refine everything else.

A Tip on Learning a New Tech

I just found out a good way to learn new technologies. Besides doing some Hello World stuff, you can go find out the most popular questions being asked about this technology on the web. They are popular and with the most votes on Stack Overflow, which means many many people encounter these problems, and you would probably have the same. The popular answers are in general very good, since they have been tested by many experienced developers.

One example about Mobile Web Development on Stack Overflow:

You can find out plenty of good questions and good answers! 🙂 They are good teachers!

Prototyping. Being Lazy.

Recently I got a chance of working across teams and making a project prototype. During the discussion I had with the development manager of the other team, he introduced to me a very interesting concept – Being Lazy. 

For prototyping, the goal is to write less code and quickly find the problems that need to solve. Especially for the projects with external dependencies, identify where the dependencies are, extract the part you should own and you have the full control of it, and notify the dependent teams what you need and how you consume their services, and you can move on. When you design your software, mock the dependency input, which unblocks you from any external dependencies. The prototype needs to be quick, and implemented with less code. There is nothing wrong about being lazy when making a prototype.

Prototyping is a trailblazing job. Hope this advice could help people focus.