Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 40

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Test-proof CSS

  1. 1. Test-proof CSS vittorio vittori @vttrx #css-testing
  2. 2. As a front-end developer I write CSS, HTML and JavaScript for different size projects
  3. 3. sometimes we start SMALL PROJECTS some HTML templates mobile ready LESS, SASS or CSS
  4. 4. sometimes we start BIG PROJECTS many templates PHP/JS template engines all responsive retina support a lot of LESS or SASS
  5. 5. sometimes we work on PROJECTS THAT NEEDS HELP huge project no template engines no coding standard half working CSS only
  6. 6. and we make MISTAKES.
  7. 7. we make mistakes It’s normal It's the main way to grow and learn me excluded!
  8. 8. but sometimes a small mistake can lead to a big problem
  9. 9. checkout t-shirt 8.00 $ Sport bag 22.50 $ Golf club 95.00 $ total 125.50 $ suppose a 25.000 $/day seller site
  10. 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
  11. 11. .buy-bg { /* background-color: #ECECEC; */ background-color: rgba(0,0,0,0.15); } this is a missing fallback color
  12. 12. rgbwhat?? your client can say goodbye to 10.000$ per day until you fix the missing fallback color
  13. 13. how can I avoid these problems without being crazy?
  14. 14. CSSLINT a tool to test CSS problems
  15. 15. • 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
  16. 16. how it works? CSSLINT style.css report .csslintrc
  17. 17. CSSLINT / syntax checking also on some text editors jetbrains.com/phpstorm sublimetext.com gruntjs.comnodejs.org gulpjs.com
  18. 18. RESEMBLEJS a tool to test regression mistakes
  19. 19. how a regression test works? image created image changed
  20. 20. THE DIFFERENCE the result if the image is changed you’ll see it
  21. 21. suppose a BIG WEBSITE with tons of different widgets needed to be reused in different places
  22. 22. how RESEMBLEJS works? RESEMBLEJS page-01.html page-02.html test PASSED page-…html fingerprints casper }
  23. 23. fingerprints how RESEMBLEJS works? RESEMBLEJS …01.html …02.html test FAIL …html new images casper
  24. 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. 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. 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
  27. 27. UNCSS a tool to remove unused selectors
  28. 28. how it works? UNCSS page-01.html page-02.html style.uncssed.css page-…html style.css
  29. 29. CSS .logo { background-image: url(…); } .js-selector { position: fixed; } div header { background-color: pink; } nav { padding: 20px; }
  30. 30. HTML <body> <header> <a class=“logo” href=“#”></a> <nav> <a href=“#”>Hello</a> </nav> </header> </body>
  31. 31. CSS .logo { background-image: url(…); } .js-selector { position: fixed; } div header { background-color: pink; } nav { padding: 20px; } WHITE LIST KEPT DELETED KEPT
  32. 32. UNCSS / unused styles remover nodejs.org can be used with gulpjs.comgruntjs.com
  33. 33. STYLESTATS a tool to see how you wrote your styles
  34. 34. how it works? STYESTATS style.css report
  35. 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. 36. STYLESTATS / unused styles remover gruntjs.com nodejs.org can be used with gulpjs.com
  37. 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. 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. 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
  40. 40. THANK YOU vittorio vittori @vttrx #css-testing

×