Delicious value: 🌟🌟🌟🌟🌟

Taste: Winter strawberries

  • Dining room technology weekly warehouse address: https://github.com/Geekhyt/weekly

The experience is better when viewing the PC terminal in the warehouse, and a Star is the biggest support for the canteen.

The current paper

  • StackBlitz joins the Bytecode Consortium
  • React Native’s new architecture updates
  • New WebKit feature in Safari 15.4
  • Node-ipc package author poisoned the supply chain
  • ESLint’s 2022 spending plan
  • Web pages have ballooned in size for 10 years. What have we learned?
  • Build Web layouts for dual-screen and foldable devices
  • Tao of Node
  • Everything about the Framer Motion layout
  • Antfu shared his VS Code configuration and extension
  • How to render your own 3D model using three.js and React
  • 52 Design Principles/Cognitive Biases handbook

Hello everyone, I am Tong Oba. Welcome to this week’s Front End Canteen Tech week, where we start with last week’s tech news.

Technical information

  1. StackBlitz joins the Bytecode Consortium

StackBlitz is a Web IDE powered by WebAssembly, which made a name for itself when WebContainers was officially announced last year.

The Bytecode Consortium is a group of companies and individuals that come together to form an industry partnership. The goal is to design the WebAssembly ecosystem in a way that is secure by default, so that we can run untrusted code more securely and prevent malicious attacks such as supply chain poisoning.

With a shared vision, joining the Bytecode Consortium believes they can bring WebContainers to all devices, languages, platforms, and runtimes more quickly.

  1. React Native’s new architecture updates

React Native formed a dedicated new architecture working group, provided migration guidelines and usage templates, and assisted third-party libraries with migration. The new JavaScript engine is used by default: Hermes.

  1. New WebKit feature in Safari 15.4

This is the first major release of 2022, with more than 70 new features. This includes HTML, CSS, Web API, JavaScript, Web App, Media, Security, and so on.

  1. Node-ipc package author poisoned the supply chain

Another supply chain poisoning, another open source trust crisis, the JavaScript ecosystem is too fragile. The whole process and reflection of the incident can be read through the link above.

  1. ESLint’s 2022 spending plan

As the ESLint team explained in the article, in the three years since receiving the donations, they have been exploring how to use the funds more wisely to improve the ESLint project and ecosystem, and have given some guidelines.

Things to spend money on are:

  • Pay team members by the hour;

  • A $1,000 per month contributor pool;

  • Support and donations upstream and downstream dependence;

  • “Big projects” : like the new website they’re designing.

Now let’s look at the technical data.

Technical data

  1. Web pages have ballooned in size for 10 years. What have we learned?

The web also suffers from “getting fat,” and this increasing size and complexity has not been fully mitigated by faster devices and networks, or by our diligent browsers.

As the chart shows, the median size of a PC web page is now three times that of a decade ago, and the median size of a mobile page is almost seven times that of a decade ago. Even though the web is getting fatter all the time, we need to provide a good user experience. This article presents some engineering best practices.

  1. Build Web layouts for dual-screen and foldable devices

To accommodate layouts for dual-screen and foldable devices, the Web platform offers many new features that integrate with existing concepts, such as media queries, CSS env() environment variables, Web apis, and more. This allows developers and designers to focus more on how to improve the user experience with multiple screens, rather than spending more on learning extra things.

  1. Tao of Node

After releasing the popular React Way, Alex Kondov shares his best practices for developing Node.js, covering architecture, coding, tools, and testing.

  1. Everything about the Framer Motion layout

An interactive article on layout animation using Framer Motion with lots of examples.

  1. Antfu shared his VS Code configuration and extension

See if there’s anything good you don’t know about.

Good article recommendation

Here are some of the best articles of the week:

  1. How to render your own 3D model using three.js and React

In this article, you’ll learn how to render and configure 3D assets created in 3D software such as Blender or Maya in the React project using React-Three-Fiber.

Another cool website, the personal website of creative designer Jesse Zhou

After watching it, I have been enchanted, this is too “dining hall” feeling, later have time to make a dining hall.

The following two materials summarize some design principles that can improve our product design capabilities. (I asked UI little sister drink milk tea in exchange)

  1. 52 design principles

Produced by xiaohongshu Product Design Center, each principle includes source and derivation process, interpretation and application case, and extended reading.

  1. Handbook of Cognitive Biases

Byte’s Flying Book design team produced a summary of 67 cognitive biases and examples.

Ok, this is the canteen weekly, if the audience gentlemen feel good, one key three even is the biggest support for the canteen boss.

Your front canteen, eat every meal well. We’ll see you next time.

❤️ Love triple punch

1. If you think the food and drinks in the canteen are ok with you, please give me a thumbs-up. Your thumbs-up is my biggest motivation.

2. Pay attention to the front canteen of the public account and eat every meal!

3. Like, comment, forward === urge more!