The monthly is published on the first business day of each month and has a certain personal appeal. Please subscribe

  • Blog site (support RSS) : wenxi.tech/
  • Wechat subscription number: Wenxi’s Tavern

Science and technology news

Microsoft releases Windows 11

The most important news of this month is that Win11 supports running Android App. Associating with Mac M1 chip, we can see that the integration of mobile end to desktop end ecology is a trend

It may not be long before we see a flood of apps for both mobile and desktop applications, a new form of software

Github has released Copilot, an AI pair programming assistant

Copilot can be even more annotation auto-fill code implementation, said to be correct about 50% of the time, someone used it to try to solve several LeetCode algorithm problems, all passed the test, heart mixed feelingsIt’s still in the preview phase, so click on the link below to apply for eligibilitycopilot.github.com/

Learning resources

Next. Js application development practice

A very mini combat ebook, using Next. Js technology stack from zero to achieve a HackerNews

Code snippet

Win11 developer preview released last week, a lot of use of frosted glass effect, we can usebackdrop-filterThe CSS properties blur the background to achieve the same effect

<div class="bg">
  <div class="backdrop-filter">backdrop-filter</div>
</div>
Copy the code
.bg {
  background: url(https://cdn.wccftech.com/wp-content/uploads/2021/06/windows-11-wallpaper-scaled.jpeg)
    no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
}
.backdrop-filter {
  width: 300px;
  height: 200px;
  display: grid;
  justify-content: center;
  align-content: center;
  background: rgba(255.255.255.0.5);
  backdrop-filter: blur(5px);
}
Copy the code

The development tools

Visualizing Nginx configuration generation

Digitalocean is an open source tool to save nginx configuration, after all, most front end does not change nginx several times a year, provides several common preset

Library Genesis: A book search tool

I recommended Lorefree before, but later I found that I had stopped maintaining book sources in August last year. Now I recommend Library Genesis, which covers almost all computer categories

Readme-md-generator: Indicates the readME generator

The terminal interactive README generator reads package.json and some information from git to fill in parts of the content, which is used to quickly generate well-formatted README files

The open source project

Rustpad: Online collaboration editor

The server uses Rust, which is nothing special, but the collision algorithm OT is done on the front end, which is usedoperational-transform-rsThis Rust library, throughwasm-bindgenCompile it toWebAssemblyAnd it can be called by JS

The article recommended

You Don’t Need GUI: Use the command line to handle common tasks

Some tasks are easier to handle on the command line, like this onecalCommand, after all, looking at a calendar on a MAC is a hassle

Better debugging than NPM Link: YALC

When debugging NPM packages, NPM link is usually soft-linked to the project, but NPM Link has the disadvantage that the package being debugged and the project use their own node_modules during debugging, which can cause dependency conflicts for many packages

Yalc allows you to use the project’snode_modulesNot your own, to avoid some weird questions

Some of Typescript’s common generics tools

This article introduces common generics tools and principles

Building a Rich text editor

Implement a wySIWYG rich text editor using slate.js

In the latest version of Slate.js, we have fixed a number of IME input problems, including the crash of the previous all-Chinese editing Bug, and are almost ready for commercial use

WebView software keyboard compatible scheme

It basically covers all scenarios of H5 soft keyboard problems

I’ll show you how to build a frameless buried point system

Very detailed burial point statistics, the basic plan can be taken directly to the ground

  • Page Lifecycle API
  • DOM structure change monitor – MutationObserver API
  • IntersectionObserver API for DOM elements and ViewPort

How does Js work?

The article understands THE JS operation process, these two years webAssembly fire, many people think that its performance advantage may replace JS as a new WEB development language, but in fact, JS in the V8 engine under the JIT, and WebAssembly often play back and forth, the gap is not big

Front-end componentized systems in business

The author divides the components into four parts according to their responsibilities for maximum reuse

  • Business state component
  • Interactive state component
  • Stateless view component
  • Entrance to the component

As you can see, it is similar to the Flux architecture, but with some differences. It is more like a complement to the Flux architecture

  • There is an additional layer of interactive state components. In the Flux architecture, stateless components and stateful components are simply distinguished, but the STATE management of UI is very vague, whether it is produced and consumed by view components or managed uniformly by state components. But the Flux architecture is five years old, when component state management was still being explored, and without hooks to minimize extraction of state and logic, the granularity of code was further broken down by responsibility, allowing for more reuse possibilities
  • Use context + hook instead of props to pass a parameter to the parent group by declaring the child component in the render function and passing the parameter to the child component. Context can be used to transfer data without declaring child components in the parent component. This way of coupling based on consumption data structure is called data coupling. In the definition of various kinds of coupling, data coupling is lower than the coupling of tag coupling, and the low coupling rate will increase
  • Reducing global dependencies and sinking global dependencies into a certain context is really highly recognized. I have done several migrations of old code to new projects, and the migrated components have a large number of code directly dependent on the global environment, such as Request, localstorage, and even global variables hanging under the window. In order not to affect the running of the new project, the old code migrated from the past has a lot of changes. If the global dependencies were encapsulated in the context from the beginning, the code migrated from the past would hardly need to be changed, or just a small piece of the context would be enough

Take a look at the code structure

// Business context
const Business = () = > {
  const [state, setState] = useState();

  return (
    <BusinessContext.Provider value={context}>
      {children}
    </BusinessContext.Provider>
  );
};
// Interaction context
const Interaction = () = > {
  const [state, setState] = useState();

  return (
    <InteractionContext.Provider value={context}>
      {children}
    </InteractionContext.Provider>
  );
};
// In the implementation of the component:
const ComponentA = () = > {
  const {} = useContext(BusinessContext);
  const {} = useContext(InteractionContext);

  // Connect business and interaction here
};
// When used:
const App = () = > {
  // Each layer below passes in the required configuration information
  return (
    <Business>
      <Interaction>
        <ComponentA />
      </Interaction>
    </Business>
  );
};
Copy the code

Finally, I quote a passage from the author

The current technical solutions of the community do not take this part into consideration, and most people adopt two extreme strategies:

  • The state logic is completely pushed to the top of the component tree, and the global state management scheme is adopted
  • The state logic is scattered across the leaves of the component tree

Please stop piling all state logic into Redux 🤣🧎♂️

gossip

I have been busy recently, so I haven’t sorted out many monthly magazines. I plan to open a new interview topic to record the real interview process and update it from time to time