get your frontend sorted (barcamp gent 2008)
DESCRIPTION
Lessons learned from working on a single, large scale CSS & JS frontend (at Netlog). By Jurriaan Persyn & Lennart Schoors.TRANSCRIPT
GET YOUR FRONTEND SORTED
Jurriaan PersynLennart SchoorsBarCampGent 29 March 2008
Netlog?
Netlog?
‣ some basic, quick facts‣ largest European social network site
‣ 33 million members
‣ 19 languages
‣ since 2001
‣ based in Gent, Belgium
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
So who’s doingCSS and JS?
Well, most of them ...
Does that make the *.css/js-files a bunch of
hacks and patches?
Well, maybe, but let’s dream...
Frontend framework
Frontend framework
‣ Structured
‣ Re-usable components
‣ Documented
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
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
Frontend framework
‣ Javascript
‣ Performance
‣ Build process
Reset your CSS– The smart way™
CSS Reset
‣ Most sites need some form of CSS reset.
‣ Let’s focus on large scale sites.
‣ Option 1: gobal whitespace reset
CSS Reset
* { margin: 0; padding: 0; }
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.
CSS Reset
‣ Option 2: one of the ‘presets’‣ Eric Meyer
‣ YUI reset
‣ Tantek Celik
‣ ...
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.
CSS Reset
‣ Option 3: make your own‣ built for our own needs, our own
practical research
‣ never ‘finished’
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; }
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; }
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; }
CSS Reset
‣ lists (continued)‣ so we can use
‣ they may not be semantical, but the thing works
<ul class="square xtraPadded">
CSS Reset
‣ form styles‣ don’t reset them too much!
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; }
CSS Reset
‣ focus
‣ removes the dotted border around clicked links
a:focus { outline: 0; }
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)
CSS Breadcrumbs
CSS Breadcrumbs
‣ What if CSS could ‘know’ on each page where we are in our navigation tree?
‣ like a ‘CSS breadcrumb’
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
CSS Breadcrumbs
CSS Breadcrumbs
<body><body id="{__module}" class="{__subModule}">
CSS Breadcrumbs
‣ so I can do stuff like this in css:
body#explore.clans .avatar { ... }
body#register p { ... }
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
Modular layout
Modular layout
‣ Two things‣ layout blocks
‣ ‘smart’ classes
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
Modular layout
.filter
Modular layout
table.data
Modular layout
.contentSideBox
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, ...
Modular layout
‣ ‘smart’ classes‣ taking advantage of cascading, multiple
classes (beware of IE!)
‣ you can count on them being available on any page
Modular layout
‣ ‘smart’ classes‣ swapUnderline
‣ dimmed
‣ empty
‣ iconized links: addItem, deleteItem, manage, setItem, checkItem, denyItem, ...
Modular layout
‣ multiple advantages of modular layouts‣ obvious reasons
‣ smaller files
‣ less css to manage
‣ faster page loads
Modular layout
‣ but also:‣ very quick production process for new
pages
‣ less cross browser issues
Javascript architecture
Javascript architecture
‣ We have ... ‣ Libraries
‣ Re-usable components
‣ ‘Triggers’
Javascript architecture
‣ Libraries‣ Because you want to write Javascript,
not test browsers
Javascript architecture
‣ Reusable Components ‣ JS-’classes’
‣ make them do one single thing
‣ provide hooks for extending
‣ configurable
Javascript architecture
‣ ‘Triggers’‣ Keep the code that initializes your in-
page widgets seperated
Nice,but what about performance?
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!
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?
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
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
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
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
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
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
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
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
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
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?
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
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
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
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
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
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
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.?
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
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
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
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
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!
Frontend performance
‣ Some lessons learned (continued)‣ setcookie($name, urlencode
(serialize($value))); was easy, but mind the size!
documented & readiblevs.
small
multiple manageable filesvs.
reduce http requests
easyvs.
fast
development vs.
production
different environments have different needs
you needa frontend build process
ours?a simple bash script
‣ 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__
‣ 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"
‣ Optimize images
‣ Strip comments, color pallette improvements, ...
Frontend build process
optipng src.jpg dest.jpg
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
Frontend build process
‣ Source Code Management‣ Tags the code base
‣ Get it live
‣ Bumps a version number ‣ Forces CDN/Browser cache refresh
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
That’s all folks!
‣ We're always searching for good developers at Netlog.