Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front End Best Practices

9,173 views

Published on

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

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • How web developer get hired internationally? To know, Take a look at https://goo.gl/XkhmN5
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for this, definitely saved.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Front End Best Practices

  1. 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. 2. “FRONT END IS JUST HTML & CSS & JS”
  3. 3. EASY!
  4. 4. –@maddesigns “simple: do the right thing! :)” Q: WHAT IS YOUR FAVORITE FRONT END BEST PRACTICE?
  5. 5. WELL… A LOOK AT HISTORY
  6. 6. http://www.evolutionoftheweb.com/
  7. 7. WHAT EXACTLY IS THE RIGHT THING?
  8. 8. GOOD OLD TIP NO. 1: VALIDATION http://validator.w3.org ! http://jigsaw.w3.org/css-validator/
  9. 9. Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. REDUCING MARKUP
  10. 10. <div  class=“button”>      <span  class=“x”>          <a  href=“#”>Link</a>      </span>   </div>
  11. 11. <a  href=“#”  class=“button”>Link</a> THIS IS BETTER
  12. 12. GOOD BYE OLD BOX MODEL WOES
  13. 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. 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. 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. 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. 17. CLASS NAMING
  18. 18. CLASS NAMING IS HARD
  19. 19. SEMANTIC CLASSES VS PRESENTATIONAL CLASSES
  20. 20. USE CLASS WITH SEMANTICS IN MIND Choose your class names to what the element is instead of how it looks
  21. 21. .blue-­‐box  {        background:  #51A7F9;       }
  22. 22. .blue-­‐box  {        background:  #DC0100;       }
  23. 23. .box  {        background:  #F28717;       }
  24. 24. TOOLS & METHODOLOGIES
  25. 25. SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS https://www.smacss.com
  26. 26. http://www.oocss.org OOCSS OBJECT ORIENTED CSS
  27. 27. http://www.bem.info BEM BLOCK, ELEMENT, MODIFIER
  28. 28. DON’T MAKE YOUR LIFE HARDER THAN IT NEEDS TO BE WITH SPECIFICITY
  29. 29. CLASSES VS. ID’S
  30. 30. FAVORITE WORD: SPECIFICITY
  31. 31. 1 ELEMENT div  0  -­‐  0  -­‐  1
  32. 32. 2 ELEMENTS div  0  -­‐  0  -­‐  2
  33. 33. 1 CLASS .classname  0  -­‐  1  -­‐  0
  34. 34. 1 PSEUDO-CLASS :last-­‐child  0  -­‐  1  -­‐  0
  35. 35. 1 ELEMENT 1 CLASS li.classname  0  -­‐  1  -­‐  1
  36. 36. 1 ID SELECTOR #div  1  -­‐  0  -­‐  0
  37. 37. 2 ID SELECTORS 1 ELEMENT SELECTOR #divitis  #div  a  2  -­‐  0  -­‐  1
  38. 38. style=“”  1  -­‐  0  -­‐  0  -­‐  0 INLINE STYLE
  39. 39. !Important  1  -­‐  0  -­‐  0  -­‐  0  -­‐  0 !IMPORTANT
  40. 40. SASS/SCSS NESTING TRY TO NOT NEST MORE THAN 3 LEVELS DEEP
  41. 41. Sass/SCSS:   .classname1  {      .classname2  {          …      }   }   
 Output:     .classname1  .classname2  {  …  }
  42. 42. 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;   }
  43. 43. LESS/SASS OUTPUT FILE SIZE IS USUALLY OK DESPITE LONGER SELECTOR CHAINS
  44. 44. DON’T WORRY ABOUT THE SIZE OF YOUR CSS ! RATHER CARE ABOUT IMAGE SIZE
  45. 45. IMAGES
  46. 46. IMAGES OFTEN ACCOUNT FOR MOST OF THE DOWNLOADED BYTES ON A PAGE. ! OPTIMIZING YOUR IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE IMPROVEMENTS.
  47. 47. MAKE A CALL
  48. 48. BIG OR SMALL
  49. 49. 1X, 1.5X OR 2X?
  50. 50. https://imageoptim.com
  51. 51. RESPONSIVE ♥ SERVER SIDE http://www.ress.io
  52. 52. 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>
  53. 53. 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
  54. 54. PERFORMANCE
  55. 55. h ps://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present?slide=id.p19
  56. 56. RENDERING PAGES
  57. 57. 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
  58. 58. Every request fetched inside of HEAD, will postpone the rendering of the page! LOAD JS AFTER CSS
  59. 59. LIMIT HTTP REQUESTS & WHY
  60. 60. CRITICAL RENDERING PATH
  61. 61. A WORD ON WORDPRESS
  62. 62. I ❤️ WORDPRESS
  63. 63. I 👿 WORDPRESS
  64. 64. TELL YOUR FRIENDS!
  65. 65. TAMING FRAMEWORK OVERHEAD
  66. 66. FOUNDATION, BOOTSTRAP, ETC. B
  67. 67. CSS SPRING CLEANING
  68. 68. JUST LIKE WITH T-SHIRTS (OR OTHER STUFF) JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)
  69. 69. MISSEDIN-HKG.COM
  70. 70. BEFORE OPTIMISATION
  71. 71. AFTER OPTIMISATION
  72. 72. BAD NEWS: 15.689!
  73. 73. TOOLS & STUFF
  74. 74. CODE GUIDE http://mdo.github.io/code-guide/ Standards for developing flexible, durable, and sustainable HTML and CSS.
  75. 75. CHECK HTML5/CSS3 BROWSER FEATURES http://www.caniuse.com
  76. 76. CODEKIT STEROIDS FOR WEB DEVELOPERS https://incident57.com/codekit/
  77. 77. CROSS-BROWSER TESTING VirtualBox ! Modern.ie ! Browserstack.com ! Sauce Labs
  78. 78. DEVICE TESTING Adobe Edge Inspect ! Ghostlab ! BrowserSync! ! !
  79. 79. PERFORMANCE TESTING http://www.webpagetest.org ! http://tools.pingdom.com/fpt/ ! https://developers.google.com/speed/pagespeed/ ! https://developer.yahoo.com/yslow/
  80. 80. GRUNT JAVASCRIPT TASK RUNNER http://www.gruntjs.com
  81. 81. GULP ANOTHER (FASTER) TASK RUNNER http://www.gulpjs.com
  82. 82. LEAN BACK NOW
  83. 83. FRONT END IS ‘JUST’ HTML & CSS & JS
  84. 84. THANKS! Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014

×