Author: John Au-Yeung

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

Categories
CSS

How to position element at center of screen with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to position element at center of screen with CSS.

In this article, we’ll look at how to position element at center of screen with CSS.

How to position element at center of screen with CSS?

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.

For instance, we write

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

to style the div with the popup class with the positioning styles.

We set position to fixed to make the div float above other items.

Then we set the top and left properties to 50% to make it move 50% from the top and left side of the screen.

And then we use the transform style to translate the div to the center of the screen.

Conclusion

To position element at center of screen with CSS, we set the position of the div to fixed.

Then we translate the div to the center of the screen with various styles.

Categories
JavaScript Answers

How to convert JavaScript date time to MySQL datetime?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert JavaScript date time to MySQL datetime.

In this article, we’ll look at how to convert JavaScript date time to MySQL datetime.

How to convert JavaScript date time to MySQL datetime?

To convert JavaScript date time to MySQL datetime, we can call the date’s toISOString method.

For instance, we write

const date = new Date().toISOString().slice(0, 19).replace("T", " ");

to call toISOString to return a date string of the date in ISO8601 format.

Then we call slice with 0 and 19 to get the datetime part of the string.

And we replace 'T' with a space with replace.

Conclusion

To convert JavaScript date time to MySQL datetime, we can call the date’s toISOString method.

Categories
JavaScript Answers

How to get GPS location from the web browser with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get GPS location from the web browser with JavaScript.

In this article, we’ll look at how to get GPS location from the web browser with JavaScript.

How to get GPS location from the web browser with JavaScript?

To get GPS location from the web browser with JavaScript, we can use the navigator.geolocation.getCurrentPosition method.

For instance, we write

navigator.geolocation.getCurrentPosition((location) => {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

to call getCurrentLocation with a callback that has the location object parameter.

We get the latitude, longitude, and accuracy from the location.coords property.

Conclusion

To get GPS location from the web browser with JavaScript, we can use the navigator.geolocation.getCurrentPosition method.

Categories
React Answers

How to fix this.setState isn’t merging states as expected with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix this.setState isn’t merging states as expected with React.

In this article, we’ll look at how to fix this.setState isn’t merging states as expected with React.

How to fix this.setState isn’t merging states as expected with React?

To fix this.setState isn’t merging states as expected with React, we make a copy of the original state object, modify it, and then call setState with the modified copied object.

For instance, we write

const { selected: _selected } = this.state;
const selected = { ..._selected, name: "Barfoo" };
this.setState({ selected });

to copy the _selected state with ....

Then we add the name property to it.

Then we assign that to selected and call setState with { selected } to update it.

Conclusion

To fix this.setState isn’t merging states as expected with React, we make a copy of the original state object, modify it, and then call setState with the modified copied object.

Categories
JavaScript Answers

How to find the height of text on an HTML canvas with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to find the height of text on an HTML canvas with JavaScript.

In this article, we’ll look at how to find the height of text on an HTML canvas with JavaScript.

How to find the height of text on an HTML canvas with JavaScript?

To find the height of text on an HTML canvas with JavaScript, we can use the canvas context’s measureText method.

For instance, we write

const metrics = ctx.measureText(text);
const fontHeight =
  metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
const actualHeight =
  metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

to call measureText on the ctx canvas context.

We call it with the text string to get the text‘s dimensions.

And then we get the fontHeight and actualHeight with

metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;

and

metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;

Conclusion

To find the height of text on an HTML canvas with JavaScript, we can use the canvas context’s measureText method.