打算将这里作为前端学习及日常分享的一个频道，偶尔也会分享自己的一些见闻，有自己觉得写的还不错的博文也会发在这里~
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
前言及目录 | 前端学习记录
Forwarded from 开源社区
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
Visualstudio
ChatGPT [deprecated] - Visual Studio Marketplace
Extension for Visual Studio Code - Unofficial VS Code - ChatGPT integration
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #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
「软件需要有人通盘理解它的运作机制，所以单个工程师有可能比一个职业开发团队造出更好的产品。因为单个工程师花时间，完整理解了他要构建的软件，而职业开发团队总是从一个项目转移到另一个项目。
这也是为什么接手不熟悉的项目，比重建该项目要困难得多，以及为什么软件外包的质量总是如此糟糕。
-- 《突然间我懂了软件》」
PQVST
Demystifying Web Push Notifications
For my recent One Day Build: Expense Tracking project I wanted to enable notifications in a progressive web app. ChatGPT struggled to generate any good code for me, and I also struggled to find any minimal clear explanations online.
#阮一峰的科技周刊 #前端 #优质博文 #资源推荐 #tools
科技爱好者周刊（第 292 期）：所有代码都是技术债
1. 为什么我选择 Tauri 而不是 Electron（英文） 📓 作者本来使用 Electron 开发跨平台桌面应用，后来改成了 Tauri。本文讲述了原因，以及他的感受。 #跨端 #electron #tauri 【好文】
2. text-wrap 的换行控制（英文） 📓 长文本的自动换行，由 CSS 的 text-wrap 属性控制。本文讨论如何使用这个属性，让标题产生更美观的自动换行。 #css
3. Ente 🧰 一个云相册软件，Google Photos 和 iCloud Photos 的替代品，以前是闭源产品，最近刚刚开源。它的主要特点是提供端对端加密。其他的云相册软件，还有 Immich 和 PhotoPrism。
4. Earthly 🧰 一个开源的 CI/CD 框架，可以在本地架设自动构建服务。
5. 日语短文排版小工具 🧰 一个在线工具，生成漂亮的日文排版，支持横竖版式、自动假名标注、深浅两种主题、字体配置、高亮、下划线、字体等。（@miusuncle 投稿）
6. Web-Check 🧰 开源的网站分析工具, 可以分析网站的 IP 信息、SSL 链、DNS 记录、Cookie、域名信息、服务器位置、网站性能等，查看 Demo。
7. ImageTools 🧰 AI 一键抠图（去除背景）的在线工具。（@handsometong 投稿） #AI
8. zz-plan 🧰 甘特图/横道图的在线制作工具。（@lizhichao 投稿）
9. Rsdoctor 🧰 一个 JS 构建器的分析工具，能够查看构建产物的模块关系，并分析构建器对代码的更改，支持 Rspack 和 Webpack。（@easy1090 投稿）
10. ast-grep VSCode 🧰 一个 VSCode 插件，是一种结构搜索/替换工具，可以更精确、更高效地搜索和替换代码元素。（@HerringtonDarkholme 投稿）
#vscode 【如图，还挺方便的】
科技爱好者周刊（第 292 期）：所有代码都是技术债
1. 为什么我选择 Tauri 而不是 Electron（英文） 📓 作者本来使用 Electron 开发跨平台桌面应用，后来改成了 Tauri。本文讲述了原因，以及他的感受。 #跨端 #electron #tauri 【好文】
2. text-wrap 的换行控制（英文） 📓 长文本的自动换行，由 CSS 的 text-wrap 属性控制。本文讨论如何使用这个属性，让标题产生更美观的自动换行。 #css
3. Ente 🧰 一个云相册软件，Google Photos 和 iCloud Photos 的替代品，以前是闭源产品，最近刚刚开源。它的主要特点是提供端对端加密。其他的云相册软件，还有 Immich 和 PhotoPrism。
4. Earthly 🧰 一个开源的 CI/CD 框架，可以在本地架设自动构建服务。
5. 日语短文排版小工具 🧰 一个在线工具，生成漂亮的日文排版，支持横竖版式、自动假名标注、深浅两种主题、字体配置、高亮、下划线、字体等。（@miusuncle 投稿）
6. Web-Check 🧰 开源的网站分析工具, 可以分析网站的 IP 信息、SSL 链、DNS 记录、Cookie、域名信息、服务器位置、网站性能等，查看 Demo。
7. ImageTools 🧰 AI 一键抠图（去除背景）的在线工具。（@handsometong 投稿） #AI
8. zz-plan 🧰 甘特图/横道图的在线制作工具。（@lizhichao 投稿）
9. Rsdoctor 🧰 一个 JS 构建器的分析工具，能够查看构建产物的模块关系，并分析构建器对代码的更改，支持 Rspack 和 Webpack。（@easy1090 投稿）
10. ast-grep VSCode 🧰 一个 VSCode 插件，是一种结构搜索/替换工具，可以更精确、更高效地搜索和替换代码元素。（@HerringtonDarkholme 投稿）
#vscode 【如图，还挺方便的】
#前端 #插件推荐 #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.
👍1
#优质博文 #阮一峰的科技周刊 #前端 #在线网站 #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
#tools #vscode #插件 #hsl
最近用 shadcn 搭项目，这个插件挺好
shadcn Color Preview
AI 摘要：shadcn Color Preview 是一款 Visual Studio Code 插件，提供基于 shadcn 语法的 HSL 颜色预览功能。它可以在 CSS 文件中实时显示颜色预览，支持变量悬停查看详细颜色信息，并带有转换工具，帮助开发者更直观地处理 HSL 颜色。
最近用 shadcn 搭项目，这个插件挺好
shadcn Color Preview
AI 摘要：shadcn Color Preview 是一款 Visual Studio Code 插件，提供基于 shadcn 语法的 HSL 颜色预览功能。它可以在 CSS 文件中实时显示颜色预览，支持变量悬停查看详细颜色信息，并带有转换工具，帮助开发者更直观地处理 HSL 颜色。
❤2
#优质博文 #前端 #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
🥰1
#博客更新 #前端 #vscode #插件 #tools
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
2025 前端开发 vscode 常用插件推荐
终于写了，但是新增的插件其实也没多少 23333 大多数插件还是之前用的，一直好用。新增的工具倒是不少，但是应该会放另一篇文章里去，先去吃个萨莉亚再说，饿死我了！！
AI摘要：新增插件聚焦：WebGL（Shader）、Tailwind 工具链（高亮/文档）、国际化（i18n）、设计协作（Figma）。
核心工具保留：GitLens、ESLint/Prettier、Tailwind 生态插件。
效率提升：通过 CSV 处理、项目管理、注释翻译等插件优化工作流。
个性化选择：外观特效（如 Power Mode）按需启用。
作者备注：部分插件因转用 Cursor 编辑器或使用频率低而弃用，推荐列表基于实际开发场景筛选。
#优质博文 #前端 #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 应用的创新方法。
Mark's Dev Blog
The State of React and the Community in 2025
Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns
#优质博文 #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