Five front-end tips that make people shine

In order to make programming easier for everyone, this book selects some useful but relatively rare and useful techniques. Without further ado, let’s drive.

1. Quick Hide

To hide a DOM element, no JavaScript is 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 trick does not work on pseudo-elements.

2. Quick positioning

Are you familiar with the `inset` CSS property? It is the abbreviated version of `top`, `left`, `right` and `bottom`. Similar to the shorthand `margin` and `padding`, we can set all 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. Front-end network speed test

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

navigator.connection.downlink;

connection.downlink does not return the network transmission speed displayed in the user's current environment, but the bandwidth of the current network. The official statement is: Returns the effective transmission speed in units of Mb/s bandwidth, and keep this value to the nearest integer multiple of 25kb/s.

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

4. Disable pull to refresh

CSS overscroll-behavior attribute allows developers to Overrides the browser's default overflow scrolling behavior when top/bottom. Use cases for this include disabling the "pull to refresh" feature on mobile devices, removing the over-scroll glow and rubber band effects, and preventing page content from scrolling under the modal/overlay

body {
 overscroll-behavior-y: contain;
}

This property is useful for organizing modals In-window scrolling is also very useful - it prevents the main page from intercepting scrolling when it reaches the boundary.

5. Insertion of text is prohibited

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

Sometime, I want to prohibit users from pasting text copied from somewhere into the input box. This can be easily done by listening to the paste event and calling its method preventDefault().

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

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

</script>

It is impossible to know the possible bugs in real time after the code is deployed. 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.

Recommended learning: css video tutorial

The above is the detailed content of Five front-end tips that make people shine. For more information, please follow other related articles on the PHP Chinese website!