Javascript as one of the most used programming language provides a wide range of APIs, events, and libraries which can significantly affect your application performance and user experience. Here are some of them which you probably never used before.

Page Visibility API

The page visibility API provides events which you can monitor in your application in order to know if the user is browsing your web page or if the page is not visible. When a user minimizes the window or switches to another tab, this API sends a “visibilitychange” event. By listening to this event, you can execute some actions when your page is active or not. For example, if your application sends ajax requests to your backend servers to keep the user’s dashboard up to date. Then you can stop sending these requests when the user is not browsing the application which reflects on your backend performance when it receives fewer requests. It also can improve the user experience by pausing videos and audios when the user switches tabs or when the device is in a standby mode. Here is an example to pause a video when switching tab.

Online and Offline Events

These events will help you to find out when the user loses the internet connection and when connected back again. The use case for this is when you ask a user to complete a form or edit information, and the user loses the connection. Usually, you will have to ask him/her to refill all the fields again. But with these events, you can save the current changes to the browser’s local storage and submit it to your backend when the connection is back. Here is an example you can try.

https://codepen.io/maladdin/pen/qyedKO

Vibrate API

Everyone is interested in creating responsive web pages to enhance mobile views. So why not take a step further and make your form vibrate when the user inserts invalid username, or when an error message appears. This will make your users feel like they are using a native mobile app while they read your simple blog from the internet browser. It even can be more fun when your vibration theme is GO GO Power Rangers. Open this link from your smartphone or tablet and have fun.

https://codepen.io/maladdin/pen/mjNeoQ

Clipboard.js

This library facilitates the Copy/Cut/Past processes, as the official website says “Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.” https://clipboardjs.com/

This library facilitates the Copy/Cut/Past processes, as the official website says “Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework.” https://clipboardjs.com/ WebVR and A-Frame

A-Frame is an open source framework that makes creating a virtual reality for web applications straightforward, it maintained primarily by Mozilla and WebVR community. A great use case which is not widely common is a VR web interface. I still wonder why we still don’t have a supermarket or pharmacy web page where the user can do the shopping through virtual reality. Take a look at this museum simple interface.

https://aframe.io/examples/showcase/museum/

Finally, if you have any tricks to enhance performance or user experience , it would be very helpful to share it in a response below.