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

781 阅读4分钟

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

📖 文章

看完了 2021 CSS 年度报告,我学到了啥?

一起来查缺补漏。

mp.weixin.qq.com/s/BbH6IleqL…

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

题外话:

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

www.cnblogs.com/qianxiaox/p…

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

zhuanlan.zhihu.com/p/447557470

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

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

mp.weixin.qq.com/s/UYZeA3XCJ…

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

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

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

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

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

mp.weixin.qq.com/s/aEgAwGK56…

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

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

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

mp.weixin.qq.com/s/maOI6SxjY…

精读《Records & Tuples 提案》

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

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

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

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

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

mp.weixin.qq.com/s/D3A89fIPC…

哈啰前端Web Components最佳实践

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

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

juejin.cn/post/704405…

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

juejin.cn/post/704481…

设计模式

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

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”.

www.joshwcomeau.com/css/designi…

🛠 工具、软件

Typehole

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

marketplace.visualstudio.com/items?itemN…


周刊首发于GitHub,欢迎订阅:

我的周刊