Latest Javascript Tutorials and How-To's

html

Open Links in a New Tab, Or Re-Use Already Existing Tab

To ensure only a single new tab or window is created for several links in the page, the same child attribute needs to set for all the links.
November 27, 2020
javascript

Measuring Site Analytics with Javascript - Page Views & Bounce Rate

This tutorial explains how to measure site analytics (page views & bounce rate) using custom Javascript, rather than using third party analytics libraries.
September 28, 2020
javascript

Measuring Site Analytics with Javascript - Sessions

This tutorial explains how to measure site analytics (sessions) using Javascript, rather than using third party analytics libraries.
September 15, 2020
javascript

Javascript Logical Nullish Assignment Operator

The logical nullish assignment operator (??=) works like the assignment operator (=) but assigns only when the left-hand side is a nullish value.
August 7, 2020
javascript

Javascript Logical AND Assignment Operator

The logical AND assignment operator represented by &&= works like the assignment operator (=), but assigns only when the left-hand side is a truthy value.
August 3, 2020
javascript

Javascript Logical OR Assignment Operator

The logical OR assignment operator (||=) works like the assignment operator (=), but assigns only when the left-hand side is a falsy value.
August 1, 2020
javascript

Checking for a Sub-String in Javascript - All Possible Cases

Javascript provides multiple methods that can check whether a sub-string is contained in a string, depending on various possible use-cases.
June 9, 2020
javascript

How to Check If a Javascript Function Was Called Using new Operator

The new.target property can be used to detect whether a function was invoked as a constructor using the new operator, or just called normally.
May 20, 2020
javascript

File Uploading Progress in Javascript Fetch

Currently it is not possible to get file upload progress for fetch. The alternate solution for now is to use XMLHttpRequest.
May 16, 2020
javascript

How to Check If Element is Visible / Hidden in Page using Intersection Observer

Checking whether an element is visible or hidden in the full page, even through it may not be in screen view, can be done through an Intersection Observer. The trick is to set the root element to document.documentElement.
May 14, 2020
javascript

How to Detect Change in Element Size with Javascript

Detecting an element for change in dimensions using JS can be done with the ResizeObserver interface. This is supported in all modern browsers.
May 11, 2020
javascript

Detecting Dark Mode with Javascript

Device dark mode can be checked in Javascript by using window.matchMedia() to check a match for the prefers-color-scheme: dark CSS media query.
May 9, 2020
javascript

Getting Property Value in a Deeply Nested Object (using ES2020 Optional Chaining Operator)

Property value in a deeply nested Javascript object can be found using the Optional Chaining Operator, introduced in ES2020.
May 4, 2020
javascript

Handling Error HTTP Responses in Javascript fetch

Failed HTTP responses can be handled in fetch() by checking whether the returned Promise was rejected due to a network error. Subsequently the Response.ok property needs to be checked for an invalid HTTP status code.
April 27, 2020
css

Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)

A responsive slider / carousel can be created with CSS flexbox using the order property. Items can be repeated infinitely in a circular loop by changing the order property each time.
April 25, 2020
javascript

Reading a Text File from Server using JavaScript

A text file on a server can be read with Javascript by downloading the file with Fetch / XHR and reading the response as text.
April 22, 2020
javascript

Javascript File Uploading with Fetch, Async & Await

Javascript fetch method can be used to upload files to server. fetch is Promise-based, so we can use async / await to write synchronous styled functions.
April 13, 2020
javascript

Checking If CSS Property Supported in Current Browser with Javascript

With newer CSS properties not available in all browsers, it is sometimes required to check whether a CSS property & its value are supported in the current browser. This can be detected in Javascript using the CSS.supports() method.
March 13, 2020
javascript

Get Random Numbers, Cryptographically Secure, in Javascript

Random numbers that are cryptographically strong, can be generated in Javascript using the Web Crypto API.
March 9, 2020
javascript

Using formdata Event for AJAX Form Submissions

The newly introduced formdata event can enable the Javscript FormData object to participate in form submissions. When trying to submit a form via AJAX, this is helpful to include custom elements in the request.
February 3, 2020