The ROle Of A Front-End Developer


by Sean Hagstrom

Responsibilities


  • Understanding UI and UX
  • Understanding the Architecture of a Client Side Application
  • Works effectively with Product Team Members, Designers and Back-End Developers






   How To become a better front-end developer?


  • Learn Javascript
  • Learn more advanced CSS
    • Z-Index, Box-Model, and Element Positions
  • Read through open source projects
  • Read a Visual Grammar or Color Theory book
  • Analyze your favorite apps and services

Good Habits


  • In Rails use @imports for Sass files and not the asset pipeline
  • Use @extend and @mixin to clean up and modularize code
    • Use extend to inherit base styles from another class
    • Use a mixin to inject a custom set of styles based on arguments.

Good Habits


  • Use a CSS Pre-processor
    • Sass, SCSS, or Less 
  • CSS Resets or Normalize.css
    • Resets provide a clean slate
    • Normalize provides a default look and feel
  • Style guides
    • Good for multiple developers
    • Helps you create a disciplined style and structure

Good Habits


  • Elements Inspector
    • View, add, or edit the HTML markup and CSS Live
  • Debugger
    • Set breakpoints and step through your code
  • Javascript Console
    • Log diagnostic information
    • Interact with the document and evaluate expressions

Good Habits


  • Network Tab
    • Tracks the load times for each asset on your page
  • Audits
    • Gives optimization hints and points out unused CSS
  • Pagespeed / Yslow
    • Grades the performance of the web page, and leaves tips for improvements

BackWards Compatibility


  • Virtualbox, BrowserStack, Browserling
  • CanIUse.com, html5please.com
  • Use Polyfills
    • Respond.js
      • Fixes Media Queries in IE6 - IE8
    • Selectivzr.js
      • Enables Legacy browsers to use CSS3 selectors


Questions?

References


  • Style Guides
  • Books
  • Courses

Style Guides


Books


Courses



Websites

Blogs

  • http://css-tricks.com
  • http://codegeekz.com
  • http://www.css3.info/
  • http://gun.io/blog
  • http://nettuts.com

Forums

  • https://developer.mozilla.org/en-US/
  • http://www.webplatform.org/

Compatibility Checks

  • http://caniuse.com
  • http://www.quirksmode.org
  • http://html5please.com/

http://railsapps.github.io/rails-html5-boilerplate.html


Honorable Mentions

Frameworks

  • http://www.99lime.com/elements/
  • http://draeton.github.io/stitches/
  • http://usablica.github.io/front-end-frameworks/compare.html
  • http://list.ly/list/303-alternatives-to-twitter-bootstrap-html5-css3-responsive-framework
  • https://github.com/thoughtbot/flutie

Randoms

  • http://roole.org/
  • http://www.limejs.com/
  • http://yepnopejs.com/
  • http://yeoman.io/
  • http://xdk-software.intel.com/
  • http://www.appgyver.com/
  • http://hellohappy.org/css3-buttons/

Front End Ninja Training

By Sean Hagstrom

Front End Ninja Training

  • 135