Tweet
Tweet

Slide 1

Slide 1 text

FRONT END OVERVIEW with Rachel Ober

Slide 2

Slide 2 text

1. WELCOME TO FRONT END 2. WHAT IS FRONT END 3. DEVELOPMENT TOOLS 4. HOW TO BUILD 5. PATTERN GUIDE 6. TESTING 7. HELPFUL RESOURCES 2

Slide 3

Slide 3 text

WELCOME TO FRONT END

Slide 4

Slide 4 text

Rachel Ober Sr. Front End Developer • Started August 2012 • Lives in Brooklyn • Plays Pokémon • Owns a Corgi 4 4

Slide 5

Slide 5 text

Kelly Sly June 2013 5 Adam Christie April 2014 Dan “With a Beard” Cicconi May 2014 Joeseph Natalzia June 2014 5

Slide 6

Slide 6 text

6 FRONT END DEVELOPERS

Slide 7

Slide 7 text

7 PRODUCT DESIGN FRONT END DEVELOPERS

Slide 8

Slide 8 text

8 PRODUCT DESIGN DEVELOPMENT FRONT END DEVELOPERS

Slide 9

Slide 9 text

9 FRONT END DEVELOPERS

Slide 10

Slide 10 text

10 SET STANDARDS FRONT END DEVELOPERS

Slide 11

Slide 11 text

11 SET STANDARDS BUILD COMPONENTS FRONT END DEVELOPERS

Slide 12

Slide 12 text

12 SET STANDARDS BUILD COMPONENTS FRONT END DEVELOPERS MAINTAIN PATTERN GUIDE

Slide 13

Slide 13 text

13 SET STANDARDS BUILD COMPONENTS FRONT END DEVELOPERS MAINTAIN PATTERN GUIDE ENSURE CONSISTENCY

Slide 14

Slide 14 text

14 FRONT END DEVELOPERS

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

** Your experience may vary

Slide 17

Slide 17 text

WHAT IS FRONT END?

Slide 18

Slide 18 text

18 WHAT IS FRONT END?

Slide 19

Slide 19 text

19 WHAT IS FRONT END? Structure

Slide 20

Slide 20 text

20 WHAT IS FRONT END? Structure Style

Slide 21

Slide 21 text

21 WHAT IS FRONT END? Structure Style Behavior

Slide 22

Slide 22 text

22 WHAT IS FRONT END? Structure Style Behavior HTML

Slide 23

Slide 23 text

23 WHAT IS FRONT END? Structure Style Behavior HTML CSS

Slide 24

Slide 24 text

24 WHAT IS FRONT END? Structure Style Behavior HTML CSS JAVASCRIPT

Slide 25

Slide 25 text

25 WHAT IS FRONT END? Structure Style Behavior HTML → HAML CSS → SASS JAVASCRIPT → (MANY FLAVORS)

Slide 26

Slide 26 text

26 PROJECT CYCLE Content UX/IA Design Back End Ship QA Front End

Slide 27

Slide 27 text

DEVELOPMENT TOOLS

Slide 28

Slide 28 text

28

Slide 29

Slide 29 text

29 Haml is a templating language

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

(Thankfully just in Email Templates)

Slide 33

Slide 33 text

33 _header.html.haml _form.html.haml _footer.html.haml checkout.html.haml = render partial: ‘…’

Slide 34

Slide 34 text

34 1 !!! 2 %html{:lang => "en-us"} 3 %head 4 %meta{:charset => "utf-8"}/ 5 %title Example 6 %body 7 %h1 Hello, world! 8 1 2 3 4 5 Example 6 7 8

Hello, world!

9 10 11

Slide 35

Slide 35 text

35 • Meta data • Header • Footer • Login/Logout • Things you want on every page LAYOUTS

Slide 36

Slide 36 text

36 • Usually correspond to an action in a Controller • Holds template data for a specific page • Written in Haml • Variables • Loops over data sets VIEWS

Slide 37

Slide 37 text

37 • File names begin with an underscore • Handy for shared code around the site • Examples: • “Modules” for displaying a user’s contact details • How we display user’s attending status PARTIALS

Slide 38

Slide 38 text

38 • % is the beginning of a tag • if you start line with “.class-name” it assumes “div” by default • Classes begin with “.” and IDs with “#” • Use Rails helpers instead of straight Haml when available • “-” prefaces Ruby code to be executed • “=” prefaces Ruby code to be printed HAML STYLE

Slide 39

Slide 39 text

39 • Haml is very strict with whitespace • You can include text on same line or tabbed in on second line • … But not both! HAML STYLE

Slide 40

Slide 40 text

40

Slide 41

Slide 41 text

41 Sass is a preprocessor for CSS

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

43 In development, our Sass recompiles every time we refresh the page

Slide 44

Slide 44 text

44 We compile the Sass into CSS and then minify it before deploying it to production

Slide 45

Slide 45 text

45 _fonts.scss _typography.scss _buttons.scss styleguide.scss

Slide 46

Slide 46 text

46 _fonts.scss _typography.scss _buttons.scss styleguide.scss styleguide.css

Slide 47

Slide 47 text

47 1 .container { 2 width: 100%; 3 background: black; 4 } 5 .container ul { 6 width: 90%; 7 } 8 .container ul li { 9 background: rgba(0, 0, 0, 0.1); 10 -webkit-box-shadow: 0px 0px 5px #333333; 11 -moz-box-shadow: 0px 0px 5px #333333; 12 box-shadow: 0px 0px 5px #333333; 13 } 1 $container_bg: #000 2 .container { 3 width: 100%; 4 background: $container_bg; 5 ul { 6 width: 90%; 7 li { 8 background: rgba($container_bg, 0.1); 9 -webkit-box-shadow: 0px 0px 5px #333333; 10 -moz-box-shadow: 0px 0px 5px #333333; 11 box-shadow: 0px 0px 5px #333333; 12 } 13 } 14 } 15

Slide 48

Slide 48 text

48 • Use soft-tabs (i.e. spaces not tabs) with two space indent • Put spaces after : in property declarations. • Put spaces before { in rule declarations in SCSS. • Line returns after the last property declaration to place the }. • Use hex color codes #000 and lowercase #fff unless using rgba. SASS STYLE

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

50 Compass is a framework that includes helpful Sass modules to help us write better CSS

Slide 51

Slide 51 text

1 $container_bg: #000 2 .container { 3 width: 100%; 4 background: $container_bg; 5 ul { 6 width: 90%; 7 li { 8 background: rgba($container_bg, 0.1); 9 @include single-box-shadow; 10 } 11 } 12 } 51 1 .container { 2 width: 100%; 3 background: black; 4 } 5 .container ul { 6 width: 90%; 7 } 8 .container ul li { 9 background: rgba(0, 0, 0, 0.1); 10 -webkit-box-shadow: 0px 0px 5px #333333; 11 -moz-box-shadow: 0px 0px 5px #333333; 12 box-shadow: 0px 0px 5px #333333; 13 }

Slide 52

Slide 52 text

52

Slide 53

Slide 53 text

53 We have a lot of opinionated JavaScript hanging around

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

57 And more…

Slide 58

Slide 58 text

HOW TO BUILD

Slide 59

Slide 59 text

59

Slide 60

Slide 60 text

60 MEET YOUR NEW MASTERS

Slide 61

Slide 61 text

61 Some Quick Stats

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

63 Over 8,700 Selectors

Slide 64

Slide 64 text

64 Over 8,700 Selectors

Slide 65

Slide 65 text

65 120 .scss files

Slide 66

Slide 66 text

66 78 Unique Color Codes

Slide 67

Slide 67 text

67 78 Unique Color Codes

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Decompose the UI Color Palette Typography Borders & Line Widths Icons Buttons

Slide 70

Slide 70 text

Start Small and Build Up Carousel Module Call Outs Navigation Module Tiles

Slide 71

Slide 71 text

File Structure

Slide 72

Slide 72 text

File Structure

Slide 73

Slide 73 text

File Structure

Slide 74

Slide 74 text

File Structure STINKS

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

76 |- sass/ |--- buttons/ |--- color/ |--- forms/ |--- layouts/ |--- modules/ |--- typography/ |--- ui_patterns/ |--- _buttons.scss |--- _config.scss |--- _forms.scss |--- _global_design.scss |--- _reset.scss |--- _typography.scss |--- style.scss “Clean Out Your Sass Junk-Drawer” by Dale Sande http://gist.io/4436524

Slide 77

Slide 77 text

77 |- sass/ |--- modules/ |----- registration/ |------- _extends.scss |------- _functions.scss |------- _mixin.scss |------- _module_registration.scss |------- _module_personalInfo.scss |----- purchase/ |------- _extends.scss |------- _functions.scss |------- _mixin.scss |------- _module_summary.scss |------- _module_purchase.scss “Clean Out Your Sass Junk-Drawer” by Dale Sande http://gist.io/4436524

Slide 78

Slide 78 text

PATTERN GUIDE

Slide 79

Slide 79 text

http://local.paperlesspost.com/static/ui

Slide 80

Slide 80 text

http://local.paperlesspost.com/static/ui Out of Date

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

http://style.codeforamerica.org/patchwork.php

Slide 83

Slide 83 text

https://ux.mailchimp.com/patterns/

Slide 84

Slide 84 text

http://pea.rs

Slide 85

Slide 85 text

TESTING

Slide 86

Slide 86 text

Chrome Devtools

Slide 87

Slide 87 text

Firefox Devtools

Slide 88

Slide 88 text

Safari Devtools

Slide 89

Slide 89 text

Pray you don’t have to open Windows

Slide 90

Slide 90 text

Additional Ways of Testing CSS

Slide 91

Slide 91 text

HELPFUL RESOURCES

Slide 92

Slide 92 text

http://sassmeister.com/

Slide 93

Slide 93 text

http://zmoazeni.github.io/csscss/

Slide 94

Slide 94 text

Ask Sean for the plugin

Slide 95

Slide 95 text

http://browserdiet.com/

Slide 96

Slide 96 text

http://uptodate.frontendrescue.org/

Slide 97

Slide 97 text

Check out the Dev Library on Dropbox!