Category: JavaScript Answers

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.

Sometimes, we want to make exe files from a Node.js app with JavaScript.

In this article, we’ll look at how to make exe files from a Node.js app with JavaScript.

How to make exe files from a Node.js app with JavaScript?

To make exe files from a Node.js app with JavaScript, we can use JXcore program.

We install it with

curl http://jxcore.com/xil.sh | bash

on Linux or download the binary install it on Windows.

Then we create an exe from our Node.js project by running

jx package app.js "myAppName" -native

app.js is the entry point file in our Node.js project.

'myAppName' is the app name and should be replace with our app’s name.

-native builds a native executable for the platform it’s currently on.

Conclusion

To make exe files from a Node.js app with JavaScript, we can use JXcore program.

Sometimes, we want to determine if an HTML element’s content overflows with JavaScript.

In this article, we’ll look at how to determine if an HTML element’s content overflows with JavaScript.

How to determine if an HTML element’s content overflows with JavaScript?

To determine if an HTML element’s content overflows with JavaScript, we can compare if the child element’s width is longer than the parent element’s width.

For instance, we write

const checkOverflow = (elem) => {
  const elemWidth = elem.getBoundingClientRect().width;
  const parentWidth = elem.parentElement.getBoundingClientRect().width;

  return elemWidth > parentWidth;
};

to get the elem element’s width with

elem.getBoundingClientRect().width

Then we get elem‘s parent’s width with

elem.parentElement.getBoundingClientRect().width;

Both widths are in pixels.

And if elemWidth is bigger than parentWidth, elem overflows the parent container.

Conclusion

To determine if an HTML element’s content overflows with JavaScript, we can compare if the child element’s width is longer than the parent element’s width.