Tiptoe Through the Tooltips: An Interview with Chris Coyier

Chris Coyier is a designer and co-founder of CodePen, a writer at CSS-Tricks, a podcaster at ShopTalk, and the author of Practical SVG (A Book Apart, 2016). We caught up with the immensely busy and remarkably creative designer/developer for a quick chat about redesigns, team management, and more.

Let’s get the tie-in out of the way first: you have a talk and a full-day learning session (A Day Apart) this year at An Event Apart. What will they cover, and what will attendees take away from each?

This will be the first season of AEA since the publishing of my book Practical SVG, so I’m honored to get the chance to keep talking about SVG! The talk is secretly about getting the audience excited about using SVG. I talk about things like building your SVG muscle memory and reaching for SVG when it’s the appropriate tool, instead of falling back to another format that might be more comfortable, because perhaps you came up as a front-end developer when SVG wasn’t as well supported and was largely ignored for good reason. 

Part of getting excited about SVG and building that muscle memory is seeing a lot of SVG in action. I have heaps and heaps of examples I can show, so the trick for me is narrowing down the best stuff to show you at AEA!

With A Day Apart, as one might expect, we get to cover more ground. I’m going to take on something near and dear to me: the job of being a front-end developer as a whole. To frame that, we’re going to build a website together. Or at least look at the process of building a website from the design to the “finished” product. This will give us a chance to talk about tools, process, languages, abstractions…the whole nine yards!

Okay, now to the news: CSS-Tricks has a brand-new design, with animated SVG and all kinds of great stuff.  Tell us more about the thinking and goals!  Also, any cool bits that people should check out?

It’s a little thing, really. I know, from experience, that site redesigns can be monumental efforts. They can take months, involve big teams, and meetings on top of meetings. All the CSS-Tricks redesigns—this one, as well as most of the last 15—are more like a long weekend and a sixpack of Diet Mountain Dew. I typically don’t tear the whole thing down and start from nothing. It’s more of a facelift, and a checklist of a dozen or so other things I want to accomplish, bundled together.

Taxonomies were something I wanted to address in this design. We’ve been tagging things for a while, so I wanted to finally expose that. For example, you might see a post about some SVG feature, read it, and want to see other SVG-related stuff. We have a tag for that. 

Tags are hardly something new, but it’s a start toward making the site more browseable, content more findable, and circulating all the articles on the site in a better way. We have thousands and thousands of bits of content on CSS-Tricks, so this stuff needs to get thought about more and more. Another thing I’m excited about, coming soon, are pages that allow us to hand-curate collections of posts—like recommended reading on a particular subject.

I honestly had a lot of fun with the randomized SVG stuff going on in the headers/footers. Some different bits of tech come together to pull those tricks off:

  1. They are <path> elements, which is the canonical drawing method in SVG.
  2. I construct each <path> with some fixed coordinates, and some pseudo-random numbers in pre-defined ranges. 
  3. At different timed intervals, I construct a new set of coordinates and stitch it all together as a string. (ECMAScript 6 template literals make this easier.)
  4. I replace the d attribute of the paths with that new string. That instantly visually changes the shape.
  5. In Chrome, you’ll see the shapes transition, because the d attribute is a transitionable attribute there. Presumably other browsers will do the same eventually.

Between CodePen and CSS-Tricks, you’re managing at least two teams. How do you make it all happen and keep track of everything?

We can toss ShopTalk Show on that pile too, as that certainly takes some time and planning. But I can tell ya…I don’t work particularly hard. I have a time-tracking app that measures everything I do, and I work about 40 hours a week. Rarely does it approach 50. The fact that I don’t commute and don’t yet have kids certainly frees up some time.

“Teams” is the word. Everybody I work with is amazing. Smart, generous, and driven. They don’t need me pretending to be their manager. At least not yet. Perhaps as we grow and my development skills finally completely give out, they’ll let me keep an office in the basement and call me a “manager.”

I like to trot out a quote from a documentary I like. In it, an old fella is hard at work in a shack dipping baby alligator heads into shellac, as you do, for sale in Louisiana tourist shops. His son is part of the business too, but clearly doesn’t do as much of the baby-alligator-head-dipping. With a bit of part-prodding part-fatherly-wisdom quip he says:

It’s amazing how much you can get done in a day if you just sit and you do it.

What are some tools, tricks, and/or techniques you can’t work without?

We recently moved to GitLab on CodePen, and that’s been a huge new tool for us. We quite literally couldn’t work without it, because it’s the hub of all our projects. It’s just like GitHub, only open source, and we host it on our own servers. We kinda went all-in with it, moving all our project management to it as well. So it’s our git repos, testing, deployment, issue tracking, time tracking, and kanban boards all-in-one super-tool.

We use Slack for the vast majority of real-time-ish communication. Zoom is our video tool of choice, because it has a pretty great track record of Just Working, in my experience.

Well, and I use CodePen a lot, too.

What has you most excited these days?

I’m as excited as the next person about tech stuff. The way websites can be built is changing rapidly. Like, for real. CSS stuff like Grid Layout is a huge deal and dropping in stable browsers soon. JavaScript is evolving quickly, which is an even bigger deal, because the buy-in from developers has been so swift and widespread. The JavaScript you see these days is barely recognizable (to me, at least) from the JavaScript you’d see a few years ago—thanks to new syntax, new frameworks and libraries, and new APIs, modules, and build processes. Thank god it feels like HTML is taking a break with the new stuff right now.

But I’m just as excited about some of the non-tech side of running a business. How do you keep it happy and healthy? How do you help a community be its best self? How do you move things in the right direction in a timely fashion? Those are exciting things to consider.


Chris Coyier will present his talk “10 Things You Can and Should Do With SVG” at several AEAs in 2017, and deliver his full-day session on front-end development at An Event Apart Seattle (April 3-5) and Chicago (August 28-30). Don’t miss your chance to learn from Chris and our other fantastic speakers—find your event and register today!