A few CSS tricks that frontend developers should know

KhanhKitin — Sat, 26 Jun 2021 19:08:29 +0000

Here is a few tricks that I encountered in the process of making CSS and learned how to solve it in a simple way.

1. Vertical alignment

I offten use this in a CSS Navigation Menu.

2. Remove white space below image

Solution
.img-css {
width: 300px;
height: 200px;
display: block;
}
or
.img-css {
vertical-align: middle
}

3. Using display: flex, the icon is distorted when the text is long

Solution
.cc {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
margin-right: 20px;
flex-shrink: 0;
}

4. Truncate Text

Solution
{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

5. Disable Text Selection Highlighting

If we want to disable the highlight effect.
Solution
user-select: none;

6. Make a Textarea Unable to Resize

7. Math with Calc

8. Change an HTML5 Input Placeholder Color

The article will still be updated with more cool things about CSS. Thank you for your support and reading until now.
My blogs hoangkhanh.tech
Thank you!

Tips, Trick And Best Practices JavaScript

KhanhKitin — Sun, 06 Jun 2021 14:06:01 +0000

"Be persistent and never stop learning because life is a challenging race, you will receive countless valuable lessons in return." Hello Developers! Learning, accumulating new things every day helps us to improve our skills better and better. As a software developer, our job is to constantly learn new things, update technology, improve our own programming skills. In this article, I will learn some good tips, tricks, and methods in javascript.

1. Multiple “if and else”, Switch...case, Object Literal.

With the code has many if else, else if, we will feel very stuck. So we will often think of switching to a switch case, which will look clearer and more beautiful. And for me, I also use the switch case.

The switch case is good but it also has some problems like having to break to prevent it from continuing. And I find it still quite lengthy, with objects it is flexible, concise and easy to understand. Both methods have different advantages and disadvantages. I usually use switch case =). In some cases, use object.

2. Destructuring, Spread Syntax and Rest Parameters.

These features help us work with data structures faster, more concise.

* Destructuring

Is a syntax that allows you to assign properties of an Object or an Array.

Above is an example of Object Destructuring, and below is an example of Array Destructuring.

* Spread Syntax

* Rest Parameters

3. Optional Chaining and Nullish Coalescing

* Optional Chaining

Check an attribute exists or not? If it does not exist, it will return undefined.

Optional Chaining makes the code shorter, easier to access the properties of the object.
With array.

* Nullish Coalescing

I often use the operator || to provide a default value for a variable. And now I still use it, hehe, but I have read the article carefully when using the or operator to provide a default value. It was also correct to read, then I went to MDN to read and know about Nullish Coalescing.

Syntax: leftExpr ?? rightExpr
If leftExpr is nullish ( NULL or UNDEFINED ) the result will be rightExpr. If leftExpr has a value, the result is leftExpr.

4. Multiple Condition

You may have encountered a situation where there are many conditions that perform the same task. For example, with admin, leader or member rights, they all have the same rights (for example, the right to edit, delete posts, ...).

We have many ways to make the code shorter, and look better.

I prefer to use includes :))
The article will still be updated with more cool things about javascript. Thank you for your support and reading until now.
My blogs hoangkhanh.tech
Thank you!

DEV Community: KhanhKitin