Writing jQuery each() in Pure JavaScript
The jQuery $.each() method can be replicated in vanilla JavaScript using natively available methods — document.querySelectorAll() and forEach loop.
CSS :focus-within
The :focus-within CSS pseudo-class is a selector for an element that contains a focused element as a child. It is the only CSS selector that reaches a parent from a child.
Keeping HTML & Javascript Code Separate using the <template> Tag
In present ajax driven web applications quite a lot of HTML content is dynamically inserted inside the page with Javascript. To keep this dynamically generated HTML separate from the Javascript code, the <template> tag is used.
Displaying Date and Time in Javascript
In Javascript, date and time are handled with the built-in Date object. The Date objects has several methods such as getDate(), getMonth(), toLocaleString() etc to customize the format of the date-time string.
Tagged Templates Literals
Tagged templates can be thought of as an advanced form of template literals, where the placeholders (${variable}) and text are passed through a function.
Cropping and Resizing Images in CSS using object-fit and object-position
Images can be cropped and resized in CSS using the new object-fit and object-position properties. They are similar to background-size and background-position properties, but can be applied directly to image elements.
Pre-Loading and Pre-Decoding Images with Javascript for Better Performance
Pre-loading an image is a popular technique to improve performance. However it is also possible to pre-decode the image for a bigger performance boost.
Creating Multi-line Strings in Javascript with Template Literals
ES6 Template Literals is the new way of creating multi-line strings in Javascript. Variables and expressions can also be substituted in a template literal multi-line string.
Repeating Strings in Javascript
Sometimes it is required to keep repeating a string for a specific number of times. The new ES6 function repeat() can help you to do so.
Padding Strings in Javascript
It is sometimes required to make sure that strings are of a specific length. padStart() and padEnd() functions can help you to achieve this.
Trimming Strings in Javascript
Strings can be trimmed in Javascript using the native trim functions — trim(), trimStart() & trimEnd()
Intersection Observer API in Javascript
The Intersection Observer API is probably one of the most useful Web APIs that have been released recently. The API keeps track of intersection between two elements in a webpage.
Checking for Substrings in Javascript - ES6 Methods
ES6 has brought forwards newer ways of checking for substrings. The best part is that they all return either a true or false — unlike the usual indexOf() method.
How to Add Subtitles to HTML5 Videos
Subtitles can be added to HTML5 videos using the element. HTML5 videos supports VTT subtitles format, and not the popular SRT format.
Running Cron Jobs in Node.js
Cron jobs are important when some script is required to be executed at a fixed time over and over again. In Node.js cron jobs can be setup using an external module known as node-cron.
Using WebP Images with Fallback
If your application involves showing a lot of images then probably it makes sense to add WebP support. Using the HTML tag is the most robust solution to display WebP images with fallback.
How to Know when an Element Gets Visible in the Screen During Scrolling
Previously finding whether an element has entered the screen used to be a pain, but the new Intersection Observer API makes this quite easy, and less error prone.
Using the Reviver Function in JSON.parse
JSON.parse accepts an optional second parameter - the reviver function. The purpose of this function is to modify the result before returning, and can be thought of as filter function.
Displaying 360-Degree Photos & Videos on Websites using Google VR View
360-degree photos and videos really give an enhanced user experience. They can be embedded in web pages using Google VR Javascript SDK.
Creating Modal Dialog and Lightbox Becomes Easier with HTML <dialog> Tag
The new <dialog> tag makes it easier to create dialogs and lightboxes. With Javascript you can also call methods to open the dialog or close it, or know when the dialog was closed.