Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

pghtechfest2013

Julie Pagano

June 01, 2013
Tweet

More Decks by Julie Pagano

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Julie Pagano
    @juliepagano

    View full-size slide

  3. I AM A FRONT-END
    WEB DEVELOPER

    View full-size slide

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

    View full-size slide

  5. Goals
    Introduction

    View full-size slide

  6. Goals
    Introduction
    Background & Environment

    View full-size slide

  7. Goals
    Introduction
    Background & Environment
    Technical Skills

    View full-size slide

  8. Goals
    Introduction
    Background & Environment
    Technical Skills
    References

    View full-size slide

  9. What is a front-end
    web developer?

    View full-size slide

  10. What is a front-end
    web developer?

    View full-size slide

  11. What is a front-end
    web developer?

    View full-size slide

  12. What is a front-end
    web developer?

    View full-size slide

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

    View full-size slide

  14. client side
    web apps

    View full-size slide

  15. live in the browser
    client side
    web apps

    View full-size slide

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

    View full-size slide

  17. CSS
    JavaScript
    HTML

    View full-size slide

  18. CSS
    JavaScript
    content

    View full-size slide

  19. presentation
    JavaScript
    content

    View full-size slide

  20. presentation
    behavior
    content

    View full-size slide

  21. Front-end web devs
    are software engineers

    View full-size slide

  22. ...that sometimes fill
    some other roles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. background
    &
    Environment

    View full-size slide

  28. Specs come from the

    View full-size slide

  29. There are many browsers

    View full-size slide

  30. ...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 full-size slide

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

    View full-size slide

  32. Change comes slowly

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. /*  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 full-size slide

  36. and some things
    stay the same

    View full-size slide

  37. and some things
    stay the same

    View full-size slide

  38. We don’t control
    the environment

    View full-size slide

  39. We don’t control
    the environment

    View full-size slide

  40. We don’t control
    the environment

    View full-size slide

  41. We don’t control
    the environment

    View full-size slide

  42. We don’t control
    the environment

    View full-size slide

  43. Why do we
    care about this?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. And because we care

    View full-size slide

  49. We fight for the users!

    View full-size slide

  50. Technical
    Skills

    View full-size slide

  51. Know your resources

    View full-size slide

  52. specifications

    View full-size slide

  53. Don’t forget software
    engineering practices

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Semantics
    give meaning to structure

    View full-size slide

  62. Semantics
    communicate that
    meaning consistently

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  66. humans
    read our HTML
    machines
    &

    View full-size slide

  67. Templating

       Hello
       <%=  location  %>

    template

    View full-size slide

  68. Templating

       Hello
       <%=  location  %>

    template backend
    +

    View full-size slide

  69. Templating

       Hello
       <%=  location  %>

    template backend
    + =
    Hello
    Pittsburgh

    View full-size slide

  70. Templating

       Hello
       <%=  location  %>

    template backend
    + =
    Hello
    Pittsburgh
    Hello
    New York
    Hello
    London
    Hello
    Tokyo
    ...

    View full-size slide

  71. Classes
    Styles that apply to
    multiple elements.

    View full-size slide

  72. Classes
    Use meaningful names.

    View full-size slide

  73. Classes
    Use meaningful names.
    What it is.

    View full-size slide

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

    View full-size slide

  75. Bad Class Names
    bigText
    red
    leftColumn
    style7

    View full-size slide

  76. Good Class Names
    important
    alert
    sidebar
    copyright

    View full-size slide

  77. IDs
    Styles that apply to
    one element.

    View full-size slide

  78. IDs
    Unique identifiers.

    View full-size slide

  79. IDs
    Meaningful names.

    View full-size slide

  80. presentation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  85. !important
    Overrides specificity.

    View full-size slide

  86. !important
    Should be used sparingly.

    View full-size slide

  87. Efficient CSS

    View full-size slide

  88. tips, tricks, & hacks

    View full-size slide

  89. ✓ spriting
    tips, tricks, & hacks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  94. CSS-Tricks
    A List Apart
    CSS Resources

    View full-size slide

  95. Organize your CSS

    View full-size slide

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

    View full-size slide

  97. 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 full-size slide

  98. 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 full-size slide

  99. /* Useful Comments */

    View full-size slide

  100. CSS Preprocessors

    View full-size slide

  101. Learn JavaScript

    View full-size slide

  102. Learn JavaScript

    View full-size slide

  103. Common practices

    View full-size slide

  104. ✓ hoisting
    Common practices

    View full-size slide

  105. ✓ hoisting
    ✓ prototypical inheritance
    Common practices

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  110. JS Validation

    View full-size slide

  111. Test your code!

    View full-size slide

  112. Debugging
    Tools

    View full-size slide

  113. Cross-browser

    View full-size slide

  114. Can I use...

    View full-size slide

  115. Cross-browser Testing

    View full-size slide

  116. http://uptodate.frontendrescue.org/

    View full-size slide

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

    View full-size slide

  118. References
    &
    Attribution

    View full-size slide

  119. • 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 full-size slide

  120. • 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 full-size slide

  121. • 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 full-size slide

  122. • 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 full-size slide

  123. • 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 full-size slide

  124. • Front-end Code Standards & Best Practices - http://isobar-idev.github.io/
    code-standards/
    • Idiomatic CSS - https://github.com/necolas/idiomatic-css
    Additional Resources

    View full-size slide

  125. 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 full-size slide