I am a front-end web dev (and so can you!) - pghtechfest13

I AM A FRONT-END WEB DEVELOPER (AND SO CAN YOU!)
Julie Pagano 4 @juliepagano 4 pghtechfest13

Julie Pagano @juliepagano

I AM A FRONT-END WEB DEVELOPER

I AM A FRONT-END WEB DEVELOPER (AND SO CAN YOU!)

Goals Introduction

Goals Introduction Background & Environment

Goals Introduction Background & Environment Technical Skills

Goals Introduction Background & Environment Technical Skills References

What is a front-end web developer?

What is a front-end web developer? A software engineer who
focuses on the client side of web applications.

client side web apps

live in the browser client side web apps

on the user’s machine client side web apps

CSS HTML

CSS JavaScript HTML

CSS JavaScript content

presentation JavaScript content

presentation behavior content

Front-end web devs are software engineers

...that sometimes ﬁll some other roles

...that sometimes ﬁll some other roles design

...that sometimes ﬁll some other roles design user experience

...that sometimes ﬁll some other roles design user experience quality
assurance

...that sometimes ﬁll some other roles design user experience backend
Development quality assurance

background & Environment

Specs come from the

There are many browsers

...with many versions 29.0 23.0 12.1 6.0 11.0 28.0 22.0
12.0 5.1 10.0 27.0 21.0 11.6 5.0 9.0 26.0 20.0 11.5 4.0 8.0 25.0 19.0 11.1 3.2 7.0 24.0 18.0 11.0 3.1 6.0 23.0 17.0 10.6 5.5 22.0 16.0 10.5 21.0 15.0 10.0-10.1 20.0 14.0 9.5-9.6 ... ... ...

...and they sort of follow the specs

Change comes slowly

2004 2008 2011 2012 2014 started work 1st public working
draft last call candidate recommendation stable recommendation

...and sometimes it’s awkward -webkit- -moz- -ms- -o-

/* Old browsers */ background: #000; /* Vendor Prefixes */
background: -‐webkit-‐gradient(linear, left top, left bottom, color-‐stop(0%,#000), color-‐stop(100%,#fff)); background: -‐webkit-‐linear-‐gradient(top, #000 0%,#fff 100%); background: -‐o-‐linear-‐gradient(top, #000 0%,#fff 100%); background: -‐ms-‐linear-‐gradient(top, #000 0%,#fff 100%); /* W3C */ background: linear-‐gradient(to bottom, #000 0%,#fff 100%); /* IE6-‐9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000', endColorstr='#fff', GradientType=0);

and some things stay the same

We don’t control the environment

Why do we care about this?

Why do we care about this? ✓ cross-browser issues

Why do we care about this? ✓ cross-browser issues -
bugs

bugs - features

bugs - features ✓ performance

And because we care

We ﬁght for the users!

Technical Skills

Know your resources

speciﬁcations

reference

Don’t forget software engineering practices

Don’t forget software engineering practices ✓ don’t repeat yourself

Don’t forget software engineering practices ✓ don’t repeat yourself ✓
keep it simple

keep it simple ✓ refactor early and often

keep it simple ✓ refactor early and often ✓ test your code

content

offline storage Connectivity file access Semantics audio/video 3d/graphics presentation performance
nuts & bolts

Semantics

Semantics “The meaning of a word, phrase, sentence, or text.”

Semantics give meaning to structure

Semantics communicate that meaning consistently

<body> <div> <h1>Page Title</h1>
<div> <ul> <li><a href="home">home</a></li> <li><a href="about">about</a></li> <li><a href="blog">blog</a></li> </ul> </div> </div> <div> main page content here </div> <div> footer information here </div> </body>

<body> <div id="header"> <h1>Page Title</h1>
<div id="nav"> <ul> <li><a href="home">home</a></li> <li><a href="about">about</a></li> <li><a href="blog">blog</a></li> </ul> </div> </div> <div id="main"> main page content here </div> <div id="footer"> footer information here </div> </body>

<body> <header> <h1>Page Title</h1>
<nav> <ul> <li><a href="home">home</a></li> <li><a href="about">about</a></li> <li><a href="blog">blog</a></li> </ul> </nav> </header> <section> main page content here </section> <footer> footer information here </footer> </body>

humans read our HTML machines &

Templating

Templating <body> Hello <%= location %> </body> template

backend +

backend + = Hello Pittsburgh

backend + = Hello Pittsburgh Hello New York Hello London Hello Tokyo ...

Classes Styles that apply to multiple elements.

Classes Use meaningful names.

Classes Use meaningful names. What it is.

Classes Use meaningful names. What it is. NOT what it
looks like.

Bad Class Names bigText red leftColumn style7

Good Class Names important alert sidebar copyright

IDs Styles that apply to one element.

IDs Unique identiﬁers.

IDs Meaningful names.

presentation

reset.css normalize.css Cross-Browser Consistency

Box Model

Learn speciﬁcity When multiple selectors match an element, the higher
speciﬁcity wins.

<div id="red" class="blue"> What color will I be?
</div> #red { color: red; } .blue { color: blue; }

!important Overrides speciﬁcity.

!important Should be used sparingly.

Efﬁcient CSS

tips, tricks, & hacks

✓ spriting tips, tricks, & hacks

✓ spriting ✓ Clearﬁx tips, tricks, & hacks

✓ spriting ✓ Clearﬁx ✓ has layout tips, tricks, &
hacks

✓ spriting ✓ Clearﬁx ✓ has layout ✓ Text replacement
tips, tricks, & hacks

✓ spriting ✓ Clearﬁx ✓ has layout ✓ Text replacement
✓ and more... tips, tricks, & hacks

CSS-Tricks A List Apart CSS Resources

Organize your CSS

Organize Sections /* ================================================== GLOBAL ==================================================
*/ ... /* ================================================== HEADER ================================================== */ ... /* ================================================== SIDEBAR ================================================== */ ... /* ================================================== FOOTER ================================================== */ ...

Organize Properties .selector { background: #000;
padding: 10px; display: block; position: absolute; top: 0; right: 0; width: 200px; height: 100px; margin: 20px; color: #fff; font-‐size: 16px; font-‐family: sans-‐serif; border: 2px solid #333; }

Organize Properties .selector { background: #000;
border: 2px solid #333; color: #fff; display: block; font-‐family: sans-‐serif; font-‐size: 16px; height: 100px; margin: 20px; padding: 10px; position: absolute; right: 0; top: 0; width: 200px; }

/* Useful Comments */

CSS Preprocessors

JavaScript

behavior

Learn JavaScript

Common practices

✓ hoisting Common practices

✓ hoisting ✓ prototypical inheritance Common practices

✓ hoisting ✓ prototypical inheritance ✓ DOM interactions Common practices

✓ hoisting ✓ prototypical inheritance ✓ DOM interactions ✓ unobtrusive
JS Common practices

✓ hoisting ✓ prototypical inheritance ✓ DOM interactions ✓ unobtrusive
JS ✓ and more... Common practices

jQuery isn’t always the answer other libraries roll your own

JS Validation

Test your code!

Debugging Tools

Cross-browser

Can I use...

Cross-browser Testing

Performance

jsPerf

Dig in!

http://uptodate.frontendrescue.org/

Questions?

@juliepagano http://juliepagano.com Contact me!

References & Attribution

• W3C - http://www.w3.org/ • HTML5 & CSS3 Readiness -
http://html5readiness.com/ • CSS3 Gradient Generator - http://www.colorzilla.com/gradient-editor/ • Mozilla Developer Network - https://developer.mozilla.org References

• HTML5 Boilerplate - http://html5boilerplate.com/ • HTML5 Rocks - http://www.html5rocks.com/
• HTML5 Doctor - http://html5doctor.com/ • Semantic class names - http://css-tricks.com/semantic-class-names/ References: HTML

• reset.css - http://meyerweb.com/eric/tools/css/reset/ • normalize.css - http://necolas.github.io/normalize.css/ • The
CSS Box Model - http://css-tricks.com/the-css-box-model/ • Specifics on CSS Specificity - http://css-tricks.com/specifics-on-css- specificity/ • Efficiently Rendering CSS - http://css-tricks.com/efficiently-rendering-css/ • CSS-Tricks - http://css-tricks.com/ • A List Apart - http://alistapart.com • SASS - http://sass-lang.com/ • LESS - http://lesscss.org/ References: CSS

• jQuery - http://jquery.com/ • JSLint - http://www.jslint.com/ • JSHint
- http://jshint.com/ • Jasmine - http://pivotal.github.io/jasmine/ • QUnit - http://qunitjs.com/ References: JavaScript

• Can I Use - http://caniuse.com/ • VirtualBox - https://www.virtualbox.org/
• IE Virtualization Tools - http://www.modern.ie/en-us/virtualization-tools • Web performance best practices - https://developers.google.com/speed/ docs/best-practices/rules_intro • Best practices for speeding up your web site - http://developer.yahoo.com/ performance/rules.html References

• Front-end Code Standards & Best Practices - http://isobar-idev.github.io/ code-standards/
• Idiomatic CSS - https://github.com/necolas/idiomatic-css Additional Resources

Attribution • Browser designed by Fernando Vasconcelos from The Noun
Project - http:// thenounproject.com/noun/browser/#icon-No3064 • Laptop designed by Sam Ahmed from The Noun Project - http:// thenounproject.com/noun/laptop/#icon-No3181 • Robot designed by Simon Child from The Noun Project - http://thenounproject.com/ noun/robot/#icon-No1248 • Box Model Diagram designed by Jon Hicks - http://hicksdesign.co.uk/boxmodel/ • User by Luis Prado - http://thenounproject.com/noun/user/#icon-No13708 • The Little Netbook That Roars Like a Lion by Peter Patau - http://www.ﬂickr.com/ photos/madison_guy/3508096955/ • Database by Anton Outkine from the Noun Project - http://thenounproject.com/ noun/database/#icon-No15531 • Hammer by John Caserta from the Noun Project - http://thenounproject.com/noun/ hammer/#icon-No1306 • High-res browser logos from Paul Irish - https://github.com/paulirish/browser-logos

I am a front-end web dev (and so can you!) - pghtechfest13

I am a front-end web dev (and so can you!) - pghtechfest13

More Decks by Julie Pagano

Other Decks in Technology

Featured

Transcript