Chris Coyier and how Code Pen is Connecting the Frontend World

For Chris, since he started on the web, he has always represented his "finished work" as "teachable work" and produced products that were beautiful and contained inherent lessons.

Chris Coyier, 36, embodies strategy and connectivity in his products. For him, with a soft smile and large boots his personality fosters a since of mystery and cleverness when you meet him. He wasn’t afraid to keep growing each project to their fullest extent, with deep interest in seeing where it would morph into. CSS-Tricks, Shop Talk and finally CodePen were all customer powered applications that allowed for teachable moments.

 

Coyier grew up in Verona, a middle class suburb of Madison, Wisconsin. With nice schools and every opportunity there, Chris from the beginning was interested in arts. "I remember our ceramics department in high school was nicer than most colleges had. We had a natatorium, a fancy new theater, an excellent gym, and certainly influential to me: multiple computer labs. We had computer courses to go with them, including multiple computer programming electives". He took advantage of the circumstances and introduced himself to both fine arts and the computer early on. "I took and enjoyed ceramics very much, but nearly equally as much the computer programming stuff. Mr. Scott was our teacher and I took to his teaching style very well. I remember being very excited about building a Game of Life simulation in Turbo Pascal, and a networked Battleship game after that".

 

"My parents were also very supportive. I always had a nice computer and all of the online time I wanted back then. This is a pretty clear picture of what privilege looks like. We weren't rich. We had rough patches. Things weren't exactly handed to me. I worked hard. But nobody doubted me. Nobody talked down to me. Everyone supported my ideas and encouraged me. I had plenty of opportunity."

 

Coyier started at Chatman Design as a web designer in 2007 and during this time started CSS-Tricks, a portal, blog like, with a brown and orange professional presentation with loads of web design tips and tricks such as "CSS Icons", "SVG and Media Queries" and more. Perfect for the intermediate designer, one can travel back in time as they go to the earliest post. Today it boast a large following and defines many interviews and messages that can leave you inspired.

 

Coyier ran "Digging into WordPress" the blog and created "Are My Sites Up" in three months, then soon publishing the book version "Digging into WordPress" which is a precedent study for many inspiring WordPress enthusiasts creating story specific senarios for how advance the technique. Starting full time at Wufoo and one of the lead designers allowed the form creation tool to expand on its brand and product. Soon afterwards Wufoo was aquired by Survey Monkey and the merger fostered Coyier into technical work at a large scale.

 

Are My Sites Up

Digging into Wordpress

During the "ShopTalk Show" days where he interviews hundreds of designers and product makers there was inspiration to start a product of his own. Particularly encouraged by continued inner teachings of web design, css techniques and frontend masteries Coyier connected with his friends Alex Vazquez and Tim Sabat both full stack developers. The three of them, knowing that they wanted to create a product together before, insisted in 2012 to start. The first rendition of CodePen defined an early under-ground-ish community where frontend code including HTML, JS, and CSS code and a design preview could be shared amongst one another. Today it boast over 783K users and 9.3 Million Pens (shared designs).  "The concept just came out and we thought it was good for everyone". Coyier placed himself as lead designer full time and together the three of them have grown the team to 8.

 

CodePen

Sitting down with Chris Coyier one can see his humbleness as he runs three products while still playing the banjo and guitar on the side.

This is Chris in his moment

Do you remember a particular time when you knew that Design and contributing to the web was something you wanted to enter or pursue? I do remember early days of poking around learning web design by installing WordPress sites and poking around at their design and how they work. That kind of thing was really invigorating. I enjoyed playing with websites more than playing video games. That's still true. I like playing video games, but they aren't nearly as fun as the incredible logic puzzle that is design, programming, and business. 

 

As soon as I started playing with websites, I remember having a feeling that this is the perfect path forward for me. It's creativity, art, and design. It's the nerdy satisfaction of programming. It's business. It's helping people. It's a real career.

 

You worked at Wufoo which was acquired by Survey Monkey. Were you there during the transition? How did the design teams merge? It was a pretty clean transition. Everybody at Wufoo was in Tampa, Florida, and we all had to move out to the Bay Area, California. That was pretty fun. 

 

I wasn't at Wufoo for even a full year before this acquisition happened, so I was still kinda glowing from even having that job and super fired up to keep working on Wufoo with the existing Wufoo team. We got the "we want to learn from you on how to work" pitch. I naively thought we'd all just get a corner all to ourselves where we'd just keep on keeping on. That didn't really happen, but not so much because we were now working for a bigger company, but that the Wufoo team itself was interested in branching out and doing different things. It ended up being pretty good for everyone I think. The fact that Wufoo is still going strong today is pretty awesome.

 

You have started a diversity of different projects such as “Are My Sites Up”, “CSS-Tricks”, publishing “Digging into WordPress” and “ShopTalk Show” in addition to CodePen. First what was your favorite? Then who were you able to work full time while pursuing these endeavors? There have been moments where I've been way over my head with commitments. I'm always teetering on that point. It happened even more often when I was also working full time. Things got better when I was able to stop working full time for companies and work full time for myself. I decided I'm keeping my main project load to just CodePen, CSS-Tricks, and ShopTalk, and that's what I'm most proud of because of the long term persistence and dedication to them.

Shop Talk Podcast

 

When starting CodePen, how did this early project come to be and why? CodePen was a little tiny side project I wanted to build, in large part for a way to show off demos on CSS-Tricks. There were pre-existing apps that did this kind of thing, like JS Bin, but I wanted to take a crack at building one myself that I could control. 

 

You mentioned that Alex and Tim came on board and you the three of you decided to pursue CodePen full time. How was this decision made and what were the first couple steps? Was it already launched and active beforehand?

Alex and Tim were involved from day one. In fact, we were actively looking for ideas for things to work on with each other, as we knew like liked working with each other and all have some entrepreneurial spirit. I proposed the idea of CodePen, kinda selfishly, as it would be useful to me for CSS-Tricks. They were on board with the idea, not because they didn't have any ideas themselves, but just because it seemed like a small focused idea we could knock out pretty quickly. As we worked on it, it was pretty clear it was an idea worth making into it's own full-fledged independent project. 

 

I left Survey Monkey shortly after we first started working on CodePen. Alex and Tim continued work there for about another year and worked on CodePen in the evenings and weekends before finally jumping off and coming full time on CodePen.

 

How did you acquire your first users? What was your marketing approach or what social networking sites did you use, if any? We were very fortunate in that we didn't have to look very hard to find people that were interested in trying it. That's the benefit of having built an audience over many years and then building a product that is right up their alley. A quick tweet at the beginning got us all the beta testers we needed. 

 

These days, it's still a fortunate situation, because in a sense the people who build things on CodePen market it for us. People are proud of the cool things they build and share them, and that reaches their audience as well.

 

Did you craft much of the design and brand for CodePen? I can take credit for some of it, but like I suspect most big apps, it's quite a mishmash. Sparkbox did a good amount of the current design. We've had contractors like David Desandro do some of the interactions. Our current employees all have design talent. I tend to art direct and keep things cohesive.

 

How did you work with your other co-founders and other new-hires as CodePen evolved? One big consideration is that we're all remote. No two of us live in the same state. It's a pretty typical setup in which we communicate heavily through Slack. We only have one formal meeting per week, but otherwise keep to short little informal meetings as needed. 

 

We're still figuring things out. Our goal is to make sure everybody is happy, healthy, and productive. Different people need different things to feel that way. We try to be as helpful as we can that way, while being full time developers ourselves on the project. We're so small and everyone is so cross-disciplinary, fortunately everyone can be little one-person-armies of getting stuff done.

 

Finally, what is next for Chris Coyier? What's next for CodePen, is there any new surprises launching? Definitely keep your eye on CodePen. We have, conservatively, years and years of ideas of things we want to build into CodePen. It's a mix of huge things and little things. We aim for a pretty steady release of new features and improvements. We have things we've been developing for the better part of a year that I hope will be out soon.

 

What is your advice in breaking out and building a product? My favorite advice is: be persistent. Most projects I've been involved in didn't have a whiff of success for the first few years of work. I (we) kept at it because that's the only way things do succeed.

About this Project: We are a small group of designers that thought maybe its a good idea to start documenting some of the decisions that we make and why we make them