Currently browsing JavaScript
Learn modern JavaScript from the ground up with practical, example-driven tutorials. Covers core language concepts, browser APIs, and real-world techniques for building interactive web experiences. Whether you’re debugging a tricky snippet or leveling up your skills, you’ll find clear, hands-on guidance here.
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:…
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
Part 4 of the HTML5 Canvas series — see the full series. So far, we’ve been using solid colors to…
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…
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
Part 9 of the HTML5 Canvas series — see the full series. Breadth First Search (BFS) Algorithm Pathfinding is simply…
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
Part 3 of the HTML5 Canvas series — see the full series. This is the second Canvas visualization I’m experimenting…
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…
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
Part of the vanilla JS sliders & carousels guide. See also: How to Create a Price Range Slider Using Vanilla…
Canvas JS: Big Ball of Particles
Part 8 of the HTML5 Canvas series — see the full series. For a while now, I had this animated,…
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…
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…
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
Part of the vanilla JS sliders & carousels guide. See also: How to Create a Draggable Carousel Using Vanilla JavaScript…
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
Part 11 of the HTML5 Canvas series — see the full series. This was part of a complex drawing project,…
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…
How to Populate OpenStreetMap with Foursquare Venues/Amenities
First of all, we need a Foursquare app and a client ID and secret. Head over to developer.foursquare.com and get…
WordPress Responseless XHR Request Using JavaScript
A responseless XHR (POST) request is a request which does not require any user feedback, such as storing post views…
How to track and measure phone number views with JavaScript
Use this tutorial to create phone number links and track/measure views. As phone numbers are clickable (and work) only on…
How to show an outdated browser alert on Internet Explorer 11
Here’s a nice overview on why Internet Explorer 11 should be phased out and users blocked from viewing the site…
How to extract a value from an element and, optionally, round it
This JavaScript snippet will extract a price from a DOM element, remove all alphanumeric characters, such as currency or symbols…
End of an Era: Travel SEO
I’ll just leave this here for reference purposes and I won’t explain any code, as it’s obsolete and I’m not…
How to Create a Programmatic JavaScript Tooltip
Here’s a short tutorial on how to create a programmatic JavaScript tooltip. I needed this feature to recreate a product…
How to create a YouTube video cover using the YouTube Iframe API
There’s an increasing trend of adding full-width (possibly full-height) YouTube video covers with autoplay. Using the YouTube Iframe API, this…
How to Get and Set URL Parameters with JavaScript
This is an old script, which helped a lot with the initial phase launching a project on all browsers and…
How to Build a Vanilla JavaScript Slider in Less Than 100 Lines
This quick tutorial will show you how to create a basic slider in less than 100 lines. The actual JavaScript…