Child pages

Dumping ground for stuff to be organized:

http://www.jshint.com/
Quora on Javascript's Importance

Human JavaScript
http://read.humanjavascript.com/
- rec'd by Christian O. at Inf.

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
- 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

Stack Overflow - How do I update each dependency in package.json to the latest version?

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.

Table of contents

Child pages

Dumping ground for stuff to be organized:

Books

How it works

Garbage collection

Online resources

W3Schools

Articles / Videos

How to read JavaScript

Jade

Tutorials

Node

npm

Webpack

Tutorials / courses

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

Running 'npm run build'

With Jinja2 template code