Forewords. Welcome to the second installment of the series! These articles aim to present how my friends and I are building Chinese Comedy at Silicon Valley, a stand-up comedy club in Cupertino, CA, from a software engineer’s perspective.
In the last post, I mentioned that our website, ggtkx.org, migrated from vanilla HTML to Jekyll. This migration proved immensely valuable, as it permits reuse of a very important component: the comedian bio cards.
We have a dedicated page for introducing our comedians. Here’s how it look like as of 01/10/2022:
Features. Each comedian has his/her own card. A card is composed of a profile photo, a short description, some contact info (optional), and links to a few curated performance recordings (optional). The cards are reused on the homepage, where we only present our top 6 comedians.
Data collection. Over the spring of 2021, 25 comedians submitted their information using a Google Form. The records sits snugly in a Google Sheets table, to which we added a column called “weight”. At the end of each open-mic event, we update the spreadsheet, incrementing the “weight” of each comedian who performed that night.
Data transformation. After the spreadsheet is updated, we run a 100-sloc script to update the website. It downloads the spreadsheet, removes people who didn’t submit a profile photo, sorts them by “weight”, and saves the data to our GitHub repo as JSON.
Technical notes. The script loads data with the gviz/tq?tqx=out:json API load data (explained here) and pushes commits with GitHub.js. In terms of authentication and authorization, we pass to the script our GitHub personal access tokens as a URL parameter.
Design choices. To keep our tech stack minimal, we made a few deliberate choices:
- Instead of using a “proper” database system such as MySQL or MongoDB, we exploit the Google Sheets document as our database. This is saves us the hassle of passing data from the spreadsheet to another data storage.
- We wrote our script in client-side JavaScript and served it at ggtkx.org/pull-sheet/, so that we can trigger it anywhere with any web browser. Since everything happens on the client side, static web hosting (such as GitHub pages that we employ) suffices. This saves us from having to rent a dynamic web hosting service.
These choices might drive you furious if implemented in your workplace, but they serve the purpose decently for a comedy club. Ockham’s razor put to use, isn’t it?
Note how our setup resembles a Model–view–controller (MVC) pattern:
- The model: The JSON file (loosely) defines the data structure. Technically speaking, we are one JSON schema away from a true data model.
- The view: The Jekyll template controls how the data is presented. Namely, where to put the profile photo on the card, what should be the color of comedians’ names, etc.
- The controller: The aforementioned data-updating script plays the role of a controller, although 1) it has to be manually triggered, and 2) no visitors to our website should ever care to update the comedian list on our behalf.
That’s how you know you’ve got a bunch of professionals behind the curtains — The separation of concerns just comes natural.
Hope you enjoyed this article! In the next one, let me take you for a tour to our front- and backstage: I will talk about our setup for live streaming, pipeline of recording & uploading performance videos, and channels of publishing our works. Stay tuned!
