--- url: https://sugarat.top/weekly/2025-01-18.md description: >- ① 2024年 JS 明星项目 ② CSS 选择器知识合集 ③ 从任意图像生成渐变背景色 ④ Node v23.6 - 内置默认支持TS ⑤ trimMiddle - 字符串中间截断 ⑥ Easing Wizard - CSS 动画缓动曲线编辑 ⑦ opfs-finder ⑧ facad - ls美化 ⑨ CSS变量编辑器 ⑩ pnpm v10 ⑪ electrobun - 基于Bun的跨平台桌面应用框架 ⑫ CSS 中平衡文本展示的方法 ⑬ htmx的未来规划 ⑭ Raphael AI - 无限制的文生图 --- # 视野修炼第117期 | 24年明星项目 欢迎来到第 117 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介 \[\[toc]] 下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**，量大🍚。 ## 🔥强烈推荐 ### [1. 2024年 JS 明星项目](https://risingstars.js.org/2024/zh) 又到一年认标的时候，看看今年有哪些新面孔吧！ ![](https://cdn.upyun.sugarat.top/mdImg/sugar/0094e22e713cd8d727a5dcd4c77ecb40) 与 2023 年一样，[shadcn-ui](https://ui.shadcn.com/) 仍然是今年最热门的项目，继续蝉联榜首。 将组件代码直接放入项目源代码中，这和传统的组件库大不相同。 大火的另一原因是与 [v0.dev](https://v0.dev/)（通过自然语言描述生成项目） 结合得非常好。 第二名是 [Excalidraw](https://excalidraw.com/) 创建具有独特手绘风格的数字绘图画板，有AI 加持，自动生成模板图表。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/2222bb5567e2125502bd6411d5bf82b2) 第三名 [AFFiNE](https://app.affine.pro/workspace/HglT68JHbP5kOgf5Dr4te/4kh_dgbQsM3VHb3ypvXPW) 也是一个知识库和项目管理工具。 Bun 的话从前三掉出来了，2/3都偏应用。 再看一下其它细分的榜单： | 前端框架 | React 生态 | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/73a30355feed0e62eea97f2dda826be4) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/bffc8feded5ea22c589e220a3d512a3e) | | Vue 生态 | 后端 / 全栈 | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/9551b61d4ab80aad9e569def1eb06738) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/519410a8325eb6548d37c2f0cb3370ac) | | 工具 | 状态管理 | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/45a4e0d5bdbeb11f88f9b92409fdd9a5) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/48e5686dad43d3aa105aa9201a0a15ab) | 大部分还是熟悉的面孔。 *But，但除了几个主流的前端框架和库，大部分其它的在公司的💩⛰里都用不上* ### [2. CSS 选择器知识合集](https://css-selectors.dev/advent-calendar/2024) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/bd6eaee475cf931691586d09c96b34d3) 每一个案例都有视频讲解和一个小测试，下面是其中一个基础案例。 | Q：选择div下的h1 和 h2 | A：使用 :is 伪类更加灵活 | | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/c19e1c063843f3f11b56ebf0fa7753c7) | ![](https://cdn.upyun.sugarat.top/mdImg/sugar/ef6226e4be327584ab7c77fccef6ef6b) | ### [3. 从任意图像生成渐变背景色](https://photogradient.com/) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/bb00fb76621c968b994c448c9fd94cdd) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/4a3b005ae3940d5809268081030f74dc) ### [4. Node v23.6 - 内置默认支持TS](https://2ality.com/2025/01/nodejs-strip-type.html) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/6b0e57eb70661cbaeaba1a94682d5c89) 当然还是有不少限制，比如不支持 tsconfig.json ,不支持未来特性的编译等。 ## 🔧开源工具&技术资讯 ### [5. trimMiddle - 字符串中间截断](https://christianheilmann.com/2025/01/03/trimmiddle-the-missing-string-trim-command/) 有一个长字符串，并且希望保留开头和结尾并在中间截断，你可以试试这个。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/0632f4314d03297c002636ec63a54e6c) ### [6. Easing Wizard](https://easingwizard.com/) - CSS 动画缓动曲线编辑 一个在线工具，便捷的编辑和生成CSS动画缓动曲线。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/e13773a9a97a4e86d881cd1cbdd4247b) 站点还分类的提供了许多现成的示例。 *收藏！* ### [7. opfs-finder](https://github.com/hughfenghen/opfs-finder) 浏览器中实现 MacOS Finder，利用到了 `OPFS（ Origin Private File System）` - 浏览器中的文件系统 API，高性能且无需用户授权 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/d03f22a0ae8c0c6b7b3bf8daf68faaf1) *往期提到过 [opfs](https://developer.mozilla.org/zh-CN/docs/Web/API/File_System_API/Origin_private_file_system) ，还是很有使用前景的技术* ### [8. facad - ls美化](https://github.com/yellow-footed-honeyguide/facad) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/1c4a78804aa93dfb4e1ed862dcb8229f) 查看目录文件的终端工具。 可以设置成 ls 的别名，适应习惯。 ```sh alias ls=facad ``` ### [9. CSS变量编辑器](https://www.cssvariables.com/) 一个 Chrome 插件，用于管理 CSS 变量中色值。 如果网站主题色基于 CSS 变量实现，结合这个插件调色非常方便。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/065e42c916f62b7536c5ed5d195d4ce9) 这个面板会添加到 Chrome 的开发者工具中。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/df671c35c4423367d897125de3641842) ### [10. pnpm v10](https://github.com/pnpm/pnpm/releases/tag/v10.0.0) 环境 Node.js>=18 ok 的话，无脑升级即可。 当然需要注意的是，出于安全考虑，pnpm 不再运行依赖项的生命周期脚本。需要手动指定 ```json { "pnpm": { "onlyBuiltDependencies": ["fsevents"] } } ``` ### [11. electrobun](https://electrobun.dev/) - 基于Bun的跨平台桌面应用框架 现在还处于早期阶段，目前仅支持基于 ARM 的 Mac。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/63fe5eac65b4df551aa2905160856368) 编写 TS 使用 Bun 来执行与 Webview 交互。 ## 📚教程&文章 ### [12. CSS 中平衡文本展示的方法](https://ishadeed.com/article/balancing-text-css/) 文章介绍了如何利用 CSS 能力使文本在视觉上更加平衡，对 text-wrap 及其不同值的作用进行了深入的介绍。 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/ba7e2e789aa03975733531b93a5390ef) ### [13. htmx的未来规划](https://htmx.org/essays/future/) > 拿下了24年框架榜 1 的明星项目 htmx 团队正在努力将其打造为新时代的 `"jQuery"`，希望模拟 `jQuery` 的技术特性，使其成为 Web 开发的高效低成本的工具包。 ## 🤖AI工具&资讯 ### [14. Raphael AI](https://raphael.app/zh) - 无限制的文生图 ![](https://cdn.upyun.sugarat.top/mdImg/sugar/db53e7eaac77b84190a414b9343f2661) ![](https://cdn.upyun.sugarat.top/mdImg/sugar/739f1b69575e894ceff803ec4d402d54) *速度还不错！* ## ⭐️强力推荐关注 > 周刊部分内容来源如下渠道，推荐大家关注。 * [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布 * [前端 RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章 * [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！ * [FRE123 技术周刊精选](https://www.fre321.com/weekly) - 技术周刊精选推荐信息流