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

I Am a Front-End Web Dev (and so can you!) - SC...

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

Version of this talk for Steel City Ruby Conf 2013

Julie Pagano

August 16, 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 SCRC13
  2. What is a front-end web developer? A software engineer who

    focuses on the client side of web applications.
  3. ...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 ... ... ...
  4. Change comes slowly 2004 2008 2011 2012 2014 started work

    1st public working draft last call candidate recommendation stable recommendation
  5. /*  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);
  6. Don’t forget software engineering practices ✓ don’t repeat yourself ✓

    keep it simple ✓ refactor early and often ✓ test your code
  7. <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>
  8. <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>
  9. <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>
  10. Templating <body>    Hello    <%=  location  %> </body> template

    backend + = Hello Pittsburgh Hello New York Hello London Hello Tokyo ...
  11. CSS

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

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

      </div>   #red  {      color:  red;   }     .blue  {      color:  blue;   }  
  14. ✓ ID selectors are efficient ✓ Universal selectors are not

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

    efficient ✓ Descendent selectors are expensive ✓ and more... Efficient CSS
  16. Organize your CSS ✓ Organize the content ✓ Use preprocessor

    features ✓ Organize properties ✓ Useful comments
  17. • 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
  18. • 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
  19. • 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
  20. • 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
  21. • 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
  22. • 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
  23. 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