Front End Good Practices
-
Upload
hernan-mammana -
Category
Design
-
view
929 -
download
1
Transcript of Front End Good Practices
![Page 1: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/1.jpg)
FrontEnd Good PracticesImproving our work!
![Page 2: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/2.jpg)
• The Web Browser
• The User Experience
• The Content Layer
• The Visual Layer
• The Behavior Layer
FrontEndIts parts.
http://en.wikipedia.org/wiki/Progressive_enhancement
![Page 3: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/3.jpg)
Tools
![Page 4: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/4.jpg)
Code EditorSublime Text 2, Notepad++, gEdit, etc.
http://www.sublimetext.com/2http://notepad-plus-plus.org/http://projects.gnome.org/gedit/
![Page 5: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/5.jpg)
Web BrowsersChrome, Firefox, Safari, Opera, IE, Android Browser, Opera Mini
![Page 6: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/6.jpg)
Development KitsFirebug, WebKit Developer Tools
http://getfirebug.com/https://developers.google.com/chrome-developer-tools/
![Page 7: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/7.jpg)
Firefox ExtensionsWeb Developer, Dust-Me, MeasureIt, YSlow
![Page 8: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/8.jpg)
Chrome ExtensionsWeb Developer
![Page 9: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/9.jpg)
The Web Browser
![Page 10: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/10.jpg)
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/
![Page 11: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/11.jpg)
Default Stylesheetpresents the content in a reasonable manner.
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
![Page 12: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/12.jpg)
W3C Recommendationfor HTML4
http://www.w3.org/TR/CSS21/sample.html
![Page 13: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/13.jpg)
But, there aremany Web Browsers with many versions.
• Internet Explorer
• Chrome
• Firefox
• Safari
• Opera
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
![Page 14: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/14.jpg)
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
![Page 15: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/15.jpg)
Reset CSSis used to fit your layout better in those browsers.
http://www.cssreset.com/
![Page 16: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/16.jpg)
Reset CSSFirst you have the HTML with default stylesheet.
![Page 17: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/17.jpg)
Reset CSSThen adds the reset.
![Page 18: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/18.jpg)
Reseted CSS
![Page 20: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/20.jpg)
Latest Browserversion is where you have to build.
• Chrome
• Internet Explorer
• Firefox
• Safari
• Opera
![Page 21: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/21.jpg)
Browser Sniffinghelps us serving browser appropriate content.
http://www.quirksmode.org/js/detect.html
• Wurfl
• Conditional Comments
• Polyfills
![Page 22: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/22.jpg)
Wurflis a feature detection technique for regressive enhancement.
http://wurfl.sourceforge.net/
![Page 23: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/23.jpg)
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
![Page 24: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/24.jpg)
Polyfillsis a feature detection technique for regressive enhancement.
http://modernizr.com/http://yepnopejs.com/
![Page 25: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/25.jpg)
PolyfillsPlaceholder example.
http://addyosmani.com/blog/writing-polyfills/
![Page 26: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/26.jpg)
Can I Use?It provides information about browser’s features support.
http://caniuse.com/
![Page 27: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/27.jpg)
The Content Layer
![Page 28: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/28.jpg)
Markup languageis not a programming language.
http://www.w3.org/TR/html5/
![Page 29: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/29.jpg)
Markup languageis not a design program.
http://www.w3.org/TR/html5/
![Page 30: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/30.jpg)
HTML firstBe centered at the content and create semantic HTML.
http://adactio.com/journal/4523/http://www.lukew.com/ff/entry.asp?1430
![Page 31: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/31.jpg)
<!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.
![Page 32: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/32.jpg)
<!doctype html>
The doctypeis required to do cross browser.
![Page 33: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/33.jpg)
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
The doctypeis required to do cross browser.
![Page 34: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/34.jpg)
• < 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
![Page 35: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/35.jpg)
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.
![Page 36: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/36.jpg)
<!doctype html><html>
<head><title>MercadoLibre</title>
</head><body>
<p>The basic content</p><!-- Comment -->
</body></html>
Commentthe code.
![Page 37: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/37.jpg)
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>
![Page 38: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/38.jpg)
<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>
![Page 39: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/39.jpg)
<p align=”right” >Right</p>
Semantic onlyDo not use HTML attributes to gives visual format.
http://www.w3.org/TR/html5-diff/#obsolete-attributes
![Page 40: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/40.jpg)
<p align=”right” >Right</p>
<p class=”featured”>Right</p>
not recommended
Semantic onlyDo not use HTML attributes to gives visual format.
![Page 41: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/41.jpg)
DivitisAvoid unnecessary elements.
![Page 42: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/42.jpg)
<p style=”color:#ffffff;”></p>
Rules should never go inline
![Page 43: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/43.jpg)
<p style=”color:#ffffff;”></p>
<p class=”featured”></p>
not recommended
Rules should never go inline
![Page 44: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/44.jpg)
Check the markupensures better cross browser at first steps.
http://validator.w3.org/http://users.skynet.be/mgueury/mozilla/
![Page 45: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/45.jpg)
The Visual Layer
![Page 46: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/46.jpg)
!important
Code Selectors Specificity
Layout Hacks
![Page 47: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/47.jpg)
CodeComment & Organize
![Page 48: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/48.jpg)
/* Comment */
selector {property: value;
}
Commentthe code.
![Page 49: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/49.jpg)
/* Header Styles */
header {width: 100%;
}
/* Footer Styles */
footer {color: white;
}
Organizethe code.
![Page 50: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/50.jpg)
SelectorsMatching Elements
![Page 51: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/51.jpg)
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”] {}
![Page 52: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/52.jpg)
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;
}
![Page 53: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/53.jpg)
Classes & IDsName considerations.
• Do not start with numbers
• Do not refer the design “redTitle”
• Must be a semantic name
![Page 54: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/54.jpg)
html body div h1 span {color: #ff0;
}
Key Selectoris the part that matches the element, rather than its ancestors.
Key Selector
![Page 55: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/55.jpg)
* {float: left;
}
ul * {font-weight: bold;
}
.header * {color: black;
}
Avoiduniversal rules.
https://developer.mozilla.org/en/Writing_Efficient_CSS
![Page 56: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/56.jpg)
Do Notqualify ID rules with tag names or classes.
https://developer.mozilla.org/en/Writing_Efficient_CSS
![Page 57: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/57.jpg)
Do Notqualify class rules with tag names.
https://developer.mozilla.org/en/Writing_Efficient_CSS
![Page 58: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/58.jpg)
header {width: 100%;
}
footer {width: 100%;
}
Combinethe selectors.
header, footer {width: 100%;
}
http://www.cleancss.com/
![Page 59: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/59.jpg)
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/
![Page 60: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/60.jpg)
SpecificityResolving conflicts
![Page 61: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/61.jpg)
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
![Page 62: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/62.jpg)
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
![Page 63: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/63.jpg)
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
![Page 64: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/64.jpg)
LayoutDividing & Displacing
![Page 65: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/65.jpg)
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
![Page 66: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/66.jpg)
display block <div>Text</div> <div>Text</div>
display inline
<span>Text</span> <span>Text</span>
Inline vs BlockHow does display work?
![Page 67: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/67.jpg)
Box-Model
margin
border
padding
content
top
bottom
rightleft
![Page 68: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/68.jpg)
StaticIt is the default value for the position property.
![Page 69: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/69.jpg)
RelativeRelative value allows move the element from itself.
![Page 70: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/70.jpg)
AbsoluteAllows you move the element from the container element.
![Page 71: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/71.jpg)
FixedIt fixes the element from the browser.
![Page 72: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/72.jpg)
Float & ClearAligning the element from the container's margin.
float:left; float:right;
clear:both;
![Page 73: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/73.jpg)
HacksThe last solution
![Page 74: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/74.jpg)
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;
}
![Page 76: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/76.jpg)
Images
![Page 77: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/77.jpg)
Add the size
http://www.websiteoptimization.com/speed/tweak/size/
allows browser render without waiting for images to download.
![Page 78: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/78.jpg)
Do Not re-sizeHow do I deal with cross device images?
![Page 79: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/79.jpg)
Compress
http://imageoptim.com/http://www.jpegmini.com/http://tinypng.org/
![Page 80: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/80.jpg)
Requests
![Page 81: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/81.jpg)
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
![Page 82: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/82.jpg)
Sprites allows you to do less request by adding many images at one.
http://css-tricks.com/css-sprites/
![Page 83: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/83.jpg)
Web font icon library allow you don’t use sprites for icons.
http://fortawesome.github.com/Font-Awesome/
![Page 84: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/84.jpg)
JavaScript
![Page 85: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/85.jpg)
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
![Page 86: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/86.jpg)
<p onclick=”hideDiv();”></p>
Never write obtrusive code
![Page 87: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/87.jpg)
<p onclick=”hideDiv();”></p>
<p id=”overview”></p>
not recommended
Never write obtrusive code
![Page 88: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/88.jpg)
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>
![Page 89: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/89.jpg)
<!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
![Page 91: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/91.jpg)
The Good PartsDouglas Crockford
www.crockford.com
![Page 92: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/92.jpg)
JavaScript Patterns
Stoyan Stefanovwww.stoyanstefanov.com
![Page 93: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/93.jpg)
Object-Oriented JavaScript
Stoyan Stefanovwww.stoyanstefanov.com
![Page 94: Front End Good Practices](https://reader030.fdocuments.net/reader030/viewer/2022012922/554a2bd0b4c90542548b4fd1/html5/thumbnails/94.jpg)
Maintainable JavaScriptNicholas Zakaswww.nczonline.net