Thoughts

Opinions - Reflections - Meditations

Projects

CS - Design - Misc

Travels

Adventures on Earth

It's a headache to plan out your degree. Here's a graph approach to efficiently solve course allocation via the Edmonds-Karp algorithm.

A max flow approach to course planning

Founded in 1799, The Dartmouth, Inc. launches its mobile app in 2021.


<a href="https://apps.apple.com/us/app/the-dartmouth/id470772769?itsct=apps_box_badge&amp;itscg=30200" style="display: inline-block; overflow: hidden; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; width: 125px; height: 42px;"><img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1318982400&h=dfce91242f0b42efb687aeda88b04cda" alt="Download on the App Store" style="border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; width: 125px; height: 42px;"></a>

With 222 years of history, _The Dartmouth_ is the oldest collegiate newspaper publication. Paper has been our tried and trusted medium through these ages. Fresh copies are printed daily and disseminated to the hands of students, faculty, staff, and alumni.

Yet regardless of how established our history is, the landscape of journalism is changing. Students rarely have the time now to appreciate printed type. With our phones buzzing endlessly with social media and news feeds, we had to pivot to cater to this new market.

As the technology director of _The Dartmouth_, I spearheaded the initiative to build our mobile app for iOS and Android. In designing the UI, I wanted to capture the delightful aspects of traditional print while catering to the ease and mobility of the digital world.

The reader view embodies a minimalism that you find on paper, hiding UI distraction that interrupt the story-telling.

![Showcase of the app's reader view.](../assets/post-images/the-dartmouth-app/reader.png)

I also wanted to showcase the unique art and cartoon columns that we publish which enrich campus journalism so much. Each had their dedicated page as they did in print.

![Showcase of the app's cartoon column.](../assets/post-images/the-dartmouth-app/cartoon.png)

Of course, I also wanted to leverage the benefits of a digital format. I created a way for students to discover stories that are important to them. Powerful search features let them traverse through years and years of Dartmouth's history and learn about the college through the eyes of students who came before us.

![Showcase of the app's discovery features.](../assets/post-images/the-dartmouth-app/discover.png)

In addition, simple yet powerful tools like bookmarking and sharing articles help users stay engaged with the app and our authors.

As the active maintainer for this project, it's a great honor to have led the digital reinvention of _The Dartmouth_, catapulting its well-respected history into our current age. Please reach out to me at [tech@thedartmouth.com](tech@thedartmouth.com) if you are excited about the future of journalism and want to contribute!


Bringing two centuries of history into the digital age

We built a platform to empower the nation's largest and oldest collegiate outing club.


The Dartmouth Outing Club is the largest collegiate outdoors club in the nation, running over 500 wilderness excursions per year, ranging from short day hikes to week-long backpacking trips in Peru. It also claims the title as the oldest, with a long history founded in 1911.

Yet it wasn't until this year when digital technology came into the picture to help with the club's operations and foster a stronger outdoors community at Dartmouth College.

Many excursions go out every week, and it's always been a headache tracking these expeditions. The whiteboards at the office in Robinson Hall was often overwhelmed with notes.

![Image of flooded whiteboard calendars managing trips.](../assets/post-images/trailhead/status-quo.png)

The other problem came from outside the Club's operations. Most students weren't aware of the plethora of opporutnities to get outdoors. Most trips are fully-funded and free for students, but many students aren't in the loop to know when to sign up.

Trailhead emerged with the sole mission of promoting outdoor culture at Dartmouth College. This involved increasing accessibility to opportunities, inspire students to find excursions that fulfills them, and help plan all underlying, busy logistics.

The first two aspects were spearheaded by a design-first mindset when creating Trailhead. We brainstormed ways to make outdoor trips dicoverable and fun. We built powerful search features to help students find what fits their interests and physical abilities.

![Demo showing how students around campus can find and sign up for trips.](../assets/post-images/trailhead/demo.gif)

![Designs showing what trips look like on the platform.](../assets/post-images/trailhead/tiles.png)

The third aspect drove feature develpment to make trip maangement as seamless as possible for the tireless staff members of the Outing Club. These include birds-eye calendar views, trip forms, gear inventories, vehicle fleets, and membership lists.

![Showcase of trip management dashboards.](../assets/post-images/trailhead/calendar.png)

Since Trailhead's launch last fall, we've helped over 1,600 students get outdoors on over 650 trips! If you're passionate aobut the outdoors at Dartmouth and technology, reach out to the active maintainer Ziray Hao. We greatly appreciate all the hands who helped bring Trailhead to fruition: Benedict Tedjokusumo, Regina Yan, Justin Luo, Dorothy Qu, Emma Rafkin, Morgan Sorbaro, Ashley Song, Sydney Friedland, and Grace Thompson.


Designing for the outdoors

Apple told me to never leak these new OS wallpapers.


I'm a huge fan of Apple's collection of macOS wallpapers that feature stunning natural wonders: El Capitan, the Sierras. Mojave dunes, Catalina coast, and more.

But it's time we also appreciate the hidden wonders from our next door neighbor — Mars.

I've curated a collection of captivating wallpapers that capture the red planet in its glory. These are courteous of NASA's rich galleries, coming from both the Reconnaissance Orbiter and the Curiosity Rover. [Here it is](https://drive.google.com/drive/folders/1h2f2tULpPkKMD_nbeIJZ66IifKkXNewz?usp=sharing).


marsOS wallpapers

A neat puzzle solved with TypeScript's powerful recursive typing.

## Background

I wanted to showcase a fascinating TypeScript puzzle I encountered during a project with [AWS Step Functions](https://docs.aws.amazon.com/step-functions/latest/dg/welcome.html). For those unfamiliar, Step Functions are state machines with each state containing a certain function. These functions can be making a Lambda call, querying DynamoDB tables, broadcasting events to SQS, etc.

Naturally, each state in the machine had an input and output interface. The core rule is that if `stateA` feeds into `stateB`, then the input interface of `stateB` must be a _subset_ of the output interface of `stateA`. Conversely, the output interface of `stateA` is a superset of the input interface of `stateB`.

I worked on an SDK for AWS Step Functions built on TypeScript. My goal was to leverage the power of TypeScript's static typing to help developers manage the input and output interfaces for the states in their state machine. For instance, I wanted the IDE to warn the developer if their state IO interfaces did not match up correctly.

Therefore, I need to design a notion of "subset" and "superset" type relationships using TypeScript.

## Subset

Designing subset was pretty straightforward. I started with:

```tsx
type Subset<T> = {
  [K in keyof T]?: T[K];
};
```

This requires that fields in `Subset<T>` only come from fields in `T`. Here's a demo of this:

```tsx
interface Foo {
  foo: string
  bar: number
}

// this is good!
const subset: Subset<Foo> = {
  foo: 'foo'
}

// this is bad, field `moo` doesn't exist in `Foo`
const notSubset: Subset<Foo> = {
  foo: 'foo'
  moo: false // IDE underlines this
}
```

But we've only designed subset logic on the first layer for these interfaces. In other words, this won't work:

```tsx
interface Foo {
  foo: {
    bar: number;
    moo: boolean;
  };
}

// should be good, but IDE says we're missing field `bar` in `Foo`
const shouldBeSubset: Subset<Foo> = {
  foo: {
    bar: 1,
  },
};
```

Hence, we need to apply our subset logic to every level, recursively. We can easily do this because TypeScript offers recursive typing!

```tsx
type Subset<T> = {
  [K in keyof T]?: Subset<T[K]>;
};
```

Now this finally works at any depth level. Here's a [playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBAygrgIwM4WAHgCoD4oF4oDeAUFFANoDSUAlgHZQDWEIA9gGZQYC6A-AFyxEKdBkpcsRAL5EidYBABObAIYBjaADEWLQiVJQ22gUmAK6AcwDce0gmUKBxfc6gBbI1FpxXCRdZf65h4I2gA2EMq0-vrS0kSqLLQmUEhCqALwyKhoWiw4+E76dg66AaRBLAKmcBA2ULFAA) to demo.

## Superset

Designing the superset type was tricky. I started with:

```tsx
type Superset<T> = {
  [K in keyof T]: Superset<T[K]>;
} & {
  [ExtraField: string]: unknown;
};
```

This is saying that the superset needs to contain all of the fields in `T`, along with any extra fields handled with `unknown`. However, we now need to handle "base cases" in recursive typing where values are of `boolean`, `number`, `string`, or `Array`. Why? These base cases can't be resolved with `Superset<T[K]>` because `Superset<T>` only handles objects.

```tsx
type Superset<T> = {
  [K in keyof T]: Superset<T[K]> | T[K];
} & {
  [ExtraField: string]: unknown;
};
```

By simply adding the `| T[K]` base case, we handle the base cases for primitive types. Now this works! Try it in this [playground](https://www.typescriptlang.org/play?ssl=24&ssc=2&pln=1&pc=1#code/C4TwDgpgBAygrpATgZwsAPAFQHxQLxQDeAUFGVANoDSUAlgHZQDWEIA9gGZSYC6AXLAQQUaLNR64APt3EBuYgF8oAMiKlyFAKIAPYIgCGAMVoQANgBMByPQwDm-KHHpN6bAO715C4sQbBhHPoAxtCGbGxq5FAc4VY29LbyUQBG+ogCJFFRALaxUPRw2cnCSVlktnnJ4aYQ+p7qZN7exEFs9NZQyEIiwALwSKgYYWy4BJnkMWwCAOQAFmambNMANA1QqemRZVC5U1AAjKvbUBV7enAQR9uzeXMLS1dli3sUh1AATDxrCo9QYHn7RRAA).

Recursion with TypeScript

Ever wanted to become a master at pong? Just train against yourself for thousands of epochs. How fun.

Designing simple RL-trained pong agents to play against each other

Someone told you to count the most frequent words on Twitter in any given day! Here's a few algorithms to help you.


[Project GitHub](https://github.com/ziruihao/twitter-stream-algorithms).

## Data stream algorithms

The classic college introductory algorithms course nags bright-eyed students to focus on time optimization. Big-O-big-O-big-O is all we can think of and achieving that logarithmic runtime is the end-all-be-all. But what about space? This is an aspect of algorithms that I wish introductory courses touched more upon. There arises some fascinating problems (and approaches) when the major constraint is not time, but space. And in today's age of massive data lakes and unwledy pipeline streams, these space-oriented algorithms are very relevant to industry.

Data stream algorithms tackle problems with large quantities of streaming data with a focus on space optimization. It's relevant to situations where engineers could not feasibly rely on there being enough storage to run traditional `Ω(n)` algorithms (`n` or more). Most approaches are random algorithms that relinquish the search for deterministic solutions in lieu for feasible solutions.

// demo simple counting algorithm

## Algorithms in action

I wanted to try out some of the algorithms I learned from [COSC 35](https://www.cs.dartmouth.edu/~ac/Teach/CS35-Spring20/), taught by Professor Chakrabarti at Dartmouth College. The course was heavy on theory, focusing on proofs of correctness and bounds derivations. I wanted to see them in action against real world data.

### Twitter

Twitter offers a near-realtime API for a slimmed-down portion of its main platform stream.

### Shakespeare

I also decided to try out these algorithms on a stream using words from 100 of Shakespeare's works. The raw text was accessed from [Project Gutenberg](http://www.gutenberg.org/cache/epub/100/pg100.txt), cleaned, and extracted into 219 separate works, each containing around a few thousand words. The stream chooses a particular work and feeds the words the same way as the Twitter streaming process.


Twitter stream algorithms

Print "Hello world" they said. But build the computer from scratch, they said not.


I'll write up more about this perplexing adventure when free time finds me again. But here's a brief synposis.

The final project for CS51 Computer Architecture was to print "Hello world" via a computer program. Now the twist: what programming language? Unspecified. What runtime? Unspecified. What operating system? Unspecified. What assembly language? Unspecified. What computer architecture? [Y86](https://esolangs.org/wiki/Y86). So that's where we started, first by wiring together all the critical components for a simple Y86 CPU: RAM, memory (instruction and data seprated because we like [John](https://en.wikipedia.org/wiki/John_von_Neumann)), ALU, various addressing and splitting modules, and so many wiring paths threatening to become non-planar. With our logic board filled to the brim, we began designing our assembly language and finite state machine.

Here's where free time ran away from me; I shall add more to this article soon. Spoilers for the ending: seeing the characters `H e l l o w o r l d !` emerge out from the computer's wires in binary representation of ASCII was among the more stasifying moments of my computer science journey.


Wiring up a Y86 CPU in a logic board simulator

When we came to Dartmouth, we saw academic planning needed to meet human-centered design. We built D-Planner to help every student discover courses they like, keep track of requirements, and plan their academics thoughtfully.


D-Planner started with a couple of students who thought deeply about how they wanted to design their four-year degrees at Dartmouth.

Our college offerered a plethora of fascinating courses across countless fields of studies. We curious creatures wanted to explore everything; we wanted to read the Epics of Homer, examine the geopolitics of Asia, learn to converse in basic Japanese, unravel the mysteries of cellular mechanisms, and wire together logic gates to build a Von Neuhmann architecture.

But with only 36 credit hours and ever-rising tuition bills, we had to choose wisely.

Designing our degrees was an arduous process. However, the college provided few helpful resources to guide us. Students suffered indecivieness faced with unprintable, never-ending lists of courses. They had to constantly replan after reading outdated information. They were completely lost in amidst the twelve academic terms without a way to map together course dependencies and major requirements. During the week of course selection, everyone hoarded hundreds of Chrome tabs holding scattered course information and drew complicated flow diagrams to map their degrees.

![The frustration of planning courses.](../assets/post-images/d-planner/planning.png)

We built D-Planner to help every student visualize their academic trajectories at Dartmouth. As students who went through the same process, we knew our users' most vital needs. Our design process was well-informed through personal anecdotes and numerous conversations.

The key element of D-Planner is that the platform's dashboard shows a student their entire four years at Dartmouth in one glance. This bird's eye view empowers students to visualize the big picture and plan far into the future.

![Demo of D-Planner's main dashboard.](../assets/post-images/d-planner/demo.gif)

Students seamlessly drag and drop courses between each academic terms to simulate different possible academic journeys they could take. D-Planner strives to keep track of the small details for students so they don't have to, computing course prerequisites, when they're offered, and other factors. For instance, we alert the student when they try to drag a course onto a term where it's not offered.

![Screenshot of D-Planner's search features.](../assets/post-images/d-planner/course.png)

D-Planner's second mission is to empower discovery and inspire exploration. Our powerful search features allow students to easily traverse through the master catalog of 3,000+ courses and find what fits their needs. We aim to broaden each student's choices and give lesser-known courses a share of the center stage.

![Screenshot of D-Planner's search features.](../assets/post-images/d-planner/misc.png)

With over 800 students onboard, 1,300 thoughtfully-planned degrees, and 27,000 bookmarked courses, we're excited to empower every student to narrate their own academic journey.

Reach out to the active maintainers (Ziray Hao, Adam McQuilkin, and Jai Smith) any time via [hello@d-planner.com](mailto:hello@d-planner.com)! We always appreciate everyone who has contributed: Ben Cape, Christina Bae, Adam Rinehouse, Raul Rodriguez, Madeline Hess, Gillian Yue, and Regina Yan.


Design your academic journey through college

A passionate company, driven identity, and a know-nothing college first-time freelancer. What could go wrong?


I offered to do a branding experiment for the [Spinach Angels](https://www.spinachangels.com/) investor group who was looking to refresh their identity. Their name came from the idea that they were the "vitamins for startup growth." Their approach is being close-knit and ultra-supportive for their portfolio companies and taking vital guiding roles during their seed stages.

![New logo designs compared to the original.](../assets/post-images/spinach-angels/transition.png)

They ended up not going for this brand direction, since it was a bit too casual. Nonetheless, this was still a fun excursion for my first dip into freelance work.

![Landing page designs.](../assets/post-images/spinach-angels/landing-page.png)


A branding experiment for an angel fund

A fun design project for CS25 UI/UX Design.


This was a fun team effort to find a need area and design a product for it. We started shyly with user interviews and digested these insights into user personas and journey maps. After staring blankly at these UX diagrams, we exploded into creativity, sketching crazy ideas without an ounce of embarassment. We continually refined these app ideas into higher-fidelity sketches, wireframes, and true-to-life mockups. Like Ph.D.s with their new doctorates in hand, we excitedly shared our designs with users for more testing and feedback. Some advice were music to our ears, some we didn't want to hear; but all were helpful. Weeks after, we ended up building a good chunk of the designs with React Native. No, it's not in the App Store, but we learned a lot.

My role on this team was mostly in design. I mostly conducted a lot of user research and the high-fidelity mockups and poster designs.

![Project poster.](../assets/post-images/passon/poster.png)


ZirayHao

Projects

Ziray
Hao