呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #AI #ClaudeCode #VSCode #course
我现在也是这个流程了，不过我是不用
How I use Claude Code (+ my best tips)
author Steve Sewell
我现在也是这个流程了，不过我是不用
--dangerously-skip-permissions，rm 权限不敢给。How I use Claude Code (+ my best tips)
AI 摘要：本文作者作为 Claude Code 的深度用户，详细介绍了自己从 Cursor 转向全程使用 Claude Code 的开发体验，总结出一系列高效实用的使用建议。文章覆盖了 Claude Code 的 VS Code 插件启动、终端界面、权限系统、GitHub 集成、大型代码库表现、经济性、队列系统、自定义扩展、可视化界面及团队协作等方面，旨在帮助开发者最大化 Claude Code 在日常工作中的价值与便捷性。
author Steve Sewell
Builder.io
How I use Claude Code (+ my best tips)
I switched from Cursor's agents to Claude Code weeks ago and I'm not going back. Here's how I use it and my best practical tips
#优质博文 #前端 #react #新动态
React Status #432
React Status #432
AI 摘要： 本期 React Status 通讯聚焦于 React 生态系统的最新动态与未来趋势，探讨了 React 19 带来的特性与争议，Redux 维护者 Mark Erikson 对 React 社区现状的深度分析，以及 React Native 0.80 的更新亮点。此外，文章还涵盖了 AI 技术在前端栈中的应用、多个 React 相关工具与库的更新、以及 JavaScript 领域的其他重要进展，内容详实且覆盖面广，为开发者提供了宝贵的行业洞察与技术资源。
1. 行业动态
• 2025 Redux 维护者对 React 现状的分析：Mark Erikson 回顾了 React 的演变历程，讨论了 React 19 引发的未来方向争议，分析了 Meta 内部驱动开发与 Vercel 主导的 Next.js 服务器组件工作之间的分歧，并反驳了关于 Verce l“接管” React 或 “React 仅适用于 Next” 的谣言，同时反驳了对客户端开发被抛弃的说法。
• Figma 收购 Payload：Figma 收购了开源 Next.js 后端框架/CMS Payload 的创造者，扩展其设计工具生态。
2. 工具与库更新
• React Native 0.80 发布：包含 React 19.1，引入可选的更严格 TypeScript 类型，以及 iOS 上预构建依赖的实验性支持以加速构建过程。旧架构正式“冻结”，对未来将移除的 API 发出警告。
• Relay v20 发布：Facebook 推出最新版本的 GraphQL 导向 React 框架。
• React Aria Tree：新增拖放功能支持。
• Motion 动画库推出 VS Code 扩展，方便 Copilot 使用其文档。 #vscode
• react-searchable-dropdown：支持虚拟化大型数据集的可定制下拉组件。
• Apple 'Liquid Glass' Effect：为 React 应用提供 Apple 新设计语言效果的高控制实现。
• use-mcp 钩子：Cloudflare 推出用于连接 MCP 服务器的钩子，简化 AI 系统的认证和工具调用。
• 其他工具：包括 react-call 1.8、Slice Viewer、State in URL 5.0、Ant Design Charts 2.4 等多个库的更新与功能介绍。
3. 教程与案例分享
• Cursor 升级 Storybook：展示如何利用 AI 在两小时内完成 Storybook 升级。
• 无限跑马灯效果：介绍如何结合 React 和 Motion 沿 SVG 路径构建无限跑马灯。
• Suspense 流式传输：Ryan Toronto 分享了可组合流式传输的技术实现。
4. JavaScript 生态系统其他动态
• Dan Abramov 博客：讨论代码审查中抑制警告的问题及其应对规则。
• pnpm 10.12：引入实验性“全局虚拟存储”以提升空间效率。
• Oxlint 1.0 和 Biome v2：分别推出快速替代 ESLint 的 linter 和支持类型感知规则的新版本。
• 其他技术：包括顶层 await 在 ES 模块中的应用，以及 WelsonJS 用于构建 Windows 应用的创新方法。
#博客更新 #前端 #vscode #插件 #tools
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
AI摘要：新增插件聚焦：WebGL（Shader）、Tailwind 工具链（高亮/文档）、国际化（i18n）、设计协作（Figma）。
核心工具保留：GitLens、ESLint/Prettier、Tailwind 生态插件。
效率提升：通过 CSV 处理、项目管理、注释翻译等插件优化工作流。
个性化选择：外观特效（如 Power Mode）按需启用。
作者备注：部分插件因转用 Cursor 编辑器或使用频率低而弃用，推荐列表基于实际开发场景筛选。
#优质博文 #前端 #tools
1. CSS 的 backdrop-filter 属性（英文） 本文介绍 backdrop-filter 属性，可以产生毛玻璃的效果。 #css
2. 基于 signal 的 Web 组件（英文） #html #WebComponents
作者介绍自己写的一个 Web 组件，可以在不加其他 JS 库的情况下，实现 signal 功能。
3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言，属于 TypeScript 的超集，这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用，可以上传文档，生成本地的知识库问答系统，基于 RAG（检索增强生成）技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架，快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版（英文） #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器，一共十几个库，详细介绍每个库的特点
via #阮一峰的科技周刊 337
1. CSS 的 backdrop-filter 属性（英文） 本文介绍 backdrop-filter 属性，可以产生毛玻璃的效果。 #css
backdrop-filter 是一个强大的 CSS 属性，它可以对元素后面的内容应用模糊、亮度调整等滤镜效果，从而创造出玻璃拟态（Glassmorphism）等视觉效果。文章介绍了 backdrop-filter 的基本用法，如 blur() 进行模糊处理，以及 brightness() 进行亮度调整。同时，作者强调了 backdrop-filter 仅影响元素背景，不会影响其自身内容。此外，文章探讨了浏览器兼容性问题，指出 Safari 早期支持较好，而部分浏览器（如 Firefox）需要启用实验性功能才能使用。最后，作者提供了示例代码，并建议开发者结合 background 颜色和 backdrop-filter 以获得最佳视觉效果。
2. 基于 signal 的 Web 组件（英文） #html #WebComponents
作者介绍自己写的一个 Web 组件，可以在不加其他 JS 库的情况下，实现 signal 功能。
本文探讨了在 HTML 中直接定义 信号（Signals） 的可能性，提出 <x-signal> 自定义元素，使其能够管理状态并自动更新 UI，而无需依赖 JavaScript 框架。该方法基于 HTML-based state 概念，直接从 HTML 解析初始值，并支持类型转换、动态渲染、自定义格式化及派生状态计算。最终，作者认为 <x-signal> 代表了一种更细粒度的 **Islets 架构**，在静态 HTML 中提供轻量级的响应式交互能力。
3. 鸿蒙 ArkTS VSCode 插件 #vscode #ArkTS #插件 #鸿蒙
ArkTS 是华为鸿蒙系统的开发语言，属于 TypeScript 的超集，这是它的 VSCode 插件。
4. RAG Web UI #AI #RAG
一个开源的 AI 桌面应用，可以上传文档，生成本地的知识库问答系统，基于 RAG（检索增强生成）技术。
5. TEN Agent #AI #agent #语音
一个 AI 的工具框架，快速打造语音相关的 AI 应用。
6. 富文本编辑器比较2025版（英文） #富文本 #编辑器
这个页面详细比较了 JS 的富文本"所见即所得"编辑器，一共十几个库，详细介绍每个库的特点
本文分析了主流的富文本编辑器框架，帮助开发者在 2025 年做出最佳选择。文章涵盖 Lexical、ProseMirror、Slate、Tiptap、Quill 等编辑器，并从 可扩展性、性能、易用性、社区支持 等方面进行了对比。
• Lexical （Meta 开源）：高性能、模块化、适合复杂应用，但生态仍在发展中。
• ProseMirror ：功能强大、灵活，但 API 复杂，入门门槛较高。
• Slate ：React 友好，完全可定制，但文档有限，维护情况不稳定。
• Tiptap （基于 ProseMirror）：提供更简洁的 API 和更好的 TypeScript 支持，适合现代 Web 应用。
• Quill ：易用，适合基本需求，但扩展性受限。
结论: 如果你需要高扩展性和现代化 API，Lexical 或 Tiptap 是更好的选择；如果追求稳定和成熟方案， ProseMirror 仍然值得考虑。
via #阮一峰的科技周刊 337
#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #tools
科技爱好者周刊（第 318 期）：创业咖啡馆的记忆
1. 怎么写 CSS 的打印样式（英文） 📓 本文是一篇教程，介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序（英文） 📓 一篇长文，介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构（英文） 📓 有些时候，重构之后的代码比之前还难懂。本文逐一举例，分析怎样的重构是好的，怎样是坏的。
4. 哨兵值是什么（英文）📓 这篇短文通过牙膏的例子，解释什么是编程使用的哨兵值（sentinel value）。
5. common-intellisense 📓 VS Code 插件，为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏，在网页上画线，反弹小球，发出的声音组成旋律。
科技爱好者周刊（第 318 期）：创业咖啡馆的记忆
1. 怎么写 CSS 的打印样式（英文） 📓 本文是一篇教程，介绍网页打印样式的 CSS 写法。涵盖了页面布局控制、页眉页脚处理及通过 JavaScript 生成打印友好内容等技术。 #css
2. 使用 Caddy 部署 Web 应用程序（英文） 📓 一篇长文，介绍 Caddy 如何当作 Web 服务器的初学者教程。#caddy #部署 #docker
3. 好的重构 vs 坏的重构（英文） 📓 有些时候，重构之后的代码比之前还难懂。本文逐一举例，分析怎样的重构是好的，怎样是坏的。
4. 哨兵值是什么（英文）📓 这篇短文通过牙膏的例子，解释什么是编程使用的哨兵值（sentinel value）。
5. common-intellisense 📓 VS Code 插件，为多种常用的前端 UI 库提供注释和类型提示。 #vscode
6. Franzelio 一个有意思的网页小游戏，在网页上画线，反弹小球，发出的声音组成旋律。
Betterstack
Deploying Web Apps with Caddy: A Beginner's Guide | Better Stack Community
Explore Caddy's key features: static file serving, reverse proxying, automatic HTTPS, and integrations for log and uptime management
#前端 #插件推荐 #vscode #资源推荐 #tools
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
#工具推荐 如果你在使用 #Hexo、#Hugo、#Astro、#Next.js、#VitePress 等静态博客生成器，推荐你安装 VSCode 的 Front Matter 插件，为你的博客带来可视化的 CMS 管理。
写作模式下可以为 Markdown 编辑带来快捷键操作、效率提高很多，而且还可以帮你检查 SEO。
Source Twitter @ccbikai
https://frontmatter.codes/
好啊，好啊，这个好啊，我突然又不想抛弃 hexo 了
frontmatter.codes
Headless CMS right in your code editor | Front Matter
Headless CMS running in Visual Studio Code that helps managing your static sites. Supports Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and more.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
我说我忘掉了什么
科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案
1. 网络推送揭秘（英文） 📓 作者写了一个简单的实现，解释渐进式 Web 应用程序的网络推送（Web Push），即怎么向用户推送通知。
2. 、VisActor 🧰 一个字节出品的前端数据可视化解决方案，分成图表库 VChart 和表格库 VTable。 #组件库
3. h5player for tampermonkey 🧰 一个油猴脚本，为 H5 视频网站增强功能（多级播放速度、截图、画中画、调节亮度、饱和度、对比度等），支持各大主流视频网站。
4. UShare 🧰 一款生成代码和文本分享卡片的网页工具，可以设定字体和字型大小。
5. Vue DevTools Next 🧰 Vue 官方开发者工具的下一个迭代，旨在增强 Vue 开发者体验。 #vue
6. yft-design 🧰 基于 fabric.js 的名片编辑应用。
7. ant-codeAI 🧰 通过 OpenAI、Gemini 等模型，生成 Web（React，Vue，Tailwind CSS）和 native（react native）代码。 #AI
8. Read Copilot 🧰 一个苹果设备的阅读器 App，支持 RSS 和 Read It Later 功能，并可以用 AI 生成总结、文章大纲和翻译。 #rss
9. vscode-common-intellisense 🧰 VS Code 插件，为主流的前端框架提供代码提示（intellisense）。 #vscode
10. Yazi 🧰 一款运行在终端里面的文件管理器，跨平台，支持图片预览，使用 Rust 语言开发，速度快。
11. 齐思 🧰 一个中文的每日科技新闻的集合网站，由 AI agent 在后面维护整理。【看了下还挺有意思的】 #AI
「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。
这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。
-- 《突然间我懂了软件》」
我说我忘掉了什么
科技爱好者周刊（第 286 期）：蓝色指示灯的解决方案
1. 网络推送揭秘（英文） 📓 作者写了一个简单的实现，解释渐进式 Web 应用程序的网络推送（Web Push），即怎么向用户推送通知。
2. 、VisActor 🧰 一个字节出品的前端数据可视化解决方案，分成图表库 VChart 和表格库 VTable。 #组件库
3. h5player for tampermonkey 🧰 一个油猴脚本，为 H5 视频网站增强功能（多级播放速度、截图、画中画、调节亮度、饱和度、对比度等），支持各大主流视频网站。
4. UShare 🧰 一款生成代码和文本分享卡片的网页工具，可以设定字体和字型大小。
5. Vue DevTools Next 🧰 Vue 官方开发者工具的下一个迭代，旨在增强 Vue 开发者体验。 #vue
6. yft-design 🧰 基于 fabric.js 的名片编辑应用。
7. ant-codeAI 🧰 通过 OpenAI、Gemini 等模型，生成 Web（React，Vue，Tailwind CSS）和 native（react native）代码。 #AI
8. Read Copilot 🧰 一个苹果设备的阅读器 App，支持 RSS 和 Read It Later 功能，并可以用 AI 生成总结、文章大纲和翻译。 #rss
9. vscode-common-intellisense 🧰 VS Code 插件，为主流的前端框架提供代码提示（intellisense）。 #vscode
10. Yazi 🧰 一款运行在终端里面的文件管理器，跨平台，支持图片预览，使用 Rust 语言开发，速度快。
11. 齐思 🧰 一个中文的每日科技新闻的集合网站，由 AI agent 在后面维护整理。【看了下还挺有意思的】 #AI
「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。
这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。
-- 《突然间我懂了软件》」
chatgpt-vscode 支持官方的ChatGPT API / GPT 3.5 Turbo
GitHub地址：https://github.com/gencay/vscode-chatgpt
🏷 TAG #AI #vscode #插件
📢 Channel @opencfdchannel
👥 Group @open_source_community
GitHub地址：https://github.com/gencay/vscode-chatgpt
🏷 TAG #AI #vscode #插件
📢 Channel @opencfdchannel
👥 Group @open_source_community
打算将这里作为前端学习及日常分享的一个频道，偶尔也会分享自己的一些见闻，有自己觉得写的还不错的博文也会发在这里~
Gitbook 前端学习记录：https://book.cosine.ren/
个人博客：
xLog 👉 x.cosine.ren
Hexo 👉 https://ysx.cosine.ren
RSS订阅📢 https://x.cosine.ren/feed/xml
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #图
#前端 #javascript #css #tailwind #react #node #typescript #工程化 #阮一峰的科技周刊 #chatgpt #rss #vscode #web3 #新标准 #wasm
Gitbook 前端学习记录：https://book.cosine.ren/
个人博客：
xLog 👉 x.cosine.ren
Hexo 👉 https://ysx.cosine.ren
RSS订阅📢 https://x.cosine.ren/feed/xml
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #图
#前端 #javascript #css #tailwind #react #node #typescript #工程化 #阮一峰的科技周刊 #chatgpt #rss #vscode #web3 #新标准 #wasm
book.cosine.ren
前言及目录 | 前端学习记录
