6 useful frontend techniques that you may not know about

A small selection of little-known techniques for HTML, CSS, and JavaScript.

The frontend is the first line of defense of the website (or, more precisely, the first line of "attack" on the user), so front-end developers always have a lot of work to do. To make their lives a little easier, we've picked up some useful, but not very well-known HTML, CSS, and JavaScript techniques.

1. Quickly hide

To hide a DOM element, you don't need JavaScript. A native HTML attribute is enough hidden. The effect is similar to adding a style display: none;. The element simply disappears from the page.

<p hidden>This paragraph is not visible on the page, it is hidden from the HTML.</p>

Of course, this trick won't work with pseudo-elements.

2. Position quickly

Are you familiar with the inset CSS property? This is an abbreviated version for the familiar top, left, right and bottom. By analogy with the short syntax margin of the or property padding, you can set all offsets for an element in one line.

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

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

Using a short syntax is useful for reducing the size of the CSS file, and the code looks cleaner this way. However, don't forget that inset is a boolean property, it takes into account the email direction. In other words, if your site uses a language with the rtl direction, then left will turn out to be right and vice versa.

3. Find out your internet speed

You can easily determine the user's internet speed from JavaScript code using an object navigator.

navigator.connection.downlink;

This is currently an experimental technology, although it is supported by a number of popular browsers, so be careful with it.

4. Enable vibration on your smartphone

Yes, this is also possible. The object's vibrate() method window.navigator can enable vibration mode on a mobile device.

window.navigator.vibrate(500);

You can pass the parameter vibration time in milliseconds to the method. Or you can even specify a pattern-the alternation of vibration intervals and pauses. To do this, pass the method an array of numbers.

5. Prohibit pull-to-refresh

Pull-to-refresh is a popular mobile development pattern. If you don't like it, just disable this effect using the overscroll-behavior-y CSS property with the value contain.

body {
 overscroll-behavior-y: contain;
}

This property is also very useful for organizing scrolling inside modal windows – it prevents the main page from intercepting scrolling when it reaches the border.

6. Prohibit inserting text

You may want to prevent the user from pasting text copied from somewhere in the input fields (think carefully about whether it's worth it). This is very easy to do by tracking the event paste and calling its method preventDefault().

<input type="text"></input>
<script>
  const input = document.querySelector('input');

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

Oops, now you won't be able to copy-paste, you'll have to write and enter everything by hand.

These techniques are not used very often, but they can be useful in a number of situations. I hope you found something interesting for yourself.