Front-End Canteen Technology Weekly Issue 51: pnpm v7.10.0, what's new to the web platform in August, rethinking popular Node.js patterns and tools

Delicious value: 🌟🌟🌟🌟🌟

Flavor: Green Coconut Latte

• Canteen Technology Weekly Warehouse Address: https://github.com/Geekhyt/weekly

Summary of this issue

• pnpm v7.10.0
• New content coming to the web platform in August
• Rethinking popular Node.js patterns and tools
• A modern guide to packaging JavaScript libraries
• Modern Web Debugging in Chrome DevTools
• When React Query meets React Router

Hello everyone, my name is Tong Oppa. Welcome to this issue of Front-end Canteen Technology Weekly, let's take a look at last week's technical information.

Technical Information

1. pnpm v7.10.0

Time-based dependency resolution mode

1. Direct dependencies will install their minimum version, eg foo@^1.1.0 will install 1.1.0.
2. Indirect dependencies will only install versions of the selected direct dependencies prior to their release point in time.

According to the authors, this model is intended to reduce the risk of supply chain attacks causing project "Karma", as it ensures that indirect dependencies are not newer than direct dependencies. In this way, if the indirect dependency is attacked, the attacked version will not be installed. However, this parsing mode needs to get the complete metadata of npm, so the speed will be very slow. The solution is to build Verdaccio and set registry-supports-time-field to true.

It is a good thing to reduce the risk of supply chain attacks, but I feel that there are many problems with this model, such as not complying with semver semantics, although many projects in the community do not follow it well :), or when an old indirect dependency fixes a certain bug, But the buggy version will still be installed.

Ah, what do I need this iron rod (function) for?

2. New content coming to the online platform in August

Firefox 104 , Chrome 104 , Chrome 105 released stable versions.

• Chrome 104 adds a separate definition of the CSS transform property ;
• Chrome 104 adds a new syntax for media queries , supports comparison operators, and is more ergonomic;
• Chrome 105 adds container query and :has() , the best partner for responsiveness;
• Chrome 105 adds Sanitizer API , a sterilization weapon to prevent XSS attacks;
• Added in Chrome 105 : modal pseudo-class ;
• Firefox 104 supports The findLast() and findLastIndex() .

Now let's look at the technical data.

Technical Information

1. Rethink popular Node.js patterns and tools

The tools you take for granted are not necessarily the best options.

Yoni Goldberg, author of Node.js Best Practices , Best Practices for JavaScript and Node.js Testing , puts his soul-searching on popular tools in Node.js and gives his thoughts:

• Node-convict is better than Dotenv ;
• When calling the Service from the Controller, try to abstract the content of the Service (encapsulate more carefully), and shield the technical details and complexity as much as possible, so that the students who read your code will be more pleasing to the eyes;
• Everything in Nest.js can be dependency injected, but maybe the world will be a better place if it is simpler;
• Passport.js is not necessary;
• The three-in-one syntax of SuperTest is sometimes not so easy to use;
• Fastify decorator wrong pose
• The correct posture of the catch clause;
• Avoid reusing the logging tool Morgan ;
• Reduce the use of process.env.NODE_ENV as a judgment condition.

2.Modern Guidelines for Packaging JavaScript Libraries

This repository documents some general modern JavaScript packaging guides, which are not limited to a specific packaging tool, and contain a lot of extension material, which is suitable for getting started.

3. Modern Web Debugging in Chrome DevTools

The Chrome DevTools team worked with the Angular team to improve the debugging experience in Chrome DevTools.

Really show developers what they want to see, and the debugging experience is finally taking off?

4. When React Query meets React Router

React Router 6.4 is about to be officially released, and React Router has also joined the data acquisition game of remote state management. This article will take you through the competition and correlation between React Router and existing remote state management libraries such as React Query, which the author believes are a match made in heaven.

Proposal for data acquisition of Vue Router next door Vue Router Data Loaders

other information

• Next.js Conf
• Vite v3.1.0-beta.2
• Heroicons v2.0
• Vitest v0.23.0
• Ant Design v4.23.0
• WebKit on GitHub

Good article recommended

Let's take a look at the good articles recommended. The good articles recommended this week are:

1. Yubo's product thinking: how do technicians make products

2. In-depth understanding of useMemo and useCallback

Well, the above is this issue of Canteen Weekly. If the audience members think it's not bad, one-click three-link is the biggest support for canteen bosses.

Your front-end canteen, eat every meal, see you next time.