Get Your Frontend Sorted (Barcamp Gent 2008)

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


‣ We have ... ‣ Libraries

‣ Re-usable components

‣ ‘Triggers’


‣ Libraries‣ Because you want to write Javascript,

not test browsers


‣ Reusable Components ‣ JS-’classes’

‣ make them do one single thing

‣ provide hooks for extending

‣ configurable


‣ ‘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!


Designers?









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


Scripters?







‣ 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


IT Dept.?






‣ 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!


‣ 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 ...


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

‣ Optimize images

‣ Strip comments, color pallette improvements, ...


optipng src.jpg dest.jpg

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


‣ Source Code Management‣ Tags the code base

‣ Get it live

‣ Bumps a version number ‣ Forces CDN/Browser cache refresh


‣ 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]

mailto:[email protected]




Technology

Get Your Frontend Sorted (Barcamp Gent 2008)