呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
「INFP」- 1-Zero/Kevinz/言和/乐正绫
专辑: INFP (alone but not lonely.)
#网易云音乐 #mp3 31.10MB 1580.15kbps
via @Music163bot
专辑: INFP (alone but not lonely.)
#网易云音乐 #mp3 31.10MB 1580.15kbps
via @Music163bot
#优质博文 #前端 #react #test
Testing knarly React hooks 测试复杂的 React 钩子
AI 摘要：这篇文章介绍了在 React 中测试复杂的自定义 Hooks 的方法，特别是那些涉及
作者建议使用
此外，文章提到使用
这些技巧有助于有效地测试复杂的 React Hooks。
via Trys Mudford's Blog
Testing knarly React hooks 测试复杂的 React 钩子
AI 摘要：这篇文章介绍了在 React 中测试复杂的自定义 Hooks 的方法，特别是那些涉及
useEffect、异步操作、setInterval 和状态更新的 Hooks。作者建议使用
renderHook（来自 @testing-library/react-hooks）来获取 Hook 的结果对象，并强调在引起状态更新的操作中使用 act 进行包装。此外，文章提到使用
waitFor 来等待异步代码的断言通过，以及利用 Jest 的模拟计时器（jest.useFakeTimers）来处理定时器相关的测试。这些技巧有助于有效地测试复杂的 React Hooks。
via Trys Mudford's Blog
#前端 #css #tailwind #color #配色
Flexoki
AI 摘要：Flexoki 是一款专为数字屏幕阅读和书写设计的开源墨水风格配色方案，灵感来自纸张和传统墨水。它采用高对比度、感知平衡的颜色，适用于多种应用程序和模式（明暗）。该配色基于 Oklab 色彩空间，优化了颜色的感知一致性和可读性，同时保留了艺术和科学的平衡。Flexoki 提供基础颜色、强调颜色和扩展调色板，用于代码高亮和界面设计，旨在营造温暖鲜活的视觉效果。
via Frontend Focus #674
Flexoki
AI 摘要：Flexoki 是一款专为数字屏幕阅读和书写设计的开源墨水风格配色方案，灵感来自纸张和传统墨水。它采用高对比度、感知平衡的颜色，适用于多种应用程序和模式（明暗）。该配色基于 Oklab 色彩空间，优化了颜色的感知一致性和可读性，同时保留了艺术和科学的平衡。Flexoki 提供基础颜色、强调颜色和扩展调色板，用于代码高亮和界面设计，旨在营造温暖鲜活的视觉效果。
via Frontend Focus #674
Steph Ango
Flexoki
An inky color scheme for prose and code.
#前端 #工具推荐 #浏览器插件 #tools #tailwind #shadcn #color
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展，旨在简化 CSS 变量中颜色的管理。 其主要功能包括：
- AI 生成的色彩方案：通过集成 OpenAI 或 Anthropic API，快速生成并在实际应用中预览色彩方案。
- 无障碍测试：根据 WCAG 指南检查色彩对比度，确保设计的可访问性。
- 实时颜色编辑：直接在浏览器中修改 CSS 变量的颜色值，实时预览更改效果，提升设计与代码的协作效率。
- 支持 daisyUI 和 shadcn/ui：提供官方文档中的颜色描述，确保在应用中正确使用，并避免忽略弹出框、聚焦环等状态的设计。
- 导出更改：支持导出修改后的 CSS 变量，遵循 Tailwind 的推荐实践。
该扩展可从 Chrome 网上应用店安装，适用于设计师和开发者，提升设计系统中颜色管理的效率。
CSS Variables Editor —— CSS Variables Editor 是一款浏览器扩展，旨在简化 CSS 变量中颜色的管理。 其主要功能包括：
- AI 生成的色彩方案：通过集成 OpenAI 或 Anthropic API，快速生成并在实际应用中预览色彩方案。
- 无障碍测试：根据 WCAG 指南检查色彩对比度，确保设计的可访问性。
- 实时颜色编辑：直接在浏览器中修改 CSS 变量的颜色值，实时预览更改效果，提升设计与代码的协作效率。
- 支持 daisyUI 和 shadcn/ui：提供官方文档中的颜色描述，确保在应用中正确使用，并避免忽略弹出框、聚焦环等状态的设计。
- 导出更改：支持导出修改后的 CSS 变量，遵循 Tailwind 的推荐实践。
该扩展可从 Chrome 网上应用店安装，适用于设计师和开发者，提升设计系统中颜色管理的效率。
#优质博文 #前端 #css #新特性
摘自 New Front-End Features For Designers In 2025 方便检索
1. CSS scroll snap 让用户可以精确地左右滑动并捕捉到容器中的特定项目，无需 JavaScript。 （这个之前用到过，挺丝滑的）
2. Introduction to the CSS Anchor Positioning API（CSS 锚点定位 API 的介绍） CSS 锚点定位 API 使我们能够相对于其他元素定位元素。
3. 相对颜色语法 (RCS) 可以根据给定颜色创建新颜色。要导出和计算新颜色，我们可以使用颜色函数（ color() 、 hsl() 、 oklch()等）的from关键字来修改输入 color 的值。 Adam Argyle 分享了一些实践中的代码片段，或者查看规范以获取更多详细信息。
4. 有了:user-valid和:user-invalid ，我们现在有了一个可以自动处理所有这些的原生 CSS 解决方案。与:valid和:invalid相反， :user-valid和:user-invalid伪类仅在用户更改输入后才向用户提供有关错误的反馈。 :user-valid和:user-invalid适用于输入、选择和文本区域控件。
5. :focus-visible旨在帮助我们为这两个用户组创造最佳体验：它为键盘用户显示焦点样式，为鼠标用户隐藏焦点样式。MDN Web Docs 重点介绍了:focus和:focus-visible之间的差异、您需要在可访问性方面考虑什么，以及如何为不支持:focus-visible旧浏览器版本提供后备。
6. 现在，可以使用媒体查询来提供响应式 HTML 视频。根据浏览器的视口调整视频和音频文件可以减少页面负载。
摘自 New Front-End Features For Designers In 2025 方便检索
1. CSS scroll snap 让用户可以精确地左右滑动并捕捉到容器中的特定项目，无需 JavaScript。 （这个之前用到过，挺丝滑的）
2. Introduction to the CSS Anchor Positioning API（CSS 锚点定位 API 的介绍） CSS 锚点定位 API 使我们能够相对于其他元素定位元素。
3. 相对颜色语法 (RCS) 可以根据给定颜色创建新颜色。要导出和计算新颜色，我们可以使用颜色函数（ color() 、 hsl() 、 oklch()等）的from关键字来修改输入 color 的值。 Adam Argyle 分享了一些实践中的代码片段，或者查看规范以获取更多详细信息。
4. 有了:user-valid和:user-invalid ，我们现在有了一个可以自动处理所有这些的原生 CSS 解决方案。与:valid和:invalid相反， :user-valid和:user-invalid伪类仅在用户更改输入后才向用户提供有关错误的反馈。 :user-valid和:user-invalid适用于输入、选择和文本区域控件。
5. :focus-visible旨在帮助我们为这两个用户组创造最佳体验：它为键盘用户显示焦点样式，为鼠标用户隐藏焦点样式。MDN Web Docs 重点介绍了:focus和:focus-visible之间的差异、您需要在可访问性方面考虑什么，以及如何为不支持:focus-visible旧浏览器版本提供后备。
6. 现在，可以使用媒体查询来提供响应式 HTML 视频。根据浏览器的视口调整视频和音频文件可以减少页面负载。
Smashing Magazine
New Front-End Features For Designers In 2025 — Smashing Magazine
Searching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and what they are capable of.
#优质博文 #前端 #设计 #css #新特性
New Front-End Features For Designers In 2025
AI 摘要：2025年前端迎来诸多新特性，包括容器查询、
via Cosima Mielke
还有
New Front-End Features For Designers In 2025
AI 摘要：2025年前端迎来诸多新特性，包括容器查询、
:has()伪类、相对颜色等CSS功能，以及text-wrap: balance优化排版，视图转换API实现页面间平滑过渡，<dialog>元素提供原生模态支持，自动字段大小调整和:user-valid伪类改进表单交互。这些特性大幅简化开发流程，提升UI组件的响应性和用户体验。via Cosima Mielke
还有
field-sizing 这种好东西啊
Smashing Magazine
New Front-End Features For Designers In 2025 — Smashing Magazine
Searching for the most flexible front-end workflows and toolkits, it’s easy to forget how powerful some of the fundamentals on the web have become these days. This post is a journey through new front-end features and what they are capable of.
#优质博文 #前端 #css #动画
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
AI 摘要：作者介绍了如何在使用视图过渡（View Transitions）时，获取元素在过渡前后的位置信息。通过在过渡开始前调用
via Bramus
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
AI 摘要：作者介绍了如何在使用视图过渡（View Transitions）时，获取元素在过渡前后的位置信息。通过在过渡开始前调用
getBoundingClientRect() 获取元素的初始位置和尺寸，在过渡更新回调完成后再次调用该方法获取新的位置和尺寸。这些信息可用于调试或自定义动画效果，例如替换浏览器生成的 ::view-transition-group() 关键帧，以实现更高效的动画。作者还指出，直接从 ::view-transition-group() 的关键帧中提取位置信息的方法由于浏览器实现中的错误和偏移参考系的问题，可能不可行。 via Bramus
Bram.us
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
#优质博文 #前端 #总结 #typescript #css #node #react #javascript
推荐阅读全文，以下内容均摘自文章翻译而来，方便我自己以后的搜索
本来只想简单写写的写完发现在润色润色可以发一篇译文博客了好像。。等我
2024 JavaScript Rising Stars
最受欢迎项目 Top 5
1. shadcn/ui (+38.0k stars)
- 可复制粘贴的精美 UI 组件库
- 支持高度定制化和无障碍访问
- 新增了图表、主题、布局等功能
2. Excalidraw (+27.0k stars)
- 手绘风格的在线白板工具
- 支持 AI 功能:文本转图表、Mermaid 转换等
3. AFFiNE (+19.6k stars)
- 开源知识库和项目管理工具
- 结合了 Notion（由块组成的文档）和 Miro（用于绘图的无限画布）等工具的功能。
- 离线优先，它是构建个人知识库的绝佳工具。
4. Bruno (+18.7k stars)
- 轻量级 API 测试工具
- Postman/Insomnia 的替代品
5. n8n (+17.0k stars)
- 工作流自动化平台
- 内置 AI 能力
- 支持 400+ 集成
主要趋势
1. 全栈框架
- Next.js 继续主导，全栈开发标准解决方案
- Hono 快速崛起，支持多运行时环境，极小的体积
- Astro 已成为构建内容密集型应用程序的多功能解决方案
2. 开发工具
- Biome - 快速的代码格式化和检查工具
- Bun - 高性能的 JavaScript 运行时
- Vite 今年再次成为大赢家，第二次将其 State of JS 奖评为最被采用和喜爱的技术。同时具有高使用率和保留率的情况很少见，更不用说维护它了。我们热切期待看到新的 VoidZero 公司明年将如何影响 Vite 生态系统！
值得一提的是，最成功的工具是让自己易于采用： Rspack 几乎是 webpack 的直接替代品，考虑到它的易用性和可以更快地构建的现有 webpack 项目的数量，它应该会在 2025 年爆炸式增长。
3. 移动开发
- Expo 和 React Native 继续主导
- 更注重 Web/原生统一支持
4. AI 工具崛起
- 如 Cursor、bolt.new 等 AI 辅助开发工具
- 可通过提示生成和部署完整应用
5. TypeScript 支持增强
- Node.js 23 原生支持 TypeScript
- 更多工具链原生支持 TS
总的来说,2024年 JavaScript 生态系统在工具链性能、开发体验和 AI 赋能方面都有重大进展。
结论 部分翻译如下
2024 年充满了激动人心的发布：
1. JSR：来自 Deno 团队的新包注册表（不是包管理器），原生支持 TypeScript。
2. Deno v2：JS 运行时的一个重要里程碑，专注于大规模使用 Deno，包括与传统 JS 基础设施的互操作性、导入任何 NPM 包的能力以及稳定的标准库。Deno 也是一个包管理器，拥有自己的缓存机制，可提供闪电般的安装速度。
3. Bun v1.1 现在支持 Windows。
4. TanStack Start：它最初是围绕 TanStack router 构建的模版，后来演变成一个独树一帜的服务器绑定框架！
5. Tauri v2 提供了更好的开发者体验（DX）、全新的插件系统以及移动端支持。
6. Astro 5：一个用于构建内容驱动型网站的Web框架，以其出色的开发者体验受到赞誉。它引入了一个新的内容层（Content Layer），能够以灵活且类型安全的方式从任何来源获取内容。
7. 新公司 VoidZero ，专注于为JS生态系统提供高性能和统一的开发工具链。
8. Vite 6 具有新的 Environment API，为扩展到浏览器之外开辟了新的可能性。
9. TailwindCSS 4 提供 CSS 优先的配置以及更好的性能。
10. React Router v7 将 Remix 的功能和改进带回了库。文档清楚地说明了项目之间的合并，其中提到了两种开始方法，即使用库或完整框架。
今年年底，最大的新闻之一出现了：Node.js 23 支持 TypeScript，而无需实验标志。
但是，最重要的变化与我们用于编写代码的库或框架无关。相反，它们围绕着由 AI 提供支持的令人难以置信的工具展开。Cursor 等 IDE 以及 bolt.new、Lovable、Replit 和 v0.dev 等服务只需几个提示即可生成甚至部署全栈应用程序。如果你能说出来，你就能部署它！2025 年，这一领域的竞争将急剧上升，开发人员将需要做出调整，以充分利用这些强大的工具。
推荐阅读全文，以下内容均摘自文章翻译而来，方便我自己以后的搜索
本来只想简单写写的写完发现在润色润色可以发一篇译文博客了好像。。等我
2024 JavaScript Rising Stars
最受欢迎项目 Top 5
1. shadcn/ui (+38.0k stars)
- 可复制粘贴的精美 UI 组件库
- 支持高度定制化和无障碍访问
- 新增了图表、主题、布局等功能
2. Excalidraw (+27.0k stars)
- 手绘风格的在线白板工具
- 支持 AI 功能:文本转图表、Mermaid 转换等
3. AFFiNE (+19.6k stars)
- 开源知识库和项目管理工具
- 结合了 Notion（由块组成的文档）和 Miro（用于绘图的无限画布）等工具的功能。
- 离线优先，它是构建个人知识库的绝佳工具。
4. Bruno (+18.7k stars)
- 轻量级 API 测试工具
- Postman/Insomnia 的替代品
5. n8n (+17.0k stars)
- 工作流自动化平台
- 内置 AI 能力
- 支持 400+ 集成
主要趋势
1. 全栈框架
- Next.js 继续主导，全栈开发标准解决方案
- Hono 快速崛起，支持多运行时环境，极小的体积
- Astro 已成为构建内容密集型应用程序的多功能解决方案
2. 开发工具
- Biome - 快速的代码格式化和检查工具
- Bun - 高性能的 JavaScript 运行时
- Vite 今年再次成为大赢家，第二次将其 State of JS 奖评为最被采用和喜爱的技术。同时具有高使用率和保留率的情况很少见，更不用说维护它了。我们热切期待看到新的 VoidZero 公司明年将如何影响 Vite 生态系统！
值得一提的是，最成功的工具是让自己易于采用： Rspack 几乎是 webpack 的直接替代品，考虑到它的易用性和可以更快地构建的现有 webpack 项目的数量，它应该会在 2025 年爆炸式增长。
3. 移动开发
- Expo 和 React Native 继续主导
- 更注重 Web/原生统一支持
4. AI 工具崛起
- 如 Cursor、bolt.new 等 AI 辅助开发工具
- 可通过提示生成和部署完整应用
5. TypeScript 支持增强
- Node.js 23 原生支持 TypeScript
- 更多工具链原生支持 TS
总的来说,2024年 JavaScript 生态系统在工具链性能、开发体验和 AI 赋能方面都有重大进展。
结论 部分翻译如下
2024 年充满了激动人心的发布：
1. JSR：来自 Deno 团队的新包注册表（不是包管理器），原生支持 TypeScript。
2. Deno v2：JS 运行时的一个重要里程碑，专注于大规模使用 Deno，包括与传统 JS 基础设施的互操作性、导入任何 NPM 包的能力以及稳定的标准库。Deno 也是一个包管理器，拥有自己的缓存机制，可提供闪电般的安装速度。
3. Bun v1.1 现在支持 Windows。
4. TanStack Start：它最初是围绕 TanStack router 构建的模版，后来演变成一个独树一帜的服务器绑定框架！
5. Tauri v2 提供了更好的开发者体验（DX）、全新的插件系统以及移动端支持。
6. Astro 5：一个用于构建内容驱动型网站的Web框架，以其出色的开发者体验受到赞誉。它引入了一个新的内容层（Content Layer），能够以灵活且类型安全的方式从任何来源获取内容。
7. 新公司 VoidZero ，专注于为JS生态系统提供高性能和统一的开发工具链。
8. Vite 6 具有新的 Environment API，为扩展到浏览器之外开辟了新的可能性。
9. TailwindCSS 4 提供 CSS 优先的配置以及更好的性能。
10. React Router v7 将 Remix 的功能和改进带回了库。文档清楚地说明了项目之间的合并，其中提到了两种开始方法，即使用库或完整框架。
今年年底，最大的新闻之一出现了：Node.js 23 支持 TypeScript，而无需实验标志。
但是，最重要的变化与我们用于编写代码的库或框架无关。相反，它们围绕着由 AI 提供支持的令人难以置信的工具展开。Cursor 等 IDE 以及 bolt.new、Lovable、Replit 和 v0.dev 等服务只需几个提示即可生成甚至部署全栈应用程序。如果你能说出来，你就能部署它！2025 年，这一领域的竞争将急剧上升，开发人员将需要做出调整，以充分利用这些强大的工具。
risingstars.js.org
2024 JavaScript Rising Stars
A complete overview of the JavaScript landscape in 2024: trends about frontend, fullstack and Node.js frameworks, React and Vue.js ecosystems, build tools, state management...
#优质博文 #前端 #node #新动态 #typescript
Node.js 现在默认支持 TypeScript —— 自 v22.6 版本引入实验性“类型剥离（type stripping）”支持,以来，可以直接使用 Node.js 运行 TypeScript。 在即将发布的 Node 23.6 它将会正常工作。马特提供了一些细节，包括它的工作原理以及您将能够做的事情。
看到这条推特想起来的
https://fixupx.com/yusukebe/status/1876928003550171355
via Node Weekly #561
Node.js 现在默认支持 TypeScript —— 自 v22.6 版本引入实验性“类型剥离（type stripping）”支持,以来，可以直接使用 Node.js 运行 TypeScript。 在即将发布的 Node 23.6 它将会正常工作。马特提供了一些细节，包括它的工作原理以及您将能够做的事情。
看到这条推特想起来的
https://fixupx.com/yusukebe/status/1876928003550171355
via Node Weekly #561
#优质博文 #ai #windsurf
想看 windsurf 使用体验的可以看看了，很长的博文，文末也有跟 cursor 的对比。
Windsurf：面向未来的 AI编程工具详解
AI 摘要：Windsurf 是面向未来的 AI 编程工具，强调 AI 在编程全生命周期中的深度融合，其核心能力包括多模态感知、记忆管理、工具集成、决策规划和行动执行，通过智能代理 (Agent) 实现人机协作闭环。其创新点在于 Flows 模式，支持实时上下文感知和多工具协同，Cascade 功能进一步优化了交互体验，实现自动化代码生成、错误修复和多用户协作。Windsurf 集成多种 AI 模型，通过上下文感知引擎精准理解代码库，提供智能补全和优化建议，同时支持企业级协作功能，如远程代码索引和实时同步，显著提升开发效率。相比 Cursor，Windsurf 更适合复杂业务系统和团队协作开发场景，助力开发者从编码转向整体方案设计，推动开发范式变革。
via 微信公众号 Tecvan
想看 windsurf 使用体验的可以看看了，很长的博文，文末也有跟 cursor 的对比。
Windsurf：面向未来的 AI编程工具详解
AI 摘要：Windsurf 是面向未来的 AI 编程工具，强调 AI 在编程全生命周期中的深度融合，其核心能力包括多模态感知、记忆管理、工具集成、决策规划和行动执行，通过智能代理 (Agent) 实现人机协作闭环。其创新点在于 Flows 模式，支持实时上下文感知和多工具协同，Cascade 功能进一步优化了交互体验，实现自动化代码生成、错误修复和多用户协作。Windsurf 集成多种 AI 模型，通过上下文感知引擎精准理解代码库，提供智能补全和优化建议，同时支持企业级协作功能，如远程代码索引和实时同步，显著提升开发效率。相比 Cursor，Windsurf 更适合复杂业务系统和团队协作开发场景，助力开发者从编码转向整体方案设计，推动开发范式变革。
via 微信公众号 Tecvan
转自群友评论：
乐于看到版本号对人们的心理影响被提及
SemVer本意是在版本号内把API兼容性体现出来，使得人们可以盲操（只要还是v1就可以直接升最新版本，没逝的），实践下来效果还行，不过对包使用者侧和包维护侧都有一定弊端
使用者：
对很多人来说1.0升2.0下意识就会觉得这是需要谨慎考虑的事情，即使SemVer情况下对应的包实际上只remove了一个没人在用的API；这实际上拖慢了整个生态的迭代进度，因为很多人实际上可以升v2获取功能/性能提升，但被吓住了
维护者：
SemVer情况下，Breaking Change不能随心发了；我所在的组织有「攒Breaking Change」的说法，把所有Breaking放下一个major发，这实际上是SemVer的目标之一，但对生态来讲并不一定是好的；因为只要下一个major还没出来，就会有越来越多的人在用当前major的时候开始使用已经deprecated的API，这实际上是自己给自己的用户增加了到时候迁移的难度
antfu提的方案对维护者来说是重大利好（Breaking到42.0没有心理负担了），对使用者来说不一定；
- 在使用者的产能大于包维护者的时候，使用者可以追上每一次更新，大部分更新都是无痛的，几乎没什么负担；
- 在使用者产能小于维护者的时候（比如你用了antfu的包），这时候你会发现你本地在42.0而最新版已经是242.0了，你升242必炸，当然你升43也有可能炸，怎么升都不稳；这种情况就会比较头痛，一路慢慢升到242没准要花几个小时了
由于我在升GitLab和升k8s的时候已经头痛过无数次了，所以我对antfu的方案持谨慎态度，毕竟他是真能在几个月内把包从v1干到v50（
乐于看到版本号对人们的心理影响被提及
SemVer本意是在版本号内把API兼容性体现出来，使得人们可以盲操（只要还是v1就可以直接升最新版本，没逝的），实践下来效果还行，不过对包使用者侧和包维护侧都有一定弊端
使用者：
对很多人来说1.0升2.0下意识就会觉得这是需要谨慎考虑的事情，即使SemVer情况下对应的包实际上只remove了一个没人在用的API；这实际上拖慢了整个生态的迭代进度，因为很多人实际上可以升v2获取功能/性能提升，但被吓住了
维护者：
SemVer情况下，Breaking Change不能随心发了；我所在的组织有「攒Breaking Change」的说法，把所有Breaking放下一个major发，这实际上是SemVer的目标之一，但对生态来讲并不一定是好的；因为只要下一个major还没出来，就会有越来越多的人在用当前major的时候开始使用已经deprecated的API，这实际上是自己给自己的用户增加了到时候迁移的难度
antfu提的方案对维护者来说是重大利好（Breaking到42.0没有心理负担了），对使用者来说不一定；
- 在使用者的产能大于包维护者的时候，使用者可以追上每一次更新，大部分更新都是无痛的，几乎没什么负担；
- 在使用者产能小于维护者的时候（比如你用了antfu的包），这时候你会发现你本地在42.0而最新版已经是242.0了，你升242必炸，当然你升43也有可能炸，怎么升都不稳；这种情况就会比较头痛，一路慢慢升到242没准要花几个小时了
由于我在升GitLab和升k8s的时候已经头痛过无数次了，所以我对antfu的方案持谨慎态度，毕竟他是真能在几个月内把包从v1干到v50（
#优质博文 #前端 #css
Balancing Text In CSS
AI 摘要：Ahmad Shadeed 介绍了如何通过 CSS 的
via Ahmad Shadeed
Balancing Text In CSS
AI 摘要：Ahmad Shadeed 介绍了如何通过 CSS 的
text-wrap 属性实现文本的平衡布局。他详细解释了 text-wrap: balance 和 text-wrap: pretty 的用法，展示了如何在浏览器中自动平衡文本行的长度，以提高页面的美观度和可读性。文章还列举了实际应用场景，如在标题、卡片内容、模态框标题和工具提示中使用文本平衡。此外，Shadeed 讨论了该属性的局限性，并提出了改进建议，如引入 text-wrap-ratio 属性，以提供更精细的控制。 via Ahmad Shadeed
Ishadeed
Balancing Text In CSS
Make text look more balanced with text-wrap in CSS.
#优质博文 #工程化 #前端 #template
Mark 一下给某初学萌新看（）
Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14
AI 摘要：这篇文章详细介绍了如何在 Next.js 项目中集成 ESLint、Prettier、Husky 和 lint-staged，确保代码质量和一致性。
主要步骤：
1. 创建 Next.js 项目：使用
2. 安装依赖：安装 ESLint、Prettier、Husky、lint-staged 等开发依赖。
3. 配置 Prettier：通过
4. 配置 ESLint：通过
5. 配置 Husky：使用 Husky 在提交前运行 `lint-staged`，确保代码在提交前经过格式化和检查。
6. 配置 lint-staged：通过
7. 更新 package.json：添加脚本命令以便执行 lint、prettier 和 Husky 初始化。
8. 测试配置：通过运行
此设置帮助开发者在提交代码时自动执行格式化和 lint 检查，从而保证代码质量并减少潜在问题。
Mark 一下给某初学萌新看（）
Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14
AI 摘要：这篇文章详细介绍了如何在 Next.js 项目中集成 ESLint、Prettier、Husky 和 lint-staged，确保代码质量和一致性。
主要步骤：
1. 创建 Next.js 项目：使用
npx create-next-app 创建 Next.js 项目并选择 TypeScript。2. 安装依赖：安装 ESLint、Prettier、Husky、lint-staged 等开发依赖。
3. 配置 Prettier：通过
.prettierrc 文件设置 Prettier 格式化规则，使用 prettier-plugin-tailwindcss 插件进行 Tailwind CSS 格式化。4. 配置 ESLint：通过
.eslintrc.js 文件设置 ESLint 规则，扩展 Next.js、TypeScript 和 React 规则，确保代码的一致性和可维护性。5. 配置 Husky：使用 Husky 在提交前运行 `lint-staged`，确保代码在提交前经过格式化和检查。
6. 配置 lint-staged：通过
.lintstagedrc 文件设置 lint-staged 规则，限定仅对已暂存的文件进行格式化和检查。7. 更新 package.json：添加脚本命令以便执行 lint、prettier 和 Husky 初始化。
8. 测试配置：通过运行
npm run lint 等命令检查设置是否生效。此设置帮助开发者在提交代码时自动执行格式化和 lint 检查，从而保证代码质量并减少潜在问题。
