关于前端:前端技术双周刊-20230408Chrome-支持-CSS-嵌套语法

我的项目地址：olivewind/weekly

微信公众号：依赖注入

公布工夫：2023.04.08

本周内容：资讯 x3、开源 x8、文章 x4、产品 *3

行业资讯

Chrome 112 反对 CSS 嵌套语法

近期 Chrome 团队公布 112 版本的性能清单，其中最值得一提的是，从该版本开始反对 CSS 嵌套语法，随着原生 CSS 语法的一直弱小，兴许很快咱们就能够抛弃 Less、Sass 等扩大工具。

// 112 版本之前
.nesting {color: hotpink;}

.nesting > .is {color: rebeccapurple;}

.nesting > .is > .awesome {color: deeppink;}

// 112 版本开始
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {color: deeppink;}
  }
}

第 95 届 TC39 会议的更新

Stage 3:

• 异步显式资源管理：解决软件开发中无关各种资源（内存、I/O 等）的生命周期和治理的常见模式

• import attribute：Import Assertions 从新进入 Stage-3。在导入 es module 时反对选项，例如 JSON 模块

  import json from "./foo.json" with {type: "json"};

Stage 2:

• Async Context：提议是提供一种机制，以符合人体工程学的形式跟踪 JavaScript 中的异步上下文
• Float16Array：TypedArrays、DataView、Math.f16round 上的 Float16
• Iterator.range : ECMAScript 增加一个内置的倡议Iterator.range()

Stage 1：

• Await Dictionary:：倡议增加Promise.ownProperties()，Promise.fromEntries()
• Class Method Parameter Decorators : ECMAScript 类办法和结构函数参数的装璜器
• Promise.withResolvers：创立一个带有 reject,resolve 和promise函数的 Promise 作为办法放在 promise 对象自身上
• 时区规范化：TC39 提案以改良对 IANA 时区数据库更改的解决

React Labs：咱们始终在做的事件（英文）

React 官网团队近期公布了团队的工作事项，次要包含 React Server Components、Asset Loading、Document Metadata、优化编译器、离屏渲染等方向的一些工作。最值得关注的更新来自 React Forget 的停顿，这是一个优化编译器，其指标是可能应用已有的 JavaScript 和 React 心智模型构建齐全反应式零碎，编译器会解决最辣手的局部。

开源我的项目

FormidableLabs/react-live

React Live 是一个能够实时编辑和预览 React 组件的库，该库采纳模块化构造，可让您自在设计和组合其组件。

dutiyesh/chrome-extension-cli（1.7k star）

该我的项目可用于疾速初始化一个残缺的 Chorme 插件我的项目，反对 TypeScipt 和多种模板。

apify/crawleeh（21k star）

Crawlee 是一个用于 Node.js 的网络爬取和浏览器自动化库，可帮忙您疾速地构建牢靠的爬虫。

import {PlaywrightCrawler, Dataset} from 'crawlee';

// PlaywrightCrawler crawls the web using a headless
// browser controlled by the Playwright library.
const crawler = new PlaywrightCrawler({
    // Use the requestHandler to process each of the crawled pages.
    async requestHandler({request, page, enqueueLinks, log}) {const title = await page.title();
        log.info(`Title of ${request.loadedUrl} is '${title}'`);

        // Save results as JSON to ./storage/datasets/default
        await Dataset.pushData({title, url: request.loadedUrl});

        // Extract links from the current page
        // and add them to the crawling queue.
        await enqueueLinks();},
    // Uncomment this option to see the browser window.
    // headless: false,
});

// Add first URL to the queue and start the crawl.
await crawler.run(['https://crawlee.dev']);

refinedev/refine（9.3k star）

refine 是一个 React 开发框架，用于疾速开发 Web 应用程序，它打消了 CRUD 操作所需的模板代码，并为身份验证、访问控制、路由、网络、状态治理和 i18n 等要害局部提供行业标准解决方案。

sindresorhus/np（7.1k star）

np 能够作为 npm publish 命令的齐全代替，其提供了交互式 UI、分支查看、代码提交查看、运行测试、谬误回滚、版本生成等大量实用个性。

petyosi/react-virtuoso（3.6k star）

号称最弱小的 React 虚构列表 / 表格组件，次要有以下个性：

1. 反对可变高度的 item
2. 反对响应式网格布局
3. 反对应用粘性题目进行分组
4. 反对页眉和页脚

splitbee/react-notion（2.6k star）

react-notion 是一个用于渲染 Notion 页面的 React 组件，其渲染后果和 Notion 简直雷同，你能够用它轻松实现一个博客，文档或集体站点。

NotionX/react-notion-x（3.5k star）

如果上一个 react-notion 我的项目无奈满足你的需要，那么你能够试试 react-notion-x，这是一个生产级的 Notion 页面渲染计划，笔者的博客站（liguo.run）正是基于该我的项目构建，基于此我能够在 Notion 里间接公布我的文章，这极大升高了站点保护的老本。

优质文章

系列：100 天学习古代 CSS（英文）

CSS 倒退至今曾经十分成熟和先进，兴许你每天都在应用它，然而可能有些个性曾经公布很久了你却还未有过理解，比方 color-mix()、:has()、@property、::part 等。通过这一系列文章理解下 CSS 近些年更新的个性，强烈建议你泡上一杯咖啡静下心残缺浏览完该文章，肯定会有十分多播种 🎉

从新思考 React 最佳实际（英文）

多年前，React 从新思考和定义客户端 SPA 畛域的最佳实际，现在 React 已被大规模利用，同时也难以避免蒙受各种“批评”和“狐疑”。React 18 与 React Server Components (RSC) 的公布标记着其定位的转变，这篇文章将尝试了解该演变过程。

2023 React 调试指南（英文）

想要构建高质量的 Web 应用程序，无奈跳过调试阶段，是否熟练掌握调试技巧也是掂量一个 Web 工程师的重要伎俩。本文章将介绍 React 调试的前因后果，理解常见的 React 谬误及其调试工具和形式。尽管该文章以 React 作为承载，但大部分工具和办法实用于任何 JavaScript 利用。

Node.js CLI 相干工具库详情（利用）

当咱们须要应用 Node.js 构建一个 CLI 时，面临的第一个问题就是工具选型，社区有大量的工具库可供选择，但很多都相当古老。有些曾经停滞不前，有些曾经被他们的维护者摈弃，还有很多没有跟上古代开发实际。这篇文章旨在对最受欢迎的工具包进行分类，并重点介绍其中的一些软件包及其以后的开发状态。

乏味产品

raycast

Raycast 是一个速度极快、可扩大极强、颜值清爽的启动器，能够用于代替 Mac 自带的 Spotlight 以及家喻户晓的 Alfred，最要害的是 Raycast 对个人用户收费。一旦你开始应用它，你就再也无奈来到它。

pageblox

Web 利用交付时通常会有一个环节叫“设计还原度走查”，惯例的走查流程是设计师 走查 -> 截图 -> 汇总 -> 批改 -> 同步 -> 确认，如果有问题就须要反复这个过程，这是一个十分耗时且容易出错的过程，如果设计师能够间接在浏览器里的实在页面上和 figma 的标注评论一样进行走查，那团队效率将失去无效晋升，pageblox 便是解决此类问题的一个产品，目前该产品还在 beta 阶段，但我曾经对它的正式推出急不可待。

codux

日常前端开发通常会遇到两类业务组件复用的问题：

1. 同一仓库下：当可复用组件较多且无奈清晰从命名推断出每个组件的“实在风貌”时，开发者通常没有急躁尝试渲染它验证是否满足需要，而是抉择再造轮子
2. 不同仓库下：复用流程繁琐，不论应用 npm、模块联邦还是微前端都对文档治理、版本治理、合作流程有较大的挑战

如果能够在已有我的项目里间接开一个目录保护通用组件并能够清晰看到每个组件的渲染后果就能够无限缓解上述问题，codux 便是解决此类问题的一个实现欠缺的可视化 React IDE。其最大长处是能够和现有零碎进行集成，不须要对原有零碎代码做任何革新，并且对 TypeScript、Git、Sass 等工具有开箱即用的反对。codux 和 Storybook 有局部相似的中央，不过 codux 更专一于本地 DX。值得一提的是，codux 背地的公司是赫赫有名的无代码建站平台 Wix。