Coding the Cookie: How Your Favorite Learning Site Is Built

  It’s a cold autumn morning in Boone, NC and the clock has just struck  7 am. At his desk, Nick Haskins, CG Cookie’s head developer, is already engrossed in work. A cup of a strong black coffee next to his keyboard, he is a man with a cause:  “We just came across a pesky bug that confuses our users, so I am working on resolving it as soon as I can.” The bug in question is an error in tracking user progress: as it turns out, when a user finishes one of CG Cookie learning flows, their progress is reset back to zero. “Like any UI bug, I’m dealing with it as a priority,” says Nick.

Nick's workspace, which fluctuates between the kitchen table and his downstairs office.

900 miles away in Kansas sits Jonathan Williamson, a CG Cookie icon and a Blender wizard who works with Nick on the site’s development writing code, scoping out features and discussing the best techniques for making the perfect cuppa (Nick is a French-press guy while Jonathan swears by Chemex). Their communication tools have evolved over the years; currently, the development team (also comprising Eugene Cook, a system architect, and Wes Burke, CG Cookie founder) uses a blend of three tools: “Our real-time communication happens on Slack. For ongoing issues, we use a bit of Basecamp, and all issues are logged and tracked through GitHub,” explains Nick. "And, of course, WordPress: that is where all the coding action happens." Does miscommunication happen? "Hell yes!” laughs Jonathan. “During high-pressure moments, people can get a little frayed around the edges and we all have a tendency to read into text more than we should, so it’s easy to assume that the guy on the other end is being a jerk.” Jonathan knows how to keep things in perspective, though: “‘Never assume malice when it’s most likely just miscommunication,’ For me, these are the words to live by,” explains Jonathan. “We are all cool people here who like each other and we’ve learned that there is no issue a quick Google Voice call couldn’t resolve. And luckily, most of the time the communication is totally smooth.”

The Bearded Avenger

A lover of the outdoors, Nick spends as much time hiking in the North Carolina hills as possible with his family and it's indispensable member, a chihuaha called Stella ("She's a total daddy's girl," concedes Nick). You wouldn’t know it from passing Nick with his signature long beard on one of the hiking trails north of Boone, but he is the author of more than 90% of code that makes up CG Cookie. It hasn’t been a linear career path for Nick; with a photography background and a career as a veterinary technician, he has only been doing computer-related work for the past 5 years: “But perhaps all the more intense,” laughs Nick. “CG Cookie is a WordPress site and as such, it relies on some existing plugins,” explains Nick (known as "bearded-avenger" on GitHub). “It’s a matter of striking the right balance: do we want to save time and grab a ready-made plugin? It’s easier, but as soon as you rely on somebody else’s work, you often have to reverse-engineer what it is all about to truly understand it.” 

Nick and his chihuahua, Stella

The Secret Labs of CG Cookie

What if a new feature needs to be made from scratch? The team religiously follows the 5 W’s approach for each new feature, determining Who it is for, What it will do, When it will be deployed, Where it on the site it will appear and, most importantly, Why it is needed. “We take this seriously and make sure the answers to these questions are written up in GitHub,” explains Nick. At this stage, Wes comes up with the feature's design. “Once that is done, I build whatever needs to be built.”  says Nick. “The planning process is very important, but until you start building, you don’t actually know what you’re up against. So sometimes, it’s best just to dive in and get your feet wet.” “I do the coding and then pass it on to Jonathan for testing on CGCookieLab.com, our testing server which mirrors the actual site and allows us to make sure that everything works in the real world. If the new changes are given the thumbs up, we deploy them all in one go, typically on Thursdays.” While some changes are barely noticeable to end users, once a while the site undergoes a major update.

Keeping track of code-based changes

At any given time, Jonathan and Nick might be accessing the same code. How do they ensure that they don’t write over each other’s work? “To avoid conflict or going crazy with all the constant changes happening, we use Version Control –  a tool that allows us to keep track of changes, revert to older versions of code if needed and just straight-up organize and keep order in code that is being accessed and changed by multiple team members,” explains Jonathan.

Jonathan Williamson's workspace

Managing the database

A key element of CG Cookie is its huge user database, currently storing well over 100,000 entries. Upon registering with CG Cookie, each user is assigned a unique ID that is imprinted in everything they do – from uploading a gallery image to watching a tutorial. And this is the area currently giving Nick a headache: "If you watch a CG Cookie video, your progress is tracked and stored under your user ID, allowing you to restore it later if needed," explains Nick. "I wrote the function that does this, but it's not working right," he frowns. The database normally doesn’t get touched by the development team, but there are times when the sleeping beast must be awakened and tampered with. Jonathan (who's user ID is #3) remembers altering the database from CG Cookie 4.0 to CG Cookie 5.0, where all subsites (Blender Cookie, Unity Cookie, Sculpt Cookie and Concept Cookie) were merged into one. Jonathan speaks of the project in superlatives: “The most obscene database migration we’ve ever done,” he says. “All databases had something in common, but some things were unique in each of them. We had to alter them all and combine them into a new mega-database without compromising any information stored within.” This was a task that took Eugene Cook, CG Cookie's system architect, upwards of 6-8 weeks ("And huge props to him for making it happen!" says Nick) but thankfully, projects of this magnitude only happen once in a blue moon. “Any more often than that would be a serious strain on our sanity,” laughs Jonathan.

Prioritizing issues within GitHub

The progress-tracking bug now resolved, Nick scans GitHub for other open issues while sipping his favorite Bald Guy Brew.  The list is concise and organized by priority. "We try not do overdo it on issues," says Nick. "It’s easy to log every little thing and think, 'This will be quick and easy, let’s fix it right away and assign it to the next Thursday deploy!' Well, you can do that all week and end up with a hundred little issues and changes to make." "We find that it’s important to talk about issues, prioritize, and keep the list limited," agrees Jonathan. "If we finish everything, we can always add more. But having a huge list is always much more daunting.” How does Nick know what to tackle first? “We use labels to say whether an issue is a bug, an idea or critical. Anything that impacts user experience in a negative way is a priority and a fix will be going out in the next deploy.”

Heading for the hills

Developing a site with tens of thousands of active users can be a daunting job. How does Nick relax? “I put on my hiking shoes, grab the family and head to the hills,” says Nick. “There is nothing like a 10-mile hike in the woods to clear your head of code and GitHub issues.” All in all, is it fun? "Much more than that," says Nick. "We do some truly amazing things with WordPress and push it further than anything I've seen. In all seriousness, this is my dream job."

For more from the Bearded Avenger, stay tuned...Nick will soon be launching a code blog "for the nerds in the house" on how he builds CG Cookie.