Visual consistency on web projects

Slide 1

Slide 1 text

Visual consistency on web projects @rafaelrinaldi

Slide 2

Slide 2 text

@rafaelrinaldi

Slide 3

Slide 3 text

http://netshoes.com.br

Slide 4

Slide 4 text

http://sp.femug.com

Slide 5

Slide 5 text

http://zofe.com.br

Slide 6

Slide 6 text

We all ❤ CSS (don’t we?)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Different implementations, multiple devices, screen sizes…

Slide 9

Slide 9 text

How to achieve consistency and sanity?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Syntax check

Slide 12

Slide 12 text

Check for the code syntax in order to ﬁnd errors

Slide 13

Slide 13 text

CSSLint

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

λ 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';

Slide 16

Slide 16 text

Code styleguide

Slide 17

Slide 17 text

Ensure code consistency by following a set of predeﬁned rules

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

SCSSLint

Slide 20

Slide 20 text

# 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

Slide 21

Slide 21 text

λ 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

Slide 22

Slide 22 text

Code architecture

Slide 23

Slide 23 text

A well structured code base make things ﬂexible and easier to change

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

. ├── 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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Visual regression test

Slide 28

Slide 28 text

The classic way of testing UI is achieved by eyeballing

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Image diff

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

BackstopJS (uses Resemble.js, CasperJS and PhantomJS)

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

{ "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" ] } ] }

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Testing UI is more than just making assertions against HTML markup

Slide 42

Slide 42 text

Computed style

Slide 43

Slide 43 text

Consists in testing UI by matching computed style values

Slide 44

Slide 44 text

Hardy (uses Selenium)

Slide 45

Slide 45 text

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)'

Slide 46

Slide 46 text

λ 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