头图

Delicious value: 🌟🌟🌟🌟🌟

Flavor: mango mango coconut

Summary of this issue

  • TypeScript 4.9 Beta
  • Monorepo Handbook Freshly Released
  • 92nd TC39 meeting
  • Convert StoryBook Stories to Figma Components
  • Getting Started with Playwright Component Testing
  • Guidelines for writing junk code
  • React I love you, but you let me down
  • Chrome Devtools debugging tips I wish I knew sooner

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. TypeScript 4.9 Beta

TypeScript 4.9 Beta comes with a new satisfies operator with the following main features:

  • new satisfies operator;
  • Enhanced in operator;
  • stricter NaN checking;
  • Optimize File-Watching, use file system events, and reduce polling;
  • Provide better types for Promise.resolve;
  • Keep imports in JS files;
  • Fixed the priority of Exports and typeVersions;
  • Optimized Substitution type.

2. The Monorepo Handbook is freshly released

The TurboRepo team recently released the Monorepo Handbook, which contains everything you need to know about Monorepo and provides detailed configuration examples, as follows:

  • What is Monorepo?
  • Install packages (npm, pnpm, Yarn 1, Yarn >=2)
  • Workspaces
  • Migrate to Monorepo
  • task scheduling
  • Construct
  • Docker deployment
  • shared code
  • Lint
  • test
  • Release (Changesets)
  • @manypkg/cli handles package version dependencies

3. The 92nd TC39 meeting

The progress of the meeting is as follows:

Now let's look at the technical data.

Technical Information

1. Convert StoryBook Stories to Figma components

‹div›RIOTS Developed by the team story.to.design The Figma plugin can convert StoryBook's Stories into components in Figma. They also posted a blog post 5 reasons why every design team needs story.to.design .

  • Reduce variance between code and design;
  • Use the exact same components in design as in production;
  • Speed up design and prototyping;
  • The cross-tool design system is more convenient to update;
  • Speak the same (component) language as the developer.

2. Getting Started with Playwright Component Testing

Playwright now experimentally supports component testing, this article provides examples of component testing for React, Vue, Svelte frameworks.

3. Junk code writing guidelines

Please forward this repository to the colleague who wrote the code that gave you headaches and tell him: 你写的每一行代码都是你的名片。

If he understands, he will sincerely thank you and invite you to dinner.

4. React I love you, but you let me down

François Zaninotto, CEO of Marmelab, published this long article, raising some of the existing pain points of the React framework, and frankly admitting that the quality of the React community and ecosystem overshadows React itself.

React team member Dan then responded .

5. Chrome Devtools debugging skills I wish I knew earlier

  • Add conditional breakpoints;
  • Use $i('name') to install the npm package in the console;
  • Resend the XHR request;
  • Quickly switch theme colors;
  • Quickly send requests in the console;
  • Copy JavaScript variables;
  • Get the selected DOM element in the console;
  • Capture full-size screenshots;
  • expand all child nodes;
  • Use $ to get the result of the last execution;
  • Use $ and $$ to quickly select DOM elements.

other information

Good article recommended

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

1. Introduction to Remesh: DDD framework for developing large and complex web apps

2. From 0 to 10 million: the evolution history of Bilibili’s live broadcast architecture

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.


童欧巴
2.6k 声望4.2k 粉丝