CSS Selector to Select Elements Not Having Certain Class / Attribute / Type
Many times it may be required to select elements that are not having a specific class, attribute, id etc. This can be achieved using the CSS :not pseudo-class selector.
Checking whether Page is Opened / Active in Browser Tab
The Page Visibility API can be used to check whether a browser tab is active or not, i.e. if the page is in view or hidden from view.
Improving〈canvas〉Performance with OffscreenCanvas (VIDEO)
Performance of the 〈canvas〉element can be greatly improved using the newly introduced OffscreenCanvas. This can offload canvas logic and rendering to a background process rather on the main browser thread.
Creating HTML Tables with Fixed Header on Scroll using position: sticky CSS
Making table header row fixed on page scrolling was once quite a complicated problem that was somehow achieved with Javascript. But now it can be achieved easily using CSS with position: sticky.
HTML Tags to Represent Programing Code
The 〈code〉, 〈kbd〉, 〈samp〉 and 〈var〉 HTML tags can be used to represent programming and code information in a webpage.
How to Get List of All Google Fonts using PHP
The list of all Google Fonts can be retrieved using the Google Fonts Developer API.
How to Load Google Fonts with JavaScript
Google Fonts can be loaded through Javascript using the Web Font Loader Library. Events are also triggered when fonts are being loaded, or when they are rendered.
Converting Timestamp to Date & Time in Javascript
A UNIX timestamp can be converted to the required date and time formats in Javascript using the Date() object and its methods.
Looping through querySelectorAll() with Javascript
List of nodes returned by querySelectorAll() can be looped through using the forEach() method of the returned NodeList object.
Differences between 〈script type=module〉and〈script〉
Whenever a Javascript module needs to be applied to HTML, we need to do it within a 〈script type=module〉 tag. However there are some difference in Javascript execution in this tag vs a normal 〈script〉tag.
Difference Between Pseudo-Class and Pseudo-Element in CSS
Pseudo-class and pseudo-element are both CSS selectors, however pseudo-class represents a virtual CSS class, whereas pseudo-element represents a virtual HTML element.
Loop through〈select〉Options with Javascript
Options of a dropdown 〈select〉element can be looped over its options property. This property gives a list of all 〈option〉elements inside it.
How to Change Placeholder Color for Textboxes
Color of the text specified by the placeholder attribute in input fields can be changed using the ::placeholder CSS selector.
What is script type=module ?
A script tag having type=module attribute specifies that it to be considered as a Javascript module. It may be importing other Javascript module(s) inside it and becomes a top-level module for the imported modules.
How to Prevent Disqus Comments System from Slowing Page Speed & Performance
Loading Disqus' script files and comments on page load can lower down speed and performance of the page, specially in mobiles. A solution would be to use an Intersection Observer to lazily load Disqus.
How to Detect Number of Processor Cores with Javascript
The number of available logical processor cores in the device can be found with the navigator.hardwareConcurrency Javascript property. This number can be useful in knowing how many Web Workers can be executed in parallel.
Javascript KV Storage Introduction Tutorial
KV Storage API is an asynchronous way to save data in the browser using Javascript Promises. Its asynchronous nature guarantees that the performance of the application is not impacted.
How to write Immediately-invoked / Anonymous Async Functions (IIFE)
An anonymous async function can be defined using the Immediately-invoked Function Expression pattern for asynchronous functions.
How to Convert Array to a String in Javascript
A Javascript array can be converted to a string by using the join() method to join elements of the array separated by a given character or string.
How to Implement Click to Call Feature in Web Pages
Click to Call functionality in web pages can be implemented using the tel: schema inside a hyperlink. Clicking on such a link would open the Dialer App on the device.