Front End Good Practices
94
FrontEnd Good Practices Improving our work!
-
Upload
hernan-mammana -
Category
Design
-
view
925 -
download
1
Transcript of Front End Good Practices
FrontEnd Good PracticesImproving our work!
• The Web Browser
• The User Experience
• The Content Layer
• The Visual Layer
• The Behavior Layer
FrontEndIts parts.
http://en.wikipedia.org/wiki/Progressive_enhancement
Tools
Code EditorSublime Text 2, Notepad++, gEdit, etc.
http://www.sublimetext.com/2http://notepad-plus-plus.org/http://projects.gnome.org/gedit/
Web BrowsersChrome, Firefox, Safari, Opera, IE, Android Browser, Opera Mini
Development KitsFirebug, WebKit Developer Tools
http://getfirebug.com/https://developers.google.com/chrome-developer-tools/
Firefox ExtensionsWeb Developer, Dust-Me, MeasureIt, YSlow
Chrome ExtensionsWeb Developer
The Web Browser
Web Browser’s parts retrieves resources from the server and visually presents them.
http://www.vineetgupta.com/2010/11/how-browsers-work-part-1-architecture/
Default Stylesheetpresents the content in a reasonable manner.
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
W3C Recommendationfor HTML4
http://www.w3.org/TR/CSS21/sample.html
But, there aremany Web Browsers with many versions.
• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
Rendering engineby browser.
Engine used by
Gecko Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-gecko ... etc
Presto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet Channel
Trident Internet Explorer, Windows Phone 7
WebKit Safari, Chrome, Adobe Air, Android Browser, Palm webOS, Symbian S60, OWB, Stream, Flock, RockMelt
Reset CSSis used to fit your layout better in those browsers.
http://www.cssreset.com/
Reset CSSFirst you have the HTML with default stylesheet.
Reset CSSThen adds the reset.
Reseted CSS
Latest Browserversion is where you have to build.
• Chrome
• Internet Explorer
• Firefox
• Safari
• Opera
Browser Sniffinghelps us serving browser appropriate content.
http://www.quirksmode.org/js/detect.html
• Wurfl
• Conditional Comments
• Polyfills
Wurflis a feature detection technique for regressive enhancement.
http://wurfl.sourceforge.net/
Conditional Commentswas introduced by IE5.
<!doctype html><html>
<head><!--[if IE]>
Match with any version of IE<![endif]--><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
http://librosweb.es/css_avanzado/capitulo6/comentarios_condicionales_filtros_y_hacks.html
Polyfillsis a feature detection technique for regressive enhancement.
http://modernizr.com/http://yepnopejs.com/
PolyfillsPlaceholder example.
http://addyosmani.com/blog/writing-polyfills/
Can I Use?It provides information about browser’s features support.
http://caniuse.com/
The Content Layer
Markup languageis not a programming language.
http://www.w3.org/TR/html5/
Markup languageis not a design program.
http://www.w3.org/TR/html5/
HTML firstBe centered at the content and create semantic HTML.
http://adactio.com/journal/4523/http://www.lukew.com/ff/entry.asp?1430
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
The doctypeis required to do cross browser.
<!doctype html>
The doctypeis required to do cross browser.
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
The doctypeis required to do cross browser.
• < can be mixed with tags
• > can be mixed with tags
• “ the quotes start an attribute
• & the ampersand is also reserved
Entitiesare used to implement reserved characters.
http://www.alanwood.net/demos/ansi.html
Attributevalues should be between quotes.
<p id=”paragraph”>It’s the content</p> Open tag & close tag. Element with content.
<img src=”/icon.png” width=”48” alt=”Cut”> Unique tag. Element without content.
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
Commentthe code.
Semantic onlyDo not use HTML to gives visual format.
http://www.w3.org/TR/html5-diff/#obsolete-elements
<p><font size=”20”>Big</font></p>
<p><font size=”20”>Big</font></p>
<p class=”featured”>Big</p>
not recommended
Semantic onlyDo not use HTML to gives visual format.
<h1>Big</h1>
<p align=”right” >Right</p>
Semantic onlyDo not use HTML attributes to gives visual format.
http://www.w3.org/TR/html5-diff/#obsolete-attributes
<p align=”right” >Right</p>
<p class=”featured”>Right</p>
not recommended
Semantic onlyDo not use HTML attributes to gives visual format.
DivitisAvoid unnecessary elements.
<p style=”color:#ffffff;”></p>
Rules should never go inline
<p style=”color:#ffffff;”></p>
<p class=”featured”></p>
not recommended
Rules should never go inline
Check the markupensures better cross browser at first steps.
http://validator.w3.org/http://users.skynet.be/mgueury/mozilla/
The Visual Layer
!important
Code Selectors Specificity
Layout Hacks
CodeComment & Organize
/* Comment */
selector {property: value;
}
Commentthe code.
/* Header Styles */
header {width: 100%;
}
/* Footer Styles */
footer {color: white;
}
Organizethe code.
SelectorsMatching Elements
Selectorsare patterns that match against elements in a tree.
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
1. header {}
2. footer p {}
3. .featured-box {}
4. a:hover {}
5. input[type=”submit”] {}
ID
#featured-news {color: red;
}
Selector Categoryis used to filter from the relevant rules from the irrelevant.
Class
.photo-product {color: red;
}
Tag
div {color: red;
}
Classes & IDsName considerations.
• Do not start with numbers
• Do not refer the design “redTitle”
• Must be a semantic name
html body div h1 span {color: #ff0;
}
Key Selectoris the part that matches the element, rather than its ancestors.
Key Selector
* {float: left;
}
ul * {font-weight: bold;
}
.header * {color: black;
}
Avoiduniversal rules.
https://developer.mozilla.org/en/Writing_Efficient_CSS
Do Notqualify ID rules with tag names or classes.
https://developer.mozilla.org/en/Writing_Efficient_CSS
Do Notqualify class rules with tag names.
https://developer.mozilla.org/en/Writing_Efficient_CSS
header {width: 100%;
}
footer {width: 100%;
}
Combinethe selectors.
header, footer {width: 100%;
}
http://www.cleancss.com/
Multiple Classesmay make the selector more specific or give it additional weight.
http://www.maxdesign.com.au/articles/multiple-classes/http://paulirish.com/2008/the-two-css-selector-bugs-in-ie6/http://www.ryanbrill.com/archives/multiple-classes-in-ie/
SpecificityResolving conflicts
Specificityis a mechanism that aids conflict resolution.
http://www.w3.org/TR/CSS21/cascade.html#specificityhttp://reference.sitepoint.com/css/specificity
1. style attribute
2. ID selectors
3. Class selectors
4. Tag selectors
5. at same specificity the latter defined rule take precedence
Calculatinga selector’s specificity.
http://reference.sitepoint.com/css/specificity#specificity__tbl_selectorspecificityresults
a,b,c,d
count 1 if is a inline style
quantity of ID
quantity of other attributes and pseudo-classes
quantity of element and pseudo-elements
Selectorsare patterns that match against elements in a tree.
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
1. header {}
2. footer p {}
3. .featured-box {}
4. a:hover {}
5. input[type=”submit”] {}
0, 0, 0, 1
0, 0, 0, 2
0, 0, 1, 0
0, 0, 1, 1
0, 0, 1, 1
LayoutDividing & Displacing
display: block;inline;inline-block;list-item;table-cell;table-row;none;
HTML Elementsby CSS display property.
p, div, section, articleimg, strong, a, input
litd, thtrhead
http://www.w3.org/TR/css3-box/#the-lsquohttp://www.librosweb.es/referencia/css/display.html
display block <div>Text</div> <div>Text</div>
display inline
<span>Text</span> <span>Text</span>
Inline vs BlockHow does display work?
Box-Model
margin
border
padding
content
top
bottom
rightleft
StaticIt is the default value for the position property.
RelativeRelative value allows move the element from itself.
AbsoluteAllows you move the element from the container element.
FixedIt fixes the element from the browser.
Float & ClearAligning the element from the container's margin.
float:left; float:right;
clear:both;
HacksThe last solution
header {margin-bottom: 15px;margin-left: 5px;margin-top: 15px;margin-right: 5px;
}
Use the shorthandproperty instead expanded one.
header {margin: 15px 5px;
}
http://www.dustindiaz.com/css-shorthand/
header {margin: 10px;
}
Images
Add the size
http://www.websiteoptimization.com/speed/tweak/size/
allows browser render without waiting for images to download.
Do Not re-sizeHow do I deal with cross device images?
Compress
http://imageoptim.com/http://www.jpegmini.com/http://tinypng.org/
Requests
Requests Do less request as possible and compress it.
• Minifies the CSS and JS files
• Join all the CSS and JS files in one file
• Cache the files
• Do Async request if you can
Sprites allows you to do less request by adding many images at one.
http://css-tricks.com/css-sprites/
Web font icon library allow you don’t use sprites for icons.
http://fortawesome.github.com/Font-Awesome/
JavaScript
JavaScript engineby browser.
Engine used by
SpiderMonkey Mozilla Firefox
Rhino Mozilla
Carakan Opera
Chakra Internet Explorer > 9
JScript Internet Explorer < 8
V8 Chrome
Nitro Safari
<p onclick=”hideDiv();”></p>
Never write obtrusive code
<p onclick=”hideDiv();”></p>
<p id=”overview”></p>
not recommended
Never write obtrusive code
JS never goes in HEAD<!doctype html><html>
<head><title>MercadoLibre</title><script>
function greet(){alert(“hello world!”);
}</script>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment --><script>
function greet(){alert(“hello world!”);
}</script>
</body></html>
JS never goes in HEAD
The Good PartsDouglas Crockford
www.crockford.com
JavaScript Patterns
Stoyan Stefanovwww.stoyanstefanov.com
Object-Oriented JavaScript
Stoyan Stefanovwww.stoyanstefanov.com
Maintainable JavaScriptNicholas Zakaswww.nczonline.net
