Level Up your UI Game

Mastery through Play

About a year ago I was in a haze. I'd often find myself staring blankly at my screen at work. One afternoon I was supposed to be working on a form (I really, really hate building forms) for a super lame project that I didn't care for at all.

I was bored out of my mind.

I decided then and there that I needed a new job. That evening I started brushing up my résumé. It was an Apple Pages document and I was having some trouble getting the formatting to line up exactly how I wanted. After enough frustration with the blasted thing I said to myself "bah! I'll just do this with CSS." (famous last words, right?)

I took the next day off work, strolled past the "no loitering" sign and posted up at the local McDonald's. I had everything I needed in order to create a flashy new web-based résumé: my laptop, charger, and an infinite supply of free-flowing Diet Coke.

While I worked, I noticed something both annoying and interesting. I was spending a lot of my time at the css-tricks Complete Guide to Flexbox site. I stopped and thought for a second. "Wait... why do I still have to look this stuff up? I've built like six projects already using Flexbox". I slogged through it and at length finished my new résumé.

I sent it out to a couple of companies that looked fun to work for but my mind remained fixed on the Flexbox question. At work the next day I decided to cowboy up and get the form over with. The company had recently - finally - dropped IE9 support (enterprise amiright?) so I tackled it with Flexbox, scoring some more traffic/ad revenue for the css-tricks guys. After trying random, failing combinations of flex-basis, width, and flex-shrink again I had had enough.

"Davie my boy" — I said to myself — "you need to actually learn Flexbox".

I dove head first into the CSS Flexible Box Layout Module spec. I read it all the way through - with a growing sense of dread that I had made a terrible life decision to become a UI dev. I might as well have read a manual on Thermodynamics for all I got out of it.

Morale only mostly shattered, I headed over to codepen and started playing around with Flexbox. I experimented, tweaked, watched the changes as I made them. I wrote down any questions that came to mind while I tinkered. And gradually things started to click. I became enamoured with Flexbox. Most days I'd try to get my work done extra fast so I'd have some time to play with it, learn even more.

I went back and re-read the Flexbox spec and this time it made perfect sense. The craziest part is I found I was actually beginning to enjoy my work again. I didn't realize it at the time but I had accidentally discovered the key to loving work.

I started getting requests from people to help them with Flexbox. I shared with them the metaphors for understanding Flexbox concepts that I had come up with to help me remember things:

Picture you're holding a crossbow and aiming either North, East, South, or West. That's flex-direction. These zombies are coming from the south, so set your crossbow to flex-direction: column".

The people I helped loved this way of thinking about Flexbox. They convinced me to create a little tutorial on it. Flexbox Zombies was born.

It started as what I now consider a prototoype. A simple text-based email sequence with some codepen exercises that looked like this:

flexbox zombies prototype

I launched the project and refreshed my email list frequently to see if anybody had signed up. Pretty much just my friends and people from work, but oh well I thought, it was fun to make.

One morning I checked and saw that three hundred people had signed up. I was shocked and ecstatic. Turned out some of my popular friends (Kent, Merrick) had shared it on Twitter. I had been wanting to do my own thing for years, had even stockpiled a decent savings but was still living in fear — too afraid to make the leap. But this small win was all the excuse I needed. I put in my two weeks notice and set out on my own to create the full on Flexbox Zombies mastery game:

flexbox zombies creation

To date over 17,000 people have signed up and learned Flexbox with me. After shipping Flexbox Zombies I announced a preorder for my first paid game - Grid Critters - to give people mastery over CSS Grid layout.

grid critters creation

Hundreds of devs dropped their hard-earned cash monies on my game. Including engineers from Github and Google. I was completely floored. But what's awesome about all of this isn't me — but the highly valuable principle I discovered along the way.

Mastery through Play

By facing down the Flexbox dragon I inadvertently stumbled onto something that I believe is the key for truly enjoying your work. I discovered that the most difficult topics to learn can be mastered through play.

This approach to mastery is incredibly fun - not in spite of the subject's difficulty but because of it.

One day my brother @j_gds sent me this talk The Counterintuitive Secret to Fun by Game designer Ian Bogost. If you haven't seen this, do yourself a favor and watch it. I listened to it while driving and had to pull my car over to the side of the road to finish - I was so struck by it. It resonated with everything I had experienced during my battle to master Flexbox.

Here's one of Ian's gems that illustrate this mastery through play principle:

The things that we tend to find the most fun are not easy and sweet - manual transmissions and knitting are fun because they make driving and fashion hard rather than easy. They expose the materials of vehicles and fabrics. And they do not apologize for doing so. There's a kind of terror in real fun, the terror of facing the world as it really is, rather than covering it up with sugar. — Ian Bogost

Mastering frontend tech is really. freaking. hard. It's also immensely rewarding. It's like playing and leveling up in a video game. You overcome obstacles to gain new weapons, gear and skills you can use to crush increasingly difficult enemies.

Coasting on the other hand — not ever really learning your craft — is actually quite easy. And numbing. It's like never venturing out of a game's starting zone. No wonder you're bored out of your mind fighting level 1 sheep. That's all you're capable of handling to this point, but you were made for so much more.

So here's my advice: start playing. Face the difficulty head on. Commit to mastering UI development. It will be hard. Head down this path and yes - there be dragons. But you'll slay them and it will feel amazing. And a few things will happen:

You'll be able to build things you never imagined you could.
Your tools will become second nature, an extension of yourself.
The challenges you face will shift: becoming less about the tools and tech you use, and more about what you can create with them.
You'll start landing the best kinds of projects — *hard but fun* — that are both financially and emotionally rewarding.
You'll enter and remain longer in the productive, fulfilling state of flow.
Best of all, you'll love your work.

Your Journey Begins

I've designed Grid Critters specifically for you. Because you're like me — you're not content to be mediocre in your craft. Devs like us have too much passion to settle or coast.

It's time to level up your UI skills. Leverage the mastery through play principle with my mastery game. It will guide you, challenge you, reward you. It's the ideal environment for playing with CSS Grids. One where you get to actually see how the CSS spec works. By the time you complete the hundreds of levels, you will be a master of CSS Grid layout.

Grid Critters Mastery Game

Master CSS Grids right from the start by playing this new mastery game. You'll learn the ins and outs of Grids one fun level at a time, while saving an adorable alien life form from certain destruction.Master CSS Grid