I am a front-end web dev (and so can you!) - pghtechfest13

pghtechfest2013

Transcript

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

   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?
    

    View Slide

12. What is a front-end
    web developer?
    

    View Slide

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

    View Slide

14. client side
    web apps
    

    View Slide

15. live in the browser
    client side
    web apps
    

    View Slide

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

    View Slide

17. HTML
    

    View Slide

18. CSS
    HTML
    

    View Slide

19. CSS
    JavaScript
    HTML
    

    View Slide

20. CSS
    JavaScript
    content
    

    View Slide

21. presentation
    JavaScript
    content
    

    View Slide

22. presentation
    behavior
    content
    

    View Slide

23. Front-end web devs
    are software engineers
    

    View Slide

24. ...that sometimes fill
    some other roles
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. background
    &
    Environment
    

    View Slide

30. Specs come from the
    

    View Slide

31. There are many browsers
    

    View Slide

32. ...with many versions
    29.0 23.0 12.1 6.0 11.0
    28.0 22.0 12.0 5.1 10.0
    27.0 21.0 11.6 5.0 9.0
    26.0 20.0 11.5 4.0 8.0
    25.0 19.0 11.1 3.2 7.0
    24.0 18.0 11.0 3.1 6.0
    23.0 17.0 10.6 5.5
    22.0 16.0 10.5
    21.0 15.0 10.0-10.1
    20.0 14.0 9.5-9.6
    ... ... ...
    

    View Slide

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

    View Slide

34. Change comes slowly
    

    View Slide

35. 2004
    2008
    2011
    2012
    2014
    started work
    1st public working draft
    last call
    candidate recommendation
    stable recommendation
    

    View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. ...and sometimes
    it’s awkward
    -webkit-
    -moz-
    -ms-
    -o-
    

    View Slide

42. View Slide

43. /*  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

44. and some things
    stay the same
    

    View Slide

45. and some things
    stay the same
    

    View Slide

46. We don’t control
    the environment
    

    View Slide

47. We don’t control
    the environment
    

    View Slide

48. We don’t control
    the environment
    

    View Slide

49. We don’t control
    the environment
    

    View Slide

50. We don’t control
    the environment
    

    View Slide

51. Why do we
    care about this?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. And because we care
    

    View Slide

57. We fight for the users!
    

    View Slide

58. Technical
    Skills
    

    View Slide

59. Know your resources
    

    View Slide

60. specifications
    

    View Slide

61. reference
    

    View Slide

62. Don’t forget software
    engineering practices
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. HTML
    

    View Slide

68. content
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

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

    View Slide

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

    View Slide

74. Semantics
    

    View Slide

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

    View Slide

76. Semantics
    give meaning to structure
    

    View Slide

77. Semantics
    communicate that
    meaning consistently
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

81. humans
    read our HTML
    machines
    &
    

    View Slide

82. View Slide

83. Templating
    

    View Slide

84. Templating
    
       Hello
       <%=  location  %>
    
    template
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

88. Classes
    Styles that apply to
    multiple elements.
    

    View Slide

89. Classes
    Use meaningful names.
    

    View Slide

90. Classes
    Use meaningful names.
    What it is.
    

    View Slide

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

    View Slide

92. Bad Class Names
    bigText
    red
    leftColumn
    style7
    

    View Slide

93. Good Class Names
    important
    alert
    sidebar
    copyright
    

    View Slide

94. IDs
    Styles that apply to
    one element.
    

    View Slide

95. IDs
    Unique identifiers.
    

    View Slide

96. IDs
    Meaningful names.
    

    View Slide

97. CSS
    

    View Slide

98. presentation
    

    View Slide

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

    View Slide

100. Box Model
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

104. !important
     Overrides specificity.
     

     View Slide

105. !important
     Should be used sparingly.
     

     View Slide

106. Efficient CSS
     

     View Slide

107. tips, tricks, & hacks
     

     View Slide

108. ✓ spriting
     tips, tricks, & hacks
     

     View Slide

109. ✓ spriting
     ✓ Clearfix
     tips, tricks, & hacks
     

     View Slide

110. ✓ spriting
     ✓ Clearfix
     ✓ has layout
     tips, tricks, & hacks
     

     View Slide

111. ✓ spriting
     ✓ Clearfix
     ✓ has layout
     ✓ Text replacement
     tips, tricks, & hacks
     

     View Slide

112. ✓ spriting
     ✓ Clearfix
     ✓ has layout
     ✓ Text replacement
     ✓ and more...
     tips, tricks, & hacks
     

     View Slide

113. CSS-Tricks
     A List Apart
     CSS Resources
     

     View Slide

114. Organize your CSS
     

     View Slide

115. Organize Sections
     /*  ==================================================
          GLOBAL
          ==================================================  */
     ...
     /*  ==================================================
          HEADER
          ==================================================  */
     ...
     /*  ==================================================
          SIDEBAR
          ==================================================  */
     ...
     /*  ==================================================
          FOOTER
          ==================================================  */
     ...
     

     View Slide

116. Organize Properties
     .selector  {  
            background:  #000;  
            padding:  10px;  
            display:  block;  
            position:  absolute;  
            top:  0;  
            right:  0;  
            width:  200px;  
            height:  100px;  
            margin:  20px;  
            color:  #fff;  
            font-­‐size:  16px;  
            font-­‐family:  sans-­‐serif;
            border:  2px  solid  #333;    
     }
     

     View Slide

117. Organize Properties
     .selector  {  
            background:  #000;  
            border:  2px  solid  #333;  
            color:  #fff;  
            display:  block;  
            font-­‐family:  sans-­‐serif;  
            font-­‐size:  16px;  
            height:  100px;  
            margin:  20px;  
            padding:  10px;  
            position:  absolute;  
            right:  0;  
            top:  0;  
            width:  200px;  
     }
     

     View Slide

118. /* Useful Comments */
     

     View Slide

119. View Slide

120. CSS Preprocessors
     

     View Slide

121. JavaScript
     

     View Slide

122. behavior
     

     View Slide

123. Learn JavaScript
     

     View Slide

124. Learn JavaScript
     

     View Slide

125. Common practices
     

     View Slide

126. ✓ hoisting
     Common practices
     

     View Slide

127. ✓ hoisting
     ✓ prototypical inheritance
     Common practices
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

131. View Slide

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

     View Slide

133. JS Validation
     

     View Slide

134. Test your code!
     

     View Slide

135. Debugging
     Tools
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

139. Cross-browser
     

     View Slide

140. Can I use...
     

     View Slide

141. View Slide

142. Cross-browser Testing
     

     View Slide

143. View Slide

144. Performance
     

     View Slide

145. View Slide

146. View Slide

147. jsPerf
     

     View Slide

148. View Slide

149. Dig in!
     

     View Slide

150. http://uptodate.frontendrescue.org/
     

     View Slide

151. Questions?
     

     View Slide

152. @juliepagano
     http://juliepagano.com
     Contact me!
     

     View Slide

153. References
     &
     Attribution
     

     View Slide

154. • 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
     References
     

     View Slide

155. • HTML5 Boilerplate - http://html5boilerplate.com/
     • HTML5 Rocks - http://www.html5rocks.com/
     • HTML5 Doctor - http://html5doctor.com/
     • Semantic class names - http://css-tricks.com/semantic-class-names/
     References: HTML
     

     View Slide

156. • reset.css - http://meyerweb.com/eric/tools/css/reset/
     • normalize.css - http://necolas.github.io/normalize.css/
     • The CSS Box Model - http://css-tricks.com/the-css-box-model/
     • Specifics on CSS Specificity - http://css-tricks.com/specifics-on-css-
     specificity/
     • Efficiently Rendering CSS - http://css-tricks.com/efficiently-rendering-css/
     • CSS-Tricks - http://css-tricks.com/
     • A List Apart - http://alistapart.com
     • SASS - http://sass-lang.com/
     • LESS - http://lesscss.org/
     References: CSS
     

     View Slide

157. • 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

158. • Can I Use - http://caniuse.com/
     • VirtualBox - https://www.virtualbox.org/
     • IE Virtualization Tools - http://www.modern.ie/en-us/virtualization-tools
     • 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
     References
     

     View Slide

159. • 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

160. 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