What Happens to setTimeout() / setInterval() Timers Running on Inactive Browser Tabs ?
Time delay for setTimeout() / setInterval() methods executing on inactive browser tabs are set to one second regardless of their value defined in code.
How to Disable Page Scrolling when Modal Dialog is Opened
When a fixed-position modal dialog is opened, scrollbars on the page can be removed by dynamically setting overflow:hidden CSS for the 〈body〉tag.
Disabling Pull-to-Refresh Feature on Mobile Browsers using CSS
Pull-to-refresh feature on mobile browsers that refreshes the page, can be disabled using the overflow-behaviour CSS property.
Synchronous / Asynchronous Image Decode using〈img decoding〉Attribute
The "decoding" attribute can be included for an 〈img〉tag to specify whether to decode the image in parallel or along with the rest of the page content.
Preventing Addition of New Properties to a Javascript Object with Object.seal()
The Object.seal() method seals an object. After an object gets sealed, no new properties can be added to it.
Preventing Changes to a Javascript Object with Object.freeze()
The Object.freeze() method can make an object or array immutable. No changes can be made to that object once it gets immutable.
Latest CSS Properties and APIs for Web Design in 2020 (VIDEO)
Many next generation CSS properties and APIs have been introduced in browsers lately. These can help in creation of user interfaces that were previously not possible or were difficult to achieve.
Hashbang Comments - The Third Way of Adding Comments in Javascript Code
Hashbang comments is the third type of syntax for adding comments to Javascript code. This comment can specify the Javascript interpreter that is to be used to execute the code within a script file or a module.
Loading CSS Stylesheet on Demand Through Its disabled Attribute
A stylesheet can include the disabled attribute in its markup to prevent it from being downloaded on page load. Later when the stylesheet needs to loaded on demand, its disabled attribute can be removed with Javascript.
Numeric Separators in Javascript to Improve Readability of Large Numbers
Numeric separators can be used to improve readability of large numbers. For example the number 111111111111111111111111, which is difficult to read, can be alternately written as 111_111_111_111_111_111_111_111
Preventing Autofilling the Password Field in HTML Forms
To prevent situations where we would not like the browser to autofill the password field in a form, the autocomplete=new-password attribute can be used.
Performance Tip : Learning to Think Beyond the Main Thread (VIDEO)
If Javascript code executed on the main thread could be offloaded to several Web Workers, then performance problem of a web application would be solved almost completely.
Detecting Change in Playing Subtitles Text for 〈video〉Element
Sometimes we would like to detect when the subtitles change in the playing video. This can be done by listening to the cuechange event on the 〈track〉element.
Preserving Context of this Inside AJAX Response Callbacks in jQuery
It is very common to access current this context inside jQuery AJAX's response callbacks (success or error). This tutorial describes 3 ways of doing this.
Representing Edits to HTML Pages using〈ins〉&〈del〉Tags
Often there are edits made to documents. In HTML these changes can be highlighted using the 〈ins〉and 〈del〉 tags.
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.