View the slides

Speaker

Sean Moubry is a mobile engineer who focuses on creating experiences that delight people. He writes in JavaScript and Ruby. Sean is currently a mobile team lead at Sabre, working on TripCase—a leading mobile app used by millions of travelers to manage their travel itineraries. Sabre is a technology company that makes travel software used by hundreds of airlines and thousands of hotel properties. You should follow me on Twitter @moubry.

Description

Making CSS changes to existing projects is hard. Big refactors are even harder. Small changes to one component can impact others, creating unintended visual regressions. It sucks. It creates friction, discouraging you from changing *anything* lest you break something that already works.

Imagine a utopian future where, before you even commit your changes, robots go through every page of the website taking screenshots, looking for differences. Those robots exist. And they’d love to meet you.

In this talk, you’ll learn how to implement both personal and designer/developer team workflows for automated visual testing. We’ll cover the basics of setting up Huxley, Facebook’s new system for visual regression testing, and some related technologies. We’ll also cover best practices—such as ways of spinning-up remote workers in the cloud for taking screenshots. This talk is an introduction to the world of continuous integration for designers and front-end developers.

Call to Action

• Get the Huxley example project working on your computer.
• Setup Huxley with
 one of your projects! Refactor with confidence.
• Follow the creator of Huxley Pete Hunt on Twitter.
• Listen to an interview with Pete Hunt on JavaScript Jabber (podcast)

Links

• https://github.com/moubry/kubricks
• How Git Grows - Sean Moubry

Tips

• There are two versions of Huxley—the official Python-based version and a Node version. I recommend using the Node version. During the talk, this is what I demoed. When I say Huxley, I actually mean the Node version, which is maintained by Facebook as well.
• Integrate Huxley into your Grunt workflow with grunt-huxley.

Concepts

• Behavior-driven development
• Test-driven development
• Continuous integration
• Perceptual diffing

Technology References

• csste.st by @thingsinjars
• Huxley by @floydophone
• Node version of Huxley
• Grunt by @cowboy
• Jenkins by @kohsukekawa
• Travis CI by @svenfuchs
• Selenium by @hugs and @paul_hammant
• Sauce Labs — Selenium in the cloud.
• BrowserStack — Cross-browser screenshots.
• Handlebars — JavaScript templating.
• Sass — CSS extension language.
• Compass — CSS authoring framework.
• CasperJS — headless browser testing on PhantomJS.
• Capybara — headless browser testing written in Ruby.
• Jasmine — BDD framework for JavaScript.
• JSHint — JavaScript linter.
• Jin Yang (@jzy) — designer at Stack Exchange
• Resemble.js — Generate image comparisons.
• PhantomJS example rasterize.js
• Meet the Command Line by Dan Benjamin — PluralSight
• Macintosh Terminal Pocket Guide by Daniel J. Barrett
• Mastering GitHub — Code School
• GitHub for Mac — The easiest way to use GitHub on Mac.
• Kaleidoscope — File comparison for Mac.
• NPM - Huxley
• NPM - Selenium
• Apple - Java for OS X
• Zeplin

Pattern Libraries

The purpose of a pattern library is documentation. Read these links for more inspiration:

• Getting Started with Pattern Libraries - A List Apart
• Pattern sharing - Jeremy Keith

When you create a new component, you add it to the library.

Pattern libraries can also provide design feedback as you're creating the components for the UI. Start by adding them to the library, and *then* when they work, add them to the website. Only include the patterns you want people to use. Remove non-canonical patterns in the app.

For a comprehensive list of public and open source pattern libraries from industry leaders, see Marcelo Somers’s Pattern Library Directory.

Generating pattern libraries is easy too:

• KSS — @kneath at GitHub
• Styledocco

Modularization Techniques

• OOCSS (Object Oriented CSS) by Nicole Sullivan (@stubbornella)
• ACSS (Atomic CSS) by Brad Frost (@brad_frost)
• SMACSS (Scalable Modular Architecture) by Jonathan Snook (@snookca)
• BEM (Block Element Modifier) by Vitaly Harisov, et al.

Pop Culture References

• Oz the Great and Powerful
• The Wizard of Oz
• Upright Citizen’s Brigade (UCB)
• The Aviator
• Raiders of the Lost Ark
• The Office (UK)
• The Office (US)
• Office Space
• Robocop
• Wall-E
• Edward Scissorhands
• Back to the Future
• Iron Man
• Tim and Eric Awesome Show, Great Job!
• A Life Aquatic
• A Little Shop of Horrors
• Brave New World by Alduous Huxley
• The Doors of Perception by Alduous Huxley
• Thomas Henry Huxley
• Creation

Feedback on the talk? Find me on Twitter.