rontend Coding Tips

1. Hiding an HTML element

<p hidden>This paragraph won't show up. It's hidden by HTML.</p>

2. Use the inset shorthand in CSS

Bad practice:

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

Good practice:

div{
  position: absolute;
  inset: 0;
}

 

3. Detect internet speed

navigator.connection.downlink;

4. Vibrate your phone

//vibrating the device for 500 millisecondswindow.navigator.vibrate(500);
5. Disable pull to refresh

By using only CSS, you can disable pull to refresh on mobile. The property overscroll-behavior-y allows us to do that. Just give it the value contain .
Here is the example:
body{
 overscroll-behavior-y: contain;
}

6. Prevent the user from pasting text
There will be situations where you will need to prevent the user from pasting text into inputs.
Well, you can easily do that in JavaScript using a paste event listener.
Here is an example:
<input type="text"></input><script>//selecting the input.
  const input = document.querySelector('input');
  
//prevent the user to paste text by using the paste eventListener.
  input.addEventListener("paste", function(e){
    e.preventDefault()
  })
  
</script>