Front End Good Practices

1,701 views

Published on

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,701
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Front End Good Practices

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

×