How to solve the problem that the security area of mobile is 0

In some Android devices, the safe-area-inset-top property can be recognized, but there is no height, how to solve this kind of problem? From iPhone X, the area of bangs and the black bar at the bottom appeared, and Android systems usually imitate some designs of iPhone, and then there are more and more new models with the concept of safe-area now. If these are not considered at all, a situation

Implement a React popup component with dynamic effects

When we write some UI components, it is easy to implement them without considering dynamic effects, mainly the toggle of presence or absence (similar to the v-if property in Vue) or visibility (similar to the v-show property in Vue). 1. Pop-ups without motion In React, it can be implemented like this. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 interface ModalProps { open: boolean;

How to use jest and lint-staged to detect only files that have been changed

How do we run only the unit tests for files that have changed before git commit? As we move forward with EPC, unit testing is a necessary skill, and it’s important to run single tests before local Git commits, as you can’t put all the pressure of single tests on the pipeline. After all, it costs a lot of money to run a single test in the pipeline, and it

How to get request parameters in the native http service of nodejs

How do you parse the parameters in the request URL in the native http service of nodejs? The official url.parse() method is no longer recommended, so what method should I use? In nodejs, the url.parse method was previously recommended for parsing parameters, but this method is no longer recommended, and now the recommended API is the WHATWG URL. Since all the methods found on the web are still the same

The randomUUID method is supported on the web client

Starting from Chome92 version, crypto module already supports randomUUID() method. 1. The old way In front-end web, we usually use timestamp or Math.random() when generating a uuid. For example, on stackoverflow, there is a famous code: How to create a GUID / UUID, which is generated by Math.random(). 1 2 3 4 5 6 7 8 9 function uuidv4() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = (Math.random() *

How to package NextJs separately by server-side or browser-side type

If some modules can only be used in the browser side , or only in the server side , how to refer to it in NextJs ? NextJs is an excellent react isomorphic framework that writes code once and can be used on both the server side and the browser side. This is because NextJs will package a copy on the server side and a copy on the browser side,

iOS WKWebView detailed explanation and JS Bridge synchronization call problem

WKWebView is the browser component used to replace UIWebView after iOS 8.0. Compared with UIWebView, WKWebView has higher performance, supports more HTML5 features and has more detailed control. This article briefly introduces the use of UIWebView and the synchronous interaction between JS and native APP. WKWebView 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Implementation of jsonrpc2.0 in Go

request Request can represent a request or notification from jsorpc2.0. 1 2 3 4 5 6 7 8 type Request struct { Method string `json:"method"` Params *json.RawMessage `json:"params,omitempty"` ID ID `json:"id"` Notif bool `json:"-"` Meta *json.RawMessage `json:"meta,omitempty"` } The Meta field is not specified in the jsonrpc spec, but is an aid to tracking context. The Notif field indicates whether it is a notification or not. The Params/Meta fields are

Using async functions in Map traversal

Sometimes it is necessary to block the code for a period of time using the Sleep function, which is routinely implemented and called in the following way. 1 2 3 4 5 6 7 8 // Sleep Function const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))( // Usage async () => { await sleep(3000); } ); However, when used in Array.prototype.map, it behaves incorrectly, as follows. 1 2

C++ Standard Library Explanation - Unordered Associative Containers

Starting with C++11, the standard library has been extended for associative containers to provide associative containers based on hash table implementations. A hash table will take up more memory than the stored elements in exchange for evenly spreading O(1) performance. Hash Tables There are many strategies for resolving conflicts, the standard library chooses to use the separate linking method, where conflicting elements are placed in one location and stored in

std::move() and std::forward()

Move Semantics Move semantics is a new concept introduced in C++11 for the case when an object is assigned to another object and is no longer used by itself. Instead of calling the copy constructor of the new object and then destroying the original object, with move semantics, the resources of the original object are “moved” to the new object, e.g. std::vector assigns a pointer to an array to the

Type derivation in modern C++

Template Type Derivation The following is a common function template. 1 2 template<typename T> void func(ParamType p); When we call it as func(x), the compiler will automatically derive the types T and ParamType for us, and they may not be the same because ParamType may have a const or & reference modifier. Parameter type is a reference or pointer 1 2 template<typename T> void func(T& p); This case does not

Nine years on, what has TLS 1.3 brought?

Nine years after the release of TLS 1.2, and four long years of agreement on it, TLS 1.3 is now available, designed with the simple goal of making data transfers faster and more secure. More secure TLS uses a hybrid encryption process, which means that symmetric encryption is used during communication and the key for that encryption is negotiated through asymmetric encryption. The MAC algorithm is used for integrity checking and the certificate system is used for authentication.

The Past Life of ESNI and ECH

Although TLS can encrypt the entire communication process, there are still many privacy-sensitive parameters that have to be transmitted in plaintext during the negotiation process, the most important and problematic of which is the domain name to be accessed, i.e. SNI (Server Name Indication). There is also the ALPN extension used to inform the client of the available application layer protocols, and compromising this could lead to an attacker knowing the services supported by the server and the purpose of the connection.

What happens in a TLS handshake?

With the popularity of HTTPS, the word TLS also appears more frequently, so what is TLS and how does TLS make HTTP transmission secure? TLS (Transport Layer Security), formerly known as SSL (Secure Socket Layer), is located between TCP and the application layer. Compared to HTTP, HTTPS does not change the protocol itself, but adds a layer of TLS between TCP and HTTP for encryption to ensure information security. For information transmitted in clear text, there are several risks

Two tricks to improve the write efficiency of hard disk storage data

There are many ways to store data today, and hard drives are the preferred choice for most users because of their price and data protection advantages. However, hard disks are several orders of magnitude slower than memory in terms of IO reads and writes, so why would you prefer hard disks? The first thing that needs to be mentioned is that the main reason why operating a disk is slow is because of the time consuming read and write to the disk.

Linux large file splitting and merging

1. Splitting files You can use the split command to split files, which supports both text and binary file splitting, and the cat command to merge files. 1.1 Text file splitting When splitting a text file, you can split it by file size or by number of lines of text. Splitting by file size When splitting a file by file size, you need to specify the split file size with the -C parameter.

Talking about EventEmitter

Scenario The following scenario exists: when the audio player is in different states such as loading resources, playing audio, finished playing, etc., it performs different actions (such as updating UI state) through some mechanism. That is, by listening to some objects and triggering different events when their state changes. The above scenario can be implemented through EventEmitter, which can correspond to at least two patterns: Observer pattern and Publish/Subscribe pattern.

What is the significance of Suspense for React?

Many people may not have used Suspense in their projects, but Suspense is a very important part of React’s future development. This article will explain the significance of Suspense for React. React’s iterative process React has gone through three major changes in its main features from v16 to v18. v16: Asynchronous Mode v17: Concurrent Mode v18: Concurrent Render (concurrent update) To understand the significance of these three changes, you need

Mutex<Rc> Why can't I pass it between threads?

I was recently confused by a compiler error while writing a multi-threaded program in Rust. Problem In short, I have a structure with an internal Rc value, as follows. 1 2 3 struct A { val: Rc<u32>, } Obviously, Rc is not thread-safe, so it is protected by a lock and passed between threads with Arc, so the following code is written. 1 2 3 4 5 6 7 8 9 10 11 fn main() { let mutex = Mutex::new(A { val: Rc::new(5) }); let target = Arc::new(mutex); let t = thread::spawn(move || { target.