Your SlideShare is downloading. ×
  • Like
MinneWebCon 2014 - Front-End Development for Back-End Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 418 views
Published

 

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
418
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev What is a Front-End Dev?
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev • HTML • CSS • JavaScript • Project Requirements
  • 5. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev HTML
  • 6. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Semantic HTML
  • 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. 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev When to use <table> Data, HTML emails When not to use <table> Everywhere else!
  • 10. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev For related content layout, 
 try
 <ol>, <ul>, or <dl>
  • 11. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Just make it semantic.
  • 12. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Other HTML questions? To learn more, start here: http://html5please.com/
  • 13. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev CSS
  • 14. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Set base styles for your website with Normalize.css
 (or reset.css)
  • 15. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev OOCSS https://github.com/stubbornella/oocss/wiki/faq
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Box Model Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Positioning static, relative, absolute, fixed
  • 20. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/7x85K/
  • 21. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/7x85K/
  • 22. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev –Johnny Appleseed CSS Specifity
  • 23. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev micro clearfix
  • 24. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/W5u2Z/
  • 25. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev http://jsfiddle.net/Gz67L/
  • 26. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev CSS Frameworks backbone grid960 roll your own
  • 27. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Preprocessor less/sass
  • 28. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev JS
  • 29. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Shims Polyfills CSS3 PIE (IE8 and below)
  • 30. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Frameworks jquery node.js mootools
  • 31. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev JSON templates angular.js mustache.js
  • 32. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Meeting
 Project Requirements
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Testing
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev QUESTIONS?
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev We’ve got more time!
 Here are some bonus TIPS
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Sprites
  • 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. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Where does the text go?
  • 43. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Hosted for you: • Google Fonts • TypeKit ! Make your own: • FontSquirrel Web Fonts
  • 44. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Icon Fonts
  • 45. Bertine Buchan
 @bertine Amy Berg @pork_chop@MinneWebCon #FEDev Unwanted space between 
 inline-block elements?
  • 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. Thank you again! Bertine Buchan
 @bertine Amy Berg @pork_chop