level up some UI chops

Mastery through Play: How to Love Your Work

grid critters stickers

About a year ago I was in a daze. 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 stupid feature on a 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, brand 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. “Why do I still have to look this stuff up? I’ve built like six projects already using Flexbox”. I powered through it and at length finished my new résumé.

I sent it out to a couple of companies that looked fun but my mind remained fixed on the Flexbox question. At work the next day I decided to cowboy up and build that dang form. 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, you need to actually learn Flexbox”.

I’ve never been much of a video learner so 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 played. 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 your work.

I started getting requests from people to help them with Flexbox. That lead me to come up with metaphors for explaining the concepts in ways that would stick for people. “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 were loving this way of thinking about Flexbox, and 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 it and saw three hundred sign ups. 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 notice and set out on my own to create the full on Flexbox Zombies experience:

flexbox zombies creation

To date over 11,000 people have signed up and learned Flexbox with me, and on Monday I’m launching my first paid course - Grid Critters - to give people mastery over CSS Grid layout.

flexbox zombies creation

Mastery through Play

By facing down the Flexbox dragon I inadvertently stumbled onto something that I believe is the key for loving your work. I discovered that the most difficult topics to learn can be mastered through play. And doing so 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.

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 along 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, but that’s all you appear to be able to handle up to this point.

Start playing. Face the difficulty head on. Commit to mastering UI development. 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 more about what you can create with them.

You’ll start landing the kinds of projects you want: hard but fun.

You’ll enter and remain longer in the productive, fulfilling state of flow.

You’ll love your work.

Your Journey Begins

I’ve designed Grid Critters around the principle of mastery through play. 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 Grid layout.

The Grid Critters shuttle launches tomorrow - Cyber Monday at 10AM PST. Will you be aboard? Enroll before 11:59PM PST on Tuesday to snag the discount and get a free pack of the coolest stickers ever to grace the back of a laptop.

grid critters stickers

Master CSS Grids right from the start by playing this new interactive Story Course. 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.