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
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
41. ...and sometimes it’s awkward -webkit- -moz- -ms- -o-
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
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 &
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 */
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
132. jQuery isn’t always the answer other libraries roll your own
133. JS Validation
134. Test your code!
135. Debugging Tools
139. Cross-browser
140. Can I use...
142. Cross-browser Testing
144. Performance
147. jsPerf
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