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…

Wednesday, October 9, 2024

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.…

Wednesday, May 29, 2024

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…

Thursday, October 19, 2023

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…

Thursday, October 3, 2024

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,…

Wednesday, July 12, 2023

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…

Thursday, May 9, 2024

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…

Friday, July 12, 2024

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, August 29, 2022

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.

Tuesday, August 9, 2022

The Complete JavaScript Strings Reference

JavaScript strings are deceptively complex constructs. There are actually two different types of strings – string Literals and string Objects…

Thursday, August 4, 2022

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…

Page 1/41234