On Writing Feature Requirements

I have been asked to lead product development on a team. This is somewhat of a new journey for me because I'm generally used to calling myself a web designer rather than a product manager or strategist.

The toughest part of this job for me has been organizing my thoughts. I've written an executive summary for the product we're building, done some competitive research and even dusted off my limited MBA education for a SWOT analysis. Oh yeah, now it looks like I know what I'm doing!

Many of us who read CSS-Tricks with any sort of regularity likely have to think strategically to do our jobs, whether it's in design, development, or both. What I've found, however, is that thinking strategically is a whole lot different than acting strategically. (more…)

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.

Building a CSS Grid Overlay

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them.


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.


Zeroing the Desk

Brendan Dawes:

After a recording session on one of those large mixing desks, after you've twiddled countless knobs and push around many faders you do something called zeroing the desk. This is were you turn every control and push every fader back to zero, so that when the next engineer comes in he or she isn't going to jump out of their seat when a large sub-bass whacks them straight in the face and possibly blows something up. It's a polite thing to do for your fellow sound engineer.

Reminds me of all: unset; ;)

(via Brad Frost)