DEV Community

Cover image for 6 useful frontend techniques that you may not know about
Matvey Romanov
Matvey Romanov

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Latest comments (51)

Collapse
 
hyggedev profile image
Chris Hansen

Basically learned 5 out of 6 things. Thanks! 🔥

Collapse
 
meo3w profile image
Phil Hasenkamp

Very awesome! Thank you for sharing your knowledge!

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Thank you so much

Collapse
 
qq449245884 profile image
qq449245884

Dear Mtvey Romanov,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
__victorchan profile image
Victor Chan

great tips, thanks for the help

Collapse
 
manuelricci profile image
Manuel Ricci

I was unaware of overscroll-behavior-y: contain; thanks!

Collapse
 
tlcheung profile image
TL Cheung

Does anyone know an HTML attribute for tool tips? I swear I read one of these articles that showed a very simple way to do it. But know I want to use this feature and all I can find are very long & involved html/css. I love css and wouldn't mind if it was only a few lines of code but I don't want something very complicated.. Thanks

Collapse
 
talorlanczyk profile image
TalOrlanczyk

Hi great stuff
But I would recommend adding that while using the hidden feature you cant do animation on it .
You have to add className any way

Collapse
 
escornwell profile image
Eric Cornwell • Edited

About inset you say "inset is a boolean property, it takes into account the email direction". I think you mean it's a logical property, and it respects the flow direction. Following the link you provided to the Mozilla docs, there is no mention of booleans or email.

Collapse
 
aheisleycook profile image
privatecloudev

good poiny

Collapse
 
builesyeison profile image
Yeison Stiven Builes Uribe

Very useful information. Thank you so much

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Thanks a lot

Collapse
 
webketje profile image
webketje

I feel old now. None of them were beknownst to me, except hidden. Nice stuff.

Collapse
 
reza profile image
Reza Majidi

Interesting. thanks 🙏

Collapse
 
t4inha profile image
Anderson Bosa

I think that the English word to describe your post @ra1nbow1 is: gorgeous.
Na minha língua eu usaria: delicinha

Collapse
 
joseme profile image
José Torres

Paste disable could be useful for test input, to avoid cheating.

Collapse
 
natalia_asteria profile image
Natalia Asteria

But not good for students with dyslexia, as @inhuofficial said here.

Collapse
 
nishthaneeraj profile image
Nishtha Neeraj Kushwah

Third one was interesting

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Thanks

Collapse
 
itsmnthn profile image
Manthankumar Satani

Great Techniques!!!

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Thank you <3