🏋 Top Posts
Quick Intro to the Payment Request API
In this post you'll see the basic usage for collecting payment information through the Payment Request API.
Sets allow the creation of collections of unique values. See how they are used in this quick intro.
JSON.parse() and JSON.stringify()
A quick reference for the parse and stringify methods of the JSON object.
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.
In this post we're digging into the array sort method for sorting strings, especially when it comes to strings with mixed cases.
In this post we'll see how we can use the new ResizeObserver API to react to an element's size changing.
Want to create a frontend client on that talks to a Ruby on Rails backend API? Rails Ranger can help with that!
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.
Using the Geolocation API
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.
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.
You're a dozen lines of code away from implementing a copy to clipboard functionality using 0 libraries.
Extract arrays of values or of key-value pairs using the new Object.values and Object.methods available with ES2017 (ES8).
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.
Maps were introduced with ES6/ES2015, and they are similar to objects. Here's an overview of using maps and the benefits over objects.
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.
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.
ES2015 (ES6) gives us native support for modules. Learn their simple syntax here.
Accessing Elements With querySelector and querySelectorAll
A Quick Introduction to the Yarn Package Manager
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.
New with ES6 / ES2015, generator functions allow to easily define functions that can return multiple values.
New with ES6 / ES2015, rest parameters allow you to more easily work with functions with an arbitrary number of arguments passed-in.
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 ES6 / ES2015
Use console.time() and console.timeEnd() to see how your code performs.
Display data in tables in the console with the table() method.
Get the unicode value of a character at a specific position in a string with the charCodeAt method.
Get a character at a specific position in a string with the charAt method.
Convert a string's characters to lower or upper case with toLowerCase() or toUpperCase.
Simplify the syntax of simple if statements with the ternary operator. Here's how to use it.
Holmes: Fast Page Searching
Use split() on a string to split it into an array using a separator of your choice.
Use concat() on an array 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
Use push() on arrays to add new items to an array.
Use filter() on arrays to go through an array and return a new array with the elements that pass the filtering rules.
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).