Front End Ninja Training

This is a talk on how Front End Developers work effectively and efficiently.

Transcript

1. FRONT END NINJA TRAINING by Sean Hagstrom
2. HOW DO FRONT-END DEVELOPERS WORK EFFECTIVELY AND EFFICIENTLY? A Real Front End Ninja: Will utilize powerful Preprocessors / Template engines. Has the discipline to use Frameworks and Libraries. Has a regimen of tools and practices to perform effectively and efficiently.
4. PREPROCESSORS HTML HAML SLIM CSS SASS/SCSS LESS /* And maybe Stylus */ Javascript Coffeescript
6. FRAMEWORKS AND LIBRARIES HTML HTML5 Boilerplate CSS Bootstrap or Foundation Bourbon or Compass Bourbon Neat or Susy Grids Javascript jQuery, Prototype, Etc. Underscore.js
8. TOOLS AND PRACTICES CSS Practices Common add-ons Clever SCSS Chrome Dev Tools or Firebug Debugging Optimizing Looking Back Supporting IE
9. TOOLS AND PRACTICES CSS PRACTICES - COMMON ADD-ONS CSS Resets or Normalize.css Resets provide a clean slate. Normalize provides a default a look and feel. Style guides Good for multiple ninjas. Helps you create a disciplined style structure.
10. TOOLS AND PRACTICES CSS PRACTICES - CLEVER SCSS In Rails use @imports 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.
11. TOOLS AND PRACTICES CHROME DEV TOOLS OR FIREBUG - DEBUGGING Elements Inspector View, add, or edit the HTML markup and CSS Live. Sources Panel / Script Panel Set breakpoints and step through your code. Javascript Console Log diagnostic information. Interact with the document and evaluate expressions.
12. TOOLS AND PRACTICES CHROME DEV TOOLS OR FIREBUG - OPTIMIZING Network Tab Tracks the load times for each asset on your page. Audits Network optimization hints and points out unused CSS. Pagespeed / Yslow Grades the performance of the web page, and leaves tips for improvements.
13. TOOLS AND PRACTICES LOOKING BACK - SUPPORTING IE Virtualbox CanIUse.com Modernizr.js Respond.js Fixes Media Queries in IE6 - IE8 Selectivzr.js Enables Legacy browsers to use CSS3 selectors
14. CONCLUSION
15. REFERENCES Style Guides Books Websites Examples
16. STYLE GUIDES https://github.com/thoughtbot/guides/blob/master/style/sample
17. BOOKS HTML and CSS: Design and Build Websites The Book of CSS3: A Developer's Guide to the Future of Web Design Scalable and Modular Architecture for CSS JavaScript & jQuery: The Missing Manual JavaScript: The Good Parts
18. WEBSITES BLOGS http://css-tricks.com http://codegeekz.com http://www.css3.info/ http://gun.io/blog http://net.tutsplus.com FORUMS https://developer.mozilla.org/en-US/ http://www.webplatform.org/ COMPATIBILITY CHECKS
19. 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
20. EXAMPLES