forked from h5bp/movethewebforward
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
410 lines (375 loc) · 31.2 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7 no-fontface" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 no-fontface" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 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">
<!-- `media="only all` targets all MQ-supporting browsers. -->
<link rel="stylesheet" href="css/style.css" media="only all">
<!-- Should be combined: -->
<script src="js/libs/modernizr.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body>
<header class="col-ab">
<div class="lead">
<h1 class="hed-lead">Move the Web Forward</h1>
<h2 class="subhed-lead">wear a beanie today, build the web tomorrow</h2>
<p>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 just diving into web development, or you’ve been web-slinging since the days of tables and <code>font</code> tags, 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><p>Our goal is to make it easy for anyone to get started contributing to the platform, whether that's learning more 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>
</div>
</header>
<article class="section">
<div class="standout">
<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 great post about resources to keep up with 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://developer.mozilla.org/En/Firefox_X_for_developers">Firefox X for developers</a> - articles that provide information about the new features introduced in different versions of Firefox</li>
<li><a href="http://blog.whatwg.org/">The WHATWG Blog</a> - summaries of the whatwg 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>
</ul>
<h3 id="follow_them_on_twitter" class="subhed">Follow them on Twitter</h3>
<div>
<svg width="243" height="149" xmlns="http://www.w3.org/2000/svg" class="tw-bird">
<g>
<title>twitter bird</title>
<path fill="hsl(0, 0%, 50%)" clip-path="none" d="m216.43985,68.897858c-7.604004,1.298813 -18.632507,-0.0513 -24.476074,-2.482697c12.142639,-1.005394 20.364258,-6.524761 23.532242,-14.017982c-4.376541,2.694031 -17.969803,5.62812 -25.467102,2.831501c-0.373398,-1.762508 -0.779648,-3.440891 -1.192093,-4.959229c-5.70813,-21.012621 -25.290649,-37.946231 -45.794418,-35.898521c1.653763,-0.67095 3.330093,-1.2947 5.024902,-1.86305c2.24469,-0.80841 15.497299,-2.97103 13.41272,-7.643c-1.764603,-4.12004 -17.953369,3.09824 -20.99823,4.04823c4.02356,-1.50809 10.679688,-4.10978 11.387497,-8.74073c-6.16156,0.84535 -12.212326,3.76303 -16.884338,8.00413c1.690674,-1.81586 2.968994,-4.02977 3.239822,-6.41808c-16.443237,10.5176 -26.047806,31.704621 -33.815941,52.271988c-6.100037,-5.92358 -11.520935,-10.587349 -16.369377,-13.182899c-13.60968,-7.296238 -29.888729,-14.920778 -55.433838,-24.416569c-0.785831,8.45962 4.17749,19.717918 18.470398,27.19268c-3.09412,-0.418571 -8.757141,0.519108 -13.279301,1.594261c1.84045,9.703018 7.866642,17.68663 24.190861,21.544025c-7.458309,0.490395 -11.31982,2.199554 -14.809998,5.851784c3.395748,6.746376 11.69537,14.67662 26.599731,13.045425c-16.586853,7.158783 -6.764832,20.409386 6.731987,18.431442c-23.011101,23.80513 -59.30151,22.038528 -80.14178,2.146194c54.401801,74.209969 172.672366,43.882133 190.289234,-27.594833c13.217773,0.106697 20.969543,-4.575546 25.783081,-9.744057l0.000015,-0.000015z" id="path25"/>
</g>
</svg>
<p>
You should probably follow: <a href="http://twitter.com/webkit">@webkit</a>, <a href="http://twitter.com/oDevRel">@oDevRel</a> (Opera developer relations), <a href="http://twitter.com/ChromiumDev">@ChromiumDev</a> (Chrome developer relations), <a href="http://twitter.com/mozhacks">@mozhacks</a> (Mozilla's web developer outpost) & <a href="http://twitter.com/ie">@IE</a> (Internet Explorer Team)
</p>
</div>
<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/javascript/txjs-2011-a9-alex-russell-life-of-a-button-element/?utm_source=feedburner&utm_medium=twitter&utm_campaign=Feed%3A+Ontwik+%28Ontwik%29">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="http://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://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="http://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/">Awesome RSS feeds to follow</a> - brought to you by Paul Irish</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(5), CSS(3), JavaScript, the DOM, and more!It’s also a great place to contribute! Read <a href="https://developer.mozilla.org/Project:en/How_to_Help">How to help</a> and learn how to <a href="https://developer.mozilla.org/Project:en/Getting_started">get started</a>.</li>
<li><a href="http://instacss.com/">InstaCSS</a> - quick UI to access the CSS documentation from MDN.</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>
</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>
</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.com</a> and <a href="http://lanyrd.com">Lanyrd</a> can help you find events in your neighborhood.</p>
</div>
<div class="col-b">
<section class="getinvolved">
<h2 class="subhed">Great minds think alike.</h2>
<div class="task" data-hashtag="#meet">
<p>Get to know your fellow webbies offline! Catch up and geek out about best practices, tips & tricks, and cool things you’ve been hacking on. </p>
</div>
</section>
</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 </li>
<li id="mozilla_irc"><b>Mozilla IRC channels:</b> #css / #js </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>
</ol>
</div>
<section class="getinvolved">
<div class="col-b">
<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>
</div>
</div>
</section>
</section>
</article>
<article class="section">
<div class="standout">
<h1 class="hed">Mo’ Advanced</h1>
<h2 class="subhed">Are you a ninja? Dare to know what you can do beyond these?</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="http://github.com/h5bp/html5-boilerplate">HTML5 boilerplate</a> <span>- a clearinghouse for frontend dev best practices</span>
<li><a href="https://github.com/jquery/jquery">jQuery</a> <span>- cross-browser scripting standard 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/twitter/bootstrap">Twitter’s bootstrap</a> <span>- a css and js toolkit designed to kickstart development of webapps</span>
<li><a href="http://necolas.github.com/normalize.css/">Normalize.css</a> <span>- make all browsers render markup the same</span>
<li><a href="https://github.com/paulirish/lazyweb-requests/issues?state=open">Lazyweb requests</a> <span>- Web tools and solutions that would be cool to have for web developers.</span>
<li><a href="https://github.com/jquery/standards">jQuery standards project</a> <span>- issues and discussions relating to web standards</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>
</div>
<section class="getinvolved">
<div class="col-b">
<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>
</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></li>
<li><a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a></li>
<li><a href="http://lists.whatwg.org/pipermail/whatwg-whatwg.org/">whatwg</a></li>
</ul>
</li>
<li>Read through the <a href="http://developers.whatwg.org/">HTML5 Spec for developers</a> (the implementor stuff removed, formatted beautifully for you)</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="http://twitter.com/csscommits">@csscommits</a></li>
<li><a href="http://twitter.com/whatwg">@whatwg</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>
</div>
</section>
</div>
</section>
<section id="explore" class="col-ab">
<div class="col-a">
<h1 class="hed">Explore</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="great_resources_on_future_and_advanced_topics" class="subhed">Awesome Slide Decks</h2>
<ul>
<li><a href="http://vimeo.com/32135328">The Future of CSS (Fronteers)</a> <span>- 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>- overview of browser evolution, how new features are created, and lots more!</span>
<li><a href="http://infrequently.org/11/ldnjs/ldnjs.html">[JS|DOM].next()</a> - <a href="http://infrequently.org">Alex Russell</a> 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 future specs will add proper layout control to CSS</span>
<li><a href="http://mezzoblue.com/presentations/2011/fowd/FOWD.pdf">The Future of CSS (FOWD)</a> <span>- an overview of a number of upcoming CSS features.</span>
<li><a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Vendor-prefixed CSS property overview</a> <span>- a consistent and up-to-date resource for all vendor-prefixed CSS properties.</span>
</ul>
<h2 id="examples_of_how_to_explore_features_well" class="subhed">Examples of how to explore features well</h2>
<ul>
<li><a href="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/">Multiple Backgrounds and Borders with CSS 2.1</a> <span> - Nicolas Gallagher</span>
<li><a href="http://nicolasgallagher.com/css-background-image-hacks/">CSS background-image hacks</a> <span> - Nicolas Gallagher</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/webkit-keyframe-animation-syntax/">WebKit 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>
</ul>
<h2 id="cool_ideas_to_explore_more" class="subhed">Cool ideas to explore more (and write about)</h2>
<ul>
<li><a href="http://developer.apple.com/library/safari/#documentation/DataManagement/Reference/DOMWindowAdditionsReference/DOMWindowAdditions/DOMWindowAdditions.html">WebKit's ConvertPointFromPageToNode</a> <span> - YOOO</span>
<li><a href="http://www.w3.org/TR/css3-gcpm/">CSS Generated Content for Paged Media Module (GCPM)</a> <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/En/CSS/%3Achecked">The :checked selector</a> <span> - YOOO</span>
<li><a href="http://dev.w3.org/csswg/css3-images/#object-fit">object-fit</a> <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/en/CSS/background-clip">background-clip</a> <span> - YOOO</span>
<li><a href="http://www.w3.org/TR/SVG/filters.html">SVG blur filter</a> <span> - YOOO</span>
<li><a href="http://dropshado.ws/post/1015351370/webkit-line-clamp">-webkit-line-clamp</a> <span> - YOOO</span>
<li>How CSS preprocessors are shaping the future of CSS <span> - YOOO</span>
<li>How CSS preprocessors can lead to stringy and bad code if not managed correctly <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/en/CSS/text-overflow">text-overflow</a> <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/En/CSS/Box-sizing">box-sizing</a> <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/en/CSS3_Columns">CSS columns</a> <span> - YOOO</span>
<li><a href="https://developer.mozilla.org/en/CSS/box-flex">box-flex</a> <span> - YOOO</span>
<li>Differences between <code>word-wrap</code>, <code>word-break</code>, and <code>white-space</code> <span> - YOOO</span>
<li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:let">let</a> in Harmony <span> - YOOO</span>
<li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:block_scoped_bindings">block-scoped bindings</a> in Harmony <span> - YOOO</span>
<li>Block functions in Harmony <span> - YOOO</span></li>
<li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:destructuring">destructuring</a> in Harmony <span> - YOOO</span>
<li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:rest_parameters">rest parameters</a> in Harmony <span> - YOOO</span>
<li><a href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">default param values</a> in Harmony <span> - YOOO</span>
</ul>
</div>
<section class="getinvolved">
<div class="col-b">
<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>
</div>
</div>
</section>
</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 their homepage (with suggestions for improvement)</li>
<li>How you would fix a popular website's faults (long load-time, invalid JS, etc...)
<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>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>
</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>
<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>
</div>
</section>
</div>
</section>
</article>
<article class="section">
<div class="standout">
<h1 class="hed">Virtuoso!</h1>
<h2 class="subhed">You are the expert and you are bored with all these suggestions? 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 it's 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://bitbucket.org/scope/dragonfly-stp-1/">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 WebKit or Gecko
<ul><li><a href="http://bit.ly/ubtxSq">List of “good first bugs” for Firefox/Gecko</a></ul>
<li>join #introduction and #developers on <a href="#mozilla_irc">Mozilla's IRC server</a></li>
<li><a href="http://dev.chromium.org/developers/contributing-to-webkit">Google’s guide on how to contribute to WebKit</a></li>
</ul>
<h2 id="contribute_to_specs" class="subhed">Contribute to Specifications</h2>
<ul>
<li>Test cases are fundamental to standards and to browsers. You can make <a href="http://www.w3.org/html/wg/wiki/Testing">The W3C test suite for HTML</a> better!
<ul>
<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>Upstream <a href="http://trac.webkit.org/browser/trunk/LayoutTests">WebKit’s layouttests</a>. Also see the <a href="http://www.webkit.org/blog/1456/layout-tests-practice/">layout test practice</a>
<li><a href="https://developer.mozilla.org/en/Mochitest">Mozilla’s mochitests</a> - W3c suites</li>
</ul>
</li>
<li>Review bugs</li>
<li>Send email to <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> / fx email lists</li>
<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/paulirish/lazyweb-requests/issues/18">lazyweb-reqs/18</a></span>
<li><a href="http://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
<li><a href="https://bitbucket.org/annevk/webvtt">WebVTT</a> <span>, a video subtitling format, is an active area of standards interest</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>
</div>
</section>
</div>
</section>
</article>
<footer class="doc">
<p>Made with love & tears by <a href="http://twitter.com/wilto">Mat Marquis</a> / <a href=http://twitter.com/necolas>Nicolas Gallagher</a> / <a href=http://twitter.com/aaronforsander>Aaron Forsander</a> / <a href=http://twitter.com/c_t_montgomery>Connor Montgomery</a> / <a href=http://twitter.com/paul_irish>Paul Irish</a> / <a href=http://twitter.com/divya>Divya Manian</a> and <a href=https://github.com/h5bp/igotmybeanie/contributors>more</a></p>
<p><a href=https://github.com/h5bp/igotmybeanie>Contribute to this project</a></p>
</footer>
<script>
/*
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview'],['_trackPageLoadTime']];
(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>