Author: John Au-Yeung

Sometimes, we want to keep Vuex state on page refresh with Vue.js.

In this article, we’ll look at how to keep Vuex state on page refresh with Vue.js.

How to keep Vuex state on page refresh with Vue.js?

To keep Vuex state on page refresh with Vue.js, we use the vuex-persistedstate package.

To install it, we run

npm install --save vuex-persistedstate

Then we use it by writing

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
    }),
  ],
  state: {
    //....
  },
});

We add the createPersistedState plugin to the Vuex store and then set storage to window.sessionStorage to use session storage to save the Vuex store data.

Conclusion

To keep Vuex state on page refresh with Vue.js, we use the vuex-persistedstate package.

Sometimes, we want to control an iframe player that’s already in the HTML with JavaScript.

In this article, we’ll look at how to control an iframe player that’s already in the HTML with JavaScript.

How to control an iframe player that’s already in the HTML with JavaScript?

To control an iframe player that’s already in the HTML with JavaScript, we can specify the ID of the iframe in the YT.Player constructor.

For instance, we write

<iframe
  id="player"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0"
></iframe>

to add the YouTube video iframe.

Then we write

let player;

const onPlayerStateChange = () => {
  //...
};

const onYouTubeIframeAPIReady = () => {
  player = new YT.Player("player", {
    events: {
      onStateChange: onPlayerStateChange,
    },
  });
};

to create the YT.Player object with the ID of the iframe as the first argument.

Conclusion

To control an iframe player that’s already in the HTML with JavaScript, we can specify the ID of the iframe in the YT.Player constructor.

Sometimes, we want to prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript.

In this article, we’ll look at how to prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript.

How to prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript?

To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed.

For instance, we write

<div class="element" contenteditable="true">
  Sample text
</div>

to add a contenteditable div.

Then we write

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    document.execCommand("insertLineBreak");
    event.preventDefault();
  }
});

to listen to the document’s keydown event with addEventListener.

In the event listener callback, we check if the key pressed is Enter with

event.key === "Enter"

If it is, we run document.execCommand("insertLineBreak") to insert a line break.

And we call event.preventDefault to prevent the div from being inserted.

Conclusion

To prevent contenteditable element from adding div on pressing enter with Chrome and JavaScript, we can listen for the keydown event on the contenteditable element and prevent the default behavior when Enter is pressed.

Sometimes, we want to convert JavaScript array to string.

In this article, we’ll look at how to convert JavaScript array to string.

How to convert JavaScript array to string?

To convert JavaScript array to string, we can use the array join method.

For instance, we write

const arr = ["A", "B", "C"];
const arrString = arr.join(", ");

to call arr.join to combine the strings in arr with each entry separated by commas.

Conclusion

To convert JavaScript array to string, we can use the array join method.

Sometimes, we want to wait for a JavaScript Promise to resolve before resuming function.

In this article, we’ll look at how to wait for a JavaScript Promise to resolve before resuming function.

How to wait for a JavaScript Promise to resolve before resuming function?

To wait for a JavaScript Promise to resolve before resuming function, we use async and await.

For instance, we write

const wrapperFunc = async () => {
  try {
    let r1 = await someFunc();
    let r2 = await someFunc2(r1);
    return someValue;
  } catch (e) {
    console.log(e);
    throw e;
  }
};

to call someFunc and someFunc2 which return promises.

We use await to wait for the returned promises to finish in each function and then get their resolved value.

If any returned promise is rejected, then the catch block runs and we get the rejected reason from the e parameter.

We can only use await inside async functions and async functions only return promises.

Conclusion

To wait for a JavaScript Promise to resolve before resuming function, we use async and await.