Hello there.

I'm a front-end developer passionate about cutting-edge technologies and impacting everyday lives. It's nice to meet you!

The new

I liked my old Peetahzee’s Blog quite a lot. It was my first major web design project, and it took quite a few iterations to get it looking right. It looked good, well, in 2008 standards at least. Just to give some context – border-radius wasn’t yet a thing back then.

I gave it a facelift in 2011 – call it v1.5 if you will – when I entered college and realized that portfolio websites matter to recruiters. was no longer just a personal blog anymore, but more so a professional representation of me as a developer. I put some CSS tricks on (oh how I loved inset box-shadow), got a new portfolio site going, and hoped that it would last for a few more years.

Much blue. So color. Very roundedcorners. Wow.

Much blue. So color. Very roundedcorners. Wow.

But of course, in this industry, hardly anything ever lasts for more than a couple of years. I soon got jealous of all my friends’ fancy personal sites and thought, hey, I can do better with my own site. I was very happy with myself when I redesigned my new resume – it’s clean, has a very “refreshing” look, and (I believe) helps people focus on the right things through graphics and typography. I wonder what it would look on a website.

Based on that, there are a couple of things I wanted to do differently:

  • Less blue. It’s still my favorite color, but it seems that when the entire page is blue, it is quite distracting
  • Dominant “featured image” – an image to sum up the contents of the post
  • Focus of the page is on the content. Sidebar is much less important
  • Some place for a one-liner about myself
  • Always-on nav bar
  • Responsive design
  • Some sort of scrolling magic

Ah, about the scrolling magic – I didn’t want to just be like everybody else who gets a full-screen-image-parallax-thingy-majingy on there and call it a day. I thought about what I want the visitor to see on the instant they first visit the page, and what they’d want to see after spending some time. One obvious example would be my face. It can really help the visitor identify that it’s my blog, but it can also get in the way of the contents of the blog afterwards.

The entire redesign took me about two weeks from mockup to final implementation, and I’m quite pleased with the results. As a bonus, under this new design, I feel like I can have more flexibility when designing individual pages in the future (for example, the portfolio page.) I have some plans for that and can’t wait to get started on that.

Any comments or suggestions? I would love some feedback!

Openness: what I enjoyed most in Google

(Just got back from Hong Kong, and extremely jetlagged. Why am I up at 4 in the morning…)

As I step back onto the school grounds in a blazing 90`F LA weather, I couldn’t help but to think back that awesome summer I’ve had. The 10-week internship at Google flew by like a blink. I’ve made some great friends, met some amazing people in the company, and walked away learning a lot of new things I wouldn’t even have heard about otherwise.

It’s also time now to think about internships again. Lately, I’ve been picking up on reading in blogposts, articles, and journals about work experience at different companies. I seem to have found a trend in all these posts: innovation. This word appears everywhere. Don’t get me wrong – it’s an amazing vision and mission to have, one that I often share and enjoy working for; but when everybody has it on their profile pages, what makes them different?

In a lot of ways Google’s innovations exceed far beyond what others can even imagine: grand technologies like Google Glass and self-driving cars, and tiny details like empowering blind users through improving accessibility in their apps. But these weren’t what made me fall in love with working there; no, what did was the openness in its culture and empowerment of their employees – it’s an innovation in the workplace.

How so? Take this for an example. As a mere intern, I had access to almost the entire codebase of Google from every single project. Compare that to what I heard from my host, who has worked in Microsoft as a PM intern without any code access – not even those in his own project, this is pretty darn cool. With access to a codebase this big, there is no lack of resources for learning how to use certain technologies. I cannot think of a better way of encouraging Googlers to go outside their safety zones and learn from others.

Every Friday, employees and interns enjoy a very special treat from Sergey and Larry themselves in a company-wide all-hands meeting called TGIF. They’d present about a product Google has been working on, and then take questions from the audience – any question. When I was interning, there were questions ranging from “How is Larry doing?” (with regards to his illness) to “Why did we buy Meebo?” And with that, you can surely expect somebody from the exec team is going to give you a detailed and thorough answer, as if presenting the entire exec meeting to you. What’s more awesome is that the mic is even open for interns, and a lot of us have surely taken advantage of this opportunity. This has created an environment of trust, one that ensures employees of the most honest feedback from management and room for creativity.

This is extremely hard for any business to pull off. The amount of effort it requires the leadership team to be this open is extraordinary. But the effort isn’t unnoticed, as it has built an extremely unique and impressive culture all around the company. Undoubtedly, this, is what I enjoyed most in my time at Google.

(Disclaimer: I’m only speaking about what I’ve seen and heard during my internship, and in no way do I represent any of the companies mentioned here.)

Engineer fun.

“Here’s my algorithm. I check the page three times in an interval, and if I still giggle after the third time, then I’ll buy that shirt.” Laura, one of the engineers on the AdWords Front End team, was describing how she makes decisions on whether to buy a shirt on at the dinner table. My first reaction: wow, how much nerdier can everyday actions get?

“Did you have that algorithm tested?” Laughter follows.

Each day just seems to be filled with surprises like this, reminding me that I’m not the only one nerding out. It’s hilarious and somehow, weird, in a really enjoyable kind of way.

And not just that, we all have the weirdest obsessions. Laura and Luisa, my host, are insanely addicted to Triple Town. They’d send me a gift every a couple hours or so, inevitably dragging me into the game. (I swear it’s not my fault.)

Jeremy, another engineer here, is obsessed with a board game called Set. Laura brought it up during a picnic off-site just last week. The objective of the game was to  find a set of 3 cards matching or completely dismatching a set of attributes – pattern, color, number of shapes and texture. Laura and Jeremy went crazy on it. While us interns were still trying to learn the game, slowly trying to pick up the pace of the others, they’d be able to call out sets only moments after new cards are drawn. Heck, Jeremy even wrote his own web app allowing players to play this game online – he was telling us about it while bragging out how he knows random facts like “there are on average 2.7 sets in any 12 cards.”

All this happened with a conversation about how we can use Cobalt-60 to clean off sausages so that we can grill them in space for hotdogs. And how we are going to answer the Homeland Security’s questions when they find out what we’re trying to do: “But… but… but… all I wanted to do is to clean my sausage!”

And all of them, of course, love Star Wars. When they found out that I, along with 3 other interns, have never seen any of the Star Wars movie, they almost fainted. I think they’re now planning a Star Wars night, fully utilizing Google’s giant screens everywhere. Oh that’s going to be fun.

Userstyles Experiment #1 –

So I was just browsing Amazon the other day looking for stuff to buy (I guess you can call this the guy version of window shopping), and found out that I got the infamous redesigned interface. About time!

As much as I appreciated the new design and valued it much higher than the old one, there was still something missing. And I think I figured out why: It was wide! Looking at YouTube, Facebook, Google+ or most other popular sites* – they seem to all be fixed-width. And as a result, it was too hard to focus on the content when everything was so spread out.

So I started taking out Stylish and Userstyles, and started modifying Amazon to one that I’d like. But it turned out to be quite for the non-unified structure across all pages. They all have a header and a footer (actually, where the footer is placed in terms of structure is different each page as well), but each page has a different structure. Some are made of tables, some are made of divs, some are surrounded by a <center>, and others are a bunch of really complicated, overlapping table cells.

My immediate reaction was to use javascript to wrap the whole page up to one single div, have that div centered, and done. At first I thought it was a great idea, as I could keep everything simple with almost guaranteed success across the whole site – since it didn’t matter how the page structure was designed. However, there were some conflicts with that and the sciprts that the page came with, like the departments dropdown menu, so I had to look for an alternative.

I then went through every alternative of pages (search page, product listing page, account center, and so on) and tried to find a solution that fit each one of them and combined them together. It was simply painful. And because the solutions were so idiosyncratic to these pages, not all the pages could be modified.

But hey, at least those that I modified look great!

I encourage you to try download and put it on sometime (It supports most modern browsers), and you’ll soon notice a difference in your shopping experience. Trust me.

*Excluding Picasa, but contents adjust themselves so that they fill the screen; Gmail or Google Calendar – the flexible width provides more space for more content.

A note to self: Lessons from the WWW App

A week ago, I created an web app designed to aid ICS students in choosing their WWW trips where their friends are going. Like the app I created a while ago with courses, this idea came up from the millions of “where are you guys going?” wall posts on Facebook – why not just create a central hub for people to see where people are (or in some cases, aren’t) going?

Development took a little bit over a full day and made me sleep at 5am – something that I would have definitely not done normally. Could have took much less time had I not played with the various Facebook APIs, jQuery effects and aesthetic elements, but you know, it was worth it. I mean, in the end I took this mini project as an experiment in itself, testing what works and what doesn’t, and improve on the later products.

And here is my report.


Registering for ICS Tribal App

Because the ICS Tribal App is designed for ICS students only, there are several security measures taken to make sure that only ICS students/faculty join. We wouldn’t want to ask you for a personal email and stuff, so the best way for us to check is through Facebook’s built in network system. Which means, you’ll need to be in the International Christian School network to access to the App.

Click here to join in the App

There is a network setup on Facebook, but not very well known – only 81 people are on it. The rest are either in their previous school (I see a lot of AIS), Hong Kong, or are having trouble to join any networks. Follow this tutorial, and I’ll get you into the app shortly.

If you are not in the network, you’ll most likely see a message like this when you access to the app:

Some people might be able to resolve the issue through Network Settings in Facebook without any hassle, but others find it troublesome to change network. In that case, you’ll need to double-check the following settings:

Are you in any colleges/high schools currently?

  1. Click on “Profile” on top right corner
  2. Under “Education and Work”, click on “Edit”
  3. Remove your colleges records
  4. Update your highschool record to be “International Christian School (Kowloon City, Hong Kong)”, and set the year to be the year you’re graduating.  (For 09-10 school year, Seniors = 2010, Juniors = 2011, Sophomores = 2012, Freshmen = 2013)
  5. Save your settings

Check your Birthday

This is quite important, as somebody over 18 obviously can’t be in a high school network. If you don’t have it set, or set as something over 18 years old, you’ll need to contact Facebook to change it for you. Or, if you really are over 18 and are still in this school, you’ll need to contact Facebook as well.

Join the Network again

After the steps above are done, try to edit your network settings again. You should be able to see International Christian School in the Edit Network Settings screen.

If you don’t see it, please contact Peter Zhang at

The concept of the ICS Tribal App

I’ve realized the ICS Tribes App looks much more confusing than it is. I thought writing something about it explaining fully how the whole system is would be nice, so here it is 😉

When I designed the app, I spent a lot of time thinking about how I can make use of the already-awesome Facebook systems. That way, I don’t have to spend a lot of time on programming a nice interface myself, nor do I have to worry about the right security stuff – Facebook can take care them for me!

Showcase with Pages

After thinking a while, here’s what I decided: Facebook Pages! Each Tribe has its own Facebook Page, and that is where the tribes”showcase” their class. Through them, tribes can easily upload pictures and tell everybody about it through the fans system. Pages are where tribes basically showcase their work, and most likely where all the tribal points will be coming from (posting good pics, reflective stories, etc.)

While that is solved, another issue popped up: I need to somehow connect the pages together. And this is where the Page Tabs come in. With the “ICS” Tabs on each page, you can access the information about a tribe quickly, such as points and members, as well as links to other tribes too.

“Internal Communication” via App

In addition, there is also a separate part from the pages system, and it is the app itself. If you launch the app from Facebook menus, you’ll be able to see something like an announcement system. Although the whole system is still in progress, the part with advisory announcements is done. Advisories and Mr. Chan can easily setup advisory meeting times. And yes, that means no more posting “any advisory tomorrow” messages on Facebook. =)

Always Looking for Suggestions

So now, please do me a favor and start using the Facebook App! We’ll be running a few contests soon, but it’s never too late to start. =D

I’m always looking for suggestions. If you have ideas (be reasonable, please) that you think can help the ICS App Experience, please do tell me! Either by Facebook wall post, or commenting on this post.

Two Facebook Ideas I’m Planning to Work on…

After developing ICS Tribes, I find that it’s actually quite fun to make a Facebook App and share it with friends. It spread so fast it’s not even funny, which makes me wonder again at the awesomeness of Web 2.0 and Social Networks. I started thinking, how can I take advantage with it? I mean, from the way I vision it, there are a huge user base for Facebook already, and all I need is some really slight advertising, and the app will automatically grow rocket high.

But there is a problem as well. With that many apps already made on Facebook, I have to make mine really stand out and make the users really like it and find it useful. But how exactly do I do that?

Social Vocab

Let’s see… apparently people like apps to interact with their friends and stuff (look at Social Interview)… but I want to make something more than Social Interview; being a copy cat never works. I was studying Vocab for my SAT when I thought of that, and an idea immediately popped out – Social Vocab!

It’s still a very rough idea, but I think it definitely has potential. Basically, this app will allow the user to go through the friendlist and assign SAT vocabs on them. Let’s say, the app will pick a random person from the friend list, let’s say, Peter Zhang, and the user replies that Peter Zhang is scintillating (out of 5 vocabs optoins). During the process of assigning vocab, the user actually unnoticeably learned the word by associating the word with the object. Now, because of that, supposedly the user will think of Peter Zhang when they see the word “scintillating”, and remember its meaning as being “brilliant”.

Of course, there will be other tools to help the user memorize as well, such as flash cards, quizzes and maybe games; but the main point of the app really is about the paragraph above. The reason I think it will be successful is because, this app can easily spread by posting on other people’s walls (“You’ve been described as ‘scintillating!'”); more users will join, and eventually, I’ll be rich.

That’s So True!

Quite opposite to the idea above, this idea came from being annoyed by “Person A joined This Group and 7 million other groups” messages. I really hate it when people join these groups just because they think the name is true. By having a large group, group creators can now earn from putting ads in their group, and I simply think that’s not fair. Plus, you’re most likely going to be spammed for joining groups. Groups were not made to be used this way!

Therefore, in an attempt to bring back the clean Facebook without the joining group messages (yes, I do know I can filter it out), I came up with the idea for “That’s So True!” App. Basically, in this app, the user can find phrases where they think it’s true, and join it. That way, people can discover the trends of what people think safely. No spams; no duplicates; no unfair advantages for anybody else. Also, people are going to find the “truth” so much easier, too.

What do you think?

I don’t really have time to develop these ideas just yet, but I will. Someday. What do you think about these apps? Will you use it? Why or Why not?

Getting started on ICS Tribes

First, let me welcome you to the amazing app of ICS Tribes. Through this app, you can communicate with your friends and schoolmates much easier than ever.

Registering is extremely simple, just fill out your advisory and your tribe roll, and then click on Submit. I mean, how hard can THAT be?

Now, If you are the first one to register in your tribe, you’ll be prompted to create a page for your tribe. In that case, you’ll need a little bit more instructions.

1. Click on this link, you’ll be led to a Facebook page where you can create a Facebook Page. (Wait, did that make sense?)

2. Fill out the info as follows:

NOTICE: The name of Page has to be in this format: ICS*space**tribe*. If you do not name your page that way, the app won’t be able to recognize you. So, if your tribe is 9G2, enter ICS 9G2.

3. Click “Create Page”

4. You can mess with the Page’s settings later, but right now, let me get the app to recognize you first. Go to this page IN A NEW WINDOW:, DO NOT close the Page you just created yet.

5. Click on “Add to My Page”

6. Choose the page you just created

7. Go back to the Page, and click on “Edit Page”

8. Scroll down until you find ICS Tribes, click on “Edit”

9. Enter in your Tribe name. Click submit.

10. Go back to your page, and click on “+” on the tabs.

11. Choose ICS from the list, and… you’re done!

11. LAST STEP. Invite all your other friends to use the ICS Tribes. When they’re done, invite all of them to be admins of the Page so that they can publish things on the Page’s wall. More wall stories = more points = more prizes!

Happy ICS-Tribes-App-ing!