Upload
rachael-l-moore
View
125
Download
2
Embed Size (px)
Citation preview
Ops Tooling for UIDevOps and the CSS DeveloperCSSConf June 18, 2015
(full speaker notes included)
Rachael L MooreUI EngineerOpenTable morewry
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: 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;
What are we delivering?UI Components
What's the process for producing it?Supported by automated pipeline
Questions
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
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 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
var button = $(".custom-button");expect(button.styles).to.equal(written.styles);
*pseudocodeUnit Testing
{ "guests": [ { "name": "Testina T. McTesterson-Testfield", "seated": true }, { "name": "T.J. Test", "seated": false } ]}
Mock Data Example
> grunt build
Running lint taskRunning preprocess taskRunning postprocess task
> grunt test
Running unit-test taskRunning visual-diff taskRunning 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
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
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
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!