Frontend Canteen Tech Weekly Issue 46: Chrome 3rd Party Cookie Program, npm introduces more security enhancements, Awesome Bun

Delicious value: 🌟🌟🌟🌟🌟

Flavor: Noodles with over oily meat

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

The PC side has a better experience in the warehouse, and rewarding a Star is the biggest support for the canteen.

Summary of this issue

• Expanding Privacy Sandbox testing
• Introduce more security enhancements to npm
• Lotion
• Awesome Bun
• Read Linux 0.11 core code like a novel
• HypeScript
• Roll your own JavaScript runtime
• Follow me and implement React18 from 0
• Build your own web framework

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. Expanding Privacy Sandbox testing

The Chrome team recently shared their privacy plan and timeline, as well as their path to phasing out third-party cookies. The delivery of the API for general availability is expected to begin in 2023, and the phase-out of third-party cookies in Chrome will begin in the second half of 2024. The blog post mainly includes the following:

• Update cookie behavior, Independent Partition Storage (CHIPS). First-Party Sets (allows related domain names owned and operated by the same entity to claim to belong to the same first party)
• Weakening User-Agent and reducing the information in UA that can be used for passive fingerprinting
• Storage partition, including IndexedDB, localStorage, communication API (BroadcastChannel, SharedWorker), ServiceWorker

2. Introduce more security enhancements to npm

Some new security enhancements have been introduced in npm recently:

• Simplify the login and publishing experience with the npm CLI
• The ability to connect GitHub and Twitter accounts to npm
• All packages on npm have been re-signed, adding a new npm CLI command to audit package integrity

Now let's look at the technical data.

Technical Information

1. Lotion: Open Source Notion UI Built with Vue 3

Currently supported Features:

• block-based editor
• Drag and drop to rearrange blocks
• Basic Markdown parsing, including bold, italics, headings and separators
• Type '/' for command menu and shortcuts

Technology stack:

• Drag and drop component vue-draggable-next
• Editor tiptap and ProseMirror
• iconoh-vue-icons
• Vue3 + Vite3 + TailwindCSS + TypeScript

2. Awesome Bun

Awesome warehouse for buns, let the buns fly for a while.

3. Read Linux 0.11 core code like a novel

A writer who can't write novels is not a good programmer.

4. Implement a TS type system using the TS type system

A simplified implementation of TypeScript's type system, and it's self-implementing.

It is used as shown in the figure below, passing TypeScript code as a string to the TypeCheck generic will return a possible type error.

5. Roll your own JavaScript runtime

Deno is officially released, following this article, you can create a custom JavaScript runtime (Deno simplified). And realize the functions of executing local JS files, reading and writing files, deleting files, and simplified console API. Compared with the custom development of Node.js, Deno's customization threshold is very low.

Mainly used:

• deno_core: abstracts the interaction with the V8 JavaScript engine
• tokio: an asynchronous Rust runtime, used as an event loop

6. Follow me and implement React18 from 0

Implementing a mini-xxx is no longer enough, but Baby Carson's Big-React is enough.

• The minimalist implementation also ensures complete functions. The standard is to run through the official test cases.
• At the same time, the iteration steps are carefully divided according to Git Tag, and each function realized from 0 is recorded.

At present, 7 versions have been implemented, and it is worthwhile for students who like to study React source code to follow up.

7. Build your own web framework

This article explains how to build a simple web framework based on React and deploy it using Vercel's Build Output API.

The Build Output API is a filesystem-based specification for generating the directory structure for Vercel deployments. Framework authors can implement this directory structure as the output of their build commands so that the framework can leverage all of Vercel's platform features (Serverless Functions, Edge Functions, routing, caching, etc.), Astro has successfully integrated with Vercel.

other information

• Nx v14.5
• Blueboat: All-in-one serverless JavaScript runtime
• Zustand v4
• VueUse v9
• esbuild v0.14.51
• Node v18.7.0
• RedwoodJS vs. BlitzJS: The future of full-stack metaframework

Good article recommended

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

1. ToB front-end construction efficiency optimization road

Cold start time from 4min to 2s.

2. Prediction from the co-founder of NPM: This is what the future of front-end will look like

There is nothing new under the sun, we are all in the loop.

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

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