Category: JavaScript

Sometimes, we want to shorten conditional statements with JavaScript.

In this article, we’ll look at how to shorten conditional statements with JavaScript.

How to shorten conditional statements with JavaScript?

To shorten conditional statements with JavaScript, we can use the array includes method.

For instance, instead of writing

if (test.type == 1 || test.type == 2 || test.type == 3 || test.type == 4) {
  // do something.
}

We can shorten that to

if ([1, 2, 3, 4].includes(test.type)) {
  // do something
}

We check if at least one of 1, 2, 3, and 4 are set as the value of test.type with

test.type == 1 || test.type == 2 || test.type == 3 || test.type == 4

or

[1, 2, 3, 4].includes(test.type)

Sometimes, we want to add upload progress indicators for fetch.

In this article, we’ll look at how to add upload progress indicators for fetch.

How to add upload progress indicators for fetch?

To add upload progress indicators for fetch, we replace fetch with axios.

To install it, we run

npm i axios

Then we use it by writing

const data = await axios.request({
  method: "post",
  url,
  data: myData,
  onUploadProgress: (p) => {
    console.log(p, p.loaded / p.total);
  },
});

in an async function to make a post request.

We add the onUploadProgress method in the object we call axios.request with to get the progress of our request.

p.loaded has the number of bytes and p.total has the total number of bytes for the request that needs to be sent.

Conclusion

To add upload progress indicators for fetch, we replace fetch with axios.

Sometimes, we want to get notified when an element is added to the page with JavaScript.

In this article, we’ll look at how to get notified when an element is added to the page with JavaScript.

How to get notified when an element is added to the page with JavaScript?

To get notified when an element is added to the page with JavaScript, we can use the MutationObserver constructor.

For instance, we write

const observerConfig = {
  attributes: true,
  childList: true,
  characterData: true,
};

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
  });
  resolve(mutations);
});
observer.observe(targetNode, observerConfig);

to create a MutationObserver with a callback that runs when the DOM changes.

And we call observer with the targetNode DOM node object and the observerConfig object.

In observerConfig we set attributes, childList, and characterData to true to watch for changes in node attributes, node add or remove, and character data changes.

Conclusion

To get notified when an element is added to the page with JavaScript, we can use the MutationObserver constructor.

Sometimes, we want to do image resizing client-side with JavaScript before upload to the server.

In this article, we’ll look at how to do image resizing client-side with JavaScript before upload to the server.

How to do image resizing client-side with JavaScript before upload to the server?

To do image resizing client-side with JavaScript before upload to the server, we can use the compress.js package.

To install it, we run

npm i compress.js

Then we use it by writing

const compress = new Compress();

document.getElementById("select").onchange = async (evt) => {
  const files = [...evt.target.files];
  const data = await compress.compress(files, {
    size: 4,
    quality: 0.75,
    maxWidth: 1920,
    maxHeight: 1920,
    resize: true,
    rotate: false,
  });
  //...
};

to select the file input with

document.getElementById("select")

Then we set its onchange property to a function that runs when we select files.

In the function, we call compress.compress with the files array with the image files.

And we set the maxWidth and maxHeight and set resize to true to change the size of the images.

Then we get the resized image from the data array.

Conclusion

To do image resizing client-side with JavaScript before upload to the server, we can use the compress.js package.

Sometimes, we want to write code for no operation with JavaScript.

In this article, we’ll look at how to write code for no operation with JavaScript.

How to write code for no operation with JavaScript?

To write code for no operation with JavaScript, we can create an empty function.

For instance, we write

const noop = () => {};
setTimeout(noop, 10000);

to create the noop function.

And then we call setTimeout with noop to run it after 10000 milliseconds.

Conclusion

To write code for no operation with JavaScript, we can create an empty function.