Mohamed Aladdin

@maladdinsayed

Cool things javascript can do

Note: It’s better to read this article from your mobile device to try all the cool stuff.

Javascript is one of the most popular programming languages and alongside with HTML and CSS, they represent the core technologies behind the World Wide Web. As the majority of the internet browsers have a built-in engine to execute Javascript, it can work on almost every device we use nowadays. Javascript has APIs which can deal with Text, Arrays, Dom, and so many other things. In this article, we are going to explore some APIs and libraries which probably you haven’t used before. These APIs with a little of imagination can significantly affect the user experience and performance of your applications.

- Page Visibility API

Since all web browsers introduce tabs to allow users to browse many websites in the same window, it is hard for a developer to determine if his application is currently in use by the user. The Page Visibility API provides events which you can listen to in order to know if your page is visible to the user or not. When a user minimizes the browser 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. With such capability, a developer can change the application behavior in the runtime which can reflect on the application performance and user experience by scaling back work when the page is not active.

Use Cases:

A potential use case for this API is when your application frequently sends ajax requests to your backend to keep the user’s dashboard up to date. Then you can pause these requests when the user is not browsing your application anymore. This way will reduce the traffic on your backend servers and also will make your application consume less memory and power which increases the user experience of your app. Another use case is to pause videos or audios that your application play when the user is switching taps or when his device is in the standby mode. Here is an example to pause a video when switching tabs:

http://daniemon.com/tech/webapps/page-visibility/

- Online and Offline Events

Not all the web applications handle the case when the user loses internet connection; maybe the application will show an alert message that the process failed but will not do anything about it. So, in order to make your application handle such situation in a right way, you should listen to the online and offline events which will help you to save current work status to the browser internal storage and resync all unfinished tasks when the connection back.

Use Cases:

All of us have experienced that case when you fill a form and then when you try to submit it, you get an error message about lost connection and then you have to refill all the fields again. It would be a happy user experience to find all your information saved and refilled for you. Another use case I had before was to let users share comments over a document, and when a user loses the internet connection I show an alert message to tell the user he/she is offline and start to internally save and aggregate the written comments to push them to the backend as soon as the connection is back. Here is an example:

- Vibrate API

When we start talking about responsive web design, it comes to your mind resizable web elements that can fit mobiles and tablets screens. However, no one is taking a step further and leverage different features these devices provide such as the vibration. This API can give your web page the same feature a native mobile app can give to your users by vibrating their devices on specific events like errors or incoming messages or even music or audio themes.

Use Cases:

A simple use case is when the user tries to login with wrong username or password beside showing a red error message you can trigger the vibration too. Another one is to vibrate it when a new comment, update or message is coming. Another cool feature this API provides is to control the vibration theme, for example, make your app doing the “super Mario theme” with vibration or “Go Go Power Rangers.” You can try these cool things here:

- Clipboard.js

If your application provides any texts that a user needs to copy, then you definitely need this library. “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.” the official website said. The library is only 3KB and can easily be installed and used. The support of the browsers for the library is great since it is relying on both “Selection” and “execCommand” APIs where the Selection API is supported by all browsers, and execCommand API is supported by the majority of the modern browsers.

Use Cases:

A personal use case I always face is when I try to select a couple of lines of text and fails to select the exact start and end points. I believe that you encountered this situation before.

- WebVR and A-Frame

“WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have.” the official website said.

However, to make it even easier to create a virtual reality experience in your application, there is A-Frame, an open source framework which makes creating VR experience in web apps straightforward and Mozilla and WebVR community primarily maintain it. I have to confess, VR is still limited to a specific kind of web apps, but I wonder when we will be able to shop from a nearby supermarket or pharmacy with their VR web interfaces.

Take a look at this museum simple interface.

- Device Orientation

Device orientation API allows your Web applications to have access to the gyroscope and compass data on user’s mobile devices in order to determine the static orientation of the device in all the three dimensions.

from dev.opera.com

There are two events which you can detect to handle the orientation of a device. The first one is “DeviceOrientationEvent” which is fired when the device’s accelerometer detects a change to the orientation, and by using the data sent by this event, a developer can immediately use this data to make his/her application screens responsive. The second event is “ DeviceMotionEvent,” which is fired when a change in the device’s acceleration happened.

Use Cases:

Detecting changes in the device orientation can be helpful in geolocation applications to provide step by step navigation. Also, in the gaming applications to handle the direction of the player’s character. Another simple use case is to kill the waiting time for your users by providing a simple waiting message that responds to movement. It will keep your users busy for a while playing around and make them feel that your application not so slow which is very useful if your application needs to preprocess a lot of data. Here is an example.

- Navigation Timing API

Well, we always talk about enhancing the performance of the application, but you can’t improve what you can’t measure. Here it comes the “Navigation Timing API” which can provide you with data about the performance of your web page. Maybe you used to do this benchmarking with some javascript-based libraries; however, the navigation timing API can provide more reliable and accurate information. This API can even offer some information that was hard to collect before that, such as the unload time for the previous page, domain lookups or the total time to execute the windows load handler. I recommend to have a look at these examples here:

Finally, if you know another great API, it would be beneficial to share it with us.

More to Read:
- Software Architecture: Architect Your Application with AWS
- Software Architecture — The Difference Between Architecture and Design
- Advanced Coding Skills, Techniques, and Ideas

More by Mohamed Aladdin

Topics of interest

More Related Stories