Ops Tooling for UIDevOps and the CSS DeveloperCSSConf June 18, 2015

(full speaker notes included)

Rachael L MooreUI EngineerOpenTable morewry

Design Dev Ops

Design Dev Ops

Design Dev Ops

button { dispay: block; padding: 0 1rem; color: #FFF; background: #333; text-transform: uppercase;}

Typo Example

button { dispay: block; padding: 0 1rem; color: #FFF; background: #333; text-transform: uppercase;}

Typo Example

button { display: block; padding: 0 1rem;

Typo Example

button { display: flex; flex: 1 1 auto; justify-content: center; align-items: center;}

Prefix Example

Prefix Example

button { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;

Layout Problem

.table { display: table; width: 100%; margin: 0 auto;}

.table { display: table; table-layout: fixed; width: 100%; margin: 0 auto;}

Layout Problem

DevOps(cross your fingers)

Cupcake Cup+Cake

idea goes in and product comes out

Ideation

Design

Implementation

Verification

Release

DevOps

Product & Design

ALL Implementation??

Brainstorming

Prototyping

Usability testing

Hand off final design

Questions

What are we delivering?

What's the process for producing it?

UI Components

<link rel="import" src="components/button.html" />

UI Components

<custom-button />

UI Components

UI Components Technical Benefits

<custom-button />

<custom-button option="option value" />

UI Components Technical Benefits

<custom-button />

UI Components Technical Benefits

What are we delivering?UI Components

What's the process for producing it?

Questions

What are we delivering?UI Components

What's the process for producing it?Supported by automated pipeline

Questions

Automated pipeline

Tasks to automate

Basic setup

Build

Test

Distribute

Build

Test

Distribute

Build Test Distribute

Build

Lint

Preprocess

Postprocess

ul#id li button { display: block; color: white;}

Linting vs Validating

button } display: block; color: %FFF\

Validation vs Linting

button { dispay: block; padding: 0 1rem; color: #FFF; background: #333; text-transform: uppercase;}

Typo Example Caught by Linting

WARNING: Unknown property 'dispay'. Properties should be known (listed in CSS3 specification) or be a vendor-prefixed property.

Typo Example Caught by Linting

.new-class { font-size: $var-font-size; @include custom-mixin; font-weight: bold @extend .old-class; @if $var-condition { // ... }}

Sass (SCSS) Syntax

:root { --restaurant-color: #5FA9C4; --consumer-color: #CE3D44;}

.class { background-color: var(--restaurant-color);}

Vanilla CSS Features

.class { width: calc(100% - 3rem);}

Vanilla CSS Features

button { display: flex; flex: 1 1 auto; justify-content: center; align-items: center;}

Vanilla CSS Features

Auto-Prefixed Comparison

button { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -moz-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -moz-box-align: center; -webkit-align-items: center;

...

button { display: flex; justify-content: center; align-items: center;}

Test

Unit

Visual diff

End-to-end

test harness / test framework / test fixturestub / spy / mock object / fake objecttest double / dummy object / use case

unit / integration / performance / e2e / uismoke / compatibility / acceptance / coverage

black-box / white-box / gray-box visual / system / regression / reporter

benchmark / test case / scenario / test suitetest matrix / security / page object

selenium / webdriver / test runner / baselinefunctional / non-functional / ad hoc

bottom up / top down / test bed / test driver

Unit Testing

var result = add(1, 2);expect(result).to.equal(3);

Unit Testing

var button = $(".custom-button");expect(button.styles).to.equal(written.styles);

*pseudocodeUnit Testing

✔

Sample / Diff / Baseline

Techniques

Test pages

Mock data

{ "guests": [ { "name": "Testina T. McTesterson-Testfield", "seated": true }, { "name": "T.J. Test", "seated": false } ]}

Mock Data Example

Distribute

Pull Requests / CI

Versioning / Releasing

> grunt build

Running lint taskRunning preprocess taskRunning postprocess task

> grunt test

Running unit-test taskRunning visual-diff taskRunning e2e-test task

Grunt Tasks Running

1.2.3(best version ever)

Tagging & Bower

> bower install custom-button

bower download ...bower install ...

custom-button#1.2.3 bower_components/custom-button

Tagging & Bower

Automated pipeline

Build

Test

Distribute

Prerequisites

Temple of Balance

Two tall stone pillars hold up the overhang of the temple, shielding the worshippers from the elements. You see the Temple Square to the north and the altar of the neutral gods to theeast.

[Exits: north up (down)](White Aura) Iauro the old priest is here.

> look

Installing Grunt

> npm install -g grunt-cli> npm install grunt --save-dev

Installing Grunt

Gruntfile.js

module.exports = function (grunt) { // load tasks grunt.loadNpmTasks(""); grunt.initConfig({}); // config tasks grunt.config({}) // custom pipeline tasks grunt.registerTask("", []);};

... // load tasks grunt.loadNpmTasks("grunt-csslint"); // config tasks grunt.config("csslint", { "default": { options: { csslintrc: ".csslintrc" }, src: ["/*.css"] } });...

CSSLint - Gruntfile.js

... // load tasks grunt.loadNpmTasks("grunt-postcss"); // config tasks grunt.config("postcss", { options: { processors: [ require("autoprefixer-core")() ]}, "default": { src: ["*.css"] } });...

PostCSS/Autoprefixer - Gruntfile.js

... // custom pipeline tasks grunt.registerTask("build", [ "csslint:default", "postcss:default" ]); grunt.registerTask("test", [...]); grunt.registerTask("distribute", [...]);...

Pipline Tasks - Gruntfile.js

language: node_js

node_js: - "0.12"

install: - npm install -g grunt-cli - npm install

script: - grunt build

.travis.yml

Resources

Rachael L MooreUI EngineerOpenTable morewry

Example Github Repositoryhttp://github.com/morewry/CSSConf-2015-Pipeline

Supplementary Reading ListCSSConf-2015-Pipeline/wiki/Reading

Suggested Tools ListCSSConf-2015-Pipeline/wiki/Tools

Summary

DevOps

UI Components

Automated Pipelines

Thanks!Sara Rahimian, Susan Lin, Agustin Colchado, Barry Wong, Simon Attley, Rahul Choudhury

& entire Guest Center Web Team

Visit our careers page atopentable.com/careers/Visit our careers page atopentable.com/careers/

We’re hiring!We’re hiring!

GUI Devs Q1 2016!