
3 ways to center a Div in CSS
Have you ever gone to an interview and been asked the question: How to center a div? If you are a senior developer, are you sure that the way you are doing is best?
a year ago
#css
Bad π:
const mySkills = [];
if (mySkills.length > 0) {
// Write your code
}
<^>Good<^> π:
const mySkills = [];
if (mySkills.length) {
// Write your code
}
Bad π:
const isVisible = true; if (isVisible) {
doMyFunc()
}
<^>Good<^> π:
isVisible && doMyFunc()
Bad π:
const addToCart = true;
const myObject = {};
if (addToCart) {
myObject.product = "Macbook";
}
<^>Good<^> π:
const addToCart = true;
const myObject = { ...(product ? { product: "Macbook" } : {}) };
Bad π:
if (animal === "cat" || animal === "tiger" || animal === "dog") {
doMyFunc();
}
<^>Good<^> π:
const includedAnimals = ["cat", "tiger", "dog"];
if (includedAnimals.includes(animal)) {
doMyFunc()
}
Bad π:
const stringType = "DataString";
const arrayType = [];
const objectType = {};
if (stringType) {}; // Check existence of string
if (arrayType) {}; // Check existence of array
if (objectType) {}; // Check existence of object
<^>Good<^> π:
const stringType = "DataString";
const arrayType = [];
const objectType = {};
if (!!stringType) {}; // gives boolean result true or false
if (!!arrayType) {}; // gives boolean result true or false
if (!!objectType) {}; // gives boolean result true or false
The tips above seem simple right? However, not all developers know and use it in the project to make the code shorter and easier. If you have any other tips, please let me know in the comments!