Recommandé
Recommandé
Contenu connexe
Dernier
Dernier (20)
En vedette
En vedette (20)
MinneWebCon 2014 - Front-End Development for Back-End Developers
- 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