The document discusses key concepts in modern web development, focusing on web standards, semantics, and the importance of separating content, presentation, and interaction layers. It emphasizes unobtrusive JavaScript for better performance and maintainability, and highlights various techniques for optimizing web application performance, including CSS sprites, image optimization, and gzip compression. Additionally, it explores the use of doctype declarations for rendering modes and the significance of adhering to recommended web standards.

1. Modern web
development

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

4. Web standards

6. What are web standards?

7. There aren’t any Web Standards,
only Recommendations

8. “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

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

10. DOCTYPEs decide rendering mode

11. • 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)

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

13. Activating Browser Modes with Doctype

14. Semantics

15. “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

16. • Use meaningful names and elements
• Applies to all code

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

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

19. <h1>SWDC</h1>
<p>Content</p>

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

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

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

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

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

25. Separating layers

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

27. Why separating layers?

28. • Code maintainability
• Overview
• Structure
• Performance

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

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

31. Unobtrusive JavaScript

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

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

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

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

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

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

39. JavaScript-dependent elements should be
generated with JavaScript

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

41. Why it should work
without JavaScript

42. A little case study of Sony Ericsson

43. JavaScript available

44. No JavaScript

45. <!-- 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>

46. JavaScript available

47. No JavaScript

48. Google result

49. Performance

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

51. CSS Sprites

52. • Combine several images into one
• Position through CSS

54. .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;
}

55. Upload images, get sprite and CSS:
CSS Sprite Generator

56. Image optimizing

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

59. DN.se

60. 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!

61. smusher
• Commandline through smush.it API
for whole folders

62. Smush.it now part of YSlow for Firebug

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

64. # 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

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

66. # 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

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

68. JavaScript deployment:
• Concatenating
• Minifying

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

70. Minifying:
• JSMin
• YUI Compressor

71. Building Web Applications With Apache Ant

72. Autokatalogen.se

73. DN.se

74. Yahoo!
• Best Practices for Speeding Up
Your Web Site

75. Tools

76. Firebug

77. YSlow

78. HTML Validator

79. Inline Code Finder

80. Firefinder

81. Obstacles

82. Redmond...

83. Acid2 Test

84. • 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

85. Acid3 Test

86. • 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

87. • 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

88. Doctypes & rendering

89. Rendering by voting

91. IE8 and the X-UA-Compatible situation

93. Multiple IE

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

95. 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/