Articles by
Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Building Performant Expand & Collapse Animations

It's starting to be pretty common knowledge that there are only 2 things you can animate cheaply in CSS: opacity and transforms. Anything else, you run a high risk of that animation/transition being choppy. Fortunately, there is a ton of animation possibility with those properties, especially since transform can move and resize elements any-which-way.

You can even get tricky and fake the animating of other properties with transforms. In this tutorial on the Google Chrome Developers Blog, Paul Lewis and Stephen McGruer explain how you can use a vertical scale transform to fake a height animation, while simultaneously triggering a vertical scale transform the other direction so nothing looks squished.

It's clever, performant, and useful. I moved a copy to CodePen to play with.

It sure is a bunch of code for such a simple result, though. What I'd prefer to do as a developer is just have that click toggle a class, and the menu animate to an auto dimension, and have it all happen performantly.

Hired – Job Hunting Simplified​

On Hired, companies apply to you, not the other way around. Upon getting approved your profile becomes visible to over 6,000 innovative companies, hiring for technical roles. So if you’re looking for new opportunities, but don't want the hassle of applying to all those companies, try Hired and let the companies apply to you!

Modern JavaScript for Ancient Web Developers

Gina Trapani:

... when you're learning modern JavaScript, there's a good chance that the solution to the problem you're having is still getting worked out. In fact, it's very possible it is only one code review away from getting merged into the package you're using.

It's a weird time. So many of us are living so close to the edge. As Gina puts it, it's harder to find "a 5-year-old Stack Overflow answer that solves" your problem. New things drop and go out to production instantly, which is a bit at-odds with the classic wisdom of waiting for the .1 release.

Need to Catch Up on the AMP Debate?

The subject of AMP came up at a meetup I was at the other day. It came up in a "Hey have y'all seen this thing yet?" context. Some people have heard of it, some hadn't. Even among those who had heard of it, the vibe was mostly: "this is newfangled tech. It's the future, probably. I guess it's a thing I gotta learn, I just haven't gotten around to it yet." Which makes sense. It's just like hearing about some new JavaScript framework that is taking off. "Obviously, it's a big deal, I just haven't gotten there yet. Perhaps I will one day when it's clear I need to for a project."

Other folks at the meetup were like "Isn't it that thing that makes it so you can't use CSS or JavaScript?" Someone else thought it was more like a CMS. Neither is quite true, but there is certainly plenty of confusion out there (and a lot of outright shrugs). Let's not re-explain what AMP is here, but cover some of the potentially confusing and controversial points.