Currently browsing JavaScript
Implementing Custom Tooltips with Vanilla JavaScript
The following script replaces the native browser tooltip with a custom-styled tooltip that appears when hovering over elements with the…
Enhancing <select> Dropdowns: Removing Duplicates and Sorting Options with Vanilla JavaScript
When working with <select> dropdowns in HTML, it’s common to encounter scenarios where you need to remove duplicate options or…
Creating an Autocomplete Search Feature Using Vanilla JavaScript
Autocomplete search is a powerful feature often used in search fields to provide real-time suggestions as users type. We’ll build…
Sorting and Ordering Elements Based on Data Attributes with Vanilla JavaScript
Sorting elements on a webpage can be a critical feature when you need to reorder content dynamically. Whether it’s based…
Sort Elements Based on Data Attributes with Vanilla JavaScript
In a recent project, I was tasked with sorting a large list of elements dynamically based on multiple data attributes.…
Trigger an Event When User Reaches the Bottom of the Page
In a previous project, a client requested an action to be performed when the user scrolled to the bottom of…
Generate a Password Using Vanilla JavaScript
Enforcing strong passwords can be challenging, but by providing users with an automated password generation feature, you can enhance both…
Equal Height for All Elements Using Vanilla JavaScript
In my ImagePress plugin, we needed to ensure that all boxes have the same height after they have been loaded.…
Ping a Remote PHP File and Store Data in a MySQL Database with JavaScript
Recently, I needed to store details in a remote database using JavaScript. The straightforward approach was to send a GET…
How to Measure Page Loading Time with JavaScript
This approach demonstrates how to measure the loading time from the moment a user clicks on a link until the…
How to Defer Image Loading with Vanilla JavaScript
It’s well-known that loading an HTML page with over 100 images can significantly slow down the initial render if asset…
Dropdown Autocomplete with contenteditable Fields
Autocomplete for contenteditable Fields Using Vanilla JavaScript If you’ve ever needed to implement autocomplete functionality in a contenteditable field or…
Calculating Mean, Median, and Mode in JavaScript
When dealing with statistics, three key measures often come into play — mean, median, and mode. These statistical metrics help…
How to Add Voice Search Capability to Your WordPress Site
How to Add Voice Search to Your WordPress Site Ever wanted to offer voice search functionality on your WordPress site?…
Animated JavaScript Counter-Up with the Intersection Observer API
An animated counter is a more engaging way to present this information, as it gradually increases the value of the…
How to Build a Vertical Off-Canvas Menu Bar Using JavaScript and CSS
In my work, coming up with fresh navigation ideas and creating an intuitive and efficient navigation system is essential for…
How to Build a Double Off-Canvas Menu Using JavaScript
Creating a double off-canvas menu can greatly enhance the user experience by providing accessible navigation options without occupying valuable screen…
Simplifying Conditional Statements in JavaScript with the && Operator
JavaScript provides several ways to handle conditional logic. One powerful method is the logical AND (&&) operator. This tutorial will…
Grouping Arrays in JavaScript with Object.groupBy() and Map.groupBy()
In JavaScript, there often arises a need to group array elements based on a certain property. Prior to ES2024, this…
inView
Loading Images Based on Screen Visibility Lazy loading images is a technique that defers the loading of non-critical resources (such…
Thin Select — Custom JavaScript Dropdown Element
Let’s create a custom <select> element using vanilla JavaScript and CSS. Thin Select provides a sleek and minimalistic design for…
How to Create a JavaScript Spinner with Phenakistoscope Effect
In this tutorial, you will learn how to create a JavaScript spinner that mimics the effect of a Phenakistoscope, an…
How to Lazy Load Google Map Iframe Embed in WordPress
If you embed a Google Map iframe on your WordPress website, you may notice an increase in the total webpage…
JavaScript Game: Obstakl
Obstakl is a game where the player needs to avoid moving obstacles, by controlling the main character using the mouse.…
JavaScript Marquee: A collection of scrolling text snippets
I have started to consider adding scrolling text into my design process. I started by using a CSS-only approach. The…
JavaScript Numbers: A Modern Reference
JavaScript is a dynamically typed language, and it doesn’t have specific integer or floating-point types, unlike some other languages. In…
How to Enable JavaScript
How to enable JavaScript in your browser and why Nowadays, all web pages contain JavaScript, a scripting programming language that…
Fast and accessible JavaScript client logo carousel
If you want to use the logo carousel as a WordPress plugin, see How to Create a Logo Carousel as…
Segmented Horizontal Bar Chart (Graph) Using Vanilla JavaScript
If you're looking to create a segmented (stepped) horizontal bar chart using nothing but vanilla JavaScript, you're in luck!
A simple JavaScript suggestion autocomplete app
These days, I’ve been working on building a prediction search engine for real estate websites. I started with something small,…
A collection of modern native JavaScript object and array utilities
Arrays Chunk Creates an array of elements split into groups the length of size. Compact Creates an array with all…
How to set up your own Google CrUX report
As part of decommissioning the Core Web Vitals report from Lighthouse, here’s how the CrUX report has been built. If…
JavaScript Canvas Sine Wave
The code below generates a sine wave with a specified amplitude, frequency, and phase. The wave is drawn on the…
Check DNS records in bulk using JavaScript
If you’re a web developer or network administrator, you know that DNS records play a crucial role in ensuring that…
How to Replace Slider Revolution with Flickity and Gain 50+ Performance
This is a short story about WordPress website performance optimization. A recent project of mine involved optimizing a website, currently…
Thin Table Pagination: A new addition to my JavaScript repository
I wrote about client-side JavaScript pagination before, but I have never stopped searching for the perfect pagination method, both from…
SEO Crawlability Issue: Resources are formatted as page link
While working on a SEMrush audit, I found a new type of crawlability notice: 47 resources are formatted as page link…
StackGrid — A Light Vanilla JavaScript Masonry Grid
Introducing the lightest and most efficient Masonry grid available — StackGrid — powered by pure vanilla JavaScript, no dependencies required.…
How to Open Only One Details/Summary Element at a Time
Let’s suppose you want to build a simple accordion or a help section, and you want to use a <details>…
Canvas – A Simple Drawing Application
This is a simple drawing application that allows the user to select a colour and thickness for their brush and…
Code Golfing Tips & Tricks: How to Minify your JavaScript Code
JavaScript golfing is the process of writing the smallest amount of JavaScript code to do something awesome.
The Complete JavaScript Strings Reference
JavaScript strings are deceptively complex constructs. There are actually two different types of strings – string Literals and string Objects…
How to code your own JavaScript de-duplicator
I have a new tool on getButterfly: a data de-duplicator for emails, URLs, IDs, names and more. It's written in…
JavaScript Form Validation
This JavaScript code snippet adds inline validation to any form field (input, select and textarea). Feel free to customise it…
How to get content from another website using JavaScript
Here’s the scenario: One of my websites is static, and I need to maintain a changelog both on the website…
Why I removed my dark theme switcher
How I implemented a dark/light theme switcher using JavaScript and CSS for both WordPress and static websites.
JavaScript Bookmarklets Collection
Bookmarklet 1: Show Password A simple JavaScript snippet can be used to view passwords in web browsers. To use the code,…
How to copy web page content using innerHTML
I need to extract some data from a web page and place it on a fishing site. The source web…