前端食堂技术周刊第 59 期：GitHub Universe 2022、Rome v10、Parcel v2.8.0

这是前端食堂的第 135 篇原创

美味值：🌟🌟🌟🌟🌟

口味：草莓拿铁

• 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly[1]

周刊仓库 923 个 Star 了，有时间的兄弟们帮忙冲一波 1000 Star。

本期摘要

• GitHub Universe 2022
• Rome v10
• Parcel v2.8.0
• 50 个有用的 Vim 命令
• TanStack Router
• 如何使用 CSS 创建高级动画
• 可扩展的 CSS 演变
• Solid Start Beta

大家好，我是童欧巴。欢迎来到本期的前端食堂技术周刊，我们先来看下上周的技术资讯。

技术资讯

1.GitHub Universe 2022[2]

看看我们 “程序员的朋友圈” GitHub 今年有哪些大动作：

(省流版)

• GitHub Copilot 企业版、支持语音交互；
• GitHub Codespaces：个人开发者每月免费 60 小时[3]；
• 全新的代码搜索和代码视图体验；
• GitHub Projects 提供给你更多可视化视图的 Roadmap 以及 由 Markdown 生成的任务列表对 Issues 进行管理[4]、GitHub Mobile 新增功能(跑 GitHub Action、编辑文件、PR 等)；
• GitHub 企业版：GitHub Enterprise Cloud 即时体验新功能、GitHub Actions Importer 帮助你迁移 CI/CD[5]、更细粒度的访问令牌、彻底改变物联网 (IoT) 软件开发[6]（Arm 开发工具在 GitHub Actions 中原生可用）、GitHub Enterprise Server 3.7[7] 新增 70 个新特性；
• 安全提升：接收来自社区的私有漏洞报告、CodeQL 支持 Ruby、安全概览对企业用户提供更大范围的视图支持；
• 投资社区：开源两款可变字体 Mona Sans 和 Hubot Sans、Octoverse 10 周年报告[8]、GitHub Accelerator 将为 20 名维护人员和团队提供津贴和指导，以开展全职开源职业、与 M12 合作设立 1000 万美元的开源基金[9]、GitHub Sponsors 支持批量赞助。

2.Rome v10[10]

此次发布包括 linter 校验器和 formatter 格式化器，它们具有最小化的配置，漂亮的描述性诊断，并内置对 JavaScript 和 TypeScript 的支持。

• formatter 受 Prettier 启发，允许大多数用户以最小甚至零的改动来进行迁移；
• linter 建立在一个遵循社区标准的推荐规则集上。

接下来的一年里 Rome 团队会进行 compilation 编译、 bundling 打包、 testing 测试等工作。

Rome 用 Rust 重写后的第一个稳定版本终于等来了，让我们再等等。毕竟我们都知道，罗马不是一天建成的。

3.Parcel v2.8.0[11]

听说最近流行比谁家的 HMR 更快？不好意思，Parcel 赢麻了。

Parcel v2.8.0 的热更新比 Turbopack 快 68%(根组件)，比 Vite 快 74%(叶组件)。同时此版本带来了全新的打包算法、改进了自动代码拆分、提升了大型项目的构建性能，以及优化 Tree Shaking 使包体积减少 50%。

下面我们来看技术资料。

技术资料

1.50 个有用的 Vim 命令[12]

帮你早点下班回家陪老婆的 50 个 Vim 命令。

3.TanStack Router[13]

嘿，我是框架无关的路由器 TanStack Router，之前叫 React Location，现在改个名字从 v0.0.1 重新开始，我还有一些兄弟姐妹[14]。

4.如何使用 CSS 创建高级动画[15]

来吧，搞清楚三次贝塞尔曲线、二次贝塞尔曲线和堆叠动画，一起玩次过山车。

5.可扩展的 CSS 演变[16]

为什么传统 CSS 在大型项目中难以管理？

难点有四：全局命名空间，代码互相影响 (新出的 CSS Cascade Layers 申请出战解决）、命名难、重构难、调试难。

历史破解之法：OOCSS、SMACSS、BEM、ITCSS、Cube CSS。

今日破解之法：CSS in JS、CSS Modules、原子化 CSS。

6.Solid Start Beta[17]

Solid Start 进入 Beta 阶段，官方公告让我想到了 GALI 的 《70%》，喜欢听黑怕的你一定听过。(开个玩笑)

• 构建基于 Vite[18]；
• 平台无关的 Sessions 借鉴 Remix[19]；
• 嵌套文件路由借鉴 NuxtJS[20]；
• <FileSystem /> 组件借鉴 Hydrogen[21]；
• API 路由借鉴 SvelteKit[22]；
• RouteData 和 RouteActions 借鉴 Remix[23] 和 TanStack Query[24]；
• 新的实验性功能：Partial Hydration 部分水合、hybrid nested routing 混合嵌套路由[25]。

好文推荐

下面来看一下好文推荐，本周推荐的好文是：

1. 重新理解 Web[26]
2. 用 React Three Fiber 和着色器创造粒子的神奇世界[27]

好了，以上就是本期的食堂周刊，观众老爷们如果觉得还不错，一键三连是对食堂老板最大的支持。

你的前端食堂，吃好每一顿饭，我们下期见。

周刊一锅端

如果大家还没看过瘾，给大家推荐一下食堂技术周刊的合作伙伴，赶快把他们也抱入碗中吧～

• 前端早早聊的 18 个成长宝藏库[28]：前端早早鸟，前端早早跑
• MDH 前端周刊[29]：大厂一线 P8，Umi、Dva 等库作者
• DEX 周刊[30]：关于产品、设计、前端、软件等内容的精华资讯邮件列表

周刊赞助

整理周刊要花费大量的精力和时间，你可以通过以下方式支持我：

• 将食堂分享给你的朋友；
• 订阅食堂的竹白付费专栏(食堂为你准备了专属的会员通讯，以及前端食堂数字花园知识库的访问权限)。

订阅地址：https://hungryturbo.zhubai.love/

参考资料

[1]

食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly: https://github.com/Geekhyt/weekly

[2]

GitHub Universe 2022: https://github.blog/2022-11-09-everything-new-from-github-universe-2022/

[3]

GitHub Codespaces：个人开发者每月免费 60 小时: https://github.com/features/codespaces

[4]

由 Markdown 生成的任务列表对 Issues 进行管理: https://docs.github.com/cn/issues/tracking-your-work-with-issues/about-tasklists

[5]

GitHub Actions Importer 帮助你迁移 CI/CD: https://github.com/features/actions-importer/signup

[6]

彻底改变物联网 (IoT) 软件开发: https://github.blog/2022-11-02-github-partners-with-arm-to-revolutionize-internet-of-things-software-development-with-github-actions/

[7]

GitHub Enterprise Server 3.7: https://github.blog/2022-11-08-github-enterprise-server-3-7-is-now-generally-available/

[8]

Octoverse 10 周年报告: https://octoverse.github.com/

[9]

与 M12 合作设立 1000 万美元的开源基金: https://github.blog/2022-11-09-an-open-source-economy-built-by-developers-for-developers/

[10]

Rome v10: https://rome.tools/blog/2022/11/08/rome-10/

[11]

Parcel v2.8.0: https://parceljs.org/blog/v2-8-0/

[12]

50 个有用的 Vim 命令: https://vimtricks.com/p/50-useful-vim-commands/

[13]

TanStack Router: https://tanstack.com/router/v1

[14]

我还有一些兄弟姐妹: https://tanstack.com/

[15]

如何使用 CSS 创建高级动画: https://www.smashingmagazine.com/2022/10/advanced-animations-css/

[16]

可扩展的 CSS 演变: https://frontendmastery.com/posts/the-evolution-of-scalable-css/

[17]

Solid Start Beta: https://www.solidjs.com/blog/introducing-solidstart

[18]

Vite: https://vitejs.dev/

[19]

Remix: https://remix.run/

[20]

NuxtJS: https://nuxtjs.org/docs/features/file-system-routing/#nested-routes

[21]

Hydrogen: https://shopify.dev/api/hydrogen/components/framework/fileroutes

[22]

SvelteKit: https://kit.svelte.dev/docs/routing#server

[23]

Remix: https://remix.run/

[24]

TanStack Query: https://tanstack.com/query/v4/docs/adapters/solid-query

[25]

新的实验性功能：Partial Hydration 部分水合、hybrid nested routing 混合嵌套路由: https://dev.to/this-is-learning/client-side-routing-without-the-javascript-3k1i

[26]

重新理解 Web: https://zhuanlan.zhihu.com/p/581977751

[27]

用 React Three Fiber 和着色器创造粒子的神奇世界: https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/

[28]

前端早早聊的 18 个成长宝藏库: https://mp.weixin.qq.com/s/3yLbUwqzSy2gFHXkO0PICg

[29]

MDH 前端周刊: https://mp.weixin.qq.com/s/NGux3r0P1JJH_z4-vfeksQ

[30]

DEX 周刊: https://newsletter.dex.group/

公众号：前端食堂

知乎：童欧巴

掘金：童欧巴

这是一个终身学习的男人，他在坚持自己热爱的事情，欢迎你加入前端食堂，和这个男人一起开心的“变胖”～