Notes from CSS Dev Conf 2016

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

I’ve attended every single CSS Dev Conf, five years running now. I’ve always particularly enjoyed conferences that have a somewhat narrow focus. Since this conference is, no surprise, largely focused on CSS, I think it serves as an interesting state of the union of CSS style conference every year, for me at least.

In years past themes have emerged like: preprocessors, architecture, testing, performance… last year I’d say it was SVG.

Caveat!

CSS Dev Conf is a multi-track conference, plus I had to miss the “best of” talks as that’s when I was hosting the CodePen Show & Tell. So this isn’t wholly representative of the entire conference. Sorry! Come next year!

Mike Riethmuller talked about responsive typography

Or more accurately: “Advanced Fluid Typography”. He also won best of show! Well deserved, I think.

He walked us through how calc() works, then started incorporating viewport units and applying everything to font-size. The result can be “fluid type”, or type that resizes based on the width of the screen, with minimums and maximums. It’s cooler than using viewport units alone (or SVG) because you can limit the scale.

See the Pen Precision responsive typography by Mike (@MadeByMike) on CodePen.

This can be used instead of using media query breakpoints adjusting the font-size in fixed increments.

It’s a big deal because:

  1. It’s similar to the difference between adaptive layouts and responsive layouts. We all know responsive kinda won the day there.
  2. Adjusting font-size at breakpoints is kinda janky and not nearly as satisfying as this.
  3. It’s basically a one-liner of code, so adoption of this idea should be pretty easy.

And that’s not all! If the type all just scaled proportionally to each other, that’d be kinda like SVG <text>. The limits are a differentiator, but also, the concepts can be extended to:

  • Fluid modular scale: a header might be 1.5× bigger than the next on a large screen but only 1.2× bigger on a small screen (but on a fluid scale!)
  • Fluid vertical rhythm: it’s not just the font-size that changes, but line-height and other spacing as well.

We integrated it into the blogs on CodePen.

David Khourshid talked about Reactive Animations

This was some serious CSS trickery. It’s all rooted in the ability to manipulate CSS variables with JavaScript. It’s like giving CSS deep access to DOM events.

The way David implemented his demos was with RxJS and his own helper library RxCSS.

His similar talk from a previous conference:

Since CSS Dev Conf, David has collected a bunch of wild demos possible through CSS variables. It’s also inspired several others to explore the territory, like this:

See the Pen CSS Variables As Data Feedback by Jase (@jasesmith) on CodePen.

Alicia Sedlock talked about How to Fight Burnout

This hugely resonated with the audience. There was lively conversation afterwards with great questions digging deeper into the subject. I learned the term “brownout”, which is a more accurate term for being overwhelmed and stepping away, leaving “burnout” for more more serious breaks.

Dan Wilson talked about Motion Paths

This was a perfect talk for CSS Dev Conf in that it involved cutting edge CSS (they changed the names of these properties, like weeks before this) and it’s fun to play with.

Dan wasn’t talking about SVG motion paths, which are only really possible through SMIL which still seems fated for oblivion. These are paths directly in CSS, like:

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 2015 */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
 
  /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

See the Pen Photo Sharer (CSS Motion Path Demo) by Dan Wilson (@danwilson) on CodePen.

Rachel Nabors talked about Communicating Animation

From her article of the same name.

Trent Walton told us about The Seasonal Web Developer

Trent talked eloquently about balance.

The talks at CSS Dev Conf could be organized by: Philosophical, Adventurous, Constructive, and Restorative. So too, could people in what they are talking about and advocating for. There is strength and reason in all of them, but it can also lead to frustration. These categories even manifest in our work and our communities, where it can also be both frustrating and inspiring.

Wes Bos showed Applicable ES6—Tips

Wes has a way of driving home concepts in a digestible and light-bulb-activating way. Direct link to talk.

Gregor Adams talked about Impressive Art with CSS

Gregor is a code artist and talked about web tech and art and geometry and all that wonderful stuff I get immersed in every day by the CodePen community.

I love it when Gregor goes on little kicks doing a ton of experimentation around a particular technique or idea. Last year it was fractals. This year we got a taste of many different ideas.

See the Pen hexels / trixels drawing app [prototype] by Gregor Adams (@pixelass) on CodePen.

Clarissa Peterson talked about Creating Beautiful, Accessible, and User-Friendly Forms

I like the emphasis on beautiful here from Clarissa. When advocating for form accessibility, it doesn’t need to be at the cost of aesthetics. In fact, well-designed forms with ample spacing, inviting colors, and clear states help accessibility.

No shortage of examples in here!

Sarah Drasner talked about Creativity in Programming

Creativity is fun, but it isn’t just fun. It’s good for your brain and your business.

Cecy Correa helped us Level Up Our GIF Game

The talk got deliciously nerdy at the end when Cecy explained how you could build your own GIF library by hosting them for free on GitHub, and then creating a bash alias to search for them and return sharable URL’s.

alias gif-search="~/absolute/path/to/gif-repo ls | grep"

$ gif-search query

Eli Fitch talked about Perceived Performance

Perceived performance is the most important kind of performance. Eli’s emoji analogy made me think of how I’m happy to drive 20 miles out of the way and have it take 8 minutes longer than I am sitting in standstill traffic.

One of the mini-subjects that came up in Eli’s talk was fake progress bars. During the Show & Tell later, I demonstrated how you might randomize the progress of a (fake) progress bar using the random() function in Sass:

See the Pen Randomized Progress Bar Easings by Chris Coyier (@chriscoyier) on CodePen.

Michael Cohen talked about Sunsetting Our Grid Systems and Embracing CSS Grid Module

I think Michael is right in that, eventually, what we think of a “grid systems” right now will be sunset.

I’m excited for grid primarily because I think it will usher in a new era of layout creativity. That’s certainly what Jen Simmons is advocating for!

Jen Simmons talked about Real Art Direction on the Web

Grid layout is definitely a theme this year. But Jen’s keynote is about more than just “grid will be cool”, she advocates lots of modern tools that help unlock huge potential for creativity: flexbox, shapes, columns, and more.

This talk from a previous conference:

Rachel Andrew talking about Knowing it All

Rachel talks a ton about CSS grid layout, which would have given us a one-two-three punch of that, but Rachel was a keynote speaker and delivered a more personal and historical talk about the web.

Fundamentals, y’all.

Joah Gerstenberg talked about HTTP/2

Specifically… “How it Impacts Frontend Developers”.

I wished I could have been there to ask questions, because I definitely have some. Let’s say we’ve already turned on HTTP/2 (I have). Is it already an anti-pattern to be concatenating assets? Are there some example websites out there we can look at to compare before/after performance of when they stopped concatenating assets? If I do stop concatenating assets, is it only-helpful and never-hurtful? Are there any browser/platform/versions out there I’ll be hurting?

Keith Grant told us to Stop Thinking in Pixels

This talk at a previous conference:

Relative units are good. Here’s more to convince you.

Brian Graves talked about Using Tomorrow’s CSS Today

“Where we’re going, we don’t need preprocessors.”

My favorite: @apply. It’s kinda like mixins/extends (in preprocessors) although it doesn’t require any duplication of code/selectors to do what it does.

See the Pen CSS @apply rule support test by Serg Hospodarets (@malyw) on CodePen.

Jonathan Snook talked to us about Responsive Web Apps with Container Queries

I sadly missed this and the only link I have for it is the EQCSS (“Element Queries”) website. I think “Container Queries” is the more likely name though, maybe?

Jonathan will look at the approach the Shopify Admin team used to manage the intricate interactions between all the application’s components, and pull off a fully fluid responsive design in under a month. He’ll also look at how this approach is currently being used at Xero to achieve unity between disparate tech stacks and speed up the development process.

It’s very interesting to see large-scale production sites going this road. That’s what I (wrongly) assumed wasn’t happening with container queries. I do still suspect that once there starts to feel like there is some momentum with native browser support for these, it will be a red-hot topic in CSS. Then a real polyfill can be built and the concept will snowball.

Kevin Lamping talked about Automated UI Testing

CSS testing is another topic that’s been around a long time but never seems to get a ton of momentum. It’s hard. It’s fragile. It’s limited in what it can do. Knowing all that ahead of time doesn’t make it very appealing to spend a bunch of time on it. I think, personally, I’d have to have a really huge, really mission-critical site, and have a person who’s job this was entirely to go down the CSS testing road.

It looks like Kevin tackles many of those known challenges, and has a repo up that demonstrates.

Matt Vanderpol talked about how to Generate a Living Style Guide from CSS

I love how the conversation on style guides has evolved from “have one” to how to make it easy to build and use and manage.

Adam McCombs talked about how Pattern Libraries Can Change Your Life

Pattern libraries allow you to develop systems not pages.

You know what would be a really fun style guide / pattern library talk, to compliment all this smart stuff that is said about them? If people take their style guide, and take a design they need to build, and live-code it using the guide. I think that could nicely showcase the point many people make on how style guides make the final designs faster to build and more consistent.

Estelle Weyl talked about Inclusive Code

As she says, in other words: Simple. Fast. Accessible.

Ivan Wilson talked about the The Secret Life of Forms

There can’t be enough evangelizing for doing forms correctly.

Vincent Nalupta talked about KonMari CSS

KonMari, as in, Marie Kondo’s KonMari Method: “The Life-Changing Magic of Tidying Up” (book). Applied to CSS, it’s: Analyze, Plan, Refactor, Optimize.

Julia Konivestska talked about Data Visualization with Responsive d3.js

Part of the talk was about building a chart like this from the ground up: from the data the the libraries and APIs and whatnot to make it all happen. Then making it responsive, which involved measuring things in JavaScript and re-rendering the chart.

That’s awesome stuff to know, but it also got me thinking about native things you can do in SVG to help the responsive-ness. Some of it came to fruition lately when I was screwing around with Robin’s bar chart. Turns out there is a good amount you can do by not using a viewBox at all.


If I had to pick a theme or hottest topics, I’d say CSS variables and grid.