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
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-
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
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 &
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
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
144. jQuery isn’t always the answer other libraries roll your own
145. JS Validation
146. Test your code!
147. Debugging Tools
151. Cross-browser
152. Can I use...
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