呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
转自群友评论：
乐于看到版本号对人们的心理影响被提及
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 检查，从而保证代码质量并减少潜在问题。
#优质博文 #astro #tailwind #前端 #工程化
Setup Astro 3.0 with Tailwind CSS Prettier Plugin
AI 摘要：这篇文章介绍了如何在 Astro 3.0 项目中设置 Prettier 来自动排序 Tailwind CSS 类。通过安装
via Web Reaper
Setup Astro 3.0 with Tailwind CSS Prettier Plugin
AI 摘要：这篇文章介绍了如何在 Astro 3.0 项目中设置 Prettier 来自动排序 Tailwind CSS 类。通过安装
prettier-plugin-astro 和 prettier-plugin-tailwindcss 插件，并更新 .prettierrc 和 VSCode 设置，可以实现代码自动格式化和 Tailwind 类的自动排序。文章详细说明了安装、配置以及验证过程，帮助开发者优化代码风格和提高开发效率。via Web Reaper
Web Reaper
Setup Astro 3.0 with Tailwind CSS Prettier Plugin
Save time and eliminate styling discussion with auto-formatting and tailwind auto-class-ordering on save by setting up Prettier for Tailwind CSS in your Astro 3.0 projects.
#工具推荐 #astro #组件库 #开源 #趣站
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集，利用Astro框架的优势。它提供了一套可重用的组件和工具配置，关注通用的网页模式和增强功能，支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想，允许使用最小化的代码和小型文件，避免传统UI框架的臃肿，同时支持动态JS小组件的插入，确保未来兼容性和代码的高效性。
我是在这里面发现了一个 astro-tooltips 试了一下挺好用的，网页也很好看。
https://code.juliancataldo.com/#julians-web-garden
Julian's Web Garden 是一个旨在构建现代、渐进性网站的开源工具集，利用Astro框架的优势。它提供了一套可重用的组件和工具配置，关注通用的网页模式和增强功能，支持HTML、CSS和JavaScript的最佳实践。该项目采用“岛屿架构”思想，允许使用最小化的代码和小型文件，避免传统UI框架的臃肿，同时支持动态JS小组件的插入，确保未来兼容性和代码的高效性。
我是在这里面发现了一个 astro-tooltips 试了一下挺好用的，网页也很好看。
https://code.juliancataldo.com/#julians-web-garden
Julian's Web Garden
Julian's Web Garden | Building blocks for making progressive and future-proof websites.
Components collection features Astro, HTML…
Components collection features Astro, HTML…
