Currently browsing JavaScript
Friday, May 9, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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.…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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.…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, April 30, 2025
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…
Wednesday, October 9, 2024
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…
Monday, September 22, 2025
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?…
Wednesday, July 24, 2024
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…
Friday, July 12, 2024
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…
Tuesday, July 2, 2024
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…
Tuesday, June 18, 2024
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…
Tuesday, June 18, 2024
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…
Wednesday, May 8, 2024
inView
Loading Images Based on Screen Visibility Lazy loading images is a technique that defers the loading of non-critical resources (such…
Wednesday, May 8, 2024
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…
Tuesday, May 7, 2024
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…
Thursday, May 2, 2024
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…
Tuesday, May 7, 2024
JavaScript Game: Obstakl
Obstakl is a game where the player needs to avoid moving obstacles, by controlling the main character using the mouse.…
Monday, September 22, 2025
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…
Monday, September 22, 2025
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…
Monday, September 22, 2025
How to Enable JavaScript
How to enable JavaScript in your browser and why Nowadays, all web pages contain JavaScript, a scripting programming language that…
Wednesday, August 21, 2024
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…
Monday, September 25, 2023
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!
Friday, September 8, 2023
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,…
Monday, September 22, 2025
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…
Monday, May 12, 2025
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…
Friday, April 28, 2023
JavaScript Canvas Sine Wave
The code below generates a sine wave with a specified amplitude, frequency, and phase. The wave is drawn on the…
Sunday, April 23, 2023
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…
Wednesday, April 30, 2025
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…
Monday, September 22, 2025
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…
Thursday, May 9, 2024
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…
Wednesday, September 3, 2025
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.…
Tuesday, December 27, 2022
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>…
Tuesday, December 27, 2022
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…
Monday, September 22, 2025
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.
Monday, September 22, 2025
The Complete JavaScript Strings Reference
JavaScript strings are deceptively complex constructs. There are actually two different types of strings – string Literals and string Objects…
Monday, September 22, 2025
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…
Monday, July 4, 2022
JavaScript Form Validation
This JavaScript code snippet adds inline validation to any form field (input, select and textarea). Feel free to customise it…
Saturday, December 2, 2023
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…
Tuesday, May 7, 2024
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.
Friday, June 3, 2022
JavaScript Bookmarklets Collection
Bookmarklet 1: Show Password A simple JavaScript snippet can be used to view passwords in web browsers. To use the code,…
Tuesday, May 2, 2023
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…