I had the opportunity to attend CSS Dev Conf this week in Long Beach. It was an amazing experience. I learned some crazy valuable stuff from some crazy smart people. Here’s my rundown and notes on the talks.

Venue: The Queen Mary

The Atlantic by Macdonald Gill
Map of the North Atlantic by Macdonald Gill. This hangs in the Grand Salon on the ship where the conference took place. The indicator would follow the Queen Mary’s location in real time on the black horizontal lines as it crossed the ocean!

10/10 in my book. Between the eerie Shining feel in the hallways, the haunted fair out front, and the fact that my room has portholes for windows, this place rocked. The rooms were also great venues for the talks, and the acoustics were perfect. My only small complaint is the Queen Salon was freezing 🙂

Speakers

Wow. Just wow. This is the most diverse and talented group of speakers I’ve ever seen at a conference. I didn’t need the coffee they were serving, as I was on the edge of my seat for mostly everything. Below are my notes on each talk for future reference. I’ve also linked to the slides, and to the Sketchnotes made by the talented artist Natalya Shelburne.

Keynote: SVG

Sara Soueidan

Sketchnote | Slides

  • Data visualizations – Canvas may be better as it’s hardware acelerated.
  • SVG is great for animated illustrations.
  • Custom @-rule to create SVG inside CSS. Would be good to use with smaller shapes like a triangle.
  • PostCSS can do this today, but there is no CSS support currently.
  • When creating SVGs, you don’t have to convert text to outlines. It will keep it accessible and searchable. Just make sure you load the webfont if needed.
  • Create simple shapes using shape elements instead of paths.
  • Easier to maintain and animate.
  • Fit the artboard to the drawing for less whitespace headaches.
  • Always keep the width and height attrs on the svg. This can be overridden by CSS for fluidity.
  • SVGO – Node script for SVG optimization. Can be used with Grunt, Gulp.
  • SVGOMG – GUI for optimization with SVGO.
  • Spriting. Three techniques:
    1. Multiple SVG files combined into one SVG using tags. Use the xlink attr for linking to specific SVG file inside an SVG tag.
    2. Use viewbox to position the background positioning.
    3. Icons as background images. Closest to icon fonts. Grunticon is a great tool for generating the css for these.

  • Accessibility – Title and description tags can be used for accessiblity and searchability.
  • CSS variables will help theming greatly.
  • SVG params can also be used for external files by passing them through the url.
  • There is a tool on github for swapping from icon fonts to SVG.
  • Use javascript for complex SVG animations. CSS support for animation is not great.
  • GreenSock is the number one JS library for SVG animation.
  • SVG is a great option for ad banners.

Animation

Estelle Weyle

  • Any box model properties will repaint the page. Put things on the GPU by targeting things like color, opacity.
  • Anything that has intermediate values can be transitioned.
  • Exception is visibility, which will swap at the end of the animation duration.
  • Animations need no prefix!!!1
  • Animation is lowest on the UI thread. They will not start until other things, like JS loading, are complete.
  • Keyframes use percentage values.
  • !important is not usable in animations. Thank god.
  • Animation name is the only required property.
  • Duration is zero seconds by default.
  • Animations overwrite !important declarations, except in Firefox.
  • You can animate above 100% and below 0 with cubic bezier increments that are above 1 or below 0.
  • Steps can be used for animating keyframes in an image sprite, much like a flipbook.
  • You can do partial iterations of an animation with floats:
animation-iteration-count: .25
  • Animation-play-state can be used to start/stop an animation.
  • Can capture animation events in JS using addEventListener and do things: animationstart, animationend, andimationiteration.

React Inline Styles

Alex Lande

Sketchnote | Slides

  • Keep CSS dry.
  • Generating a CSS specificity graph.
  • Today’s issues, specificity, source order, dead code removal, naming-schemes, everything is global.
  • Removing dead code is tough with current CSS strategies.
  • Radium fills in the gaps that inline styles don’t have, such as pseudos.
  • Inlining styles are abstracted using javascript objects for ease of development.
  • Modifier components can be passed into style object for reusable chunks, like mixins.
  • With radium, you can set a kind attr for modifiers to things, such as button colors.
  • Inline styles are really a React-only game currently, because of the virtual DOM.
  • BassCss: a modular toolkit with low level classes.
  • Using composes in CSS modules can do the same thing.
  • Custom properties are essentially variables that are compiled at runtime in CSS.
  • Native CSS extends proposal. You can extend with media queries! An example would be using a panel on a smaller screen, and a modal on a larger one.

Web Components

Philip Walton

Sketchnote | Slides

  • Web components will likely be in all browsers by 2016.
  • Right now no browsers have it implemented though, because the spec is changing.
  • CSS is missing:
    1. Scoping styles to a particular set of DOM nodes.
    2. Abstraction of implementation details.

  • Tools and conventions are great, but they raise the barrier to entry.
  • Interoperability! Web components remove the need for framework-based components, jquery-select vs. angular-select, etc.
  • Templates are used to created shadow DOM from.
  • Styles do not leak in or out of web components.
  • You can download a component from Github and be confident it won’t negatively effect your current CSS.
  • Verbose naming conventions can go away.
  • CSS files will be smaller.
  • Calling multiple of the same style tag will (such as calling a ton of the same web component on the page) will be fine, as the first will be stored in memory, and if other style tags are the same, they will reference the original rather than allocating more memory.

The Dark Arts of Light Speed

Henri Helvetica

  • Need to make a change from network metrics to user experience metrics.
  • Defer unneeded script tags to the bottom. Call the rest with async.
  • Image compression is paramount.
  • WebP is an image format from Google with better compression than jpeg. You need to polyfill all non-chrome browsers to use it.
  • ICG is a great resource for responsive image compression.
  • Using and to send the correct image to the correct device.

Visual Regression Testing

Micah Godbolt

Sketchnote | Slides

  • Visual regression tests actual pixel differences in patterns.
  • Baseline visual regression testing can best be run against your style guide, as the content never changes.
  • Many tools are either page based (screen of entire page) verses component based.
  • You can test headless with PhantomJS, which is webkit-based.
  • Can integrate with CI such as Jenkins or Travis CI.
  • Scripting libraries such as Casper can handle interactions such as clicks.
  • One problem with page based diffing. One diff can cause everything below to fail. Ie. Header text gets larger, so everything below it is a few pixels lower, so it all fails
  • the pixel differences in the diff.

Tools:

  • Wraith.
    1. Page based, comparison, headless, command line.
    2. YAML based.
    3. Great example of where to use this is when you make a large change across the app that shouldn’t change anything, such as renaming a class.

  • PhantomCSS
    1. Component based, baseline, headless, command line, scripting libraries.
    2. Uses Casper, which may be deprecated in the future.
    3. Specify which selector to take a screen of.
    4. Setting the text to the same value each time with JS secures better test coverage.

Closing Keynote – Design team strategies

Jina Bolton

Sketchnote | Slides

Keynote Day 2

Val Head

Sketchnote | Slides

  • The 12 principles of design from disney. There is a Tumblr!
  • Timing, spacing, follow through, secondary action.
  • Timing and spacing can make objects appear to obey the laws of physics.
  • Cubic-bezier FTW:
cubic-bezier(x1, y1, x2, y2)
  • Curves that overshoot their apex can create energy.
  • Entrance informs exit. Ex: modals that slide out back where they were.
  • Match velocities between animations.
  • Art of the Title: Gorgeous movie title sequences.
  • Capptivate.co: Awesome native animations.

CSS Architecture

Jonathan Snook

  • Wired redesigned with CSS in 2002. They were the first!
  • Modular systems are like Tetris.
  • Reset an element’s styles to defaults. Not much support yet though:
all: initial
  • The lobotomized owl selector is hilariously amazing:
 * + * {}
  • Element queries can solve many of our media query layout problems, but they don’t have support yet.

Bower

Eric Carlisle

  • Manage the versions of the packages you are using.
  • Maintains dependency manifest.
  • Tracks dependencies.
  • Fetches dependencies when you need them.

Fight the Zombie Pattern Library

Marcelo Somers

Sketchnote | Slides

  • This is not a tech problem. It’s a people and process problem.
  • Build systems, not pages.
  • Design a page, slice it into it’s reusable design elements (pattern library), reassemble as needed for other pages.
  • The idea of symbols in Sketch works well for this. Symbols can be used across designs.
  • To do this with a current codebase:
    1. Take an Inventory.
    2. Base styles, components, pages.
    3. Standardize things such as spaces above forms, grid systems, etc.
    4. Document (Salesforce pattern library).
    5. Define CSS Standards.
    6. Refactor to Perfection.
    7. Govern your library.

  • What a CSS code review might look like.
  • Open source culture
  • Pattern Library Tools:
    1. CSS documentation
    2. Static site generation (PatternPack).

  • Documentation for PatternPack is used via a markdown file with each component.

Designing Complex SVG Animations

Sarah Drasner

Sketchnote | Slides

  • Invisible Animation: All the Right Moves
  • Animation for a company means having a motion design language.
  • Animation is NOT one size fits all. Adhere to your branding.
  • Responsive? Turn on/off? Easing structures? User flow? What happens EVERY TIME?
  • Reuse resources, like easing, animation keyframes, etc.
  • Layering frames over each other can give you a better idea of the points to animate.
  • Optimize! SVGO/SVGO-GUI, SVGOMG, Peter Collingridge’s SVG Editor
  • Links for performance awesomeness: JankFree.org.
  • Advanced performance audits with dev tools by Paul Irish
  • Responsive SVG sprites.
  • Define viewbox and preserveAspectRatio when calling SVG.
  • Fallback to png with Modernizr
  • Greensock is great for complex javascript animation. You also get a timeline!
  • SVG can do percentage based animations.
  • Web Animation Weekly

The Art of Being Wrong

Dave Rupert

Sketchnote

  • Sometimes we listen to the people who talk the loudest and longest.
  • Strong opinions can create a blind spot in technology.
  • “Yes… and…” instead of “No”
  • Treat your blog as your drafts folder.