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