I Am a Front-End Web Dev (and so can you!) - SCRC 2013

Version of this talk for Steel City Ruby Conf 2013

Transcript

1. I AM A FRONT-END
   WEB DEVELOPER
   (AND SO CAN YOU!)
   Julie Pagano 4 @juliepagano 4 SCRC13
   

   View Slide

2. Julie Pagano
   @juliepagano
   

   View Slide

3. I AM A FRONT-END
   WEB DEVELOPER
   

   View Slide

4. I AM A FRONT-END
   WEB DEVELOPER
   (AND SO CAN YOU!)
   

   View Slide

5. Goals
   Introduction
   

   View Slide

6. Goals
   Introduction
   Background & Environment
   

   View Slide

7. Goals
   Introduction
   Background & Environment
   Technical Skills
   

   View Slide

8. Goals
   Introduction
   Background & Environment
   Technical Skills
   References
   

   View Slide

9. What is a front-end
   web developer?
   

   View Slide

10. What is a front-end
    web developer?
    

    View Slide

11. What is a front-end
    web developer?
    A software engineer
    who focuses on the
    client side of web
    applications.
    

    View Slide

12. client side
    web apps
    

    View Slide

13. live in the browser
    client side
    web apps
    

    View Slide

14. on the user’s machine
    client side
    web apps
    

    View Slide

15. on the user’s machine
    Ruby on Rails app
    

    View Slide

16. HTML
    

    View Slide

17. CSS
    HTML
    

    View Slide

18. CSS
    JavaScript
    HTML
    

    View Slide

19. CSS
    JavaScript
    content
    

    View Slide

20. presentation
    JavaScript
    content
    

    View Slide

21. presentation
    behavior
    content
    

    View Slide

22. Front-end web devs
    are software engineers
    

    View Slide

23. ...that sometimes fill
    some other roles
    

    View Slide

24. ...that sometimes fill
    some other roles
    design
    

    View Slide

25. ...that sometimes fill
    some other roles
    design
    user experience
    

    View Slide

26. ...that sometimes fill
    some other roles
    design
    user experience
    quality assurance
    

    View Slide

27. ...that sometimes fill
    some other roles
    design
    user experience
    backend Development
    quality assurance
    

    View Slide

28. background
    &
    Environment
    

    View Slide

29. Specs come from the
    

    View Slide

30. There are many browsers
    

    View Slide

31. ...with many versions
    30.0 25.0 16.0 7.0 11.0
    29.0 24.0 15.0 6.0 10.0
    28.0 23.0 12.1 5.1 9.0
    27.0 22.0 12.0 5.0 8.0
    26.0 21.0 11.6 4.0 7.0
    25.0 20.0 11.5 3.2 6.0
    24.0 19.0 11.1 3.1 5.5
    23.0 18.0 11.0
    22.0 17.0 12.1
    21.0 16.0 12.0
    ... ... ...
    

    View Slide

32. ...and they sort of
    follow the specs
    

    View Slide

33. Change comes slowly
    2004
    2008
    2011
    2012
    2014
    started work
    1st public working draft
    last call
    candidate recommendation
    stable recommendation
    

    View Slide

34. ...and inconsistently
    -webkit-
    -moz-
    -ms-
    -o-
    

    View Slide

35. View Slide

36. /*  Old  browsers  */
    background:  #000;
    /*  Vendor  Prefixes  */
    background:  -­‐webkit-­‐gradient(linear,  left  top,  left  bottom,  
                           color-­‐stop(0%,#000),  color-­‐stop(100%,#fff));
    background:  -­‐webkit-­‐linear-­‐gradient(top,  #000  0%,#fff  100%);
    background:  -­‐o-­‐linear-­‐gradient(top,  #000  0%,#fff  100%);
    background:  -­‐ms-­‐linear-­‐gradient(top,  #000  0%,#fff  100%);
    /*  W3C  */
    background:  linear-­‐gradient(to  bottom,  #000  0%,#fff  100%);
    /*  IE6-­‐9  */
    filter:  progid:DXImageTransform.Microsoft.gradient(
                   startColorstr='#000',
                   endColorstr='#fff',  GradientType=0);
    

    View Slide

37. and some things
    stay the same
    

    View Slide

38. We don’t control
    the environment
    

    View Slide

39. We don’t control
    the environment
    

    View Slide

40. We don’t control
    the environment
    

    View Slide

41. We don’t control
    the environment
    

    View Slide

42. Why do we
    care about this?
    

    View Slide

43. Why do we
    care about this?
    ✓ cross-browser issues
    

    View Slide

44. Why do we
    care about this?
    ✓ cross-browser issues
    - bugs
    

    View Slide

45. Why do we
    care about this?
    ✓ cross-browser issues
    - bugs
    - features
    

    View Slide

46. Why do we
    care about this?
    ✓ cross-browser issues
    - bugs
    - features
    ✓ performance
    

    View Slide

47. We fight for the users!
    

    View Slide

48. Technical
    Skills
    

    View Slide

49. Know your resources
    

    View Slide

50. specifications
    

    View Slide

51. general reference
    

    View Slide

52. Rails reference
    

    View Slide

53. Rails reference
    Views
    

    View Slide

54. Rails reference
    Views
    Asset Pipeline
    

    View Slide

55. Rails reference
    Views
    Asset Pipeline
    JavaScript
    

    View Slide

56. Don’t forget software
    engineering practices
    

    View Slide

57. Don’t forget software
    engineering practices
    ✓ don’t repeat yourself
    

    View Slide

58. Don’t forget software
    engineering practices
    ✓ don’t repeat yourself
    ✓ keep it simple
    

    View Slide

59. Don’t forget software
    engineering practices
    ✓ don’t repeat yourself
    ✓ keep it simple
    ✓ refactor early and often
    

    View Slide

60. Don’t forget software
    engineering practices
    ✓ don’t repeat yourself
    ✓ keep it simple
    ✓ refactor early and often
    ✓ test your code
    

    View Slide

61. HTML
    

    View Slide

62. content
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. offline storage Connectivity file access Semantics
    audio/video 3d/graphics presentation performance nuts & bolts
    

    View Slide

67. offline storage Connectivity file access Semantics
    audio/video 3d/graphics presentation performance nuts & bolts
    

    View Slide

68. Semantics
    

    View Slide

69. Semantics
    “The meaning of a word,
    phrase, sentence, or text.”
    

    View Slide

70. Semantics
    give meaning to structure
    

    View Slide

71. Semantics
    communicate that
    meaning consistently
    

    View Slide

72.  
       
           Page  Title  
             
                 
                   home  
                   about  
                   blog  
                 
             
         
         
           main  page  content  here  
         
         
           footer  information  here  
         
    
    

    View Slide

73.  
       
           Page  Title  
             
                 
                   home  
                   about  
                   blog  
                 
             
         
         
           main  page  content  here  
         
         
           footer  information  here  
         
    
    

    View Slide

74.  
         
           Page  Title
             
                 
                   home  
                   about  
                   blog  
                 
             
         
         
           main  page  content  here  
         
         
           footer  information  here  
         
    
    

    View Slide

75. humans
    read our HTML
    machines
    &
    

    View Slide

76. View Slide

77. Templating
    

    View Slide

78. Templating
    
       Hello
       <%=  location  %>
    
    template
    

    View Slide

79. Templating
    
       Hello
       <%=  location  %>
    
    template backend
    +
    

    View Slide

80. Templating
    
       Hello
       <%=  location  %>
    
    template backend
    + =
    Hello
    Pittsburgh
    

    View Slide

81. Templating
    
       Hello
       <%=  location  %>
    
    template backend
    + =
    Hello
    Pittsburgh
    Hello
    New York
    Hello
    London
    Hello
    Tokyo
    ...
    

    View Slide

82. Templating in Ruby
    

    View Slide

83. Templating in Ruby
    ERB
    

    View Slide

84. Templating in Ruby
    ERB
    HAML
    

    View Slide

85. Templating in Ruby
    ERB
    HAML
    many more...
    

    View Slide

86. Classes
    Styles that apply to
    multiple elements.
    

    View Slide

87. Classes
    Use meaningful names.
    

    View Slide

88. Classes
    Use meaningful names.
    What it is.
    

    View Slide

89. Classes
    Use meaningful names.
    What it is.
    NOT what it looks like.
    

    View Slide

90. Bad Class Names
    bigText
    red
    leftColumn
    

    View Slide

91. Better Class Names
    important
    alert
    sidebar
    

    View Slide

92. IDs
    Styles that apply to
    one element.
    

    View Slide

93. IDs
    Unique identifiers.
    

    View Slide

94. IDs
    Meaningful names.
    

    View Slide

95. CSS
    

    View Slide

96. presentation
    

    View Slide

97. CSS-Tricks
    A List Apart
    CSS Resources
    

    View Slide

98. Box Model
    

    View Slide

99. Learn specificity
    When multiple selectors
    match an element, the
    higher specificity wins.
    

    View Slide

100.  
        What  color  will  I  be?  
      
     #red  {  
        color:  red;  
     }  
      
     .blue  {  
        color:  blue;  
     }  
     

     View Slide

101.  
        What  color  will  I  be?  
      
     #red  {  
        color:  red;  
     }  
      
     .blue  {  
        color:  blue;  
     }  
     

     View Slide

102. !important
     Overrides specificity.
     

     View Slide

103. !important
     Should be used sparingly.
     

     View Slide

104. Efficient CSS
     

     View Slide

105. ✓ ID selectors are efficient
     Efficient CSS
     

     View Slide

106. ✓ ID selectors are efficient
     ✓ Universal selectors are not efficient
     Efficient CSS
     

     View Slide

107. ✓ ID selectors are efficient
     ✓ Universal selectors are not efficient
     ✓ Descendent selectors are expensive
     Efficient CSS
     

     View Slide

108. ✓ ID selectors are efficient
     ✓ Universal selectors are not efficient
     ✓ Descendent selectors are expensive
     ✓ and more...
     Efficient CSS
     

     View Slide

109. reset.css
     normalize.css
     Cross-Browser
     Consistency
     

     View Slide

110. CSS Preprocessors
     

     View Slide

111. CSS Preprocessors
     ✓ variables
     

     View Slide

112. CSS Preprocessors
     ✓ variables
     ✓ mixins
     

     View Slide

113. CSS Preprocessors
     ✓ variables
     ✓ mixins
     ✓ operations
     

     View Slide

114. CSS Preprocessors
     ✓ variables
     ✓ mixins
     ✓ operations
     ✓ and more...
     

     View Slide

115. CSS Preprocessors
     Make css feel like a real
     programming language.
     

     View Slide

116. CSS Preprocessors
     

     View Slide

117. CSS Preprocessors
     

     View Slide

118. CSS Preprocessors
     

     View Slide

119. CSS Preprocessors
     Get them for free with the
     asset pipeline in Rails 3.1+
     

     View Slide

120. tips, tricks, & hacks
     

     View Slide

121. ✓ spriting
     tips, tricks, & hacks
     

     View Slide

122. ✓ spriting
     ✓ clearfix
     tips, tricks, & hacks
     

     View Slide

123. ✓ spriting
     ✓ clearfix
     ✓ has layout
     tips, tricks, & hacks
     

     View Slide

124. ✓ spriting
     ✓ clearfix
     ✓ has layout
     ✓ text replacement
     tips, tricks, & hacks
     

     View Slide

125. ✓ spriting
     ✓ clearfix
     ✓ has layout
     ✓ text replacement
     ✓ and more...
     tips, tricks, & hacks
     

     View Slide

126. ✓ spriting
     ✓ clearfix
     ✓ has layout
     ✓ text replacement
     ✓ and more...
     tips, tricks, & hacks
     

     View Slide

127. Organize your CSS
     

     View Slide

128. Organize your CSS
     ✓ Organize the content
     

     View Slide

129. Organize your CSS
     ✓ Organize the content
     ✓ Use preprocessor features
     

     View Slide

130. Organize your CSS
     ✓ Organize the content
     ✓ Use preprocessor features
     ✓ Organize properties
     

     View Slide

131. Organize your CSS
     ✓ Organize the content
     ✓ Use preprocessor features
     ✓ Organize properties
     ✓ Useful comments
     

     View Slide

132. View Slide

133. JavaScript
     

     View Slide

134. behavior
     

     View Slide

135. Learn JavaScript
     

     View Slide

136. Learn JavaScript
     

     View Slide

137. Common practices
     

     View Slide

138. ✓ hoisting
     Common practices
     

     View Slide

139. ✓ hoisting
     ✓ prototypical inheritance
     Common practices
     

     View Slide

140. ✓ hoisting
     ✓ prototypical inheritance
     ✓ DOM interactions
     Common practices
     

     View Slide

141. ✓ hoisting
     ✓ prototypical inheritance
     ✓ DOM interactions
     ✓ unobtrusive JS
     Common practices
     

     View Slide

142. ✓ hoisting
     ✓ prototypical inheritance
     ✓ DOM interactions
     ✓ unobtrusive JS
     ✓ and more...
     Common practices
     

     View Slide

143. View Slide

144. jQuery isn’t always
     the answer
     other libraries
     roll your own
     

     View Slide

145. JS Validation
     

     View Slide

146. Test your code!
     

     View Slide

147. Debugging
     Tools
     

     View Slide

148. View Slide

149. View Slide

150. View Slide

151. Cross-browser
     

     View Slide

152. Can I use...
     

     View Slide

153. View Slide

154. Cross-browser Testing
     

     View Slide

155. Performance
     

     View Slide

156. Dig in!
     

     View Slide

157. @juliepagano
     http://juliepagano.com
     http://bit.ly/frontend-scrc2013
     Contact me!
     

     View Slide

158. References
     &
     Attribution
     

     View Slide

159. • W3C - http://www.w3.org/
     • HTML5 & CSS3 Readiness - http://html5readiness.com/
     • CSS3 Gradient Generator - http://www.colorzilla.com/gradient-editor/
     • Mozilla Developer Network - https://developer.mozilla.org
     • RailsGuides - http://guides.rubyonrails.org/
     References
     

     View Slide

160. • HTML5 Boilerplate - http://html5boilerplate.com/
     • Dive into HTML5 - http://diveintohtml5.info/
     • HTML5 Rocks - http://www.html5rocks.com/
     • HTML5 Doctor - http://html5doctor.com/
     • HAML - http://haml.info/
     • Semantic class names - http://css-tricks.com/semantic-class-names/
     References: HTML
     

     View Slide

161. • The CSS Box Model - http://css-tricks.com/the-css-box-model/
     • Specifics on CSS Specificity - http://css-tricks.com/specifics-on-css-specificity/
     • Specificity Calculator - http://specificity.keegan.st/
     • Efficiently Rendering CSS - http://css-tricks.com/efficiently-rendering-css/
     • reset.css - http://meyerweb.com/eric/tools/css/reset/
     • normalize.css - http://necolas.github.io/normalize.css/
     • SASS - http://sass-lang.com/
     • Compass - http://compass-style.org/
     • CSS-Tricks - http://css-tricks.com/
     • A List Apart - http://alistapart.com
     • CSS3 - http://www.html5rocks.com/en/features/presentation
     References: CSS
     

     View Slide

162. • JavaScript: the Good Parts - http://www.amazon.com/JavaScript-Good-
     Parts-Douglas-Crockford/dp/0596517742
     • Eloquent JavaScript - http://www.amazon.com/Eloquent-JavaScript-
     Modern-Introduction-Programming/dp/1593272820/ref=sr_1_1?
     s=books&ie=UTF8&qid=1376452524&sr=1-1&keywords=eloquent
     +javascript
     • jQuery - http://jquery.com/
     • JSLint - http://www.jslint.com/
     • JSHint - http://jshint.com/
     • Jasmine - http://pivotal.github.io/jasmine/
     • QUnit - http://qunitjs.com/
     References: JavaScript
     

     View Slide

163. • Chrome Developer Tools - https://developers.google.com/chrome-
     developer-tools/
     • Firebug - http://getfirebug.com/
     • Mozilla Developer Tools - https://developer.mozilla.org/en-US/docs/Tools
     • Can I Use - http://caniuse.com/
     • Modernizr - http://modernizr.com/
     • Web performance best practices - https://developers.google.com/speed/
     docs/best-practices/rules_intro
     • Best practices for speeding up your web site - http://developer.yahoo.com/
     performance/rules.html
     Additional References
     

     View Slide

164. • How to keep up-to-date on front-end technologies - http://
     uptodate.frontendrescue.org/
     • Front-end Code Standards & Best Practices - http://isobar-idev.github.io/
     code-standards/
     • Idiomatic CSS - https://github.com/necolas/idiomatic-css
     Additional Resources
     

     View Slide

165. Attribution
     • Browser designed by Fernando Vasconcelos from The Noun Project - http://
     thenounproject.com/noun/browser/#icon-No3064
     • Laptop designed by Sam Ahmed from The Noun Project - http://
     thenounproject.com/noun/laptop/#icon-No3181
     • Robot designed by Simon Child from The Noun Project - http://thenounproject.com/
     noun/robot/#icon-No1248
     • Box Model Diagram designed by Jon Hicks - http://hicksdesign.co.uk/boxmodel/
     • User by Luis Prado - http://thenounproject.com/noun/user/#icon-No13708
     • The Little Netbook That Roars Like a Lion by Peter Patau - http://www.flickr.com/
     photos/madison_guy/3508096955/
     • Database by Anton Outkine from the Noun Project - http://thenounproject.com/
     noun/database/#icon-No15531
     • Hammer by John Caserta from the Noun Project - http://thenounproject.com/noun/
     hammer/#icon-No1306
     • High-res browser logos from Paul Irish - https://github.com/paulirish/browser-logos
     

     View Slide