BuzzFeed Hack Week: This Is What BuzzFeed.com Looks Like When Game Of Thrones Takes Over
BuzzFeed Hack Week is a biannual tradition that started in summer 2015 where fried chicken delivery Slack bots, data analysis chrome extensions, and projects like Humans of BuzzFeed were created in a span of a work week.
Teams for Hack Week form naturally, whether it is through word of mouth, a pitch during the weekly internal Tech Talks, or reading about the project on a spreadsheet or on Slack. Some projects are teams of one and some aren’t even projects at all — a few spent the week learning about computer networking, advanced algorithms, and machine learning.
So, what did Jess Kustra, Brandon Choi, and I work on for our first ever Hack Week project?
Introducing BuzzFeed & Chill — the website where your favorite TV characters go to for their daily dose of lists, quizzes, Tasty recipes, and investigative reporting. It is here where:
- Members of Game of Thrones’ Night’s Watch bookmark 7 DIY Hacks To Protect Yourself From White Walkers.
- Pawnee residents get their political fix by reading Ron Swanson from Parks and Rec’s 1 Reason Why The Government Matters on BuzzFeed News. (P.S. The answer is not Trump)
- There’s omurice. Then there’s omurice from Terrace House with a scathing message. Let Tasty walk you through this recipe in Here’s How You Should Actually Be Preparing Omurice. Ingredients: a squeeze of ketchup and a whole lotta shade.
- In the world of Broad City, you can find Abbi Abrams scrolling through 20 Reasons Why Bed Bath and Beyond Is A Godsend, sponsored by Bed Bath and Beyond, sitting next to a stack of expired coupons (wait, BBB coupons never expire).
- The most shared and talked-about content in Adventure Time was the controversial exposé on Princess Bubblegum being shady AF.
The last day of Hack Week, Demo Day was a blur where we merged and deployed our last bit of changes, and saw so many creative, innovative, brilliant projects from the people of BuzzFeed Tech. Some of our favorites included projects featuring augmented reality, VR, and a Slack game to learn other BF people’s names and faces. My team and I toasted to a job well-done after a week of pair programming, taking ice cream breaks, and struggling together through what seemed like endless development error logs.
What we accomplished vs. Our Nice-to-have’s
Here at BuzzFeed, we have over 200 services built with different technologies and plenty of legacy code. All three of us work on internal tools, several of which are powered by the front end library React. Hack Week was the perfect opportunity for us to check out the owned-and-operated codebase of our public-facing services. What we wanted to accomplish was to React-ify the web service for BuzzFeed’s landing page.
What we accomplished: We created React components for each element of the homepage and added BuzzBlocks, another web service with the shared elements and stylesheets, for the out-of-the-box landing page. After we had everything running, we each customized themes for our favorite TV series.
When a TV show, let’s say Parks and Rec, is selected in the drop-down menu (a state child component) in the header, its value, parks-and-rec, bubbles up to the parent component (also a state component). That adds the associated state class attribute parks-and-rec-theme to the container div in the parent component. This classname dictates what styles and data structures of content to be applied to the components.
For example, the parks-and-rec-theme selector changes the font to Times New Roman and Comic Sans, and it applies the JSON data structure in badges[parks-and-rec] to the row of badge icons. That is how you see the Pawnee government seals and fake “broken” icons in the right nav bar. Government websites: the true MVP of all websites.
Our nice-to-have’s: BuzzFeed & Chill was built by us for us, so we went wild with it with an anything-goes mentality. However since we only had four and half days to complete it, naturally there were some stretch goals that weren’t implemented:
- Fake content redirect page — Since we didn’t have actual content or links, clicking the links only redirected to the same page. It would have been fun to have the fake titles redirect to a HTTP status page that said “error 204 No Content: Fake News! This content does not actually exist.”
- Loading indicator — While React is pretty fast when updating the page based on state change, there is still an occasional lag, for example Parks and Rec badges would slowly transition out of the Game of Thrones theme. A loading bar would prevent the users from seeing this overlap of the two themes.
- Pop-up Easter egg: BuzzFeed production celebrated Pride Week this year by adding Babadook and rainbow confetti as an Easter egg on all BuzzFeed LGBT posts. We wanted to add a similar feature where a character from the selected TV series would randomly pop up.
What we wanted to learn vs. What we learned
What we wanted to learn: The first day of Hack Week, we shared things we wanted to learn. Collectively, we wanted to understand how BuzzFeed.com worked but we each had different things we wanted to hone in on. For Brandon, he wanted to learn React. For Jess, it was to be more hands-on with product and architecture design. For me personally, it was to learn how to lead a team.
What we actually learned: Brandon was able to pick up React really quickly. After creating the first component and walking through how the state worked together as a group, he was able to add a season premiere countdown Timer component based on the Game of Thrones state theme. Pretty impressive! The best part was right after Hack Week ended, he went straight to applying what he learned from BuzzFeed & Chill to his team’s current projects in React.
Another thing we learned a lot more — a LOT more — than we had anticipated was the architecture and flow of how our services talked to each other. Jess’s previous experience working for an agency where she had to start from scratch and spin up services for new projects was really helpful. She had a solid, intuitive grasp on the role of webpack in web apps and knew which areas to target.
As for myself, I learned being a leader doesn’t necessarily mean being an expert in every running part of software. A good leader asks the right questions to see the big picture, strategizes the most efficient approaches, and keeps their team engaged and motivated. However, my biggest takeaway was accepting the fact that mistakes will be made along the way, and that it’s not a bad thing. Making mistakes means recognizing the problem and making decisions on how to fix it, and learning from mistakes ultimately translates to gaining more experience.
Together, we learned the hard way:
- The pros and cons between using the create-react-app library versus cloning an existing service as a front end template. We did both, each which had its own set of problems. Cloning proved to be less painful in the end.
- Adding an auth proxy in order to make it go live with our PaaS deployment system rig. We tried, gave up, tried again.
- Getting webpack to run nicely with our private node modules. We went to hell and back — let’s just leave it at that.
It was also during this time that Brandon learned about my cravings and bad eating habits. Hey, nothing is wrong with eating Chipotle’s new queso and Panda Express at 7am.
What we struggled with vs. What we enjoyed
What we struggled with: We struggled in the first half of the week before enjoying the journey (which is quite the opposite of eating Panda Express).
The first two days were brutal when we were trying to get everything set up. We’d start the day motivated, with eyes bright and high hopes. By 3pm, our energy level would plunge, and we would constantly look at each other with mopey eyes as our console rolled through a laundry list of red ERR! errors. We wondered if we’d have anything to show on Hack Week. Alas, everything fell into place after we fixed our OAuth upstream issues and corrected the paths for our webpack.
One unexpected non-technical struggle was realizing how hard it was to come up with titles for fake content. BuzzFeed has a certain unspoken algorithm for click-worthy titles that Jess started catching on to after looking at past BuzzFeed content. It essentially became a MadLib formula where she could just replace the nouns and verbs. Boom! Catchy Title With Cool Slang Reference With Maybe A Subtle Joke is generated.
I reached out to our #terrace-house Slack channel for help in coming up with titles. A data scientist suggested “9 Things To Do When You Find Out Your Roommates Are Lowkey Hooking Up.” One person from Editorial was spitting out titles left and right like a generator. He turned my “The Meat Crime” into “Sometimes I Guess It’s Okay To Cry Over Meat.” It is moments like these that remind you you’re working alongside brilliant individuals, and colleagues who are willing to spend a few minutes of their schedule to help you relive the best moments of your favorite Japanese reality TV show. Quite important use of company time TBH.
What we enjoyed: Even when we were stuck, we were having fun. Getting lunch together each day made me realize how often I ate in front of the computer and worked through lunch. Another take-away I had was watching how others tackle obstacles. Jess and Brandon are the type of people who are determined in cracking the problem by hammering possible solutions left and right until it works. On the other hand, I am the type that needs to step away and take a break from the problem by working on something more trivial that can quickly produce results, and then returning to the original problem with a renewed sense of determination. Each approach is effective in its own ways.
What I really enjoyed was finding relevant GIFs, googling most iconic scenes for fake content creation, and having a pretty valid excuse to rewatch old episodes of our favorite TV series. It’s for the sake of research after all.
Our day-to-day work life versus Hack Week work life
Our day-to-day work life: Our New York BuzzFeed office is designed with plenty of open space for people to float around and collaborate, and is divided by departments on each floor. Normally engineering teams have sprint planning meetings and weekly stand-ups to share updates, pick up tickets to work on, and collaborate on any correlated tasks. For Learning Tools team’s sprint planning, we share wins and fails before going through tasks. This is great because it allows us to celebrate small wins together and provides an opportunity to share any additional context or clarify misunderstanding in failures. After that, we dive into our Jira sprint board to give updates on in-progress tasks while creating and assigning new tickets.
Hack Week work life: For Hack Week, we opted for an IRL sprint board using some cards and good ol’ scotch tape. There’s nothing like the satisfaction of physically moving cards from in-progress to done, old school style. Each day we took turns leading the meetings, giving everyone an opportunity to come up with daily check-in questions and planning the day. Having a retrospective session each morning helped us reflect on what could have gone better and think about how we’d structure our day.
Having daily standups and pair programming allowed us to grow together as a team. Pair programming was something Jess wanted to try since that is something that rarely happens at BuzzFeed. Typically we work independently and collaboration only happens through Slack, meetings, or when someone is stuck on something. For BuzzFeed & Chill, pair programming (triplet programming in our case?) half of the day allowed us to learn from each other and see how others worked. It also created great camaraderie among the team because we struggled and found the light at the end of the tunnel together.
Many things came out of Hack Week — creative experimenting, new feature ideas, learning new things, and consequently, a sandbox for a couple of junior-level engineers to practice leadership, break things without consequences, and intersect things they love: BuzzFeed, coding, and Game of Thrones.
Special thanks to:
@ddunlop
@taylorbaldwin
@raymond
@clineamb
#rig
#buzzblocks
#nyc-leftovers
Google for all our images
To keep in touch with us here and find out what’s going on at BuzzFeed Tech, be sure to follow us on Twitter @BuzzFeedExp where a member of our Tech team takes over the handle for a week!
