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

I am a front-end web dev (and so can you!) - pg...

I am a front-end web dev (and so can you!) - pghtechfest13

pghtechfest2013

Julie Pagano

June 01, 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 pghtechfest13
  2. What is a front-end web developer? A software engineer who

    focuses on the client side of web applications.
  3. ...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 ... ... ...
  4. 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. Organize Sections /*  ==================================================      GLOBAL      ==================================================

     */ ... /*  ==================================================      HEADER      ==================================================  */ ... /*  ==================================================      SIDEBAR      ==================================================  */ ... /*  ==================================================      FOOTER      ==================================================  */ ...
  15. 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;     }
  16. 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;   }
  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 References
  18. • 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
  19. • 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
  20. • 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. • 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
  22. • 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