MDH 前端周刊第 82 期:Lightning CSS、Tailwindcss、HTTPie AI、chalk-next 投毒
Hi,我是云谦,欢迎打开新一期的「MDH:前端周刊」,这是第 0082 期,发表于 2023/01/09,将为您带来最新的资讯和分享。
注意:本文带有大量链接,推荐点击「查看原文」在语雀上查看。
一周新闻
推荐下 YingCi 的 Telegram 频道《咲奈的平行时空》,更新频率很高,通过此可了解大部分前端相关资讯,也是本文新闻的重要渠道之一。也欢迎订阅我的 Telegrame 频道《云谦的自说自话》作为补充。
Qwik 用 rust 借助 swc 写了优化器,随着会 rust 的人越来越多,swc 的 rust 扩展在社区的应用越来越广了,umi 这周也完善了 mfsu + swc 的场景。
StyleX 更新 Beta 版,但依旧没放出源码。这是在吊胃口,还是对代码没信心?
新 nodejs 官网开发中,技术栈是 Gasby + React + TypeScript + Stackblitz。
之前还在说 markdown rs 不能 js 调用,nextjs 已经把他打包成 wasm 集成进去了。
Lightning CSS 发布 1.18,支持用 JavaScript 调用的 visitor API,比 postcss 快 6 倍。
proxy-memoize 发布 2,valtio 背后的响应式基础库,你也可以发挥想象将他用于其他场景。
React 官网(Beta)更新 useEffectEvent 相关文档。
VitePress 项目可以 0 配置部署到 Vercel 了。
React Native 即将发布 0.71。
Roadmap 更新 2.0,技术栈是 astro + tailwindcss。
Tailwindcss 刚刚超越 Bootstrap 成为 npm 下载量最大的 css 框架。
HTTPie 发布 HTTPie AI,用人类语言发送请求,实现基于 OpenAI 的 GPT-3 模型。ai 都可以发请求了,感觉 ai 写页面也快了。
又有 npm 包投毒了,这次是「vabjs」的「chalk-next」,你的项目锁版本了吗?
React Native 将 TypeScript 作为一等公民来支持,文档也是 TypeScript First。
Next.js 脚手架将支持使用 Bun 作为 Package Manager。
pnpm 发布 7.23,支持 resolve-peers-from-workspace-root 配置,顾名思义,就是用根路径来 resolve peerDependencies。
Jamiebuilds 实现了一个现代版的 Redux + RTK,MVP 阶段,暂未开源。
微软计划将 ChatGPT 整合到 Bing 的搜索结果里,Google 感受到危机了吗?
OpenAI 估值 290 亿美元,比 1 年前的 140 亿增长了一倍以上。
苹果公司有一个新的有声读物服务,使用人工智能来叙述书籍。现在,它只适用于英语的爱情和小说书籍,而且只有两种声音,即麦迪逊和杰克逊。
RustScan,看名字就感觉很快了,可以在 3S 内检测 65K 个端口。
Sailboat UI 是基于 Tailwind CSS 的 UI 框架,包含 150+ 开源 CSS 组件。不过这 150+ 的计算方式比较奇特,比如 Pagination 的不同类型是算 5 个的。
publint 是用于检测 package.json 有没有问题的服务,@PeachScript,father doctor 的新需求来了。
Mafs 是一套关于数学的交互式 React 组件。
superdiff 可以用于对比数组或对象,然后返回完整的可读的 DIFF。听着像是超级英雄的名字,但估计还是打不过 Rust 实现的 Diff 工具。
react-ts-form,看名字就知道,这是个主打 TypeScript 类型安全的表单库。
Type-Level TypeScript,新出的付费 TypeScript 课程,只卖 $39(我没收广告费)。
Doppio 是一个 Headless Browser 服务,今天(2023.1.7)早上收到的推广邮件,还没尝试。
深度好文
好文推荐。
《Zustand vs. Signals》,作者从 DX、性能和 Devtool 三个方面了对比这两个「小众」的状态管理库,简单说就是,1)Zustand 生态和周边更好,而 Signals 性能更好和更自动,2)作者下一个大型项目的选择还是 Zustand,因为对 Signals 的实践以及用的 React 内部 API 不太方向。
Evan You 写了一篇 《2022 Year In Review》,介绍 2022 总结和 2023 规划。2022 主要是默认 Vue 3、Volar 1、Vue Npm 下载量 x2、回传 Vue 3 功能的 Vue 2.7;2023 则是细粒度 Mirror 版本、类 Solid 的 Vapor Mode 编译模式等。
《2023年,这9个项目助你成为前端高手》,如果你不知道写点啥来练手,可以从这里找找灵感,包括电影搜索 App、聊天 App、天气 App、TODO List App、购物车 App、多语言博客、音频播放器等。
《How to ship》 包含了 4 个关于产品如何准时发布的 Tips,1)明确 MAVP(最小实际可行产品)的边界,注意不是偏 DEMO 类的 MVP,2)在前者的基础上削减范围,3)搭配可灵活调整的 Deadline,4)别让自己成为团队卡点。
《Compress An Image Before Upload With JavaScript》,作者介绍了一个方法,在上传图片之前用 JavaScript 压缩图片,避免上传文件太大时间过长。方法是,1)用 createImageBitmap 读取文件数据,2)用 canvas 把数据画出来,3)通过 toBlob 方法返回压缩后的 JPEG 格式的文件(也可以要求 webp,但 safari 不支持)。此外,也可以试试作者一个 13k star 的 filepond 库做图片上传。
《React ref Callback Use–Cases》,你可能不知道 ref 除了是 object 以外,还可以是 function,即 ref callback。ref callback 有一些应用场景,比如 mount 时(新增一个 list item 时)做滚动或聚焦、计算 DOM 尺寸或滚动位置、传递 DOM 给多个消费者等。
《A React Developer’s First Take on Solid》,一个 React 开发者对 Solid 的第一印象。1)Solid 的优点是小和快,2)同时也有一些由于引入 Proxy 以及 Solid 不同的组件渲染机制后的缺点,比如 prop 不能在函数参数里析构等,3)SolidStart 是一个测试软件,有大量粗糙的边界场景,4)会在真实项目中用吗?不会!
《Getting started with SolidStart》,SolidStart 入门文章,手把手教你写一个旅行 App。注:SolidStart 是基于 Solid 的元框架。
《JavaScript Rising Stars 2022》,一年一期,这是第 7 期,可以了解 2022 JavaScript 社区的变化,但是以 Github Star 为衡量标准,并不能完全代表其流行度。
《The 5% Rule》,5% 的人不管你怎么对待他们,都会很糟糕。
Umi 和我
关于 Umi 和我最近的进展。
Umi 例行每周四发一版,我觉得有趣的功能包括,1)新增 icons 方案,这是我目前能想到最好的使用 Icon 的方式,2)build 时增加构建进度条,3)public 目录新增删除支持热更,无需重启 dev server,4)MFSU 支持 SWC 作为编译器。
花了两个下午(4hx2)完成 Umi 新的 Icons 方案,还有大量细节待完善,技术栈是 esbuild + svgr + iconify。
接了个其他团队的周会分享介绍我的工作流和信息流,于是先画了张关于「我的信息流」的图,有点丑,大概是这意思。
一个新的脚本习惯是,先
touch test.ts
,写点代码,然后bunx esno test.ts
,bunx 真是太快了,感觉 esno 是本地包一样。学到一个 Bash 技巧,让 touch 和 take 可以自动创建目录。
收到颜海镜的新书《现代 JavaScript 库开发》,写的文字第一次出现在纸质书上,但是是以推荐语的形式,希望下次是自己出版的书。
这篇周刊的整理耗时 116 分钟,希望能减少到 1h。
星球更新
不知不觉我的知识星球已维护近一年,更了 230 多篇文章,包含了我们最新的观点和见解。以下是近一周的星球更新,访问「q.sorrycc.com」了解更多。
241 - 《我的信息流 2023.1》
240 - 《简繁转换的 3 个方案》
239 - 《Umi 新 Icon 方案的介绍和实现》
238 - 《幽灵依赖》
237 - 《2023 年应该如何做事》
每周一图
ChatGPT 在反压缩 JS 的同时,还能加上一些有意义的变量名。
小结
如果你喜欢 MDH 前端周刊,请转发给你的朋友,告诉他们到这里来订阅,这是对我最大的帮助。下期见!
MDH,让开发者有笑容 :)
点击“在看”,与好友共享!