10. checkout
t-shirt 8.00 $
Sport bag 22.50 $
Golf club 95.00 $
total 125.50 $
Chrome render
60% of users
IE8 render
40% of users
suppose a 25.000 $/day seller site
24. v
Sometimes
they need specific state
relative to the view for design needs
this helps you to keep
changes isolated on the page
25. v
regression tests should be on
static HTML templates to:
• avoid fails by fixtures changes
• get faster tests performance
• get less test writing costs
26. RESEMBLEJS / regression tests
gruntjs.com
nodejs.org
can be used with
phantomjs.org casperjs.org
BackstopJS gulpjs only
github.com/garris/BackstopJS
PhantomCSS
github.com/Huddle/PhantomCSSgulpjs.com
35. Published Wed Feb 25 2015…
Paths github.css
Stylesheets 1
Size 231.0KB
Data Uri Size 0
Rules 2957
Selectors 3289
Simplicity 89.91%
Most Identifiers 4
Most Identifiers Selector .is-uploading .avatar…
Lowest Cohesion 24
Lowest Cohesion Selector .add-line-comment
Total Unique Font Sizes 36
Unique Font Size 0.9em
…
Total Unique Colors 66
Unique Color #000
…
and so on…
36. STYLESTATS / unused styles remover
gruntjs.com
nodejs.org
can be used with
gulpjs.com
37. how I choose which tests to use?
OBJECTIVES - dev priority
Client needs, which browsers, UX needed
COMPLEXITY
Team size, tasks diversity, to-do list
BUDGET - client priority
Setup time, writing and testing time
38. Is that all with tests/tools?
no, there are tons of nodesjs and gruntjs plug-ins
WHAT TYPE
csslint syntax test
ResembleJS layout regression test
uncss unused selectors tool
StyleStats css stats tool
checkout http://csste.st to see more
39. SMALL
WHAT USE
csslint Y
ResembleJS N
uncss O
StyleStats O
less budget margins
BIG
WHAT USE
csslint Y
ResembleJS Y
uncss Y
StyleStats Y
more budget,
handle complexity,
front-end under control
Y
N
O
YES
NOT RECOMMENDED
OPTIONAL, easy to setup
VS