Frank Wu | frankjwu.com

My CS50 Section Slides

Frank Wu — Thu, 30 Jun 2016 00:00:00 +0000

Fall of 2015 introduced the whirlwind that is Harvard’s CS50 to Yale, quickly becoming “the most popular course in Yale College.” Providing a strong support network, particularly one spearheaded by other students, is one of the key pedagogical backbones of the course. At Yale, this took the shape of a team of 29 students hosting nightly question and debugging sessions, weekly 90-minute teaching sections, and a slew of other activities like a hackathon and the CS50 Fair.

I’ve compiled all of my personal teaching slides from the Fall 2015 semester below.

Slides

Here’s a breakdown of what was covered:

Section 1 (Supersection): exploring the CS50 Appliance (a customized Cloud9 workspace), basic Unix commands, data types, operators, conditionals, loops, functions — Video
Section 2: arrays, strings, ASCII, functions, command-line arguments — Slides
Section 3: the GDB debugger, asymptotic notation and algorithmic complexity, binary search, sorting algorithms — Slides
Section 4: Unix pipes and redirection, file I/O, memory management, pointers — Slides
Section 5: linked lists, hashtables — Slides
Section 6: stacks, queues, linked lists, hashtables — Slides
Section 7: chmod, HTML, CSS, TCP/IP, HTTP — Slides
Section 8: PHP, SQL, MVC — Slides
Section 9: Javascript, the DOM, jQuery, AJAX — Slides

Configuring Let's Encrypt and Nginx on EC2

Frank Wu — Mon, 07 Mar 2016 00:00:00 +0000

Let’s Encrypt is a new Certificate Authority that offers free TLS/SSL certificates. Now that it’s entered its public beta stage, I decided to experiment with installing and manually configuring a Let’s Encrypt certificate on a EC2 instance running Ubuntu 14.04, Ruby on Rails, and Nginx.

To get started, download the Let’s Encrypt client and run the built-in installer.

$ git clone https://github.com/letsencrypt/letsencrypt /opt/letsencrypt
$ /opt/letsencrypt/letsencrypt-auto --server https://acme-v01.api.letsencrypt.org/directory --help --debug

Update your Nginx configuration (probably /etc/nginx/sites-available/default) to allow web access to all files in the .well-known/ directory of your web root. This endpoint will be accessed by Let’s Encrypt to ensure that you actually have control over your domain.

location ~ /.well-known {
  allow all;
}

After updating your Nginx configuration, restart your server.

$ sudo service nginx restart

Add the following to /etc/letsencrypt/cli.ini. The webroot plugin will automatically generate the files necessary for the ACME protocol. Remember to use the correct web root directory (if you’re using Capistrano, this will probably be /home/deploy/yourapp/current/public) and domain names.

rsa-key-size = 4096
email = you@email.com
domains = yourapp.com www.yourapp.com
authenticator = webroot
webroot-path = /home/deploy/yourapp/current/public

We can now begin the certificate authorization process.

$ /opt/letsencrypt/letsencrypt-auto certonly --config /etc/letsencrypt/cli.ini --agree-tos

Update your Nginx configuration to take advantage of your newly-issued certificate.

listen 443;
server_name localhost;

ssl on;
ssl_certificate /etc/letsencrypt/live/yourapp.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/yourapp.com/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

After restarting your web server, your site should now be accessible via HTTPS.

Certificate Renewal

Let’s Encrypt certificates expire after 90 days to ensure security and to encourage automation. We can automate the certificate renewal process by creating a simple monthly cronjob in /etc/cron.monthly/letsencrypt.

#!/bin/sh
#
# Let's Encrypt renewal service

/opt/letsencrypt/letsencrypt-auto certonly --config /etc/letsencrypt/cli.ini --agree-tos --renew-by-default
service nginx restart

Test your renewal script. If you see a success message, you’re set!

$ sudo /etc/cron.monthly/letsencrypt

Flask and AngularJS Workshop (YHack 2015)

Frank Wu — Tue, 17 Nov 2015 00:00:00 +0000

My friend Mike and I recently prepared a quick Flask and AngularJS workshop for YHack 2015 (the first YHack in which the two of us did not serve as directors!). Our talk teaches basic backend and frontend web development via the development of a basic blackjack game.

Slides

Code

You can follow along on your own using our workshop code.

Squirrel Watching

Frank Wu — Wed, 19 Aug 2015 00:00:00 +0000

The following short story recently went viral in China. I’ve translated it into English, taking some artistic license in the process. You can read it in Chinese here (original author is unknown).

It’s a warm summer afternoon and a mother and her son are sitting side by side in the backyard. The son, at home from college, is buried in a book. The mother’s attention is fixed on the twin oak trees facing them, shading them from the sun’s unforgiving beams.

Suddenly, a squirrel hops down from the branches of the larger of the two oak trees, lands in the bed of mulch surrounding the tree, and promptly darts into the bushes. The mother turns to her son and asks him, “What is that?”

He looks up and murmurs, “A squirrel.” His gaze immediately turns back to the book.

The mother nods thoughtfully and watches the squirrel quiver in the bushes. A few moments later, she asks him again, “What is that?”

He reluctantly raises his head, follows his mother’s gaze over to the same bushes, and frowns. “Mom, I just told you. That’s a squirrel.”

Just as he is about to look away, the squirrel scurries over to the smaller oak tree. The mother points and asks yet again, “What is that?”

The son closes his book shut, “It’s a squirrel, Mom, a squirrel!”

Her eyes, fixed intently on the squirrel, do not notice her son’s annoyed glare. She smiles as the squirrel picks up an acorn and begins to nibble at it. Gingerly, she asks, “What is that?”

The son throws his arms in the air and cries out, “You’ve asked me the same thing like ten times already! It’s a squirrel, what don’t you understand?”

Without a word, she stands up and turns her back on her son. Confused, incredulous, and still fuming, he calls back, “What, you’re leaving?”

She holds her palm up, instructing him not to follow, and walks into the house. He turns back to the two oak trees. Amidst all the noise, the squirrel has scampered away. Sighing, he throws his book down in frustration.

A few moments later, the mother returns. In her hands is a small diary, corners frayed. She opens it up to a specific entry and hands it to him. “Read this.”

He reads:

December 17, 1995

Today, I took my two-year-old son to the park. While we were camped out in the grass, a squirrel scrambled near us. Twenty-one times he asked me, “What is that?” Twenty-one times I answered, “That’s a squirrel, honey.” And every time I answered him, I would hug him tightly… over and over and over. How could I possibly be annoyed by such pure innocence and curiosity…

Investigating the Relative Age Effect at Yale

Frank Wu — Tue, 30 Jun 2015 00:00:00 +0000

I just finished reading Malcolm Gladwell’s best-seller, Outliers. Naturally, I was curious about some of his claims and decided to do a little investigating of my own.

Gladwell starts the book by suggesting the existence of the following “iron law” of Canadian hockey: “in any elite group of hockey players — the very best of the best — 40 percent of the players will have been born between January and March, 30 percent between April and June, 20 percent between July and September, and 10 percent between October and December.”

Why would this be the case? It turns out that Canadian hockey leagues impose an eligibility cut-off date of January 1, meaning that a child born in January competes in the same league as a child born in December, almost an entire year later. These extra months of maturity, according to a study conducted by psychologist Roger Barnsley, give an unfair advantage to kids born earlier in the year — by virtue of being older, these kids tend to be larger, more coordinated, and more “talented” than their peers. Those that are deemed more talented go on to enjoy the rewards of better coaching, increased self-confidence, and more opportunities, creating a self-fulfilling prophecy that is driven entirely by an arbitrary cut-off.

This phenomenon is known as the relative age effect. And both Gladwell and Barnsley suggest that it occurs within academia and education as well. Like hockey leagues, schools have an eligibility cut-off date (usually, the end of summer) and often separate students based on relative merit (gifted student programs). To further this argument, Gladwell points to the research of economists Kelly Bedard and Elizabeth Dhuey, who have noted that “at four year colleges in the United States… students belonging to the relatively youngest group in their class are underrepresented by about 11.6 percent.”

With this knowledge in hand, I decided to poke around and see if I could find any interesting patterns at Yale, hoping to answer the following question: does the relative age effect impact your chances of making it to Yale?

Since I’m currently an undergrad at Yale, I have access to the walled-off Yale Facebook, a directory that contains basic biographical and contact information for all current undergraduate students. Here’s the scraped and compiled data, which includes the class of 2015 up to the class of 2019 (5565 students total, 5381 of which have their birthdays listed):

January: 475
February: 405
March: 468
April: 479
May: 461
June: 445
July: 446
August: 428
September: 443
October: 481
November: 425
December: 425

It seems that the relative age effect doesn’t apply: Yale undergrads are born evenly throughout the year, with a range of 76, a mean of around 448, and a fairly low standard deviation of around 25. And the most unpopular birth month is February, which also happens to be the shortest month of the year. If we adjust for the 10 or so lost days of February between the classes of 2015 and 2019, the data would show even less variance than it does now.

However, it can’t hurt to point out that the graph has three local maximums, two of which might be relevant to the relative age effect: one around October (close to the start of school in the Northern hemisphere), one in March and April (close to the start of school in the Southern hemisphere) and one in January (which I don’t have a relavant explanation for).

It’s also worth noting that according to data compiled by Amitabh Chandra of Harvard University, the second half of September is the most common time of year for U.S.-born babies (approximately 81% of the Yale population hold U.S. citizenship or permanent resident status), providing an alternate explanation for that particular local maximum.

There are, unfortunately, some limitations to what we can do with this data. The Yale Facebook does not list birth years, which makes it impossible to filter out students who may have entered school a year early, or who may have skipped a grade or two. However, if we assume that these kids do exist in the pool, we might be able to say that the relative age effect did not play a role in their development — that is, for the truly precocious, relative age differences do not play a major role in their educational development. This isn’t a certain conclusion, however, since the other side of the coin in not having birth years is that we also are unable to filter out students who may have purposely “redshirted” before starting kindergarten or who may have taken a gap year in between high school and college, thus making them older than their peers by the time they enter college.

But empirically, at least, it appears that most early age biases at Yale have been erased or never existed in the first place. ¹

Could it be that Yale admissions officers are familiar with the relative age effect and consciously adjust for this in their admissions process? This is possible, but probably unlikely.

Here’s another possibility: as mentioned earlier, 19% of Yale students are listed as international students. What if, out of this 19%, almost every student that attended school in the Southern hemisphere was born in the months of March and April, balancing out a presumably lower amount of students in the Northern hemisphere that were also born in those months? If true, this could have created the local maximum that we see in March and April. And while relying purely on geography is an imperfect filter for determining when school starts, it should at least give us a working estimate to play with.

When I went to test this hypothesis, I quickly discovered that this was not the case. Of the 83 students with addresses in the Southern hemisphere (Argentina, Australia, Botswana, Brazil, Chile, Indonesia, Kenya, Mauritius, New Zealand, Peru, Rwanda, Singapore, South Africa, Swaziland, Tanzania, Uganda, Zimbabwe), only 14 were born in March and April. The most common birth months were actually June and July.

The best explanation I’ve seen thus far comes from Maria Konnikova from The New Yorker. In her “Youngest Kid, Smartest Kid?” essay, Konnikova suggests that while older kindergarten students do benefit from their age, “by the time they get to eighth grade, any disparity has largely evened out — and, by college, younger students repeatedly outperform older ones in any given year.” Older students, she argues, become bored and complacent, while younger students embrace their underdog statuses and are forced to strive and push themselves harder, developing a work ethic that even Gladwell can appreciate.

Thanks to Jonathan Chang for reading a draft of this essay.

Note: this experiment only tests for the relative age bias. I am positive that there are many other biases and barriers in this data set that can not be explained solely by age. ↩

Single threading

Frank Wu — Fri, 17 Apr 2015 00:00:00 +0000

Hi, tomorrow is your sister’s birthday. You forgot mom’s.

Fuck.

My mother’s birthday was two days ago and I completely forgot. My sister’s birthday is tomorrow. Chances are, I might have forgotten her birthday too if my father didn’t text me a few hours ago.

How did this happen? With our fancy calendar apps and all their incessant push notifications, how could I possibly forget the birthdays of the most important people in my life? ¹

Here’s my lame excuse: I’ve been so busy preparing for finals, writing papers, and working on my projects that I literally wasn’t thinking about anything else. The notebook that I carry around in my back pocket hasn’t had a new entry scribbled in it in over a week. I’ve been living from day to day, from class to class, from assignment to assignment. And I’ve basically lost track of the concept of time.

I didn’t even know the date.

This is me running on single threaded processing — moving from one task to another and being so absorbed in it that I forget everything else important to me. It’s just too easy to lose track of things when you’re working on hard problems or when you’re working through a lot of stress. Naturally, you start to lose mental cycles.

But that’s just so dangerous, even if it only happens rarely: being so insular and so single-threaded makes you lose perspective on the world. The people I love are so much more important to me than schoolwork, my health is so much more important to me than my pride, and solving big, meaningful problems is so much more important to me than solving the problem of picking where to go for lunch.

I hope I’m never so single-threaded, so single-minded, and so insular in my thoughts that I forget about the bigger picture and everything else that’s important to me. I need to force myself out of these self-imposed bubbles and take in all the little details around me.

Because frankly, I’m ashamed.

Here’s the real kicker: I actually don’t have their birthdays in my calendar because I thought that it was impossible for me to ever forget them. It also just feels too impersonal and inappropriate for people so close to me. ↩

Great Products are Aspirational

Frank Wu — Fri, 27 Feb 2015 00:00:00 +0000

What makes a product like Instagram so much more such successful than other, similar photography apps? What makes Apple computers so much more popular in the public eye? What makes Moleskine the de facto notebook for creative types?

These questions have been discussed ad nauseum and many convincing answers have already been suggested: these products had superior branding, were well designed, launched at the right times with the right set of features, and were technologically better (okay, maybe not the Moleskine). They executed relentlessly, found the right initial set of users, and then expanded quickly to capture the rest of the general public. All of these answers are satisfactory, but I think there’s another deeper explanation for why these products are so successful.

Good products must be useful. But to be great, they must also be aspirational. ¹ Fundamentally, good products need to solve a problem; for the people that need them, they are utilities. If they’re better designed, better marketed, easier to use, and better timed than other products on the market, then the gears will be more greased for the product to succeed. But without achieving utility, even the best designed, best marketed products may not become massively successful.

To go from good to great, products have to connect with people who don’t necessarily need them. This means that they are aspirational products to those who don’t have the problem (yet!), but want to be a part of the group that does. Let’s look at some examples.

Instagram

Utility product: a mobile editor for photos (with a social network built on top)
Aspirational product: attracts everyday people with phones who want to have more interesting lives and cooler photos to share

Apple MacBook

Utility product: a laptop
Aspirational product: attracts creative types who want to use what their heroes use — for example, many musicians use Logic Pro, many directors and filmmakers use Final Cut Pro, and many programmers use Macs for its Unix-based OS

Moleskine

Utility product: a notebook to write in
Aspirational product: attracts people who want to write more, become more thoughtful, and seem more intelligent

Stripe

Utility product: a payment gateway that scales upwards
Aspirational product: attracts entrepreneurs who are currently building or are planning on building a SaaS startup or other online business

GoPro

Utility product: lightweight, mountable camera
Aspirational product: attracts people who want to live an extreme lifestyle

Product Hunt

Utility product: a place to launch your product and receive community feedback
Aspirational product: attracts a community of people who want to become creators and makers

So the product is 1) instantly useful to the people who need it and is 2) able to attract people who want to need it. Over time, many of these aspirational users may become utility users, allowing the product to continue to grow and expand its active user base. Aspirational Stripe users will build businesses that process so many transactions that they need the API to operate. By using their Moleskines more, non-writers will become writers (or at the very least, will consume more Moleskines as they attempt to write).

One could perhaps argue that superb branding creates this utilitarian-aspiration split, but I disagree. Building a product that has this sort of behavior will naturally lead to better branding, not the other way around, although I’m sure there are exceptions where better branding leads to aspirational desires.

Note that by “aspirational,” I don’t necessarily mean that they are so expensive that they are out of the reach of the general public. I mean products that people yearn to use and desire to become part of the ingroup of. ↩

Don't Sting Like a Bee

Frank Wu — Wed, 21 Jan 2015 00:00:00 +0000

Muhammad Ali’s “…sting like a bee” strategy is metaphorically flawed. It certainly worked well for Ali, but the real world isn’t a boxing ring. Here, it rarely makes sense to sting like a bee.

Yes, bee stings are painful, but unless you’re allergic to them, a bee sting is nothing more than a brief annoyance. But it’s much worse for the bee. Let’s assume that we’re talking about a honey bee: these bees have barbed stingers that tear off and become lodged in the victim’s skin, causing the bee to die. ¹

If stinging someone kills you, why would you ever do it? For a bee, stinging is a natural instinct: a bee stings when it feels threatened, releasing pheromones that will alert other bees to the impending danger. I think humans unconsciously behave much in the same way, but instead of dying when we “sting back,” we face unwanted consequences that could have been avoided with clearer thinking. We’re almost always better off not being too reactive when provoked. It’s better to take time to calm down, think things through, and then make the next decision instead of instinctively lashing out and striking back.

We often run into moments that test us mentally and physically, but the best thing to do is to persevere and to push through. Human nature is surprisingly flexible and adaptable: when presented with a barrier, we tend to find an ingenious way around it. Doing anything other than trying to make forward progress would be counterintuitive and counterproductive. Rather than instinctively blowing up, be it at ourselves, at someone else, or at a particular situation, we’re better when we transcend, when we accept what we’re given, and take things in stride.

In his State of the Union address last night, President Obama described this sentiment well:

My first duty as Commander-in-Chief is to defend the United States of America. In doing so, the question is not whether America leads in the world, but how. When we make rash decisions, reacting to the headlines instead of using our heads; when the first response to a challenge is to send in our military — then we risk getting drawn into unnecessary conflicts, and neglect the broader strategy we need for a safer, more prosperous world. That’s what our enemies want us to do.

I propose this same framework for managing a business: when provoked, don’t sting back. In a free market, one of the only guarantees is that there will be competition. If a new competitor enters your market or if an existing player unveils something that looks remarkably like something on your roadmap or something from your existing feature set, it doesn’t make sense to freak out and panic. It also doesn’t make sense to reactively change your game plan and become extremely defensive or aggressive. Don’t let someone else dictate your strategy!

Instead, it’s better to take a moment to sit back, evaluate the situation clearly and level-headedly, and then decide what to do. If a change in your product roadmap makes sense, then by all means make that change. But don’t change everything just because you feel threatened. Don’t sting like a bee. Be smarter, play by your own playbook, and keep going. That’s how you’ll eventually win, by being better, not by being the fastest to respond to conflict. ²

This doesn’t mean that you shouldn’t be spontaneous, it just means that you shouldn’t be rash. There’s a minor distinction between the two. Be spontaneous on a day-to-day basis by experimenting with and trying new ideas. Surprise and delight your customers when they aren’t expecting it. This is all fine. But when it comes to dealing with conflict and competition, don’t be too rash in your decision making.

This also doesn’t mean that you shouldn’t be confrontational, it just means that you should pick your fights wisely. There’s a time and place for “wartime” and “gathering the troops” in the “war room.” Most of the time, I’d argue that it’s not your battle to fight. ³

So sure, float like a butterfly, but don’t sting like a bee.

The stinger only falls off when the victim’s skin is thick enough. So bees can actually sting other things (like non-mammals) without dying. ↩
Paul Graham writes, “Startups don’t win by attacking. They win by transcending. There are exceptions of course, but usually the way to win is to race ahead, not to stop and fight.” ↩
For the most part, I agree with this tweet from Joel Spolsky where he writes, “can we stop with the ‘war’ metaphor? It’s a job. programming computers. That’s not what wars are.” ↩

What You Don't Do

Frank Wu — Thu, 26 Jun 2014 00:00:00 +0000

"Two roads diverge in a yellow wood..."

What you do is important and can define who you are and what you stand for, but what you don’t do is perhaps even more important.

When the norm is to do something a certain way, choosing not to do it becomes glaringly obvious. And often times, not doing something that everyone else does can be one of the best things that you can do.

When everyone is raising huge rounds and making headlines, the companies that succeed quietly like WhatsApp earn our respect. When the popular Silicon Valley motif is “college kid drops out to start an internet company,” the ones who don’t command our attention. When other websites are focused on increasing time spent on their sites, the search engine that decides to decrease it becomes the most viewed website in the world.

Not doing something that everyone else does can also be one of the worst things that you can do.

Perhaps one of the best examples is how the majority of VCs tweet and blog actively. Not tweeting makes a VC seem inaccessible or untrustworthy. In a field based on trust, communication, and positive relationships, not tweeting can be detrimental to a VC’s ability to source great investments. And that’s without considering how many potential deals they might not be hearing about by not being active on Twitter.

It’s necessary then to think hard about what you do, what you don’t do, and why. Sometimes, you’re forced to do things not because you want to do them, but because you fear the consequences of not doing them. But there are things that you can consciously choose not to do that will become a key, positive part of who you are or what your company represents.

If you’re willing to take that risk and bear the consequences, you might find a huge opportunity to differentiate yourself from the pack.

Let’s consider taxis. Taxi drivers are generally pretty serious and professional about what they do: after all, it’s their job. Uber prides itself on a similar sense of seriousness and professionalism, but promises a much better user experience. Now consider Lyft, a company that actively chooses not to be serious with quirky, pink mustaches and drivers that are forced to fistbump you and engage in conversation. It’s ultimately subjective, but a lot of people love Lyft! And it’s all because they choose not to be serious: that’s their competitive advantage.

Yo is also a great example. It’s unclear how successful (or unsuccessful) it will ultimately become, but Yo has carved itself a niche with contextless push notifications, something so radically different (or useless, depending on who you ask) that it has everyone buzzing.

We’re always in search of outliers, but it’s not about being nonconformist for the sake of being nonconformist. It’s about thinking hard about the defaults and questioning them. Certain things you can’t choose not to do, like customer service or making something your customers actually want. But other things, like not being serious in a serious industry, can make all the difference.

At Aflume, we’re trying to shape the future of music by changing how artists and fans interact, but we aren’t trying to be the next website that everyone goes to for music. Everyone these days says, check out my videos on Youtube, stream my music on SoundCloud, buy my stuff on iTunes, support me on Bandcamp, fund my Kickstarter, follow me on Twitter and Facebook. And on each site, musicians are forced to build a new profile, rediscover their fans, and then find a way to integrate that into their artistic identity.

You’ve probably never heard of us, and that’s not because we work with a lot of independent artists. It’s because we’re not trying to build a platform where you find artists to support. We’re consumer facing, but we’re letting artists take full creative and artistic control of our product: we power artists’ websites and want to be the backend of the music industry. And for the first time online, artists can promote themselves instead of yet another platform that they have a profile on.

Hopefully, we’re not doing the right thing.

If you’re a musician and think what we’re doing sounds interesting, please reach out. We’d love to help you succeed.

Virtual Reality and the Oculus Rift - How real is too real?

Frank Wu — Mon, 31 Mar 2014 00:00:00 +0000

Yesterday, I watched my friend flip out over Dreadhalls, a horror dungeon game for the Oculus Rift where the goal is to sneak out of a dimly lit dungeon. Despite the technical limitations of the Rift (640×800 per eye in the developer kit) and the fact that Dreadhalls is still under development, Dreadhalls manages to be an intensely terrifying experience. ¹

This brings up a serious question about the implications of VR innovation. As VR software and hardware improve, the experience inevitably will too. So whereas Titans of Space will become an even more awe-inspiring trip through space, a higher-quality version of Dreadhalls would only become more intense and more scary.

What, then, does this mean about a first-person shooter like Call of Duty? With high quality graphics and sound, a VR game like Call of Duty would put you right into the middle of the battlefield, complete with guns, bullets, grenades, and, most importantly, death. With guns aimed at your head and bullets whizzing by, do you panic? When you’re looking down a sniper scope, with your target in sight, do you pull the trigger? When you see the body in front of you fall from the blast of your shotgun, do things get, perhaps, a bit too intense for comfort?

My hunch is that this sort of experience won’t be universally enjoyed. The brutality of World War I led to shell shock, a physical and emotional reaction to the intensity of the war that has since become ingrained in our memory of the war. Nowadays, we talk a lot about PTSD, particularly in the context of war veterans after returning home from war. It seems plausible that we’ll see some resemblance of PTSD or shell shock appear due to increased intensity and immersion in VR games. At the very least, I wouldn’t be surprised to hear about panic or heart attacks induced by VR, particular through something like Dreadhalls or a FPS.

So here’s my question: where and how do we draw the line on what experiences are appropriate for VR? Or will something like the uncanny valley appear and solve this problem naturally? I’d love to hear your thoughts.

This Reddit thread and this Youtube video can give you an idea of exactly how people react to the game. Warning: strong language. ↩

Intro to Web Development (MIT Blueprint 2014)

Frank Wu — Sat, 22 Feb 2014 00:00:00 +0000

I recently led a workshop on basic HTML and CSS at Google Cambridge for MIT’s Blueprint, a 14-hour event for high school students interested in software development and computer science. My talk assumes no prior knowledge and walks you through a simple HTML and CSS website, teaching fundamentals like the box model, classes vs. ids, and more.

Slides

HTML (index.html)

<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="top">
        <h1>Blueprint is awesome!</h1>
        <p>Hi! Welcome, I'm learning HTML and CSS. Built by Frank at <a href="http://blueprint.hackmit.org/">Blueprint 2014.</a></p>
      </div>
      <div class="about">
        <div class="column" id="column1">
          <h2>Feature 1</h2>
          <img src="1.png"><br /><br />
          Why we are the best.
        </div>
        <div class="column" id="column2">
          <h2>Feature 2</h2>
          <img src="2.png"><br /><br />
          Why we are the most fun.
        </div>
        <div class="column" id="column3">
          <h2>Feature 3</h2>
          <img src="3.png"><br /><br />
          Why we are the most awesome.
        </div>
      </div>
      <div class="bottom">
        <h2>You'll love our awesome features.</h2>
      </div>
    </div>
  </body>
</html>

CSS (styles.css)

body {
  background: #d9d9d9;
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
  text-align: center;
}

h1 {
  font-size: 50px;
}

a {
  color: #D7E0E6;
}

.wrapper {
  margin: 0 auto;
  width: 900px;
}

.top {
  color: #D7E0E6;
  background-color: #0099F8;
  padding: 50px;
  margin: 30px 0 0 0;
}

.about {
  display: inline-block;
  margin: 15px 0 0 0;
}

.column {
  background-color: #CE4D4F;
  color: #263039;
  height: 210px;
  width: 260px;
  float: left;
  padding: 20px 15px;
  text-align: center;
}

#column1 {
  margin-right: 15px;
}

#column2 {
  margin-right: 15px;
}

.bottom {
  color: #D7E0E6;
  background-color: #092F4B;
  padding: 50px;
  text-align: center;
  margin: 15px 0 30px 0;
}

WeChat Isn't a Messaging App - A Closer Look at China's Hottest App

Frank Wu — Fri, 27 Dec 2013 00:00:00 +0000

My parents currently live in China and they, like pretty much all of China nowadays, actively use WeChat. The last year, I’ve used WeChat more and more to communicate with them, but I could never understand why they and so many others were so drawn to WeChat over alternative messaging apps like iMessage. Despite a clunky interface, slow load times, and a design language that feels more 2008 than 2013, WeChat’s Chinese adoption numbers have been off the charts, with over 400 million worldwide users and no signs of slowing in Asia.

I’m currently home in China for the holidays and I’ve had some time to observe how my parents are using WeChat, how my sister is using it, and how strangers on the street and on the subway are using it. What I’ve seen has definitely surprised me.

Most importantly, I’ve noticed that WeChat isn’t a messaging app. I had originally thought that messaging was the main focus of WeChat. Instead, it performs a role best described as an interesting blend between messaging, social gaming, Twitter, and Facebook.

For a lot of people, WeChat is the start and end of their phone usage. Need to talk to someone? Send them a text message or leave them a voice message. Want to see what your friends are up to? Go to “Moments”, where you can view a stream of their activity and post an update of your own. Want to play games? Play from within WeChat.

“Moments” is probably the most used feature of the app. It’s basically a social network that lies adjacent to the app’s basic messaging features, where users have profiles where they can post photos and statuses and change their profile pictures and cover photos. Like Facebook, you can publicly like and comment on posts. However, the “Moments” feature is buried two levels deep, much like how Twitter’s direct messaging functionality was before the most recent update (version 6). To get to it, you have to first enter the Discover tab and before seeing others use it, I had personally never visited it.

The reason why WeChat is doing so well, though, is because its other features are definitely not ignored. WeChat, as an app, is very versatile, leading to insanely high user retention. Its chatting and messaging features, complete with chat backgrounds and stickers, have found popularity amongst the QQ crowd that provided the initial traction for WeChat (it’s interesting to note that QQ and WeChat are both owned by the same company, Tencent, and that they successfully leveraged this existing userbase to launch WeChat). The messaging features serve as a replacement for email, texting, and IM. Like WhatsApp, a lot of people are opting to replace their traditional SMS plans with more data and using WeChat to fill in the gap. Throw in the network effect, and even those that don’t choose to forego SMS find themselves on WeChat more and more as well in order to interact with their friends.

Screenshot from WeChat's website

But it isn’t just text messaging that is helping to drive WeChat’s user retention. I was pretty surprised by how popular the walkie talkie (push-to-talk) feature is for communication, which I believe stems from how difficult it is to enter Chinese characters on a phone. It’s not uncommon to see people walking down the street or on the subway, speaking in quick 2 to 3 second bursts on their WeChat accounts. Instead of calling one another, a lot of Chinese people choose to use these walkie talkie conversations, giving them the benefits of asynchronous communication coupled with the power of voice. I’m also suspecting that more and more people are starting to substitute their phone service with WeChat’s walkie talkie feature as well, making an average Chinese user’s phone plan pretty heavily focused on 3G data.

So… what?

WeChat has grown so quickly because of its versatility and all-encompassing nature. I’d guess that the only app a lot of people in China use is, in fact, WeChat. My cousins and my family agree. Tencent would probably agree as well.

Tencent is hedging its bets that WeChat can and will own the entire Chinese Internet market. Just yesterday, they’ve launched Weixin TV, a smart TV completely integrated into WeChat, yet another expansion of the WeChat feature base. Instead of focusing on any one particular product and making it better, they’ve decided to throw literally everything under the WeChat umbrella.

This, precisely, is why I believe WeChat will not find the same success in the American market. What Chinese consumers are looking for is an all-inclusive piece of software that does everything they could ever want, whereas American consumers would rather split time between multiple apps in order to get the best possible user experience. In China, where it really is a winner-take-all situation, this isn’t a bad development strategy, but the Western market is entirely different, where I don’t see WeChat gaining mass adoption, at least in its current state. WeChat is part-Facebook, part-Twitter, part-Instagram, part-Tumblr, part-WhatsApp, part-Skype — it does a lot, but it doesn’t do anything exceptionally well. If WeChat wants to seriously compete in the American market, it will have to not only beat pure messaging apps like WhatsApp and iMessage, but also (and most importantly!) everything else that has been thrown into the mix.

Standing in Showers

Frank Wu — Mon, 19 Aug 2013 00:00:00 +0000

When I was a child, I remember being paranoid of standing in public showers at the YMCA and even in hotel rooms. I always assumed that I would catch some sort of foot disease from standing where other people had stood before, forcing me to either arch my toes upwards and stand on my heels or to tiptoe around clumsily. Despite the discomfort, I would stumble around in every public shower I found myself in, making sure to cover as little surface area as possible.

In the back of my mind, I always told myself that I was being irrational and that everyone else stood normally in the shower, but for the longest time, I remained completely stubborn about this behavior. But with time, as with most of our childhood quirks, I eventually grew out of it.

A few days ago, I stepped into a hotel shower and instinctively, I didn’t take off the flip flops that were already on my feet. At college, we’re strongly encouraged to wear them in the communal showers. Which leads me to the point — why didn’t I just do this when I was kid?

Simple: no one ever told me to.

I think this story, though quite idiosyncratic, sums up the reason why we are always driven to learn new things and gain new experiences. We don’t know what we don’t know. And what we do know can constantly surprise us — even something so seemingly inconsequential as learning to wear my flip flops in the shower.

What is your “standing in showers” story?

Your Lowest Common Denominator

Frank Wu — Mon, 03 Jun 2013 00:00:00 +0000

A few weeks ago, I was headed to a hackathon with some friends and since we didn’t know what we wanted to build yet, we decided to casually throw out ideas to each other during the hour long train ride. Luckily enough for us, the man (let’s call him Calvin) sitting across the aisle from us loved to talk and despite not knowing much about “cutting-edge” technology or startups, I learned a lot from him on how to build a desirable product and company.

Although Calvin seemed incredibly ambitious, most of his own ideas were not (think Instagram for cats). He was also extremely hard to convince and was unenthused by all of the ideas we threw out. To be fair however, he also didn’t understand most of the ideas that we were coming up with, simply because we couldn’t distill the ideas down simply enough for him to understand.

While our ideas were completely clear in our heads and to each other (despite the fact that we came up with most of the ideas on the spot), they were still obfuscated by random tech/startup jargon that we felt naturally comfortable with. When it became clear that this level of dialogue didn’t work with our newfound audience, we switched gears into more high level descriptions, but still, Calvin didn’t seem to buy what we were saying. Again, this was our fault, not his.

To him, someone who didn’t really “get” tech, the innovativeness and creativeness of our ideas didn’t seem to change his opinion. What was most important was whether or not we could actually communicate to him what our ideas meant. It didn’t matter whether we allowed him to share pictures of his cats or allowed him to take a picture of his shoes and then magically generate a matching outfit on his iPhone and it certainly didn’t matter to him if we used Rails or Node or Django — if he couldn’t understand what the idea was, then it wasn’t compelling enough to build.

The bottom line here is that if no one can understand what your startup is offering, no one will care and no one will buy or use your product. If you can’t explain it to someone, then there’s no reason why they should be convinced to back you and your product, no matter how great your endgame vision is. So when you’re building something, make sure that you can explain it to any random layperson on the street by determining your lowest common denominator — the most basic and easily understandable idea you want to communicate. Once you nail that down, you can easily add layers of abstraction and detail if necessary. In a sense, it’s like you’re developing an MVP of your pitch — something simple enough that just works and doesn’t include anything else. Anything extra is just fluff and can be thrown away.

This same realization also occurred to me when I was preparing for my YC interview last month. When I talked to past founders about our idea, the biggest piece of advice I received was that I was saying too much while conveying too little. Instead of being able to instantly get a mental picture of what we were doing (Instagram for cats, for example, is a perfect counterexample), it would take two sentences from me before they reached that sudden moment of clarity because I couldn’t explain it simply enough. And these were some of the smartest and most clever people I’ve ever met.

Obviously, it’s hard to explain such complicated things (like your startup) so clearly and succintly, but it’s also what all the good startups do extremely well. Facebook, at its most distilled level, is a social network, Google is a search engine. If what you do is easy to communicate and easy to understand, then it also becomes much easier to get people excited about it, especially if they love and need whatever you’re making. And if they’re excited, chances are that the people you convince will then convince their friends as well, because they truly understand what they’re talking about and can explain it in their own words to others.

When you spend all day solving big problems and thinking about the underlying innovation of your product, it’s easy to forget that people outside of your tiny bubble can’t and won’t understand what you’re talking about at all. You need to remember to take a step back, wipe the slate clean, and look at things with a beginner’s mind. Build for the “Calvins” of your customer base — the people who want your product and would wholeheartedly support you if only they could understand what you’re doing.

So start small and focus on the basics. Figure out your lowest common denominator. Simplify.

Lessons Learned from Going "Profitable" in Under an Hour

Frank Wu — Wed, 26 Dec 2012 00:00:00 +0000

Around two months ago, when Hurricane Sandy struck the East Coast, my roommates and I launched a charity t-shirt campaign called Shirts for Sandy from the safety of our dorm room. The university placed us into lockdown for two days, keeping us indoors as the storm continued its destructive path, and I decided that it was the perfect opportunity to help the community while also flexing my entrepreneurial muscle. Within a few hours of conception, we had a t-shirt design completed, a website up and running, and our first sales already accounted for, the first of which came within an hour of launching the site. Since we donated all of our profits to the relief effort, I put profitable in quotation marks in the title — in essence, however, we were profitable as soon as we received our first sale, which covered the price of the domain (hosting was free on an AWS S3 bucket).

This post discusses the business lessons I learned from the entire process. Naturally, running a for-profit business will have its differences, but I wanted to record these thoughts for future reference and for others to learn from as well.

Start marketing efforts before launch. We began spreading the word about Shirts for Sandy even before we had a completed website. Starting with a Facebook page, we each invited all of our friends to “like” the page. First, we focused on capturing the attention of our network of friends, which gradually led to more and more people that weren’t in our networks. This also helped us gain the attention of media outlets that further helped to spread the word. When the time came to launch the site, we announced this to our followers and our first sales came flooding in. Because of our social networking pages, we were able to build interest in our product before we even officially had anything set up.
Work for your sales. This may seem like common sense, but our sales numbers were directly correlated to the amount of effort we put in to get them. Whenever we successfully received media coverage, we would see a spike in our sales. Whenever we worked hard to talk to people about what we were doing, we would be able to convert these conversations into sales. If you sit back and just hope for sales to come in, you won’t see many sales. You have to work for them.
Release first, then iterate. When we first launched, we were highly unprepared — we didn’t have a t-shirt supplier yet, we hadn’t yet decided on a charity to donate the money to, and we weren’t very experienced in dealing with press and customer concerns. Our first interview was with the school newspaper and many people expressed their concerns to us. People wanted to know who we were, what we were doing with the donations, and whether we could be trusted, all valid concerns at the time. That day, we handled all of the concerns one by one, updating the website with clearer language, officially partnering with a local charity that funneled all the money to Sandy relief, and making sure that we were prepared for future media questions. I concede that most of these issues probably should have been handled before we launched the site, but we were handling a time-sensitive problem and our ultimate goal was to help the relief effort as quickly as possible. Even if we did spend more time figuring these things out before, we still certainly would have received feedback that could be used to improve future iterations.
Learn as you go. For all of us working on Shirts for Sandy (a team of five), this was our first ever direct response charity effort that wasn’t focused primarily at fundraising at our high schools. Instead, our goal was to leverage the power of the internet to deliver much needed help to our neighbors who were hit hard by the storm. We ran into many problems along the way and had some high-stress situations where we wondered whether or not we could keep going — for example, our first t-shirt deal fell through and we wanted to keep our costs as low as possible — but we eventually tackled all of these challenges by gritting our teeth and carrying on. Experience is something that has to be gained, so it’s best to jump headfirst into something and then learn the things you don’t know along the way.
Find a great team. No matter how skilled or talented you think you are, there’s always someone who can help you out. Whether you’re running a business or a non-profit organization, one of the most important things is having people around you with a common goal, people that you can completely trust and rely on, as well as complementing your own individual skill set. I just mentioned that you should learn how to do things as you go along and a lot of these lessons are learned from your teammates. It’s a great feeling to know that while you’re working on building the website or the product, someone else can be designing the shirt, someone else can be looking up t-shirt printing companies, and yet another person can be emailing local press outlets for coverage.
Don’t rely on the press to spread the word for you. Since we were raising money for charity, we found a wide range of media outlets willing to cover us, but even so, only about a quarter of the outlets we reached out to replied back to us. Our Hacker News post, for example, was completely ignored. I didn’t expect to find much of an audience on HN, but I decided to post anyways, which is the mindset that you have to have when trying to get press for your startup. Your marketing strategy can’t rely on TechCrunch or HN — even if you don’t find the coverage you want, you have to keep going and find alternatives.

You can send donations to the relief effort or purchase a shirt from us over at the Shirts for Sandy website. If you want to donate directly to the relief effort instead, please do so through your favorite charity.

How to Blog with Jekyll

Frank Wu — Thu, 09 Aug 2012 00:00:00 +0000

Recently, I decided to switch my personal blog over to Jekyll, a blog-aware, static site generator written in Ruby. By design, Jekyll is simple, fast, and not bloated like most CMS. In fact, Jekyll doesn’t need a database to run and there’s no traditional admin panel to create, edit, and manage your posts. Instead, you get to use your favorite text editor and version control system to push changes to your site. Everything lies on your local computer, meaning there’s no chance for data loss due to a faulty database on your server. You also don’t have to worry about constant updates and security flaws.

If you’re willing to hack a little, I’d highly recommend switching over to Jekyll. Sure, you lose the bells and whistles, but you’ll be able to focus on the important part: the writing.

Getting Started with Jekyll and GitHub

Jekyll was developed by GitHub co-founder Tom Preston-Werner, so naturally, GitHub Pages offers free web hosting that you can use to power your Jekyll site. We’ll start off by getting Jekyll set up on your local computer and then pushing it to a new repository on GitHub.

Start off by installing Ruby if you don’t already have it. Then we can update RubyGems and use it to install Jekyll.

$ gem update --system
$ gem install jekyll

You should also go ahead and install RDiscount to process Markdown, which is what Jekyll uses for authoring posts (of course, you can use Textile or HTML if you prefer). By default, Jekyll uses Maraku, but I found it slower and more difficult to use than RDiscount.

$ sudo gem install rdiscount

If you want code syntax highlighting on your blog, you can also install Pygments. You’ll need to install Python to continue.

$ sudo easy_install Pygments

Your local dev environment is now completely setup to run Jekyll. To get your site up and running, all you have to do now is to create a new directory and a new repository on GitHub in the format username.github.com

$ mkdir frankjwu.github.com
$ cd frankjwu.github.com

For the sake of seeing progress, you can create a new index.html file in your new directory and fill it with the following.

<!DOCTYPE html>
<html>
<head>
  <title>Frank Wu</title>
</head>

<body>
  <h1>Hello World!</h1>
</body>
</html>

You can now start your local Jekyll server, navigate to http://localhost:4000, and see your new site!

$ jekyll --server

Push it up to your recently created GitHub directory and you’ll see it up and running on GitHub Pages as well.

$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin git@github.com:frankjwu/frankjwu.github.com.git
$ git push origin master

It may take around ten minutes for GitHub Pages to fully update.

Configuring Your New Blog

Obviously, you’ll want to do more with your blog than just display a single HTML file. To do so, you’ll need to setup your directory with the basic structure that Jekyll expects:

.
|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|   `-- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   `-- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
`-- index.html

Simple! All of these folders are fairly self-explanatory, but if you’re unsure what something does, you can read the Jekyll documentation. _config.yml holds your configuration settings, _includes stores partials, _layouts holds templates for displaying your site content, _posts contains your blog posts, _site is automatically generated by Jekyll with your static pages, and index.html is the page that will be displayed at your root URL.

We’ll go ahead and create a simple default.html layout to get started.

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>    
  <!-- You can load CSS files and other meta data -->
</head>
<body>
  <h1>Welcome!</h1>
  {{ content }}
</body>
</html>

Update your index.html file with the following:

---
layout: default
title: Frank Wu
---

You’ll notice that the default layout uses Liquid code to pull the page title and content, giving you some additional flexibility in creating your layouts.

If you’re following the tutorial step-by-step and you do want to use RDiscount and Pygments, go ahead and create your _config.yml file now with the following.

markdown: rdiscount
pygments: true

If you want to use a custom domain, you have to create a CNAME file and put the desired domain name inside it. You will then need to add an A record that points to 204.232.175.78 in your DNS settings.

At this point, you have already created the basic skeleton of your site and simple configuration settings. Jekyll is up and running and all you need now is to start designing the site layout with HTML (infused with Liquid) and CSS. Even if you’re a talented designer, it’s a good idea to fork an existing Jekyll blog to see how they work. You might want to start with forking Tom Preston-Werner’s blog or even mine to get an idea of what to do next.

Writing Posts

Writing new posts is super easy with Jekyll. You just create a new file in the _posts folder in the format “YYYY-MM-DD-post-title.markdown”. Add the necessary YAML information to the top of the post and Jekyll will do everything else for you. Here’s what this post looks like:

---
layout: post
title: How to Blog with Jekyll
---

Recently, I decided to switch my...

I like being able to work with drafts of my posts, so I created an additional _drafts folder and then added this to my .gitignore file to make sure my half-baked posts don’t accidentally appear on my GitHub repository.

$ mkdir _drafts

It’s also a good idea to add your _site directory to your .gitignore. When Jekyll is run, the _site directory is populated with the static pages that make up your site.

If you want to move blog posts from your old blog, the Jekyll gem provides a number of easy migrations for you as well. I’ll briefly run through the Tumblr migrations since that’s what I migrated from, but you can find full instructions for other systems here.

$ mkdir _import
$ gem install sequel mysqlplus
$ gem install nokigiri
$ ruby -rubygems -e 'require "jekyll/migrators/tumblr";
  Jekyll::Tumblr.process("http://www.your_blog_url.com", true)'

The above steps will create a new directory for your imported posts, install the necessary gems for the migrators to work, and then perform the actual data migration from your old blog. After migrating, you might want to clean up the markup in your old posts, especially if you didn’t use Markdown before.

Thoughts

Obviously, Jekyll isn’t for everyone since it requires a bit of familiarity with the terminal, Git, and Liquid markup, but I’m extremely satisfied with the entire system. I love being able to open my text editor to write posts and then previewing everything on my local server before pushing the changes to a GitHub repository. Pages load quickly since they’re just static HTML files and I feel at ease making incremental changes to the live site.

If you’re still not sure, I’d recommend reading Tom Preston-Werner’s “Blogging Like a Hacker” and Paul Stamatiou’s extremely detailed tutorial, “How To: Wordpress to Jekyll”, for some additional inspiration and thoughts.

Two Heads are Better than One

Frank Wu — Fri, 29 Jun 2012 00:00:00 +0000

It’s an age-old adage taught all over the world to foster a sense of collaboration and teamwork — one that took a hit in the journal Science in August of 2010.

Led by Bahado Bahrami of the Interacting Mind Project (University College London and Aarhus University in Denmark), the study concluded that two heads are only sometimes better than one, making the important distinction that both heads must be both competent and able (or perhaps just willing) to communicate their weaknesses.

But isn’t this something that we already fundamentally understood? Imagine an open-heart surgery conducted by a heart surgeon and an astrophysicist, both of whom are world-renowned in their respective fields of study. Two brilliant minds working together, but one is obviously going to be less capable than the other. In this case, one head is certainly better than two.

For all other instances, having more brilliant minds is certainly very worthwhile. In the near future — and far future for that matter — steps should be taken to encourage more collaboration in solving problems, harnessing the incredible amount of intellectual wealth that exists in the world today.

No mind is identical to another. Each person sees and interprets information differently. Relative wealth, living conditions, education, and a number of other variables all contribute to how someone may see the world. Sure, an astrophysicist may not be the most reliable person to conduct an open-heart surgery, but who’s to say that an astrophysicist has no valuable thoughts to contribute on the methodology of the surgery? It is already understood that with no specialization in the field, an astrophysicist would not be the most technically capable, but from an intellectual standpoint, he will at least have thoughts to share and observations to make. That’s the inherent beauty of the human mind.

Sometimes, the most straightforward approach to a problem is indeed the best approach. But when time, money, and effort allow, looking at all the alternate pathways from A to B provides very useful insight. By only considering one option — because of tradition, principle, or simply out of pragmatism — many doors are closed. By taking into account every other pathway, it is possible to pool the collective knowledge and experience of all the brilliant minds out there, analyze them objectively, and then innovate accordingly.

With respect to the world’s depleting natural resources, much of modern technological research has been turned towards discovering a more efficient and environmentally friendly way to power our automobiles. Plant biologists have begun biobased-fuel research projects, chemists have been investigating fuel cell catalysts, and other alternative fuel sources have been considered. Which one will be predominantly used in the future? Who knows? Maybe it’s one of the aforementioned, maybe it’s a mixture of them, or perhaps, maybe it hasn’t been discovered yet.

People are out there. Ideas are out there. We just need to find a way to harness them.