Post on 29-Nov-2014
description
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
“FRONT END IS JUST HTML & CSS & JS”
EASY!
–@maddesigns
“simple: do the right thing! :)”
Q: WHAT IS YOUR FAVORITE FRONT END BEST PRACTICE?
WELL… A LOOK AT HISTORY
http://www.evolutionoftheweb.com/
WHAT EXACTLY IS THE RIGHT THING?
GOOD OLD TIP NO. 1: VALIDATION
http://validator.w3.org !
http://jigsaw.w3.org/css-validator/
Whenever possible, avoid superfluous parent elements when writing HTML. Many times this
requires iteration and refactoring, but produces less HTML.
REDUCING MARKUP
<div class=“button”> <span class=“x”> <a href=“#”>Link</a> </span> </div>
<a href=“#” class=“button”>Link</a>
THIS IS BETTER
GOOD BYE OLD BOX MODEL WOES
/* 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/
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
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
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
CLASS NAMING
CLASS NAMING IS HARD
SEMANTIC CLASSES VS PRESENTATIONAL
CLASSES
USE CLASS WITH SEMANTICS IN MIND
Choose your class names to what the element is instead of how it looks
.blue-‐box { background: #51A7F9; }
.blue-‐box { background: #DC0100; }
.box { background: #F28717; }
TOOLS & METHODOLOGIES
SMACSS SCALABLE AND MODULAR ARCHITECTURE FOR CSS
https://www.smacss.com
http://www.oocss.org
OOCSS OBJECT ORIENTED CSS
http://www.bem.info
BEM BLOCK, ELEMENT, MODIFIER
DON’T MAKE YOUR LIFE HARDER THAN IT NEEDS TO BE
WITH SPECIFICITY
CLASSES VS. ID’S
FAVORITE WORD:
SPECIFICITY
1 ELEMENT
div 0 -‐ 0 -‐ 1
2 ELEMENTS
div 0 -‐ 0 -‐ 2
1 CLASS
.classname 0 -‐ 1 -‐ 0
1 PSEUDO-CLASS
:last-‐child 0 -‐ 1 -‐ 0
1 ELEMENT 1 CLASS
li.classname 0 -‐ 1 -‐ 1
1 ID SELECTOR
#div 1 -‐ 0 -‐ 0
2 ID SELECTORS 1 ELEMENT SELECTOR
#divitis #div a 2 -‐ 0 -‐ 1
style=“” 1 -‐ 0 -‐ 0 -‐ 0
INLINE STYLE
!Important 1 -‐ 0 -‐ 0 -‐ 0 -‐ 0
!IMPORTANT
SASS/SCSS NESTINGTRY TO NOT NEST MORE
THAN 3 LEVELS DEEP
Sass/SCSS: .classname1 { .classname2 { … } } Output: .classname1 .classname2 { … }
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; }
LESS/SASS OUTPUT FILE SIZE IS USUALLY OK
DESPITE LONGER SELECTOR CHAINS
DON’T WORRY ABOUT THE SIZE OF YOUR CSS
!
RATHER CARE ABOUT IMAGE SIZE
IMAGES
IMAGES OFTEN ACCOUNT FOR MOST OF THE DOWNLOADED
BYTES ON A PAGE. !
OPTIMIZING YOUR IMAGES CAN OFTEN YIELD LARGE BYTE SAVINGS AND PERFORMANCE
IMPROVEMENTS.
MAKE A CALL
BIG OR SMALL
1X, 1.5X OR 2X?
https://imageoptim.com
RESPONSIVE ♥ SERVER SIDE
http://www.ress.io
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>
Blink / ChromePicture: ASSIGNED (targeted for Chrome 38)srcset: IMPLEMENTED/SHIPPED (Chrome 34)
WebKit / SafariPicture: UNCONFIRMED (not implemented)srcset: IMPLEMENTED
Mozilla FirefoxPicture: ASSIGNED (soon in Nightly)srcset: ASSIGNED (soon in Nightly)
Microso! Internet ExplorerPicture: UNDER CONSIDERATIONsrcset: UNDER CONSIDERATION
PERFORMANCE
h!ps://docs.google.com/presentation/d/1IRHyU7_crIiCjl0Gvue0WY3eY_eYvFQvSfwQouW9368/present?slide=id.p19
RENDERING PAGES
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
Every request fetched inside of HEAD, will postpone the rendering of the page!
LOAD JS AFTER CSS
LIMIT HTTP REQUESTS & WHY
CRITICAL RENDERING PATH
A WORD ON WORDPRESS
I ❤️ WORDPRESS
I 👿 WORDPRESS
TELL YOUR FRIENDS!
TAMING FRAMEWORK OVERHEAD
FOUNDATION, BOOTSTRAP, ETC.
B
CSS SPRING CLEANING
JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)
JUST LIKE WITH T-SHIRTS (OR OTHER STUFF)
MISSEDIN-HKG.COM
BEFORE OPTIMISATION
AFTER OPTIMISATION
BAD NEWS: 15.689!
TOOLS & STUFF
CODE GUIDE
http://mdo.github.io/code-guide/
Standards for developing flexible, durable, and sustainable HTML and
CSS.
CHECK HTML5/CSS3 BROWSER FEATURES
http://www.caniuse.com
CODEKIT STEROIDS
FOR WEB DEVELOPERS
https://incident57.com/codekit/
CROSS-BROWSER TESTING
VirtualBox !
Modern.ie !
Browserstack.com !
Sauce Labs !
DEVICE TESTING
Adobe Edge Inspect !
Ghostlab !
BrowserSync! !!!
PERFORMANCE TESTING
http://www.webpagetest.org !
http://tools.pingdom.com/fpt/ !
https://developers.google.com/speed/pagespeed/ !
https://developer.yahoo.com/yslow/ !
GRUNT JAVASCRIPT TASK
RUNNER
http://www.gruntjs.com
GULP ANOTHER (FASTER)
TASK RUNNER
http://www.gulpjs.com
LEAN BACK NOW
FRONT END IS ‘JUST’ HTML & CSS & JS
THANKS!
Holger Bartel | @foobartel | WomenWhoCodeHK 23/07/2014