minnewebcon 2014 - front-end development for back-end developers

Front-End Development for Back-End Devs

Bertine Buchan @bertine

Gage Marketing

Amy Berg @pork_chop

Minnesota Public Radio

(AKA Front-End Dev 101)


Amy Berg @pork_chop@MinneWebCon #FEDev

What is a Front-End Dev?



We are Front-End Devs.• Build websites

• HTML email support

• QA (browser testing)

• UI/design review

• Knowledge sharing

• Estimating work (time & resources)



• HTML

• CSS

• JavaScript

• Project Requirements



HTML



Semantic HTML

HTML5 Shim https://code.google.com/p/html5shim/



https://code.google.com/p/html5shim/

Conditional Comments http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

  <html>  !<style> html body { background-color: blue; } html.ltie9 body { background-color: green; } </style>

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/



When to use <table>

Data, HTML emails

When not to use <table>

Everywhere else!



For related content layout, try

<ol>, <ul>, or <dl>



Just make it semantic.



Other HTML questions?

To learn more, start here: http://html5please.com/

http://html5please.com/



CSS



Set base styles for your website with

Normalize.css(or reset.css)



OOCSS

https://github.com/stubbornella/oocss/wiki/faq

https://github.com/stubbornella/oocss/wiki/faq



display

inline, inline-block, block, none http://css-tricks.com/almanac/properties/d/display/

http://css-tricks.com/almanac/properties/d/display/



Box Model

Photo from Liz Andrade, @lizandrade, http://www.flickr.com/photos/cmdshiftdesign/5910326877/

http://www.flickr.com/photos/cmdshiftdesign/5910326877/



* { box-sizing: border-box }

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

http://www.paulirish.com/2012/box-sizing-border-box-ftw/



Positioning

static, relative, absolute, fixed



http://jsfiddle.net/7x85K/

http://jsfiddle.net/7x85K/



–Johnny Appleseed

CSS Specifity



micro clearfix



http://jsfiddle.net/W5u2Z/

http://jsfiddle.net/W5u2Z/



http://jsfiddle.net/Gz67L/

http://jsfiddle.net/Gz67L/



CSS Frameworks

backbone

grid960

roll your own



Preprocessor

less/sass



JS



Shims

Polyfills

CSS3 PIE (IE8 and below)



Frameworks

jquery

node.js

mootools



JSON templates

angular.js

mustache.js



Meeting Project Requirements



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?



Testing



Tools/workflow

• In-browser inspectors and Firebug

• Built-in dev toolbars & responsive tools

• W3c validator

• CSS lint, JSON lint

• caniuse.com

http://caniuse.com



QUESTIONS?

Thank you!

Get our slides online: http://bit.ly/MWC_FEDev (We’ll tweet this link, too!)


Amy Berg @pork_chop



We’ve got more time!

Here are some bonus

TIPS



• 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)



Sprites



Image Replacement

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ http://jsfiddle.net/PEL7B/

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

http://jsfiddle.net/PEL7B/



Where does the text go?



Hosted for you:

• Google Fonts

• TypeKit

!

Make your own:

• FontSquirrel

Web Fonts



Icon Fonts



Unwanted space between inline-block elements?



The most simple fix.

For other solutions: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://jsfiddle.net/FgqPb/

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

http://jsfiddle.net/FgqPb/

Thank you again!Bertine Buchan

@bertineAmy Berg

@pork_chop

minnewebcon 2014 - front-end development for back-end developers

Technology

bertine amy berg

end devs bertine buchan

fedev http

fedev testing

fedev questions

fedev toolsworkow

fedev mousehover

fedev weve