Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
HTML

How to eliminate 300ms delay on click events in mobile Safari?

Labrador retriever puppy walking on green grass

Sometimes, we want to eliminate 300ms delay on click events in mobile Safari.

In this article, we’ll look at how to eliminate 300ms delay on click events in mobile Safari.

How to eliminate 300ms delay on click events in mobile Safari?

To eliminate 300ms delay on click events in mobile Safari, we add a meta element to set the viewport.

For instance, we write

<meta name="viewport" content="width=device-width, user-scalable=no" />

to add a meta element with name attribute set to viewport to eliminate the 300ms delay on click events in Mobile Safari.

Conclusion

To eliminate 300ms delay on click events in mobile Safari, we add a meta element to set the viewport.

Categories
JavaScript Answers

How to fix Error: Cannot resolve module ‘style-loader’ with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix Error: Cannot resolve module ‘style-loader’ with JavaScript.

In this article, we’ll look at how to fix Error: Cannot resolve module ‘style-loader’ with JavaScript.

How to fix Error: Cannot resolve module ‘style-loader’ with JavaScript?

To fix Error: Cannot resolve module ‘style-loader’ with JavaScript, we install style-loader and add it to the Webpack config.

To install it, we run

npm install style-loader css-loader --save

to install the style-loader and css-loader packages.

Then in our Webpack config file, we write

module.exports = {
  //...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        include: path.join(_dirname, "app"),
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader",
      },
    ],
    resolve: {
      extensions: ["", ".js", ".jsx", ".css"],
    },
  },
};

to use the css-loader for importing CSS fiiles.

Conclusion

To fix Error: Cannot resolve module ‘style-loader’ with JavaScript, we install style-loader and add it to the Webpack config.

Categories
CSS

How to add wait cursor over entire HTML page with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to add wait cursor over entire HTML page with CSS.

in this article, we’ll look at how to add wait cursor over entire HTML page with CSS.

How to add wait cursor over entire HTML page with CSS?

To add wait cursor over entire HTML page with CSS, we can set the cursor style.

For instance, we write

* {
  cursor: inherit;
}
body {
  cursor: wait;
}

to set the body element’s cursor to wait with cursor: wait to make the page show the wait cursor.

And we have

* {
  cursor: inherit;
}

so that all child elements inherits the same cursor style as body.

Conclusion

To add wait cursor over entire HTML page with CSS, we can set the cursor style.

Categories
JavaScript Answers

How to save canvas as png image with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to save canvas as png image with JavaScript.

In this article, we’ll look at how to save canvas as png image with JavaScript.

How to save canvas as png image with JavaScript?

To save canvas as png image with JavaScript, we can use the FileSaver.js library.

We install it with

npm install file-saver --save

Then we use it by writing

import { saveAs } from "file-saver";

const canvas = document.getElementById("my-canvas");

//...

canvas.toBlob((blob) => {
  saveAs(blob, "image.png");
});

We select the canvas with getElementById.

Then we call canvas.toBlob with a callback that calls saveAs to save the blob with the canvas content to image.png.

Conclusion

To save canvas as png image with JavaScript, we can use the FileSaver.js library.

Categories
JavaScript Answers

How to get an object’s methods with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get an object’s methods with JavaScript.

In this article, we’ll look at how to get an object’s methods with JavaScript.

How to get an object’s methods with JavaScript?

To get an object’s methods with JavaScript, we can use the array filter method and Object.keys method.

For instance, we write

const myObj = { myFn() {}, abc: true };
const allKeys = Object.keys(myObj);
const fnKeys = allKeys.filter((key) => typeof myObj[key] == "function");
console.log(fnKeys);

to call Object.keys with myObj to get an array of property kets in myObj as a string array.

Then we call allKeys.filter with a callback that checks if myObj[key] is a function with the typeof operator.

And an array of method keys are returned by filter.

Conclusion

To get an object’s methods with JavaScript, we can use the array filter method and Object.keys method.