Operations Tooling for UI - DevOps for CSS Developers

Ops Tooling for UI
DevOps and the CSS Developer
CSSConf June 18, 2015
(full speaker notes included)
Rachael L Moore
UI Engineer
OpenTable
morewry

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;

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

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

Operations Tooling for UI - DevOps for CSS Developers

idea goes in and product comes out

Questions
What are we delivering?
What's the process for
producing it?

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

<custom-button />
UI Components

UI Components Technical Benefits
<custom-button />

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

UI Components
producing it?
Questions

UI Components
producing it?
Supported by automated
pipeline
Questions

Automated pipeline
Tasks to automate
Basic setup

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);
}

button {
display: flex;
flex: 1 1 auto;
}

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;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
...
button {
display: flex;
}

Test
Unit
Visual diff
End-to-end

test harness / test framework / test fixture
stub / spy / mock object / fake object
test double / dummy object / use case
unit / integration / performance / e2e / ui
smoke / compatibility / acceptance / coverage
black-box / white-box / gray-box
visual / system / regression / reporter
benchmark / test case / scenario / test suite
test matrix / security / page object
selenium / webdriver / test runner / baseline
functional / non-functional / ad hoc
bottom up / top down / test bed / test driver

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

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

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 task
Running preprocess task
Running postprocess task
> grunt test
Running unit-test task
Running visual-diff task
Running e2e-test task
Grunt Tasks Running

> 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 the
east.
[Exits: north up (down)]
(White Aura) Iauro the old priest is here.
> look

> 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 Moore
UI Engineer
OpenTable
morewry
Example Github Repository
http://github.com/morewry/CSSConf-2015-Pipeline
Supplementary Reading List
CSSConf-2015-Pipeline/wiki/Reading
Suggested Tools List
CSSConf-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 at
opentable.com/careers/
Visit our careers page at
opentable.com/careers/
We’re hiring!We’re hiring!
GUI Devs Q1 2016!

Operations Tooling for UI - DevOps for CSS Developers

Recommended

More Related Content

Viewers also liked (8)

Similar to Operations Tooling for UI - DevOps for CSS Developers (20)

Recently uploaded (20)

Operations Tooling for UI - DevOps for CSS Developers