Community: Required Reading Postmortem
This brief article will be some collected thoughts and learnings from making Community: Required Reading with my friends. If you haven't checked it out, I recommend it! It's a website that collects every parody and pop-culture reference from every episode of NBC's hit sitcom Community, organized by episode.
History 101
The idea was born on January 4th, 2021. My friend Sunny Nagam and I were doing some technical interview prep together, since we both had interviews coming up. As is usually the case with the two of us, any time we get in a call, it never ends up just being for what we initially set out to do. Very quickly we devolved into one of our favourite hobbies, coming up with random ideas for things we'd like to eventually do.
I can't remember exactly how we got there, but eventually I started sending him some assorted works of Lynn Fisher's. She's a creator I admire quite a lot, because her projects are interesting, creative, technical explorations of her favourite things. From cataloguing all the apparel David Rose wears in Schitt's Creek, to an exploration of three-letter airport codes around the world, the only common thread between all her projects are the love she has for the content.
Simultaneously during this call with Sunny, the topic of Vue.js came up. Another member of Cobresun, Cole Adams, happens to be a full-throated evangelist for the web framework, and his influence has spread through Cobresun like wildfire. Sunny had the opportunity work with Vue on a project he and Cole collaborated on for school. Sunny was now suggesting that I learn Vue.
One thing lead to another, and all of a sudden there I was coming up with the idea for this project while chatting with Sunny.
Lesson #1: The Adjacent Possible
There's this concept I love called the "Adjacent Possible" which I first came across in Cal Newport's So Good They Can't Ignore You a few years ago. The basic idea is that if you've got a pool of chemicals sloshing around, you may or may not have all the ingredients necessary to create a new compound. But let's say you periodically find new chemicals, and add them to this pool. Theres a chance that eventually, maybe on the 3rd or 10th or 100th addition, you'll eventually add something that is the "final piece of the puzzle" needed to make a compound.
The adjacent possible in Newport's book was talking about new innovations being created. It's the answer to the question: Why do many of the great scientific innovations not happen for centuries, but then all at once within a decade or so, multiple scientists from around the world come up with the same idea? The explanation is the adjacent possible. All the ingredients for that scientific innovation was gathered by humanity over centuries, so once the final puzzle piece is in place, it's only a matter of it being sloshed around enough before some people connect the dots.
I think that any creative project has some element of the Adjacent Possible to it. Heres just a few of the ingredients that had to come together here for this project to get made:
- I am relatively new to web development, having only learned React.js at the beginning of 2020 for a now delayed project that the final member of Cobresun, Wesley Tang, had asked us to work on. Nevertheless, knowing React helped me visualize the technical details of Community: Required Reading in my head while discussing it.
- I've been a fan of Community since 2011 and have rewatched it many times since (the latest rewatch being April 2020).
- Sunny and I happened to be calling because of interviews.
- Cole had to shove Vue down our throats for months before it finally found it's way into one of our projects.
- I've been a fan on Lynn Fisher's work for a few years (first found her through her various site redesign projects) and I happened to have seen the David Rose project a few weeks before this call with Sunny.
My point is, you can't underestimate the adjacent possible. I am not entirely sure what the lesson here is. Maybe it's to consume lots of great content, have lots of great calls, and when an idea strikes, give it a serious consideration before dismissing it?
Lesson #2: Parallelizing Work and Task Boards
Literally that night, on January 4th, 2021, after Sunny left for dinner, I got started coding the website. I began with Vue's tutorial and documentation, optimizing for quick results and not necessarily good code. The first night was just some Vue boilerplate (Hello World of course) and hosting that boilerplate on Netlify, so Cobresun could quickly look and provide feedback on the latest build.
Day 2 (Jan 5th) was creating the JSON that would store everything, defining some Vue components for the episode grid, search bar, episode pages, and this was also the day Sunny joined me in coding, implementing routing and making the cards pretty.
One of the key lessons I've learned over the years is how important parallelizing tasks can be. We started by separating out the code such that Sunny and I could code in parallel on different files, so we wouldn't have to deal with merge conflicts. This also made for an easier to understand and debug codebase, which helped onboard new developers. As a bonus, we all just pushed to master to avoid the overhead of reviews taking too long 😅 (Was this the best idea? Who knows?!)
Additionally, we separated out what work was left to do using Github Projects Kanban board, which ended up being extremely useful as more members of Cobresun started working on the site. You have to get the whole team on board with this system to work like a well-oiled machine. For example, Sunny was terrible at keeping the board up to date with his work (sorry for calling you out publicly bro!) but we were small enough that I could just update it for him. I think getting this system to be a part of the process for everyone is the key to taking advantage of it.
On Day 3 (Jan 6th) I worked on more of the code, and started importing data into the site by manually scraping the Community Wiki. Sunny was taking a break this day, which was probably a good idea, but I have this constant fear when working on a new project that I need to work on it practically non-stop until it's done if I want to ever finish it, otherwise I'm prone to dropping it halfway... This is something I'd like to work on.
Day 4 (Jan 7th) was a big day, because Cole returned from a ski trip, and was overjoyed that Sunny and I had started working on a Vue project! He asked if he could help, and that handy Kanban board I mentioned earlier came in use. We could simply send him the link, and he was off to the races! This was the day Sunny added the amazing navbar, styling, and some bug fixes. I added the remaining references. Cole added some great UI improvements like season collapsing and custom CSS on different screen sizes.
Day 5 (Jan 8th) was around the time we started heading for the endgame. We had animations, sizing, and other minor improvements. It was on this day that we decided to do a launch on January 10th, the last day of our Winter Break before Sunny, Wesley, and I headed into our final semester of University. The reasoning was simple, I just didn't want to overwork myself once the semester started, and I would prefer if I could be fully emotionally separated from this site.
Day 7 (Jan 10th) came the final necessary code changes before launch. I sourced and added all the images for each episode, which Cole made some optimizations to for size. Wesley updated the About page with a disclaimer, and created the logo. We created a Twitter and Reddit account for Cobresun, and added a Kofi to accept donations should any kind souls decide to donate.
That night we all got on our weekly call, and then we launched, by sharing to Twitter and Reddit! 🎉
Lesson #3: Deviating From the Plan
The original idea was deceivingly simple on paper, so we jumped at it. The final version of the website you can now visit is pretty much exactly how we wanted it to look and function when coming up with the idea in call, with one notable exception. We originally wanted hand-drawn images for every episode, that were of pop-culture references in each episode. After some debate later in the week as we neared completion of the site's functionality, we decided that would be too much work and we'd never launch anything if we tried to draw 110 individual pieces of art. Thank goodness we decided against this!
The Reaction
We were pleasantly surprised by the positive reaction we got. My expectation was that we'd get exactly four visitors (each of us in Cobresun) and maybe one more if my brother opened the link... We turned on Netlify analytics for the first month, and this was the result:
We're fairly positive the usage of the site has tapered off, with a few visitors a month now, but I'd like to think at least one person out there is using the site regularly for their latest watch through of the show 😁
Emotional Consequences of Broadcast Television
In the end, the week we spent making this site will, looking back, be one of my favourite weeks that Cobresun had. I spent 25 hours that week working on the project, which is not bad all things considered. The result was a really fun website I genuinely enjoy clicking around and scrolling through!
A quick recap of the lessons learned:
- The adjacent possible will lead to serendipitous project ideas, don't dismiss them
- Get started right away, and without overworking, try to keep at it consistently until an MVP is done, so you don't drop the project unfinished and un-launched
- Parallelize the work in code to avoid merge conflicts, and have a lot of trust in your team
- Kanban board of up-to-date tasks to work on is esssential
- Be okay with changing the original plan to make your life easier, as we discovered, people will likely not notice and not care
- Know when to call it, and make a big deal out of launch day, because it's fun!
Now I'm itching to do another Community rewatch...