Linting, testing, distribution, deployment--and all the associated tooling and tracking.
The learning curve on all this stuff can be pretty harsh for web UI developers. All the vocabulary. All the options. All the extra code. What does it all mean? And what, if anything, does your project need?
In this talk I discuss web user interfaces at scale and the benefits of bringing more of DevOps culture to the UI space, combining introductory material with practical applications.
Talk presented at CSSConf in June 2015.
71. ul#id li button {
display: block;
color: white;
}
Linting vs
Validating
button }
display: block;
color: %FFF
Validation vs Linting
72. button {
dispay: block;
padding: 0 1rem;
color: #FFF;
background: #333;
text-transform: uppercase;
}
Typo Example Caught by Linting
73. WARNING: Unknown property 'dispay'.
Properties should be known (listed in CSS3
specification) or be a vendor-prefixed property.
Typo Example Caught by Linting
84. 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
116. 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
127. 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