Detecting CapsLock State (On/Off) with Javascript
In login forms, it is better to inform the user that his CapsLock is currently locked. State of the CapsLock key can be detected with the get​Modifier​State method in keyboard/mouse events.
Getting Device RAM Information with Javascript
The navigator.deviceMemory property gives access to the amount of memory available on the current device.
Performing Javascript Background Tasks with request​Idle​Callback
Many times there may be some low-priority Javascript code to be executed in the background. This can be done using the request​Idle​Callback method which can execute code in the idle time of the browser.
An Introduction to Sets in JavaScript
In Mathematics, a set is a collection of distinct elements. Javascript brings this concept of a mathematical set through its Set object.
How to Detect Whether Video Format Supported with Javascript
Sometimes you would like to know whether a given video format can be played back in the given browser or not. This can be done with the can​Play​Type method.
Creating a Native Q&A / FAQ Accordion with〈details〉and〈summary〉HTML Tags
With the new 〈details〉and〈summary〉tags, it is possible to create a FAQ / Q&A section in a webpage with pure HTML and no Javascript.
How to Smooth Scroll to an Element with Native Javascript
It is a commonly required to scroll to a particular section of a page upon a click. This can be done with the native scrollIntoView() method which also supports smooth scrolling.
How to Get and Set Attributes with Javascript
Just like jQuery's $.attr() method, there are native browser methods — getAttribute & setAttribute that can get and set attributes of an element.
How to Serialize Form Data with Javascript
Libraries such as jQuery makes it easy to serialize form data, but it is equally simple in vanilla Javascript also. This happens with the URLSearchParams and FormData objects.
New Policies for Autoplaying Audio & Video on Websites
Automatically playing a video or audio on page load is probably one of the annoying things that a website can do to a user. So to deter websites from autoplaying audio and video, browsers have brought out new policies.
Checking Element has Specific CSS Class with Vanilla Javascript
Similar to the jQuery's hasClass method, there exists a native Javascript alternative that tells whether the DOM element contains the specified CSS class or not.
Adding & Removing CSS Classes With Vanilla Javascript
jQuery's addClass & removeClass makes it very simple to add and remove CSS classes. But it is equally straightforward with native Javascript also.
jQuery append() in Pure Javascript
jQuery's append() method can add a DOM element or a HTML string into a given DOM element. But the same can be done with natively available methods also.
Understanding Event-Loop, Asynchronous, Single-Threaded in Javascript (VIDEO)
The Javascript event loop is the key to understanding terms such as "Asynchronous", "Single-Threaded", "Non-Blocking" etc. This is explained through a video presented at JSConf.
Adding Event Handlers on Dynamically Created Elements with Vanilla Javascript
In jQuery adding event handlers to dynamic elements is quite simple. But when you try to do the same thing with vanilla Javascript, it is not very direct.
Getting the 〈html〉Tag with Javascript
Although it may rarely happen, but sometimes you may need to access the 〈html〉element with Javascript. This can be done using 3 ways.
Showing Relative Time (1 day ago, 1 min ago, Yesterday etc) with Native Javascript
Showing relative time such as "1 day ago", "5 days ago" etc previously required external Javascript libraries such as Moment.js. But now browsers have added native support for this — you may not need external libraries.
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.