264 lines
12 KiB
HTML
264 lines
12 KiB
HTML
<h1 id="awesome-javascript-learning-awesome">Awesome JavaScript Learning
|
||
<a href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a>
|
||
<img src="https://cdn.rawgit.com/voodootikigod/logo.js/master/js.svg" width="125" align="right" alt="JS Logo"></h1>
|
||
<blockquote>
|
||
<p>An awesome list limited to the best JavaScript learning resources</p>
|
||
</blockquote>
|
||
<p>This list is mainly about JavaScript - the language. Not about APIs,
|
||
tooling, frameworks or other aspects of todays JavaScript ecosystem.</p>
|
||
<p><em>Please read the <a href=".github/contributing.md">contribution
|
||
guidelines</a> before contributing.</em></p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#javascript-references">JavaScript References</a></li>
|
||
<li><a href="#articles--tutorials">Articles & Tutorials</a></li>
|
||
<li><a href="#free-ebooks">Free eBooks</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#blogs">Blogs</a></li>
|
||
<li><a href="#videos">Videos</a></li>
|
||
<li><a href="#interactive-learning">Interactive learning</a></li>
|
||
<li><a href="#es6-and-above">ES6 and above</a></li>
|
||
<li><a href="#dom-related">DOM related</a></li>
|
||
<li><a href="#nodejs">Node.js</a></li>
|
||
<li><a href="#related">Related</a></li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="javascript-references">JavaScript References</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/docs/Web/JavaScript/Reference">MDN</a>
|
||
- Simply the most extensive and up to date language reference.</li>
|
||
<li><a href="http://devdocs.io/javascript">DevDocs</a> - Search MDN
|
||
comfortably. Even offline.</li>
|
||
<li><a href="https://wesbos.com/javascript">JavaScript Notes &
|
||
Reference</a> - Detailed reference with code examples. Divided into
|
||
topics covering basic and advanced subjects.</li>
|
||
<li><a href="http://jargon.js.org">Simplified JavaScript Jargon</a> -
|
||
Glossary which explains all the buzzwords from the JavaScript eco
|
||
system.</li>
|
||
<li><a
|
||
href="https://functional.works-hub.com/blog/Functional-Programming-Jargon">Functional
|
||
Programming Jargon</a> - Explains terms used in functional programming
|
||
in the JavaScript context.</li>
|
||
<li><a
|
||
href="http://ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript®
|
||
Language Specification</a> - The standard JavaScript is based on. Only
|
||
for very advanced learners.</li>
|
||
</ul>
|
||
<h2 id="articles-tutorials">Articles & Tutorials</h2>
|
||
<h3 id="overall-topics">Overall Topics</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">A
|
||
re-introduction to JavaScript*</a> - Compact introduction covering
|
||
types, variables, operators, control structures, functions and
|
||
closures.</li>
|
||
<li><a href="http://javascript.info">JavaScript.info</a> - A modern
|
||
tutorial from the basics to advanced topics with simple, but detailed
|
||
explanations.</li>
|
||
<li><a
|
||
href="https://auth0.com/blog/glossary-of-modern-javascript-concepts/">Glossary
|
||
of Modern JavaScript Concepts: Part 1</a> - Learn the fundamentals of
|
||
functional programming, reactive programming, and functional reactive
|
||
programming in JavaScript.</li>
|
||
<li><a
|
||
href="https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/">Glossary
|
||
of Modern JavaScript Concepts: Part 2</a> - Explains concepts like scope
|
||
and closures, data flow, change detection, components, compilation, tree
|
||
shaking.</li>
|
||
<li><a href="https://molily.de/robust-javascript/">Robust Client-Side
|
||
JavaScript</a> - Guide focused on writing robust code by describing
|
||
possible failures and explaining how to prevent them.</li>
|
||
</ul>
|
||
<p><em>*MDN offers a lot of <a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">other
|
||
guides</a> for every level of knowledge to dig deeper.</em></p>
|
||
<h3 id="single-topics">Single Topics</h3>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.sitepoint.com/javascript-closures-demystified/">JavaScript
|
||
Closures Demystified</a> - Covering closures. From basics to use cases.
|
||
Has useful comments.</li>
|
||
<li><a
|
||
href="https://scotch.io/tutorials/understanding-hoisting-in-javascript">Understanding
|
||
Hoisting</a> - Detailed explanation of the concept of hoisting in
|
||
JavaScript.</li>
|
||
<li><a
|
||
href="https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter">Array
|
||
operations</a> - Covering the usefulness of Array’s map, reduce, and
|
||
filter methods.</li>
|
||
<li><a
|
||
href="http://www.sohamkamani.com/blog/2016/08/28/incremenal-tutorial-to-promises/">Promises</a>
|
||
- Learning promises step by step.</li>
|
||
<li><a
|
||
href="https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9">Async/Await</a>
|
||
- Tutorial showing the advantages of consuming Promises via async
|
||
functions.</li>
|
||
<li><a
|
||
href="https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976">Pure
|
||
functions</a> - Answers the question »What is a Pure Function?«
|
||
epicly.</li>
|
||
<li><a
|
||
href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">Using
|
||
Fetch</a> - Describes thoroughly how to use the Fetch API to receive and
|
||
send data.</li>
|
||
<li><a
|
||
href="https://developers.google.com/web/tools/chrome-devtools/">Chrome
|
||
DevTools</a> - Everything you need to know about the debugging tools
|
||
built into Google Chrome.</li>
|
||
</ul>
|
||
<h2 id="free-ebooks">Free eBooks</h2>
|
||
<ul>
|
||
<li><a href="http://eloquentjavascript.net">Eloquent JavaScript</a> -
|
||
Covering the language and runtime specifics.</li>
|
||
<li><a href="https://github.com/getify/You-Dont-Know-JS">You Don’t Know
|
||
JS (book series)</a> - Series of books diving deep into language.</li>
|
||
<li><a href="http://speakingjs.com">Speaking JavaScript</a> - In-depth
|
||
guide beginning with the basics.</li>
|
||
<li><a
|
||
href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/">JavaScript
|
||
Design Patterns</a> - Classical and JavaScript specific design
|
||
patterns.</li>
|
||
<li><a
|
||
href="https://mostly-adequate.gitbooks.io/mostly-adequate-guide/">Mostly
|
||
Adequate Guide to Functional Programming</a> - Excellent primer to
|
||
functional programming using JavaScript.</li>
|
||
<li><a
|
||
href="https://github.com/getify/Functional-Light-JS">Functional-Light
|
||
JavaScript</a> - This book explores the core principles of functional
|
||
programming (FP) as they are applied to JavaScript.</li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<p>Thin books which you can get through in a few days.</p>
|
||
<ul>
|
||
<li><a
|
||
href="http://shop.oreilly.com/product/9780596517748.do">JavaScript: The
|
||
Good Parts</a> - Classic material which still has relevance.</li>
|
||
<li><a href="https://www.nostarch.com/oojs">The Principles of
|
||
Object-Oriented JavaScript</a> - Comprehensible, especially interesting
|
||
for people with a class based OOP background.</li>
|
||
<li><a
|
||
href="http://shop.oreilly.com/product/0636920027713.do">JavaScript
|
||
Enlightenment</a> - Will solidify your understanding of the
|
||
language.</li>
|
||
<li><a
|
||
href="https://www.manning.com/books/testing-javascript-applications">Testing
|
||
JavaScript Applications</a> - A complete guide for JavaScript testing
|
||
tools and techniques.</li>
|
||
<li><a href="https://www.manning.com/books/the-joy-of-javascript">The
|
||
Joy of JavaScript</a> - A book covering advanced language features like
|
||
Iterators and Generators.</li>
|
||
</ul>
|
||
<h2 id="blogs">Blogs</h2>
|
||
<ul>
|
||
<li><a href="http://www.2ality.com">②ality</a> - Language features and
|
||
APIs well explained by author and trainer Dr. Axel Rauschmayer.</li>
|
||
<li><a href="https://ponyfoo.com">Pony Foo</a> - Detailed and high
|
||
quality posts from Nicolás Bevacqua all related to JavaScript.</li>
|
||
</ul>
|
||
<h2 id="videos">Videos</h2>
|
||
<!--lint ignore no-repeat-punctuation-->
|
||
<ul>
|
||
<li><a href="https://www.youtube.com/watch?v=qGyqzN0bjhc">== ? === ???
|
||
…#@^%</a> - Basic talk about type coercion and strict type
|
||
comparison.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q">FunFunFunction</a>
|
||
- Educational plus entertaining YouTube show covering language features
|
||
as well as architectural topics amongst others.</li>
|
||
<li><a
|
||
href="http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D">What
|
||
the heck is the event loop anyway?</a> - Awesome talk about the way
|
||
JavaScript works, and a tool for exploring the callstack.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=4mf_yNLlgic">Become a
|
||
JavaScript Console Power-User</a> - Introduction to the browsers
|
||
JavaScript console.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=HF1luRD4Qmk">Debugging The
|
||
Web</a> - Learn state of the art in debugging using Chrome dev tools.
|
||
<!--lint ignore no-dead-urls--></li>
|
||
<li><a href="https://vimeo.com/181328943">Promises Are So Passé</a> -
|
||
Talk that shows where async goes next, why it matters, and what you need
|
||
to do to put it into practice today.</li>
|
||
<li><a href="https://www.youtube.com/watch?v=e-5obm1G_FY">Learning
|
||
Functional Programming with JavaScript</a> - Talk containing the best
|
||
explanation of map/reduce.</li>
|
||
<li><a
|
||
href="https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth">Understand
|
||
JavaScript’s this Keyword in Depth</a> - 18 minutes divided into 8 short
|
||
videos to wrap you head around <code>this</code>.</li>
|
||
</ul>
|
||
<h2 id="interactive-learning">Interactive learning</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://www.udacity.com/course/intro-to-javascript--cd2073">Udacity
|
||
Introduction to JavaScript</a> - They also offer more advanced
|
||
courses.</li>
|
||
<li><a href="https://www.codeschool.com/learn/javascript">Code
|
||
School</a> - From Basics to Best Practices. Different courses related to
|
||
JavaScript.</li>
|
||
<li><a href="http://reactivex.io/learnrx/">Functional programming</a> -
|
||
Learn basic principles of functional programming in an interactive way
|
||
by using map, filter, concatAll, reduce and zip.</li>
|
||
<li><a href="https://javascript30.com">JavaScript30</a> - Video course
|
||
with 30 small and self-contained tutorials to build neat little things
|
||
with plain JavaScript.</li>
|
||
<li><a href="https://learnjavascript.online">Learn JavaScript Online</a>
|
||
- Interactive JavaScript course with spaced repetiton flashcards
|
||
app.</li>
|
||
<li><a href="https://exercism.io/tracks/javascript">Exercism JavaScript
|
||
Track</a> - Exercism provides individual practice and mentor-based
|
||
learning for free.</li>
|
||
</ul>
|
||
<h2 id="es6-and-above">ES6 and above</h2>
|
||
<ul>
|
||
<li><a href="http://exploringjs.com/es6.html">Exploring ES6</a> - Good
|
||
introduction with in-depth chapters.</li>
|
||
<li><a href="http://exploringjs.com/es2016-es2017.html">Exploring ES2016
|
||
and ES2017</a> - Follow up of »Exploring ES6«.</li>
|
||
<li><a href="https://ponyfoo.com/articles/es6">ES6 Overview</a> - Bullet
|
||
point overview including in-depth articles.</li>
|
||
<li><a href="http://es6katas.org">ES6 Katas</a> - Learn ES6 by solving
|
||
unit test online.</li>
|
||
<li><a href="https://github.com/mjavascript/practical-es6">Practical
|
||
ES6</a> - eBook with practical examples and advices.</li>
|
||
<li><a href="https://github.com/Chalarangelo/30-seconds-of-code">30
|
||
seconds of code</a> - Useful ES6 snippets that you can understand in 30
|
||
seconds or less.</li>
|
||
<li><a
|
||
href="https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/">What’s
|
||
the difference between JavaScript and ECMAScript?</a> - Clears the
|
||
confusion about ES6 and JavaScript.</li>
|
||
</ul>
|
||
<h2 id="dom-related">DOM related</h2>
|
||
<ul>
|
||
<li><a href="https://domenlightenment.com/">DOM Enlightenment</a> - A
|
||
whole book about how to access and manipulate the DOM without a
|
||
library.</li>
|
||
<li><a href="http://youmightnotneedjquery.com">You Might Not Need
|
||
jQuery</a> - Get plain JavaScript code snippets (and see their jQuery
|
||
equivalents).</li>
|
||
<li><a href="https://zellwk.com/blog/dom-traversals/">Traversing the DOM
|
||
with JavaScript</a> - A tutorial featuring native methods to traverse
|
||
the DOM.</li>
|
||
</ul>
|
||
<h2 id="node.js">Node.js</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/maxogden/art-of-node#readme">The Art of
|
||
Node</a> - Introductory tutorial covering the basics.</li>
|
||
<li><a href="https://nodeschool.io">NodeSchool</a> - Interactive self
|
||
guided workshops you can also do on your own.</li>
|
||
<li><a href="http://nodepatternsbooks.com">Node Patterns</a> - Short
|
||
books about code and networking patterns related to Node.js.</li>
|
||
<li><a href="https://learnnode.com">Learn Node</a> - A premium training
|
||
course to learn to build apps with Node.js, Express, MongoDB.</li>
|
||
</ul>
|
||
<hr />
|
||
<h2 id="related">Related</h2>
|
||
<p><a href="https://github.com/micromata/awesome-css-learning">Awesome
|
||
CSS Learning</a> - An awesome list limited to the best CSS learning
|
||
resources.</p>
|
||
<p><a
|
||
href="https://github.com/micromata/awesome-javascript-learning">javascriptlearning.md
|
||
Github</a></p>
|