Home / CSS3 / 5 Valuable Frontend Techniques that you may not know

5 Valuable Frontend Techniques that you may not know

3 minutes read
114 Views
front end tricks

A tiny collection of lesser-known HTML, CSS, and JavaScript methods.

Because the front end is the website’s first line of defense (or, more correctly, the first line of “attack” on the user), front-end engineers are always busy. We’ve gathered several essential but lesser-known HTML, CSS, and JavaScript methods to make their life a bit simpler.

1- Prohibit pull-to-refresh

A common mobile development style is pull-to-refresh. If you don’t like it, just use the overscroll-behavior-y CSS property with the value contain to turn it off.

body {
 overscroll-behavior-y: contain;
}

This attribute is particularly beneficial for managing scrolling within modal windows since it avoids the main page from interfering with scrolling when it approaches the boundary.

2- Turn on the vibration feature on your smartphone.

Yes, this is also a viable option. The object’s vibrate() method window.navigator enable vibration mode on a mobile device or smartphone.

window.navigator.vibrate(500);

YouThe method accepts the parameter vibration time in milliseconds. Alternatively, you may create a pattern by alternating vibration intervals and pauses. To do so, give an array of integers to the function.

3- Find your internet speed

You can simply measure the user’s internet speed from JavaScript code using an object navigator.

navigator.connection.downlink;

Although it is supported by a number of mainstream browsers, this is still an experimental technology, so proceed with caution.

4- Position quickly

Do you know what the inset CSS attribute is? This is a condensed form of the top, left, right, and bottom terms. You may specify all offsets for an element in one line, similar to how the or property padding has a short syntax margin.

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

Using a simple syntax reduces the size of the CSS file while also making the code seem clearer. However, keep in mind that inset is a boolean property that considers the email direction. In other words, if your website utilizes an RTL language, the left will appear to be the right and vice versa.

5- Quickly hide

You don’t require JavaScript to hide a DOM element. It’s enough hidden a native HTML attribute. Adding a style display: none; has the same effect. The component just vanishes from the page.

<p hidden>Paragraph is not visible on the page, hidden from the HTML.</p>

Of course, this trick would not work with pseudo-elements.

Conclusion

These techniques aren’t commonly utilized, yet they can come in handy in a variety of scenarios. I hope you were able to find anything of interest for yourself.

Read More:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *