Front-End Dev for Back-End Developers, That Conference 2014
1 like1,002 views
This document outlines a presentation given by Bertine Buchan and Amy Berg on front-end development for back-end developers. The presentation defines what a front-end developer does, including building websites, HTML email support, QA testing, design review, and estimating work. It then covers HTML, CSS, JavaScript, and meeting project requirements. For each area, it provides examples and best practices for semantic HTML, CSS styling, JavaScript frameworks, tools, and more.
![Bertine Buchan
@bertine
Amy Berg
@pork_chop@ThatConference #ThatConference #FEDev
HTML5 Shim
https://code.google.com/p/html5shim/
<!--[if lt IE 9]>!
<script src="html5shiv.js"></script>!
<![endif]-->](https://image.slidesharecdn.com/blc9lkqbso2ivurybzb7-signature-10adcfb33bb772953c70273d232ea836c08f52d042576c8b56f0d059c8128acd-poli-140813093447-phpapp02/85/Front-End-Dev-for-Back-End-Developers-That-Conference-2014-9-320.jpg)
![Bertine Buchan
@bertine
Amy Berg
@pork_chop@ThatConference #ThatConference #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>](https://image.slidesharecdn.com/blc9lkqbso2ivurybzb7-signature-10adcfb33bb772953c70273d232ea836c08f52d042576c8b56f0d059c8128acd-poli-140813093447-phpapp02/85/Front-End-Dev-for-Back-End-Developers-That-Conference-2014-10-320.jpg)
Front-End Dev for Back-End Developers, That Conference 2014
- 3. FRONT-END DEVELOPMENT FOR BACK-END DEVELOPERS Bertine Buchan @bertine Gage Marketing Amy Berg @pork_chop Minnesota Public Radio (AKA Front-End Dev 101)
- 4. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev WHAT IS A FRONT-END DEV?
- 5. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev WE ARE FRONT-END DEVS. • Build websites • HTML email support • QA (browser testing) • UI/design review • Knowledge sharing • Estimating work (time & resources)
- 6. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev • HTML • CSS • JavaScript • Project Requirements
- 7. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev HTML
- 8. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Semantic HTML
- 9. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev HTML5 Shim https://code.google.com/p/html5shim/ <!--[if lt IE 9]>! <script src="html5shiv.js"></script>! <![endif]-->
- 10. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #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>
- 12. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev When to use <table> Tabular Data, HTML emails When not to use <table> Everywhere else!
- 13. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev For related content layout, try <ol>, <ul>, or <dl>
- 14. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev JUST MAKE IT SEMANTIC.
- 15. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev OTHER HTML QUESTIONS? To learn more, start here: http://html5please.com/
- 16. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev CSS
- 17. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Set base styles for your website with Normalize.css (or reset.css)
- 18. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev .rating p {! text-align: center;! padding: 0 20px 10px 20px;! font-size: 13px;! font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;! margin-bottom: 0;! line-height: 20px;! }! ! .rating p.number {! text-align: center;! padding: 10px 20px 0 20px;! font-size: 18px;! font-weight: bold;! font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;! margin-bottom: 0;! line-height: 20px;! } Remember the ‘C’ in CSS…
- 19. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev .rating p {! text-align: center;! padding: 0 20px 10px 20px;! font-size: 13px;! font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;! margin-bottom: 0;! line-height: 20px;! }! ! .rating p.number {! text-align: center;! padding: 10px 20px 0 20px;! font-size: 18px;! font-weight: bold;! font-family: "Gill Sans","Gill Sans MT",Calibri,sans-serif;! margin-bottom: 0;! line-height: 20px;! } Cascading Stylesheets.
- 20. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Common Issues
- 21. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev display inline, inline-block, block, none http://css-tricks.com/almanac/properties/d/display/
- 22. Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/
- 23. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev * { box-sizing: border-box } http://www.paulirish.com/2012/box-sizing-border-box-ftw/
- 24. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Positioning static, relative, absolute, fixed
- 25. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev http://jsfiddle.net/7x85K/
- 26. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev http://jsfiddle.net/7x85K/
- 28. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Clearing Floats
- 29. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev http://jsfiddle.net/W5u2Z/
- 30. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Maybe you’re used to… ! <div class="floatedbox left" style="background: #7091b6;"><p>This is Box #1, floated left. It is taller than Box #3.</p></div>! ! <div class="floatedbox right" style="background: #9cb2cc;"><p>This is Box #2, floated right.</p></div>! ! <div style=“clear: both”></div> ! ! <div style="background: #c6d2e0;"><p>This is Box #3. It is not floated, so it collapses into the two previous floated boxes.</p></div>!
- 31. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev http://jsfiddle.net/Gz67L/ There’s a better way!
- 32. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Shortcuts
- 33. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Becomes… padding-top: 25px; ! padding-right: 0;! padding-bottom: 0;! padding-left: 0; padding: 25px 0 0 0;
- 34. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Becomes… padding: 0 0 0 0; padding: 0;
- 35. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Becomes… border-bottom-width: 1px;! border-bottom-style: solid;! border-bottom-color: #333333; border-bottom: 0 solid #333333;
- 36. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev backbone grid960 bootstrap roll your own CSS Frameworks
- 37. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev OOCSS https://github.com/stubbornella/oocss/wiki/faq
- 38. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev SASS/LESS Preprocessor
- 39. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
- 40. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
- 41. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev JS
- 42. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Shims Polyfills
- 43. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev jquery angular.js node.js Frameworks
- 44. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev JSON templates angular.js mustache.js handlebars.js
- 45. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev MEETING PROJECT REQUIREMENTS
- 46. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #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?
- 48. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev • In-browser inspectors and Firebug • Built-in dev toolbars & responsive tools • W3c validator • CSS lint, JSON lint • Visual Studio Web Essentials extension • caniuse.com Tools/workflow
- 51. THANK YOU! Get our slides online: http://bit.ly/ThatConf_FEDev (We’ll tweet this link, too!) Bertine Buchan @bertine Amy Berg @pork_chop
- 52. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev We’ve got more time! Here are some bonus TIPS
- 53. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #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)
- 54. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Sprites
- 55. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Image Replacement http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ http://jsfiddle.net/PEL7B/
- 56. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Where does the text go?
- 57. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Hosted for you: • Google Fonts • TypeKit ! Make your own: • FontSquirrel Web Fonts
- 58. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Icon Fonts
- 59. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev Unwanted space between inline-block elements?
- 60. Bertine Buchan @bertine Amy Berg @pork_chop@ThatConference #ThatConference #FEDev The most simple fix. For other solutions: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ http://jsfiddle.net/FgqPb/
- 61. THANK YOU AGAIN! Bertine Buchan @bertine Amy Berg @pork_chop