Rafael Rinaldi é pushador de código na Netshoes, co-organizador do FEMUG-SP e co-host do ZOFE podcast. Nesta palestra, falou sobre consistência visual em projetos web.

1. Visual consistency on web projects
@rafaelrinaldi

2. @rafaelrinaldi

3. http://netshoes.com.br

4. http://sp.femug.com

5. http://zofe.com.br

6. We all ❤ CSS
(don’t we?)

7. It’s really easy to change, but incredibly hard to test

8. Different implementations, multiple devices, screen sizes…

9. How to achieve consistency and sanity?

10. ›❯ Syntax check;
›❯ Code styleguide;
›❯ Code architecture;
›❯ Visual regression test.

11. Syntax check

12. Check for the code syntax in order to find errors

13. CSSLint

14. .imasters {
/* Invalid color value */
color: #red;
/* Invalid property and attribute */
lorem: 'ipsum';
}

15. λ csslint style.css
csslint: There are 2 problems in style.css.
style.css
1: error at line 3, col 10
Expected a hex color but found '#red' at line 3, col 10.
color: #red;
style.css
2: warning at line 6, col 3
Unknown property 'lorem'.
lorem: 'ipsum';

16. Code styleguide

17. Ensure code consistency by following a set
of predefined rules

19. SCSSLint

20. # config.yaml
linters:
# IDs, classes and placeholders should be all lowercase.
CapitalizationInSelector:
enabled: true
# Prefer hexadecimal color codes over color keywords.
ColorKeyword:
enabled: true
# Reports when you define the same property twice.
DuplicateProperty:
enabled: true

21. λ scss-lint -c config.yaml style.css
style.css:1 Selector `iMasters` should be written in lowercase
style.css:2 Color literals like `fuchsia` should be variables
style.css:2 Color `fuchsia` should be written in hexadecimal form
style.css:3 Property `color` already defined on line 2
style.css:3 Color `fuchsia` should be written in hexadecimal form
style.css:3 Color literals like `fuchsia` should be variables

22. Code architecture

23. A well structured code base make things flexible
and easier to change

24. BEM, SMACSS, OOCSS, Your Own Cool Technique…
(pick your poison)

25. .
├── assets
│ └── stylesheets
│ ├── application.scss
│ ├── base
│ │ ├── _grid.scss
│ │ ├── _typography.scss
│ │ └── _variables.scss
│ ├── components
│ │ ├── _dropdown.scss
│ ├── helpers
│ │ └── _mixins.scss
│ └── layout
│ ├── core
│ │ ├── _footer.scss
│ │ ├── _header.scss
│ └── sections
│ └── _dashboard.scss
├── bower.json
└── vendor
├── assets
├── normalize-css
└── susy

26. Use your common sense and build your projects
with a solid foundation from the ground up

27. Visual regression test

28. The classic way of testing UI is achieved by eyeballing

29. Style changes can break stuff you don’t even know about

30. That’s what’s called a regression
(we all have been there)

31. If you rely on humans to test stuff you’re screwed

32. Image diff

33. Uses image analysis and comparison
to make sure things didn’t break

35. BackstopJS
(uses Resemble.js, CasperJS and PhantomJS)

36. {
"viewports": [
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet",
"width": 568,
"height": 1024
}
]
}

37. {
"scenarios": [
{
"label": "My Website",
"url": "../../index.html",
"selectors": [
"nav",
".jumbotron",
"body .col-md-4:nth-of-type(1)",
"body .col-md-4:nth-of-type(2)",
"body .col-md-4:nth-of-type(3)",
"footer"
]
}
]
}

39. If you have a visual styleguide,
image diff regression test can be your best friend

41. Testing UI is more than just making assertions
against HTML markup

42. Computed style

43. Consists in testing UI by matching computed style values

44. Hardy
(uses Selenium)

45. Feature: iMasters UI Test
As a user I want visual consistency on the http://imasters.com.br
Scenario: Header layout
Given I visit 'http://imasters.com.br'
Then 'header > logo > a' should have 'color' of 'rgb(255, 165, 0)'

46. λ hardy selenium start
λ hardy .
Hardy v0.0.11
CSS Utils Steps Loaded
CSS Steps Loaded
Generic Steps Loaded
Loading browser firefox
…Shutting down browser
1 scenario (1 passed)
3 steps (3 passed)
firefox success

47. TL;DR

48. Invest in code consistency and modularity

49. Automate UI testing

50. Integrate everything into your build pipeline

51. CSS: Just Try and Do a Good Job
Chris Coyier
“
”

52. Thanks
@rafaelrinaldi