Nathan Wailes - Blog - GitHub - LinkedIn - Patreon - Reddit - Stack Overflow - Twitter - YouTube

JavaScript

Owned by Nathan Wailes
Last updated: Nov 17, 2023
4 min read

Dumping ground for stuff to be organized:

Books

How it works

Garbage collection

Online resources

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

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

Node

npm

Webpack

Tutorials / courses

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

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.

Follow me on Twitter