Hi, I’m Andrew. Nice to meet you. You may know me from the one-man design/development shop g9Labs* Design Studio, specializing in graphic/interface design and Web applications.

You may also know me as one of the guys behind Wejoinin, the easy way to make a signup sheet online. I do the design and programming and talk to our users who need help.

I’m affiliated with the Porkbuns Initiative, a group of friends who met at UC Berkeley who like to build swift, sleek Web applications.

I’m a student at UC Berkeley (go Bears!), studying Electrical Engineering Computer Science and Mass Communications.

I kind of like being a designer/developer/artist/programmer. Sure, it’s not much of a title. But I wake up every day and can’t wait to get started.

You can find Andrew on:

• LinkedIn: andrewhao
• Flickr: andrewhao
• Delicious: gsgnine
• Last.fm: gsgnine
• Twitter: @andrewhao
• Facebook: Andrew Hao

Finally, I keep a personal blog at andrewhao.com, full of personal introspection, writing, musings, and photography. You’re welcome to come over!

The desired setup:

• Two wireless routers on the same network: one router acts as the gateway and DHCP server, the other is a simple switch + wireless AP. One router is the Netgear WGR614, the other is the DLink DI-624.
• Workload: many wired connections, many wireless connections. We have 3 wired computers for me and my roommates’ computers, and up to 10 people connected via wireless at the same time (we tend to have a lot of visitors).

After a bit of research, I found a forum thread online that details how to set it up:

• The host router (the Netgear in my case) stays the DHCP server and broadband gateway. Settings:
  • Assign a static IP on the MAC address of the secondary router. It’s 192.168.1.3 on my network. That way you’ll always have an IP address to the second router’s admin panel.
• Run an Ethernet cable from the host router’s LAN port in to the LAN port of the second router (the DLink). (Note: it’s especially important that you plug this wire in to the LAN port instead of the WAN port).
• With a computer connected on the network, send your browser on over to the D-Link admin panel at 192.168.1.3. Your settings on the DI-624 should be as follows:
  • “WAN Settings” section (Note the 20.2.20.x IP is just a random IP address so the AP doesn’t go off and try to dynamically resolve a IP address)
    • “Static IP Address” radio button selected
    • IP Address: 20.2.20.20
    • Subnet mask: 255.255.255.0
    • ISP Gateway Address: 20.2.20.21
    • Primary DNS address: 20.2.20.22
  • “LAN Settings” section:
    • Static IP: 192.168.1.3
    • Subnet mask: 255.255.255.0
    • DNS Relay: Disabled.
  • “DHCP Settings” section:
    • DHCP Server: Disabled
  • “Wireless” section:
    • Set up your wireless AP settings however you’d like!

Though these instructions are specific to setting up the DI-624, I’m pretty sure you could get your old router to work on an existing network.You can now extend the range of your home’s wireless network without any fancy signal booster tricks or expensive repeater equipment. How cool is that?

Web programming, interface design, Web design: Site in progress.

Wejoinin is a signup-sheet application that I’m working on with a group of friends at the Porkbuns Initiative. We’re trying to make signup sheets quick, easy and painless, and we’re having a lot of fun doing it too.

Site still in progress.

Good Shepherd Christian Church

Art & graphic design: Summer, 2008.

I was commissioned to create slide backgrounds for Good Shepherd Christian Church.

ThinkAnywhere Logo

Graphic design, logo and branding design: April, 2008

A logo for an entrepreneurship class project for a real-life Wiimote hack turned business plan. Read about the design process behind this logo.

“Sensations” Series

Personal art, 2007-2008

Artwork created when inspired by a word, image, thought or phrase.

There’s much, much more!

You’re seeing only a small sample of my entire body of work. Visit the rest of the portfolio to see the rest of my work.

• They’re both really young: SproutCore and Cappuccino have emerged only in the last three months. I haven’t heard of any deployed Cappuccino apps asides from the storied 280 Slides app. Same with SproutCore, looks like asides from MobileMe, they’re only beginning to see user-created apps come out (see: OtherInbox).
• The two frameworks are beautiful. Because they both model on Cocoa, they both take on the same icon set, window chrome, pane behaviors, and so on. Nice work, lifting the good UI work from the Mac and placing it on the Web.
• Objective-J sounds cool. I just can’t see non-Cocoa programmers just picking it up, though. Even though I picked up Cocoa over the summer and I think it’s pretty awesome, there was no way I would have the energy to pick up Objective-J on my own (unless Cappuccino proves itself to be THAT big of a draw).
• Okay, but to be fair, the idea of “Cocoa on the Web” is phenomenal. I wonder if we’ll see a surge of ported Cocoa-to-Web apps. Aligning Cappuccino with AppKit is a great idea, and it’s clearly the “Web framework for Cocoa apps moving to the Web” and you’re gonna want to use it for sure if you’re a proven Cocoa hacker. I wonder, however, if it can capture users who aren’t Cocoa programmers.
• I’m a big sucker for looks. Nothing gets me excited like SproutCore applications do in all their Aqua-like goodness. GWT in comparison looks pretty frumpy. I really like OS X-looking widgets. What can I say, I was brainwashed
• SproutCore and Cappuccino apps are simply not going to be able to out-perform GWT apps: they simply can’t beat the compiler optimizations of compiled and optimized JS in GWT. Then again… we’re going to have crazy fast JS engines in the next year or so. We’ll see if performance is an issue.

Even though these two frameworks are only beginning to gather momentum, I’m excited at the direction they’re moving the Web in. Anybody else want to weigh in?

This is sort of an intermediary step to another intermediary step of overhauling my portfolio (yeah, I’ve been meaning to do this for the past five years). Watch this space for updated project briefs to come trickling in.

 http://www.g9labs.com

Education

University of California, Berkeley

• B.S. Electrical Engineering Computer Science (EECS)
• B.A. Mass Communications
• Management of Engineering and Innovation Certificate

Expected graduation: Dec 2008
GPA: 3.58

Relevant Courses

• CS 61A - Structure & Interpretation of Computer Programs
• CS 61B - Data Structures
• CS 61C - Machine Structures
• CS 160 - User Interface Design
• CS 162 - Operating Systems
• CS 164 - Compilers
• CS 170 - Algorithms
• CS 186 - Databases
• CS 188 - Artificial Intelligence
• EECS 150 - Digital Systems Design
• IEOR 190A - Engineering Entrepreneurship
• E 190 - Technical Communication

Work Experience

Apple, Software Engineering Intern

As an iPhone application engineer, designed and coded a native iPhone server monitoring application. Additionally designed and engineered a Web-based iPhone CalDAV application.

Wejoinin, Co-founder / Designer / Developer

Ideation and execution of business idea: online signup sheets made easy. Constantly switching hats as a Rails programmer, Javascript developer and interface designer. See site in progress: (http://www.wejoinin.com).

FAQQLY.com, Project Manager / Designer / Developer

Project manager, UI designer and Rails programmer at a social networking startup. Led a four-person development team in planning and execution of site vision and goals. Specialized in scalable, accessible, standards-compliant design. Tasteful implementation of rich interfaces. Developed solutions for internationalization challenges involving communication and coordination with an overseas team.

g9Labs* Design Studio, Founder / Director

Design/code freelancer in a variety of disciplines from software engineering to graphic design to video production to advertising, branding and identity management. See portfolio site (http://portfolio.g9labs.com) for a list of projects.

Skills

Applications

GNU Emacs, VIM, Eclipse IDE, XCode, Linux/Unix/Solaris, OS X, Windows, MATLAB, Adobe CS Family, Microsoft Office, Subversion

Coding

C/C#, Java, Ruby, Rails, Cocoa, Python, Swing/SWT,SCHEME, MIPS/x86, PHP, Javascript, BASH, MySQL/PostgreSQL, XHTML/CSS, XSLT/XPath, ActionScript

Hands-on

Iterative interface design, user testing, marketing, branding, graphic design, motion/animation, apparel design, W3C standards, Agile methodologies

Languages

English (fluent)
Mandarin Chinese (conversational)

Download my resume in PDF format.

Last updated: September 23, 2008

(I’m trying to get my life organized�a futile attempt before the sledgehammer of school and responsibilities drops. Organized as in… prioritizing, managing time, et cetera.) A couple things I’ve done:

• GTD-ized my Thunderbird client (heck, I never knew labels could be so useful) and it seems to really help keep my mind on track when I field emails (I receive twenty to forty non-spam messages a day). The basic principle is to tag (label) your mail the instant it shows up in your inbox with its priority status. Then you run back through your mail and attack each piece according to its priority.
• I’m syncing my Palm V to Yahoo Calendar. Using the Yahoo Widgets Day Planner widget as an interface, I’m basically able to access my calendar information anywhere, whether I have the Palm or not. I’m still debating whether this is useful because the sync is less-than-accurate and well, nothing beats pencil and paper (a la the Hipster PDA. Has anybody used it? What were your experiences?)

Sorry, that was a quick break from our regularly scheduled programming. Geek, out.

These are known as cubicles. There are many of them, and they all look the same. Don’t let their similarities to prison cells fool you. They are actually holding pens for geeks.

Hsiufan and Vicki, earlier in the summer. Note the shoes just chillin’ in the corner.

I, being the senior techie, get my own cubicle. Note the paper clutter on the desk; it is a sure sign of productivity (and they sure help catch any runaway condiments leaking from my Subway sandwiches).

(Three computers, four screens and a whole lotta carpal-swivel-neck-syndrome.)

Some whiteboard scrabble:

Don’t let the appearance of ‘fun’ fool you. Dave works us like dogs. We have to, cuz he works pretty hard himself.

It’s pretty hard to get this guy out of his cubicle. “Hey, wanna get lunch?” we ask him, and he says, “Sure, in five minutes.” Then about thirty minutes later we finally get to pull him away off his important phone conferences and whatever he does as a Founder Person.

But seriously, it’s been a ton of fun working here, getting tons of good experience, panicking like real people with real responsibilities do, learning how to run a business in a constantly changing market (the solution? work smarter, not harder. and don’t sleep). And we do keep kidding Dave about how he drives us like slaves, but I love the guy. His heart is in the right place, for sure.

The tech team says “Hi”.

(For more pictures, visit my FAQQLY Farm photoset)

Group things together on the Web

Let’s say you’re looking for a book online. You’ll hit up JStor or Google Books and browse through the pages of that book you found. Easy enough, right?

In reality, the physical, electronic representation of the book online is actually more than just “that book on JStor” or “http://www.jstor.com/book”. It’s actually a collection of images on a Web server. We need a uniform way to descibe that jStor’ specific online version of “War and Peace” is actually comprised of “page1.jpg”, “page2.jpg”, et cetera.

As another example, let’s say that the local public library wants to create a digital representation of its materials on Jimi Hendrix. Well, the library’s got Jimi Hendrix CDs, Jimi Hendrix books, Jimi Hendrix magazine articles, and so on. With the OAI-ORE protocol, we can create a digital “Jimi Hendrix @ Your Local Public Library” object that lists out each CD, book and magazine article contained in the library.

Let’s say on top of that, a certain Jimi Hendrix biography references “Little Wing” on pages 12, 141 and 254. This “Jimi Hendrix” object is capable of encoding that reference from those pages to “Little Wing” on the “Axis: Bold as Love” album in the library.

Why even have a description framework?

As the Web gets more connected and as we’re seeing the rise of interoperable Web services, it becomes increasingly important to have a standard resource description language. Various protocols (such as RDF) have built a foundation on which to describe relationships between electronic resources.

Think of OAI-ORE as a way of organizing information for re-use by others. If every library created its own “Jimi Hendrix” resource object and made them accessible to others, we could potentially create programs and Web services to collect all “Jimi Hendrix” objects from across the globe and reconstruct the ultimate, canonical Jimi Hendrix electronic resource library. We could note which books made references to “Little Wing.” We could view “Little Wing” as an WMA file, an MP3 file, or as lyrics.

The key is that by standardizing a description language, we enable programmatic ways to collect and synthesize data that can potentially add to the value of the world’s sum knowledge.

Resource maps & implementation formats

OAI-ORE is a specification that defines relationships between resources through an object called the resource map. The resource map is a resource file enumerating a collection of resources and describing the relationships between each resource. Each resource map has its own URI, so it can be discoverable and accessible.

There is no standard file format to encode resource maps. Currently, the OAI-ORE working group has suggested the following description formats (HT: Univ. of Queensland):

• RDF (Resource Description Framework)
• Atom syndication format
• YADS
• TriX (RDF triples in XML)

The recommended method of describing a resource map is in RDF/XML. I’m not very familiar with the RDF syntax, however, and the TriX format, which affords us RDF triples that can easiliy express relationships between objects and resources, seems to make more sense to me.. However, there is a complete Atom implementation of the protocol, used when syndication is preferred.

I’d definitely refer the reader to the Univ. of Queensland’s OAI-ORE PDF overview for a broader overview of the protocol and its potential implementations.

The nitty-gritty

Collections: Multiple resources can be grouped together, but only via an “aggregate object” or a “collection”, which maintains pointers to each object in a collection.

Links: Links describe relationships between objects in a resource map, such as “has-part” (“War & Peace “-has-part-“page 2”) or “derived-from” (“Radiohead - 15 Step Remix”-derived-from-“Radiohead - 15 Step”). Actual relationships depend on selected vocabularies and namespaces (meaning you can change the link relationships to be whatever you need them to be). There is a list of default namespaces on the spec.

In conclusion

I took a high-level and somewhat abstract tack in describing the protocol, and would direct you to the OAI-ORE Primer for more implementation specifics. Apologies to those of you who were completely lost in this discussion.

I’m excited about developing standards like these because resource mapping protocols such as OAI-ORE are an instrumental step in connecting resources, services and information on the Web. They’ll help us “connect the tubes” and create the infrastructure needed to link the world’s information together. Now that’s pretty cool.