update
This commit is contained in:
263
html/javascriptlearning.md2.html
Normal file
263
html/javascriptlearning.md2.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user