Currently browsing JavaScript
How to Optimize a Theoretical Funnel Page Load Speed
Here’s a quick snippet to preload the next step in a theoretical funnel/workflow: PHP JavaScript
Numerical Integration Using JavaScript
This is a quick reminder on how to use mathematical functions inside JavaScript. Instructions Trig: sin, cos, tan, cot, sec,…
Random JavaScript Tutorials
I needed some structural updates for a site, and among them, I added some JavaScript snippets. I will show you…
How to Declare a Global Variable inside a JavaScript Function
A JavaScript global variable is a variable with global scope, meaning that it is visible and accessible throughout the program, unless…
JavaScript Terminal
Today’s tutorial is about creating a terminal screen together with lime terminal characters in JavaScript. Let’s start with the CSS:…
Demystifying JavaScript history.back() and history.go() methods
One of my clients needed his online shop customers to be able to go back several steps with one click…
How to check scroll depth using JavaScript
Tracking how far users scroll down a webpage can provide valuable insights into content engagement. By monitoring scroll depth milestones—such…
How to execute code for X visits
This JavaScript will let you execute code a certain number of times. For example, you might want to only show…
Canvas: Animation
Making an animation from an element on an HTML5 Canvas is easy enough. To do this, a timer is set that…
Canvas: Interactive Shapes
If you draw a red square on a Canvas using the stroke() or fill() method, the square becomes nothing more…
Canvas: Inserting Images and Text
You can optimize text input by storing the desired text in an image file and then displaying it on the…
Canvas: Shadows and Gradient Fill
This is a Canvas programming introductory series: So far, we’ve been using solid colors to draw and fill elements on…
Canvas: Transforms and Transparency
Transform is a drawing technique that allows you to move the coordinate system of the Canvas using JavaScript.
Canvas: An Awesome Introduction
The ID attribute gives this Canvas the unique name required for it to be identified by JavaScript code and set…
How to create a simple JavaScript percentage graph (or chart)
This small JavaScript snippet creates percentage graphs out of raw (array) data. Just input the name/value pairs of the involved…
JavaScript shortcuts for TRUE and FALSE
Here’s a neat trick if you’re into micro-optimization. JavaScript compressors and minifiers are used to make JavaScript code smaller and,…
How to create time constants in JavaScript in a performant way
A recent project of mine required time constants, and instead of opting for an additional library for just 10 or…
How to create a minimal JavaScript slider with CSS transitions
A JavaScript Slider in 8 Lines In this post, we’ll build a minimal JavaScript slider, with no dependencies. The smallest,…
Canvas: Strange, Creepy Cables
A while ago I was playing with some basic trees drawn in Canvas using JavaScript. The longer I played, the…
Canvas: Pathfinding
Breadth First Search (BFS) Algorithm Below is a Breadth First Search implementation using Canvas and Vanilla JavaScript. This article is…
Canvas: Circles & Optical Illusions
Here is another experiment in my Canvas series. This time, I have 2 sets of circles being generated, one set…
Canvas: 2D Waves
This is the second Canvas visualization I’m experimenting with. The first one was a Julia fractal animation. This article is…
Canvas: Julia Fractal Animation
While working on my Canvas Bots project, I experimented a lot with Canvas generative art. There’s a lot of potential…
Vanilla JavaScript table date sorting
Say we have a table with dates, in the following format: We want to sort this table dynamically based on…
Tiny confirmation modal dialog in Vanilla JavaScript
A new addition to my Thin UI library, a much-needed modal dialog (popup dialog), this script is tiny, and it…
How to add a top bar countdown for your next product sale
You can (probably) see this top bar right now, with a nice 30% off sale for my WordPress Lighthouse plugin.…
How to Create a Draggable Carousel using Vanilla JavaScript
A few months ago, I added a new, fancy JavaScript carousel to my homepage. It looked and behaved great, but…
Canvas JS: Big Ball of Particles
For a while now, I had this animated, constantly exploding ball of particles on one of my landing pages. Built…
JavaScript Drag & Drop
Here’s a nice list of plain JavaScript dragging and dropping solutions. They are minimal, as they serve as proof of…
JavaScript Character Counter for Text Areas
A while ago, I had to implement a character counter for a business listing directory. The description field was supposed…
Carbon: Basic Syntax Highlighting with Zero Overhead Using JavaScript
If you have ever used PrismJS or CodeMirror or any other syntax highlighter solution, you’ll know it adds lots of…
How I Created My Homepage JavaScript Post Carousel
My homepage now features a JavaScript section of 4 featured posts. Notice the official JavaScript yellow colour? Here’s how I…
How to Expire localStorage Items and Replace Cookies
I don’t use 🍪 cookies any more, I think they are too… rigid. I use localStorage items. By default, they…
tail.select takeover and update
I have been using the tail.select library on 200+ WordPress websites for more than 2 years. That number is growing,…
tail.select
HTML Select Fields as beautiful as never before tail.select is back: Create beautiful, functional and extensive (Multi) Select Fields with…
How I added a neat effect in 30 lines using IntersectionObserver
This is something I’ve always wanted to add to my theme, but I was afraid of the impact on the…
How to Get and Set Query Parameters From URL
Here are two ways to get (and set) query parameters from URL. I’ll add some real life examples in order…
Thoughts on Instant Loading in WordPress
If you are familiar with the instant loading concept, you’ll know it’s about faster subsequent page loads by prefetching hovered…
How to Create a Price Range Slider Using Vanilla JavaScript
All JavaScript range sliders are hacks or workarounds. Because there’s no native HTML element for a range slider (only a…
How to Create a JavaScript Typewriter Using Vanilla JavaScript
This was done for a client, and I do not recommend it as it uses setTimeout(). Anything using setTimeout() or…
JSONify Dropdown Element Using Vanilla JavaScript
This function converts a regular <select> element both into an intented ul/li structure and JSON. It’s light and it’s been…
Drift Chat: Speed Up Your Page Loading Speed by 3-4 Seconds
Here’s a neat trick to speed up your initial page loading time when you are using Drift. If you use…
24-Hour Countdown with Progress Saving Using Vanilla JavaScript
Here’s an interesting JavaScript snippet allowing you to set a 24-hour countdown and save its progress between page loads.
How to Draw on Canvas and Save the Result Using Vanilla JavaScript
This was part of a complex drawing project, which is not relevant right now. The idea was to have a…
Date Countdown Using Vanilla JavaScript
A while ago, I coded several date countdowns for several promotions. These countdowns went straight inside a third-party popup solution,…
Random Imgur Images Using Vanilla JavaScript
I found this old code I used for an old forum a long time ago, and I decided to bring…
How and why I added a circle following my mouse pointer
I’ve seen this behaviour on several Russian sites, and it looked really slick, especially when the movement was delayed compared…
Switching From JavaScript to PHP for Browser Detection and Avoiding Core Web Vitals Penalties
In the light of the recently introduced Core Web Vitals, I decided to save some script start-up speed and switch…