Front End Good Practices
4 likes2,397 views
This document provides a summary of best practices for front-end development. It discusses semantic HTML, CSS organization and specificity, responsive images, JavaScript performance, and other optimization techniques. Key recommendations include writing semantic HTML first before styling, avoiding inline styles, properly structuring CSS with comments and organization, reducing requests by combining files and using sprites, and placing JavaScript before the closing body tag.
![Conditional Comments
was 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](https://image.slidesharecdn.com/frontendgoodpractices-130415105537-phpapp01/85/Front-End-Good-Practices-23-320.jpg)
![Selectors
are 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”] {}](https://image.slidesharecdn.com/frontendgoodpractices-130415105537-phpapp01/85/Front-End-Good-Practices-51-320.jpg)
![Selectors
are 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](https://image.slidesharecdn.com/frontendgoodpractices-130415105537-phpapp01/85/Front-End-Good-Practices-63-320.jpg)
Front End Good Practices
- 1. FrontEnd Good Practices Improving our work!
- 2. • The Web Browser • The User Experience • The Content Layer • The Visual Layer • The Behavior Layer FrontEnd Its parts. http://en.wikipedia.org/wiki/Progressive_enhancement
- 3. Tools
- 4. Code Editor Sublime Text 2, Notepad++, gEdit, etc. http://www.sublimetext.com/2 http://notepad-plus-plus.org/ http://projects.gnome.org/gedit/
- 5. Web Browsers Chrome, Firefox, Safari, Opera, IE, Android Browser, Opera Mini
- 6. Development Kits Firebug, WebKit Developer Tools http://getfirebug.com/ https://developers.google.com/chrome-developer-tools/
- 7. Firefox Extensions Web Developer, Dust-Me, MeasureIt, YSlow
- 10. 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/
- 11. Default Stylesheet presents the content in a reasonable manner. http://meiert.com/en/blog/20070922/user-agent-style-sheets/
- 13. But, there are many Web Browsers with many versions. • Internet Explorer • Chrome • Firefox • Safari • Opera http://meiert.com/en/blog/20070922/user-agent-style-sheets/
- 14. Rendering engine by 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
- 15. Reset CSS is used to fit your layout better in those browsers. http://www.cssreset.com/
- 16. Reset CSS First you have the HTML with default stylesheet.
- 17. Reset CSS Then adds the reset.
- 18. Reseted CSS
- 19. The options to reset http://www.cssreset.com/
- 20. Latest Browser version is where you have to build. • Chrome • Internet Explorer • Firefox • Safari • Opera
- 21. Browser Sniffing helps us serving browser appropriate content. http://www.quirksmode.org/js/detect.html • Wurfl • Conditional Comments • Polyfills
- 22. Wurfl is a feature detection technique for regressive enhancement. http://wurfl.sourceforge.net/
- 23. Conditional Comments was 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. Polyfills is a feature detection technique for regressive enhancement. http://modernizr.com/ http://yepnopejs.com/
- 26. Can I Use? It provides information about browser’s features support. http://caniuse.com/
- 28. Markup language is not a programming language. http://www.w3.org/TR/html5/
- 29. Markup language is not a design program. http://www.w3.org/TR/html5/
- 30. HTML first Be centered at the content and create semantic HTML. http://adactio.com/journal/4523/ http://www.lukew.com/ff/entry.asp?1430
- 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.org The doctype is required to do cross browser.
- 32. <!doctype html> The doctype is required to do cross browser.
- 33. <!doctype html> <html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body> </html> The doctype is required to do cross browser.
- 34. • < can be mixed with tags • > can be mixed with tags • “ the quotes start an attribute • & the ampersand is also reserved Entities are used to implement reserved characters. http://www.alanwood.net/demos/ansi.html
- 35. Attribute values 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. <!doctype html> <html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body> </html> Comment the code.
- 37. Semantic only Do not use HTML to gives visual format. http://www.w3.org/TR/html5-diff/#obsolete-elements <p><font size=”20”>Big</font></p>
- 38. <p><font size=”20”>Big</font></p> <p class=”featured”>Big</p> not recommended Semantic only Do not use HTML to gives visual format. <h1>Big</h1>
- 39. <p align=”right” >Right</p> Semantic only Do not use HTML attributes to gives visual format. http://www.w3.org/TR/html5-diff/#obsolete-attributes
- 40. <p align=”right” >Right</p> <p class=”featured”>Right</p> not recommended Semantic only Do not use HTML attributes to gives visual format.
- 42. <p style=”color:#ffffff;”></p> Rules should never go inline
- 43. <p style=”color:#ffffff;”></p> <p class=”featured”></p> not recommended Rules should never go inline
- 44. Check the markup ensures better cross browser at first steps. http://validator.w3.org/ http://users.skynet.be/mgueury/mozilla/
- 45. The Visual Layer
- 48. /* Comment */ selector { property: value; } Comment the code.
- 49. /* Header Styles */ header { width: 100%; } /* Footer Styles */ footer { color: white; } Organize the code.
- 51. Selectors are 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. ID #featured-news { color: red; } Selector Category is used to filter from the relevant rules from the irrelevant. Class .photo-product { color: red; } Tag div { color: red; }
- 53. Classes & IDs Name considerations. • Do not start with numbers • Do not refer the design “redTitle” • Must be a semantic name
- 54. html body div h1 span { color: #ff0; } Key Selector is the part that matches the element, rather than its ancestors. Key Selector
- 55. * { float: left; } ul * { font-weight: bold; } .header * { color: black; } Avoid universal rules. https://developer.mozilla.org/en/Writing_Efficient_CSS
- 56. Do Not qualify ID rules with tag names or classes. https://developer.mozilla.org/en/Writing_Efficient_CSS
- 57. Do Not qualify class rules with tag names. https://developer.mozilla.org/en/Writing_Efficient_CSS
- 58. header { width: 100%; } footer { width: 100%; } Combine the selectors. header, footer { width: 100%; } http://www.cleancss.com/
- 59. Multiple Classes may 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/
- 61. Specificity is a mechanism that aids conflict resolution. http://www.w3.org/TR/CSS21/cascade.html#specificity http://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
- 62. Calculating a 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
- 63. Selectors are 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
- 65. display: block; inline; inline-block; list-item; table-cell; table-row; none; HTML Elements by CSS display property. p, div, section, article img, strong, a, input li td, th tr head http://www.w3.org/TR/css3-box/#the-lsquo http://www.librosweb.es/referencia/css/display.html
- 66. display block <div>Text</div> <div>Text</div> display inline <span>Text</span> <span>Text</span> Inline vs Block How does display work?
- 68. Static It is the default value for the position property.
- 69. Relative Relative value allows move the element from itself.
- 70. Absolute Allows you move the element from the container element.
- 71. Fixed It fixes the element from the browser.
- 72. Float & Clear Aligning the element from the container's margin. float:left; float:right; clear:both;
- 74. header { margin-bottom: 15px; margin-left: 5px; margin-top: 15px; margin-right: 5px; } Use the shorthand property instead expanded one. header { margin: 15px 5px; } http://www.dustindiaz.com/css-shorthand/ header { margin: 10px; }
- 75. Lint the code Check the syntax. http://csslint.net/
- 76. Images
- 77. Add the size http://www.websiteoptimization.com/speed/tweak/size/ allows browser render without waiting for images to download.
- 78. Do Not re-size How do I deal with cross device images?
- 80. Requests
- 81. 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
- 82. Sprites allows you to do less request by adding many images at one. http://css-tricks.com/css-sprites/
- 83. Web font icon library allow you don’t use sprites for icons. http://fortawesome.github.com/Font-Awesome/
- 84. JavaScript
- 85. JavaScript engine by browser. Engine used by SpiderMonkey Mozilla Firefox Rhino Mozilla Carakan Opera Chakra Internet Explorer > 9 JScript Internet Explorer < 8 V8 Chrome Nitro Safari
- 86. <p onclick=”hideDiv();”></p> Never write obtrusive code
- 87. <p onclick=”hideDiv();”></p> <p id=”overview”></p> not recommended Never write obtrusive code
- 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. <!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. Lint the code Check the syntax. http://www.jslint.com/
- 91. The Good Parts Douglas Crockford www.crockford.com