Download - Get Your Frontend Sorted (Barcamp Gent 2008)
![Page 1: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/1.jpg)
GET YOUR FRONTEND SORTED
Jurriaan PersynLennart SchoorsBarCampGent 29 March 2008
![Page 2: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/2.jpg)
Netlog?
![Page 3: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/3.jpg)
Netlog?
‣ some basic, quick facts‣ largest European social network site
‣ 33 million members
‣ 19 languages
‣ since 2001
‣ based in Gent, Belgium
![Page 4: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/4.jpg)
Netlog?
‣ our technical team: 20 heads‣ 1 dedicated flash developer
‣ 2 dedicated desktop developers
‣ 3 dedicated designers
‣ 5 dedicated server architects
‣ 8 dedicated php developers
![Page 5: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/5.jpg)
So who’s doingCSS and JS?
![Page 6: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/6.jpg)
Well, most of them ...
![Page 7: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/7.jpg)
Does that make the *.css/js-files a bunch of
hacks and patches?
Well, maybe, but let’s dream...
![Page 8: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/8.jpg)
Frontend framework
![Page 9: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/9.jpg)
Frontend framework
‣ Structured
‣ Re-usable components
‣ Documented
![Page 10: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/10.jpg)
Frontend framework
‣ We need code that is‣ reliable
‣ easy to debug
‣ We need defaults that look good and just work
‣ Different people will work on the same codebase
![Page 11: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/11.jpg)
Frontend framework
‣ Let’s take a look at some ways to build and improve a frontend framework.
‣ CSS‣ Reset your CSS – The smart way™
‣ CSS breadcrumbs
‣ Modular layout
![Page 12: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/12.jpg)
Frontend framework
‣ Javascript
‣ Performance
‣ Build process
![Page 13: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/13.jpg)
Reset your CSS– The smart way™
![Page 14: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/14.jpg)
CSS Reset
‣ Most sites need some form of CSS reset.
‣ Let’s focus on large scale sites.
![Page 15: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/15.jpg)
‣ Option 1: gobal whitespace reset
CSS Reset
* { margin: 0; padding: 0; }
![Page 16: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/16.jpg)
CSS Reset
‣ Bad idea‣ There is often a good reason for the
default styling of html elements, don’t neglect it.
‣ It’s way too minimal.
![Page 17: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/17.jpg)
CSS Reset
‣ Option 2: one of the ‘presets’‣ Eric Meyer
‣ YUI reset
‣ Tantek Celik
‣ ...
![Page 18: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/18.jpg)
CSS Reset
‣ Good, but you might want to tweak here and there:‣ drop elements you never need
‣ add site-specific needs
‣ Use them as a starting point.
![Page 19: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/19.jpg)
CSS Reset
‣ Option 3: make your own‣ built for our own needs, our own
practical research
‣ never ‘finished’
![Page 20: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/20.jpg)
CSS Reset
html { min-height: 100%; }body { font-size: 76%; line-height: 1.5em; }body, form, ol, ul, dl, li, dt, dd, td, th, tr { margin: 0; padding: 0; }h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0 0 1em 0; padding: 0; }ul { list-style: none; }ol { margin-bottom: 1em; }ol li { margin-left: 2em; }img { border: 0; }fieldset { margin: 0; padding: 0; border: 0; }input, select, textarea { font-size: 100%; vertical-align: middle; }table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }th { text-align: right; }address { font-style: normal; }a:focus { outline: 0; }
![Page 21: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/21.jpg)
CSS Reset
‣ lists
‣ because most lists in our HTML aren’t supposed to look like lists
‣ although they are lists, semantically speaking
ul { list-style: none; }li { margin: 0; padding: 0; }
![Page 22: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/22.jpg)
CSS Reset
ul.bullet { margin: 0 0 1em 0; padding: 0 0 0 1.5em; } ul.bullet li { list-style: disc; padding: 0 0 0.2em 0; }ul.circle { margin: 0 0 1em 0; padding: 0 0 0 1.5em; } ul.circle li { list-style: circle; padding: 0 0 0.2em 0; }
ul.square { margin: 0 0 1em 0; padding: 0 0 0 1.5em; } ul.square li { list-style: square; padding: 0 0 0.2em 0; }ul.padded li { padding: 0 0 0.4em 0; }ul.xtraPadded li { padding: 0 0 1em 0; }
![Page 23: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/23.jpg)
CSS Reset
‣ lists (continued)‣ so we can use
‣ they may not be semantical, but the thing works
<ul class="square xtraPadded">
![Page 24: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/24.jpg)
CSS Reset
‣ form styles‣ don’t reset them too much!
![Page 25: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/25.jpg)
CSS Reset
‣ tables
‣ remember, tables aren’t all that bad
‣ so you don't have to fill table cells with just to get them to render a background or border
table { empty-cells: show; }
![Page 26: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/26.jpg)
CSS Reset
‣ focus
‣ removes the dotted border around clicked links
a:focus { outline: 0; }
![Page 27: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/27.jpg)
CSS Reset
‣ focus (continued)‣ annoying when using AJAX for example
‣ like on block level links that have large click areas
‣ accessibility issue?(keyboard navigation - we ignored it)
![Page 28: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/28.jpg)
CSS Breadcrumbs
![Page 29: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/29.jpg)
CSS Breadcrumbs
‣ What if CSS could ‘know’ on each page where we are in our navigation tree?
‣ like a ‘CSS breadcrumb’
![Page 30: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/30.jpg)
CSS Breadcrumbs
‣ Let’s take advantage of the ‘C’ in CSS: cascading
‣ our PHP code is structured in modules and submodules, which closely follow the navigation
![Page 31: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/31.jpg)
CSS Breadcrumbs
![Page 32: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/32.jpg)
CSS Breadcrumbs
<body><body id="{__module}" class="{__subModule}">
![Page 33: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/33.jpg)
CSS Breadcrumbs
‣ so I can do stuff like this in css:
body#explore.clans .avatar { ... }
body#register p { ... }
![Page 34: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/34.jpg)
CSS Breadcrumbs
‣ effectively eliminates the need to create extra classes or id’s in quite a number of cases
‣ also useful to style current path in navigation
![Page 35: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/35.jpg)
Modular layout
![Page 36: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/36.jpg)
Modular layout
‣ Two things‣ layout blocks
‣ ‘smart’ classes
![Page 37: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/37.jpg)
Modular layout
‣ layout blocks‣ What interface/layout elements do we
use more than once?
‣ many, if not most of them
‣ so let’s make them as flexible as possible
![Page 38: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/38.jpg)
Modular layout
.filter
![Page 39: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/39.jpg)
Modular layout
table.data
![Page 40: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/40.jpg)
Modular layout
.contentSideBox
![Page 41: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/41.jpg)
Modular layout
‣ but also: less obvious blocks‣ avatars
‣ with subclasses like male, female, brand, online, away, small, medium, ..
‣ lists of items
‣ photoList, photoSetList, blogList, profileList, videoList, eventsList, ...
![Page 42: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/42.jpg)
Modular layout
‣ ‘smart’ classes‣ taking advantage of cascading, multiple
classes (beware of IE!)
‣ you can count on them being available on any page
![Page 43: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/43.jpg)
Modular layout
‣ ‘smart’ classes‣ swapUnderline
‣ dimmed
‣ empty
‣ iconized links: addItem, deleteItem, manage, setItem, checkItem, denyItem, ...
![Page 44: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/44.jpg)
Modular layout
‣ multiple advantages of modular layouts‣ obvious reasons
‣ smaller files
‣ less css to manage
‣ faster page loads
![Page 45: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/45.jpg)
Modular layout
‣ but also:‣ very quick production process for new
pages
‣ less cross browser issues
![Page 46: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/46.jpg)
Javascript architecture
![Page 47: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/47.jpg)
Javascript architecture
‣ We have ... ‣ Libraries
‣ Re-usable components
‣ ‘Triggers’
![Page 48: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/48.jpg)
Javascript architecture
‣ Libraries‣ Because you want to write Javascript,
not test browsers
![Page 49: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/49.jpg)
Javascript architecture
‣ Reusable Components ‣ JS-’classes’
‣ make them do one single thing
‣ provide hooks for extending
‣ configurable
![Page 50: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/50.jpg)
Javascript architecture
‣ ‘Triggers’‣ Keep the code that initializes your in-
page widgets seperated
![Page 51: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/51.jpg)
Nice,but what about performance?
![Page 52: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/52.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
BOOM!
![Page 53: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/53.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
Designers?
![Page 54: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/54.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 55: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/55.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 56: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/56.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 57: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/57.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 58: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/58.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 59: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/59.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 60: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/60.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 61: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/61.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 62: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/62.jpg)
Frontend performance
‣ Some lessons learned‣ Sprites are your friends
‣ Don’t try to learn IE6 min-height / max-height with a simple CSS expression
‣ Less DOM-elements? Start from clean, semantic markup
![Page 63: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/63.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
Scripters?
![Page 64: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/64.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 65: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/65.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 66: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/66.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 67: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/67.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 68: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/68.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 69: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/69.jpg)
Frontend performance
‣ Some lessons learned‣ It’s hard to keep all scripts at the
bottom.
‣ Minimal JS in <head>, with some configuration and a function queue.
‣ Ad-providers and trackers can be PITA.
‣ Cache your referenced DOM-elements
![Page 70: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/70.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
IT Dept.?
![Page 71: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/71.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 72: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/72.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 73: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/73.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 74: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/74.jpg)
Make Fewer HTTP Requests - Use a Content Delivery Network - Add an Expires Header - Gzip Components - Put CSS at the Top - Move Scripts to the Bottom - Avoid CSS Expressions - Make JavaScript and CSS External - Reduce DNS Lookups - Minify JavaScript - Avoid Redirects - Remove Duplicate Scripts - Configure ETags - Make Ajax Cacheable - Flush the buffer early - Use GET for AJAX requests - Post-load components - Preload components - Reduce the number of DOM elements - Split components across domains - Minimize the number of iframes - No 404s - Reduce cookie size - Use cookie-free domains for components - Minimize DOM access - Develop smart event handlers - Choose <link> over @import - Avoid filters - Optimize images - Optimize CSS sprites - Don’t scale images in HTML - Make favicon.ico small and cacheable - Keep components under 25K - Pack components into a multipart document
![Page 75: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/75.jpg)
Frontend performance
‣ Some lessons learned‣ CDN’s do great things, and make good
money
‣ Far future Expires header;
‣ and then you want to change crossdomain.xml
‣ Cookieless domain: netlogstatic.com
‣ Set cookies for the right subdomain!
![Page 76: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/76.jpg)
Frontend performance
‣ Some lessons learned (continued)‣ setcookie($name, urlencode
(serialize($value))); was easy, but mind the size!
![Page 77: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/77.jpg)
documented & readiblevs.
small
![Page 78: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/78.jpg)
multiple manageable filesvs.
reduce http requests
![Page 79: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/79.jpg)
easyvs.
fast
![Page 80: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/80.jpg)
development vs.
production
![Page 81: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/81.jpg)
different environments have different needs
![Page 82: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/82.jpg)
you needa frontend build process
![Page 83: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/83.jpg)
ours?a simple bash script
![Page 84: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/84.jpg)
‣ Combine files
‣ Identify most included files and define groups
Frontend build process
php -d include_path="$src/v$major.$minor/comcore-mosquito" << __EOF__<?php JavascriptFiles::groupFiles ("$frontend"); StyleSheetFiles::groupFiles ("$frontend");?>__EOF__
![Page 85: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/85.jpg)
‣ Minify
‣ YUI Compressor minifies CSS and JS
‣ significant size reduction
‣ + even spots errors ...
Frontend build process
java -jar lib/yuicompressor-2.3.3.jar --charset utf-8 -o "development.js" "production.js"
![Page 86: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/86.jpg)
‣ Optimize images
‣ Strip comments, color pallette improvements, ...
Frontend build process
optipng src.jpg dest.jpg
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
![Page 87: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/87.jpg)
Frontend build process
‣ Source Code Management‣ Tags the code base
‣ Get it live
‣ Bumps a version number ‣ Forces CDN/Browser cache refresh
![Page 88: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/88.jpg)
Frontend build process
‣ Wishlist‣ Bump build no. per file
‣ Minifying inline css/js
‣ Inline inclusion of really small files
‣ Inline include of js/css on primed cache visit, load external files after page load
![Page 89: Get Your Frontend Sorted (Barcamp Gent 2008)](https://reader035.vdocument.in/reader035/viewer/2022081400/555a7c26d8b42abb628b4808/html5/thumbnails/89.jpg)
That’s all folks!
‣ We're always searching for good developers at Netlog.