As a front-end developer
I write CSS, HTML and JavaScript
for different size projects
Slide 3
Slide 3 text
sometimes we start
SMALL PROJECTS
some HTML templates
mobile ready
LESS, SASS or CSS
Slide 4
Slide 4 text
sometimes we start
BIG PROJECTS
many templates
PHP/JS template engines
all responsive
retina support
a lot of LESS or SASS
Slide 5
Slide 5 text
sometimes we work on
PROJECTS THAT NEEDS HELP
huge project
no template engines
no coding standard
half working
CSS only
Slide 6
Slide 6 text
and
we make
MISTAKES.
Slide 7
Slide 7 text
we make mistakes
It’s normal
It's the main way to
grow and learn
me
excluded!
Slide 8
Slide 8 text
but sometimes
a small mistake
can lead to a big problem
Slide 9
Slide 9 text
checkout
t-shirt 8.00 $
Sport bag 22.50 $
Golf club 95.00 $
total 125.50 $
suppose a 25.000 $/day seller site
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
.buy-bg {
/* background-color: #ECECEC; */
background-color: rgba(0,0,0,0.15);
}
this is a missing fallback color
Slide 12
Slide 12 text
rgbwhat??
your client can say goodbye to
10.000$ per day
until you fix
the missing fallback color
Slide 13
Slide 13 text
how can I avoid these problems
without being crazy?
Slide 14
Slide 14 text
CSSLINT
a tool to test CSS problems
Slide 15
Slide 15 text
• 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
Slide 16
Slide 16 text
how it works?
CSSLINT
style.css
report
.csslintrc
Slide 17
Slide 17 text
CSSLINT / syntax checking
also on some text editors
jetbrains.com/phpstorm sublimetext.com
gruntjs.com
nodejs.org gulpjs.com
Slide 18
Slide 18 text
RESEMBLEJS
a tool to test regression mistakes
Slide 19
Slide 19 text
how a regression test works?
image
created
Slide 20
Slide 20 text
how a regression test works?
image
created
image
changed
Slide 21
Slide 21 text
THE DIFFERENCE
the result
if the image is changed
you’ll see it
Slide 22
Slide 22 text
suppose a BIG WEBSITE
with tons of different widgets
needed to be reused in different places
Slide 23
Slide 23 text
how RESEMBLEJS works?
RESEMBLEJS
page-01.html
page-02.html
test PASSED
page-…html
fingerprints
casper
}
Slide 24
Slide 24 text
fingerprints
how RESEMBLEJS works?
RESEMBLEJS
…01.html
…02.html
test FAIL
…html
new images
casper
Slide 25
Slide 25 text
v
Sometimes
they need specific state
relative to the view for design needs
this helps you to keep
changes isolated on the page
Slide 26
Slide 26 text
v
regression tests should be on
static HTML templates to:
• avoid fails by fixtures changes
• get faster tests performance
• get less test writing costs
Slide 27
Slide 27 text
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/PhantomCSS
gulpjs.com
Slide 28
Slide 28 text
UNCSS
a tool to remove unused selectors
Slide 29
Slide 29 text
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;
}
WHITE LIST
KEPT
DELETED
KEPT
Slide 33
Slide 33 text
UNCSS / unused styles remover
nodejs.org
can be used with
gulpjs.com
gruntjs.com
Slide 34
Slide 34 text
STYLESTATS
a tool to see how you wrote your styles
Slide 35
Slide 35 text
how it works?
STYESTATS
style.css
report
Slide 36
Slide 36 text
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…
Slide 37
Slide 37 text
STYLESTATS / unused styles remover
gruntjs.com
nodejs.org
can be used with
gulpjs.com
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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