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

B5fb0c3d8076017b0fafad67ba26b518?s=128

Julie Pagano

June 01, 2013
Tweet

Transcript

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

    Julie Pagano 4 @juliepagano 4 pghtechfest13
  2. Julie Pagano @juliepagano

  3. I AM A FRONT-END WEB DEVELOPER

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

  5. Goals Introduction

  6. Goals Introduction Background & Environment

  7. Goals Introduction Background & Environment Technical Skills

  8. Goals Introduction Background & Environment Technical Skills References

  9. What is a front-end web developer?

  10. What is a front-end web developer?

  11. What is a front-end web developer?

  12. What is a front-end web developer?

  13. What is a front-end web developer? A software engineer who

    focuses on the client side of web applications.
  14. client side web apps

  15. live in the browser client side web apps

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

  17. HTML

  18. CSS HTML

  19. CSS JavaScript HTML

  20. CSS JavaScript content

  21. presentation JavaScript content

  22. presentation behavior content

  23. Front-end web devs are software engineers

  24. ...that sometimes fill some other roles

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

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

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

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

    Development quality assurance
  29. background & Environment

  30. Specs come from the

  31. There are many browsers

  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 ... ... ...
  33. ...and they sort of follow the specs

  34. Change comes slowly

  35. 2004 2008 2011 2012 2014 started work 1st public working

    draft last call candidate recommendation stable recommendation
  36. None
  37. None
  38. None
  39. None
  40. None
  41. ...and sometimes it’s awkward -webkit- -moz- -ms- -o-

  42. None
  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);
  44. and some things stay the same

  45. and some things stay the same

  46. We don’t control the environment

  47. We don’t control the environment

  48. We don’t control the environment

  49. We don’t control the environment

  50. We don’t control the environment

  51. Why do we care about this?

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

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

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

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

    bugs - features ✓ performance
  56. And because we care

  57. We fight for the users!

  58. Technical Skills

  59. Know your resources

  60. specifications

  61. reference

  62. Don’t forget software engineering practices

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

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

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

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

    keep it simple ✓ refactor early and often ✓ test your code
  67. HTML

  68. content

  69. None
  70. None
  71. None
  72. offline storage Connectivity file access Semantics audio/video 3d/graphics presentation performance

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

    nuts & bolts
  74. Semantics

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

  76. Semantics give meaning to structure

  77. Semantics communicate that meaning consistently

  78. <body>      <div>        <h1>Page  Title</h1>  

           <div>              <ul>                  <li><a  href="home">home</a></li>                  <li><a  href="about">about</a></li>                  <li><a  href="blog">blog</a></li>              </ul>          </div>      </div>      <div>          main  page  content  here      </div>      <div>          footer  information  here      </div>   </body>
  79. <body>      <div  id="header">        <h1>Page  Title</h1>

             <div  id="nav">              <ul>                  <li><a  href="home">home</a></li>                  <li><a  href="about">about</a></li>                  <li><a  href="blog">blog</a></li>              </ul>          </div>      </div>      <div  id="main">          main  page  content  here      </div>      <div  id="footer">          footer  information  here      </div>   </body>
  80. <body>      <header>          <h1>Page  Title</h1>

           <nav>              <ul>                  <li><a  href="home">home</a></li>                  <li><a  href="about">about</a></li>                  <li><a  href="blog">blog</a></li>              </ul>          </nav>      </header>      <section>          main  page  content  here      </section>      <footer>          footer  information  here      </footer>   </body>
  81. humans read our HTML machines &

  82. None
  83. Templating

  84. Templating <body>    Hello    <%=  location  %> </body> template

  85. Templating <body>    Hello    <%=  location  %> </body> template

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

    backend + = Hello Pittsburgh
  87. Templating <body>    Hello    <%=  location  %> </body> template

    backend + = Hello Pittsburgh Hello New York Hello London Hello Tokyo ...
  88. Classes Styles that apply to multiple elements.

  89. Classes Use meaningful names.

  90. Classes Use meaningful names. What it is.

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

    looks like.
  92. Bad Class Names bigText red leftColumn style7

  93. Good Class Names important alert sidebar copyright

  94. IDs Styles that apply to one element.

  95. IDs Unique identifiers.

  96. IDs Meaningful names.

  97. CSS

  98. presentation

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

  100. Box Model

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

    specificity wins.
  102. <div  id="red"  class="blue">      What  color  will  I  be?

      </div>   #red  {      color:  red;   }     .blue  {      color:  blue;   }  
  103. <div  id="red"  class="blue">      What  color  will  I  be?

      </div>   #red  {      color:  red;   }     .blue  {      color:  blue;   }  
  104. !important Overrides specificity.

  105. !important Should be used sparingly.

  106. Efficient CSS

  107. tips, tricks, & hacks

  108. ✓ spriting tips, tricks, & hacks

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

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

    hacks
  111. ✓ spriting ✓ Clearfix ✓ has layout ✓ Text replacement

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

    ✓ and more... tips, tricks, & hacks
  113. CSS-Tricks A List Apart CSS Resources

  114. Organize your CSS

  115. Organize Sections /*  ==================================================      GLOBAL      ==================================================

     */ ... /*  ==================================================      HEADER      ==================================================  */ ... /*  ==================================================      SIDEBAR      ==================================================  */ ... /*  ==================================================      FOOTER      ==================================================  */ ...
  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;     }
  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;   }
  118. /* Useful Comments */

  119. None
  120. CSS Preprocessors

  121. JavaScript

  122. behavior

  123. Learn JavaScript

  124. Learn JavaScript

  125. Common practices

  126. ✓ hoisting Common practices

  127. ✓ hoisting ✓ prototypical inheritance Common practices

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

  129. ✓ hoisting ✓ prototypical inheritance ✓ DOM interactions ✓ unobtrusive

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

    JS ✓ and more... Common practices
  131. None
  132. jQuery isn’t always the answer other libraries roll your own

  133. JS Validation

  134. Test your code!

  135. Debugging Tools

  136. None
  137. None
  138. None
  139. Cross-browser

  140. Can I use...

  141. None
  142. Cross-browser Testing

  143. None
  144. Performance

  145. None
  146. None
  147. jsPerf

  148. None
  149. Dig in!

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

  151. Questions?

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

  153. References & Attribution

  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
  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
  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
  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
  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
  159. • Front-end Code Standards & Best Practices - http://isobar-idev.github.io/ code-standards/

    • Idiomatic CSS - https://github.com/necolas/idiomatic-css Additional Resources
  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