Front End Overview (2014)

FRONT END OVERVIEW with Rachel Ober

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

WELCOME TO FRONT END

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

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

6 FRONT END DEVELOPERS

7 PRODUCT DESIGN FRONT END DEVELOPERS

8 PRODUCT DESIGN DEVELOPMENT FRONT END DEVELOPERS

10 SET STANDARDS FRONT END DEVELOPERS

11 SET STANDARDS BUILD COMPONENTS FRONT END DEVELOPERS

12 SET STANDARDS BUILD COMPONENTS FRONT END DEVELOPERS MAINTAIN PATTERN
GUIDE

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

** Your experience may vary

WHAT IS FRONT END?

18 WHAT IS FRONT END?

19 WHAT IS FRONT END? Structure

20 WHAT IS FRONT END? Structure Style

21 WHAT IS FRONT END? Structure Style Behavior

22 WHAT IS FRONT END? Structure Style Behavior HTML

23 WHAT IS FRONT END? Structure Style Behavior HTML CSS

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

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

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

DEVELOPMENT TOOLS

29 Haml is a templating language

(Thankfully just in Email Templates)

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

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 <!DOCTYPE html> 2 <html lang="en-us"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Example</title> 6 </head> 7 <body> 8 <h1>Hello, world!</h1> 9 </body> 10 </html> 11

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

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

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

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

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

41 Sass is a preprocessor for CSS

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

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

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

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

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

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

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

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 }

53 We have a lot of opinionated JavaScript hanging around

57 And more…

HOW TO BUILD

60 MEET YOUR NEW MASTERS

61 Some Quick Stats

63 Over 8,700 Selectors

64 Over 8,700 Selectors

65 120 .scss files

66 78 Unique Color Codes

67 78 Unique Color Codes

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

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

File Structure

File Structure STINKS

PATTERN GUIDE

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

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

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

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

http://pea.rs

TESTING

Chrome Devtools

Firefox Devtools

Safari Devtools

Pray you don’t have to open Windows

Additional Ways of Testing CSS

HELPFUL RESOURCES

http://sassmeister.com/

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

Ask Sean for the plugin

http://browserdiet.com/

http://uptodate.frontendrescue.org/

Check out the Dev Library on Dropbox!

Front End Overview (2014)

Front End Overview (2014)

More Decks by Rachel Ober

Other Decks in Programming

Featured

Transcript