You may not know that these 6 useful front-end technologies can be so cool!

Author: Shadeed
Translator: Frontend Xiaozhi
Source: dev

If you have dreams and dry goods, search on for 161131a11401fa [Moving to the World] Follow this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

In order to make programming easier for everyone, this book selects some useful but relatively rare useful skills. Not much nonsense, I drove.

1. Quickly hide

To hide a DOM element, JavaScript is not required. A native HTML attribute is enough to hide. The effect is similar to adding a style display: none; .

<p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p>

However, this technique does not work on pseudo-elements.

2. Quickly locate

Are you familiar with the inset` CSS property? It is an abbreviated version of `top`, `left`, `right` and bottom Similar to the abbreviated margin and padding`, we can set all the offsets of an element in a row.

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

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

3. The front-end test network speed

The Chrome browser provides the original API navigator.connection.downlink to access the network bandwidth of the user's current network environment.

navigator.connection.downlink;

connection.downlink returns is not the network transmission speed displayed in the user's current environment, but the current network bandwidth. The official statement is: return the effective bandwidth in units of Mb/s 25kb/s the nearest integer multiple of 061131a1140379.

For example, I ran the sentence navigator.connection.downlink in the Chrome browser console at my home, and the result returned is 10 , which means that the download bandwidth is 10M .

See this article for specific scenarios: https://www.zhangxinxu.com/wordpress/2021/04/navigator-connection-downlink/

5. Do not pull to refresh

The CSS overscroll-behavior property allows developers to override the browser’s default overflow scrolling behavior when the top/bottom of the content is reached. Use cases include disabling the "pull to refresh" feature on mobile devices, eliminating excessive scrolling glow and rubber band effects, and preventing page content from scrolling under modals/overlays

body {
 overscroll-behavior-y: contain;
}

This property is also very useful for organizing scrolling within a modal window-it can prevent the main page from intercepting scrolling when it reaches the boundary.

refer to this article: 161131a1140431 https://www.zhangxinxu.com/wordpress/2020/01/css-overscroll-behavior/

6. Do not insert text

When the user initiates a "paste" operation on the browser user interface, the paste event will be triggered.

Sometimes, I want to prohibit the user from pasting text copied from a certain place into the input box. This can be done easily by listening to the paste event and calling its method preventDefault()

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

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

</script>

~End, I am Xiaozhi. When finishing this article, I was ill and I was going to the clubhouse to relax.

possible bugs that may exist after the 161131a11404ff code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

https://dev.to/ra1nbow1/6-useful-frontend-techniues-that-you-may-not-know-about-47hd

comminicate

If you have dreams and dry goods, search for [Moving to the World] attention to this wise brush who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.