• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Front End Good Practices
 

Front End Good Practices

on

  • 870 views

 

Statistics

Views

Total Views
870
Views on SlideShare
851
Embed Views
19

Actions

Likes
1
Downloads
11
Comments
0

2 Embeds 19

http://www.linkedin.com 15
https://www.linkedin.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Front End Good Practices Front End Good Practices Presentation Transcript

    • FrontEnd Good PracticesImproving our work!
    • • The Web Browser• The User Experience• The Content Layer• The Visual Layer• The Behavior LayerFrontEndIts 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 Toolshttp://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 partsretrieves 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 HTML4http://www.w3.org/TR/CSS21/sample.html
    • But, there aremany Web Browsers with many versions.• Internet Explorer• Chrome• Firefox• Safari• Operahttp://meiert.com/en/blog/20070922/user-agent-style-sheets/
    • Rendering engineby browser.Engine used byGeckoFirefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-gecko ... etcPresto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet ChannelTrident Internet Explorer, Windows Phone 7WebKitSafari, Chrome, Adobe Air, Android Browser, Palm webOS, SymbianS60, 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
    • The options to resethttp://www.cssreset.com/
    • 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/htm<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.or<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.orgThe 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 reservedEntitiesare 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 recommendedSemantic 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 recommendedSemantic 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 recommendedRules 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
    • !importantCode Selectors SpecificityLayout 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;}Tagdiv {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/specificity1. style attribute2. ID selectors3. Class selectors4. Tag selectors5. at same specificity the latter defined rule take precedence
    • Calculatinga selector’s specificity.http://reference.sitepoint.com/css/specificity#specificity__tbl_selectorspecificityresultsa,b,c,dcount 1 if is a inline stylequantity of IDquantity of other attributes and pseudo-classesquantity 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, 10, 0, 0, 20, 0, 1, 00, 0, 1, 10, 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, inputlitd, thtrheadhttp://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-Modelmarginborderpaddingcontenttopbottomrightleft
    • 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 containers 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;}
    • Lint the codeCheck the syntax.http://csslint.net/
    • Images
    • Add the sizehttp://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?
    • Compresshttp://imageoptim.com/http://www.jpegmini.com/http://tinypng.org/
    • Requests
    • RequestsDo 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
    • Spritesallows you to do less request by adding many images at one.http://css-tricks.com/css-sprites/
    • Web fonticon library allow you don’t use sprites for icons.http://fortawesome.github.com/Font-Awesome/
    • JavaScript
    • JavaScript engineby browser.Engine used bySpiderMonkey Mozilla FirefoxRhino MozillaCarakan OperaChakra Internet Explorer > 9JScript Internet Explorer < 8V8 ChromeNitro Safari
    • <p onclick=”hideDiv();”></p>Never write obtrusive code
    • <p onclick=”hideDiv();”></p><p id=”overview”></p>not recommendedNever 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
    • Lint the codeCheck the syntax.http://www.jslint.com/
    • The Good PartsDouglas Crockfordwww.crockford.com
    • JavaScriptPatternsStoyan Stefanovwww.stoyanstefanov.com
    • Object-OrientedJavaScriptStoyan Stefanovwww.stoyanstefanov.com
    • MaintainableJavaScriptNicholas Zakaswww.nczonline.net