what it feels like to learn js

learning js

this is a syllabus of everything i either used or didnt use to learn front end js to a decent level. it's based on a hellish trello board i kept that rapidly grew out of my control.

i've rated everything from 1-5 burritos (🌯) depending on the skill level required to understand the concepts. i've also treated ES2015 as something that should be used from the start, rather than a separate section.

---

contents

1. the basics
2. in-built methods & objects
3. intermediate js concepts
   1. passing by value/reference
   2. recursive functions
   3. callbacks
   4. the event loop
4. dom & events (aka makin' websites)
   1. dom
   2. events
5. advanced js concepts 4. this 5. prototypes 6. closures 8. namespacing & modules
6. object oriented js + mvc
7. tdd
8. node.js & npm
9. common.js & amd
10. gulp & webpack
11. design patterns
12. functional js
13. react & redux

---

1. the basics

// the different data types, how they're written, and how they work.
// - values (booleans, numbers, strings)
// - operators
// - other values (null, undefined, NaN)
// - arrays
// - functions
// - objects
// - control flow (if, else if, else)
// - loops (for, while, do-while)

• [mooc] Codecademy - Learn JavaScript 🌯
• [book] Eloquent JS - Chs. 1-4 🌯
• [mooc] FreeCodeCamp - Basic JavaScript
• [reference] Babel ES2015 Features
  • let is the new var, const 🌯
  • template strings 🌯
  • arrow functions 🌯
  • default, rest, spread 🌯🌯
• [reference] conditional (ternary) operator 🌯
• [training] Codewars (8kyu & 7kyu) 🌯

---

2. in-built methods & objects

// the most useful/interesting ones:
// - number - isNan, toFixed
// - string - split, join, toLowerCase, toUpperCase, indexOf, search, match, replace, repeat
// - array - pop/push/shift/unshift, forEach, map, filter, reduce, sort, concat, every, some, from (loads!)
// - object - hasOwnProperty, Object.create, Object.assign, Object.keys
// - function - apply, call, bind
// - regexp, math + date

• [book] Eloquent JS - Ch. 5: Higher-Order Functions 🌯🌯
• [mooc] FreeCodeCamp - the rest of the Frontend Certificate 🌯🌯
• [reference] MDN 🌯🌯
• [training] Codewars (6kyu & 5kyu) 🌯🌯
• [article] JavaScript’s Apply, Call, and Bind Methods are Essential for JavaScript Professionals 🌯🌯🌯 (requires understanding of this, see ch 3)

---

3. intermediate js concepts

1. passing by value/reference

   • [article] JavaScript  -  call-by-sharing 🌯🌯

2. recursive functions

   • [mooc] Codeacademy - Recursion in JavaScript 🌯🌯

3. callbacks

   • [article] Understand JavaScript Callback Functions and Use Them 🌯🌯

4. the event loop

   • [video] Philip Roberts: What the heck is the event loop anyway? 🌯🌯🌯

---

4. dom & events (aka makin' websites)

1. dom
   • [book] Eloquent JavaScript - ch 13 The Document Object Model 🌯🌯
2. events

---

5. advanced js concepts

// i recommend reading the entirety of You Don't Know JS (YDKJS) by Kyle Simpson if you can
// the full book is online: https://github.com/getify/You-Dont-Know-JS

1. this
   • [mooc] Udacity - Object Oriented JavaScript 🌯🌯🌯 (has a good bit on this)
   • [book] YDKJS - this & object prototypes ch 1+2 🌯🌯🌯
2. prototypes & inheritance
   • [book] Stoyan Stefanov - Object-Oriented JavaScript ch 5+6 🌯🌯🌯🌯
   • [book] YDKJS - this & object prototypes ch 5 🌯🌯🌯🌯
3. closures
   • [book] YDKJS - scope & closures ch 5 🌯🌯🌯🌯
4. namespacing & modules

---

6. object oriented js + mvc

• [mooc] Watch And Code - Practical JS 🌯🌯 (make a todo app with OOJS)
• [mooc] Udacity - Object Oriented JavaScript 🌯🌯🌯
• [mooc] Udacity - JavaScript Design Patterns 🌯🌯🌯 (OOJS is technically a design pattern, hence the title of this. See ch 10 for extra design patterns)
• [book] YDKJS - this & object prototypes ch 4 🌯🌯🌯

---

7. tdd

• [$$$ mooc] Watch And Code Premium - Test Driven Development 🌯🌯🌯 (just vanilla js)
• [mooc] Udacity - JavaScript Testing 🌯🌯🌯 (vanilla + jasmine)

---

8. node.js & npm

// the only things you'll really need to know about npm are that it's where modules other people have
// written are stored and you can install them on your computer like this:

npm i dependency-name

// to install locally in your project, do:

npm i -D dependency-name

// learning node at at least some level is good, even if you don't plan to use it. it'll help you understand
// npm, modules and web tooling a bit better

• [mooc] nodeschool.io learn-you-node 🌯🌯🌯
• [mooc] FreeCodeCamp - Backend Certificate (includes learn-you-node) 🌯🌯🌯
• [further reading] node-for-beginners 🌯🌯🌯 - 🌯🌯🌯🌯🌯

---

9. commonjs & amd

// tldr: both are ways to load modules.

// amd (see require.js) is ugly as hell, but asynchronous

	define([moduleToImport], function () {
	  return somethingToExport
	});

// commonjs (used by node.js) is synchronous as hell, but pretty

	require('./moduleToImport');
	exports.thing = somethingToExport;

// but you should use es2015 modules anyway

	import {module} from 'moduleToImport';
	export somethingToExport;

• [article] ES6 Modules: The End of Civilization As We Know It? 🌯🌯🌯🌯
• [article] Addy Osmani - Writing Modular JS 🌯🌯🌯🌯

---

10. gulp & webpack

// i learned gulp first, which i thought was useful (and fun! i recommend it!). but then i learned webpack and it is
// a great replacement for gulp. you should definitely learn webpack.

gulp

• [mooc] Udacity - Web Tooling & Automation 🌯🌯🌯

webpack

• [article] Beginner's guide to Webpack 🌯🌯🌯
• [article] webpack-howto 🌯🌯🌯🌯
• [book] SurviveJS - Become a Webpack Master 🌯🌯🌯🌯

---

11. design patterns

// MVC, OOJS and modules are actually design patterns that help keep your code maintainable.
// some other key design patterns to learn are:

// - getters & setters
// - singleton
// - pub-sub / observer
// - mixin
// - factory
// - decorator

// the resources below individually cover all of these

• [$$$ mooc] Mastering JS Design Patterns 🌯🌯🌯🌯
• [book] Addy Osmani - Learning JavaScript Design Patterns 🌯🌯🌯🌯🌯

---

12. functional js

• currying
• monads

---

13. react & redux

• [mooc] Codeacademy - Learn ReactJS: Part I 🌯🌯🌯
• [book] SurviveJS - Become a React Master 🌯🌯🌯🌯🌯
• [mooc] React Fundamentals 🌯🌯🌯🌯🌯
• [mooc] Codeacademy - Learn ReactJS: Part II 🌯🌯🌯🌯🌯