-
Notifications
You must be signed in to change notification settings - Fork 112
/
index.html
293 lines (260 loc) · 17.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Superhero.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no, minimum-scale = 1.0, maximum-scale = 1.0">
<meta name="apple-mobile-web-app-capable" content="no">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="http://fonts.googleapis.com/css?family=Bangers|Source+Sans+Pro:400,700" rel="stylesheet" type="text/css">
<link href="icons/stylesheets/general_foundicons.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link type="application/atom+xml" rel="alternate" href="/feed.atom" title="Atom feed">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39378175-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body id="superhero">
<section class="init one invert"><div class="inner">
<h1><span>Superhero.js</span></h1>
<p>
Creating, testing and maintaining a large JavaScript code base is not easy —
especially since great resources on how to do this are hard to find.
This page is a collection of the best articles, videos and presentations
we've found on the topic.
</p>
<p>
Follow us on <a href="http://twitter.com/superhero_js">Twitter</a>,
<a href="https://github.com/superherojs/superherojs">GitHub</a>,
or check out our <a href="#newsletter">newsletter</a>.<br>
We'd love to hear your suggestions <a href="mailto:mail@superherojs.com">via e-mail</a> or
<a href="https://github.com/superherojs/superherojs/issues">as Github Issues</a>.
</p>
</div></section>
<section class="alternate toc two">
<p>
We come across a lot of great articles on creating, testing and maintaining large JavaScript applications.
This page is a continuously updated list of articles that help explain the syntax of JavaScript,
how to organize your projects, how to test your code, and what's on the horizon. Have fun!
</p>
<ol>
<li><a href="#language">Understanding JavaScript: Syntax, style and gotchas</a></li>
<li><a href="#organizing">Organizing your code: API design, patterns and frameworks</a></li>
<li><a href="#testing">Testing your application: Testable code, readable tests</a></li>
<li><a href="#tools">Tools of the trade: Workflow, developer tools and debugging</a></li>
<li><a href="#performance">Performance and Profiling: Fast and memory-efficient code</a></li>
<li><a href="#security">Securing your app: Principles, access
and validation</a></li>
<li><a href="#browser">Under the hood: Understanding the browser</a></li>
<li><a href="#next">On the horizon: Stuff to keep an eye on</a></li>
<li><a href="#resources">The league of awesome: Other superheroic resources</a></li>
</ol>
<p class="first">
Organized by
<a href="http://kimjoar.net">@kimjoar</a>,
<a href="https://twitter.com/madsmobaek">@madsmobaek</a>,
<a href="http://bjorkoy.com/">@vandelay</a>,
<a href="https://twitter.com/mollerse">@mollerse</a> and
<a href="https://twitter.com/mikaelbrevik">@mikaelbrevik</a>.
<span class="updated-on">
– Last updated on <time datetime="2016-12-15T14:55:15Z" is="relative-time" title="Dec 15, 2016, 14:55 PM GMT+1">Dec 15, 2016</time>
</span>
</p>
</section>
<section class="links top" id="language">
<h2><span><i class="foundicon-idea"></i> Understanding JavaScript</span></h2>
<ol>
<li><a href="http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/">
Understanding JavaScript Function Invocation and "this" <span>Yehuda Katz, yehudakatz.com</span></a></li>
<li><a href="http://www.jblotus.com/2013/01/13/common-javascript-gotchas/">
Common JavaScript "Gotchas" <span>James Fuller, jblotus.com</span></a></li>
<li><a href="http://www.codethinked.com/preparing-yourself-for-modern-javascript-development">
Preparing Yourself for Modern JavaScript Development <span>Justin Etheredge, codethinked.com</span></a></li>
<li><a href="http://msdn.microsoft.com/en-us/magazine/ff852808.aspx">
Prototypes and Inheritance in JavaScript <span>Scott Allen, msdn.microsoft.com</span></a></li>
<li><a href="https://github.com/airbnb/javascript">
Style Guide: A mostly reasonable approach to JavaScript <span>Airbnb, github.com/airbnb</span></a></li>
<li><a href="https://www.codeschool.com/paths/javascript">
<strong>Course</strong> Code School: The JavaScript Path <span>Code School</span></a></li>
<li><a href="http://eloquentjavascript.net/2nd_edition/preview/">
<strong>Book</strong> Eloquent JavaScript <span>Marijn Haverbeke</span></a></li>
<li><a href="http://effectivejs.com/">
<strong>Book</strong> Effective JavaScript <span>David Herman</span></a></li>
<li><a href="https://github.com/getify/You-Dont-Know-JS">
<strong>Book series</strong> You Don't Know JS <span>Kyle Simpson</span></a></li>
</ol>
</section>
<section id="organizing" class="links close">
<h2><i class="foundicon-folder"></i> <span>Organizing your code</span></h2>
<ol>
<li><a href="https://www.smashingmagazine.com/2012/10/designing-javascript-apis-usability/">
Designing Better JavaScript APIs <span>Rodney Rehm, coding.smashingmagazine.com</span></a></li>
<li><a href="http://sporto.github.com/blog/2012/12/09/callbacks-listeners-promises/">
Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises <span>Sebastian Porto, sporto.github.com</span></a></li>
<li><a href="http://www.youtube.com/watch?v=juRtEEsHI9E">
I .promise() to show you .when() to use Deferreds <span>Alex McPherson, youtube.com</span></a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">
JavaScript Promises <span>Jake Archibald, html5rocks.com</span></a></li>
<li><a href="http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth">
JavaScript Module Pattern: In-Depth <span>Ben Cherry, adequatelygood.com</span></a></li>
<li><a href="http://esa-matti.suuronen.org/blog/2013/03/22/journey-from-requirejs-to-browserify/">
Journey From RequireJS to Browserify <span> Esa-Matti Suuronen, suuronen.org</span></a></li>
<li><a href="http://coding.smashingmagazine.com/2012/12/05/client-side-templating/">
Client-Side Templating <span>Lars Kappert, smashingmagazine.com</span></a></li>
<li><a href="https://leanpub.com/javascript-allonge/read">
<strong>Book</strong> JavaScript Allongé <span>Reginald Braithwaite</span></a></li>
<li><a href="http://shop.oreilly.com/product/9780596806767.do">
<strong>Book</strong> JavaScript Patterns <span>Stoyan Stefanov</span></a></li>
<li><a href="http://shop.oreilly.com/product/0636920018421.do">
<strong>Book</strong> JavaScript Web Applications <span>Alex MacCaw</span></a></li>
<li><a href="http://robotlolita.me/2013/04/27/the-hikikomoris-guide-to-javascript.html">
The Hikikomori's Guide to JavaScript <span>Quil, robotlolita.me</span></a></li>
</ol>
</section>
<section id="testing" class="links close">
<h2><i class="foundicon-checkmark"></i> <span>Testing your application</span></h2>
<ol>
<li><a href="https://shanetomlinson.com/testing-javascript-frontend-part-1-anti-patterns-and-fixes/">
Writing Testable Frontend Javascript Part 1 – Anti-patterns and their fixes <span>Shane Tomlinson, shanetomlinson.com</span></a></li>
<li><a href="http://www.adequatelygood.com/2010/7/Writing-Testable-JavaScript">
Writing Testable JavaScript <span>Ben Cherry, adequatelygood.com</span></a></li>
<li><a href="http://uxebu.com/blog/2013/01/08/make-tests-read-like-a-book/">
Make tests read like a book <span>Wolfram Kriesing, uxebu.com</span></a></li>
<li><a href="http://opensoul.org/blog/archives/2012/05/16/the-plight-of-pinocchio/">
The Plight of Pinocchio: JavaScript's quest to become a real language <span>Brandon Keepers, opensoul.org</span></a></li>
<li><a href="http://www.letscodejavascript.com/">
<strong>Course</strong>Let's Code: Test-Driven JavaScript <span>James Shore, letscodejavascript.com</span></a></li>
<li><a href="http://jstesting.jcoglan.com/">
<strong>Book</strong> JavaScript Testing Recipes <span>James Coglan</span></a></li>
</ol>
</section>
<section id="tools" class="links close">
<h2><i class="foundicon-tools"></i> <span>Tools of the trade</span></h2>
<ol>
<li><a href="https://www.youtube.com/watch?v=1OAfGm_cI6Y">
Automating Your Front-end Workflow <span>Addy Osmani, youtube.com</span></a></li>
<li><a href="http://www.codeschool.com/courses/discover-devtools">
Discover DevTools <span>Code School, codeschool.com</span></a></li>
<li><a href="https://developers.google.com/chrome-developer-tools/">
Chrome Developer Tools <span>Google, developers.google.com</span></a></li>
<li><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIBQ8j3J_PyM8JLAGKqZRByw">
"The Breakpoint" episodes <span>Paul Irish and Addy Osmani, youtube.com</span></a></li>
<li><a href="https://elijahmanor.com/control-the-complexity-of-your-javascript-functions-with-jshint/">
Control the Complexity of Your JavaScript Functions with JSHint <span>Elijah Manor, elijahmanor.com</span></a></li>
</ol>
</section>
<section id="performance" class="links close">
<h2><i class="foundicon-graph"></i> <span>Performance and Profiling</span></h2>
<ol>
<li><a href="http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/">
Writing Fast, Memory-Efficient JavaScript <span>Addy Osmani, smashingmagazine.com</span></a></li>
<li><a href="http://addyosmani.com/blog/performance-optimisation-with-timeline-profiles/">
Improving Web App Performance With the Chrome DevTools <span>Addy Osmani, addyosmani.com</span></a></li>
<li><a href="http://www.youtube.com/watch?v=hAzhayTnhEI">
Jank Busters: Building Performant Web Apps <span>Nat Duca & Tom Wiltzius, youtube.com</span></a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/speed/animations/">
Leaner, Meaner, Faster Animations with requestAnimationFrame <span>Paul Lewis, html5rocks.com</span></a></li>
<li><a href="http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html">
How (not) to trigger a layout in WebKit <span>Tony Gentilcore, gent.ilcore.com</span></a></li>
<li><a href="http://chimera.labs.oreilly.com/books/1230000000545/index.html">
<strong>Book</strong> High Performance Browser Networking <span>Ilya Grigorik</span></a></li>
<li><a href="http://shop.oreilly.com/product/9780596802806.do">
<strong>Book</strong> High Performance JavaScript <span>Nicholas C. Zakas</span></a></li>
</ol>
</section>
<section id="security" class="links close">
<h2><i class="foundicon-lock"></i> <span>Securing your app</span></h2>
<ol>
<li><a href="https://github.com/eoftedal/writings/blob/master/published/javascript-security-cheat-sheet.md">
Single Page Web App Security Cheat Sheet <span>Erlend Oftedal, github.com/eoftedal</span></a></li>
<li><a href="https://mikewest.org/2013/09/frontend-security-frontendconf-2013">
Frontend Security <span>Mike West, mikewest.org</span></a></li>
<li><a href="http://shop.oreilly.com/product/9781593273880.do">
<strong>Book</strong> The Tangled Web <span>Michal Zalewski</span></a></li>
</ol>
</section>
<section id="browser" class="links close">
<h2><i class="foundicon-settings"></i> <span>Under the hood</span></h2>
<ol>
<li><a href="http://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html">
What the heck is the event loop anyway? <span>Philip Roberts, 2014.jsconf.eu</span></a></li>
<li><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">
How browsers work <span>Tali Garsiel & Paul Irish, html5rocks.com</span></a></li>
<li><a href="http://paulirish.com/2013/webkit-for-developers/">
WebKit for Developers <span>Paul Irish, paulirish.com</span></a></li>
<li><a href="http://www.youtube.com/watch?v=y8hVeKMD_oM">
mö.js - explaining js vm in js <span>Vyacheslav Egorov, youtube.com</span></a></li>
<li><a href="http://robotlolita.me/2015/11/15/how-do-promises-work.html">
How do Promises Work? <span>Quil, robotlolita.me</span></a></li>
</ol>
</section>
<section id="next" class="links close last">
<h2><i class="foundicon-star"></i> <span>On the horizon</span></h2>
<ol>
<li><a href="http://www.youtube.com/watch?v=X_ek1wSe66o">
The Web Can Do That!? <span>Eric Bidelman, youtube.com</span></a></li>
<li><a href="https://github.com/lukehoban/es6features">
Overview of ECMAScript 6 features <span>Luke Hoban, github.com/lukehoban</span></a></li>
<li><a href="http://alexsexton.com/blog/2013/03/deploying-javascript-applications/">
Deploying JavaScript Applications <span>Alex Sexton, alexsexton.com</span></a></li>
<li><a href="https://www.youtube.com/watch?v=mS264h8KGwk">
Immutability, interactivity & JavaScript <span>David Nolen, youtube.com</span></a></li>
<li><a href="http://jbi.sh/what-is-virtual-dom/">
What is virtual DOM? <span>Jack Bishop, jbi.sh</span></a></li>
<li><a href="http://html5doctor.com/methods-of-communication/">
Methods of communication <span>Remy Sharp, html5doctor.com</span></a></li>
<li><a href="https://gist.github.com/staltz/868e7e9bc2a7b8c1f754">
The introduction to Reactive Programming you've been missing <span>André Staltz, github.com/staltz</span></a></li>
<li><a href="http://tjholowaychuk.tumblr.com/post/27984551477/components">
Components <span>TJ Holowaychuk, tjholowaychuk.com</span></a></li>
<li><a href="http://merrickchristensen.com/articles/javascript-dependency-injection.html">
JavaScript Dependency Injection <span>Merrick Christensen, merrickchristensen.com</span></a></li>
</ol>
</section>
<section id="resources" class="more"><div class="content">
<h2><i class="foundicon-globe"></i> <span>Other superheroes</span></h2>
<ol class="last">
<li><a href="http://javascriptweekly.com/">
JavaScript Weekly <span>Peter Cooper, javascriptweekly.com</span></a></li>
<li><a href="http://webplatformdaily.org/">
Open Web Platform Daily Digest <span>Sime Vidas, webplatformdaily.org</span></a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/JavaScript">
Mozilla Developer Network <span>Mozilla, mozilla.org</span></a></li>
<li><a href="http://javascriptjabber.com/">
JavaScript Jabber <span>javascriptjabber.com</span></a></li>
</ol>
<h2 id="newsletter"><i class="foundicon-mail"></i> <span>Newsletter</span></h2>
<p>Subscribe for updates. No spam, we promise();</p>
<form action="http://superherojs.us5.list-manage2.com/subscribe/post?u=862185f1aae866d58d91bc544&id=87fac3d768" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<p><input type="email" placeholder="E-mail address" value="" name="EMAIL" class="required email" id="mce-EMAIL"></p>
<p><input type="submit" value="Sign up now" name="subscribe" id="mc-embedded-subscribe"></p>
</form>
</div></section>
<section id="thanks" class="credits"><div class="content">
<h2><i class="foundicon-smiley"></i> <span>Superthanks!</span></h2>
<ul>
<li><a href="https://twitter.com/tinekl">Tine Kleivane</a></li>
<li><a href="https://github.com/thomaseggum">Thomas Johan Eggum</a></li>
<li><a href="http://addyosmani.com/blog/">Addy Osmani</a></li>
<li><a href="https://github.com/benjamingr">benjamingr</a></li>
<li><a href="https://twitter.com/thibpat">Thibaut Patel</a></li>
<li>wmblaettler</li>
<li><a href="https://github.com/johnkors">John Korsnes</a></li>
<li><a href="https://github.com/chenzihui">Chen Zihui</a></li>
<li><a href="http://hinderberg.no">Hans Magnus Inderberg</a></li>
</ul>
</div></section>
</body>
</html>