forked from LeaVerou/inspire.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-en.html
executable file
·408 lines (359 loc) · 15.2 KB
/
index-en.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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Specification and Test Lifecycles</title>
<style>
/* Fonts courtesy of Exljbris and Font Squirrel */
@font-face {
font-family: 'MuseoSlab';
font-weight: normal;
font-style: normal;
src: url('fonts/Museo_Slab_500.eot');
src: local('Museo Slab 500'), local('MuseoSlab-500'), url('fonts/Museo_Slab_500.woff') format('woff'), url('fonts/Museo_Slab_500.otf') format('opentype'), url('fonts/Museo_Slab_500.svg#MuseoSlab-500') format('svg');
}
@font-face {
font-family: 'MuseoSlab';
font-weight: normal;
font-style: italic;
src: url('fonts/Museo_Slab_500italic.eot');
src: local('Museo Slab 500 Italic'), local('MuseoSlab-500Italic'), url('fonts/Museo_Slab_500_italic.woff') format('woff'), url('fonts/Museo_Slab_500_italic.otf') format('opentype'), url('fonts/Museo_Slab_500_italic.svg#MuseoSlab') format('svg');
}
@font-face {
font-family: 'MuseoSans';
font-weight: normal;
font-style: normal;
src: url('fonts/Museo_Sans_500.eot');
src: local('Museo Sans 500'), local('MuseoSans-500'), url('fonts/Museo_Sans_500.woff') format('woff'), url('fonts/Museo_Sans_500.otf') format('opentype'), url('fonts/Museo_Sans_500.svg#MuseoSans-500') format('svg');
}
@font-face {
font-family: 'MuseoSans';
font-weight: normal;
font-style: italic;
src: url('fonts/Museo_Sans_500italic.eot');
src: local('Museo Sans 500 Italic'), local('MuseoSans-500Italic'), url('fonts/Museo_Sans_500_italic.woff') format('woff'), url('fonts/Museo_Sans_500_italic.otf') format('opentype'), url('fonts/Museo_Sans_500_italic.svg#MuseoSans') format('svg');
}
</style>
<link href="slideshow.css" rel="stylesheet" />
<link href="theme.css" rel="stylesheet" />
<link href="talk.css" rel="stylesheet" />
<script src="prefixfree.min.js"></script>
</head>
<body data-duration="15">
<header id="intro" class="slide">
<p class="right" lang="ja"><a href="index.html">日本語</a></p>
<h1>Specification and Test Lifecycles</h1>
<p class="center">By Oli Studholme</p>
<p class="center"><a href="http://ia.net/">iA</a>, <a href="http://html5doctor.com/">HTML5 Doctor</a></p>
</header>
<section>
<header class="slide">
<h1>Specifications</h1>
</header>
<section class="slide" title="Why specs?">
<h2>Why specs?</h2>
<h3 class="important delayed center v-space"><em>Interoperability</em></h3>
<p class="presenter-notes">Without this we’re screwed. Remember the browser wars</p>
</section>
<section class="slide">
<h2>Where do specs come from?</h2>
<ul>
<li class="delayed">Implementors</li>
<li class="delayed">W3C, for example the CSSWG</li>
<li class="delayed">Interested people (for example, us)</li>
</ul>
<p class="presenter-notes">All three groups should be involved in a spec’s development</p>
</section>
<section class="slide">
<h2>Phases of spec process</h2>
<ol>
<li class="delayed">Editor’s Draft (ED)</li>
<li class="delayed">Working Draft (WD)</li>
<li class="delayed">Last Call Working Draft (LC, LCWD)</li>
<li class="delayed">Candidate Recommendation (CR)</li>
<li class="delayed">Proposed Recommendation (PR)</li>
<li class="delayed">Recommendation (REC)</li>
</ol>
<p class="right">(<a href="http://www.w3.org/Consortium/Process/tr.html">Ref</a>)</p>
</section>
<section class="slide">
<h2>Phases of spec process</h2>
<p class="center v-space">Recommendation = Specification = Standard</p>
</section>
<section class="slide">
<h3>Editor’s Draft (ED)</h3>
<ul class="delayed">
<li>Anyone can write one, but there’s no official backing yet</li>
<li>After the Working Group agrees to work on it, the Editor’s Draft is like the develop branch of a repo</li>
</ul>
<p class="presenter-notes">→ Exploring</p>
</section>
<section class="slide">
<h3>Working Draft (WD)</h3>
<ul class="delayed">
<li>The working group has agreed to work on the spec</li>
<li>The spec’s editors start fleshing out the spec and seeking feedback</li>
<li>The first one is “First Public Working Draft”</li>
</ul>
<p class="presenter-notes">→ Design phase</p>
</section>
<section class="slide">
<h3>Last Call Working Draft (LC, LCWD)</h3>
<ul class="delayed">
<li>The Working Draft is getting ready to implement, and anyone with issues should speak up now</li>
<li>A date is set to resolve outstanding issues by</li>
</ul>
<p class="presenter-notes">→ Transition</p>
</section>
<section class="slide">
<h3>Candidate Recommendation (CR)</h3>
<ul class="delayed">
<li>Tests are created ← that’s us!</li>
<li>Call for implementations: user agents start implementing and check against tests</li>
<li>Editors address any issues raised by tests or implementation</li>
<li>Specs list their “CR exit criteria”, and must be in CR for at least 6 months</li>
</ul>
<p class="presenter-notes">→ Test, implement, refine</p>
</section>
<section class="slide">
<h3>Proposed Recommendation (PR)</h3>
<p class="delayed">This requires:</p>
<ul class="delayed">
<li>Two correct, independent implementations of each feature of the spec</li>
<li>No outstanding issues</li>
<li><strong>Tests!</strong></li><!-- ← not mentioned in Process <_< -->
</ul>
<p class="presenter-notes">→ Transition</p>
</section>
<section class="slide">
<h3>Recommendation (REC)</h3>
<ul class="delayed">
<li>A W3C Advisory Committee must approve the transition to REC</li>
<li>Only minor changes are made (errata)</li>
</ul>
<p class="presenter-notes">→ Maintenance</p>
</section>
<section class="slide light image" style="background-image: url(img/spec-progress-1.png);">
<h3>Spec process overview</h3>
</section>
<section class="slide light image" style="background-image: url(img/spec-progress-2.png);">
<h3>Spec process overview</h3>
</section>
<section class="slide light image" style="background-image: url(img/spec-progress-3.png);">
<h3>Spec process overview</h3>
</section>
<section class="slide">
<h3>Spec process overview</h3>
<p class="center v-space">http://www.w3.org/TR/…</p>
<p class="center delayed"><strong>TR = Trash</strong></p>
<p class="center delayed">Beware of stale specs!</p>
</section>
<section class="slide">
<h3>Three basic stages</h3>
<ul>
<li class="delayed">WD — Working Draft → <em>explore, design</em></li>
<li class="delayed">CR — Candidate Recommendation → <em>test, implement</em></li>
<li class="delayed">TR — Recommendation → <em>maintenance</em></li>
</ul>
</section>
<section class="slide">
<h3>WHATWG “living standard”</h3>
<p>“Living standard” means everything happens in one document: http://whatwg.org/C/</p>
<p class="delayed">→ CSSWG equivalent is http://dev.w3.org/csswg/</p>
<p class="presenter-notes">WHATWG doesn’t make separate versions of a spec based on those stages. No confusion about which version to look at.</p>
</section>
<section class="slide">
<h3>WHATWG “living standard”</h3>
<ol class="semantic-list delayed">
<li>Idea; yet to be specified</li>
<li>First draft</li>
<li>Working draft</li>
<li>Last call for comments</li>
<li>Awaiting implementation feedback</li>
<li>Implemented and widely deployed</li>
</ol>
<p class="right"><!-- todo: check link -->(<a href="http://whatwg.org/html5faq.html#When_will_HTML5_be_finished.3F">Ref</a>)</p>
<p class="presenter-notes">However, WHATWG follows a similar process, just on a per-feature level, and all in the same document.</p>
</section>
<section class="slide">
<h2>Actual process</h2>
<ul class="delayed">
<li>Implementation and testing often uncovers problems</li>
<li>Specs can go backwards too</li>
<li>Specs can even be split, merged, or end up abandoned</li>
</ul>
</section>
<section class="slide">
<h2>Example: Flexbox</h2>
<div class="two-up">
<div class="left">
<ul class="delayed semantic-list">
<li><em><time>2004-04-27</time>: WD <code>box</code></em></li>
<li><em><time>2006-09-15</time>: WD <code>box</code></em></li>
<li><em><time>2007-10-05</time>: WD <code>box</code></em></li>
</ul>
<ul class="delayed semantic-list">
<li><time>2009-07-23</time>: FPWD <code>box</code></li>
</ul>
<ul class="delayed semantic-list">
<li><time>2011-03-22</time>: WD <code>flexbox</code></li>
<li><time>2011-11-29</time>: WD <code>flexbox</code></li>
<li><time>2012-03-22</time>: WD <code>flexbox</code></li>
</ul>
</div>
<div class="right">
<ul class="delayed semantic-list">
<li><time>2012-06-12</time>: LCWD <code>flex</code></li>
<li><time>2012-09-18</time>: CR <code>flex</code></li>
</ul>
<ul class="semantic-list delayed">
<li><time>2013-04-11</time>: ED <code>flex</code></li>
<li>↑ ED is the most up-to-date!</li>
</ul>
</div>
</div>
</section>
<section class="slide">
<h2>Example: Flexbox</h2>
<p class="center v-space">CR is <em>not</em> the most recent</p>
<p class="center delayed">WD is completely different</p>
<p class="center delayed">Don’t forget “TR = Trash”!</p>
<p class="presenter-notes"><span lang="en">→ Talk about how ED/WD is like the develop branch of a repo, with CR like a release branch and REC like a tag. The most up-to-date version is develop.</span></p>
</section>
</section>
<section>
<header class="slide">
<h1>Tests</h1>
</header>
<section class="slide">
<h2>Spec test history</h2>
<ul class="delayed">
<li>There weren’t many (or any) tests</li>
<li>Specs were loose, for example not defining error handling</li>
<li>Implementors interpreted the specs differently → pain for us</li>
<li>Implementors made their own tests → duplication</li>
</ul>
</section>
<section class="slide">
<h2>Why tests?</h2>
<ul class="delayed">
<li>Tests help implementors check they’re implementing to spec</li>
<li>Tests help developers with improved interoperability</li>
<li>Tests also help spec authors identify issues (where the spec is not clear, edge case issues, etc.)</li>
<li>The W3C uses these tests to compile implementor reports</li>
<li clas="important">The web platform is too broad and complex for us <em>not</em> to have tests</li>
</ul>
</section>
<section class="slide">
<h2>Test life cycle</h2>
<ul class="delayed">
<li>Once a spec is far enough along (usually CR), interested parties start making tests</li>
<li>Tests are submitted to the W3C are checked then added to the W3C’s test suite</li>
<li>If the spec changes, affected tests are rewritten</li>
</ul>
</section>
<section class="slide">
<h2>What’s a good test?</h2>
<ul class="delayed">
<li>Reduced (only tests one thing)</li>
<li>Simple</li>
<li>Automatic with TestHarness.js, or at least obvious</li>
</ul>
</section>
<section class="slide">
<h2>What happens if there are not enough tests?</h2>
<ul class="delayed">
<li>Issues in specs → may need to be revised</li>
<li>Issues in user agents → interoperability pain, bugs</li>
<li>Now specs can’t go from PR to REC without tests</li>
</ul>
</section>
<section class="slide">
<h2>Lack of tests example</h2>
<p class="delayed">CSS3 Transitions vs Rodney Rehm</p>
<p class="delayed">Rodney turned over the stone of CSS Transitions and Animations, and found a mass of browser bugs and inconsistencies.</p>
<p class="delayed">His article and tests have led to bug reports and proposed spec improvements.</p>
</section>
<section class="slide light image" style="background-image: url(img/css3-animations-tests-detail.png);">
</section>
<!-- redo screenshot from top of page -->
<section class="slide light image" style="background-image: url(img/css3-animations-tests-summary.png);">
</section>
<section class="slide light image" style="background-image: url(img/css3-animations-article.png);">
</section>
<section class="slide light image" style="background-image: url(img/css3-animations-test.png);">
</section>
<section class="slide light image" style="background-image: url(img/css3-animations-test-suite.png);">
</section>
<section class="slide">
<h2>Lack of tests example</h2>
<p>“<a href="http://coding.smashingmagazine.com/2013/04/26/css3-transitions-thank-god-specification/">CSS3 Transitions: Thank God We Have A Specification!</a>” by Rodney Rehm</p>
</section>
</section>
<section>
<header class="slide">
<h1>We need your help!</h1>
</header>
<section class="slide">
<h2>Why help?</h2>
<p class="delayed">The main reason for me is interoperability:</p>
<ul class="delayed">
<li>Tests help interoperability</li>
<li>Interoperability helps us</li>
</ul>
</section>
<section class="slide">
<h2>What now?</h2>
<ul>
<li class="delayed">Write tests tomorrow!</li>
<li class="delayed">Write tests <em>after</em> tomorrow!</li>
<li class="delayed">Get involved in the standards process and help Move the Web Forward!</li>
</ul>
<p class="delayed">→ Move the Web Forward http://www.movethewebforward.org/
</section>
<section class="slide">
<h2>Save the Web,<br />Write Some Tests!</h2>
<p class="delayed center important">Let’s show our ♡ and help make the web even better!</p>
</section>
<section class="slide">
<h2>Spec links</h2>
<ul>
<li><a href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/">Inside CSSWG</a>, by fantasai</li>
<li><a href="http://dev.w3.org/csswg/">CSS Working Group Editors’ Drafts</a></li>
<li><a href="http://whatwg.org/C/">WHATWG “Living Standard”</a></li>
<li><a href="http://w3c-test.org/web-platform-tests/master/">W3C Web Platrofm Tests</a> (also on <a href="https://github.com/w3c/web-platform-tests">GitHub</a>)</li>
<li><a href="http://www.w3.org/Style/CSS/Test/">CSS WG Test Suite information</a></li>
</ul>
</section>
<section class="slide">
<h2>Spec links</h2>
<ul>
<li><a href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/">Inside CSSWG</a>, by fantasai</li>
<li><a href="http://dev.w3.org/csswg/">CSS Working Group Editors’ Drafts</a></li>
<li><a href="http://whatwg.org/C/">WHATWG “Living Standard”</a></li>
<li><a href="http://w3c-test.org/web-platform-tests/master/">W3C Web Platrofm Tests</a> (also on <a href="https://github.com/w3c/web-platform-tests">GitHub</a>)</li>
<li><a href="http://www.w3.org/Style/CSS/Test/">CSS WG Test Suite information</a></li>
</ul>
</section>
<section class="slide">
<h2>Test links</h2>
<ul>
<li>CSSWG test suite: <a href="https://github.com/w3c/csswg-test">GitHub</a> and <a href="https://hg.csswg.org/test/">Mecurial</a></li>
<li><a href="http://wiki.csswg.org/test">CSSWG test wiki</a></li>
<li><a href="https://github.com/w3c/web-platform-tests">W3C Web Platform test suite</a>(GitHub)</li>
<li><a href="http://www.w3.org/html/wg/wiki/Testing">W3C HTMLWG test wiki</a></li>
<li><a href="http://www.w3.org/2008/webapps/wiki/Testing">W3C WebApps test wiki</a></li>
</ul>
</section>
</section>
<footer class="slide" title="The End">
<h2>Thank you!</h2>
<p>Slides at <a href="http://oli.github.io/test-twf">oli.github.io/test-twf</a></p>
</footer>
<script src="slideshow.js"></script>
<script>
var slideshow = new SlideShow();
</script>
</body>
</html>