This is MDH: Front End Weekly issue 0002, published at 2021/05/17. Sorrycc /weekly this journal is open source (GitHub: sorrycc/weekly). Sorrycc /weekly

Cover photo: May 15, 2021, Shushi Village, Fuyang, photographer: Canned pig.

⬆ ️ headlines

1. Babel is used by millions of people, so why don’t we have any money?

Babeljs. IO/blog / 2021/0…

It seems to me that Babel’s problems,

  • Babel is not an upper-level application, and developers are rarely aware of it, especially in the encapsulation of frameworks like Umi and next. Js. Developers don’t need to be aware of Babel’s existence in their schedules
  • With strong competitors, SWC, esBuild, and more frameworks turning to non-javascript compilation tools to speed things up, Babel is no longer the only option in this direction

But as far as ants are concerned, Babel’s current role in front-end infrastructure is unshakable. Applications include,

  • TypeScript support
  • High-level language features
  • Browser compatibility
  • On-demand compilation based on babel-plugin-import
  • Research and development of components
  • Automatic CSS Modules recognition
  • Constraints, Lint, code validation
  • An automated tool based on code parsing
  • …

2. Deno releases V1.11

Github.com/denoland/de…

Including,

  • Web Storage API support, localStorage and sessionStorage on the server, the former limit is 5M
  • Rewrite deno test, parallel runner, permissions, optimize output, etc
  • Remote import map is supported

3. Is 0KB JavaScript the future?

Dev. To/this as-is – lea…

What do people talk about when they talk about 0KB?

  • Progressive enhancements, Remix and SvelteKit can both SSR pages and then have full forms capabilities independent of JavaScript
  • React Server Components
  • Islands Architecture
  • Partial Hydration

📝 articles

1. Don’t solve problems, kill them

Kentcdodds.com/blog/don-t-…

The whole thing looks more like a Remix advertorial, but the idea is right. When we encounter a problem, the immediate response is usually how to solve it, but will the problem be solved by thinking differently? For example, Webpack has thought of countless ways to build a slow community. If you change your mind and implement it in a non-javascript language, can you eliminate this problem?

2. Hello, Modules!

Blog.sindresorhus.com/hello-modul… Gist.github.com/sindresorhu… (Migration steps)

Node 10 has been deprecated and we can now use ESM.

What are the advantages of ESM over CJS?

  • Browser compatibility
  • top-level await
  • Re – export syntax
  • One line of code imports default export and named exports simultaneously

Migration steps are attached.

3. Load JS according to the visibility

Codepen. IO/jonneal/ful…

Intersection Observer is an application based on The Islands Architecture. This application is presented in code and DEMO, but events can be triggered not only by elements that are visible, It can also be media Query, Container Query, Event, idle state, and so on.

4. I set myself an open source donation budget of $20 per month

Lutaonan.com/blog/my-oss…

👍 🏻

5. WebAssembly primer

Lencx. Making. IO/book/wasm/r…

Quickly start a WASM project with Vite, vite + (rust -> wASM) + (vue/ React).

Sponsor: Lencx

6. Complete Intro to React, v6

Btholt. Making. IO/complete – in…

7. 10 Mistakes to avoid when Using React

Javascript. Plainenglish. IO/top – 10 – mist…

Top 10 Mistakes:

  1. Component splitting is not fine enough
  2. Modify the state object directly
  3. Props pass number as string
  4. The component list does not contain keys
  5. It is not clear that setState is asynchronous
  6. Overuse of Redux
  7. Write monolith components without dismantling
  8. The directory structure does not conform to community specifications
  9. I’m used to writing all HTML attributes in String
  10. Component names do not have large humps

🪓 code

1. nuxt/vite

github.com/nuxt/vite

Nuxt 2 ❤️ Vite.

2. What does the React focused code editor look like?

Codesandbox. IO/s/ide – conce…

3. sinclairzx81/hammer

Github.com/sinclairzx8…

Build tools for browsers and Node applications. How to use a parcel based on esbuild?

4. dai-shi/excalidraw-animate

Github.com/dai-shi/exc…

Convert Excalidraw drawings to animations.

5. microsoft/folio

Github.com/microsoft/f…

Microsoft out of the testing framework, Jest has a competitor.

test('insert an entry'.async ({ table }) => {
  await table.insert({ username: 'folio'.password: 'testing' });
  const entry = await table.query({ username: 'folio' });
  expect(entry.password).toBe('testing');
});
Copy the code

6. hellodword/wechat-feeds

Github.com/hellodword/…

To the WeChat number generated public RSS feeds, can use rsshub, https://rsshub.app/wechat/feeds/%%bizId%%, pulling content.

7. chanify/chanify

Github.com/chanify/cha…

Chanify is a simple notification push tool. Everyone can use the API provided to send notifications to their iOS devices.

8. princefishthrower/react-use-please-stay

Github.com/princefisht…

When the focus of the page is lost, implement the React Hook for the title or favicon animation.

9. bytedance/guide

Github.com/bytedance/g…

React bootstrap component with new features.

🕒 subscription

This weekly is published every Monday and updated simultaneously in the language “MDH /weekly” and wechat official account.

To subscribe, search “Yunqian” on wechat.

(after)