sheen effect image

Tze-chiu Lei

Web Developer


Category: Web Development

Catching Up

WOW!  I haven’t been blogging since 2012??  I’d better get back on it…

The GM portfolio image is WAY old now, so I’ll be updating that this weekend.

Quite a bit has happened since 2.5 years ago — I’ll have to think back and decide what’s blog-worthy.

One thing comes up immediately to mind though, and that’s Grunt.  I’m LOVIN’ how efficient it makes my development process.  I’ll do a dedicated post soon.

STAY TUNED!  😀 Redesign

TzeMan test site

I just started a redesign of my TzeMan music site.  The current site is looking outdated, and I wanted to use everything I’ve learnt so far at MRM Worldwide to improve the look-n-feel.

The desktop layout and functionality is almost done, but there’s still much work to be done for mobile.

Head on over to the test to see what I’ve got there so far, compare it to the current, and LET ME KNOW WHAT YOU THINK!

Thanks in advance for your feedback!

Hidden Heroes via Webbys’ Netted

Hidden Heroes

I discovered this nice Flash site through The Webbys’ Netted online newsletter, which I highly recommend…

Hidden Heroes is an online exhibition hosted by Vitra Design Museum to spotlight designers of common items in daily life.  The subject matter is what piqued my interest at first, but I also found the Flash work appealing and inspirational.

Not only am I learning about industrial design, but also getting great ideas for Flash development.  What more an I ask?  😀

Check it out, and let me know what you think!

HTML5/CSS3 code snippets

I just found a nice snippets site,, and it looks like a really helpful resource.

HTML5snippets.comI like the simplicity of the UI, the ability to request snippets, and the tag list.  I’ll definitely be checking this site whenever I do something new.

Let me know what you think!  My role at MRM Worldwide is becoming more high-level, taking me farther away from hands-on development work, so you’ll probably have more feedback for me than me for you going forward!  Remember to chime in!!  😀

Feature-Detection v. Browser-Sniffing

Whenever cross-browser support includes mobile, use browser-side feature-detection for styling/functionality, and server-side browser-sniffing for desktop/mobile content management.

Ever since I learned a few years ago that best practices discourage browser-sniffing for cross-browser support, I’ve been using feature-detection instead.  However, for mobile support my challenge goes beyond styling and functionality…

Because mobile data plans are expensive, I need to also manage the amount of content sent to devices.  Using feature-detection to hide desktop-only content from mobile browsers won’t help on this count — the device has already downloaded the desktop content and wasted that bandwidth, before feature-detection occurs browser-side.

What I needed for mobile support content management was server-side browser-sniffing.  I don’t think there’s any other way to manage what kind of content gets sent out in the first place.  This would enable me to send only mobile content to mobile browsers — the server would omit sending any desktop-only content, thus saving bandwidth.

Server-side browser-sniffing would also give me the option of redirecting mobile browsers to a completely different subdomain, say  For now though, I think I’ll stick with just one domain to preserve maintenance efficiency.

So, does the feature-detection best practice still apply?  Yes, but only browser-side and for styling and functionality.  For desktop/mobile content management, use server-side browser-sniffing.

Google could only help me to a certain extent on this topic, because most online articles would focus on only styling/functionality or only content management.  Browser-sniffing would always be discouraged in styling/functionality articles, but always cited as the only way to implement desktop/mobile support in content management articles.  It took me quite a while to figure out that the two categories of articles were not actually contradictory but rather complementary!  This is why I’m posting here, because I could see other developers scratching their heads like I did about this topic.

Hope this helps someone!  As always, please chime in and let me know YOUR thoughts!  🙂

JavaScript Double-Bang (!!): Good for Teamwork?


At first I thought it was a typo in the JavaScript — two consecutive exclamation marks (!!).  So did a couple fellow developers, until we Googled it.  Turns out this is actually a Boolean conversion shortcut, called a “double-bang.”

Instead of typing the following to check for an Object…

if (typeof someObject !== undefined) ...

you can just type…

if (!!someObject) ...

The inner “bang” converts your Object to a Boolean, and the outer one rectifies the converter’s negation side-effect.

Pretty cool!  I think i’ll start using double-bangs on my solo projects, but…

I’m not going to use it on team projects though.  Why?  The chances of some other developer deleting it by mistake are just too great — it just looks a lot like a typo!  You could include a code comment to clarify to the team what a double-bang is, but that’d defeat the purpose of the shortcut, costing more keystrokes than you saved.  😀

Sometimes, for the sake of the Team, it appears necessary to avoid those advanced coding techniques that carry risks similar to this double-bang example.  The process challenge I see here is, striking a balance between maximizing code performance/efficiency and minimizing team rework or code breakages.  To put it another way…

How do we empower our “Rock-Star” coders without leaving the rest of the Team behind?

Issue Tracking and Version Control: My new best friends!

I never thought I’d say it, but I’ve put all my solo projects on issue tracking and version control.  I used to think it was overkill, but after working enough projects these last few years I’ve definitely changed my mind!

Trac logoI revisited a few projects last year that had been inactive for months.  It was almost impossible to remember where I had left off or what I had been trying out previously.  Sometimes I’d remember what I was doing but not why, other times vice versa.  Having my projects now on issue tracking has saved me from this “project amnesia!”

I’m also finding that issue tracking enhances discipline in my coding.  Before, I often used to just make improvements wherever and whenever I saw opportunities.  That sort of development exposed projects to my perfectionist streaks, and I often had to trim my billable time afterwards because of all the “gold-plating.”  Issue tracking has put me back on “the straight and narrow” — do what is required and no more.  With large, complex enhancements, issue tracking’s also enabled me to organize development into logical phases/components, so that I could focus better when coding.

Subversion logoWith a couple projects last year, I had major enhancements to implement across all the application tiers.  It was a real headache working on a new feature over several sessions, only to have it break and not remember exactly what changes to drop. Worse yet, I’d make guesses at what to drop and end up dropping too much, sometimes breaking other features!

Version control was my aspirin.  Now with my project version-controlled, there’s no more racking my brain about what changes broke what, because I can selectively roll-back changes to troubleshoot issues, or if need be, roll back a whole range of changes for a phase in case of a big failure.

What’s more, version control gives me tagging and branching, which I’ve come to LOVE!  It’s very nice that I can create a development branch and develop a new feature without affecting the trunk.  Before, I used to make a separate copy of the site, develop the new feature, then manually copy-n-paste my new feature back to the original site — NOT very reliable!  Now, I develop a new feature in a branch while keeping it synchronized with trunk, then when the new feature is finished I just re-integrate the development branch back into trunk.  Badda bing, badda boom!

Yep, I used to think issue tracking and version control were for the big development houses, but no more!  They help me immensely with my projects, even the smallest ones.

Interested in giving them a try?  I’m using Trac for issue-tracking, and Subversion for version control, and both are free and open-source.