Sorry! Internet Explorer is not supported on this site. Please view on Chrome, Firefox, or Edge.

Having fun at Zao is one of our values. We’ve put limited animated flourishes throughout our site to communicate our love of levity. We also recognize that onscreen movement is not fun or possible for everyone. We've turned off all our animations for you per your browser's request to limit motion. That said, we don't want you to miss out on the party.

Here's a funny joke to enjoy!

What’s a pirate’s favorite letter?

You think it’s R, but it be the C.

Learning JavaScript Through Game Building: Let’s Play Yahtzee!

Recently, I shared some of my thoughts about what I wish I had known when I first started developing. The time came to take some of my own advice and put it into practice. I’m trying to level up my front-end developer skills, and I needed to improve upon my JavaScript skills. I signed up for a free trial at Treehouse and jumped into learning JavaScript.

Right off the bat, I was super encouraged. Professionally, I haven’t done anything in JavaScript. We have experts on our team and they handle our JavaScript work. Yet when I stepped into the courses, I was surprised by how much I knew. I found myself pausing the tutorials, working ahead to execute what I knew they were about to show me, and then let them confirm that I did things correctly. This was a huge affirmation to me that even though I had not been actively learning this language, broadening my foundation paid off and I was a lot faster, more accurate, and more understanding of the material than I expected.

The course starts with the JavaScript basics. My abilities were beyond that, so I could have opted to skip ahead, but I didn’t (and I’m glad). There were a few holes in my understanding that were filled in while refreshing the basics. I was able to race through the introductory courses, but still glean some valuable context.

The learning was good, but I knew that without practice it wouldn’t stick like I wanted it to. I needed to marinate in it. Therefore, I decided to build something with JavaScript that would really put my skills to the test. Recently, I got back into the game of Yahztee. It’s nice to play when you’re waiting in line or for an appointment. Ironically, the Treehouse tutorials had us build a random number generator based off a die. The connection of the two inspired me to build my own Yahtzee game.

gif of a screenshot of a yahtzee game, with a pop up that says Welcome to Yahtzee!

I didn’t anticipate how beneficial building the Yahtzee game would be. At first, I felt guilty building it because it didn’t seem to serve any purpose and I worried I was wasting valuable time on a project that wouldn’t bring in any profit for our company. While it’s true that we won’t make a buck off of this game, the skills I have cemented in the process have made me a much more profitable employee, and that is invaluable.

In the past, when I tried to build things, I often didn’t have a firm grasp of what the completed thing should look like or be. I wanted to solve a problem that we were facing at work, but had little understanding of how things are built or how to create a solution out of nothing. I would quickly get stumped and not know what tools were available to me…or even where to look. I’d have to rely on my coworkers to bang out some code for me.

Obviously, as a result, I wasn’t really learning. This time, I had a clear goal in mind of how things should work. I knew if something was performing as expected or not. This allowed me the freedom to get to work and build the app, versus spending valuable time trying to think up features to build. That honed focus was an immeasurable gift.

The Yahtzee game had at least fifty steps that needed to be built out, so I was constantly solving problems and creating solutions to get just one part of the game working. Every time you roll the dice, there are thirteen individual scores to choose from that need to be calculated, not to mention updating the scores and checking for a bonus score. It was incredibly helpful to have a ton of bite size, independent tasks that I could confirm were working the way they needed to before moving on to the next thing.

gif of a screenshot of a yahtzee game, with a pop up that says Welcome to Yahtzee!

Another huge bonus was that this was fun to build. It’s a lot easier to stick with a project when you enjoy doing it. I’ve had other side projects I tried building to expand my skills, but it wasn’t fun. My motivation petered out. With this project, I literally did a little happy dance after I got a particularly challenging task completed. You have no idea how ecstatic I was to figure out how to calculate if a full house (a set of three and a pair of two) occurred.

This project gave me a long list of takeaways. The most useful benefit was how it allowed me to get comfortable with the console. I’ve known this is a skill I need to master for a long time, but try as I might I just could not “get” the console. I’d pull it up to try and use it, but it would remain blank. This project made me wear the soles out of the console.

I also walked away with an understanding of very specific areas in my knowledge that I don’t have a firm grasp on. There were times I was stumped, turned to Stack Overflow, found a solution, only to realize I don’t fully understand how the solution works. Knowing specific things I can hone in on gives me direction on what to go after in the future. For example, I realized my understanding of prototyping is really fuzzy and needs shoring up.

I’m excited because while the basics of this game are complete, there are still a lot of things I can tinker around with. Since I started drafting this post, I added an onboarding process, instructions, and a spiffy CSS animation. I know that my code needs refactoring; it’s not very DRY and the ordering of code blocks is atrocious. I also have a bunch of little UI features that I think would snazz things up a bit.

What are some projects you’ve done that were a blast and you also learned a lot from?

Want to play yahtzee?

Leave a comment

Your email address will not be published. Required fields are marked *