Author: John Au-Yeung

Sometimes, we want to fix document.body null error with JavaScript.

In this article, we’ll look at how to fix document.body null error with JavaScript.

How to fix document.body null error with JavaScript?

To fix document.body null error with JavaScript, we should reference document.body only when the page is loaded.

For instance, we write

window.onload = () => {
  const mySpan = document.createElement("span");
  mySpan.innerHTML = "This is my span!";
  mySpan.style.color = "red";
  document.body.appendChild(mySpan);
};

to call document.body.appendChild in the window.onload method, which runs when the page is loaded.

If the page is loaded, that means the body element is loaded and document.body is available.

Conclusion

To fix document.body null error with JavaScript, we should reference document.body only when the page is loaded.

Sometimes, we want to fix Destructuring of undefined error with JavaScript.

In this article, we’ll look at how to fix Destructuring of undefined error with JavaScript.

How to fix Destructuring of undefined error with JavaScript?

To fix Destructuring of undefined error with JavaScript, we use an empty object as the fallback value.

For instance, we write

const content = undefined;
const { item } = content || {};
console.log(item);

to use {} as the fallback value for content.

Then item is undefined since content is undefined and the empty object is destructured.

Conclusion

To fix Destructuring of undefined error with JavaScript, we use an empty object as the fallback value.

Sometimes, we want to draw smooth curve through N points using JavaScript HTML5 canvas.

In this article, we’ll look at how to draw smooth curve through N points using JavaScript HTML5 canvas.

How to draw smooth curve through N points using JavaScript HTML5 canvas?

To draw smooth curve through N points using JavaScript HTML5 canvas, we create a loop that calls the canvas context quandraticCurveTo method with the end and midpoints.

For instance, we write

const points = [
  { x: 1, y: 1 },
  { x: 2, y: 3 },
  { x: 3, y: 4 },
  { x: 4, y: 2 },
  { x: 5, y: 6 },
];
ctx.moveTo(points[0].x, points[0].y);

for (let i = 0; i < points.length - 1; i++) {
  const xMid = (points[i].x + points[i + 1].x) / 2;
  const yMid = (points[i].y + points[i + 1].y) / 2;
  const cpX1 = (xMid + points[i].x) / 2;
  const cpX2 = (xMid + points[i + 1].x) / 2;
  ctx.quadraticCurveTo(cpX1, points[i].y, xMid, yMid);
  ctx.quadraticCurveTo(cpX2, points[i + 1].y, points[i + 1].x, points[i + 1].y);
}

to create a for loop that gets the midpoint x and y coordinates with

const xMid = (points[i].x + points[i + 1].x) / 2;
const yMid = (points[i].y + points[i + 1].y) / 2;

We get the x coordinate endpoints with

const cpX1 = (xMid + points[i].x) / 2;
const cpX2 = (xMid + points[i + 1].x) / 2;

And then we call quadraticCurveTo method to draw the point from the current point to midpoint.

Then we call quadraticCurveTo again to draw the curve between the midpoint between the midpoint and the next point and the next point.

Conclusion

To draw smooth curve through N points using JavaScript HTML5 canvas, we create a loop that calls the canvas context quandraticCurveTo method with the end and midpoints.

Sometimes, we want to fix input losing focus when rerendering with React.

In this article, we’ll look at how to fix input losing focus when rerendering with React.

How to fix input losing focus when rerendering with React?

To fix input losing focus when rerendering with React, we should define child components outside the parent component.

For instance, we write

const Child = () => <p>Child!</p>;
const Parent = () => <Child />;

to define the Child component outside the Parent.

And then we render the Child component in the Parent.

This way, when Parent re-renders, Child only re-renders if the props or state of it changes.

Conclusion

To fix input losing focus when rerendering with React, we should define child components outside the parent component.