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
loopsNodeList.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
loopsArray.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 uselet
- 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
andawait
- 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
andexport
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.