hhy5277 / cssdevconf2017

A repo for my notes from CSS Dev Conf 2017

CSSDevConf 2017

About

Date: October 9th - 11th

Location: New Orleans, Louisiana

Introduction

The following is a compilation of my notes that I took during the conference. There is always a possibility I misheard or misinterpreted what the speakers intended, so don't take the notes as gospel. If you think I missed something / wrote something wrong, please open an issue and I would be happy to discuss it there!

Day 1 - October 9th

Opening Keynote - Saving the World with CSS By Mina Markham

Ever wonder whether what we do in front-end development has any real impact on the world? Well, you're in luck, Mina gave an inspirational talk on her experience working on Hilary's 2016 presidential campaign and what it was like to be in the hot seat for her site. An incredible story for the books and one I hope you'll get to hear one day!

Removing Unwanted By Chris Hawkins

The future of web development and build tools like webpack promise new and exciting ways to manage our CSS and only deliver exactly the necessary styles for the components on the screen. But right now today, we're still working on lots of projects using build tools like gulp and frameworks like bootstrap that come with a lot of styles we might not use but end up serving to every page.

After this session, you'll have some great ideas and familiarity with tools to help you trim down your unwanted CSS. Tools include:

• Gulp + Sass and the usual suspects
• UnCSS to check views against Sass/CSS PostCSS and ByebyeCSS to list selectors we want to be removed
• Some browser and command line tools and tips to measure and test CSS performance

Element-First Design with Context-Aware CSS By Michael Rog - Slides

Typically, "responsive" development is bound to viewport characteristics. Wouldn't it be great if we could style elements to "do the right thing" based on their own width or height, without having to care about the width or height of the browser?

FLIPping Out About Animated Layouts By David Khourshid - Slides

Say goodbye to jump cuts on the web! In this session, you'll discover what makes native apps feel so alive and how we can replicate those movements on the web. Learn how the FLIP technique can smoothly transform flexbox- and grid-based layouts at 60FPS. We'll dive into basic and advanced techniques for animating between states in many different situations with interactive demos.

Why animate layouts (+ many examples) How native apps transition:

• Android's Shared Element Activity Transitions
• iOS's Layout Constraint Animations

The FLIP technique (First, Last, Invert, Play)

• using the Web Animations API
• using GSAP

Additive, interruptible & physics-based FLIP animations

Choreographing FLIP animations

Motion curves (a la Material Design)

Tools, libraries & resources

Let's Talk About Burnout By Dave Rupert

The tech industry regards burnout like a weird badge of honor. Dave Ruperts holds a roundtable conversation to talk about burnout in the tech industry--bring your stories and ideas how to stop it.

Design Systems 2.0: Creating Consistent Interfaces By Micah Godbolt - Slides

HTML and CSS are all you need to create a Design System that unifies the visual appearance of your products, but as soon as you want to create consistent behavior between applications, you'll need to turn to JavaScript. More often than not, using a modern framework such as React, Vue, or Angular will save you lots of time, and keep you from reinventing the wheel.

In this talk, I will discuss how moving interactivity into the Design System is not only a good choice today, but is most certainly how you will be creating Design Systems in the future. I'll also be discussing the React-powered Design System I've been helping to create which powers a few apps you might have heard of, including SharePoint, OneDrive, and Outlook for the web.

Using CSS Grid in the Real World By Brenda Storer - Slides

The new CSS Grid specification is here! Sure, it's fun to play with, but is it truly ready or even practical to use for everyday work? As a designer and front-end developer at a software development agency, I've been using CSS Grid in production websites and it is already making my life easier. In this talk, I'll show you some examples that will include:

Layouts achieved with a few lines of code that previously required messy hacks or JavaScript

• Examples of different syntax and units for CSS Grid
• Fallbacks for older browsers
• How CSS Grid improves accessibility

Day 2 - October 10th

Keynote Address - Why Fast Matters By Harry Roberts - Slides

We’re all—I hope!—well aware that performance is important; it’s great for business and it’s great for our users. But things are still not fast enough. With more and more emerging markets coming online, and more and more apps moving to the web platform, we’re reaching an intersection where connections are getting slower and websites are getting heavier. In this talk, we’ll learn just what these emerging markets mean to us, and how we can begin to move in the right direction.

What's New in JavaScript By Wes Bos - Slides

As we start to get comfortable with new ES6 features of JavaScript, both the language and the web platform is charging forward with many new features. This talk will cover some of the best things that are brand new to JavaScript as well as things that we can look forward to in the coming months and years. Strap yourself in for a fast-paced talk full of hot tips as we rocket ourselves into the future of JavaScript.

Flipping Tables: Displaying Data on Small Screens By Stephanie Hobson - Slides

Tables have gotten a bad reputation in the last few years as finicky and hard to work with - partly because they’ve been used for the wrong thing (layout) and partly because desktop friendly wide tables don’t adapt to the narrow screens for mobile devices. But, tables are still the best way to present data for comparison and manipulation. So how can we make them as responsive as the rest of our site? This talk will cover design and code tips for making tables more readable on any screen and more adaptable to small screens.

Wrap-Up Panel: Speakers Q&A By All Speakers

An annual tradition — all CSS Dev Conf speakers together on stage for an hour to answer your last minute questions!

Best of: Introducing a Design System to a Legacy Product By Paul Grant - Slides

Imagine a product that has been on the market for a number of years without having a designer employed. How can you, as a newly-hired front-end designer, introduce a face-lift and design system without completely interrupting an existing workflow?

• Explaining the value of a design system to your team
• Identifying current problems
• Creating scalable and modular solutions to those problems
• Getting everyone on board and contributing to the new design system
• Simultaneously dumping the old and using the new

Best of: Variable Fonts and the Future of Web Design By Jason Pamental - Slides

Typography is the most important aspect of great design and UX, but can’t come at the expense of performance or we risk our designs never being seen. Variable fonts are coming, and will change everything: with a single font file that can scale in size, width, weight and even x-height—exactly as the type designer envisioned—all controllable via CSS.

• What are variable fonts, and when can they be used
• Why type is the voice of your words, and how that voice just became a chorus
• How to expand the dynamic range of your design with type
• Where to be restrained and when to experiment: think character widths on small screens, or even responding to ambient light with stronger character weights

Closing Keynote Q&A By Dave Rupert

Just your simple Q&A with everyone's favorite: Dave Rupert. There were lots of discussion around the state of front-end, how he prefers his PC setup over Mac gasp, jokes, and as you can always expect with Dave, lots of laughter.