Front End Best Practices
•
17 likes•13,523 views
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
Report
Share
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (8)
Similar to Front End Best Practices
Similar to Front End Best Practices (20)
More from Holger Bartel
More from Holger Bartel (13)
Recently uploaded
Recently uploaded (20)
Front End Best Practices
- 1. FRONT END BEST PRACTICES Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014 A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development
- 2. “FRONT END IS JUST HTML & CSS & JS”
- 3. EASY!
- 4. –@maddesigns “simple: do the right thing! :)” Q: WHAT IS YOUR FAVORITE FRONT END BEST PRACTICE?
- 5. WELL… A LOOK AT HISTORY
- 7. WHAT EXACTLY IS THE RIGHT THING?
- 8. GOOD OLD TIP NO. 1: VALIDATION http://validator.w3.org ! http://jigsaw.w3.org/css-validator/
- 9. Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. REDUCING MARKUP
- 10. <div class=“button”> <span class=“x”> <a href=“#”>Link</a> </span> </div>
- 11. <a href=“#” class=“button”>Link</a> THIS IS BETTER
- 12. GOOD BYE OLD BOX MODEL WOES
- 13. /* apply a natural box layout model to all elements */ ! *, *:before, *:after { -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing: border-‐box; http://www.paulirish.com/2012/box-sizing-border-box-ftw/
- 14. px is an absolute unit of measurement - px units don't scale ! em is not an absolute unit - it is a unit that is relative to the currently chosen font size. PIXELS VS. EMS
- 15. body { font-‐size:62.5%; } h1 { font-‐size: 2.4em; } /* =24px */ p { font-‐size: 1.4em; } /* =14px */ li { font-‐size: 1.4em; } /* =14px? */ ! li li { } ! 1.4em = 14px BUT 14 * 1.4 = 20 FONT SIZE COMPOUNDS
- 16. The em unit is relative to the font-size of the parent, which causes the compounding issue. ! The rem unit is relative to the root—or the html—element. REM == ROOT EM
- 17. CLASS NAMING
- 18. CLASS NAMING IS HARD
- 20. USE CLASS WITH SEMANTICS IN MIND Choose your class names to what the element is instead of how it looks
- 21. .blue-‐box { background: #51A7F9; }
- 22. .blue-‐box { background: #DC0100; }
- 23. .box { background: #F28717; }
- 25. SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS https://www.smacss.com
- 28. DON’T MAKE YOUR LIFE HARDER THAN IT NEEDS TO BE WITH SPECIFICITY
- 30. CLASSES VS. ID’S
- 32. 1 ELEMENT div 0 -‐ 0 -‐ 1
- 33. 2 ELEMENTS div 0 -‐ 0 -‐ 2
- 34. 1 CLASS .classname 0 -‐ 1 -‐ 0
- 35. 1 PSEUDO-CLASS :last-‐child 0 -‐ 1 -‐ 0
- 36. 1 ELEMENT 1 CLASS li.classname 0 -‐ 1 -‐ 1
- 37. 1 ID SELECTOR #div 1 -‐ 0 -‐ 0
- 38. 2 ID SELECTORS 1 ELEMENT SELECTOR #divitis #div a 2 -‐ 0 -‐ 1
- 39. style=“” 1 -‐ 0 -‐ 0 -‐ 0 INLINE STYLE
- 40. !Important 1 -‐ 0 -‐ 0 -‐ 0 -‐ 0 !IMPORTANT
- 43. SASS/SCSS NESTING TRY TO NOT NEST MORE THAN 3 LEVELS DEEP
- 44. Sass/SCSS: .classname1 { .classname2 { … } } Output: .classname1 .classname2 { … }
- 45. div.pp_woocommerce .pp_arrow_prev:before, div.pp_woocommerce .pp_arrow_next:before, div.pp_woocommerce .pp_previous:before, div.pp_woocommerce .pp_next:before { line-‐height: 1.15 !important } #footer #footer_bar_left #container .headline { position: absolute; top: 0; left: 20px; }
- 46. LESS/SASS OUTPUT FILE SIZE IS USUALLY OK DESPITE LONGER SELECTOR CHAINS
- 47. DON’T WORRY ABOUT THE SIZE OF YOUR CSS ! RATHER CARE ABOUT IMAGE SIZE
- 48. IMAGES
- 49. IMAGES OFTEN ACCOUNT FOR MOST OF THE DOWNLOADED BYTES ON A PAGE. ! OPTIMIZING YOUR IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE IMPROVEMENTS.
- 50. MAKE A CALL
- 51. BIG OR SMALL
- 52. 1X, 1.5X OR 2X?
- 56. All New! THE PICTURE ELEMENT <picture> <source media="(min-‐width: 45em)” srcset="large.jpg"> <source media="(min-‐width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt=“A smiling icebear"> </picture>
- 57. Blink / Chrome Picture: ASSIGNED (targeted for Chrome 38) srcset: IMPLEMENTED/SHIPPED (Chrome 34) WebKit / Safari Picture: UNCONFIRMED (not implemented) srcset: IMPLEMENTED Mozilla Firefox Picture: ASSIGNED (soon in Nightly) srcset: ASSIGNED (soon in Nightly) Microso Internet Explorer Picture: UNDER CONSIDERATION srcset: UNDER CONSIDERATION
- 58. PERFORMANCE
- 61. RENDERING PAGES
- 62. Waiting for the DOM and CSSOM to build the render tree. ! Blocking JavaScript until the CSS file is downloaded and parsed: the JavaScript may query the CSSOM RENDER-BLOCKING h ps://developers.google.com/speed/docs/insights/BlockingJS
- 63. Every request fetched inside of HEAD, will postpone the rendering of the page! LOAD JS AFTER CSS
- 64. LIMIT HTTP REQUESTS & WHY
- 67. I ❤️ WORDPRESS
- 68. I 👿 WORDPRESS
- 80. JUST LIKE WITH T-SHIRTS (OR OTHER STUFF) JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)
- 81. MISSEDIN-HKG.COM
- 88. TOOLS & STUFF
- 89. CODE GUIDE http://mdo.github.io/code-guide/ Standards for developing flexible, durable, and sustainable HTML and CSS.
- 93. DEVICE TESTING Adobe Edge Inspect ! Ghostlab ! BrowserSync! ! !
- 97. LEAN BACK NOW
- 98. FRONT END IS ‘JUST’ HTML & CSS & JS
- 99. THANKS! Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014