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

785 views
609 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
785
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×