#09 前端月刊

CSS

你需要了解的现代CSS知识

这份文章介绍了最近新增的 CSS 功能，每个功能都贴心的我提供了是什么、什么时候用、浏览器支持程度、使用案例四个部分。

styling 之道

《The Full-Stack Tao》的作者，从原始的类名class 设置 css，到语意化、 css class 嵌套、css in js、tailwind like 等多种方式，讲解我们构建 css 样式应该注重组件架构。

React

准备好 React19 代码库

基本上 Andrew Clark 的推文内容可以概括所有的 API 更新，关于 React Compiler 可以看这篇文章

React useOptimistic 实现

乐观 UI 是提升用户体验度的一个技巧，自己实现一个乐观 UI 其实还是比较麻烦的。React@19 将会推出 useOptimistic() 帮助我们开发乐观 UI，内部实现比想象中的要复杂，涉及 state、transition、suspense 等概念。这个一篇了解它实现原理的文章。

实践

可视化查看 Promise 执行过程

通过可视化的方式了解 Promise 的内部运行逻辑。

新的一个提案：原生的 Signal + effect

在现在的 JS 中，我们想要实现一个状态需要这么写

let counter = 0;
const setCounter = (value) => {
  counter = value;
  render();
};

const isEven = () => (counter & 1) == 0;
const parity = () => isEven() ? "even" : "odd";
const render = () => element.innerText = parity();

// Simulate external updates to counter...
setInterval(() => setCounter(counter + 1), 1000);

使用提案的 signal + effect：

const counter = new Signal.State(0);
const isEven = new Signal.Computed(() => (counter.get() & 1) == 0);
const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd");

// A library or framework defines effects based on other Signal primitives
declare function effect(cb: () => void): (() => void);

effect(() => element.innerText = parity.get());

// Simulate external updates to counter...
setInterval(() => counter.set(counter.get() + 1), 1000);

通过构建自己的 OAuth 客户端来学习 OAuth2.0

这是一个比较简单但完整的"通过 Google 登录"的代码过程，是一个不错的学习 OAuth2.0 调用过程的代码实例。

如何构建一个同时支持 commonjs 和 esmodule 的包

当我们一旦填写了 "type": "module" 这个包就只能是一个 esmodule 的包了。我们可以通过 main module 和新的 exports 属性来同时兼容。

太长不看，直接看代码。

{
 "main": "./dist/index.js",
 "module": "./dist/index.mjs",
 "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    }
  },
}

使用 grid 实现全出血布局

直接看实现

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(65ch, 100%)
    1fr;
}
.wrapper > * {
  grid-column: 2;
}
.full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}

如何找到 Chrome 的崩溃的原因

虽然我们大概率知道 Chrome 发生【喔唷，崩溃啦】一般都是内存溢出问题，而这篇文章通过了一些列反解 dump 文件来定位到崩溃原因，非常值得学习的探索精神。

深入Webpack tree shaking

这篇文章主要介绍了 webpack 对各种类型的代码做了什么样的代码优化（ tree shaking）。包含未使用代码优化、副作用优化、死代码消除。