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

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

Version of this talk for Steel City Ruby Conf 2013

B5fb0c3d8076017b0fafad67ba26b518?s=128

Julie Pagano

August 16, 2013
Tweet

Transcript

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

    Julie Pagano 4 @juliepagano 4 SCRC13
  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? A software engineer who

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

  13. live in the browser client side web apps

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

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

  16. HTML

  17. CSS HTML

  18. CSS JavaScript HTML

  19. CSS JavaScript content

  20. presentation JavaScript content

  21. presentation behavior content

  22. Front-end web devs are software engineers

  23. ...that sometimes fill some other roles

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

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

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

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

    Development quality assurance
  28. background & Environment

  29. Specs come from the

  30. There are many browsers

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

  33. Change comes slowly 2004 2008 2011 2012 2014 started work

    1st public working draft last call candidate recommendation stable recommendation
  34. ...and inconsistently -webkit- -moz- -ms- -o-

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

  38. We don’t control the environment

  39. We don’t control the environment

  40. We don’t control the environment

  41. We don’t control the environment

  42. Why do we care about this?

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

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

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

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

    bugs - features ✓ performance
  47. We fight for the users!

  48. Technical Skills

  49. Know your resources

  50. specifications

  51. general reference

  52. Rails reference

  53. Rails reference Views

  54. Rails reference Views Asset Pipeline

  55. Rails reference Views Asset Pipeline JavaScript

  56. Don’t forget software engineering practices

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

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

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

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

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

  62. content

  63. None
  64. None
  65. None
  66. offline storage Connectivity file access Semantics audio/video 3d/graphics presentation performance

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

    nuts & bolts
  68. Semantics

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

  70. Semantics give meaning to structure

  71. Semantics communicate that meaning consistently

  72. <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>
  73. <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>
  74. <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>
  75. humans read our HTML machines &

  76. None
  77. Templating

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

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

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

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

    backend + = Hello Pittsburgh Hello New York Hello London Hello Tokyo ...
  82. Templating in Ruby

  83. Templating in Ruby ERB

  84. Templating in Ruby ERB HAML

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

  86. Classes Styles that apply to multiple elements.

  87. Classes Use meaningful names.

  88. Classes Use meaningful names. What it is.

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

    looks like.
  90. Bad Class Names bigText red leftColumn

  91. Better Class Names important alert sidebar

  92. IDs Styles that apply to one element.

  93. IDs Unique identifiers.

  94. IDs Meaningful names.

  95. CSS

  96. presentation

  97. CSS-Tricks A List Apart CSS Resources

  98. Box Model

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

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

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

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

  103. !important Should be used sparingly.

  104. Efficient CSS

  105. ✓ ID selectors are efficient Efficient CSS

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

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

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

    efficient ✓ Descendent selectors are expensive ✓ and more... Efficient CSS
  109. reset.css normalize.css Cross-Browser Consistency

  110. CSS Preprocessors

  111. CSS Preprocessors ✓ variables

  112. CSS Preprocessors ✓ variables ✓ mixins

  113. CSS Preprocessors ✓ variables ✓ mixins ✓ operations

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

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

  116. CSS Preprocessors

  117. CSS Preprocessors

  118. CSS Preprocessors

  119. CSS Preprocessors Get them for free with the asset pipeline

    in Rails 3.1+
  120. tips, tricks, & hacks

  121. ✓ spriting tips, tricks, & hacks

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

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

    hacks
  124. ✓ spriting ✓ clearfix ✓ has layout ✓ text replacement

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

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

    ✓ and more... tips, tricks, & hacks
  127. Organize your CSS

  128. Organize your CSS ✓ Organize the content

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

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

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

    features ✓ Organize properties ✓ Useful comments
  132. None
  133. JavaScript

  134. behavior

  135. Learn JavaScript

  136. Learn JavaScript

  137. Common practices

  138. ✓ hoisting Common practices

  139. ✓ hoisting ✓ prototypical inheritance Common practices

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

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

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

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

  145. JS Validation

  146. Test your code!

  147. Debugging Tools

  148. None
  149. None
  150. None
  151. Cross-browser

  152. Can I use...

  153. None
  154. Cross-browser Testing

  155. Performance

  156. Dig in!

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

  158. References & Attribution

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