Posts About JavaScript

Creating a Custom webpack Plugin

Create your own simple webpack plugin. We'll see how webpack's architecture is implemented and how plugins work under the hood.

The V8 Engine and JavaScript Optimization Tips

A 5,000 feet overview of how the V8 JavaScript engine works and how to write JavaScript code that's optimized for fast parsing speed.

Animations with the Canvas API - Part 3: Gravity and Dynamic Rendering

In this last part of our short series on creating animations using the JavaScript Canvas API we go over creating a gravity effect via a demo raindrop animation.

Animations with the Canvas API - Part 2: Basic Collisions

Learn how to create more complex animations that contain collision effects using the JavaScript Canvas API.

Understanding Variable Scope in JavaScript

In this post, we'll explore variable scope, a key JavaScript concept to understand in order to write better code and understand the code you write.

Animations with the Canvas API - Part 1: Linear Motion

Learn how to create basic animations using the HTML Canvas element and the corresponding JavaScript API.

Draw the Alligator.io SVG Logo with GreenSock

Learn the basics of how to draw SVG graphics using GreenSock (aka GSAP), a popular JavaScript animation library.

Using the Trim String Method in JavaScript

In this short post, we'll take a look at the Javascript trim method available on strings.

What is the preventDefault Event Method in JavaScript?

Learn about the all-powerful preventDefault method available on event objects in JavaScript.

A Simple Way to Animate Scrolling Effects in JavaScript

Did you know there's a native way to animate scrolling with JavaScript? Let's go over how it's done in this post.

Using the Array.find Method in JavaScript

In this short post, we will explore JavaScript's super useful Array.find method to help find a single item in an array!

What's the Difference Between var, let and const in JavaScript?

Learn how and when to use the const, let or var variable keywords in JavaScript and some of the differences between them.

Drag and Drop Elements with interact.js

Learn how to create drag and drop items using interact.js, a light-weight JavaScript library. Customize your events to include inertia throwing, touch screen compatibility, and more.

The Difference Between Promise.all and Promise.race in JavaScript

In this short post we take a look at 2 useful methods available on the JavaScript Promise object: Promise.all and Promise.race.

Drag & Drop Elements with Vanilla JavaScript and HTML

Here's how to build JavaScript functions that utilize the native HTML Drag and Drop API.

Reasons Why You Should Never Use eval() in JavaScript

You may have never heard of the eval function in JavaScript, and that's probably for a good reason! It should almost never be used and here we explain why.

Understanding the JavaScript typeof Operator

In this post you'll learn about the JavaScript typeof operator; what it can be used for and how to use it.

The New globalThis JavaScript Property

Learn about globalThis, a new cross-platform API for interacting with the global object in JavaScript.

Using getBoundingClientRect to Get an Element's Size and Position

getBoundingClientRect is part of the JavaScript DOM API and allows to get various data about the size/position of elements.

Drawing Shapes with the JavaScript Canvas API

Learn the basics of rendering shapes with the HTML canvas element and the corresponding JavaScript API.

offsetWidth and offsetHeight in JavaScript

Learn how to use offsetWidth and offsetHeight in JavaScript to calculate the pixel dimension of elements.

clientWidth and clientHeight in JavaScript

Learn how to use clientWidth and clientHeight in JavaScript to calculate the pixel dimension of elements.

forEach vs for Loops in JavaScript: What's the Difference?

Exploring the differences between forEach and for loops in JavaScript, and when you should use each.

Best Practices for Debugging JavaScript Code in the Browser

Learn how to debug your JavaScript Web applications in a more efficient way using breakpoints and the debugger statement.

Deep Cloning Objects In JavaScript (And How It Works)

A quick breakdown on how to clone an object in JavaScript the right way through deep cloning using Lodash.

Create Awesome Background Effects with Particles.js

Here's how to create stunning, interactive, and customizable particles effects using Particles.js, an incredibly easy to master library.

Master Time Manipulation in JavaScript Using Moment.js

Instead of dealing with the standard, and cumbersome, methods of dealing with time in vanilla JavaScript, we're going to explore one of the most intuitive and simple libraries out there: Moment.js.

In-Depth Look at How Events Propagate in JavaScript

Event propagation is a tricky subject in JavaScript. Let's look at a few demos to gain a better understanding of how it all works.

Data Types in JavaScript

Discussion of javaScript's core data types, prototypes, and how to best utilize these methods.

Optimizing the switch Statement in JavaScript

Learn how to get the most out of the JavaScript switch statement.

What's new in ECMAScript 2019 (ES2019) / ES10

Going over some of the new features in ECMAScript that have been introduced width the 2019 edition.

Introduction to Visual Testing for Web Apps

An introduction into how visual testing works and a quick tutorial for integrating with Percy. sponsored

Working with Singletons in JavaScript

A quick introduction to the concept of singletons and the ways to implement them in JavaScript.

const vs Object.freeze() in JavaScript

In this post, we'll take a quick look at the const keyword and compare it with the Object.freeze method in JavaScript.

How to use Axios with JavaScript

Axios is a popular library to make Ajax requests. It's often used with Vue or React, but can be used just as well with vanilla JavaScript, as you'll see.

Understanding Closures in JavaScript

In this article we'll take a quick look at Javascript closures, what they are, how to use them. You'll see one of the underlining strengths of JavaScript.

A Quick Introduction to Hyperapp

Want to try out a different and lightweight frontend JavaScript framework? Hypeapp is a tiny (1 kB) framework that you might want to explore!

Built-in Web Modules: How to Use KV Storage

This article introduces a proposed built-in web module, KV Storage, and looks at the differences compared to localStorage, as well as usage examples for both!

Understanding Switch Cases in JavaScript

A quick post to help you understand the syntax and mechanism of switch statements in JavaScript.

Introduction to Iterables and Iterators in JavaScript

In this post, we'll take a quick peek at JavaScript iterables and how to implement them with JS objects using iterators.

Conditional Basics: Using If Statements in JavaScript

A look at conditional statements in JavaScript. You'll use conditionals all the time in your code, so it's worth spending the time to get the syntax down.

A Look at the JavaScript Pipeline Operator Proposal

The JavaScript pipeline operator is a proposal for an additional operator that would help with chained function calls. Let's see how we can use it today.

D3.js: Understanding Selections and Comparing with Vanilla JavaScript

Curious about selections in D3.js? Let's break the concept down. We look at how to get the same results with Vanilla JavaScript and then compare this with D3.

Getting Elements in JavaScript and the DOM

In this article you'll learn how to get elements in JavaScript using native DOM methods like getElementById, getElementsByTagName or getElementsByName.

A Look at Scopes, Context, Object Reference and Instantiation in JavaScript

Understanding how JavaScript treats objects and the how we can use them. In the process, we'll go over some common JavaScript gotchas.

Using JavaScript Mixins

A quick peek at JavaScript mixins and how to use them with classes.

Read JavaScript Source Code, Using an AST

A quick guide to automate extracting information from your JavaScript code with abstract syntax trees (AST).

JavaScript Regular Expressions for Regular People

Overcome your fear of regular expressions (regex) with this gentle introduction to regular expressions in JavaScript.

The JavaScript Prototypal Inheritance Pattern

A quick introduction to understand how prototype-based inheritance works in JavaScript.

JavaScript Object Oriented Patterns: Factory Pattern

A brief look at the factory pattern, what's its used for and its implementation in JavaScript.

Objects, Prototypes and Classes in JavaScript

This is a short summary on how prototypes are essential for Object Oriented programming (OOP) in JavaScript with a brief look at ES6 classes.

Tricks with JavaScript Destructuring

Object and array tricks for the veteran and beginner alike, centered around pulling things apart using destructuring.

Custom-Styled JavaScript Console Logging

A fun project you can do in just 10 minutes that will help you learn more about the JavaScript console API's styling options as well as ES6 classes and modules.

Don't Be Afraid of the JavaScript Stack Trace

A beginner-friendly overview of the JavaScript stack trace and tips on how to use it.

Flatten Arrays in Vanilla JavaScript with flat() and flatMap()

An overview of two new methods available on the Array prototype in JavaScript: flat and flatMap.

A Look at the Channel Messaging API

The Channel Messaging API allows the main JavaScript thread to communicate with workers like Service Workers. This post will show you how it's done.

First Steps with the Cache API

The Cache API is a relatively new JavaScript API that allows to create performant browsing experiences by giving developers control over the caching of assets.

Getting Started with Service Workers

Service Workers are at the core of Progressive Web Apps, a set of technologies that makes mobile apps possible with the Web stack.

Using JavaScript's sort Method for Sorting Arrays of Strings

In this post we're digging into the array sort method for sorting strings, especially when it comes to strings with mixed cases.

Error Handling in JavaScript Using try...catch

Learn how to properly handle errors in your JavaScript apps using the try/catch/finally construct as well as the throw statement.

Using JavaScript's sort Method for Sorting Arrays of Numbers

It can be tricky at first to understand the rules for the array sort method in JavaScript. This post should help with that!

Scheduling Tasks in JavaScript Using setTimeout & setInterval

Learn how to use the global setTimeout and setInterval methods in JavaScript to set timers for task execution.

A Look at the JavaScript Console API

Learn some tips and tricks to debug your JavaScript code using some powerful methods available on the console.

Accessing the Clipboard in JavaScript Using the Async Clipboard API

Exploring a new JavaScript clipboard API that makes it easy to read or write text to the clipboard from a web page or a web app.

A Look at the Resize Observer JavaScript API

In this post we'll see how we can use the new ResizeObserver API to react to an element's size changing.

Accessing Rails APIs in JavaScript Clients Using Rails Ranger

Want to create a frontend client on that talks to a Ruby on Rails backend API? Rails Ranger can help with that!

Class Composition in JavaScript

Understand an alternative way to use JavaScript classes for composition instead of inheritance.

A Quick Reference for the This Keyword in JavaScript

Want to quickly know what the this keyword points to? This reference post should help you out.

Your First Steps with the Web Audio API

After this short introduction, you'll be making noise with your browser using the Web Audio API.

Exploring the JavaScript Date Object

Getting familiar with the date object is very useful iff you want to deal with dates using vanilla JavaScript.

substring vs substr in JavaScript

A brief look at the difference between the substring and substr string methods in JavaScript.

Using the Geolocation API

Learn about the JavaScript Geolocation API to get a device's current coordinates using the getCurrentPosition and watchPosition methods.

Exploring Async/Await Functions in JavaScript

In this post we're quickly going over the ins and outs of async/await functions; introduced with ES2017 to help write synchronous-looking code.

A Fetch API Primer

In this quick post we'll go over using the Fetch API to GET or POST some JSON data to an external resource. We'll also go over proper error handling.

Dealing With Objects in JavaScript With Object.assign, Object.keys and hasOwnProperty

A short post to help you quickly grasp how to use a few very useful methods available to work with objects in JavaScript.

The Web Share API

Learn how to use the Web Share API for a simple way to integrate your device's native sharing capabilities into your website or web app.

Detect Network Status With navigator.onLine

Learn how to easily detect if the browser has access to the Internet with navigator.onLine or the online and offline window events.

Using the Intersection Observer API to Trigger Animations and Transitions

Learn about IntersectionObserver and how it can be used to easily trigger CSS animations or transitions when elements come into view.

Copying to Clipboard Using Vanilla JavaScript

You're a dozen lines of code away from implementing a copy to clipboard functionality using 0 libraries.

Array slice vs splice in JavaScript

A quick rundown of the differences between the slice and splice array methods in JavaScript.

JavaScript String Replace

Just a quick reference on using JavaScript's string replace method for easy text replacements.

Object.values and Object.entries in JavaScript

Extract arrays of values or of key-value pairs using the new Object.values and Object.methods available with ES2017 (ES8).

Adding, Removing & Toggling Classes With classList in JavaScript

The classList object makes it easy to add, remove, toggle or check for the presence of classes on elements without having to do string operations.

Introduction to Maps in JavaScript

Maps were introduced with ES6/ES2015, and they are similar to objects. Here's an overview of using maps and the benefits over objects.

for...of vs for...in Loops in JavaScript

Forget about traditional for loops, use for...of and/or for...in to iterate over arrays, strings and objects.

Speed Up Scroll Events with Passive Event Listeners

Improve your site's scrolling and touch performance by using passive event listeners for events.

Default Parameters in JavaScript with ES6 / ES2015

See how you can now easily specify default function parameter values in JavaScript.

padStart and padEnd String Methods in JavaScript

padStart and padEnd a two new string methods in JavaScript that make it easy to add character padding to the beginning or end of strings.

Tagged Template Literals With ES6 / ES2015

Tagged template literals allow you to pass a function to be executed on the literal before it gets evaluated.

Introduction to localStorage and sessionStorage

Learn how to use localStorage and sessionStorage in your web apps.

Lazy Loading Scripts

An easy way to lazily load scripts on certain DOM events. In this example, we load the search script only on the user focus in a search input.

Service Workers: Using SW-Toolbox to Serve an Offline Page

Use Service Workers with SW-Toolbox to not only serve assets from the cache, but also to serve a custom offline page.

A Page Progress Bar with JavaScript and CSS Variables

An easy way to implement a page scroll progress indicator with JavaScript and CSS custom properties.

Object and Array Destructuring in JavaScript with ES6

Destructuring for objects and arrays is a nice new set of syntactic shortcuts that we can now use in our JavaScript code.

ES6 Modules and How to Use Import and Export in JavaScript

The ES2015 (ES6) edition of the JavaScript standard gives us native support for modules with the import and export syntax. Learn that simple syntax here.

A Simple Page Fade-In With JavaScript

Implement a very simple page fade-in effect for your site with some minimal JavaScript and a touch of CSS.

Accessing Elements in JavaScript with querySelector and querySelectorAll

Easily select Elements in Pure JavaScript with querySelector and querySelectorAll.

Pop, Push, Shift and Unshift Array Methods in JavaScript

Four useful methods to add or remove to the end or beginning of arrays in JavaScript.

A Quick Introduction to the Yarn Package Manager

Yarn is a new package manager for JavaScript that aims to be a faster and safer alternative to npm. Learn the basic commands to get you up and running.

Let and Const in JavaScript with ES6 / ES2015

ES6 / ES2015 gives us two new keywords to declare variables: let and const. Learn how to use them and the difference with var.

Introduction to Progressive Web Apps: Service Worker and Web App Manifest

Progressive web apps allow you to create web apps that feel native by allowing access while offline & installing on the home screen. Get a big picture here.

Object Property Value Shorthand in JavaScript with ES6

New with ES6 / ES2015, property shorthands allow you to save time with object definition in JavaScript.

Generator Functions in JavaScript with ES6 / ES2015

New with ES6 / ES2015, generator functions allow to easily define functions that can return multiple values.

Rest Parameters in JavaScript with ES6 / ES2015

New with ES6 / ES2015, rest parameters allow you to more easily work with functions with an arbitrary number of arguments passed-in.

Promises in JavaScript with ES6 / ES2015

Promises allow you to more easily write asynchronous code in JavaScript. Learn their syntax in this quick post.

Using DOMParser to Parse HTML Strings

DOMParser can be used to create a DOM object from an HTML or XML string. See here how it's used.

Template Literals in JavaScript (ES6 / ES2015)

Quick post on how to use template literals, also known as template strings, in the latest version of JavaScript for multiline strings or string interpolation.

console.time() & console.timeEnd() in JavaScript

Use console.time() and console.timeEnd() to see how your code performs.

console.table() in JavaScript

Display data in tables in the console with the table() method.

Arrow Functions in JavaScript

Get familiar with the new JavaScript syntax for arrow functions in ES6.

charCodeAt() String Method in JavaScript

Get the unicode value of a character at a specific position in a string with the charCodeAt method.

charAt() String Method in JavaScript

Get a character at a specific position in a string with the charAt method.

toLowerCase() and toUpperCase String Methods in JavaScript

Convert a string's characters to lower or upper case with toLowerCase() or toUpperCase.

includes() String Method in JavaScript

Check if a string contains another string in just one line of code in JavaScript with the includes method.

Ternary Operator in JavaScript

Simplify the syntax of simple if statements with the ternary operator. Here's how to use it.

reduce() Array Method in JavaScript

Use reduce() on an array in JavaScript to apply a function on the array and reduce it to a single value

JavaScript Reserved Keywords

A list of reserved keywords in JavaScript.

Holmes: Fast Page Searching

Holmes is a small JavaScript library that makes it easy to filter content in a list. The obvious use case is for filtering and searching content on a page.

split() String Method in JavaScript

Use split() on a string to split it into an array using a separator of your choice.

concat() Array Method in JavaScript

Use concat() on an array in JavaScript to concatenate with another array.

Share Button: Simple & Stylish Share Button

A simple, compact and beautiful share button for your website.

clipboard.js: Copy Text to the Clipboard

Easily copy text to clipboard in the browser with clipboard.js

Comments in JavaScript

Reference snippet on using comments in JavaScript.

For Loops in JavaScript

A quick snippet with the syntax of for loops in JavaScript.

push() Array Method in JavaScript

Use push() on arrays to add new items to an array.

filter() Array Method in JavaScript

Use filter() on arrays to go through an array and return a new array with the elements that pass the filtering rules.

map() Array Method in JavaScript

Use map() on arrays to return a new array with its items having passed through a function. Here's a quick snippet.

Immediately-invoked function expressions

Protect your code and avoid polluting with immediately-invoked function expressions (IIFE).