Dumping ground for stuff to be organized:

Books

Beginner books:
- Amazon - JavaScript for Beginners
  - rec'd by Patrick here
- Amazon - A Smarter Way to Learn JavaScript
  - very. very high reviews
  - Alright, I bought it and it's for total beginners to programming. It's probably a waste of my time to go through it.
Intermediate books
- Human JavaScript
  - rec'd by Christian O. at Inf.
- 2016 - Amazon - Secrets of the JavaScript Ninja
  - rec'd by Patrick here
Advanced books

How it works

Garbage collection

http://www.katiefenn.co.uk/memory-dont-forget-to-take-out-the-garbage/

Online resources

Codecademy - JavaScript
Learn-JS.org
Udemy - JavaScript
W3Schools - JavaScript
- I'm tracking my progress on this here:

W3Schools

Q: What are some different functions you can use to display data with JavaScript?
- Writing into an alert box, using window.alert().
  Writing into the HTML output using document.write().
  Writing into an HTML element, using innerHTML.
  Writing into the browser console, using console.log().
Q: What's wrong with this code:
<html>
<body>
<script>document.getElementById("demo").innerHTML = "Hey!";</script>
<p id="demo">Blah blah blah</p>
</body>
</html>
- A: It has the script tag at the top of the body. Scripts should be at the bottom to make the visible part of the page load as quickly as possible.
Q: In JavaScript, what are "identifiers"?
- A: That's just the word used to refer to variable names.
Q: What's wrong with this code:
var x = "5" + 2 + 3;
- A: Nothing, it'll just treat the integers as strings. Which may not be a clean way to program, so IDK, research it.
Q: What will be the value of x:
var x = 2 + 3 + "5" + 3 + 2;
- A: The string "5532".

Articles / Videos

2016.10.03 - Hackernoon - How it feels to learn JavaScript in 2016
- this was rec'd by giles on pythonanywhere

How to read JavaScript

How to tell the difference between a function definition and a function-call.
1. Look for the 'function' keyword at the beginning of the first line; it's the equivalent of Python's 'def' keyword.
2. Look at the end of the block of code; a function will end with a curly-brace, whereas a function-call will end with a parenthesis and semicolon.

Jade

Apparently used by KSun and others at Infer.

Tutorials

2015.04.14 - WebAppLog.com - To Engineers Who Tried to Use Jade Template Engine and Can’t Get Started
- This looks pretty useful.

Node

npm

An explanation I wrote of how to read and resolve npm dependency conflict errors: https://stackoverflow.com/a/77504180/4115031
Stack Overflow - How do I update each dependency in package.json to the latest version?
To upgrade to the latest version of npm on Windows, I can run npm-windows-upgrade --npm-version latest
- This only works because I installed the npm-windows-upgrade tool as explained here.

Webpack

Tutorials / courses

Udemy
- Webpack 2: The Complete Developer's Guide - 4.7 average rating with 3400 ratings.
- Webpack 3: Beyond the Basics - 4.8 average rating with 38 ratings
- Webpack 1 & 2 - The Complete Guide - 4.6 average rating with 94 ratings
2017.03 - YouTube - Academind - Webpack 2 Basics
2017.04.10 - tutorialzine - Learn Webpack in 15 Minutes
- Intro
  - Bundlers allow us to package, compile, and organize the many assets and libraries needed for a modern web project.
  - The tutorial is designed for total beginners to webpack.
- Why webpack?
  - Pros:
    - Great for working with singe-page apps
    - Accepts both require() and import module syntaxes
    - Allows for very advanced code splitting
    - Hot Reload for quicker development with React, Vue.js and similar frameworks
    - Мost popular build tool according to the 2016 JavaScript survey
  - Cons:
    - Not suitable for beginners in web development
    - Working with CSS files, images, and other non-JS resources is confusing at first
    - Documentation could be better
    - Changes a lot, even most 2016 tutorials are already outdated
- 1. Installation
  - npm install webpack --save-dev
  - Add these lines to your package.json:
    - "scripts": { "build": "webpack -p", "watch": "webpack --watch" },
- 2. Webpack Config File
  - It's called webpack.config.js
  - The entry option tells webpack which is our main JavaScript file.
  - In output we specify the name and path of our bundle. After running webpack we will have all our JavaScript in a file called bundle.js. This is the only script file that we will link in our HTML.
- 3. Webpack Modules
  - Webpack provides multiple ways to work with modules. For this tutorial we will use the ES6 import syntax.
  - To create a module, just create JavaScript file that contains a function and a line that says export default functionName;
  - Then import the function into your entry point file with a line like import functionName from './path/to/function.js';
- 4. Requiring Libraries
  - To use an external library, first install it: npm install libraryName --save
  - Then import it into your code just as you would a module: import libraryName from 'libraryName';
- 5. Loaders
  - Loaders are webpack's way to execute tasks during bundling and pre- or post-process the files in some manner.
    - For example, they can compile TypeScript, load Vue.js components, render templates, and much more.
  - To use a loader:
    - First install it: npm install loaderName --save-dev
    - You may need to add some lines to your webpack config file to configure the loader.
    - The loader will then be used automatically when you run npm run build
- Further Reading
  - webpack.js.org - The official website for the project, lots of guides and docs available there.
  - Awesome webpack - Curated list of webpack resources.
  - Webpack 2 - A full tutorial - Almost two-hours-long free video tutorial.
  - Webpack Examples - List of various webpack configurations.

Errors I've seen and how I've fixed them

Running 'npm run build'

ERROR in ./src/main.js
Module build failed: Error: Failed to load plugin node: Cannot find module 'eslint-plugin-node'
- How I fixed it: npm install --save-dev eslint-plugin-node
- Basically I just looked at my package.json and saw that "eslint-plugin-node" wasn't listed in my devDependencies, so I guessed adding it there would fix the error.
Module build failed: SyntaxError: Unexpected token (
- On 2018.03.03 I got this error because I had a lot of code in my app.html (the main HTML file used by the Webpack project) that was commented out using Jinja2-style comments (so, {# ... #} ). When I got rid of the code that was commented-out like that, the error message went away.

With Jinja2 template code

Any Jinja2 code that I have in a single-file template (.vue file) does not get rendered by Flask, because that code is never put into the app.html, but is instead located within a JavaScript file (app.js) that is loaded into that HTML file after the page has already been rendered and served to the client.