/
JavaScript

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

JavaScript

Owned by Nathan Wailes
Last updated: Nov 17, 2023

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.

Related content

Non-language/platform-specific topics (Programming)
Non-language/platform-specific topics (Programming)
My Thoughts on Various Topics
More like this
Website (Web) Development
Website (Web) Development
My Thoughts on Various Topics
More like this
Becoming a better / more-efficient / faster programmer (Programming)
Becoming a better / more-efficient / faster programmer (Programming)
My Thoughts on Various Topics
More like this
Tools (Web Development)
Tools (Web Development)
My Thoughts on Various Topics
More like this
Compiling your thoughts and accumulated knowledge
Compiling your thoughts and accumulated knowledge
My Thoughts on Various Topics
More like this
Game Programming (Programming)
Game Programming (Programming)
My Thoughts on Various Topics
More like this

Follow me on Twitter