Modern web
development

• Web standards
• Semantics
• Separating layers
• Unobtrusive JavaScript
• Performance

Web standards

What are web standards?

There aren’t any Web Standards,
only Recommendations

“A W3C Recommendation is a specification
or set of guidelines that, after extensive
consensus-building, has received the
endorsement of W3C Members and the
Director. W3C recommends the wide
deployment of its Recommendations.”
– W3C

• Valid HTML/XHTML code
• Semantically correct code
• Separation of content, presentation
and interaction

DOCTYPEs decide rendering mode

• Quirks Mode
• Standards Mode
(HTML 5: No Quirks Mode)
• Almost Standards Mode
(HTML 5: "Limited Quirks Mode")
• IE 7 Mode
("mostly" a frozen copy of the mode that was the standards mode in IE7)
• XML Mode
For the application/xhtml+xml Content-Type (not available in Internet
Explorer)

• Strict doctypes render Standards Mode
• Transitional XHTML doctypes render
Almost Standards Mode
• Other/No doctypes render Quirks Mode

Activating Browser Modes with Doctype

Semantics

“I have a dream for the Web [in which
computers] become capable of analyzing all
the data on the Web – the content, links, and
transactions between people and
computers.”
– Tim Berners-Lee, 1999

• Use meaningful names and elements
• Applies to all code

<table cellspacing="0" cellpadding="0">
<tr>
<td class="heading">SWDC</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>

<div class="heading">SWDC</div>
<div class="content">Content</div>

<h1>SWDC</h1>
<p>Content</p>

<h2 class="h3">News</h2>

<h2 class="additional-content">News</h2>

<div class="additional-content">
<h2>News</h2>
</div>

<div class="left">
Navigation
</div>
<div class="right">
Content
</div>

<div class="navigation">
Navigation
</div>
<div class="main-content">
Content
</div>

Separating layers

• HTML (content)
• CSS (presentation)
• JavaScript (interaction)

Why separating layers?

• Code maintainability
• Overview
• Structure
• Performance

<div style="color: red">
Very important
</div>

<div class="important">
Very important
</div>

Unobtrusive JavaScript

• No JavaScript code in the HTML code
• No inline events on elements
• Progressive enhancement

<a href="javascript:doStuff()">
Magic
</a>

<a href="#" onclick="doStuff(); return
false">
Magic
</a>

<a href="stuff.html" onclick="doStuff();
return false">
Magic
</a>

<a href="stuff.html" class="magic">
Magic
</a>

window.onload = function () {
var magic =
getElementsByClassName("magic");
for (var i=0, l=magic.length; i<l; i++) {
magic.onclick = function () {
doStuff();
return false;
};
}
};

JavaScript-dependent elements should be
generated with JavaScript

var link = document.createElement("a");
link.innerHTML = "Get more content";
link.onclick = function () {
// JavaScript magic
};
document.body.appendChild(link);

Why it should work
without JavaScript

A little case study of Sony Ericsson

JavaScript available

No JavaScript

<!-- SonyEricsson logo code -->
<div id="selogo" class="floatleft"
onclick="document.location.href='/cws/
home?lc=sv&cc=se';" style="cursor:
pointer;">
<img src="/cws/images/spacer.gif"
style="height: 30px; width: 155px;"
alt="Sony Ericsson"/>
</div>

JavaScript available

No JavaScript

Google result

Performance

• CSS sprites
• Image optimizing
• gzip
• Expires headers
• ETags
• Deployment configuration

CSS Sprites

• Combine several images into one
• Position through CSS

.save {
background: url(sprite.png) no-repeat 0 0;
}
.delete {
background: url(sprite.png) no-repeat 0 -100px;
}
.info {
background: url(sprite.png) no-repeat 0 -200px;
}

Upload images, get sprite and CSS:
CSS Sprite Generator

Image optimizing

• Combines many open-source optimizers
• Lossless compression
• Removing superfluous metadata

DN.se

DN.se start page:
Could save 370 kb/unique page load
Has 1 186 730 unique visitors/week
370 * 1 186 730 ≈ 418 GB per week!

smusher
• Commandline through smush.it API
for whole folders

Smush.it now part of YSlow for Firebug

gzip:
• Apache: mod_deflate
• IIS 7: HTTP Compression

# Alternative 1
AddOutputFilterByType DEFLATE text/html text/
plain text/css text/javascript application/x-
javascript
# Alternative 2
SetOutputFilter DEFLATE
DeflateFilterNote ratio
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|PNG)$
no-gzip dont-vary
SetEnvIfNoCase Request_URI
.(?:exe|t?gz|zip|bz2|sit|rar)$
no-gzip dont-vary
SetEnvIfNoCase Request_URI .pdf$ no-gzip dont-
vary

Expires headers:
• Apache: mod_expires
• IIS 7: HTTP Expires

# Alternative 1
ExpiresActive On
ExpiresByType text/css "access plus 3 days"
ExpiresByType application/x-javascript "access
plus 3 days"
ExpiresByType image/gif "access plus 3 days"
ExpiresByType image/png "access plus 3 days"
ExpiresByType image/jpeg "access plus 3 days"
# Alternative 2
ExpiresActive On
ExpiresDefault "access plus 3 days

Setting/removing ETags:
• Apache: FileETag MTime Size
alternatively FileETag none
• For IIS: Mdutil.exe

JavaScript deployment:
• Concatenating
• Minifying

Concatenating:
• cat jquery.js base.js > all.js
• Concatenate Text Files using C#

Minifying:
• JSMin
• YUI Compressor

Building Web Applications With Apache Ant

Autokatalogen.se

DN.se

Yahoo!
• Best Practices for Speeding Up
Your Web Site

Tools

Firebug

YSlow

HTML Validator

Inline Code Finder

Firefinder

Obstacles

Redmond...

Acid2 Test

• 31 October 2005:
Safari 2.0.2
• 28 March 2006:
Konqueror 3.5.2
• 20 June 2006:
Opera 9.0
• 17 June 2008:
Mozilla Firefox 3.0
• 19 March 2009:
Internet Explorer 8

Acid3 Test

• DOM Level 2 Traversal (subtests 1-6) • Unicode 5.0 UTF-16 (subtest 68)
• DOM Level 2 Range (subtests 7-11) • Unicode 5.0 UTF-8 (subtest 70)
• Content-Type: image/png; text/plain (subtest 14, 15) • HTML 4.0 Transitional (subtest 71)
• <object> handling and HTTP status codes (subtest 16) • HTML 4.01 Strict
• DOM Level 2 Core (subtests 17, 21) • SVG 1.1 (subtests 74, 78)
• DOM Level 2 Events (subtests 17, 30-32) • SVG 1.1 Fonts (subtests 77, 79)
• CSS Selectors (subtests 33-40) • SMIL 2.1 (subtests 75-76)
• DOM Level 2 Style (subtest 45) • ECMAScript Conformance (subtests 81-96)
• DOM Level 2 HTML (subtest 60) • Data URI scheme (subtest 97)
• DOM Level 2 Views • XHTML 1.0 Strict (subtest 98)
• ECMAScript GC (subtests 26-27) • HTTP 1.1 Protocol

• Safari • Firefox
3.2.3:
77/100
3.0.10:
71/100
4 beta:
100/100
3.5 beta:
94/100
• Chrome • Internet Explorer
1.0:
79/100
8:
20/100
2 beta:
100/100
No beta
• Opera
9.64:
85/100
10 beta:
100/100

Doctypes & rendering

Rendering by voting

IE8 and the X-UA-Compatible situation

Multiple IE

Summary
• Web standards
• Semantics
• Separating layers
• Unobtrusive JavaScript
• Performance

Robert Nyman
robert@robertnyman.com
robertnyman.com
Images:
http://www.flickr.com/photos/mringlein/316476217/
http://blog.tmcnet.com/blog/tom-keating/movabletype/movable-type-vs-wordpress-war-heats-up.asp
http://www.yardbarker.com/other_sports/articles/LIST_BEST_Players_to_ever_wear_the_number/292924
http://jimberkin.wordpress.com/2007/09/19/yet-another-reason-i-hate-lawyers/
http://share-sports.3ds.com/2008/03/31/philippe-fuchs-tunes-workouts-for-better-results-with-heart-rate-variability-monitoring/
http://hsivonen.iki.fi/doctype/ie8-mode.png
http://www.stalepopcorn.co.uk/competitions/win-stuff-the-neverending-story-on-dvd/