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

Semantic HTML

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

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

! <html> !!

When to use <table> Tabular Data, HTML emails

When not to use <table> Everywhere else!

For related content layout, try

JUST MAKE IT SEMANTIC.

OTHER HTML QUESTIONS?

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

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/

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

* { box-sizing: border-box }

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

Positioning static, relative, absolute, fixed

http://jsfiddle.net/7x85K/

Clearing Floats

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!

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

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

SASS/LESS

Preprocessor

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

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

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

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/

THANK YOU AGAIN!Bertine Buchan

@bertineAmy Berg

@pork_chop

Front-End Dev for Back-End Developers, That Conference 2014

Technology

Transcript of Front-End Dev for Back-End Developers, That Conference 2014

Web performance for LAMP developers (front end)

Front-end Web Dev (HK) Info Session

Working with UX, Design and Front End Developers

Ahmedabad Urban Development Authgority List of …. List of Developpers.pdf · DEV/036 M.B.Developers/Mistry Rajnikant ... DEV/084 Vishu Developers / Patel Bipinbhai ...

Sass-Front-End Developers Taiwan Party - 5

Remotino: Supporting End-User Developers in Prototyping ...ceur-ws.org/Vol-1602/paper2.pdf · Remotino: Supporting End-User Developers in Prototyping Embedded Devices Abstract In

Brodlist: Back-end as a service, Walk through for Front-end developers

Iot and the back-end developers

Dickstein Shapiro LLP PAX Dev 2014 Presentation: Insurance for Game Developers and Publishers

Amazon Lumberyard: end-to-end solutions for game developers

The Perfect IDE (front-end developers)

TMS TAdvOfficePager DEVELOPERS GUIDE TAdvOfficePager Dev… · DEVELOPERS GUIDE 4 Main features • Metro / Office 2013 / Office 2010 / Office 2007 / Office 2003 color styles •

Security in Agile Development · 2020. 1. 17. · Security in Agile Development Joakim. Who am I? ... ~100 dev teams ~900+ developers. Governance model ~300 Dev teams 2000+ Developers

DEV OPS - blogs. · PDF filebusiness dev ops users shared ‘pain’ developers on call embed project ... business dev ops users industry community kpi - how many things did you share?

node.js for front-end developers

Sms Developers Gui Dev 1

Front-end developers - build Magnolia sites faster

Finding and Hiring Front-End Developers in 2017

Front End Developers: Pyjamas

I Love APIs 2015: End to End Testing: Bug Squashing for Developers