External Vision Systems (XVS) Proof-of-Concept Flight Test Evaluation
Test-proof CSS
40
Test-proof CSS vittorio vittori @vttrx #css-testing
-
Upload
vittorio-vittori -
Category
Internet
-
view
167 -
download
3
Transcript of Test-proof CSS
Test-proof CSS
vittorio vittori @vttrx #css-testing
As a front-end developer I write CSS, HTML and JavaScript for different size projects
sometimes we start SMALL PROJECTS
some HTML templates mobile ready LESS, SASS or CSS
sometimes we start BIG PROJECTS
many templates PHP/JS template engines
all responsive retina support
a lot of LESS or SASS
sometimes we work on PROJECTS THAT NEEDS HELP
huge project no template engines
no coding standard half working
CSS only
and we make MISTAKES.
we make mistakes
It’s normal
It's the main way to grow and learn
me excluded!
but sometimes a small mistake
can lead to a big problem
checkout
t-shirt 8.00 $
Sport bag 22.50 $
Golf club 95.00 $
total 125.50 $
suppose a 25.000 $/day seller site
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
.buy-bg { /* background-color: #ECECEC; */ background-color: rgba(0,0,0,0.15); }
this is a missing fallback color
rgbwhat??
your client can say goodbye to 10.000$ per day
until you fix the missing fallback color
how can I avoid these problems without being crazy?
CSSLINT a tool to test CSS problems
• Possible Errors • Disallow duplicate properties • Disallow empty rules • Require use of known properties, etc…
• Compatibility • Require compatible vendor prefixes • Require all gradient definitions • Require fallback colors, etc…
• Performance • Disallow units for zero values, etc…
• Maintainability & Duplication • Disallow IDs in selectors, etc…
• Accessibility • OOCSS
Rule types github.com/CSSLint/csslint
how it works?
CSSLINT
style.css
report
.csslintrc
CSSLINT / syntax checking
also on some text editors
jetbrains.com/phpstorm sublimetext.com
gruntjs.comnodejs.org gulpjs.com
RESEMBLEJS a tool to test regression mistakes
how a regression test works?
image created
image changed
THE DIFFERENCE
the result if the image is changed
you’ll see it
suppose a BIG WEBSITE with tons of different widgets needed to be reused in different places
how RESEMBLEJS works?
RESEMBLEJS
page-01.html
page-02.html
test PASSED
page-…html
fingerprints
casper
}
fingerprints
how RESEMBLEJS works?
RESEMBLEJS
…01.html
…02.html
test FAIL
…html
new images
casper
v
Sometimes they need specific state relative to the view for design needs
this helps you to keep changes isolated on the page
v
regression tests should be on static HTML templates to:
• avoid fails by fixtures changes
• get faster tests performance
• get less test writing costs
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
UNCSS a tool to remove unused selectors
how it works?
UNCSS
page-01.html
page-02.html
style.uncssed.css
page-…html
style.css
CSS
.logo { background-image: url(…);
}
.js-selector { position: fixed;
}
div header { background-color: pink;
}
nav { padding: 20px;
}
HTML
<body> <header> <a class=“logo” href=“#”></a> <nav> <a href=“#”>Hello</a>
</nav> </header>
</body>
CSS
.logo { background-image: url(…);
}
.js-selector { position: fixed;
}
div header { background-color: pink;
}
nav { padding: 20px;
}
WHITE LIST
KEPT
DELETED
KEPT
UNCSS / unused styles remover
nodejs.org
can be used with
gulpjs.comgruntjs.com
STYLESTATS a tool to see how you wrote your styles
how it works?
STYESTATS
style.css
report
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…
STYLESTATS / unused styles remover
gruntjs.com
nodejs.org
can be used with
gulpjs.com
how I choose which tests to use?
OBJECTIVES - dev priorityClient needs, which browsers, UX needed
COMPLEXITYTeam size, tasks diversity, to-do list
BUDGET - client prioritySetup time, writing and testing time
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
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
THANK YOU
vittorio vittori @vttrx #css-testing
