🏋 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.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your front-end skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
A Brief Tour of the Eleventy Static Site Generator
How to Detect Idle Browser Tabs with the Page Visibility API
Download Canvas API-Generated Images Using toBlob
How to draw an inline SVG onto a Canvas context and then how to generate a downloadable Jpeg or PNG file from what's drawn on the canvas using toBlob.
Using the Fullscreen API
How to Use localForage for Easy Async Browser Storage
Learn the fundamentals of the most common abstract data types for building more complex data structures - stacks and queues.
Going Native with the Web Notifications API
What's new in ECMAScript 2020 (ES2020)
Explore how to search through your data in a fraction of the time with the Binary Search technique.
Get a grip on some of the most fundamental programming techniques for traversing data and running optimized algorithms: recursion and memoization.
An overview of the basic use cases and functionalities of the BroadcastChannel API to allow communication between windows/tabs/iframes of the same origin.
Learn how to work with dates and times using Day.js, a minimalist alternative to Moment.js with a familiar API.
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.
Animations with the Canvas API - Part 3: Gravity and Dynamic Rendering
Animations with the Canvas API - Part 2: Basic Collisions
Animations with the Canvas API - Part 1: Linear Motion
Draw the Alligator.io SVG Logo with GreenSock
Drag and Drop Elements with interact.js
Using getBoundingClientRect to Get an Element's Size and Position
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.
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
A Quick Introduction to Hyperapp
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!
Object and array tricks for the veteran and beginner alike, centered around pulling things apart using destructuring.
A Look at the Channel Messaging API
First Steps with the Cache API
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.
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 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 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 (PWAs): Service Worker & 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.
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.
Holmes: Fast Page Searching
Use split() on a string to split it into an array using a separator of your choice.
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).