Skip to main content

Ivan Teoh

Something personal yet public

Last weekend, Beijing weather was very good. I decided to grab this golden opportunity walking around Qian Men East. Qian Men was renovated and turned into walking street. I took hundreds of photos. I will write some explanation on each of the photos. Qian Men (前门) is the gate that separating between inner "Man Chu (满族)" city at north side and outer "Han (汉)" city at south side. That day I decide to visit the south east of Qian Men. There are lots of small alley (Hu Tong, 胡同), just like a maze. Without a map, I believe I will lost inside. The most interesting part, I would said is the Qian Shi Hu Tong (钱市胡同). It is a very narrow alley, about 70cm. It was designed preventing thieves from easy escape.

First time I saw this old fashioned taxi on the road in Beijing. I only saw this kind of taxi in old times shanghai films. I can’t believe I saw it’s running on the Beijing street with my own eye.

It is weekend, I finally got some spare time for uploading the photos that were taken during visiting Tang Jie's art studio in Back Street (后街) Art Zone, Beijing. It was a lovely day. Blue sky and warm yet windy day. Tang Jie also introduced us to other artist in the neighbourhood. All of them are very friendly and shown us their art creations. Awesome experience.

Yesterday I did a silly mistake. I misunderstand CSS Comma Syntax. This is the original edited code.

84-style.css (Source)

div.entry-content h4, h5, h6, p {
    margin-bottom: 5px;
}

I looked at it carefully and debugged using <a href="http://getfirebug.com/" title="http://getfirebug.com/">Firebug</a>. I mentioned the div class, entry-content, for the paragraph. Why it is still affecting the header paragraph? After I split the CSS code, I understand it clearer.

84-style-before.css (Source)

div.entry-content h4 {
    margin-bottom: 5px;
h5 {
    margin-bottom: 5px;
h6 {
    margin-bottom: 5px;
p {
    margin-bottom: 5px;
}

The code below is the correct solution. I should mention the div class, entry-content, for every tags after the commas. So sometime, short cut syntax can cause more mistaken occurred.

84-style-after.css (Source)

div.entry-content h4, div.entry-content h5, div.entry-content h6,
div.entry-content p {
    margin-bottom: 5px;
}

After I knew about Processing.js, "WordPress header animation with Processing.js" is in my to do list. I finally get it up today. I studied and modified the current header animation from Processing.js. I hope I can create more advance and impressive animation in future. Below is the modified code as reference.

82-theme.html (Source)

    <script type="application/processing">
    // Build float array to store circle properties
    float[] e = new float[5];

    // Set up canvas
    void setup(){
        // Frame rate
        frameRate(15);

        // Stroke/line/border thickness
        strokeWeight(1);

        // Initiate random values for circles
        e[0] = random(width); // X
        e[1] = random(height); // Y
        e[2] = random(20, 90); // Radius
        e[3] = random(-.5, .5); // X Speed
        e[4] = random(-.5, .5); // Y Speed
    }

    // Begin main draw loop (refresh 15 times per second)
    void draw(){
        // Fill background black
        background(0);

        // Cache diameter and radius of current circle
        float radius = e[2];
        float diameter = radius / 2;

        // Disable shape stroke/border
        noStroke();

        // Fill with green colour
        fill(#98c92a, 100);

        // Draw circle
        ellipse(e[0], e[1], radius, radius);

        // Move circle
        e[0] += e[3];
        e[1] += e[4];

        /* Wrap edges of canvas so circles leave the top
            and re-enter the bottom, etc. */
        if ( e[0] < -diameter         ) { e[0] = width + diameter;  }
        if ( e[0] > width + diameter  ) { e[0] = -diameter;         }
        if ( e[1] < 0 - diameter      ) { e[1] = height + diameter; }
        if ( e[1] > height + diameter ) { e[1] = -diameter;         }

        // Set fill color of center dot to white.
        fill( 255, 255, 255, 255 );

        // Turn off stroke/border
        noStroke();

        // Draw dot in center of circle
        rect(e[0]-1, e[1]-1, 2, 2);
    }
    </script>
        <canvas id="navCanvas" ></canvas>

Old Internet Explorer, version 6 and earlier, intend to be different from the rest, Mozilla Firefox, Opera, Safari and Chrome. This style sheet is to fix old Internet Explorer Cascading Style Sheets bugs. Add display: inline; in floated division element will fix Internet Explorer double margin bug. Add height: 100%; to make sure main division extended to 100% and wrapped both container and sidebar divisions.

81-style.css (Source)

/* *** IE (all versions) *** */

/* Gets rid of IE's blue borders */
a img {
    border:none
}

* html div#content {
    display: inline;
}

* html div#main {
    height: 100%;
}