New Modern Javascript Bootcamp 2020

This readme is for an overview of the entire course.

All notes will be added to better document my experience as I work through this course. These notes will be made public in Github and the repo that has been allocated to track my progress.

• Initiate the Git Repo for this course
• Maintain source control through the entirety of the course

Sections 1 - 6 were basically review for me. I had recently learned these concepts in Colt's Web Developer Bootcamp, however, it was mostly in an early version of Javascript. This was the first time I was using "let" and "const" as well as template literals and ternary operator.

*** Starting Section 7 and The World of Loops

• Learned For Loops
• Learned While Loops
• Learned For...Of Loops
• Learned For...In Loops

*** Section 8 is all about Functions!!!

• My First Function
• Dice Roll Function
• Introducing Arguments
• Functions with Multiple Arguments
• The Return Statement
• Return Values
• Functions Challenge 1 "Password Validator"
• Functions Challenge 2 "Average"
• Functions Challenge 3 "Pangrams"
• Functions Challenge 4 "Playing Cards"

*** Section 9 "An Advanced Look at Functions"

• Function Scope
• Block Scope
• Lexical Scope
• Function Expressions
• Higher Order Functions
• Functions as Arguments
• Functions as Return Values
• Callbacks
• Hoisting

*** Section 10 "Apply Functions to Collections of Data"

• Intro to Array Callback Methods
• forEach
• Map
• Arrow Functions Intro
• Arrow Functions: Implicit Returns
• Array.find
• Filter
• Some & Every
• Revisting Sort!
• Reduce Intro
• Reduce Pt.2
• Even More Reduce!

The above information was my first attempt to complete this course. Somewhere along the line I got side tracked. Again, leaving me with an incomplete understanding of Javascript.

Today, starts a second attempt at completing this course. Mentioned above, at the time I start this course sections 1-6 were review. This time I believe I will learn new things in those first 6 sections. This time I am not going to quit. Here goes!

*** Section 1 "Introduction"

• How This Course Works
• JS, ECMA, TC39: What Do They Mean??
• The Tools You Need
• Customizing VSCode & Extensions
• A Quick Note About MDN

*** Section 2 "JS Values & Variables"

• Goals & Primitives
• Running Code in JS Console
• Introducing Numbers
• NaN & Infinity
• Numbers Quiz
• Variables & Let
• Unary Operators
• Introducing Const
• The Legacy of Var
• Variables Quiz

*** Section 3 "How to Model Data Efficiently"

• Booleans Intro
• Strings
• String Indices
• String Methods
• More String Methods
• Strings Quiz
• String Escape Characters
• String Template Literals
• Null & Undefined
• The Math Object & Random Numbers
• typeof Operator
• parseInt & parseFloat

*** Section 4 "Controlling Program Logic and Flow"

• Making Decisions in JS
• Comparison Operators
• Double Equals (==)
• Triple Equals (===)
• Running Code From a Script
• If Statements
• Else If
• Else
• Nesting Conditionals
• Truthy & Falsy Values
• Logical AND (&&)
• Logical OR (||)
• NOT Operator (!)
• Operator Precedence
• The Switch Statement
• Ternary Operator

*** Section 5 "Capture Collections of Data with Arrays

• Creating Arrays
• Array Indices
• Modifying Arrays
• Push and Pop
• Shift and Unshift
• Concat
• Includes and IndexOf
• Reverse and Join
• Slice
• Splice
• Sorting (Part 1)
• Intro to Reference Types
• Using Const with Arrays
• Working with Nested Arrays

*** Section 6 "Objects - The Core of Javascript"

• Intro To Objects
• Creating Object Literals
• Accessing Object Properties
• Adding and Updating Properties
• Nested Arrays & Objects
• Objects and Reference Types
• Array/Object Equality

*** Section 7 "The World of Loops"

• Intro to Loops
• For Loops
• Infinite Loops!
• For Loops & Arrays
• Nested For Loops
• Intro to While Loops
• More While Loops
• Break Keyword
• For...Of Intro
• Comparing For and For...Of
• For...OF with Objects
• For...In Loops

*** Section 8 "Writing Reuseable Code with Functions"

• Our First Function!
• Dice Roll Function
• Introducing Arguments
• Functions With Multiple Args
• The Return Statement
• More on Return Values
• Function Challenge 1: passwordValidator
• Function Challenge 2: Average
• Function Challenge 3: Pangrams
• Function Challenge 4: Playing Card

*** Section 9 "An Advanced Look at Functions

• Function Scope
• Block Scope
• Lexical Scope
• Function Expressions
• Higher Order Functions
• Functions as Arguments
• Functions as Return Values
• Callbacks
• Hoisting

*** Section 10: Apply Functions to Collections of Data

• Intro to Array Callback Methods
• forEach
• Map
• Arrow Functions Intro
• Arrow Functions: Implicit Returns
• Array.find
• Filter
• Some & Every
• Revistiing Sort!
• Reduce Intro
• Reduce Pt. 2
• Even More Reduce!

*** Section 11: A Few Miscellaneous JS Features

• New JS Features Intro
• Default Parameters
• Spread for Function Calls
• Spread in Array Literals
• Spread in Object Literals
• The Arguments Object(not new)
• Rest Parameters (new!)
• Destructuring Arrays
• Destructuring Objects
• Nested Destructuring
• Destructing Parameters

*** Section 12 Object Methods and the "This" Keyword

• Shorthand Object Properties
• Computed Properties
• Adding Methods to Objects
• Method Shorthand Syntax
• Intro to Keyword THIS
• Using THIS in Methods
• THIS: Invocation Context
• Annoyomatic Demo
• Putting it All Together: Deck Of Cards
• Creating a Deck Factory

Well it happened again, here I was thinking I was going to be able to complete this course and life got in the way. I truly need to learn this material and cement these concepts. I don't believe I need to start over, but I am going to do a little review of functions and then move on from there. Probably wouldn't hurt to reference array methods along the way as well. Ugh, can I please just figure this out.

*** Section 9 An Advanced Look at Functions

• Function Scope
• Block Scope
• Lexical Scope
• Function Expressions
• Higher Order Functions
• Functions as Arguments
• Functions as Return Values
• Callbacks
• Hoisting

*** Section 10 Apply Functions to Collections of Data

• Intro to Array Callback Methods
• forEach
• Map
• Arrow Functions Intro
• Arrow Functions: Implicit Returns
• Array.find
• Filter
• Some and Every
• Revisting Sort!
• Reduce Intro
• Reduce Pt. 2
• Even More Reduce!

*** Section 11 A Few Miscellaneous JS Features

• New JS Features Intro
• Default Parameters
• Spread for Function Calls
• Spread in Array Literals
• Soread in Object Literals
• The Arguments Object (not new)
• Rest Parameters (new!)
• Destructuring Arrays
• Destructuring Objects
• Nested Destructuring
• Destructuring Parameters

*** Section 12 Object Methods and the 'This' Keyword

• Shorthand Object Properties
• Computed Properties
• Adding Methods to Objects
• Method Shorthand Syntax
• Into to the Keyword THIS
• Using THIS in Methods
• THIS: Invocation Context
• Annoyomatic Demo
• Putting It All Together: Deck of Cards
• Creating A Deck Factory

*** Section 13 JS In The Browser - DOM Manipulation

• Introduction to the DOM
• IMPORTANT NOTE: HTML & CSS
• Taste of the DOM
• Another Fun DOM Example
• The Document Object
• getElementById
• getElementsByTagName
• getElementsByClassName
• querySelector & querySelectorAll

*** Section 14 Twisting the DOM to Our Will!

• Working with innerText and textContent
• innerHTML
• value, src, href, and more
• Getting and Setting Attributes
• Finding Parent/Children/Siblings
• Changing Multiple Elements
• Alerting Styles
• getComputedStyle
• Manipulating Classes
• Creating Elements
• Append, Prepend, & insertBefore
• removeChild & remove
• NBA Scores Chart Pt1.
• NBA Scores Chart Refactor

*** Section 15 Communicating with Events

• Intro to DOM Events
• 2 Ways NOT to Add Events
• addEventListener
• The Impossible Button Demo
• Events on Multiple Elements
• The Event Object
• Key Events: keypress, keyup, & keydown
• Coin Game Demo
• Form Events & PreventDefault
• Input & Change Events

*** Section 16 Asynchronous Code. Callbacks & Promises

• The Call Stack
• Call Stack Debugging w/ Dev Tools
• JS is Single Threaded
• How Asynchronous Callbacks Actually Work
• Welcome to Callback Hell
• Introducing Promises!
• Returning Promises from Functions
• Resolving/Rejecting/ w/ Values
• The Delights of Promise Chaining
• Refactoring w/ Promises

*** Section 17 Making HTTP Requests

• Intro to AJAX
• JSON & XML
• XMLHttpRequests: The Basics
• XMLHttpRequests: Chaining Requests
• A Better Way: Fetch!
• Chaining Fetch Requests
• Refactoring Fetch Chains
• An Even Better Way: Axios
• Sequential Axios Requests

*** Section 18 Async & Await Requests

• A Quick Overview of Async Functions
• The Async Keyword
• The Await Keyword
• Error Handling in Async Functions
• Multiple Awaits
• Parallel vs. Sequential Requests
• Refactoring with Promise.all

*** Section 19 Protoypes, Classes, & The New Operator

• What on Earth are Prototypes
• An Intro to OOP
• Factory Functions
• Constructor Functions
• JS Classes - Syntactical Sugar
• A Bit More Practice with Classes
• Extends, Super, and Subclasses

Part II

*** Section 20 Drawing Animations

• Welcome to Part 2!
• App Overview
• Project Setup
• Event-Based Architecture
• Class-Based Architecture
• Binding Events in a Class
• Reminder on 'This'
• Determining the Value of 'This'
• Solving the 'This' Issue
• Starting and Pausing the Timer
• Where to Store Data?
• DOM-Centric Approach
• Getters and Setters
• Stopping the Timer
• Notifying the Outside World
• OnTick and OnComplete
• Extractng Timer Code
• Introducing SVG's
• Advanced Circle Properties
• The Secret to the Animation
• First Pass on the Animation
• Smoothing the Animation
• Adjusting by an Even Interval
• Using Icons
• Styling and Wrapup

Code for the above project can be found here

*** Section 21 Application Design Patterns

• Application Overview
• Starter Kit Setup
• Big Challenges
• Fetching Movie Data
• Fetching a Single Movie
• AutoComplete Widget Design
• Searching the API on Input Change
• Delaying Search Input
• Understanding Debounce
• Implementing a Reusable Debounce
• Extracting Utility Functions
• Awaiting Async Functions
• Rendering Movies
• Handling Errored Responses
• Opening a Menu
• Stlye of Widget Creation
• Moving HTML Generation
• Quick Note
• Repairing References
• Handling Broken Images
• Automatically Closing the Dropdown
• Handling Empty Responses
• Handling Movie Selection
• Making a Followup Request
• Rendering an Expanded Summary
• Expanded Statistics
• Issues with the Codebase
• Making the Autocomplete Reusable
• Displaying Multiple Autocompletes
• Extracting Rendering Logic
• Extracting Selection Logic
• Removing Movie References
• Consuming a Different Source of Data
• Refreshed HTML Structure
• Avoiding Duplication of Config
• Hiding the Tutorial
• Showing Two Summaries
• When to Compare?
• How to Compare?
• Extracting Statistic Values
• Parsing Number of Awards
• Applying Parsed Properties
• Updating Styles
• Small Bug Fix
• App Wrapup

Code for the above project can be found here

*** Section 22 Javascript with the Canvas API

• Application Overview
• Project Setup
• Matter Terminology
• Getting Content to Appear
• Boilerplate Overview
• Drawing Borders
• Clicking and Dragging
• Generating Random Shapes
• Maze Generation Algorithm
• More on Maze Generation
• Configuration Variables
• Grid Generation
• Verticals and Horizontals
• Abstracting Maze Dimensions
• Guiding Comments
• Neighbor Coordinates
• Shuffling Neighbor Pairs
• Determining Movement Direction
• Updating Vertical Wall Values
• Updating Horizontal Wall Values
• Validating Wall Structure
• Iterating Over Walls
• Drawing Horizontal Segments
• Drawing Vertical Segments
• Drawing the Goal
• Drawing the Playing Ball
• Handling Keypresses
• Adding Keyboard Controls
• Disabling Gravity
• Detecting a Win
• Adding a Win Animation
• Stetching the Canvas
• Understanding the New Unit Variables
• Refactoring for Rectangular Mazes
• Adding Fill Colors
• Displaying a Success Message

Code for the above project can be found here

*** Section 23 Make a Secret-Message Sharing App

• Application Overview
• Project Setup
• Handling Form Submission
• Base64 Encoding
• Encoding the Entered String
• Parts of a URL
• Generationg the URL
• Toggling Element Visibility
• Decoding the Message
• Displaying the Message
• App Deployment

Code for the above project can be found here

*** Section 24 Create Node JS Command Line Tool

• JavaScript with Node vs the Browser
• Executing JavaScript
• Working with Modules
• Invisible Node Functions
• The Require Cache
• Files Get Required Once!
• Debugging with Node
• App Overview
• Accessing Standard Library Modules
• The Callback Pattern in Node
• The Process.cwd Function
• Running a Node Program as an Executable
• Linking a Project
• Is it a File or a Folder
• A Buggy Initial Implementation
• Optional Solution #1
• A Callback-Based Solution
• Callback-Based Functions Using Promises
• Issues with Sequential Reads
• Promise.all-Based Solution
• Console Logs with Colors
• Accepting Command Line Arguments
• Joining Paths
• App Wrapup

Code for the above project can be found here

*** Section 25 Create Your Own Project Runner

• App Overview
• Project Setup
• Big Application Challenges
• Watching Files with Chokidar
• Issues with Add Event
• Debouncing Add Events
• Naming Require Statements
• Handling CLI Tools with Caporal
• Ensuring Files Exist
• It Works!
• More on StdIO
• Optional - More on Child_Process
• App Wrapup

Code for the above project can be found here

*** Section 26 Project Start - E-Commerce App

• App Overview
• App Architecture
• Package.json Scripts
• Creating a Web Server
• Behind the Scenes of Requests
• Displaying Simple HTML
• Understanding Form Submissions
• Parsing Form Data
• Middlewares in Express
• Globally Applying Middleware

*** Section 27 Design a Custom Database

• Data Storage
• Different Data Modeling Approaches
• Implementing the Users Repository
• Opening the Repo Data File
• Small Refactor
• Saving Records
• Better JSON Formatting
• Random ID Generation
• Finding By ID
• Deleting Records
• Updating Records
• Adding Filter Logic
• Exporting an Instance
• Signup Validation Logic

*** Section 28 Production-Grade Authentication

• Cookie Based Authentication
• Creating User Records
• Fetching a Session
• Signing Out a User
• Signing In
• Hashing Passwords
• Salting Passwords
• Salthing + Hashing Passwords
• Comparing Hashed Passwords
• Testing in Full Flow

*** Section 29 Structuring Javascript Projects

• Project Structure
• Structure Refactor
• HTML Templating Functions
• HTML Reuse with Layouts
• Building a Layout File
• Adding Better Form Validation
• Validation vs Sanitization
• Receiving Validation Output
• Adding Custom Validators
• Extracting Validation Chains
• Displaying Error Messages
• Validation Around Sign In
• Password Validation
• Template Helper Functions
• Adding Some Styling
• Exposing Public Directories
• Next Steps
• Product Routes
• The Products Repository
• Code Reuse with Classes
• Creating The Products Repository
• Building the Product Creation Form
• Some Quick Validation

*** Section 30 Image and File Upload

• Exploring Image Upload
• Understanding Multi-Part Forms
• Accessing the Uploaded File
• Optional - Different Methods of Image Storage
• Saving the Image
• A Subtle Middleware Bug
• Better Styling
• Reuseable Error Handling Middleware
• Products Listing
• Redirect on Success Actions
• Requiring Authentication
• Template Update
• Ids in URLs
• Receiving URL Params
• Displaying an Edit Form

*** Section 31 Building a Shopping Cart

• Editing a Product
• Fixing the HandleErrors Middleware
• Edit Form Template
• Deleting Products
• Starting with Seed Data
• User-Facing Products
• Products index
• Merging More Styling
• Understanding a Shopping Cart
• Solving Problem #1
• Solving Problem #2
• Shopping Cart Boilerplate
• Submission Options
• Creating a Cart, One Way or Another
• Adding Items to a Cart
• Displaying Cart Items
• Rendering the List
• Totaling Cart Items
• Removing Cart Items
• Redirect on Remove

Code for the above project can be found here

*** Section 32 The Basics of Testing

• Testing Overview
• A Simple Function to Test
• A No-Frills Testing Implementation
• Test Driven Development
• Fixing Three Issues
• The Assert Module
• Using Mocha
• App Setup
• Reminder on This App
• Why is Test Setup Difficult
• Mocha in the Browser
• Displaying the Autocomplete
• Verifying the Dropdown State
• Writing Assertions
• Fake DOM Events
• Holding Up Assertions
• Implementiing WaitFor
• Asserting Records Fetched

*** Section 33 Building a Testing Framework From Scratch

• Test Framework Requirements
• Project Setup
• Implementation Steps
• Walking a Directory Structure
• Implementing Breadth First Search
• Collecting Test Files
• Running Test Files
• A Quick Test Harness
• Implementing 'beforeEach' and 'it'
• Adding Basic Reporting
• Adding Colores
• Better Formatting
• Ignoring Directories
• Running Browser-Based JS
• A Sample Web App
• Why JSDOM?
• Building a Render Function
• HTML Element Assertions
• An Incorrectly Passing Test
• Another Small Issue
• Script Execution Delay
• Implementing a Delay
• Fixing a Test

Code for the above project can be found here