查看原文
其他

第 0083 期:React Query、CSS 3D、JavaScript Wrapped 2022、React 新文档

云谦 云谦和他的朋友们 2023-01-28

题图:卷饼兔。

Hi,我是云谦,欢迎打开新一期的「MDH:前端周刊」,这是第 0083 期,发表于 2023/01/16,将为您带来最新的资讯和分享。

注意:本文带有大量链接,推荐点击「查看原文」在语雀上查看。

一周新闻

本期一周新闻由 YingCi 主笔,推荐关注他的 Telegram 频道《咲奈的平行时空》,更新频率很高,通过此可了解大部分前端相关资讯。也欢迎订阅我的 Telegrame 频道《云谦的自说自话》作为补充。

  • 成功的秘诀:Bun 作者每个周要工作 95 小时,相当于每天编码 13 小时。

  • Bun 下个版本将支持 node:readline ,因为 Vite 依赖这个包,所以现在 Bun runtime 还没法把 Vite 跑起来。

  • Tanstack 旗下 React Query 作者认为 Tanstack 正确的读音是:10 step (英文: ten step)。

  • codepen 公布了 2022 年最受欢迎的 100 个项目。

  • 一份 GitHub 调查报告显示,国人最喜欢给仓库点 star ,有 20% 的 star 都是国人开发者点的。

  • React Query 支持与 svelte 一起使用。

  • Github 支持给 discussion 配置通用模板。

  • Github 支持了给组织级别配置通用的 Actions 模板,而无需单独配置每个仓库。

  • Github 支持了在 Actions 中配置环境变量,但还只支持静态变量。

  • pnpm v7.24.2 发布,支持了新的 v6 版本 lockfile 格式。

  • zustand v4.3.0 发布,去除了所有的默认导出,因为这与某些打包器不兼容。

  • jotai v1.13.0 发布,新增了全新的 jotai devtools 。

  • State of js 2022 调查报告结果:React 继续做老大,Vite 最受欢迎。

  • Chrome v109 发布,performance 录制中函数映射优化等,没有 awesome 的变化。

  • Turborepo v1.7.0 发布,现在必须显示声明哪些产物被缓存。

  • codesandbox 支持了在 docker 中运行项目,对服务端项目更友好了。

  • Swc 代码压缩 minify 功能取得新进展:产物体积等指标已优于 Terser ,参考 nextjs 的 issue 反馈,产物质量仍存在不少问题。

  • 以 Vue.js team member 三咲智子为首要贡献者的 Mastodon 网页版客户端 elk 开源。

  • Chromium 将在 C++ 代码中使用 Rust 。

  • React native 0.71 发布,默认创建新项目是 TS 模板等变化。

深度好文

好文推荐。这周好文真多,以下是我全文阅读过的部分。

  • 《Type-safe React Query》,Dominik 的每篇文章都值得深入阅读。React Query 的类型可以定义在哪?1)useQuery<Todos>,2)const queryFn: Promise<Todos>,3)axios.get<Todos>,4)res.data as Todos,5)不定义。不定义怎么有类型?用 zod,然后定义 schema,schema 不仅可用于校验后端数据,还会返回类型。

  • 《Data binding in React: how to work with forms in React》,johnwcomeau 的每篇文章也值得阅读,这篇比较新手向,深入解答了面试必问问题「受控和不受控」。

  • 《Clever Code Considered Harmful》,johnwcomeau 这周的另一篇文章。判断代码好不好的一个标准是,一个初级开发人员,一个职业生涯刚刚起步的人,会不会在理解这段代码时遇到困难?

  • 《React JS Best Practices From The New Docs》,Sebastian Carlos 阅读完 React 新官网文档后总结的 160 条笔记。我帮我节省了大量时间,我读完他的笔记后记了 20 多条笔记。但如果有空,还是应该完整阅读 React 的新文档。

  • 《JavaScript Wrapped 2022》,作者整理了 TypeScript、React、Angular、Vue、SSR、Node|Deno|Bun 的 2022 发展和 2023 展望,建议熟读。

  • 《3D in CSS》,交互式的 3D CSS 教程。主要是 4 个 CSS 属性,包括 perspective、perspectiveOrigin、translateZ 和 rotate3d。

  • 《Building a fast, animated image gallery with Next.js》,Vercel 把 Next.js Conf 2022 的照片搬上网,同时把这套代码开源。技术栈包括 Cloudinary、Next.js 图像组件、imagemin、Framer Motion、以及用 ai 生成 alt 文本等。

  • 《Our top Core Web Vitals recommendations for 2023》,本文 Google DevRel 团队认为在 2023 年提高 Core Web Vitals 性能的最有效方法的最佳实践集合。涉及的性能指标包括 LCP、TTFB、CLS、FID 和 INP,同时给出了每个指标提升的注意点和可执行操作。

  • 《The hardest part of web dev》,关于 timing 的知识。其中 react 中,1)渲染函数在React更新DOM之前运行,2)useInsertionEffect回调在React更新DOM后运行,但在浏览器重新计算页面布局之前,3)useLayoutEffect回调在浏览器重新计算页面布局后运行(考虑到useInsertionEffect回调注入的任何CSS),但在浏览器重新绘制之前,4)useEffect回调在浏览器完成重绘后运行。

  • 《Fixing a Memory Leak in a Production Node.js App》,kentcdodds 在 production 中修复内存泄漏过程的记录。包括,1)通过 v8.writeHeapSnapshot 可创建 heap snapshots,然后用 Chrome 进行分析,2)使用 lru-cache 确保 cache 不会太大。最后发现问题的根源是用 express-http-proxy 做图片代理导致的。

Umi 和我

关于 Umi 和我最近的进展。

  • Umi 例行每周四发一版,我觉得有趣的功能包括,1)新增 react-query 插件,2)优化 icons 方案,支持 hover、spin、rotate、flip、local icons、alias 等功能,3)升级 babel 和 webpack 相关依赖到最新。

  • VSCode 下有个叫「Error Lens」插件非常好用,相见恨晚,可以在行内显示潜在出错信息,Intellij 系与之对应的插件叫「InlineError」。

  • 花几小时理清了 Next.js 使用 Turbopack 的流程。

  • 这篇周刊的整理耗时 4 小时,这周好文太多,大部分时间用于阅读。

星球更新

不知不觉我的知识星球已维护近一年,更了 240 多篇文章,包含了我们最新的观点和见解。以下是近一周的星球更新,访问「q.sorrycc.com」了解更多。

  • 246 - 《装了啥 2023》,每年更新一版我在用的工具

  • 245 - 《按需加载 PC 和 Mobile 资源》,一个实际业务问题的解法

  • 244 - 《困难模式》,选择困难模式,人生会越来越简单

  • 243 - 《Next.js x Turbopack》,理清 Next.js 如何使用 Turbopack

  • 242 - 《“完美”体验的 TODO App》,写 Remote 数据的 TODO App 应该注意啥

每周一图

来源:https://vived.io/javascript-wrapped-2022-frontend-weekly-vol-119/

小结

如果你喜欢 MDH 前端周刊,请转发给你的朋友,告诉他们 到这里来订阅 ,这是对我最大的帮助。下期见!

MDH,让开发者有笑容 :)


您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存