Author: John Au-Yeung

Sometimes, we want to use Google Text-To-Speech in JavaScript.

In this article, we’ll look at how to use Google Text-To-Speech in JavaScript.

How to use Google Text-To-Speech in JavaScript?

To use Google Text-To-Speech in JavaScript, we use the SpeechSynthesisUtterance constructor.

For instance, we write

const msg = new SpeechSynthesisUtterance("Hello World");
window.speechSynthesis.speak(msg);

to create a SpeechSynthesisUtterance object with the text string we want the computer to speak.

Then we call window.speechSynthesis.speak with msg to speak it.

Conclusion

To use Google Text-To-Speech in JavaScript, we use the SpeechSynthesisUtterance constructor.

Sometimes, we want to parse XLSX with Node and create JSON with JavaScript.

In this article, we’ll look at how to parse XLSX with Node and create JSON with JavaScript.

How to parse XLSX with Node and create JSON with JavaScript?

To parse XLSX with Node and create JSON with JavaScript, we use the xlsx package.

To install it, we run

npm i xlsx

Then we use it by writing

const XLSX = require("xlsx");
const workbook = XLSX.readFile("Master.xlsx");
const sheetNameList = workbook.SheetNames;
console.log(XLSX.utils.sheet_to_json(workbook.Sheets[sheetnamelist[0]]));

We call readFile with the path of the file to read.

We get an array of sheet names with workbook.SheetNames.

And we parse the first sheet to JSON with XLSX.utils.sheet_to_json(workbook.Sheets[sheetnamelist[0]]).

Conclusion

To parse XLSX with Node and create JSON with JavaScript, we use the xlsx package.

Sometimes, we want to detect click inside/outside of element with single event handler with JavaScript.

In this article, we’ll look at how to detect click inside/outside of element with single event handler with JavaScript.

How to detect click inside/outside of element with single event handler with JavaScript?

To detect click inside/outside of element with single event handler with JavaScript, we use the element contains method.

For instance, we write

const myElementToCheckIfClicksAreInsideOf =
  document.querySelector("#my-element");

document.body.addEventListener("click", (event) => {
  if (myElementToCheckIfClicksAreInsideOf.contains(event.target)) {
    console.log("clicked inside");
  } else {
    console.log("clicked outside");
  }
});

to add a click listener for the myElementToCheckIfClicksAreInsideOf container element with addEventListener.

In it we call myElementToCheckIfClicksAreInsideOf.contains to check if the element that we clicked on is in myElementToCheckIfClicksAreInsideOf .

event.target is the element that we clicked on.

Conclusion

To detect click inside/outside of element with single event handler with JavaScript, we use the element contains method.

Sometimes, we want to detect if user is using web view for Android/iOS or a regular browser with JavaScript.

In this article, we’ll look at how to detect if user is using web view for Android/iOS or a regular browser with JavaScript.

How to detect if user is using web view for Android/iOS or a regular browser with JavaScript?

To detect if user is using web view for Android/iOS or a regular browser with JavaScript, we use the user agent string.

For instance, we write

const userAgent = window.navigator.userAgent.toLowerCase();
const safari = /safari/.test(userAgent);
const ios = /iphone|ipod|ipad/.test(userAgent);

if (ios) {
  if (safari) {
    //...
  } else if (!safari) {
    //...
  }
} else {
  //...
}

to get the user agent string with window.navigator.userAgent.

We return a all lower case version it with toLowerCase.

Then we check if the user if using Safari with /safari/.test(userAgent)

And we check if the user if using iOS with /iphone|ipod|ipad/.test(userAgent).

Conclusion

To detect if user is using web view for Android/iOS or a regular browser with JavaScript, we use the user agent string.