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. CSVjcPvWcAEgVfK

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.” 

CSwhMRGWIAAKabc

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. IMG_0301

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.

  • Omar Domenech

    That was a cool read. I didn't know Nick with the awesome beard was behind CGC functionality. But I bet the real mastermind behind the coding is Stella the chihuahua. ;)

  • Jonathan

    Tis easy to overlook and under-appreciate valuable assets, people, and friends. CG Cookie is more than just a website. It's a lifeform with connections that go far beyond text on a screen. The work done here is inspiring, and I just thought I'd take the time to thank the CG Cookie team for all their hard work to enhance the lives of all those they touch. Thanks CG Cookie staff!! You guys are awesome!

  • n-harmony

    Great article!

  • Rain

    Thank you for sharing this with us! *twinkles*
    Web development is my dream job too, and your site is one of the handful of sites I've found myself admiring. To have the pleasure of reading a little behind the scenes like this makes my day.

  • Rain

    I can very much second everything you've said in that comment!

  • MARY THORNTON

    WHAT A BRILLIANT AND ENTERTAINING BIT OF INSIGHT! I MUST ADMIT TO TAKING UP TOO MUCH TIME OFF OF YOU GUYS WHENEVER I HIT ONE OF MY MANY SNAGS - UNCONCSCIOUS OF THE TAXING 'BEHIND THE SCENES' ISSUES YOU ARE DEALING WITH. I WOULD APAOLOGISE, BUT IT WOULD BE SHORT-LIVED IF I SAID I PROMISE NOT TO BOTHER YOU AGAIN, SO... NAH!

    I WILL NEVERTHELESS THANK YOU FOR ALL OF YOUR HELP OVER THE MONTHS. MUCH APPRECIATED - YOU'RE A FANTASTIC TEAM, AND GOOD TO SEE YOUR WORKSPACEES ARE JUST AS ERRATIC AND CRAMPED AS THE REST OF THE DESKTOP PLANET!

    MAZZA

  • akansha khare

    Your writing has impressed me. It’s simple, clear and precise. I will definitely recommend you to my friends and family. Regards and good luck Thanks
    It is the most widespread emerging sector that can nourish whatever you desire to create and it seems to be very vital. With the help of animation institutes in indore
    , quality education is provided in accordance with the changing world and making the competent professionals

  • Ryan Sweeney

    Thanks for the work you guys do! I really like how the site has morphed since CGC4. Thanks for sharing a behind the scenes glimpse of the work you all do. It sounds like a lot of fun! :)

  • tomthumby

    Hi,

    A couple of tools I use to get insanely quick database merges and great search models.

    https://en.wikipedia.org/wiki/OpenRefine

    And to create amazing search lists - and create mockups of how you want to make an awesome search idea work through categories, tags, bag or words, or test new categories all under a separate quick and dirty build environment. I use import.io to scrape & build my mix of tables to a custom new scheme, with openrefine to clean up any gnarly stuff and add in new columns or rows.

    Then I make a 'mock-up' jump to calyedo line-up to make awesome search models (look at the university example) you can bolt hundreds of concepts together to see how they toss out results as a test. So this tool is fantastic to map out new thinking without building anything complex. Followed by http://caleydo.github.io/projects/domino/ for subsets (tags etc) and to round off any subset category testing or exploration of deeper customer relationship meaning I use(Upset) which allows me to look at the deeper (relationship info that may not be visible >> eg: intersections, and set membership. http://vcg.github.io/upset/about/

    So many new tools out there to nail down the 'ornery' stuff.

CG Cookie

Learn Art. Make Dough.

Enroll in to our digital arts program and choose from four different disciplines; each with quick paths to measured success baked just for you.

Start a Free TrialorLearn More