Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MinneWebCon 2014 - Front-End Development for Back-End Developers

924 views

Published on

Published in: Technology, Design
  • Be the first to comment

MinneWebCon 2014 - Front-End Development for Back-End Developers

  1. 1. Front-End Development for Back-End Devs Bertine Buchan
 @bertine Gage Marketing Amy Berg @pork_chop Minnesota Public Radio (AKA Front-End Dev 101)
  2. 2. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev What is a Front-End Dev?
  3. 3. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev We are Front-End Devs. • Build websites • HTML email support • QA (browser testing) • UI/design review • Knowledge sharing • Estimating work 
 (time & resources)
  4. 4. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev • HTML • CSS • JavaScript • Project Requirements
  5. 5. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev HTML
  6. 6. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Semantic HTML
  7. 7. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev HTML5 Shim https://code.google.com/p/html5shim/ <!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
  8. 8. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Conditional Comments http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ <!--[if lt IE 9]> <html class="ltie9"> <![endif]--> <!--[if IE 9]><!--> <html> <!--<![endif]--> ! <style> html body { background-color: blue; } html.ltie9 body { background-color: green; } </style>
  9. 9. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev When to use <table> Data, HTML emails When not to use <table> Everywhere else!
  10. 10. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev For related content layout, 
 try
 <ol>, <ul>, or <dl>
  11. 11. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Just make it semantic.
  12. 12. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Other HTML questions? To learn more, start here: http://html5please.com/
  13. 13. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev CSS
  14. 14. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Set base styles for your website with Normalize.css
 (or reset.css)
  15. 15. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev OOCSS https://github.com/stubbornella/oocss/wiki/faq
  16. 16. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev display inline, inline-block, block, none http://css-tricks.com/almanac/properties/d/display/
  17. 17. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Box Model Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/
  18. 18. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev * { box-sizing: border-box } http://www.paulirish.com/2012/box-sizing-border-box-ftw/
  19. 19. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Positioning static, relative, absolute, fixed
  20. 20. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/7x85K/
  21. 21. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/7x85K/
  22. 22. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev –Johnny Appleseed CSS Specifity
  23. 23. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev micro clearfix
  24. 24. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/W5u2Z/
  25. 25. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/Gz67L/
  26. 26. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev CSS Frameworks backbone grid960 roll your own
  27. 27. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Preprocessor less/sass
  28. 28. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev JS
  29. 29. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Shims Polyfills CSS3 PIE (IE8 and below)
  30. 30. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Frameworks jquery node.js mootools
  31. 31. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev JSON templates angular.js mustache.js
  32. 32. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Meeting
 Project Requirements
  33. 33. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Are these required: • Does the site need to be pixel perfect with design comp? 
 (consider graceful degradation) • Which browsers are you supporting? • Do you need non-JS fallback? • Responsive?
  34. 34. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Testing
  35. 35. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Tools/workflow • In-browser inspectors and Firebug • Built-in dev toolbars & responsive tools • W3c validator • CSS lint, JSON lint • caniuse.com
  36. 36. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev QUESTIONS?
  37. 37. Thank you! Get our slides online: http://bit.ly/MWC_FEDev (We’ll tweet this link, too!) Bertine Buchan
 @bertine Amy Berg @pork_chop
  38. 38. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev We’ve got more time!
 Here are some bonus TIPS
  39. 39. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev • Mouse/Hover-over states (CSS/JS) • What happens when you click that button? (UI/site flow) • Modals vs. Alerts vs. Inline dynamic messaging Things to Consider (these might not be part of your design comp)
  40. 40. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Sprites
  41. 41. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Image Replacement http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ http://jsfiddle.net/PEL7B/
  42. 42. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Where does the text go?
  43. 43. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Hosted for you: • Google Fonts • TypeKit ! Make your own: • FontSquirrel Web Fonts
  44. 44. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Icon Fonts
  45. 45. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Unwanted space between 
 inline-block elements?
  46. 46. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev The most simple fix. For other solutions: 
 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ http://jsfiddle.net/FgqPb/
  47. 47. Thank you again! Bertine Buchan
 @bertine Amy Berg @pork_chop

×