呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
#优质博文 #前端 #总结 #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 年,这一领域的竞争将急剧上升,开发人员将需要做出调整,以充分利用这些强大的工具。
#优质博文 #前端 #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(
#优质博文 #前端 #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
#优质博文 #工程化 #前端 #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
#工具推荐 #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