Cool New JavaScript Features

We are going to share you some cool JavaScript features you will love them features like Base64 encoding and decoding, The vibration API, Constants, CSS property is supported with JavaScript and The page visibility API.

Base64 encoding and decoding

You can use the btoa function to encode in base64 an arbitrary string and the atob function to decode the string.

Here is how you can use them:

var string = "Hello World!";

var encoded = btoa(string);  // "SGVsbG8gV29ybGQh"



var decoded = atob(encoded) // "Hello World!"

The battery status API

The battery status API allows you to get information regarding the battery status of the device browsing your website. Here is how you can use it:

var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery

if (battery) {

            // battery API supported

}

With this battery variable, you can get the battery’s level and find out whether the device is currently charging or not. You can use battery.charging and battery.level to find those things out.

The vibration API

You can use the vibration API to make a device capable of vibrating vibrate for a certain number of seconds. To achieve this, you use the navigator.vibrate method and pass it the milliseconds to vibrate. For example, navigator.vibrate(1000) would make the device vibrate for a second. You can also pass an array to make multiple shots of vibrations.

Constants

You can use the const keyword instead of the var keyword to create constants. Those are constants with block-level scope, they can’t be overwritten once declared.  Here is a brief console example:

const name = "Ivan"



undefined



name



"Ivan"



name = "Johny"



VM144:1 Uncaught TypeError: Assignment to constant variable.



    at <anonymous>:1:6



(anonymous) @ VM144:1

Check whether a CSS property is supported with JavaScript

You can check whether the browser supports a given CSS property and a property value using the CSS.supports rule. It will return a boolean indicating whether the property is supported (true if it is). Here are few examples of how you can use the method:

CSS.supports("display", "flex");



CSS.supports("box-shadow", "10px 10px 5px #888888");

The page visibility API

The page visibility API can be used in several ways. document.hidden holds a boolean indicating whether the page is hidden or not. There are fallbacks for older browsers, so you can set a hidden variable appropriate to the browser. For Internet Explorer, you can check if document.msHidden is defined and for webkit-based browsers document.webkitHidden.  The same holds true for the visibilitychange eventI in terms of prefixes. The visibilitychange event is triggered whenever the page is turned back to focus or loses focus and uses the same prefixes for older browsers. Below is an example of using the APIs.

var hidden, visibilityChange; 

if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 

  hidden = "hidden";

  visibilityChange = "visibilitychange";

} else if (typeof document.msHidden !== "undefined") {

  hidden = "msHidden";

  visibilityChange = "msvisibilitychange";

} else if (typeof document.webkitHidden !== "undefined") {

  hidden = "webkitHidden";

  visibilityChange = "webkitvisibilitychange";

}



// the event will fire whenever the page loses or gains focus



 document.addEventListener(visibilityChange, function() {



.// check if the page is hidden or not and react



If (document[hidden]) {



// the page is hidden from sight



}



else {



// the page is visible

}



}, false);

I hope you like this please subscribe us on facebook for more interesting articles/tutorials