Post on 27-Jan-2015
description
Front-End Development for Back-End Devs
Bertine Buchan @bertine
Gage Marketing
Amy Berg @pork_chop
Minnesota Public Radio
(AKA Front-End Dev 101)
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
What is a Front-End Dev?
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)
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
• HTML
• CSS
• JavaScript
• Project Requirements
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
HTML
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Semantic HTML
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]-->
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>
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
When to use <table>
Data, HTML emails
When not to use <table>
Everywhere else!
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
For related content layout, try
<ol>, <ul>, or <dl>
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Just make it semantic.
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Other HTML questions?
To learn more, start here: http://html5please.com/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
CSS
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Set base styles for your website with
Normalize.css(or reset.css)
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
OOCSS
https://github.com/stubbornella/oocss/wiki/faq
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
display
inline, inline-block, block, none http://css-tricks.com/almanac/properties/d/display/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Box Model
Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
* { box-sizing: border-box }
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Positioning
static, relative, absolute, fixed
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
http://jsfiddle.net/7x85K/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
http://jsfiddle.net/7x85K/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
–Johnny Appleseed
CSS Specifity
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
micro clearfix
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
http://jsfiddle.net/W5u2Z/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
http://jsfiddle.net/Gz67L/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
CSS Frameworks
backbone
grid960
roll your own
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Preprocessor
less/sass
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
JS
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Shims
Polyfills
CSS3 PIE (IE8 and below)
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Frameworks
jquery
node.js
mootools
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
JSON templates
angular.js
mustache.js
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Meeting Project Requirements
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?
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Testing
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
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
QUESTIONS?
Thank you!
Get our slides online: http://bit.ly/MWC_FEDev (We’ll tweet this link, too!)
Bertine Buchan @bertine
Amy Berg @pork_chop
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
We’ve got more time!
Here are some bonus
TIPS
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)
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Sprites
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/
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Where does the text go?
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Hosted for you:
• Google Fonts
• TypeKit
!
Make your own:
• FontSquirrel
Web Fonts
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Icon Fonts
Bertine Buchan @bertine
Amy Berg @pork_chop@MinneWebCon #FEDev
Unwanted space between inline-block elements?
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/
Thank you again!Bertine Buchan
@bertineAmy Berg
@pork_chop