Get Your Frontend Sorted

GET YOUR FRONTEND SORTED Jurriaan Persyn Lennart Schoors BarCampGent 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 doing CSS 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.

CSS Reset ‣

Option 1: gobal whitespace 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 ul { list-style: none; } li { margin: 0; padding: 0; } ‣

because most lists in our HTML aren’t supposed to look like lists

‣

although they are lists, semantically speaking

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

CSS Reset ‣

form styles ‣

don’t reset them too much!

CSS Reset ‣

tables table { empty-cells: show; } ‣

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

CSS Reset ‣

focus a:focus { outline: 0; } ‣

removes the dotted border around clicked links

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



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 inpage 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 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 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 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 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 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 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 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 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 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 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 / maxheight 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 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 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 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 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 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 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 , 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 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 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 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 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 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 & readible vs. small

multiple manageable files vs. reduce http requests

easy vs. fast

development vs. production

different environments have different needs

you need a frontend build process

ours? a simple bash script

Frontend build process ‣

Combine files

php -d include_path="$src/v$major.$minor/ comcore-mosquito" << __EOF__ __EOF__ ‣

Identify most included files and define groups

Frontend build process ‣

Minify

java -jar lib/yuicompressor-2.3.3.jar --charset utf-8 -o "development.js" "production.js" ‣

YUI Compressor minifies CSS and JS ‣

significant size reduction

‣

+ even spots errors ...

Frontend build process ‣

Optimize images

optipng src.jpg dest.jpg jpegtran -copy none -optimize -perfect src.jpg dest.jpg ‣

Strip comments, color pallette improvements, ...

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.

‣

[email protected]

‣

[email protected]