This repository has been archived by the owner on Aug 10, 2020. It is now read-only.
/
index.html
492 lines (436 loc) · 38 KB
/
index.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
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie no-fontface" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js no-fontface" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Move The Web Forward | Guide to getting involved with standards and browser development</title>
<meta name="description" content="What you can do as a front-end developer">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="css/style.css">
<!-- Should be combined: -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<b class="gimmick"><i></i><i></i><i></i></b>
<header class="col-ab">
<div class="lead">
<h1 class="hed-lead">Move the Web Forward<span></span></h1>
<h2 class="subhed-lead">You can make the web as awesome as you want it to be.</h2>
<p class="subhed">You love web standards. You want to give back to the community. Curious about where to start? <b>We're here to help.</b></p>
</div>
<div class="col-split">
<p>Whether you're a talented web developer, web-slinging since the days of tables and <code>font</code> tags, or you're a hobbyist hacker, there are a number ways for you to give back. Below, we list some of the ways that anyone can contribute back to the web platform.
<p>Our goal is to make it easy for anyone to get started contributing to the platform, whether that's learning more about how it works, teaching others, or writing specs. The web has grown due to people like you, and we want to make it even easier for people like you to give back.
<p style="font-size:90%">Also available in <a href="/ar">عربى</a>, <a href="/cn">中文</a> and <a href="/pt-br">Brazilian Portuguese</a>.
</p>
</div>
</header>
<div id="nav_container">
<nav id="toc">
<ul>
<li><a href=#levelup>Level up!</a></li>
<li><a href=#digdeep>Dig Deep</a></li>
<li><a href=#virtuoso>Virtuoso</a></li>
</ul>
</nav>
</div>
<article class="section">
<div class="standout" id=levelup>
<h1 class="hed">Level up!</h1>
<h2 class="subhed">You're damn good at what you do. Let's dive into the community!</h2>
</div>
<section id="learn" class="col-ab">
<div class="col-a">
<h1 class="hed">Learn</h1>
<p>One of the most beautiful things about the web is that it's constantly changing. While these changes and improvements can be overwhelming, we're here to help you get caught up! Here are some great resources to walk you through how browsers work, and help keep you up to date on their improvements.</p>
<h2 id="how_do_i_keep_up_with_what8217s_landing_in_browsers" class="subhed">How do I keep up with what’s landing in browsers?</h2>
<ul>
<li><a href="http://updates.html5rocks.com/2011/10/Keeping-up-with-HTML5-and-browser-support">Keeping up with HTML5 and browser support</a> - a list of resources that capture all of these changing things</li>
<li><a href="http://peter.sh/">Peter Beverloo’s Blog</a> - weekly updates of WebKit and Chrome</li>
<li><a href="https://blog.whatwg.org/">The WHATWG Blog</a> - summaries of weekly web standards activity</li>
<li><a href="http://www.w3.org/QA/archive/open_web/">W3C’s open web</a> - weekly updates about the Open Web Platform</li>
<li><a href="https://dev.opera.com/blog/">Dev.Opera Blog</a> - tracks changes to Opera’s web platform
<li><a href="http://updates.html5rocks.com">HTML5 Rocks updates</a> - HTML5 and Chrome breaking news
<li><a href="https://hacks.mozilla.org/">Mozilla Hacks</a> - cool apps and HTML5 features
<li><a href="https://dev.modern.ie">Dev.Modern.IE</a> - Microsoft Edge web platform status and roadmap.
<li><a href="https://blog.chromium.org/">Chromium Blog</a> - tracks changes to Chromium and Chrome
</ul>
<h3 id="follow_them_on_twitter" class="subhed">Follow them on Twitter</h3>
<p>
You should probably follow: <a href="https://twitter.com/oDevRel">@oDevRel</a> (Opera developer relations), <a href="https://twitter.com/ChromiumDev">@ChromiumDev</a> (Chrome developer relations), <a href="https://twitter.com/mozhacks">@mozhacks</a> (Mozilla’s web developer outpost) & <a href="https://twitter.com/MSEdgeDev">@MSEdgeDev</a> (Microsoft Web Platform Team).
</p>
<h2 id="how_do_i_understand_how_browsers_work" class="subhed">How do I understand how browsers work?</h2>
<ul>
<li><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">How Browsers Work: Behind the Scenes of Modern Web Browsers</a> - in-depth look at how a browser works</li>
<li><a href="http://ontwik.com/?p=5215">Life of a <button> element (by Alex Russell)</a> - great talk about rendering layout and CSS</li>
</ul>
<h2 id="other_learning_resources" class="subhed">Other learning resources</h2>
<ul>
<li><a href="https://css-tricks.com">CSS-tricks</a> - provides a wealth of articles, tutorials, and downloads for the web design community.</li>
<li><a href="http://html5doctor.com">HTML5doctor</a> - a great resource for people wanting to learn about HTML5, its semantics, and how to implement it today!</li>
<li><a href="http://webplatform.org">WebPlatform.org</a> - Community web development documentation wiki.</li>
<li><a href="http://diveintohtml5.info/">Dive into HTML5</a> - takes an in depth look at a selection of HTML5 features.</li>
<li><a href="http://addyosmani.com/blog/">Addy Osmani’s blog</a> - tons of great articles for people who want to learn more about jQuery, JavaScript, HTML5, and CSS3.</li>
<li><a href="http://paulirish.com">Paul Irish’s blog</a> - all about helping you build cool websites and keeping you up to date on the latest news.</li>
<li><a href="https://dev.opera.com">Dev.Opera</a> - articles for learning about HTML5 features.</li>
<li><a href="http://blogs.windows.com/msedgedev/">MS Edge Dev Blog</a> - talks about updates to Microsoft’s Edge browser</li>
<li><a href="http://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/">Web browser, frontend and standards feeds to follow</a> </li>
<li><a href="http://yuilibrary.com/theater/">YUI Theater</a> - videos of talks about frontend engineering and web technologies given at Yahoo! over the years (many of them unrelated to YUI).</li>
<li><a href="http://www.adobe.com/devnet/html5.html">Adobe Developer Connection</a> - articles and videos for learning about HTML5, CSS3 and mobile development.</li>
</ul>
<h2 id="reference_docs_wikis" class="subhed">Reference docs/wikis</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/">Mozilla’s MDN</a> - awesome documentation regarding HTML, CSS, JavaScript, the DOM, and more. It’s also a great place to contribute! Read <a href="https://developer.mozilla.org/docs/MDN/Contribute/Tasks">their contribution docs</a> and learn how to <a href="https://developer.mozilla.org/Project:en/Getting_started">get started</a>.</li>
<li><a href="https://developer.mozilla.org/Writing_Forward_Compatible_Websites">Forward-compatible websites</a> - list of best practices for creating websites that won’t break when browsers are updated.</li>
<li><a href="http://html5please.com/">HTML5 Please - Use new and shiny responsibly</a> - Encyclopedia for HTML5 features across browsers, look up specific features and see when/if you can use it.</li>
<li><a href="http://caniuse.com/">Can I Use</a> - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Itching to learn?</h2>
<div class="task" data-hashtag="#learn">
<p>All it takes is a quick read of a few articles or tweets and you can scratch that knowledge bug! Trust us – once you’ve gotten started, it just keeps getting easier.</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
<section id="meetups" class="col-ab">
<div class="col-a">
<h1 class="hed">Meet like-minded folks</h1>
<p>Attending local meetups and conferences is a great way to connect with other developers to learn, share resources, and bring new ideas and collaborations to life. Sites like <a href="http://meetup.com">Meetup</a> and <a href="http://lanyrd.com">Lanyrd</a> can help you find events in your neighborhood.</p>
</div>
</section>
<section id="askhelp" class="col-ab">
<div class="col-a">
<h1 class="hed">Ask for help</h1>
<h2 id="answer_questions_and_participate_in_conversations_on_irc" class="subhed">Answer questions and participate in conversations on IRC</h2>
<p><a href="http://richard.esplins.org/siwi/2011/07/08/getting-started-freenode-irc/">How to get started with freenode and irc</a></p>
<ul>
<li><b>Freenode IRC channels:</b> #html5 / #css / #javascript / #whatwg / #jquery / #yui / #dojo / #web / #chromium / #webkit / <span title="browser based game development">#bbg</span> (on <a href="https://webchat.freenode.net">irc.freenode.net</a>) </li>
<li id="mozilla_irc"><b>Mozilla IRC channel:</b> #js (on <a href="http://irc.mozilla.org">irc.mozilla.org</a>)</li>
</ul>
<h2 id="how_to_ask_for_help" class="subhed">How to ask for help</h2>
<ol class="tasks">
<li>You’ll probably want to <a href="http://css-tricks.com/13414-seriously-just-make-a-jsfiddle/">make a jsfiddle first</a>.</li>
<li><a href="http://css-tricks.com/6263-reduced-test-cases/">Create a reduced test case</a>.</li>
<li>Remember: be specific!</li>
<li>Ask on IRC, <a href="http://stackoverflow.com">StackOverflow</a> (even its <a href="http://chat.stackoverflow.com/rooms/17/javascript">javascript chatroom</a>), or a group of friends.
</ol>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">A helping hand.</h2>
<div class="task" data-hashtag="#ask4help">
<p>We've all gotten to where we are by relying on others for help at some time or another. Don't be shy, and just ask! Just please make a jsfiddle first. =D</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
</article>
<article class="section">
<div class="standout" id=digdeep>
<h1 class="hed">Dig Deep</h1>
<h2 class="subhed">You clearly know your way around. Now it's time to show it.</h2>
</div>
<section id="helpothers" class="col-ab">
<div class="col-a">
<h1 class="hed">Help others</h1>
<p>We've all got to start somewhere! Helping others reassures your knowledge, and also broadens the amount of concepts you're exposed to. Below are some great open-source projects that are always looking for help. Remember - no patch is too small!</p>
<h2 id="open_source_projects_worth_your_time" class="subhed">Open-Source projects worth your time</h2>
<ul>
<li><a href="https://github.com/h5bp/html5-boilerplate">HTML5 Boilerplate</a> <span>- a clearinghouse for frontend dev best practices</span>
<li><a href="https://github.com/jquery/learn.jquery.com">jQuery Learning Site</a> <span>- educational site for the popular jQuery library</span>
<li><a href="https://github.com/jquery/jquery-mobile">jQuery Mobile</a> <span>- mobile progressive enhancement best practices</span>
<li><a href="https://github.com/Modernizr/Modernizr">Modernizr</a> <span>- feature detection's finest</span>
<li><a href="https://github.com/twbs/bootstrap">Bootstrap</a> <span>- a css and js toolkit designed to kickstart development of webapps</span>
<li><a href="https://necolas.github.io/normalize.css/">Normalize.css</a> <span>- make all browsers render markup the same</span>
<li><a href="http://dojotoolkit.org/get-involved">Dojo</a> <span>- the comprehensive frontend app development toolkit</span>
<li><a href="https://github.com/h5bp/lazyweb-requests/issues?state=open">Lazyweb requests</a> <span>- Web tools and solutions that would be cool to have for web developers.</span>
</ul>
<p>Do what is asked in <a href="#how_to_ask_for_help">‘ask for help’</a> above and check out <a href="http://addyosmani.com/blog/getting-involved-with-open-source/">Addy Osmani’s podcast about getting involved</a>!</p>
<h2 id="help_write_documentation" class="subhed">Write documentation</h2>
<ul>
<li><a href="http://www.webplatform.org/">Web Platform</a> <span>- a community-driven source for comprehensive web developer documentation</span></li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Pass it on!</h2>
<div class="task" data-hashtag="#helpothers">
<p>Reading awesome code leads to writing awesome code. Look into the great projects listed below, and help them grow to be even more great than they already are.</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
<section id="specs" class="col-ab">
<div class="col-a">
<h1 class="hed">Give feedback on specifications</h1>
<p>Specs codify the expected behavior. They are developed by Working Groups (WG) along with active discussion on mailing lists. While we can’t always be certain that all browser vendors will adhere to the rules set forth in a spec, they provide us with something that we, as developers, can standardize against.</p>
<ul>
<li>Learn the <a href="http://diveintohtml5.info/past.html">history of HTML</a>.</li>
<li>Take an <a href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/">inside look at how the CSS WG works</a>.</li>
<li>Subscribe to these mailing lists to follow and contribute to the discussions that drive the web:
<ul class="resources">
<li><a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a> - technical discussion for the Web Applications Working Group</li>
<li><a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> - technical discussion on Cascading Style Sheets (CSS) and its specifications</li>
<li><a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">whatwg</a> - WHATWG's mailing list</li>
<li><a href="http://lists.w3.org/Archives/Public/public-html/">public-html</a> - W3C HTML Working Group</li>
<li><a href="http://lists.w3.org/Archives/Public/www-dom/">www-dom</a> - where the DOM is improved</li>
<li><a href="http://lists.w3.org/Archives/Public/public-fx/">public-fx</a> - issues affecting the CSS and SVG Working Groups</li>
</ul>
</li>
<li>Read through the <a href="http://developers.whatwg.org/">HTML LS Spec for developers</a> (the implementor stuff removed, formatted beautifully for you).</li>
<li>The easiest way to comment or give feedback on the contents of the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML specification</a> is to select the text you want to comment on and leave a message using the form at the bottom of the page.</li>
<li>
See the latest commits to the HTML and CSS specs by following their respective working groups on Twitter:
<ul class="resources">
<li><a href="https://twitter.com/whatwg">@whatwg</a></li>
<li><a href="https://twitter.com/csscommits">@csscommits</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Are you specced out?</h2>
<div class="task" data-hashtag="#feedback">
<p>We're the ones using the specs, so why don't we help make specs we love? Let's stand up for standards, and help make these even better!</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
<section id="explore" class="col-ab">
<div class="col-a">
<h1 class="hed">Explore frontend features</h1>
<p>Once you’ve picked up the basics, it’s time to dive a bit deeper into the current (and future) state of web standards! Get excited, because here, we check out advanced CSS, brand-new HTML5 features/APIs, and even what the future of these languages are expected to be. Several new capabilities are now available in browsers, and exploring these new capabilities will help us push the web forward!</p>
<h2 id="examples_of_how_to_explore_features_well" class="subhed">Examples of how to explore features well</h2>
<ul>
<li><a href="http://perfectionkills.com/global-eval-what-are-the-options/">Global <code>eval</code>: what are the options?</a> <span> - kangax</span>
<li><a href="http://www.webdirections.org/blog/let-the-web-move-you-css3-animations-and-transitions/">Let the Web move you — CSS3 Animations and Transitions</a> <span> - John Allsopp</span>
<li><a href="http://addyosmani.com/largescalejavascript/">Patterns For Large-Scale JavaScript Application Architecture</a> <span> - Addy Osmani</span>
<li><a href="http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/">The Cicada Principle and why it matters to web designers</a> <span> - Alex Walker</span>
<li><a href="http://css-tricks.com/snippets/css/keyframe-animation-syntax/">Keyframe animation syntax</a> <span> - Chris Coyier</span>
<li><a href="http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/">What's new in CSS Selectors (Level 4)</a> <span> - Shi Chuan</span>
<li><a href="http://mathiasbynens.be/notes/touch-icons">Everything you always wanted to know about touch icons</a> <span> - Mathias Bynens</span>
<li><a href="http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/">The z-index CSS Property: A Comprehensive Look</a> <span> - Louis Lazaris</span>
</ul>
<h2 id="cool_ideas_to_explore_more" class="subhed">Cool features to explore more (and write about)</h2>
<p>Browsers ship new CSS features all the time. The vendor prefixes we love to hate are actually there so we developers can provide feedback on whether the feature meets our needs. Encourage yourself to investigate if they do! This <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">vendor-prefixed CSS property overview</a>, by Peter Beverloo, has a lot of experimental CSS mentioned; much of which is not well understood. Consider writing about them and the items below:
<ul>
<li><a href="https://developer.mozilla.org/En/CSS/%3Achecked">The :checked selector</a> / <a href="http://dev.w3.org/csswg/css3-images/#object-fit">object-fit</a> / <a href="https://developer.mozilla.org/en/CSS/background-clip">background-clip</a> / <a href="http://dropshado.ws/post/1015351370/webkit-line-clamp">-webkit-line-clamp</a> / <a href="https://developer.mozilla.org/en/CSS/text-overflow">text-overflow</a> / <a href="https://developer.mozilla.org/En/CSS/Box-sizing">box-sizing</a> / <a href="https://developer.mozilla.org/en/CSS3_Columns">CSS columns</a></li>
<li><code>history.pushState()</code>, HTML5 input <code>checkValidity()</code>, <code>getClientRects</code> / <code>getBoundingClientRect</code>, WebKit's <a href="http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html">ConvertPointFromPageToNode</a>
<li><a href="http://www.w3.org/TR/css3-gcpm/">CSS Generated Content for Paged Media Module (GCPM)</a>
<li>Differences between <code>word-wrap</code>, <code>word-break</code>, and <code>white-space</code>
<li>Harmony features like <a href="http://wiki.ecmascript.org/doku.php?id=harmony:let">let</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings">block-scoped bindings</a> / block functions / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:destructuring">destructuring</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">rest parameters</a> / <a href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">default param values</a>.
<li><a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html">Web Components Explained (very early draft)</a>
<li><strong>Any features from these presentations:</strong>
<ul>
<li><a href="http://vimeo.com/32135328">The Future of CSS</a> <span>- Tab Atkins on what to expect from CSS in the future.</span>
<li><a href="http://infrequently.org/11/fronteers/fronteers.html">Data, Semantics, and the Process of Progress </a> <span>- browser evolution, Component Model, MDV</span>
<li><a href="http://infrequently.org/11/ldnjs/ldnjs.html">[JS|DOM].next()</a> <span>- Alex Russell on the next version of ECMAScript.</span>
<li><a href="http://lea.verou.me/css3-secrets/">CSS3 Secrets</a> <span>- an interactive presentation on advanced CSS3 functionality.</span>
<li><a href="http://nimbu.in/w3conf/">The Future of Layouts in CSS</a> <span>- and how emerging specs will add proper layout control to CSS</span>
<li><a href="http://mezzoblue.com/presentations/2011/fowd/FOWD.pdf">The Future of CSS</a> <span>- an overview of a number of surfacing CSS features.</span>
</ul>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Explore the unknown!</h2>
<div class="task" data-hashtag="#explore">
<p>Go for it! The only way to move the web forward is to dig in and used advanced features and APIs. Have fun - we know you will!</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
<section id="write" class="col-ab">
<div class="col-a">
<h1 class="hed">Write</h1>
<p>Publish what you learn and don’t be afraid to make mistakes. Publish to your personal blog and keep your posts updated. Be sure to speak with your own voice! Remember that it is okay to not be an absolute authority on a subject to author a post! Always ask questions and prompt conversations. There is seldom a wrong question or a wrong answer.</p>
<p>Teaching is a great learning tool as well. So, even if you are getting started in an area, you’re helping yourself by writing about it as well. You can always consider asking a mentor or friend for a technical review. (Addy’s done that with aplomb.)</p>
<h2 id="what_should_you_start_to_learn_about" class="subhed">What should you write about?</h2>
<p>Something you can teach others! Here are some ideas:</p>
<ul>
<li>Why do the <code><br></code> and <code><hr></code> elements (or any element) exist?</li>
<li>How to create a slideshow with the least amount of code?</li>
<li>What is the DOM? Why does it exist?</li>
<li>Check how browsers implement a specific property and compare it to the spec.</li>
<li>How a popular website implements its homepage (with suggestions for improvement).</li>
<li>How you would fix a popular website's faults (long load-time, invalid JS, etc.).</li>
<li>Take a popular demo and make it something else (or use it practically).</li>
<li>Make a summary of popular ideas around the web lately.</li>
<li>Your experience contributing to an open-source project.</li>
<li>How CSS preprocessors can lead to stringy and bad code if not managed correctly.</li>
<li>If you are a native speaker of a language other than English:
<ul class="resources">
<li>Translate some popular English web dev posts.</li>
<li>Elaborate on some of the features in the specs.</li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Write this down!</h2>
<div class="task" data-hashtag="#write">
<p>Regardless of how many twitter followers or github watchers you have - write about what you learn!</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
<section id="filebugs" class="col-ab">
<div class="col-a">
<h1 class="hed">File bugs</h1>
<p>Seriously, all browser vendors would much rather you file tickets with them than tweet about bugs. =D</p>
<ul>
<li><a href="http://coding.smashingmagazine.com/2011/09/07/help-the-community-report-browser-bugs/">Help the Community: Report Browser Bugs</a> by Lea Verou</li>
<li><a href="http://ejohn.org/blog/a-web-developers-responsibility/">A Web Developer’s Responsibility</a> by John Resig</li>
<li><a href="http://a11ybugs.org/">Help prioritize browser accessibility bugs</a> by Vlad Alexander</li>
<li>
<p>Browser issue trackers - search for existing bug reports or submit new ones:</p>
<ul class="resources">
<li><a href="https://bugzilla.mozilla.org/">Mozilla's bugzilla</a></li>
<li><a href="https://bugs.webkit.org/">WebKit bugs</a></li>
<li><a href="http://crbug.com/">Chrome bugs</a></li>
<li><a href="http://www.opera.com/support/bugs/">Opera bugs</a></li>
<li><a href="https://connect.microsoft.com/site/sitehome.aspx?SiteID=136">Help IE</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Stop bugging out!</h2>
<div class="task" data-hashtag="#filebugs">
<p>This is the quickest way for browsers to get better - by filing and working on bugs. It takes just a few moments, and anybody can do it.</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
</article>
<article class="section">
<div class="standout" id=virtuoso>
<h1 class="hed">Virtuoso!</h1>
<h2 class="subhed">You've come a long way; you clearly know your stuff! May we suggest you these?</h2>
</div>
<section id="hack" class="col-ab">
<div class="col-a">
<h1 class="hed">Hack!</h1>
<p>Push the web to its limits! Hack on CSS, advanced HTML, and JavaScript. Hack on the browser's rendering engine. Fork github repos, dig through the code, and keep on learning. Let's make the web more awesome. There are so many ways:</p>
<h2 id="contribute_to_browsers" class="subhed">Contribute to browsers</h2>
<ul>
<li>Help build devtools like <a href="http://trac.webkit.org/wiki/WebInspector">WebKit Inspector</a> and <a href="https://github.com/operasoftware/dragonfly/">Dragonfly</a>.
They are written in HTML, CSS, and JS so you don’t need to be a C++ programmer to contribute to these.
Write patches!</li>
<li><a href="https://developer.mozilla.org/en/Gecko_BugAThon">Reduce test cases for Mozilla</a></li>
<li>Hack on Gecko
<ul>
<li>Read the developer guide for <a href="https://developer.mozilla.org/En/Developer_Guide">getting started with Gecko development</a>.
<li>A <a href="https://bugzilla.mozilla.org/buglist.cgi?quicksearch=%22[mentor%3D%22&list_id=1800469">list of “good first bugs” for Firefox/Gecko</a>
<li>Join #introduction and #developers on <a href="#mozilla_irc">Mozilla's IRC server</a>
</ul>
<li>Hack on Blink
<ul>
<li><a href="http://dev.chromium.org/developers/contributing-code">Google’s guide on how to contribute to Blink</a>
</ul>
<li>Hack on WebKit
<ul>
<li>Read the guide for <a href="https://www.webkit.org/coding/contributing.html">contributing code to WebKit</a>.
</ul>
</ul>
<h2 id="contribute_to_testsuites" class="subhed">Contribute to Test Suites</h2>
<p>Test cases are fundamental to standards and to browsers. They assure things work the same across browsers. Yet right now, the W3C test suites don't have nearly as many tests as they need. Tests are written in the languages of web developers: HTML, CSS, and JavaScript. </p>
<ul>
<li>Get information on the
<a href="https://github.com/w3c/web-platform-tests">W3C Web Platform Tests Project</a>
and the <a href="https://github.com/w3c/csswg-test">W3C CSS Test Suite</a>.
</li>
<li>Look into <a href="http://www.w3.org/html/wg/wiki/Testing#New_tests">upstreaming some existing tests</a> into the W3C Test suite.</li>
<li>Upstream <a href="http://trac.webkit.org/browser/trunk/LayoutTests">WebKit’s LayoutTests</a>. <span>Also see the LayoutTests <a href="http://www.webkit.org/blog/1452/layout-tests-theory/">theory</a> & <a href="http://www.webkit.org/blog/1456/layout-tests-practice/">practice</a>.</span></li>
<li>Upstream <a href="https://developer.mozilla.org/en/Mochitest">Mozilla’s Mochitests</a>.</li>
<li>Join the conversation on <a href="http://lists.w3.org/Archives/Public/public-webapps-testsuite/">public-webapps-testsuite</a>, <a href="http://lists.w3.org/Archives/Public/public-html-testsuite/">public-html-testsuite</a>, and <a href="http://lists.w3.org/Archives/Public/public-css-testsuite/">public-css-testsuite</a>.</li>
<li>Contribute to HTML5 Audio on <a href="http://areweplayingyet.org">the AreWePlayingYet? test suite</a>.</li>
</ul>
<h2 id="contribute_to_specs" class="subhed">Contribute to specifications</h2>
<ul>
<li>Review existing bugs on <a href="http://www.w3.org/Bugs/Public/">W3C bugzilla</a> <span>- and learn <a href="http://wiki.whatwg.org/wiki/Bugzilla_conventions">Bugzilla conventions</a>.</span>
<li>Particpate in <a href="http://www.whatwg.org/mailing-list">WHATWG</a> / <a href="http://lists.w3.org/Archives/Public/public-webapps/">public-webapps</a> / <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> / <a href="http://lists.w3.org/Archives/Public/public-fx/">public-fx</a> discussions.</li>
<li><a href="http://dev.chromium.org/developers/how-tos/make-a-web-standards-proposal">Make a web standards proposal</a>. <span>(this guide tells you how!)</span>
<li><a href="http://wiki.whatwg.org/wiki/How_to_write_a_spec">Write specs!</a> <span>we could certainly use more spec writers.</span></li>
</ul>
<h2 id="contribute_to_validators" class="subhed">Contribute to validators</h2>
<ul>
<li>
<a href="http://validator.nu/">HTML Validator</a> <span>needs some developer lovin', deets at <a href="https://github.com/h5bp/lazyweb-requests/issues/18">lazyweb-reqs/18</a></span>
<li>
<a href="http://lists.w3.org/Archives/Public/www-validator-css/">CSS Validator</a> <span>can always use some help. hop on that mailing list!</span>
<li>
<a href="https://github.com/annevk/webvtt">WebVTT</a> <span>a video subtitling format, is an active area of standards interest</span>
</ul>
<h2 id="contribute_to_projects" class="subhed">Contribute to projects</h2>
<ul>
<li>
<a href="https://github.com/h5bp/lazyweb-requests/issues/">Lazyweb Requests</a> <span>are some ideas for awesome projects the web would love to see built.</span>
</li>
</ul>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">I’m in your codez!</h2>
<div class="task" data-hashtag="#hack">
<p>Just build stuff. Experiment, fork repos, dig through code. Contribute to the browsers, specs, validators, or great <a href="#open_source_projects_worth_your_time">open-source projects</a>!</p>
<a href="#" class="pledge">Yes, I want to do this!</a>
<div class="pledges"><p>Here are some developers who want to do this too:</p></div>
</div>
</section>
</div>
</section>
</article>
<footer class="doc">
<p class="subhed summary">
You can make the web as awesome as you want it to be. Browser vendors, standards editors and library creators actively seek your voice and your contribution. <br>Together we can move the web forward.
</p>
<img src="img/pugerton.png" alt="Pugerton">
<p class="subhed">Made with love & tears by</p>
<ul class="builders">
<li><a href="https://twitter.com/wilto"><img src="https://pbs.twimg.com/profile_images/477441227986444289/KHCUqTis_normal.png" alt="Mat Marquis"> <b>Mat</b> Marquis</a>
<li><a href="https://twitter.com/aaronforsander"><img src="https://pbs.twimg.com/profile_images/461528075788763138/c7ONSIRm_normal.jpeg" alt="Aaron Forsander"> <b>Aaron</b> Forsander</a>
<li><a href="https://twitter.com/connor"><img src="https://pbs.twimg.com/profile_images/526185574039031808/IpDbRAX5_normal.jpeg" alt="Connor Montgomery"> <b>Connor Montgomery</b></a>
<li><a href="https://twitter.com/paul_irish"><img src="https://pbs.twimg.com/profile_images/420826194083213312/CP1RmLa3_normal.jpeg" alt="Paul Irish"> <b>Paul</b> Irish</a>
<li><a href="https://twitter.com/divya"><img src="https://pbs.twimg.com/profile_images/550530231853776897/kni4F8oM_normal.png" alt="Diviya Manian"> <b>Divya</b> Manian</a>
<li><a href="https://twitter.com/necolas"><img src="https://pbs.twimg.com/profile_images/529444560179449857/eKdCJhvp_normal.jpeg" alt="Nicolas Gallagher"> <b>Nicolas</b> Gallagher</a>
<li><a href="https://twitter.com/addyosmani"><img src="https://pbs.twimg.com/profile_images/422476220442234880/jlx9HMtr_normal.jpeg" alt="Addy Osmani"> <b>Addy</b> Osmani</a>
</ul>
<p class="others">& <a href="https://github.com/h5bp/movethewebforward/contributors"><span>all these awesome people</span>.</a></p>
<p>Dinos by <a href="http://dribbble.com/deathbearbrown">Sue Lockwood</a> • <a href="https://github.com/h5bp/movethewebforward">Contribute to this project!</a></p>
</footer>
<script>
window._gaq=[['_setAccount','UA-17904194-2'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>