Skip to main content Accessibility Feedback

2021 is the year of modern JavaScript

JavaScript and the browser environment have changed quite a bit since I first released the Vanilla JS Pocket Guides a few years ago.

A lot of the techniques and approaches I recommended in them have been replaced by newer, modern ones that result in less code and a better developer experience. IE is now a deprecated browser.

Today, I released a completely updated set of Pocket Guides, with new methods and modern JS approaches.

If you already own my pocket guides, this is a free update. You can download or watch the new guides from the learner portal.

If you don’t own any guides yet, you can save 30% on any guide or bundle. Today through April 25, use the code ModernJS30 at checkout.

Here’s what’s new…

Updates for all guides

  • Older, more verbose techniques have been replaced with modern methods that do the same thing more simply.
  • Any helper functions that have been replaced by modern JS methods have been removed.
  • I no longer recommend polyfills, since all of the included methods work as-is in all modern browsers on desktop and mobile.
  • All of the videos now include closed captions.

DOM Manipulation

  • for...of loops
  • NodeList.forEach() natively
  • Modern addEventListener() syntax
  • Difference between attributes and properties
  • New project: Toggle password visibility

Strings & Numbers

  • Template literals are now fully supported and recommended
  • String.replaceAll()
  • String.splice()
  • String.includes()

Arrays & Objects

  • Array.includes()
  • Array.findIndex()
  • for...of loops
  • Array.shift()
  • Array.pop()
  • Optional chaining with objects
  • Immutability in multidimensional objects and arrays
  • Object.freeze()
  • The spread syntax
  • Array and object destructuring
  • Object property shorthand syntax

Variables, Functions, & Scope

  • var, let, const, and why you should generally use let
  • Block scope
  • Default function parameters
  • Rest parameters
  • Documenting functions with JSDoc

DOM Injection & Traversal

  • Element.outerHTML
  • Element.innerText
  • Removed legacy methods in favor of simpler modern methods: Node.insertBefore(), Node.appendChild(), Node.removeChild()
  • Node.replaceWith()
  • Node.cloneNode()
  • XSS and URLs
  • Improved string encoding method
  • Node.firstChild
  • Node.lastChild
  • Node.firstElementChild
  • Node.lastElementChild
  • Node.nextSibling
  • Node.previousSibling
  • Node.nextElementSibling
  • Node.previousElementSibling
  • Dropped legacy viewport height and width methods
  • Element.getBoundingClientRect()
  • Intersection Observer API

Browser Storage

  • Expanded cookie options and settings
  • Deep-dive into the IndexedDB API, which now accounts for over half the guide

APIs & Async

  • Promise.finally()
  • Fetching multiple APIs
  • Detailed look at async and await
  • Expanded section on API authentication: Basic Auth and token-based authentication
  • High-level overview of setting up your own middleman API
  • XSS and URLs
  • Improved string encoding method

Writing Plugins is now Writing Libraries

This guide includes totally new recommendations and approaches.

  • What is a JS library?
  • Libraries vs. helper functions
  • Simple utility libraries
  • The Revealing Module Pattern
  • The Constructor Pattern
  • Optional chaining
  • Why prototypes are better for performance
  • Private data with the constructor pattern and prototypes
  • How to destroy a library instance
  • Custom event naming conventions
  • New project: a browser storage library

NEW: ES Modules

This is a brand new guide with all new content.

  • What ES modules are, and when and why to use them.
  • How to import and export ES modules.
  • How to import all exports as an object.
  • How to rename functions and variables when importing and exporting them.
  • What ES module side-effects are, and how to use them.
  • Code structure, nested modules, and common issues.
  • Scoping with ES modules.
  • Performance implications when using native ES modules.
  • How to use rollup.js to bundle modules.
  • What tree shaking is, and why its important.

Web Apps

No changes, but this guide has been removed from the Advanced Bundle (if you already purchased it you will still have access).

It’s being rewritten as a guide to State-Based UI, to more accurately reflect it’s content and newer best practices.

Learn modern JS in 2021

Let’s make 2021 the year you learn modern JS. Today through April 25, get 30% off all guides and bundles.

Visit VanillaJSGuides.com to learn more.