Portfolio
Here's a non-exhaustive list of projects I’ve worked on.
Exploring Enrollment was my Digital Humanities independent study project, conducted during UCLA’s 2020 winter quarter and advised by professor Ashley Sanders Garcia. I wrote a set of web scrapers that pulled enrollment data from thousands of UCLA courses over the course of 6 months. Exploring Enrollment was the analysis of that data.
Course enrollment data continues to fascinate me; I’ve continued the work from Exploring Enrollment on to Hotseat.
Datadog is a SaaS cloud monitoring platform. From January to May 2019, I was an intern on the data vizualization team at Datadog.
During my time at Datadog, I ended up working with a lot of different people and parts of app. Some of the work I did:
- Individually completed a team OKR by overhauling Datadog’s frontend number formatting, making numbers easier to read for humans and taking number formatter test coverage from ~15% to 100%.
- Completely refactored Datadog’s frontend handling of units by adding a global frontend definition. This removed thousands of lines of code, improved type safety, and enabled caching for users, reducing page size by 2.6kB on every subsequent page load. Implemented a bash script to Datadog developers to easily update units in the future.
- Analyzed the performance of high cardinality graphs and defined sensible series limits in Datadog’s data fetching endpoint, reducing initial page load time and improving page performance.
- Implemented telemetry in various places across the the frontend. Created dashboards of tracked metrics and reported conclusions to team. Fun fact: Datadog uses Datadog to track frontend telemetry!
- Acted as the official onboarding “buddy” of an incoming intern. I scheduled weekly 1-on-1 meetings and acted as both a technical and general Datadog-related-knowledge resource.
- Planned and led a frontend engineering discussion of 8 engineers on working with side effects in Redux.
- Triaged issues and squashed bugs ad-hoc and on a weekly team support rotation.
- Removed unescaped HTML code paths to reduce Datadog’s vulnerability to XSS attacks.
- Added tooltips, buttons, a collapsable sidebar, types, documentation, and tests to fullscreen graph views.
All in all, it was a fun five months 😄
Lux is the Daily Bruin’s design system.
The Daily Bruin has a long history of creating bespoke, interactive online pages for longer-form pieces that student journalists write. When I first joined The Bruin, these pages were usually coded using pure HTML, CSS, and JavaScript with libraries like d3 or jQuery. Oftentimes, we’d find ourselves having to create the same UI features for each new page: bylines, dropcaps, hero images that take up a user’s entire screen, etc.
Lux was created as my solution to that problem. I had been using React for a couple other projects and saw the component-based philosophy as a way for Daily Bruin developers to reuse and standardize core components that were similar across all web projects. I was also intrigued by the promises of static site generation by Gatsby, and set out to create a library for the Daily Bruin that would utilize both tools to make the development process easier.
I started working on Lux during summer 2018, creating some core components and setting up the tooling backing the project: documentation generation with Docz and JSDoc, component testing and snapshotting with Jest, autoformatting and linting with ESLint and Prettier, dependency management with Renovate, typechecking with TypeScript, and autopublishing to npm using the conventional commit style, semantic-release, and Travis CI.
In addition to creating the core design library, it was also important that Daily Bruin developers had a quick template to bootstrap. gatsby-starter-dailybruin is a starter template that imports Lux and sets up a couple demo article layouts, so that Bruin developers can get started on building pages on tight deadlines.
After my summer 2018 internship with Keybase, I continued to work part-time for them during the school year, implementing a Node.js wrapper around the Keybase JSON API. This library is for developers who want to create applications and bots with the Keybase service.
What I did during my few months of working on the Keybase bot library:
- Set up both development and build tooling.
- Implement support for “oneshot” logins with a user’s paperkey.
- Rearchitect the internals of the bot, using a mix of object-oriented and functional ideas to get a nice blend of an easy to understand and use external API, managable internal code, and atomic, testable functions.
- Extend the bot’s chat functionality by adding support for sending and receiving attachments and emoji reactions.
- Implement Keybase wallet support, allowing users to send and request Stellar lumens.
- Write behavior driven end-to-end tests for the above features.
I had a lot of fun working on this project and ended up learning a lot about managing processes, files, and API design. The code for the bot is open-source and available on GitHub; you can all view a list of all of my contributions there as well.
I interned for Keybase after my sophmore year at UCLA. While there I worked on Keybase’s open-source mobile and desktop client applications, written in React and utilizing Electron and React Native. During my time, I refactored and tested notification badging icons across 10+ interface pages on both the desktop and mobile applications, integrated server data into the client through Redux in order to provide more accurate information on unread chat messages, and implement major screens for Keybase’s integration with the Stellar cryptocurrency.
I’m currently doing my second internship at Keybase! The work I’m doing now is a lot more full-stack oriented, and is focused specifically on even tighter Stellar integration. Expect updates in a few months.
Since the Keybase client is open source, you can see all of the work I did on GitHub.
The Daily Bruin Alumni Network is an organization of Daily Bruin alumni that provides networking, mentorship, scholarships, career development, and community service opportunities. The network is relatively new, and this website was made to inform alumni about the DBAN’s mission, upcoming events, and ways to get involved.
The second Graduation Issue I worked on. For this page, we contructed an interactive timeline of events that had happened at UCLA over the past 4 years.
A spring feature that the Daily Bruin did on the University of California’s contract with the Los Alamos National Laboratory. I was responsible for designing, coding, and deploying the page on a tight deadline of just 4 days.
A story on the campaign finances of 38 candidates running for various positions of UCLA’s Undergraduate Students Association Council. The story and graphics were produced in 10 days. Most of the work of the article was done by manually parsing the data from scanned PDFs.
A winter feature for the Daily Bruin on the 2018 Oscars.
Sources is an internal database of the Daily Bruin’s contacts for stories that includes the names, affiliations, emails and phone numbers of various sources across Westwood that reporters can consult at any time. It has streamlined the reporting process and greatly assists the more than 500 student staffers on a daily basis. Since Sources deals with personal information, only Daily Bruin reporters are able to login and access it, but a live demo version with fake information accessible to anyone to show the breadth of the tool.
The first iteration of Sources was created before I joined The Bruin, but was starting to show its technical debt when I became an Assistant Online editor last year; it had security issues and was often down. Most news writers had given up on it. After examining the current source code and talking with reporters, editors, the former developers who wrote the original app and our current devops team, I decided that a total rewrite of Sources was in order. Starting a new project gave me an opportunity to combine various technologies that I had never worked with before into a complete production application.
I decided to try as many new technologies as possible while still making logical engineering and architecture decisions, and to document my process so that future developers could modify Sources as necessary. The News editors wanted the site to be fast and responsive, so I chose to write the frontend of Sources in React, using TypeScript to ensure that any type bugs were caught early on in development. Since I was using TypeScript on the frontend, it made sense to also use TypeScript for the server that would manage and store data and users, using the Node.js runtime and Express.js framework, as well as GraphQL in order to pass data between the frontend and server. On the advice of the devops team, I planned on running this sever in a Docker container and using Postgres as Sources’ database.
In order to make each technology work in the context of the entire app, I took a piecemeal approach. I started with a Node.js server, then brought in TypeScript, then GraphQL support, then the Postgres connection, etc. It was the first project in which I did not have a given template for how to layout each file and I found myself putting a lot more time than I originally expected into considering a logical architecture of my code. I was forced to become an expert in each of the technologies I had chosen in order to use them together as part of a larger, cohesive product.
A fall feature for the Daily Bruin published on student homelessness. I led a team of 5 on developing this page, and was responsible for designing and delegating tasks, in addition to contributing development work myself.
Registration Issue is the Daily Bruin’s first issue of the new school year. Similar to our work for Graduation Issue, I and my other Online editors created a centerpiece page to showcase all of the content written by the Bruin’s staff. We also took this oppurtunity to create a tooling template for DB Online static projects.
Traditionally, the Daily Bruin’s Graduation Issue is written by next year’s incoming staff. As an incoming Assistant Online Editor, I worked with my other Online Editors to create a digital homepage for the last Daily Bruin issue of the 2016–2017 school year. During the tight deadline, I learned a lot about npm build scripts, Javascript templating engines, CSS post-processors, and just how little sleep on I could run on.
In 2018, the site won first place for “Best Use of Multimedia” from the Society of Professional Journalists Region 11.
Stream UCLA Radio on your iPhone! I worked on localizing show times across timezones and implementing reminder push notifications for specific shows, refactoring the codebase, and integrating new interns on the project.
One of the main responsibilities of Daily Bruin Online is to create what we term “flatpages”, custom web pages for longer, featured content. This story on the 2016 UCLA Women’s Volleyball team was produced by myself and two other DB programmers, Colin and Lawrence, from start to finish in a span of about 10 days. This was one of the first websites I developed and designed; I was still fairly new to HTML, CSS, and JavaScript.
We used Bootstrap to quickly scaffold the project, then adding custom CSS on top to give the page a unique, “Daily Bruin” look. The parallax effect on the images was acheived by using a small jQuery plugin called parallax.js.
A simple non-reversing mirror app I wrote in a weekend after listening to a podcast on the topic.