-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathabout.html
216 lines (213 loc) · 9.36 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js non-ie"> <!--<![endif]-->
<head>
<link href="css/main.css" media="screen" rel="stylesheet" />
<meta charset="utf-8" />
<meta content="" name="keywords"/>
<meta content="" name="description"/>
<title>Interactive Development Best Practices</title>
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<script src="js/modernizr.js"></script>
<script src="js/curl.js"></script>
<script>
define.amd.jQuery = true;
curl(
{
baseUrl: "js",
paths: {
"jquery" : "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min"
}
},
[
"jquery",
"jquery.easing.1.3",
"domReady!",
"rainbow",
"main"
]
);
</script>
</head>
<body>
<div class="main-container">
<header>
<hgroup>
<h1>Interactive Development Best Practices</h1>
<h2><time datetime="20012-04-29">April 29, 2012</time></h2>
</hgroup>
<p>
Documenting best practices for interactive development is an exhaustive task, and is one that, if done effectively, would fill the pages of
several books. The purpose of this guide is not to provide an all-encompassing list of best practices, but to highlight many of the most
important components of a stable, high performance web page.
</p>
</header>
<nav>
<h1>Navigate This Document</h1>
<ul>
<li>
<a class="top-level" href="index.html" title="HTML">HTML</a>
<ul class="second-level">
<li><a href="#doctype" title="Doctype">Doctype</a></li>
<li>
<a href="#HTML5" title="HTML5">HTML5</a>
<ul>
<li><a href="#HTML5-shim" title="Making HTML5 Work">Making HTML5 Work</a></li>
<li><a href="#HTML5-friends" title="HTML5 and Friends">HTML5 and Friends</a></li>
</ul>
</li>
<li><a href="#XHTML-syntax" title="XHTML Syntax">XHTML Syntax</a></li>
<li><a href="#validation" title="HTML Validation">HTML Validation</a></li>
<li><a href="#deprecated" title="Avoid Deprecated Elements">Avoid Deprecated Elements</a></li>
<li>
<a href="#semantics" title="Semantics">Semantics</a>
<ul>
<li><a href="#document-outline" title="Document Outline">Document Outline</a></li>
<li><a href="#header-tags" title="Header Tags in HTML5 and XHTML">Header Tags in HTML5 and XHTML</a></li>
<li><a href="#tables-for-data" title="Use Tables for Tabular Data">Use Tables for Tabular Data</a></li>
<li><a href="#avoid-unnecessary-elements" title="Avoid Unnecessary Elements">Avoid Unnecessary Elements</a></li>
</ul>
</li>
<li><a href="#unnecessary-classes" title="Unnecessary Classes and IDs">Unnecessary Classes and IDs</a></li>
<li><a href="#image-tags" title="Image Tags">Image Tags</a></li>
<li><a href="#miscellaneous-guidelines" title="Miscellaneous Guidelines">Miscellaneous Guidelines</a></li>
</ul>
</li>
<li>
<a class="top-level" href="images.html" title="Images">Images</a>
<ul class="second-level">
<li><a href="#image-size" title="Image Size">Image Size</a></li>
<li><a href="#image-format" title="Image Formats">Image Formats</a></li>
<li><a href="#CSS-sprites" title="Leverage CSS Sprites">Leverage CSS Sprites</a></li>
</ul>
</li>
<li>
<a class="top-level" href="css.html" title="CSS">CSS</a>
<ul class="second-level">
<li><a href="#inline-styles" title="Inline Styles">Inline Styles</a></li>
<li><a href="#external-css" title="Place All CSS Within the <head>">Place All CSS Within the <code><head></code></a></li>
<li><a href="#combine-stylesheets" title="Combine CSS Files">Combine CSS Files</a></li>
<li><a href="#link-vs-import" title="Use <link> to Include CSS, Not @import">Use <code><link></code> to Include CSS, Not <code>@import</code></a></li>
<li><a href="#reset" title="Use a CSS Reset">Use a CSS Reset</a></li>
<li><a href="#font-sizes" title="Specifying Font Sizes">Specifying Font Sizes</a></li>
<li><a href="#writing-good-selectors" title="Writing Good Selectors">Writing Good Selectors</a></li>
<li><a href="#shorthand" title="Shorthand">Shorthand</a></li>
</ul>
</li>
<li>
<a class="top-level" href="javascript.html" title="JavaScript">JavaScript</a>
<ul class="second-level">
<li><a href="#use-external-js" title="Restrict JavaScript to External Files">Restrict JavaScript to External Files</a></li>
<li>
<a href="#place-external-js" title="Placement of External JavaScript Files">Placement of External JavaScript Files</a>
<ul>
<li><a href="#end-of-page" title="Include JavaScript near the end of the page">Include JavaScript near the end of the page</a></li>
<li><a href="#js-loader" title="Use a JavaScript loader">Use a JavaScript loader</a></li>
</ul>
</li>
<li><a href="#use-jquery" title="Use jQuery">Use jQuery</a></li>
<li><a href="#organize-code" title="Organize Your Code">Organize Your Code</a></li>
<li><a href="#general-js" title="General Coding Practices">General Coding Practices</a></li>
</ul>
</li>
<li class="active">
<a class="top-level" href="about.html" title="About">About</a>
<ul class="second-level">
<li><a href="#summary" title="Purpose">Purpose</a></li>
<li><a href="#goals" title="Goals">Goals</a></li>
<li><a href="#contributors" title="Contributors">Contributors</a></li>
</ul>
</li>
</ul>
</nav>
<section id="HTML">
<h1>About</h1>
<ul class="recs">
<li>
<h2 id="summary">What Is This About?</h2>
<p>
In short, this documentation aims to encourage the production of <a href="http://books.google.com/books?id=_i6bDeoCQzsC&printsec=frontcover&dq=clean+code&hl=en&sa=X&ei=nzCdT6HyCsqM0QHP9tmKDw&ved=0CDYQ6AEwAA#v=onepage&q=clean%20code&f=false">clean code</a>.
</p>
<p>
As Bjarne Stroustrup, inventor of the C++ language put it:
</p>
<blockquote cite="http://books.google.com/books?id=_i6bDeoCQzsC&lpg=PP1&dq=clean%20code&pg=PT49#v=onepage&q&f=false">
I like my code to be elegant and efficient. The logic should be straightforward to make it hard
for bugs to hide, the dependancies minimal to ease maintenance, error handling complete
according to an articulated strategy, and performance close to optimal so as not to tempt
people to make the code messy with unprincipled optimizations. Clean code does one
thing well.
</blockquote>
<p>
It is our responsibility as professional programmers to ensure that all code that we produce
meets these same standards.
</p>
</li>
<li>
<h2 id="goals">Goals of this Initiative</h2>
<p>
Our goal is to provide industry driven best practices that help teams deliver consistent, high quality code.
</p>
<p>
In the end, each team should be able to to follow a consistent coding style with conventions that:
</p>
<ul>
<li>
<p>
Ease the maintenance of legacy code
</p>
</li>
<li>
<p>
Lower the risk of software bugs and errors
</p>
</li>
<li>
<p>
Ensure optimized page load, high performance, and maintainable code
</p>
</li>
</ul>
</li>
<li>
<h2 id="contributors">Contributors</h2>
<p>
This documentation was originally compiled from multiple sources on the subject of development standards, including
<a href="http://na.isobar.com/standards/" title="Isobar's Front-end Code Standards & Best Practices">Isobar's Front-end Code Standards & Best Practices</a>,
<a href="https://developers.google.com/speed/docs/best-practices/rules_intro" title="Google's Web Performance Best Practices">Google's Web Performance Best Practices</a>,
<a href="http://developer.yahoo.com/performance/rules.html" title="Yahoo's Developer Network">Yahoo's Developer Network</a>,
and <a href="https://developer.mozilla.org/en-US/" title="Mozilla's Developer Network">Mozilla's Developer Network</a> (among many others).
</p>
<p>
This work would not exist without the individual contributions of these fine human beings:
</p>
<ul>
<li>
<p>
<strong>Joe Morgan</strong>, Manager of Interactive Development at SapientNitro (creator and editor)
</p>
</li>
<li>
<p>
<strong>Alvin Crespo</strong>, Senior Associate, Interactive Development at SapientNitro (contributor)
</p>
</li>
<li>
<p>
<strong>Rob Larsen</strong>, Senior Manager of Interactive Development at Sapient Global Markets (resident guru)
</p>
</li>
<li>
<p>
<strong>Milos Veljkovic</strong>, Senior Associate, Interactive Development at SapientNitro (contributor)
</p>
</li>
</ul>
</li>
</ul>
</section>
</div>
</body>
</html>