front-end dev for back-end developers, that conference 2014

FRONT-END DEVELOPMENT FOR

BACK-END DEVELOPERS

Bertine Buchan@bertine

Gage Marketing

Amy Berg @pork_chop

Minnesota Public Radio

(AKA Front-End Dev 101)


Amy Berg @pork_chop@ThatConference #ThatConference #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> Tabular 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)



.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…



.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.



Common Issues



display inline, inline-block, block, none

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

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

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/



Clearing Floats



http://jsfiddle.net/W5u2Z/

http://jsfiddle.net/W5u2Z/



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>!



http://jsfiddle.net/Gz67L/

There’s a better way!

http://jsfiddle.net/Gz67L/



Shortcuts



Becomes…

padding-top: 25px; !padding-right: 0;!padding-bottom: 0;!padding-left: 0;

padding: 25px 0 0 0;



Becomes…

padding: 0 0 0 0;

padding: 0;



Becomes…

border-bottom-width: 1px;!border-bottom-style: solid;!border-bottom-color: #333333;

border-bottom: 0 solid #333333;



backbone

grid960

bootstrap

roll your own

CSS Frameworks



OOCSS

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

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



SASS/LESS

Preprocessor



JS



Shims Polyfills



jquery

angular.js

node.js

Frameworks



JSON templatesangular.js

mustache.js

handlebars.js



MEETINGPROJECT

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?



• 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

http://caniuse.com

THANK YOU!

Get our slides online: http://bit.ly/ThatConf_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 Replacementhttp://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

front-end dev for back-end developers, that conference 2014

Technology