Behind the Scene: How the PORTFOLIO/Blog is published

In Winter 1998, I enrolled into a Basic Computer Programming class during my Architecture Study in Tongji University, Shanghai, it wasn’t a required class, but it was my passion to computers and my curiosity about coding that sparks my interest.

The class was conducted in a medium-sized computer lab, where dozens of IBM PCs running Windows 95 were laid-out on every table in the room. There were not much interaction between each students and the teachers, he/she would narrate the content of the book—that we also read—and typed in the code for every bit of example snippet that demonstrate each functions.

One of the first program that we ought to write (or copy, to be more accurate) was a simple image display app. Screenshots of each step accompanied every corresponding code snippet/functions that were required to construct the entire app, the theory is, if you follow the book completely, you should have a working executable within 40 minutes. The teacher was kind enough to stretched the time to 120 min. 2 hours later, I have finally completed the executable, and proudly demoed it to the teacher. Only one problem: none of the function actually worked.

Instead of typing in the codes, I was busy redesigning the program’s interface completely, instead of listening to the teacher’s instruction, I was still busy decorating the program’s canvas with screen readable typeface (chinese characters has a different screen characteristic & size ratio). I was the only architecture student in the lab, and they all were amused with what I have produced, that was the last time I was in that class.

So that should illustrate my degree of fluency with computers; however technical or computer adept I have become, programming is not in my blood, I have always been a designer first, hacker later.


Coming into the 6th month since the first official post of this blog, there have been numerous minor & major upgrades behind the scene. I am by no means a web wizard, but like many others, I can copy & paste codes just fine; throw me in some samples, I should be able to hack my way into things. The web today is a complicated business, what was HTML then, it is now XHTML, AJAX, CSS, PHP, Ruby, jQuery, etc., and it keeps growing every second. But I’m not gonna go there right now, I’d just like to highlight a few additions to this blog since it’s gone live about six months ago.

This blog is maintained with the often limited but excellent WordPress web publishing platform powered by GraphPaperPress’ excellent theme engine. It’s a blog oriented system with a wide community base and large plug-ins support, it is neither a photo gallery app nor a full-blown content management system, but with a little extra work it can morph into any kinds of website, including a photo showcase/photoblog/page oriented website like the one you are reading now. Contrary to common perception, this blog is running solely on a single install base of WordPress despite its multifaceted nature; all gallery entries, blog articles & link posts are created from a standard WordPress posts, using a combination of specific page templates, categories & tags, navigational structures are constructed surrounding the cloud to divide the site into several different sections—like the one you see above (Home, Portfolio, Projects, Movies, Workshop, Blog, Contacts) as simple as it looks, it required a lot of trick to make the navigation scenario as natural, as simple as possible.

The Blog: The Articles & The Bookmarks

As you can see from the picture above, the Blog section now features two additional sections, Original Articles and Linked List, these two rounded up how I’d hope the Blog section should be, together with the Posts Archive page that I have put up months earlier. With that added, you can now browse individually between the longer, original piece that I wrote, or the shorter, more frequently updated of the Linked List—things I have discovered around the web that I find to be interesting/relevant to the soul of this blog. While the Posts Archive is a straightforward flat list index of every single posts on this blog, including entries to the Portfolio section.

Having to write mostly in English, a considerable percentage of the visitors of this blog come from non-english speaking countries, Google Translate or similar services would occasionally appear in the blog’s visit log, so to do justice, I also decided to add the translation tool from Google in the sidebar of the blog’s main page.

The Gallery: Portfolio Showcase & Image Display

What separates the gallery from the other post is the content it entails, a gallery post is a series of photographs attached in the body of a WordPress post, driven by an AJAX-based image display plug-ins, automatically displayed as gallery using the

shortcode; the one that I’m using is the Galleria WP by Y2 (Yokoyama Yasuaki).

A second type of gallery post is where a blog contains an image, by default, when a post has an image attached to it, WordPress will provide a link to the original image file that opens on a separate browser window/tab. I don’t like that, so I installed a second image display plug-in called Shutter Reloaded that modifies this behaviour, instead of an empty window, the plug-in will create an overlay frame wrapping around the image with a darken edges in the same page, upon clicking the image, the translucent layer will disappear, taking you back to the same page view.

Other TidBITS: Small things that matter

WordPress has an excellent RSS publishing engine, it can automatically create RSS feeds for each categories/tags/posts on-the-fly, problem is, it generates text output with a limited excerpt rendering engine (problem 1), and for more serious writers that uses footnotes & lots of linking, there’s no easy way of doing it smartly (problem 2)

I solved problem 1 with one of the excerpt plug-in, the one that I found suitable for this blog was the Advanced Excerpt, not only it modifies the RSS output, it also improves posts excerpt with a considerable amount of personalization.

An answer to my problem no. 2 was the FD Footnotes, which among other footnote plug-ins was most suitable to my taste.

The Inquiries page generates an e-mail to be sent to my address of choice using the Contact Form plug-in by Takayuki Miyoshi. Embedded movies are attached to each post with the help of the Viper’s Video Quicktags, Social linking tool is provided by the Tweet This, Socialite, Publish to Facebook and the Facebook/Twitter Status Updater and WPBook Facebook embedding plug-in.

As the site’s design takes to its final shape, I began shopping for a caching solution (WordPress is known to crash upon a huge influx of traffic–see below). I revisited WP Super Cache, and the latest updates brings total compatibility with my theme and plugins used currently, as of yesterday 08:00am the blog is serving you dynamically generated HTML cache of the original PHP version. If you run a blog and happen to use WordPress, Super Cache is a must-have if you want to run a secure & stable WP powered site.

From the Kitchen: Admin & Recipes

Behind the scene, the WordPress administration interface is nip/tucked with Ozh’ Admin Drop Down Menu. Drag & drop page management enabled with the addition of pageMash and HeadSpace2 custom-manages the meta-data to help with search engine optimization. To facilitate backup/restore, WordPress Database Backup, WP-DBManager would come to the rescue shall anything goes wrong, while WP No Category Base and YARPP related posts plug-in helps you find articles/contents easier.

There are much that can be improved with this site, but my hands & time are required somewhere else offline, I’d rather spend my free time creating content rather than busy building machines that generates it, I’d rather drink my coffee and sleep like a baby rather than being sleepless hacking codes. But as far as blogging & photography are concerned, they are the two that keeps me sane dealing with the insanity of our daily lives.


  • DISQUS commenting system is in effect replacing WP’s built-in & AJAX WP Plugin
  • WP Super Cache is now in effect on serving the blog’s dynamic pages 1 HTML page at a time. (here’s why: Anatomy of a Fireball The 23x Blog via Daring Fireball