Kuan-Ying Chou's Blog

TechCrunch Disrupt SF Hackathon

Last weekend I went to San Francisco for TechCrunch Disrupt Hackathon, my first hackathon here in the US.

It’s an exhausting event. You have to form a team of no more than 5 people and deliver something in less than 24 hours. All the code has to be written on site. No cheating allowed.

Pier 70. Lots of hackers in one place:

I met my teammates, Devin and Jesse, while waiting for the event to start. They are only in 10th grade and Devin had already attended 8 hackathons!

Jesse and Devin (left to right), with nerdy glasses they got from one of the sponsors:

I wanted to create a character drawing app that can let people keep and share their handwriting of Chinese characters. Users can create their characters with fingers or stylus, share them, and “like” other people’s creations. It’s like an Instagram for Chinese characters.

Be sure to bring an extension cord with you. It will come in handy!

The hacker in front of me looked really serious. He ignored all the sponsors and networking and started coding immediately once he found a seat. I decided to follow his approach.

Real hacker at work. Did you see the flame in his eyes?

Dinner served at 7 but the waiting line was super long. I got mine at 8. It was good though:

My teammates in the middle of the night:

One o’clock in the morning:

After coding for 12 hours. I started to feel sick and wonder why I’m here in the first place. I decided at the time that hackathons are really not a thing for me. I saw people putting their chairs on the table and thought that might be a good idea.

Instant standing desk, save your butt and keep you awake:

The sunrise of the next day:

In the end Jesse made an iOS app with Swift 2, Devin made a Restful API with Ruby, and I made an Android app. However, we were too tired to integrate all of our works.

Here are some screenshots of my app.

Write a character:

Various pressure levels:

Browse all your characters:

You can find my code here.

11 AM. After all the hacking, it’s show time!

Big cameras:

Big screens:

It’s my turn!

I felt great wearing that cool microphone and my demo would be awesome, right?

Nope, it was terrible. I quickly ran out of time without writing a single character on stage and Jesse didn’t get the chance to demo his stuff(really sorry about that).

But I kind of love it. It’s really an honor to be among these real hackers who know their trade and actually deliver. And for the first time in my life, I felt so close to being recognized. No one cared about where you come from or which company or school you go to. As long as you can make something, you get one shot, and the possibility is thrilling.

I’ll do better next time.

Last Updated: 2015.9.27

C++ Variable-Length Arrays

Another letter I wrote to my C++ classmates at UCSCx.

Hi, All,

In the previous magic square homework, I happily wrote the following line:

int map[n][n]; //n is a non-constant

Our teacher may be mad at you if your code looks like this(and your score may suffer), but it actually compiles, both on gcc and clang!

Turns out, this feature is called VLA(variable length array). It s specified in C99, but not in C++(who says C++ is a superset of C?). However, both gcc and clang implemented it anyway, as a “language extension”. If you don’t like this feature, you can enable warning by adding a -pedantic flag while you compile. Depending on your compiler, it would cry something like this:

warning: ISO C++ forbids variable length array 'arr'

There were some disputes though:

https://groups.google.com/forum/#!topic/comp.std.c++/K_4lgA1JYeg

(Note that the thread was created by Scott Mayers, the one behind Effective C++ and Effective Modern C++!)

Seems like the dispute has not settled yet. As someone from Java/C#, I really like this feature. Who knows, maybe it will be included in C++14. What do you think?

Happy hacking,

Kuan-Ying Chou

C++11 Enums

Below is a letter I wrote to my C++ classmates at UCSCx.

Hi, everyone,

I want to share a quick note on “enum” which we learned this morning.

Suppose you are writing a game and you have a move() function that can move your hero on screen. It looks something like this:

void move(int dx, int dy) { /*...*/ }

And you want to add a convenient function so that the user of your program can specify the direction and travel distance instead of coordinates. An enum may come in handy! We can use that to specify the directions:

enum direction { N, W, S, E }; //north, west, south, east

And you can write the convenient function like this:

void move(direction d, int distance) {
    switch(d) {
    case N:
        move(0, distance);
        break;
    case W:
        move(-distance, 0);
        break;
    case S:
        move(0, -distance);
        break;
    case E:
        move(distance, 0);
        break;
    }
}

But what if you already had an enum for the difficulty of the game, which is defined as:

enum difficulty { E, N, H }; //easy, normal, hell

And you compile and get:

test_enum.cpp:4:19: error: redefinition of enumerator 'E'
enum difficulty { E, N, H }; //easy, normal, hard
                  ^
test_enum.cpp:4:22: error: redefinition of enumerator 'N'
enum difficulty { E, N, H }; //easy, normal, hard
                     ^ Ouch, compile error! These two enums don't get along with each other since they both defined 'E' and 'N'!

Now what? Of course you can go ahead and change the names of your enumerations, like “NORTH” instead of “N”. But what if you don’t want to use a longer name?

Turns out there are two kinds of enums[1]: scoped and unscoped. The one we used above is called unscoped enumeration. Since it’s unscoped, the names in one enum may collide with those of another. A scoped enum eliminates the collision. For example, we can turn the enum of directions into a scoped one just by adding a class keyword after enum:

enum class direction { N, W, S, E }; //north, west, south, east

And the usage becomes:

void move(direction d, int distance) {
    switch(d) {
    case direction::N:
        move(0, distance);
        break;
    case direction::W:
        move(-distance, 0);
        break;
    case direction::S:
        move(0, -distance);
        break;
    case direction::E:
        move(distance, 0);
        break;
    }
}

(note the added qualifier direction::)

Now both the compiler and your user are happy, and so are you!

Note: Scoped enum is a new thing in C++11 so if you want to use it on Linux or Mac you may need to add a -std=c++0x or -std=c++11 flag to g++ or clang.

[1] http://en.cppreference.com/w/cpp/language/enum

Cheers,

Ken

Vagrant 快速上手

Vagrant 是一個虛擬機的自動化工具，可用來生成、管理VirtualBox 機器[1]。只要幾個指令，就可以在電腦上產生一台可使用的虛擬機，比起直接操作VirtualBox 簡便許多。需要在工作上使用Linux（系統管理、Android 建置等）或想學習Linux 的夥伴可以試試看。

使用方法：

1. 到這裡下載、安裝：

http://www.vagrantup.com/downloads.html

2. 打開命令列（Windows 上可用git bash 或cmd），移到想要的工作資料夾，執行下面的指令：

$ vagrant init ubuntu/trusty64
$ vagrant up

幾分鐘後，一台64 位元的Ubuntu 14.04 虛擬機就下載、安裝好並開好機了。

3. Vagrant 預設不啟動虛擬機的螢幕，可以用ssh 連進去看看：

$ vagrant ssh

執行後就會看到虛擬機的prompt：

guest 內的/vagrant 資料夾會自動和host 的工作資料夾同步。例如在guest 內執行：

$ cd /vagrant
$ touch hello.txt

host 馬上就可以看的到。

進階的功能可參考官網的文件。

[1] Vagrant 也可用來管理其他虛擬工具，如VMware 或Docker。

完美的部落格解決方案（二）：Jekyll + Github Pages

Github Pages 是Github 提供的網站託管服務，用來建立專案、個人或組織的網頁。當然，我們也可以利用它製作比Calepin 更有個人特色的部落格。

Github Pages 的用法相當簡單，只要在Github 上建立一個叫<Github 帳號>.github.io的repository，推進html 檔，之後便可以在http://<Github 帳號>.github.io 看到網頁。

由於Github Pages 只支援靜態網頁，無法動態地執行伺服器端的程式碼，因此必須預先把網站產生好。為了自動產生網頁，我們可以用Calepin 所使用的網頁產生器Pelican（以Python 實作，名字和做鋼筆的百利金Pelikan 差一字），並將產生出來的網頁推到Github 上。不過，我們也可以使用Github Pages 內建的網頁產生器Jekyll（讀音如「傑可」）。

Jekyll 是一套以Ruby 實作的網頁產生器，由Github 的執行長 Tom Preston-Werner 等人開發。我們不必上傳完整的網站，而是將部落格的文章(一樣可為Markdown 格式)、模版，和CSS 樣式推到Github，Github 便會自動用Jekyll 產生出網頁。

使用Github Pages 和Jekyll 的發文流程類似Calepin。兩者的文章皆可以用Markdown 格式儲存（Jekyll 另支援Textile）。發文前，Github Pages 的文章要放在專案根目錄的_posts 資料夾下。若文章為Markdown 格式，檔名則為<yyyy>-<mm>-<dd>-<文章名稱>.md。發文時，是使用Git 提交（commit）並推送（push）到GitHub 上。

和Calepin 一樣，文章的開頭也需要放入一些描述文章的資訊，稱為「front-matter」，格式是YAML，用三個減號（dash）包圍。因此一篇文章長得像這樣：

---
title: Hello, Jekyll!
layout: post
tags: jekyll github-pages blog 
---
第一篇文章…

Jekyll 支援一套叫做Liquid 的模版語言，其語法並不難。例如，若要印出所有文章的標題和連結，我們可以寫個簡單的迴圈：

<ul>
{% for p in site.posts %}
  <li>
    <a href="{{ p.url }}">{{ p.title }}</a>
  </li>
{% endfor %}
</ul>

而若要在多個頁面中放進同樣的模版，如一致的頁首和頁尾，我們可以將這些模版放在部落格根目錄下的_includes 資料夾，並在要使用的頁面裡納入，如：

...
<body>
{% include header %}
...
{% include footer %}
</body>

網路上已有許多關於Jekyll 和Github Pages 的介紹和教學，可參考下面的連結。

• JekyllBootstrap （應該是最快速的上手方式）
• Github Pages and Jekyll
• Jekyll
• YesWeJekyll
• Liquid
• Bootstrap
• Creating a fast and mobile-friendly website with Jekyll