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 ModeFor 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 ≈ per week!418 GB

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 DEFLATEDeflateFilterNote ratioSetEnvIfNoCase Request_URI \.(?:gif|jpe?g|PNG)$ \ no-gzip dont-varySetEnvIfNoCase Request_URI \ \.(?:exe|t?gz|zip|bz2|sit|rar)$ \ no-gzip dont-varySetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

Expires headers:

• Apache: mod_expires

• IIS 7: HTTP Expires

# Alternative 1

ExpiresActive OnExpiresByType 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 OnExpiresDefault "access plus 3 days

Setting/removing ETags:

• Apache: FileETag MTime Sizealternatively 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)

• DOM Level 2 Range (subtests 7-11)

• Content-Type: image/png; text/plain (subtest 14, 15)

• <object> handling and HTTP status codes (subtest 16)

• DOM Level 2 Core (subtests 17, 21)

• DOM Level 2 Events (subtests 17, 30-32)

• CSS Selectors (subtests 33-40)

• DOM Level 2 Style (subtest 45)

• DOM Level 2 HTML (subtest 60)

• DOM Level 2 Views

• ECMAScript GC (subtests 26-27)

• Unicode 5.0 UTF-16 (subtest 68)

• Unicode 5.0 UTF-8 (subtest 70)

• HTML 4.0 Transitional (subtest 71)

• HTML 4.01 Strict

• SVG 1.1 (subtests 74, 78)

• SVG 1.1 Fonts (subtests 77, 79)

• SMIL 2.1 (subtests 75-76)

• ECMAScript Conformance (subtests 81-96)

• Data URI scheme (subtest 97)

• XHTML 1.0 Strict (subtest 98)

• HTTP 1.1 Protocol

• Safari 3.2.3: 77/100 4 beta: 100/100

• Chrome 1.0: 79/100 2 beta: 100/100

• Opera 9.64: 85/100 10 beta: 100/100

• Firefox 3.0.10: 71/100 3.5 beta: 94/100

• Internet Explorer 8: 20/100 No beta

Doctypes & rendering

Rendering by voting

IE8 and the X-UA-Compatible situation

Multiple IE

• Web standards

• Semantics

• Separating layers

• Unobtrusive JavaScript

• Performance

Summary

Robert Nymanrobert@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/