Author: John Au-Yeung

Sometimes, we want to detect browser back button click with JavaScript.

In this article, we’ll look at how to detect browser back button click with JavaScript.

How to detect browser back button click with JavaScript?

To detect browser back button click with JavaScript, we listen the popstate event.

For instance, we write

window.onpopstate = () => {
  alert("clicked back button");
};
history.pushState({}, "");

to set the window.onpopstate property to a function that calls alert to show an alert.

The method is called when we click the back button on the browser.

Conclusion

To detect browser back button click with JavaScript, we listen the popstate event.

Sometimes, we want to rotate and scale an img at the same time with CSS.

In this article, we’ll look at how to rotate and scale an img at the same time with CSS.

How to rotate and scale an img at the same time with CSS?

To rotate and scale an img at the same time with CSS, we use rotate and scale.

For instance, we write

<img class="rotate-img" src="https://picsum.photos/300/300" />

to add an img element.

Then we write

.rotate-img {
  -webkit-transform: rotate(90deg) scale(0.2);
  transform: rotate(90deg) scale(0.2);
  left: -200px;
  position: relative;
}

to select the rotate-img class and set its transform property to add the rotate and scale options.

Conclusion

To rotate and scale an img at the same time with CSS, we use rotate and scale.

To pass variables to JavaScript in Express.js, we put a property in the context.

For instance, we write

app.get("/test.js", (req, res) => {
  res.set("Content-Type", "application/javascript");
  res.render("testPage", { myVar: "foo" });
});

to call res.render to render the testPage template.

We call it with an object with the variables we want to pass to the template.

Then we render the variable value with

<script>
  const myVar = <%- JSON.stringify(myVar) %>;
</script>

Conclusion

To pass variables to JavaScript in Express.js, we put a property in the context.

Sometimes, we want to fix build failing with npm rebuild node-sass --force.

In this article, we’ll look at how to fix build failing with npm rebuild node-sass --force.

How to fix build failing with npm rebuild node-sass --force?

To fix build failing with npm rebuild node-sass --force, we reinstall node-sass.

To do this, we run

npm uninstall node-sass
npm i node-sass
npm rebuild node-sass

to uninstall node-sass with npm uninstall.

Then we reinstall it with npm i.

Finally, we rebuild it with npm rebuild.

Conclusion

To fix build failing with npm rebuild node-sass --force, we reinstall node-sass.

To advance to the next form input when the current input has a value with JavaScript, we find the next input and call focus on it.

For instance, we write

window.onkeypress = (e) => {
  if (e.which === 13) {
    e.preventDefault();
    const nextInput = inputs.get(inputs.index(document.activeElement) + 1);
    nextInput?.focus();
  }
};

to set the window.onkeypress property to a function that checks if enter is pressed with e.which === 13.

If it is, then we call preventDefault to stop the default behavior.

Then we use inputs.get to get the next input.

And then we call focus on it to make it focused.

Conclusion

To advance to the next form input when the current input has a value with JavaScript, we find the next input and call focus on it.