Slide 1

Slide 1 text

t32k.me Evaluating CSS Koji Ishimoto, Web Developer @Frontrend Final Conference on February 21, 2015

Slide 2

Slide 2 text

• Why CSS is so difficult? • Evaluate your CSS • Conclusion Agenda

Slide 3

Slide 3 text

Hi, I’m t32k! • Web Developer • Unemployment
 in Manila
 in Vancouver

Slide 4

Slide 4 text

Why CSS is so difficult?

Slide 5

Slide 5 text

Reading is dreaming with opening your eyes.

Slide 6

Slide 6 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% }

Slide 7

Slide 7 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% } Rule

Slide 8

Slide 8 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% } Rule Selector

Slide 9

Slide 9 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% } Rule Selector Declaration

Slide 10

Slide 10 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% } Rule Selector Declaration Property

Slide 11

Slide 11 text

div,%section%{% %%%%margin:%5px;% %%%%padding:%10px;% %%%%color:%red;% } Rule Selector Declaration Property Value

Slide 12

Slide 12 text

Super Easy!

Slide 13

Slide 13 text

Super Difficult!?

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

CSS Increase

Slide 18

Slide 18 text

90,000 93,750 97,500 101,250 105,000 108,750 112,500 116,250 120,000 Byte app.css size per deploy 300 0 150 75 225

Slide 19

Slide 19 text

90,000 93,750 97,500 101,250 105,000 108,750 112,500 116,250 120,000 Byte app.css size per deploy 300 0 150 75 225

Slide 20

Slide 20 text

ʊਓਓਓਓਓਓਓਓʊ ʼɹ Sweet Deathɹʻ ʉY^Y^Y^Y^Y^Y^Yʉ

Slide 21

Slide 21 text

Critical Rendering Path

Slide 22

Slide 22 text

Up to your Design

Slide 23

Slide 23 text

Web Design Layers Contents Presentation Behavior

Slide 24

Slide 24 text

Visual Design Web Design Layers Contents Presentation Behavior

Slide 25

Slide 25 text

Design pages Design systems! Jina Bolton, Senior Product Designer, Salesforce UX

Slide 26

Slide 26 text

Design pages Design systems! Jina Bolton, Senior Product Designer, Salesforce UX

Slide 27

Slide 27 text

Component Guide

Slide 28

Slide 28 text

CSS Engineer!?

Slide 29

Slide 29 text

An engineer is a professional practitioner of engineering Engineer - Wikipedia

Slide 30

Slide 30 text

• Requirements, Design • Construction • Testing, Debugging • Deployment, Maintenance Software Development Process

Slide 31

Slide 31 text

Evaluate your CSS

Slide 32

Slide 32 text

StyleStats A npm package to collect CSS statistics.

Slide 33

Slide 33 text

• Style Sheets • Style Elements • Size • Gzipped Size • Data URI Size • Ratio of Data URI Size • Simplicity • Rules • Selectors • Most Identifier • Most Identifier Selector • Lowest Cohesion • Lowest Cohesion • Selector • Total Unique Font Sizes • Unique Font Sizes • Total Unique Font Families • Unique Font Families • Total Unique Colors • Unique Colors • ID Selectors • Universal Selectors • Unqualified Attribute Selectors • JavaScript Specific Selectors • User Specified Selectors • Important Keywords • Float Properties • Media Queries • Properties Count Metrics StyleStats v5.0.0

Slide 34

Slide 34 text

$%npm%install%stylestats%

Slide 35

Slide 35 text

$%stylestats%<! %%Options:% %%%%% %%%%

Slide 36

Slide 36 text

Vision is the art of seeing what is invisible. Jonathan Swift, Essayist, Poet

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

CSS Dig(Chrome Extension)

Slide 39

Slide 39 text

CSS Stats(Web)

Slide 40

Slide 40 text

StyleStats(Web)

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

$%stylestats%path/to/app.css var%StyleStats%=%require('stylestats');% var%stats%=%new%StyleStats(‘path/to/app.css');% stats.parse(function%(error,%result)%{% %%console.log(JSON.stringify(result,%null,%2));% }); Command Line Way Programmatical Way

Slide 43

Slide 43 text

Use StyleStats from… CLI Grunt Gulp GUI(Web)

Slide 44

Slide 44 text

Slack Integration

Slide 45

Slide 45 text

Who use it?

Slide 46

Slide 46 text

Engineering Tools

Slide 47

Slide 47 text

Continuous Integration

Slide 48

Slide 48 text

Continuous integration (CI) is the practice, in software engineering, of merging all developer working copies with a shared mainline several times a day. Continuous integration - Wikipedia

Slide 49

Slide 49 text

Continuous Integration Test Build Monitor Deploy

Slide 50

Slide 50 text

Monitor

Slide 51

Slide 51 text

Plot with Jenkins

Slide 52

Slide 52 text

Plot with Jenkins

Slide 53

Slide 53 text

kaelig/moniteur

Slide 54

Slide 54 text

Plot with moniteur

Slide 55

Slide 55 text

{% %%"userSpecifiedSelectors":%% %“^\\.component\\<[a

Slide 56

Slide 56 text

The number of components

Slide 57

Slide 57 text

Test

Slide 58

Slide 58 text

CSS Lint

Slide 59

Slide 59 text

Disallow IDs in selectors

Slide 60

Slide 60 text

{% %%"defaults":%{% %%%%"operation":%"<",% %%},% %%"results":%{% %%%%"size":%20000,% %%%%"idSelectors":%{% %%%%%%"min":%2,% %%%%%%"max":%8% %%%%}% %}% }% Test specs file specs.json

Slide 61

Slide 61 text

$%stylestats%path/to/app.css%

Slide 62

Slide 62 text

Test on Travis

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Conclusion

Slide 65

Slide 65 text

• CSS still sucks! • CSS engineers don’t suck! • Share your CSS! Conclusion

Slide 66

Slide 66 text

Evaluate your CSS Evaluate yourself!

Slide 67

Slide 67 text

Thanks! t32k @t32k koji.ishimoto