FRONT-END DEVELOPMENT FOR
BACK-END DEVELOPERS
Bertine Buchan@bertine
Gage Marketing
Amy Berg @pork_chop
Minnesota Public Radio
(AKA Front-End Dev 101)
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
WHAT IS A FRONT-END DEV?
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)
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
• HTML • CSS • JavaScript • Project
Requirements
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
HTML
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Semantic HTML
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]-->
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>
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!
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
For related content layout, try
<ol>, <ul>, or <dl>
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
JUST MAKE IT SEMANTIC.
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
OTHER HTML QUESTIONS?
To learn more, start here: http://html5please.com/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
CSS
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Set base styles for your website with
Normalize.css(or reset.css)
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…
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.
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Common Issues
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
display inline, inline-block, block, none
http://css-tricks.com/almanac/properties/d/display/
Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
* { box-sizing: border-box }
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Positioning static, relative, absolute, fixed
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
http://jsfiddle.net/7x85K/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
http://jsfiddle.net/7x85K/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Clearing Floats
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
http://jsfiddle.net/W5u2Z/
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>!
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
http://jsfiddle.net/Gz67L/
There’s a better way!
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Shortcuts
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;
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Becomes…
padding: 0 0 0 0;
padding: 0;
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;
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
backbone
grid960
bootstrap
roll your own
CSS Frameworks
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
OOCSS
https://github.com/stubbornella/oocss/wiki/faq
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
SASS/LESS
Preprocessor
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
JS
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Shims Polyfills
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
jquery
angular.js
node.js
Frameworks
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
JSON templatesangular.js
mustache.js
handlebars.js
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
MEETINGPROJECT
REQUIREMENTS
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?
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
THANK YOU!
Get our slides online: http://bit.ly/ThatConf_FEDev (We’ll tweet this link, too!)
Bertine Buchan@bertine
Amy Berg @pork_chop
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
We’ve got more time!
Here are some bonus
TIPS
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)
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Sprites
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Image Replacementhttp://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
http://jsfiddle.net/PEL7B/
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Where does the text go?
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Hosted for you:
• Google Fonts
• TypeKit
!
Make your own:
• FontSquirrel
Web Fonts
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Icon Fonts
Bertine Buchan@bertine
Amy Berg @pork_chop@ThatConference #ThatConference #FEDev
Unwanted space between inline-block elements?
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/
THANK YOU AGAIN!Bertine Buchan
@bertineAmy Berg
@pork_chop
Top Related