Share 5 front-end tips that you may not know

We all know that front-end development is a dynamic field these days, with new techniques and best practices emerging every day.

As a front-end developer, if you really want to create engaging, intuitive and responsive user interfaces, you have to stay abreast of the latest trends and technologies.

As front-end developers, we need to complete multiple tasks every day. In addition to this, we need to constantly write HTML, CSS and JavaScript code.

Knowing some coding tricks is very useful for us. So, I decided to share some front-end coding tips with you in this article, because I think a lot of beginner developers don't know about it.

1. Use the inset abbreviation of CSS

It's a good idea to use shorthand to make CSS code more concise.

In CSS, the property inset is a very convenient abbreviation, which represents the four properties of left (left), right (right), bottom (bottom) and top (top).

So, you can replace the original code with the following CSS snippet:

.element{
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
}

You can use the following simple code snippet, using the inset attribute:

.element{
  position: absolute;
  inset: 0;
}

These two code snippets achieve the same functionality, but using the inset property saves some lines of code and makes the CSS code more concise. So if you don't want to write all four properties (such as top, right, left, etc.), using the inset property is a very convenient shorthand.

Many developers are not aware of this shorthand.

2. Hide elements without CSS and JavaScript

Did you know that you can hide an HTML element from a page without using any CSS or JavaScript code?

In fact, the attribute hidden allows you to quickly hide any HTML element natively in any web page.

Take a look at this code example:

<header hidden>This header won't show up. It's natively hidden.</header>

As you can see, the attribute hidden can hide elements natively in our web pages.

3. Disable the pull-down refresh function

We can disable the pull-to-refresh feature on mobile devices using only CSS. This is thanks to the property overscroll-behavior-y.

Just set the property's value to contain.

Here is an example of CSS code:

body {
overscroll-behavior-y: contain;
}

With the above code, we can disable the pull-to-refresh feature on mobile devices.

4. Easily detect network bandwidth

Network bandwidth is simply the amount of data transferred over an internet connection in a given period of time.

By using the navigator object in JavaScript, we can easily detect network bandwidth.

See the JavaScript code example below:

navigator.connection.downlink;

If you type this code into the browser console, you will get something like this:

What we did is we took the navigator object and got a property from it called downlink.

The downlink attribute tells us the speed of our internet connection in megabits per second (Mbps).

When I tried running the code, I got a result with a value of 5.65, but your results may vary depending on your internet speed and the browser you are using. You can try it yourself in the browser console.

5. Use JavaScript to easily vibrate your phone

We can again use the navigator object in JavaScript to make the mobile device vibrate. The vibrate() method on the navigator object allows us to do this.

//making the mobile device vibrate for 600 milliseconds

window.navigator.vibrate(600);

As you can see in the code, in this example, the device will vibrate for 600 milliseconds. You can apply this JavaScript to any web page and try it out on your mobile device.

Summarize

These are some coding tips that are very useful for front-end developers. Many developers don't understand these skills, especially junior developers who are just starting to learn.

Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.

Original:
https://javascript.plainenglish.io/5-amazing-frontend-coding-tips-that-nobody-is-talking-about-5a8984d26773

By Mehdi Aoussiad

Indirect translation, some self-adapted and added parts, the translation level is limited, it is inevitable that there are omissions, welcome to correct