Learn JavaScript Easily with Fullstack Bootcamp

You keep learning from tutorials, but you still can't code in JavaScript.

When you need to code something, you stare at an empty JS file, unsure where to start.

You feel like an impostor because you don't know how to use JS.

Your strategy is to Google for solutions and copy-paste code until something sticks.

You would love to think like a developer but you aren't sure if that's possible.

A step by step guide to JavaScript mastery.

Hello, I'm Ajdin *

*pronounced: Aidan

I'm a self-taught web developer and designer.

Waaay, way back in 1999, was the start of my web development journey. I developed several sites for some local clients: Table based layouts for the world!

I then took a hiatus from coding for several years - I did still follow the industry, but I was not professionally working in it.

Finally, I came back to the web as a profession in 2011.

It was a different world!

Cutting my way through a jungle of code

I literally had to teach myself everything, all over again. It was a tough, tough journey.

Due to my circumstances back then, I had very little time to do it.

I needed to find a way to learn it and hold a dayjob simultaneously.

It didn't help that the JavaScript ecosystem was blowing up at the time.

There were so many frameworks, new languages and paradigms popping up all over the place.

It seemed that no matter how much I tried, the "jungle" just kep getting thicker and bigger.

Where was the magical "X marks the spot"? I couldn't even piece together "a treasure map".

Simply put: I didn't know what I didn't know.

Why is learning JS so hard?

JavaScript is huge. It's as simple as that.

On top of it, there are frameworks, libraries, entire ecosystems inside ecosystems:

What can you do about it?

You could try to do it on your own.

After all, that's what I did. I brute-forced it through sheer will-power.

However, it took me years.

It also made me ask myself some hard questions, like:

Couild I have learned this better? Faster? Easier?

Let's talk about something else briefly. Namely, this guy:

For the past several years, he is among the top 3 players in the world.

Currently, he is the #1 player in the world.

He still has a coach, a mentor.

Someone to guide him.

And he's not the exception.

So, if top athletes still need mentors / trainers / coaches, what would that do for your learning, for your career?

It's a no-brainer.

Finding a mentor means finding someone to:

  • Structure your learning, and speed it up
  • Give you career advice
  • Know your strengths and your weak spots and help you adjust your learning based on them

The web development world is moving at such a fast pace that all of us should take all the help that we can get.

Having a program that guides you step by step through almost the entirety of the JavaScript landscape is surely a welcome boost to your knowledge, skills, and career.

You don't need a Computer Science degree to learn JavaScript

Why is this way of learning JS better for you?

Here's the gist of it:

  1. First, we'll remove the "fog of war" from the map of the JavaScript "land"
  2. We'll dig-in deep into the built-in functionalities of JavaScript
  3. I'll then show you a few hundred carefully-picked examples of solving simple issues in JS
  4. We'll then move onto building more complex "lego blocks"
  5. Next, we'll learn about some advanced JavaScript topics

Additional reasons to choose this program:

  1. I'm constantly improving and fine-tuning this content to make it better-suited for the best possible learning and retention.
  2. With this program you have an in-depth, hands-on reference that you can keep coming back to for years and years - as long as you're in the web development field, this will be an indispensable resource for you.
  3. This program covers 95% of JavaScript. It gives you a unique perspective: you'll know what you know, and you'll also know what are the exact things you need to learn.
  4. You'll learn JavaScript concepts in the right order
  5. Over 80 modules (and growing!)
  6. Mostly text-based so you can easily get to the important parts and skip those that you already know
  7. Over 70 practical projects (this content is still in progress)
  8. Ridiculously low price (for a limited time)
(As soon as we get the first 100 sign-ups, we're raising our monthly subscription to $49 /month)

Here's the complete contents of the Fullstack Bootcamp:

Section 1 (JavaScript Basics)

Module 1: The Absolute Basics
  • A Function is A Machine
  • Generalizing Functions in JavaScript
  • Anonymous functions
  • Conclusions
  • What's next?
  • A quick note about var, let and const
Module 2: The Quick Prototype App
  • Before We Build the App
  • Building the Quick Prototyper App
  • Using Github to Share our code
  • Updating Our Web Page Dynamically
  • Reinforcing Our Learning With Devtools Snippets
  • Start Building the Quick Prototyper snippet
  • Checking for Equality and Running our Code Conditionally
  • Adding a Second Component to Quick Prototyper
  • Passing Custom Arguments to Our Function Calls Based on User Input
  • Prompting For Multiple Components At a Time
Module 3: Understanding Events in JavaScript
  • What are Events in JavaScript
  • Inline Event Handlers
  • How JavaScript Deals with Events
  • Stopping Event Propagation
  • Add an Event Handler to our Page Dynamically
  • The Event Object
Module 4: Improving the UX on Quick Prototyper
  • Adding badges to the list of components
  • Adding Buttons To our App
  • Adding the Navbar to our QuickPrototyper
  • List of Updates Made to QuickPrototyperV10
Module 5: Introducing jQuery
  • Understanding the basics of jQuery
  • Adding the textToEdit and popUpEditor divs
  • Styling the popUpEditor
Module 6: The Anatomy of functions in ES6
  • Comparing ES5 and ES6 functions in JavaScript
  • Function definitions with a single parameter
  • Function definitions with no parameters
  • Converting ES5 to ES6 functions (and vice-versa)
Module 7: Learning JavaScript basics by coding tiny apps
  • What’s fiction writing have to do with coding?
  • Version one of our Learning JavaScript Project
  • Version two of our Learning JavaScript Project
  • Why is this important?
  • Learning JS basics by coding tiny apps: Let’s build a choices game
  • Escaping the console and the prompt function
  • Building the “JS Money” game
  • Using a ternary expression in our game
  • Add CSS classes using JavaScript
  • Conclusion
Module 8: Data Types and Constructors
  • Objects VS non-objects
  • Finding the type of primitives using the typeof operator
  • The number type
  • The null type
  • The undefined type
  • The boolean type
  • The bigint type
  • The symbol type
  • Understanding primitive data types in JavaScript
  • Primitive types cannot be mutated
  • The object type
  • Wrapper objects on primitives in JavaScript
  • Type constructors in JavaScript: The good, the bad, and the ugly
  • What does the “new” operator do?
  • Some built-in objects don’t need a constructor - because they’re static objects
  • Building objects with user-defined constructor functions
  • Rule of thumb: use literals rather than object function constructors
  • Typecasting with type constructors
  • Forgetting the new keyword pollutes global scope!
  • Comparing primitive values in JavaScript
  • Comparing objects in JavaScript
  • Primitives are passed by value
  • Objects are passed by reference
  • Truthy and falsy values and coercion in JavaScript
  • Conclusion
Module 9: JavaScript and the Browser
  • “The states of matter” of a web page
  • A sneak preview: document.write
  • What is the DOM?
  • Is the DOM a part of JavaScript?
  • Where does JavaScript live?
  • Browser and Web APIs
  • JavaScript Engines and Browser Engines
  • How a JavaScript Engine Works
  • The Memory Heap
  • The Call Stack
  • Stack Overflow
  • The memory heap and JavaScript variables
  • Variable hoisting VS function hoisting
  • Using the debugger to understand hoisting
  • The global object
  • The call stack, the global object, and the keyword “this”
  • Functions, call stack, and execution contexts
  • Why do we need the scope chain?
  • Sibling functions don’t share a scope chain
  • Back to the this keyword
  • Conclusion
Module 10: JavaScript is Synchronous, Browser is Asynchronous
  • JavaScript is Single-Threaded and Synchronous
  • Synchronous JavaScript in an Asynchronous Browser
  • Conclusion
Module 11: Basic JavaScript Caveats
  • Higher-order functions
  • Revisiting scope: global, function, and block scope
  • Closures (the products of higher-order functions)
  • Lexical Scope
  • Variables: var VS let and const
  • Operator precedence and associativity
  • Default parameters in functions
  • Using call() and apply()
  • Implicit and explicit context of this
  • Using bind()
  • Working with local storage
  • Method chaining
  • JavaScript loading in an HTML page
  • Nullish coalescing operator
  • Optional chaining operator
Module 12: The Anatomy of a JavaScript Function: all the different ways of defining functions in JS
  • Function declarations
  • Conditionals and function declarations
  • Function expressions
  • Function expressions as IIFEs
  • Function expressions as object methods
  • Function expressions as shorthand methods in ES6 object literals
  • Function expressions as shorthand methods with the computed properties syntax
  • Function expressions as callbacks
  • Function expressions as arrow functions
  • How does the JavaScript engine load functions into the execution context?
  • Function constructors
  • Generator functions
  • Async / await functions
  • Conclusion
Module 13: Understanding arguments and the spread operator
  • How many arguments does a function expect?
  • The arguments variable
  • Can we use the arguments variable with arrow functions?
  • How does the spread operator work in arrow functions?
  • Understanding the arguments local variable in depth
Module 14: JavaScript Arrays in Depth
  • Using the delete method on an array member
  • Does a value exist in an array?
  • Use Array.length to find the last member of array
  • Use Array.length to quickly trim an array
  • Manipulating arrays with pop
  • Manipulating arrays with push
  • Manipulating arrays with shift
  • Manipulating arrays with unshift
  • Manipulating arrays with Array.slice and Array.splice
  • Destructuring Arrays
  • Concat two arrays together
  • Convert an array to a string
  • Flipping the order of items in an array
  • Sorting arrays with Array.sort
  • Exercise: Sort a todo list
  • Additional Exercise: Reverse the order of array
  • Looping over arrays
  • Using the “optimized” for loop
  • Looping over a JS array with for-of
  • Don’t loop over a JS array with for-in
  • Looping over a JS array with the while loop
  • Looping over a JS array with the do while loop
  • Functional approach to looping over arrays in JS
  • Looping over arrays in JS with forEach
  • Looping over arrays in JS with Array.prototype.filter
  • Using Array.prototype.filter followed by Array.prototype.forEach
  • Using Array.prototype.map
  • Using Array.prototype.reduce
  • Using Array.prototype.some
  • Array.prototype.every
  • Using Array.prototype.find
  • Using Array.prototype.sort
  • Looping over arrays: Conclusion
Module 15: Sets and Maps in JavaScript
  • A Set is a Collection of Unique Members
  • Convert a set to an array
  • Convert an array to a set
  • Remove duplicates from an array using a set
  • Just for fun (re-duplicate an array)
  • Does a value exist in a set?
  • Sets don’t consider objects the same even if they hold the same values
  • Check the length of a set
  • Using two sets to find the items that exist in both
  • Deleting set members
  • Comparing sets and weak sets
  • Practical Uses of Weak Sets in JavaScript
  • Looping over sets and weak sets
  • Working with maps in JavaScript
  • A map is like a “countable” object (i.e. a dictionary)
  • Using the map data structure in JS
  • Populating a map data structure in JS
  • Retrieving all the key-value pairs from a map
  • Passing more than one key-value pairs to a new map
  • What is the size of a specific map?
  • Adding key-value pairs to existing maps
  • Does a key exist in a map?
  • Returning a value from a map key in JS
  • Deleting key-value pairs from maps in JS
  • Clearing a map of all key-value pairs
  • Convert a map to an array
  • Convert a map to an object
  • Comparing maps and objects
  • Weak maps in JS
  • Weak maps and weak sets help with memory use
  • Looping over maps
  • Looping over a map with a forEach
Module 16: JavaScript Objects in Depth
  • What are objects in JS?
  • Object literals and object accessors
  • Nesting objects in other objects in JavaScript
  • Working with object properties
  • Running CRUD operations on object properties in JavaScript using brackets notation
  • The difference between the dot notation and the brackets notation for object access
  • Using ternary expressions to determine the value of a property
  • Evaluating expressions inside objects using the brackets notation
  • Listing out object properties
  • JavaScript objects are “pass-by-reference”
  • Passing objects to functions
  • Accessing object properties from object methods
  • Using Object.create method
  • Built-in objects in JavaScript
  • The String object
  • The RegExp object
  • Using RegExp in JavaScript
  • Date object
  • JSON (JavaScript Object Notation)
  • Math object
  • Working with property descriptors
  • Working with the writable property descriptor
  • Working with the enumerable property descriptor
  • Working with the configurable property descriptor
  • Working with getters and setters
Module 17: Working with Objects, Arrays, and JSON
  • Working with JSON received from the web
Module 18: Object-Oriented Programming in JavaScript
  • What is OOP?
  • Polymorphism
  • Encapsulation
  • Inheritance
  • Classes
  • Objects Store Both Functions And Data
  • Building multiple objects
  • Linking Objects with Object.create
  • My name is Proto, Dunder Proto
  • In JavaScript, functions are objects
  • The Proper Way to Use prototype Is With A Constructor Function
  • Getting an Object’s Prototype
  • Why JavaScript is not class-based “under the hood”
  • Constructor functions and object-oriented JavaScript
  • Arrow functions fix the this reference in inner functions
  • Extending Array.prototype with defineProperty
  • Using classes in JavaScript
  • Why use classes over prototypes?
  • Object is a global constructor function
  • Three ways to check for prototype
  • Practice makes perfect: the prototype chain
  • The instanceof operator and object-oriented JavaScript
  • Function, Object and instanceof
  • The Constructor Property
  • Chaining constructors for an object with call
  • Practice makes perfect: let’s build a prototype chain!
  • Using Object.create to add prototypes for objects
  • Static Methods
  • Public and Private Methods
  • Inheritance using extends and super
  • Monkey-patching
  • By-passing inheritance using mixins
  • Shallow copy and deep copy
Module 19: Errors, debugging, and strict mode
  • Throwing errors in JavaScript
  • The try...catch...finally statement
  • Throwing the error
  • Catching the error
  • As soon as an error is thrown, the try block is DONE
  • The finally statement
  • Catching all types of errors
  • Custom error messages
  • Stack Trace
  • Using console.trace()
  • Traces and function names
  • Debugging with console.trace()
  • Stack tracing Error constructors
  • Strict mode
  • 1. All variables must be declared
  • 2. Non-writable global variables cannot be used as a variable names
  • 3. Duplicate parameters are not allowed
  • 4. Functions must be declared in the global scope or directly inside a function
  • 5. The with statement is forbidden
  • 6. Decimals with leading zeros are not allowed
  • 7. Not allowed to set or delete immutable properties
  • Browser sniffing
  • Feature sniffing
  • Debugging JavaScript
  • Debugging with console and alert
  • The quickest way to run the built-in devtools debugger
  • Pausing on exceptions
  • What is a breakpoint?
  • Local scope, global scope, and closures in the debugger
  • Using the debugger keyword to programmatically set a breakpoint
  • Editing breakpoints (watching expressions)
  • Working with different types of breakpoints
  • Step over, step into, step out, and step
  • Debugging with the Step into next function call button
  • The Deactivate / Activate breakpoints button
  • Inspecting the call stack
  • Debugging with Chrome devtools Performance panel
  • Blackboxing scripts
  • JavaScript sourcemaps
  • Avoiding the need to debug
  • Linters and code editors
  • Installing ESLint with npm
Module 20: Modular JavaScript
  • What problems does modular JavaScript code solve
  • How to install Node and npm on our machine?
  • Adding a new project with npm
  • Adding actual code to our npm project
  • Collaborating in a team using npm
  • Using npm scripts and task runners
  • Modular JavaScript
  • We can’t use require in the browser
  • What is a module bundler?
  • Working with ES6 modules (ESM syntax)
  • Working with ES6 modules in the browser
  • Running an Express server
  • How does webpack work?
  • Adding webpack to our JavaScript programs
  • Understanding the structure of the node_modules folder
  • Working with npm scripts
  • Running files with Node.js using npm scripts
  • Running webpack on our project’s files
  • Running webpack on vanilla JavaScript modules
  • Compiling JavaScript modules to a custom output with webpack
  • Specifying custom entry file in the webpack configuration
  • Building HTML files with webpack
  • The module object
  • Exporting various values with module.exports
  • How to set up webpack with html files
  • Conclusion
Module 21: JavaScript Object Notation (JSON)
  • What is JSON
  • Why is JSON so popular?
  • What does valid JSON look like
  • Using JSON tools for increased productivity
  • Looping over JSON objects
  • Making AJAX requests to get JSON data from the web
  • An alternative solution to printing JSON data to screen
  • Transforming objects to arrays to deal with JSON data, explanation
  • Making AJAX requests to get JSON data from our own computer
  • Printing data to screen using nested for loops
  • Conclusion
Module 22: Asynchronous JavaScript
  • What are blocking operations?
  • The XMLHttpRequest constructor
  • The anatomy of an XHR request
  • What are callbacks?
  • Let’s build callbacks from ground up
  • Functions are first-class citizens
  • Passing strings to functions
  • Passing function invocations to functions
  • Higher-order functions take or return other functions
  • Passing named function declarations to other functions
  • Passing anonymous functions to higher order functions
  • Understanding callbacks in general
  • Callbacks are everywhere
  • Running a callback function when a button is clicked
  • Using callbacks to run XHR requests
  • Asynchronous XHR inside a callback function
  • The biggest difference between regular functions and asynchronous (callback) functions
  • The problem with callbacks
  • Callbacks and the inversion of control
  • Callback hell aka The Pyramid of Doom
  • A more realistic example of callback hell
  • Intermission: where we’re at
  • Dealing with errors in callbacks
  • Dealing with callback hell
  • Promises
  • Working with promises using the fetch() method
  • Understanding promises
  • What is the contents of [[]]?
  • Dealing with rejected promises using the catch() method
  • Error handling in promises with catch() and finally()
  • Dealing with rejected promises by passing the second argument to the then() method
  • How do the functions deferred by a promise get back onto the call stack?
  • A few important conclusions regarding promises
  • Working with Promise.all
  • Iterators and Generators
  • Iterators perform work on streams of data
  • The iteration protocol
  • Generators
  • An instance of GeneratorFunction is an iterable object!
  • Returning values dynamically with yield
  • Combining generators with promises
  • Async/Await
  • Observables
  • Revisiting the iterator patern
  • The observer pattern
  • Observables in vanilla JS
  • Revising observables
  • Subscribing to an observable data stream with RxJS
  • Conclusion: The JavaScript Learning Fractal
  • Conclusion
Module 23: Revision (Exercises related to the JavaScript basics)

Strings

  1. Find the character at a specific position in a string
  2. Find the index of a character in a string
  3. Find the first and last occurence of a specific character in a string
  4. Find the sort order of two strings
  5. Split a string with a limit and a separator
  6. Find capital leters in a string
  7. Replace “dog eat dog” with “cat eat cat”
  8. Find a word in a string with RegExp
  9. Convert a JSON string to a JS object and vice versa
  10. Explain polymorphism in JS with the toString() method

DOM Manipulation

  1. Dynamically add a Bootstrap alert to a web page
  2. Add contextual colors dynamically to a Bootstrap alert
  3. Add Bootstrap to any page with JavaScript
  4. Alert the user whenever they click on the body of a document
  5. Add an event handler as a separate function
  6. Change the color of a web page
  7. Add an inline event handler to a div
  8. Dynamically add an inline event handler to any web page
  9. Capture and handle a mouseover event
  10. Examine an event object
  11. Add CSS classes using JavaScript

Validation

Date and time exercises

  1. Save this moment in a variable
  2. Save a previous moment in a variable
  3. Convert a date to a string
  4. Specify a date as a list of time unit arguments

Functions

  1. Generalize a function’s purpose
  2. Generalize a function’s parameters
  3. Show that you can call a function before defining it
  4. Cause a stack overflow
  5. Prove that a function expression is not hoisted
  6. Give an example of a higher-order function
  7. Return a closure from a higher-order function
  8. Use default parameters in a function
  9. Show that with call() we can specify the context of this when invoking a function
  10. Avoid the strict mode throwing an error for a function definition inside an if statement
  11. Show that an anonymous function’s name is an empty string
  12. Prove that the variable assigned to an anonymous function becomes that function’s name
  13. Passing objects to functions
  14. What does calling __proto__ return for a user-defined function?

Arrays

  1. Find the max value in an array of numbers without using a loop
  2. Replace an array member with undefined
  3. Check if a value exists in an array
  4. Find the last member of array
  5. Trim an array with length
  6. Trim an array with pop()
  7. Add to an array with push()
  8. Trim an array with shift
  9. Add to an array with unshift
  10. Extract the last two items from an array
  11. Extract the first item with splice()
  12. Group multiple variables in an array
  13. Get multiple variables out of an array
  14. Trim an array using the ... operator
  15. Concat two arrays
  16. Convert an array to a string
  17. Flip the order of items in an array
  18. Sort an array of strings
  19. Sort an array of numbers
  20. Extract data from an array of objects using Array.prototype.map
  21. Sum up all array items with Array.prototype.reduce
  22. Add a fixed amount to any sum with Array.prototype.reduce()
  23. Find at least one member in array that passes some test
  24. Check if all array items pass a test
  25. “Find a thief” with Array.prototype.find
  26. Convert a set to an array
  27. Convert an array to a set
  28. Remove duplicates from an array using a set
  29. Check if a value exists in a both a set and an array
  30. Prove that arrays and sets hold to their members strongly
  31. Prove that weak sets hold to their members weakly
  32. Convert a map to an array
  33. Define a computed getter on Array constructor’s prototype

Objects

  1. Use object access operator (the dot) to expand a JS object
  2. Expand an object using the bracket notation for the object property access
  3. Show that static objects don’t use the keyword new
  4. Define a constructor function and build an object instance with it
  5. Show that not using the new keyword with a constructor pollutes global scope
  6. Show that window is the global object in the browser
  7. Bind a specific this to an object and show that the bond won’t break
  8. Use computed properties in an object definition
  9. Give an example of an async/await function
  10. Show that we can’t use the built-in arguments variable in an arrow function
  11. Fix the above problem using the spread operator
  12. Use reduce() in an arrow function to concat all args
  13. Convert a map to an object
  14. Loop over an object with the help of maps
  15. Show the difference between deleting a property and setting it to undefined on an object
  16. Show that with brackets notation, we can use variables to access object keys
  17. Use a ternary to find the value of a property
  18. Evaluate an expression inside an object with brackets notation
  19. List out object’s properties
  20. Build an object with a specific prototype using Object.create()
  21. Get an object’s own property descriptors
  22. Make an object’s own property non-writable
  23. Prove that setting a property as non-writable won’t work if that property is an object
  24. Make nested objects read-only
  25. Dynamically include/remove a property from being looped over in an object
  26. Inspect all the object’s own enumerable property names
  27. If enumerable is false, will it show in JSON.stringify on an object?
  28. Show in code what configurable does on an object’s property
  29. Does configurable set to false prevent writable being set to false?
  30. Can we delete a property if its configurable is false?
  31. Add a getter and a setter to an object
  32. Give an example of a factory function
  33. Make objects share methods using Object.create()
  34. Prove that in JavaScript, functions are objects
  35. Show that prototype exists only on functions
  36. What does accessing __proto__ on a user-defined object return?
  37. Why JavaScript is not class-based “under the hood”
  38. Extend a constructor function’s prototype to keep functionality DRY
  39. Fix the scoping issues of nested methods inside the user-extended properties on a constructor function’s prototype
  40. Fix the this reference in inner functions
  41. Prove using code that the toString() method sits on an object literal’s prototype
  42. List three ways to check for an object’s prototype
  43. Show what the instanceof does
  44. Chain constructors for an object with call
  45. Make constructors more versatile with a configuration object parameter
  46. Give an example of a custom static method on a user-defined class
  47. Make a property private on a user-defined class
  48. Use extends and super in a user-defined class
  49. Give an example of monkey-patching
  50. By-pass inheritance using mixins
  51. Show the difference between shallow copy and deep copy
  52. Convert a JSON string to a JS object
  53. Convert a JS object to a JSON string

Loops

  1. Run a block of code multiple times with a for loop
  2. Run a for loop on an array of objects
  3. Loop over an array with a condition
  4. Cache the array length to speed up a for loop
  5. Loop over an array of objects with for..of
  6. Show why you shouldn’t loop over an array with a for..in
  7. Loop over an array with the while loop
  8. Loop over an array with the do while loop
  9. Loop over an array with forEach
  10. Index the output of array items with forEach
  11. Loop over arrays with Array.prototype.filter()
  12. “Break out” of a forEach loop using filter()
  13. Loop over JSON objects
  14. Print JSON data to the screen using a forEach
  15. Printing data to screen using nested for loops

XHR and AJAX

  1. Using the setTimeout() method, run some code after a specified amount of time
  2. Give an example of an XHR request
  3. Give an example of a callback
  4. Pass a function invocation to a function
  5. Invoke a higher order function with two params, where the second param is a callback that takes the first param
  6. Invoke a higher order function with two params, where the second param is a delayed callback
  7. Run a callback function when a button is clicked
  8. Run an asynchronous XHR inside a callback function
  9. What’s the biggest difference between regular functions and asynchronous (callback) functions?
  10. Why keep the result of a callback inside a callback?
  11. Give an example of the pyramid of doom
  12. Give an example of nested XHR calls with jQuery’s getJSON() method (including error handling)
  13. Mitigate callback hell by separating nested callbacks into named functions
  14. Give an example of promises with fetch()
  15. Alert the data returned from a promise
  16. Error handling in promises with catch() and finally()
  17. Deal with rejected promises by passing the second argument to the then() method
  18. Use async/await with fetch()
  19. Invoke a function returned from a higher-order function, and use the returned function as an iterable
  20. Implement the iteration protocol using Symbol.iterator
  21. Define a generator function
  22. Show that an instance of the GeneratorFunction satisfies the iterator protocol
  23. Show a suspended generator function and how yield works with it
  24. Return values dynamically with yield
  25. Push the result of the third time a value gets yeilded, into an array
  26. Combine generators with promises
  27. Give an example of an async/await with fetch
  28. Use an anonymous async function with an event
  29. Subscribe to an observable data stream with RxJS

Non-assorted exercises

  1. Find the type of a primitive
  2. Prove the immutability of primitives
  3. Show that primitives are pass-by-value
  4. Show that objects are pass-by-reference
  5. Show the difference between the == and the === operators
  6. Show that variables from inner scope can’t be used in outer scope
  7. Prove that let doesn’t pollute global scope
  8. Find items that exist is both sets
  9. Delete set members
  10. Build and populate a map data structure
  11. Pass multiple key-value pairs to a new map
  12. Find the size of a map
  13. Add key-value pairs to existing maps
  14. Check if a key exists in a map
  15. Deleting and clearing key-value pairs from maps
  16. Build a WeakMap data structure
  17. Loop over a Map data structure
  18. What’s the convenience of class syntax in JS (with an example)?
  19. Throw an error in JS
  20. Catch an error in JS
  21. Show that try stops executing when error is thrown
  22. Throw an error with a custom message
  23. Get a stack trace on demand with console.trace
  24. Show an example of debugging with console.trace()
  25. Show an example of stack tracing an error constructor
  26. Perform some simple browser-sniffing
  27. Show an example of feature-sniffing
  28. Show how to use console.assert()
  29. Use console.count
  30. Use console.time
  31. Show the difference between unary prefix and postfix increment
  32. Expose only parts of a module

Section 2 (Built-in Objects)

Module 24: An overview of standard built-in objects
  • An overview of standard built-in objects
Module 25: The Object object
  • The Object object
  • The Object object’s methods and properties
  • Static methods on the Object object
  • Object object’s static “create” methods
  • Object object’s static “read” methods
  • Object object’s static “update” methods
  • Object object’s static “freeze” methods
  • Object object’s instance properties and methods
  • Object object’s instance properties
  • Object object’s instance methods
  • Object object’s deprecated instance methods
  • Object object’s “checker” instance methods
  • Object object’s “conversion” instance methods
Module 26: The Function object
  • The Function object
  • Function.prototype.apply()
  • Whip up “Array.max” method with Function.prototype.apply()
  • Function.prototype.call()
  • Function.prototype.bind()
  • Why bind a function?
  • Use bind() to cement the context of this
  • Use bind() to partially apply a function
  • Use bind() to pass context to setTimeout()
  • Use bind() for invocation shortcuts
  • Function.prototype.toString()
Module 27: The Boolean object
  • The Boolean object
  • The Boolean constructor and boolean primitives behave differently
  • Don’t convert a non-boolean using the constructor!
  • Built-in Boolean object’s instance methods
Module 28: The Symbol object
  • The Symbol object
  • There’s no “shorthand syntax” for the symbol primitive
  • Symbol() is a factory function
  • Why is the Symbol() not a true constructor?
  • Using a symbol’s optional description argument
  • How to get a symbol’s description?
  • Why Symbols in ES6?
  • How to add a symbol to an object literal?
  • Getting the value of a symbol key from an object
  • Symbols are excluded from for...in loops
  • Pseudo-hidden properties on objects are made possible by symbols
  • Why symbols in ES6, again?
  • Why symbols are not truly hidden?
  • Symbols are skipped in JSON conversions
  • Symbols can be used to avoid code collisions
  • Symbols can be used to fix ENUM lists
  • Use symbols as metadata storage
  • The global symbol registry
  • The difference between local and global symbols
  • Well-known symbols
  • Conclusion
Module 29: Built-in collection objects: Array
  • The Array object
  • The Array[@@species] accessor
  • The Array.prototype[@@iterator]() instance method
  • The Array.prototype[@@unscopables] instance property
  • The Array.from() static method
  • The Array.of() static method
  • The Array.prototype.entries() instance method
  • The Array.prototype.keys() instance method
  • The Array.prototype.values() instance method
  • The Array.prototype.findIndex() instance method
  • The Array.prototype.lastIndexOf() instance method
  • The Array.prototype.toLocaleString() instance method
  • The Array.prototype.toString() instance method
  • The Array.prototype.reduceRight() instance method
Module 30: Built-in collection objects: typed array objects
  • Why typed arrays in JS?
  • The immutability of Blob
  • Extracting Blob slices
Module 31: Built-in collection objects: maps, sets, weak maps, weak sets, and arguments
  • The Map object
  • The Set object
  • The WeakMap object
  • The WeakSet object
  • The arguments array-like object
Module 32: Error objects
  • How to throw errors in JS?
  • How to catch errors in JS gracefully?
  • How to customize error messages in JS?
  • What’s a stack trace?
  • Strict mode and errors
  • Browser sniffing and errors
  • Errors and debugging
Module 33: Async-related and JSON-related objects
  • An overview of built-in async-related objects, their properties, and methods
  • The Promise() constructor and the then() instance method
  • Wrapping methods into promise objects
  • Passing one more promise to the resolveFn
  • The Promise.all(iterable) static method
  • The Promise.allSettled(iterable) static method
  • The Promise.any(iterable) static method
  • The Promise.race(iterable) static method
  • The Promise.reject(reason) static method
  • The Promise.resolve(value) static method
  • The GeneratorFunction() and AsyncFunction()
  • Using Generator.prototype.next()
  • Using Generator.prototype.return()
  • Using Generator.prototype.throw()
  • The JSON object
  • JSON.parse(text[, reviver])
  • JSON.stringify(value[, replacer[, space]])
  • The ArrayBuffer object
  • The SharedArrayBuffer object
  • The Atomics object
  • The DataView object
  • Browser sniffing and errors
  • Errors and debugging
Module 34: String, number, date, and internationalization objects
  • String object’s built-in methods and properties
  • “CREATE” string methods
  • “READ location” string methods
  • “READ inclusion” string methods
  • “READ string comparison” string methods
  • “UPDATE join and split” string methods
  • “UPDATE spacing” string methods
  • “UPDATE letter casing” string methods
  • DELETE
  • The String.prototype regex (pattern-matching) methods
  • Number object’s built-in methods and properties
  • Date object’s built-in methods and properties
  • Intl object’s built-in methods and properties
Module 35: Regular expressions in JavaScript
  • What is a regular expression in JavaScript?
  • Regular expression literal
  • Check if an object is of RegExp type
  • RegExp constructor function
  • RegExp modifiers (aka “pattern flags”)
  • String.prototype.split() with RegExp
  • String.prototype.replace() with RegExp
  • String.prototype.search with RegExp
  • String.prototype.match with RegExp
  • String.prototype.matchAll() and String.prototype.replaceAll()
  • Character classes (aka character sets)
  • Combining character classes
  • Negating character classes
  • Using the pipe for optional matching
  • Metacharacters
  • Regular expressions quantifiers
  • RegExp assertions
Module 36: Reflection and proxy objects (metaprogramming in JS)
  • The Reflect object
  • The Proxy object
  • Specifing a proxy handler object
  • An example of each trap method
  • Back to the Reflect object
  • Proxy (trap) invariants
  • Revocable proxies
  • Building a proxy of a proxy
Module 37: Web assembly objects
  • pending
Module 38: Revision (built-in objects cardio)
  1. Build a new object and specify its prototype
  2. Copy enumerable own properties from one object to another
  3. Copy enumerable own properties from multiple objects into a single object
  4. Convert an array of arrays into an object
  5. Covert an object into an array of arrays
  6. Log out an object’s members as key-value pairs
  7. Inspect an objects own property descriptor(s)
  8. An alternative way of counting the number of members in an array
  9. Count the number of members in an associative array
  10. Find the number of own properties that an object has
  11. Get values out of an associative array
  12. On an object, add a named property with property descriptor editability
  13. On an object, add multiple named properties with property descriptor editability
  14. Prevent an object’s shallow properties from being deleted or changed (freeze an object)
  15. Freeze an array
  16. Prevent exensions of object’s properties but allow for deletions
  17. Prevent extensions and deletions of an object’s properties
  18. Define getters and setters on an object’s property
  19. Define getters and setters directly on an object literal
  20. Inspect getters and setters on an object’s specific property
  21. Check if an object has an own property and return a boolean of the result
  22. Check if an object’s own property’s property is enumerable
  23. Check if an object is a prototype of another object
  24. Call a method to check the number of arguments a function expects
  25. Log out all the arguments passed to a function call using the arguments array-like object
  26. Apply an object as the this value of another object’s method
  27. Pass arguments to a function using the apply() method without specifying the this argument
  28. Concatenate any number of arguments using the built-in “arguments” array-like variable
  29. Sum up any number of arguments using the built-in “arguments” array-like variable
  30. Concatenate the values of all the object’s properties, using another object’s joiner function
  31. Borrow Math.max() static method and apply it on an array of numbers to get the highest number
  32. Borrow Math.min() static method and apply it on an array of numbers to get the highest number
  33. Use apply to monkey patch (extend) a built-in object as a polyfill on an older browser
  34. Borrow a method from one object to another object using call() without arguments
  35. Borrow a method from one object to another object using call() with arguments
  36. Use apply() instead of call() in a given code snippet
  37. Prove that every function call is calling the call() method in the background
  38. Chain constructors with the call() method
  39. Fix the problem of keeping the context of this in a nested function
  40. Why bind a function?
  41. Use bind() to cement the context of this
  42. Use bind() to partially apply a function
  43. Use bind() to pass context to setTimeout()
  44. Use bind() to make invocation shortcut on Array.prototype.slice()
  45. Set a symbol as an object’s key
  46. Add a symbol to an object literal
  47. Prove that each symbol is unique
  48. Check if a variable is of type symbol
  49. Log out a symbol’s description
  50. Why were symbols added to ES6?
  51. Get the value of a symbol key from an object
  52. Prove that symbols are excluded from for..in loops
  53. Add a symbol to an object without storing the symbol in a variable beforehand
  54. Prove that symbols are skipped in JSON conversion
  55. What will happen if we try to reassign an existing symbol property in an object
  56. Use a symbol to fix an ENUM list
  57. Show how to use a symbol as a metadata storage
  58. Show a use case for the Array[@@species] accessor
  59. Reimplement a “regular” iterator with Array.prototype[@@iterator]()
  60. Build an iterator that iterates over every even member of an array
  61. Build an iterator that iterates over every odd member of an array
  62. Convert a Set to an Array
  63. Use a mapping function with Array.from()
  64. Convert a string to an Array with Array.of()
  65. Iterate over an array with Array.prototype.entries
  66. Iterate over an array and break out of a loop based on a condition, using Array.prototype.entries
  67. Split an array into a series of arrays using Array.prototype.entries
  68. Split an array into a series of objects using Array.prototype.entries
  69. Push array keys into a separate array using Array.prototype.keys
  70. Print array values using Array.prototype.values
  71. Find index of a matching member of array or return -1 with Array.prototype.findIndex
  72. Search for a match from the end of array with Array.prototype.lastIndexOf
  73. Localize a decimal number as price with Array.prototype.toLocaleString
  74. Concatenate all args using Array.prototype.reduce
  75. Concatenate all args using Array.prototype.reduceRight
  76. How to throw errors in JS?
  77. How to catch errors in JS gracefully?
  78. How to customize error messages in JS?
  79. Show that the Promise() constructor must take a callback function
  80. Why no error is thrown when we call then() on a promise, without passing any functions to then()
  81. Build a promise that randomly fetches data from coindesk or throws an error, and catches it
  82. Display a message at the end of a promise regardless of whether it succeeds or fails
  83. Deal with potential errors by passing the second argument to the then() call in a promise
  84. “Promisify” a method that does not usually return a promise object
  85. Log out a sentence from inside a promise
  86. Send a notification of a promise successfully fulfilled
  87. Give an example of using Promise.reject()
  88. Give an example of using Promise.resolve()
  89. Return the GeneratorFunction() constructor
  90. Return the AsyncFunction() constructor
  91. Iterate values using Generator.prototype.next()
  92. Iterate an array using Generator.prototype.next()
  93. Send values to the generator
  94. Show that the Generator.prototype.return() finishes the generator

Section 3 (Practical Snippets)

Module 39: Is this a section on algorithms?
  • Is this a section on algorithms?
  • Describing an algorithm using a flow chart
  • Conclusion
Module 40: Snippets related to randomness
  1. Emulate a six-sided dice
  2. Pick a random member from an array
  3. Emulate a six-sided dice (second approach)
  4. Pick a random member from an array (second approach)
  5. Side-note: the anatomy of JS functions and a-ha moments
  6. Randomly return a true or false
  7. Get a number randomly from a range of numbers
  8. Get a number randomly from a range of numbers (version 2)
  9. Get a float randomly from a range of integers or floats
  10. Generate a random string of characters
  11. Generate a random hex color
  12. Generate a random string of characters (second approach)
  13. Generate a random Universally Unique Identifier
  14. Randomize order of members in a JavaScript array (“shuffle”)
  15. Generate a random password
  16. Select three random elements from a web page
  17. Add random CSS classes to a paragraph
  18. Generate a random number between -10 and 10
  19. Generate a random sub-array from a larger array
  20. Never repeat a random dice throw twice in a row
  21. Get a palette of three shades of a random color
  22. Use Math.random() to imitate the bell curve
Module 41: Snippets related to numbers
  1. Format a number with a comma as thousands separator
  2. Format a number as currency
  3. Convert an array of numbers to an array of ordinal numbers
  4. Count the number of times a sub-string appears in a string
  5. Count all elements with background set to a specific color
  6. Add leading zeros in front of a number
  7. Add up (or subtract) all the arguments passed to a function
  8. Multiply (or divide) all the arguments passed in to a function
  9. Get the average value of all the arguments
  10. Calculate a Fibonacci sequence
  11. Compute the factorial of a number
  12. Calculate the lazy caterer’s sequence
  13. Convert a number into an array of its digits
  14. Calculate the remainder of division of all arguments
  15. Convert a string to a number
  16. Round a number to a specific number of decimals
Module 42: String-related snippets
  1. Find all vowels in a piece of text
  2. Convert a string to an array
  3. Convert an array to a string
  4. Capitalize a string
  5. Capitalize the first letter of a string
  6. Make the first character of a string lowercase
  7. Capitalize the first letter of each word in a given string
  8. Replace the first occurence of a substring with another string
  9. Replace all instances of a substring with another string
  10. Convert kebab case to camel case
  11. Convert camel case to kebab case
  12. Convert snake case to camel case
  13. Convert a string to snake case
  14. Convert a string to camel case
  15. Convert a string to pascal case
  16. Convert a string to kebab case
  17. Repeat a string
  18. Reverse a string
  19. Check if a string is a palindrome
  20. Find if a word is an anagram
Module 43: DOM manipulation snippets
  1. Replace type="password" with type="text"
  2. Convert all inputs on a page into type="text"
  3. A simple recipe for styling anything on a page dynamically (using JS)
  4. Check if one element is a parent of another element
  5. Get the parent of an element
  6. Get all siblings of an element
  7. Check if an element is in focus (active)
  8. Find all the attributes of a specific kind on a page
  9. Insert a style tag with JavaScript
  10. Get the dimensions of a given element in the DOM
  11. Filter a JS object and show it in the DOM
  12. Get the value of selected option
  13. Wrap a div in another div dynamically
  14. Apply a parent to an iframe
  15. Remove an element by using its own reference
  16. Query for elements with a specific text node
  17. Trigger a mouseover event programatically
Module 44: validation snippets
  1. Validate that a given number is even
Module 45: Date and time snippets
  1. Build a date that is N days from now
  2. Display a live clock in the browser
Module 46: Snippets related to working with functions and classes
  1. Write a function that can be invoked multiple times at once
  2. Write a function that can be invoked one time only
  3. Check if a value is an async function
  4. Check if a value is a generator function
  5. Check if a value is any kind of function
  6. Save all function calls in an array
  7. Convert an async ES5 function into an async ES6 function
  8. Make custom methods chainable
  9. Write a debounce function
  10. Use classes to replace functions in JS
  11. Extend a class
  12. Write a function that finds out how many stacks it takes to cause stack overflow
Module 47: Array-related snippets
  1. Remove falsy values from an array
  2. Delete items from an array using filter() and map()
  3. Shallow copy an array
  4. Partially hide characters in an email
  5. Build a multi-dimensional array in JS
  6. Flatten a two-dimensional array
  7. Check if a specific value exists in array, using filter()
  8. Find the same values in two arrays
  9. Build a sparse array
  10. What happens when you pass a function to Array.from()?
  11. Pass an object with length property to Array.from() to make a range of numbers
  12. Build a multiplication table with fizzBuzz checks built-in
  13. Get the remaining array members after a specified position
  14. Slice an array by N members, from beginning or end
  15. Build an array of arrays with map()
  16. Rearrange an array by placing the last item to position 0
  17. Revolve an array by N numbers
  18. Filter an array into a sub-array with destructuring
Module 48: Snippets related to working with objects
  1. Get the length of an object
  2. Convert an object to array
  3. Combine multiple objects into a new one using Object.assign()
  4. Build a new object as a subset of an existing object
Module 49: JSON and async-related snippets
  1. Run JSON.parse() on an object and JSON.stringify() on a JSON string
Module 50: Loops-related snippets
  1. Give an example of setting and clearing an interval in JS, then use it as a “loop”
  2. “Looping” with requestAnimationFrame()
Module 51: Snippets related to XHR and Ajax
  1. Display the steps that an XHR request goes through
  2. Fetch data wrapped in a promise from an API and display it on a screen
  3. Log out the response data using the fetch() method
Module 52: Events-related snippets
  1. Find the key code for a keydown or keyup event
  2. Find the amount of time that has passed between two button clicks
  3. Improve events with closures
Module 53: Non-assorted exercises
  1. Show the difference between var, let, and const as related to hoisting
  2. Track the number of times a user clicked a button using localStorage
  3. Make JavaScript talk
  4. Encode and decode URI strings
  5. Save, retrieve, and delete cookies with JavaScript
  6. Swap two variables using an intermediary variable
  7. Swap two variables using array destructuring
  8. Swap two variables using basic math
  9. Swap two variables using the XOR bitwise operator (^)
  10. Swap the values of n variables arbitrarily
  11. Perform conditional logic without if, else, or switch

Section 4 (Stand-alone components and mini-apps)

Module 54: Dynamically update a paragraph
  • Using the onchange attribute
  • Storing the values from the input into a JS variable
  • Updating the DOM with the value of the input field
  • Displaying previous user-generated text using an array
  • Clearing the input when the user has finished typing
  • Adding a space character between each of the user inputs
  • Making our code as dynamic as possible
  • Setting multiple attributes at once
Module 55: Build a multiplication table
  • How to make a multiplication table with a nested for loop
  • Bonus: Domain-name generator
Module 56: Build a Style Dynamizer
  • Using the onchange attribute
  • Storing the values from the input into a JS variable
  • Updating the DOM with the value of the input field
  • Displaying previous user-generated text using an array
  • Clearing the input when the user has finished typing
  • Adding a space character between each of the user inputs
  • Making our code as dynamic as possible
  • Setting multiple attributes at once
Module 57: Build a modal in vanilla JS
  • Adding styles
  • Preparing the styles for toggling the modal visibility
  • Attaching an event listener to a button
  • Adding the show class to our modal’s markup
  • Removing the show class from our modal’s markup
  • Conclusion
Module 58: Build a full-page navigation menu
  • Starting with the modal code from the previous chapter
  • Planning the updates
  • Update the HTML
  • Update the CSS
  • Remove the redundant HTML and CSS code
  • Updating the JS with updated class names
  • Conclusion
Module 59: Build a slider in vanilla JS
  • How does our simplest possible slider work?
  • Improving our slider
  • Adding the slider buttons (left and right arrows)
Module 60: Build a blog post image maker
  • Scratching our own itch
  • Preview the app live
  • Building the app from scratch
  • Getting the values from the option element using JavaScript
Module 61: Simple stopwatch
  • Building the reset functionality
  • Adding the stopwatch timer
  • Adding the Pause functionality
  • Fixing the time measurement issues
  • The cop-out solution
  • Building a stopwatch using the Date object in JS
  • Incorporating the Date updates in our interval
  • Add proper formatting to our stopwatch
Module 62: Simple timer
  • The simplest possible timer in JavaScript
Module 63: Simplest possible lightbox
  • Starting to build our lightbox
  • Adding a single image
  • Showing a larger version of the photo
  • Adding the “close modal” functionality
  • Fixing the broken styling
  • Adding additional images to our lightbox example
  • Assessing the problem to solve
  • Re-thinking our implementation
  • Putting the entire carousel into a modal
  • Adding the second image to the preview and the modal
  • Making our lightbox more realistic
  • Getting rid of the hard-coded numbers in nextSlide() and prevSlide() methods
  • Adding the close button functionality
Module 64: An accordion in JS
  • Plan the structure of our simple accordion
  • Adding styles
  • Setting up the logic using JavaScript
  • Conclusion
Module 65: A dropdown button in JS
  • Adding the HTML and CSS
  • Making the dropdown toggle display with JS
  • Updating the styles
  • Registering a click outside of the dropdown div
Module 66: A tabbed navigation in JS
  • Why tabs?
  • Tabs variations
  • Examples of tabbed navigation in use
  • Planning the HTML structure
  • Planning the CSS styles
  • Planning the JS logic
  • Writing our HTML code
  • Writing our CSS code
  • The result of our current code
  • Adding the tab panels
  • Writing the JS code
  • Setting up click event listeners on tab menu items
  • Displaying the active class on the clicked tab menu item
  • Show the appropriate tab panel on click
  • Cleaning up the previous active panels
  • The completed code
  • Conclusion
Module 67: A popover in JS
  • Popover component use cases
  • The logic of the popover component
  • Writing the popover component’s HTML code
  • Styling the popover component
  • Adding the JavaScript behavior to our popover
  • Making the popover “travel” with the button
  • Conclusion
Module 68: Sliding nav
  • The most basic sliding nav
  • Hiding the nav
  • Improving our simplest sidebar nav
  • Adding a transition using CSS
  • Revising the steps to build a sidebar sliding nav
  • Conclusion

Section 5 (Advanced JavaScript)

Module 69: Browser APIs (aka Web APIs)
  1. Introduction
  2. The available browser APIs list
  3. Ambient Light Events
  4. Background Tasks
  5. Barcode Detection API
  6. Battery API
  7. Beacon
  8. Bluetooth API (experimental)
  9. Broadcast Channel API
  10. CSS Counter Styles
  11. CSS Font Loading API (experimental)
  12. CSS Painting API
  13. CSS Typed OM API
  14. CSSOM (CSS Object Model)
  15. Canvas API
  16. Channel Messaging
  17. Clipboard API
  18. Console API
  19. Contact Picker API
  20. Content Index API
  21. Credential Management API
  22. DOM
  23. Encoding API
  24. Encrypted Media Extensions
  25. Fetch API
  26. File System API
  27. File System Access API
  28. Frame Timing API (Experimental)
  29. Fullscreen API
  30. Gamepad API
  31. Geolocation API
  32. HTML Drag and Drop API
  33. HTML Sanitizer API
  34. High Resolution Time
  35. History API
  36. Image Capture API
  37. IndexedDB
  38. Intersection Observer API
  39. Long Tasks API (Experimental)
  40. Media Capabilities API
  41. Media Capture and Streams
  42. Media Session API
  43. Media Source Extensions
  44. MediaStream Recording
  45. Navigation Timing
  46. Network Information API
  47. Page Visibility API
  48. Payment Request API
  49. Performance API
  50. Performance Timeline API
  51. Periodic Background Sync
  52. Permissions API
  53. Picture-in-Picture API
  54. Pointer Events
  55. Pointer Lock API
  56. Proximity Events (Experimental)
  57. Push API (Experimental)
  58. Resize Observer API
  59. Resource Timing API
  60. Screen Capture API
  61. Screen Wake Lock API
  62. Server Sent Events
  63. Service Workers API
  64. Storage
  65. Storage Access API
  66. Streams
  67. Touch Events
  68. URL API
  69. Vibration API
  70. Visual Viewport
  71. Web Animations
  72. Web Audio API
  73. Web Authentication API
  74. Web Crypto API
  75. Web Notifications
  76. Web Storage API
  77. Web Workers API
  78. WebGL
  79. WebRTC
  80. WebVR API
  81. WebVTT
  82. WebXR Device API
  83. Websockets API
Module 70: Important and interesting browser APIs in more depth
  • Ambient Light Events
  • Background Tasks
  • Barcode detection API
  • Canvas API
  • Clipboard API
  • Console API
  • DOM API
  • Fetch API
  • HTML Drag and Drop API
  • History API
  • IndexedDB API
  • Intersection Observer API
  • Picture-in-picture API
  • Resize Observer API
  • Web Animations API
  • Web Audio API
  • Web GL API
  • WebRTC API
  • Websockets API
Module 71: Important and interesting browser APIs in more depth
  • Ambient Light Events
  • Background Tasks
  • Barcode detection API
  • Canvas API
  • Clipboard API
  • Console API
  • DOM API
  • Fetch API
  • HTML Drag and Drop API
  • History API
  • IndexedDB API
  • Intersection Observer API
  • Picture-in-picture API
  • Resize Observer API
  • Web Animations API
  • Web Audio API
  • Web GL API
  • WebRTC API
  • Websockets API
Module 72: The DOM API in depth
  • The DOM is a tree of JS Node Objects
  • Node Object Types
  • DOM Interfaces
  • The Node hierarchy and the Document hierarchy
  • The most frequently used methods of the DOM API
  • Other interesting DOM snippets
  • How DOM extension works
  • Extending an HTML element
  • The overview of DOM interfaces
Module 73: Advanced techniques (memoization, debouncing, throtlling, recursion, etc.)
  • Memoization
  • Debouncing
  • Throtlling
  • Recursion
Module 74: Webpack quick start
  • Webpack installation
  • Webpack loaders
  • Loading assets
  • Code splitting
Module 75: Memory, memory management, and garbage collection in JavaScript
  • Memory management
  • Heap and stack in memory allocation
  • Automatic memory allocation in JavaScript: static and dynamic allocation
  • Memory life cycle in JavaScript
  • References in JS
  • The Garbage Collector
  • JavaScript apps often use more memory then they have to
  • Memory Leaks: the usual suspects
  • Finding memory leaks
  • Fixing memory leaks
Module 76: Test-Driven Development
  • What is TDD
  • Working with TDD
  • Different kinds of testing
Module 77: RxJS and observables
  • Streams of data
  • Reactive JavaScript
  • What kind of data can come from the observable stream?
  • Subscribing to observables
Module 78: Functional programming in JavaScript
  • What is it?
  • FP vs OOP
  • Declarative and imperative paradigms
  • Immutability
  • Function Composition, Partial Application, and Currying
Module 79: Understanding Node.js
  • Installing and setting up
  • Revisiting the Node.js ecosystem
  • Node modules
  • Writing a server
  • Streams, pipes, and stream events
  • Working with the filesystem
  • Introducing express
  • Routing and Middleware
  • Error Handling
  • Writing a simple fullstack JavaScript app
Module 80: Advanced JSON
  • pending
Module 81: JavaScript Security
  • pending
Module 82: Data Structures in JavaScript
  • pending
Module 83: Clean Code in JavaScript
  • pending
Module 84: Clean Code in JavaScript
  • pending
Module 85: Progressive Web Apps
  • pending
Module 86: Workers
  • Two major types of workers
  • Why do we need workers
Module 87: Improving Our Worflows
  • pending
Module 88: Getting Intimate with Chrome DevTools
  • pending

Feel free to check out my work here: