湖中剑 前端周刊 #17 | CSS年度报告、富文本、设计模式、Web Components实践、TypeScript效率工具

周刊收集包括前端（但不限于前端）的文章、新闻、开源项目、工具等等，每周一更新。

📖 文章

看完了 2021 CSS 年度报告，我学到了啥？

一起来查缺补漏。

https://mp.weixin.qq.com/s/BbH6IleqLly82Mqx_0W1IQ

package.json中你还不清楚的browser，module，main 字段优先级

题外话：

在Vite中打包针对node环境的包时还是遵循以下逻辑，browser > module，没有main，这样就导致一些没有配置module的包强制使用了浏览器端的代码。

https://www.cnblogs.com/qianxiaox/p/14041717.html

对话Svelte未来，Rust 编译器？构建大型应用?

https://zhuanlan.zhihu.com/p/447557470

在政采云如何写前端技术方案文档

下文就想和大家一起探讨一下，前端为什么写技术方案，怎么写前端技术方案。

https://mp.weixin.qq.com/s/UYZeA3XCJzpErH5qxMRrXQ

语雀：在线富文本编辑器的架构设计及实践

文本编辑器技术是一个伴随着 Web 发展的古老技术，有着前端技术中的皇冠之美誉，而近几年，各大公司纷纷重视文档工具，这项技术再次迎来了春天。

GMTC 全球大前端技术大会（深圳站）2021 邀请到蚂蚁集团语雀文档编辑器负责人韩聪（三甲），分享题为《在线富文本编辑器的架构设计及实践》的演讲。

三甲为大家介绍了语雀以及语雀对文档 & 编辑器的理解，然后以文本编辑器为切入点深度解读了编辑器技术，最后，他结合语雀发展，对编辑器技术的进化方向作了展望。

本文由语雀团队根据此次演讲整理。

https://mp.weixin.qq.com/s/aEgAwGK568VbFi3UH-sh5A

Nest.js 快速入门：实现对 Mysql 单表的 CRUD

Nest.js 是一个 Node.js 的后端开发框架，它实现了 MVC 模式，也支持了 IOC（自动注入依赖），比 Express 这类处理请求响应的库高了一个层次。而且也很容易集成 GraphQL、WebSocket 等功能，适合用来做大规模企业级开发。

Nest.js 在国内外用的都挺多的，今天我们就来入门下吧：做一个笔记管理功能，实现对 mysql 单表的增删改查并提供 Restful 的接口。

https://mp.weixin.qq.com/s/maOI6SxjY-mxe4jQRN352g

精读《Records & Tuples 提案》

immutablejs、immer 等库已经让 js 具备了 immutable 编程的可能性，但还存在一些无解的问题，即 “怎么保证一个对象真的不可变”。

如果不是拍胸脯担保，现在还真没别的办法。或许你觉得 frozen 是个 good idea，但它内部仍然可以增加非 frozen 的 key。

另一个问题是，当我们 debug 调试应用数据的时候，看到状态发生 [] -> [] 变化时，无论在控制台、断点、redux devtools 还是 .toString() 都看不出来引用有没有变化，除非把变量值分别拿到进行 === 运行时判断。但引用变与没变可是一个大问题，它甚至能决定业务逻辑的正确与否。

但现阶段我们没有任何处理办法，如果不能接受完全使用 Immutablejs 定义对象，就只能摆胸脯保证自己的变更一定是 immutable 的，这就是 js 不可变编程被许多聪明人吐槽的原因，觉得在不支持 immutable 的编程语言下强行应用不可变思维是一种很别扭的事。

proposal-record-tuple 解决的就是这个问题，它让 js 原生支持了 不可变数据类型（高亮、加粗）。

https://mp.weixin.qq.com/s/D3A89fIPCbde7Ixqewziag

哈啰前端Web Components最佳实践

这是业务平台前端在有关【Web Components】在业务实践输出的第 5 篇文章。

通过本文，您将了解什么是Web components，以及业务中台如何将其落地到业务场景的最佳实践。

https://juejin.cn/post/7044055764532461605

企鹅阅读无障碍访问优化实践

https://juejin.cn/post/7044815890562416677

设计模式

Patterns.dev是关于设计模式的免费电子书。

https://www.patterns.dev/

Designing Beautiful Shadows in CSS

This excellent tutorial from Josh (shared back in September) takes a considered look at how to use CSS to create “rich, lush, lifelike shadows” and do away with the commonly found “fuzzy grey boxes”.

https://www.joshwcomeau.com/css/designing-shadows/

🛠 工具、软件

Typehole

Typehole是一个对TypeScript开发很有用的Visual Studio Code扩展，它可以获取运行时的数据来生成数据定义，再也不需要自己手动处理。

https://marketplace.visualstudio.com/items?itemName=rikurouvila.typehole

---

周刊首发于GitHub，欢迎订阅：

我的周刊