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 Implement a Service Worker in Your Website and How to Create a Basic PWA
You definitely don’t need a plugin for this. Although there are plugins which help with creating a service worker and…
A Trio of Approachable Vanilla JS Sliders
This post has been superseded by How to Build a Vanilla JavaScript Slider in Less Than 100 Lines. The past…
Cross-browser Query Parameter Getter and Setter
Here’s a cross-browser compatible way of getting query parameter from a URL or setting query parameters and reloading the page. An…
How to Autoplay a Video Element Using JavaScript
The latest Chrome version has stopped video autoplay if the video is not muted. Firefox and the other browsers will soon…
Native JavaScript Drag&Drop Upload
Modern browsers allow you to define native dragging & dropping functionality with a graceful degradation for older/ancient browsers, such as…
Passing Arguments to External JavaScript Files
This post covers the topic of passing arguments to external JavaScript files. I want to say up front that there…
JavaScript Data Types
Every variable in JavaScript has a data type which dictates the values that can be stored in it. However, JavaScript…
Building a Simple Tab Strip using Vanilla JavaScript
I recently developed a simple tab strip using only HTML, CSS, and vanilla JavaScript. The script does not require any…
Convert jQuery.get() to Vanilla JavaScript
In the latest iteration of my YouTube Playlist Player plugin, I decided to remove all jQuery dependencies. I replaced the…
How to Compare Version Numbers in JavaScript
The basic idea to make this comparison would be to get arrays of parts from the version numbers, and then compare pairs…
DragonflyJS – Vanilla JavaScript Drag and Drop
DragonflyJS is a tiny vanilla JavaScript library that enables sorting (dragging and dropping) functionality with zero dependencies.
How to Create a GDPR Modal Popup Using RoarJS
The script below will check for a localStorage variable, which is the explicit user consent. If the variable exists, the…
RoarJS – JavaScript Alert/Confirm Replacement
RoarJS is a wonderful, responsive, customisable, accessible (WAI-ARIA), zero-dependency, vanilla JavaScript alert/confirm replacement. RoarJS automatically centers itself on the page…
How to replace jQuery.ajax() with vanilla JavaScript in WordPress
In an effort to remove all jQuery dependency from one of my plugins, I decided to turn all jQuery.ajax() requests…
Useful JavaScript String Prototypes
This is a function to remove all double whitespaces and preceding line breaks. This is a function to replace all line…
How to Create an Internationalisation System Using JavaScript
Creating an i18n system in JavaScript can be tricky. The most popular option is to use global variables, but it…
Client-Side JavaScript Pagination
Server-side pagination is needed when you have to display hundreds of records. You may fetch results from a database using…
truthy and falsy in JavaScript
In JavaScript, any variable can be used in a logical context, such as the condition of an if statement or…
A JSON Overview
JavaScript Object Notation, or JSON, is a plain text data interchange format. It is based on a subset of the third…
Native Browser Support for JSON
JavaScript Object Notation, or JSON, is a text format used to represent JavaScript objects as strings. Like other text formats,…
A Quick Introduction to Custom Data Attributes and Vanilla JavaScript
For years, developers have needed a method for adding their own metadata to HTML elements, but no standardized technique existed.…
JavaScript Selectors API
Dealing with the DOM can be a very tedious process. Traversing the DOM can quickly clutter your code with nested loops. For…
Promises in JavaScript
Writing code in an async programming framework like node.js becomes super complex and unbearably ugly, superfast. You are dealing with…
Custom Events in JavaScript MVC
Events are the bread and butter in UI development. They are frequently used to kick off JavaScript to deal with…
Cutting Loose: Dynamic Namespacing in JavaScript
Most of the JavaScript libraries come wrapped in an easy to refer single object. The object acts as a namespace,…
Image Beacons
Using image beacons is one of those popular techniques that you would probably know about without knowing its name. The technique helps…
Understanding JavaScript Currying
I recently fully understood the concept of utilizing Currying in JavaScript. The core concept can be grasped from these references: Wikipedia entry on…
How and Why to Avoid ‘for’ Loops
Never again use for() for looping. Using for() can be dangerous, especially if you use a library which adds attributes…
JavaScript Random String Generator
I needed a random string for various purposes. For example, to provide a unique ID to HTML elements via JavaScript.…
John Resig’s Inheritance
John Resig, the creator of jQuery, has created this JavaScript inheritance code. I am still using it now to simplify several…
Encapsulation: Private Attribute
In JavaScript OOP there are attributes called private attributes. Knowing if an attribute is private or public, an API user…
Encapsulation: Private and Public Methods
When it comes to developing APIs, self-documenting code is very important, as it simplifies the user’s effort in filtering the…
Giving Object Context to Function Calls
JavaScript has a dynamic object named this. By default, this equals to the global object container, so if we have…
Self Documenting Flexible Parameters
When managing function parameters, it’s often more maintainable to use an options object. This allows you to pass a single…
Use ‘this’ Keyword with setTimeout()
setTimeout() is a great help to many JavaScript developers. For example, you may wish to add a delay to allow…
Generate HTML List From JavaScript Array
Generate an HTML list based on the contents of a JavaScript array. By modifying the makeList() function to accept parameters…
Same-Origin AJAX Request Using Vanilla JavaScript
This JavaScript function will send an AJAX request - GET or POST - with no third-party dependencies. I find it…
How to Make an Iframe Responsive Using JavaScript
Stubborn iframes can be tamed using a simple JavaScript trick and a couple of code tweaks. Use the code below…
Pure JavaScript tabbing functionality with linkable tabs
This script shows you how to create vanilla JavaScript tabs anywhere, physically linkable without any external JavaScript library. 305 bytes…
JavaScript String Multiline Trim/Cleanup
This small JavaScript prototypes enhance the trim() function and allow for better trimming and/or replacing line breaks with commas (or…
JavaScript Credit Card Validation
This is a collection of JavaScript snippets to validate credit card details without requiring any library. Feel free to customise…