Huzhong sword front end weekly #13 | web screen recording, bundleless, low code Deco, bundle scanner, RN Low Power Bluetooth

Time:2022-5-13

Weekly collection includes front-end (but not limited to front-end) articles, news, open source projects, tools, etc., which are updated every Monday.

📰 News

Node v17. 1.0 released

A small update, which introduces support for JSON assertions and a new promise_ Hook module (used to expose V8 promisehook API to users).

https://nodejs.org/en/blog/release/v17.1.0/

article

On the technical scheme and implementation of Web screen recording

With the rapid development of Internet technology, web recording technology has become mature. For example, screen recording technology can be applied to online examination to realize remote invigilation, screen sharing and screen recording; In the R & D process of our developers, for some accidental events, the exception monitoring system can only tell the program error, but can not clearly tell the wrong reproduction path, and the screen recording technology may help us locate and reproduce the problem. Then, this article will share the technology of screen recording with readers from two aspects: sensitive screen recording and non sensitive screen recording, hoping to help you have a preliminary understanding of web page screen recording.

https://mp.weixin.qq.com/s/f55pB-MEO6VboFsihb-_gQ

Boost the efficient delivery of double 11 personalized venues: uncover the secrets of Deco intelligent code technology

In this double 11 personalized venue, we use Deco for R & D on a large scale, which has brought about about a 48% efficiency improvement. This article will reveal the secret of Deco efficiency improvement.

Huzhong sword front end weekly #13 | web screen recording, bundleless, low code Deco, bundle scanner, RN Low Power Bluetooth

https://mp.weixin.qq.com/s/oMMvLWz6u5aMSKCsCGg0Hg

Remember a bundleless migration experience and re understand vite pre build

Recently, we explored the implementation of bundless construction tool in the company and tried to migrate some existing business projects from webpack to vite. Because the middle and back office projects generally have low requirements for browser compatibility, we can boldly introduce some cutting-edge and radical solutions. Therefore, we found a business middle and back office project in the company and made a preliminary attempt to introduce vite.

https://mp.weixin.qq.com/s/pUzUr1lTfX3wkzJL_Xv1oQ

JS asynchronous processing evolution, callback = > promise = > observer

https://juejin.cn/post/7029093184332365855

Typescript 4.5 — on the enhancement of module capability

https://mp.weixin.qq.com/s/zZnXaBbsADoBNPCc4mD_HA

Use react query to gracefully unify the state control writing of requests

https://swizec.com/blog/you-can-use-react-query-for-slow-computation-not-just-api/

Two commands make your git base automatically

https://segmentfault.com/a/1190000040712052

Record, replay and measure user flows

Chrome 97 will provide recorder function. You can download chrome Canary version for a taste. The recorder can realize the recording, playback and performance measurement of user operations, which is a bit like the improved version of selenium. In addition, you can export the process as a puppeter script. The scenario you think of is bug reproduction. It is expected that there will be supporting platform output or access in major factories.

https://developer.chrome.com/docs/devtools/recorder/

Node. JS multi process / thread — Optimization Practice of log system architecture

https://mp.weixin.qq.com/s/s3DeAxrEbVmqtCHGP9lstg

Tools and software

react-animated-numbers

Digital scrolling effect, suitable for data display scenes.

demo: https://optimistic-noyce-cf2473.netlify.app/

https://www.npmjs.com/package/react-animated-numbers

React native ble PLX: Low Power Bluetooth

Low power Bluetooth technology is widely used in wearable devices. React native ble PLX is a library used to integrate Bluetooth on react native.

https://github.com/dotintent/react-native-ble-plx

Bundle scanner: scan web NPM dependencies

Enter the URL and he will tell you which NPM dependencies the site uses.

The principle is that although the JavaScript used on the website is compressed, some things remain unchanged before and after compression, such as literal and object key, which can be realized by comparing them.

https://bundlescanner.com/


Weekly is launched in GitHub. Welcome to subscribe:

My Weekly

Recommended Today

Study day 7

C language Loop control statement Goto statement Unconditional turn statements Goto generally forms a circular structure with if statements int a = 1, sum = 0; tiao: if (a <= 200) { sum = sum + a; a++; goto tiao; } printf(“%d”, sum); Goto — cannot be used across functions Jumping from inside the circulatory […]