Get Your Frontend Sorted

Tips & tricks for css and javascript maintenance. Given at Barcamp Ghent, 2008.

Transcript

1. GET YOUR FRONTEND SORTED Jurriaan Persyn Lennart Schoors BarCampGent 29 March 2008
2. Netlog?
3. Netlog? ‣ some basic, quick facts ‣ largest European social network site ‣ 33 million members ‣ 19 languages ‣ since 2001 ‣ based in Gent, Belgium
4. 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
5. So who’s doing CSS and JS?
6. Well, most of them ...
7. Does that make the *.css/js-files a bunch of hacks and patches? Well, maybe, but let’s dream...
8. Frontend framework
9. Frontend framework ‣ Structured ‣ Re-usable components ‣ Documented
10. 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
11. 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
12. Frontend framework ‣ Javascript ‣ Performance ‣ Build process
13. Reset your CSS – The smart way™
14. CSS Reset ‣ Most sites need some form of CSS reset. ‣ Let’s focus on large scale sites.
15. ‣ Option 1: gobal whitespace reset CSS Reset * { margin: 0; padding: 0; }
16. 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.
17. CSS Reset ‣ Option 2: one of the ‘presets’ ‣ Eric Meyer ‣ YUI reset ‣ Tantek Celik ‣ ...
18. 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.
19. CSS Reset ‣ Option 3: make your own ‣ built for our own needs, our own practical research ‣ never ‘finished’
20. 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; }
21. 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; }
22. 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; }
23. CSS Reset ‣ lists (continued) ‣ so we can use ‣ they may not be semantical, but the thing works <ul class="square xtraPadded">
24. CSS Reset ‣ form styles ‣ don’t reset them too much!
25. CSS Reset ‣ tables ‣ remember, tables aren’t all that bad ‣ so you don't have to fill table cells with &nbsp; just to get them to render a background or border table { empty-cells: show; }
26. CSS Reset ‣ focus ‣ removes the dotted border around clicked links a:focus { outline: 0; }
27. 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)
28. CSS Breadcrumbs
29. CSS Breadcrumbs ‣ What if CSS could ‘know’ on each page where we are in our navigation tree? ‣ like a ‘CSS breadcrumb’
30. 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
31. CSS Breadcrumbs
32. CSS Breadcrumbs <body> <body id="{__module}" class="{__subModule}">
33. CSS Breadcrumbs ‣ so I can do stuff like this in css: body#explore.clans .avatar { ... } body#register p { ... }
34. 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
35. Modular layout
36. Modular layout ‣ Two things ‣ layout blocks ‣ ‘smart’ classes
37. 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
38. Modular layout .filter
39. Modular layout table.data
40. Modular layout .contentSideBox
41. 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, ...
42. Modular layout ‣ ‘smart’ classes ‣ taking advantage of cascading, multiple classes (beware of IE!) ‣ you can count on them being available on any page
43. Modular layout ‣ ‘smart’ classes ‣ swapUnderline ‣ dimmed ‣ empty ‣ iconized links: addItem, deleteItem, manage, setItem, checkItem, denyItem, ...
44. Modular layout ‣ multiple advantages of modular layouts ‣ obvious reasons ‣ smaller files ‣ less css to manage ‣ faster page loads
45. Modular layout ‣ but also: ‣ very quick production process for new pages ‣ less cross browser issues
46. Javascript architecture
47. Javascript architecture ‣ We have ... ‣ Libraries ‣ Re-usable components ‣ ‘Triggers’
48. Javascript architecture ‣ Libraries ‣ Because you want to write Javascript, not test browsers
49. Javascript architecture ‣ Reusable Components ‣ JS-’classes’ ‣ make them do one single thing ‣ provide hooks for extending ‣ configurable
50. Javascript architecture ‣ ‘Triggers’ ‣ Keep the code that initializes your in- page widgets seperated
51. Nice, but what about performance?
52. 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!
53. 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?
54. 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
55. 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
56. 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
57. 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
58. 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
59. 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
60. 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
61. 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
62. 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
63. 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?
64. 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
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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.?
71. 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
72. 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
73. 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
74. 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
75. 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!
76. Frontend performance ‣ Some lessons learned (continued) ‣ setcookie($name, urlencode (serialize($value))); was easy, but mind the size!
77. documented & readible vs. small
78. multiple manageable files vs. reduce http requests
79. easy vs. fast
80. development vs. production
81. different environments have different needs
82. you need a frontend build process
83. ours? a simple bash script
84. ‣ 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__
85. ‣ 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"
86. ‣ Optimize images ‣ Strip comments, color pallette improvements, ... Frontend build process optipng src.jpg dest.jpg jpegtran -copy none -optimize -perfect src.jpg dest.jpg
87. Frontend build process ‣ Source Code Management ‣ Tags the code base ‣ Get it live ‣ Bumps a version number ‣ Forces CDN/Browser cache refresh
88. 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
89. That’s all folks! ‣ We're always searching for good developers at Netlog. ‣ lennart@netlog.com ‣ jurriaan@netlog.com