前端 | 折腾啥

NameThatUI: UI 元素可视化词典• 用自然语言描述 UI 元素，获取标准名称、API 符号和可直接粘贴的 AI 编程提示词• 覆盖 Web 和 macOS 平台，包含 Carousel、Bento Grid、Masonry、Slider 等数十种组件• 支持 Name That Vibe 功能，帮你识别 UI 风格名称

Mon, 27 Jul 2026 13:04:50 GMT

NameThatUI: UI 元素可视化词典

• 用自然语言描述 UI 元素，获取标准名称、API 符号和可直接粘贴的 AI 编程提示词

• 覆盖 Web 和 macOS 平台，包含 Carousel、Bento Grid、Masonry、Slider 等数十种组件

• 支持 Name That Vibe 功能，帮你识别 UI 风格名称

https://namethatui.com

合集群组恰饭联系推广

#UI设计 #前端开发 #macOS #Web #AI

Memos 魔改记录最近想重新整一下自建存一点碎碎念之类的试了一些感觉都不太好用先用 memos 吧 memoMemos 问题也有点多…先留个备忘可能还得换 Memos 魔改记录服务器合集合集群组恰饭联系推广#Memos #前端 #JavaScript #CSS #HTML

Wed, 15 Jul 2026 02:01:15 GMT

Memos 魔改记录

最近想重新整一下自建存一点碎碎念之类的
试了一些感觉都不太好用
先用 memos 吧

~~memo~~

Memos 问题也有点多…

先留个备忘可能还得换

Memos 魔改记录

服务器合集合集群组恰饭联系推广

#Memos #前端 #JavaScript #CSS #HTML

Browser AI Assistant: 面向 Chrome / Edge 的浏览器侧边栏 AI 工作台• 基于当前网页、多标签页、图片、Network 请求、JS 源码和运行时信息组织 AI 上下文• 支持多模型渠道、Tavily 搜索、提示词管理、隐私会话和多端同步• 提供受控浏览器自动化、接口分析、Source Map 分析、请求重放和会话导出能力

Sat, 11 Jul 2026 12:59:58 GMT

Browser AI Assistant: 面向 Chrome / Edge 的浏览器侧边栏 AI 工作台

• 基于当前网页、多标签页、图片、Network 请求、JS 源码和运行时信息组织 AI 上下文

• 支持多模型渠道、Tavily 搜索、提示词管理、隐私会话和多端同步

• 提供受控浏览器自动化、接口分析、Source Map 分析、请求重放和会话导出能力

https://github.com/AhYi8/browser-ai-assistant

合集群组恰饭联系推广

#浏览器插件 #AI助手 #Chrome #Edge #前端调试 #Web自动化 #GitHub

3:12

Media is too big

VIEW IN TELEGRAM

#前端 #新动态PocketJS：在 32MB 内存 PSP 上跑 Modern Web 的极致跨平台 UI 框架：作者分享了如何利用 QuickJS、SolidJS/Vue Vapor 和 Claude 辅助，将现代 Web 框架塞进老掌机并跑满 60 帧的硬核经历

Tue, 07 Jul 2026 01:59:58 GMT

Forwarded from cosine - 前端人の日常频道

#前端 #新动态
PocketJS：在 32MB 内存 PSP 上跑 Modern Web 的极致跨平台 UI 框架：作者分享了如何利用 QuickJS、SolidJS/Vue Vapor 和 Claude 辅助，将现代 Web 框架塞进老掌机并跑满 60 帧的硬核经历。

AI 摘要：
• 极致的硬件压榨：PocketJS 将 QuickJS 移植到仅有 32MB 内存的索尼 PSP 上，结合 SolidJS / Vue Vapor 和编译期 Tailwind 样式引擎，在仅占 8MB 内存的情况下实现了 60fps 流畅动画。
• Claude 拯救陈年老坑：该项目起源于作者 5 年前因初始化崩溃而搁置的 PSP-JS，这次在 Claude 协助下修掉了最后 3 个底层 Bug 成功点亮屏幕，作者感叹当年离成功只差一步。
• React 惨遭淘汰：在 PSP 极其受限的内存下，原生 React 连首屏 JS_Eval 都跑不通直接出局；而 SolidJS 和 Vue Vapor 表现惊艳，能完美卡进 16ms 的帧预算，成为 PocketJS 的主力支持框架。

🧵 讨论串 • FixupX

Yifeng "Evan" Wang (@ewind_dev)

非常激动地和大家分享，在 Fable 加持下，我终于做出了多年来设想中最极致的跨平台 UI 框架，这就是 PocketJS！

将 QuickJS 移植至内存仅 32MB 的索尼 PSP，结合标准版 SolidJS 和 Vue Vapor，配合编译期 tailwind 样式引擎，实现了 8MB 内存下 60fps 的流畅动画！

来拥抱裸金属 Modern Web 吧！

引用 PocketJS (@pocket_js)

Introducing PocketJS 🕹️

import { createSignal…

NodeGet: 高自由度的下一代服务器监控与管理工具• 基于 Token 的细粒度权限体系，适合多角色协作和复杂运维场景• 通过 KV 存储、JS Worker 和模块化插件机制持续扩展能力，方便按需构建自定义探针方案• 采用 Rust、PostgreSQL 或 SQLite、WebSocket 与 JSON-RPC 技术栈，支持前后端分离和 Agent 原生多 Server 管理

Fri, 01 May 2026 05:48:25 GMT

NodeGet: 高自由度的下一代服务器监控与管理工具

• 基于 Token 的细粒度权限体系，适合多角色协作和复杂运维场景

• 通过 KV 存储、JS Worker 和模块化插件机制持续扩展能力，方便按需构建自定义探针方案

• 采用 Rust、PostgreSQL 或 SQLite、WebSocket 与 JSON-RPC 技术栈，支持前后端分离和 Agent 原生多 Server 管理

https://nodeget.com

合集群组恰饭联系推广

#服务器监控 #运维工具 #探针系统 #前后端分离 #Rust #WebSocket #JSONRPC #NodeGet

AI Website Cloner Template: 用 Claude Code 自动重建高还原度网站克隆模板• 输入目标 URL 后执行 /clone-website，即可通过 Chrome MCP 自动完成页面侦察、设计 Token 提取、资源下载与组件规格生成• 基于 Next.js 16、React 19、TypeScript 与 Tailwind CSS v4 搭建，适合快速产出可继续二次开发的高保真页面• 采用并行 Agent + Git worktree 架构，按区块拆分构建并自动合并，同时支持视觉比对校验，减少手工还原成本

Thu, 23 Apr 2026 10:15:22 GMT

AI Website Cloner Template: 用 Claude Code 自动重建高还原度网站克隆模板

• 输入目标 URL 后执行 /clone-website，即可通过 Chrome MCP 自动完成页面侦察、设计 Token 提取、资源下载与组件规格生成

• 基于 Next.js 16、React 19、TypeScript 与 Tailwind CSS v4 搭建，适合快速产出可继续二次开发的高保真页面

• 采用并行 Agent + Git worktree 架构，按区块拆分构建并自动合并，同时支持视觉比对校验，减少手工还原成本

https://github.com/JCodesMore/ai-website-cloner-template

合集群组恰饭联系推广

#AI #ClaudeCode #网站克隆 #前端开发 #Nextjs #TypeScript #TailwindCSS #GitHub #自动化工作流

wterm: 面向 Web 的高性能终端模拟器• 基于 Zig + WASM 构建核心，终端解析能力轻量且接近原生性能• 采用 DOM 渲染，天然支持文本选择、复制粘贴、浏览器查找和无障碍访问• 提供 WebSocket 传输、React 组件、自动尺寸适配与备用屏支持，适合远程终端和嵌入式开发场景

Fri, 17 Apr 2026 00:02:18 GMT

wterm: 面向 Web 的高性能终端模拟器

• 基于 Zig + WASM 构建核心，终端解析能力轻量且接近原生性能

• 采用 DOM 渲染，天然支持文本选择、复制粘贴、浏览器查找和无障碍访问

• 提供 WebSocket 传输、React 组件、自动尺寸适配与备用屏支持，适合远程终端和嵌入式开发场景

https://github.com/vercel-labs/wterm

合集群组恰饭联系推广

#Web终端 #终端模拟器 #WASM #Zig #React #WebSocket #开发工具 #前端基础设施

AntV Infographic: 用声明式语法让信息图栩栩如生• AI 友好语法，支持流式生成与渲染 • 内置约200套模板，开箱即用快速构建专业信息图 • 高质量 SVG 输出，兼顾视觉效果与可编辑性

Wed, 25 Mar 2026 00:04:28 GMT

AntV Infographic: 用声明式语法让信息图栩栩如生

• AI 友好语法，支持流式生成与渲染
• 内置约200套模板，开箱即用快速构建专业信息图
• 高质量 SVG 输出，兼顾视觉效果与可编辑性

https://github.com/antvis/infographic

#信息图 #可视化 #AI #前端 #AntV #GitHub

豆腐 ( Doufu ): iPhone 上的本地 HTML 项目查看与编辑工具老朋友 App 君的新作品, 简单说就是 AI 自动写 Web AppTestFlight 亲友限定内测了一段时间现在上架了你可以直接在设备上创建、管理和预览 HTML、CSS 和 JavaScript 项目每个项目运行在沙盒化的本地服务器中

Thu, 19 Mar 2026 15:46:52 GMT

豆腐 ( Doufu ): iPhone 上的本地 HTML 项目查看与编辑工具

老朋友 App 君的新作品, 简单说就是 AI 自动写 Web App

TestFlight 亲友限定内测了一段时间现在上架了

你可以直接在设备上创建、管理和预览 HTML、CSS 和 JavaScript 项目

每个项目运行在沙盒化的本地服务器中

https://apps.apple.com/app/id6760194187

#iOS #AI #前端 #Web #App #开发工具 #LLM

App Store

Doufu App - App Store

Download Doufu by ZIZICICI LIMITED on the App Store. See screenshots, ratings and reviews, user tips, and more apps like Doufu.

#优质博文 #JavaScript #新特性 #前端 #错误处理Error chaining in JavaScript: cleaner debugging with Error.cause

Sat, 15 Nov 2025 04:03:40 GMT

Forwarded from cosine - 前端人の日常频道

#优质博文 #JavaScript #新特性 #前端 #错误处理
Error chaining in JavaScript: cleaner debugging with Error.cause

AI 摘要：本文介绍了在 JavaScript (ES2022) 中引入的 Error.cause 属性，展示它如何让错误处理更具可追溯性。作者 Matt Smith 通过实例说明了传统错误包裹的缺陷，以及 Error.cause 在保持原始堆栈信息、改进调试体验和测试断言方面的优势。最终总结出一套现代错误链最佳实践，帮助开发者构建更清晰、更稳健的错误追踪体系。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 传统错误处理的问题
• 层层调用的代码容易丢失原始错误信息；
• 以字符串拼接错误信息会破坏堆栈和错误类型；
• 导致调试困难，追踪难度高。

2. 引入 Error.cause 的改进
• 通过 new Error(message, { cause }) 保留原始错误；
• 可同时访问顶层与底层堆栈信息；
• cause 属性为非枚举属性，不污染日志或循环输出；
• 与 message、stack 一样保持一致的行为。

3. 实践与代码演示
• 示例：从 JSON.parse 到自定义函数的错误传递；
• 在日志中手动输出 err.cause 获取完整上下文；
• 适合层次式系统（如服务嵌套调用）排查问题。

4. 历史背景与 cause 出现前的替代方案
• 旧方案包括自定义字段 .originalError、字符串拼接等；
• 这些方式不统一且容易破坏原始错误结构；
• 标准化的 cause 提供更安全一致的机制。

5. 自定义错误类的支持
• 在自定义类中通过 super(message, { cause }) 传递原因；
• 适用 ES2022+ 环境即可直接使用；
• 对 TypeScript 用户，需在 tsconfig.json 中启用 "target": "es2022" 与 "lib": ["es2022"]。

6. 在测试中的应用
• 测试断言可直接验证 err.cause 类型；
• 提升测试可读性与准确性。

7. 实用技巧与注意事项
• 浏览器默认不输出层级错误链，须手动打印；
• 不建议过度使用错误链，避免干扰阅读；
• 可递归打印完整错误链（logErrorChain 与 logFullErrorChain 示例）；
• 实践场景：数据库异常→业务异常→服务异常的多层错误追踪。

8. 环境支持与现代用法总结
• 支持于现代浏览器与运行环境（Chrome 93+、Node.js 16.9+、Deno、Bun 等）；
• 推荐实践：
• ✅ 使用 Error(message, { cause })
• ✅ 支持内建与自定义错误类型
• ✅ 改善日志和调试体验
• ✅ 对 TypeScript 进行正确配置
• ⚠️ 记得手动输出或递归追踪错误链。

author Matt Smith

Allthingssmitty

Error chaining in JavaScript: cleaner debugging with Error.cause - Matt Smith

Use JavaScript's 'cause' property to chain errors, preserve context, and simplify debugging. Cleaner stack traces, better test assertions.

#优质博文 #JavaScript #前端 #新特性 #浏览器好东西

Wed, 29 Oct 2025 01:03:19 GMT

Forwarded from cosine - 前端人の日常频道

#优质博文 #JavaScript #前端 #新特性 #浏览器
好东西。
URLPattern is now Baseline Newly available

AI 摘要：介绍了已进入 Baseline 的新浏览器功能 URLPattern API，它为 URL 匹配和路由提供了标准、简洁且高性能的原生解决方案。过去开发者需使用复杂的正则表达式或第三方库来解析和提取 URL 参数，而 URLPattern 使得这些操作更清晰、可维护且无需额外依赖。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. URLPattern 基础与核心概念
• 介绍 URLPattern API 的推出背景：取代传统正则匹配与第三方路由库。
• 提供新 URLPattern 接口，可通过 .test() 与 .exec() 操作直接匹配并提取参数。

2. 基本 URL 模式匹配
• 对比旧方法（URL + 正则）与新 API 的简化写法。
• 展示匹配 /users/:id 的例子，体现代码可读性和简洁性。

3. 提取动态参数（Dynamic Parameters）
• 传统方法依赖匿名的正则捕获组，易出错。
• URLPattern 支持命名参数，可通过结构化对象获取（如 result.pathname.groups）。
• 示例：提取书籍分类 category 与 id。

4. 复合匹配（Compose Multipart Matches）
• 传统方式需多处判断主机名与路径。
• URLPattern 原生支持同时匹配多个部分，例如 hostname + pathname。
• 示例：匹配 .cdn.com 下的 /images/ 文件。

5. 减少项目依赖（Project Dependencies）
• URLPattern 是内置能力，无需加载第三方库，减少 bundle 体积与维护成本。
• 使用浏览器原生实现，跨引擎一致且性能更优。

6. 深度用法详解（Detailed Usage）
• 多种典型场景：
• 路径匹配与参数提取：示例 /products/:category/:id 展示 .test() 与 .exec() 双用法。
• 匹配子域名与版本号：支持在 hostname 层定义变量如 :subdomain.myapp.com，适用于多子域架构。
• 通配符与正则表达式结合：通过 * 和嵌入式正则增强匹配灵活度，如 /users/:userId(d+)/assets/*.(jpg|png|gif)。

7. 实战示例：Service Worker 路由
• 利用 URLPattern 拦截 fetch 事件，根据路径实行不同缓存策略。
• 示例：
• /images/* 采用缓存优先；
• /api/* 使用网络优先。
• 显示该 API 在渐进式 Web 应用（PWA）中的现实意义。

8. 结语与扩展阅读
• URLPattern 提升代码可维护性，简化路由逻辑。
• 推荐进一步查阅 MDN Web Docs 了解完整参考。

author Jay Rungta

web.dev

URLPattern is now Baseline Newly available | Blog | web.dev

URLPattern became Baseline Newly available as of September 15, 2025.

#React #组件库 #前端 #tailwind #动画 #开源挺不错的～ForgeUI ｜官网

Sun, 21 Sep 2025 01:04:14 GMT

Forwarded from cosine - 前端人の日常频道

#React #组件库 #前端 #tailwind #动画 #开源
挺不错的～
ForgeUI ｜官网

AI 摘要：ForgeUI 是一个基于 React 的实验性组件库，重点在于“动画优先”的设计理念，提供动画表单、动态卡片、闪烁文字等现代化 UI 组件，旨在帮助开发者快速实现富交互界面。其技术栈包括 Next.js、TypeScript、Tailwind CSS、shadcn/ui 和 Framer Motion。项目定位更像是作者的“个人实验室”，供开发者参考与取用，而非正式社区驱动的开源产品。

author Aman Shakya

使用官方 Sub-Store 前端连接非本地 HTTP 后端Chrome 如图 1chrome://settings/content/insecureContentEdge 如图 2edge://settings/privacy/sitePermissions/allPermissions/insecureContent添加 sub-store.vercel.app 即可有的浏览器可能有 bug 可尝试填写

Tue, 16 Sep 2025 01:05:02 GMT

使用官方 Sub-Store 前端连接非本地 HTTP 后端

Chrome 如图 1
chrome://settings/content/insecureContent

Edge 如图 2
edge://settings/privacy/sitePermissions/allPermissions/insecureContent

添加 sub-store.vercel.app 即可
有的浏览器可能有 bug 可尝试填写 https://sub-store.vercel.app

Sub-Store 合集频道资源合集恰饭推荐群组

#自建 #前端 #Sub-Store #SubStore #后端 #不安全 #混合内容

#分享 #GitHub #前端Liquid Glass Vue ，一个基于 Vue3 + Vite 的 WebGL 液体玻璃折射特效项目🌟 实时折射特效 - 使用 WebGL2 和 SDF 技术实现的液体玻璃效果🎮 交互式控制 - 实时调节折射参数和视觉效果📱 响应式设计 - 支持桌面和移动设备🖼️ 自定义背景 - 支持上传自定义背景图片⚡ 高性能渲染 - 60fps 流畅动画还有一些其他实现Liquid Glass的整合

Mon, 16 Jun 2025 07:40:06 GMT

Forwarded from Link's Channel

#分享 #GitHub #前端

Liquid Glass Vue ，一个基于 Vue3 + Vite 的 WebGL 液体玻璃折射特效项目

🌟 实时折射特效 - 使用 WebGL2 和 SDF 技术实现的液体玻璃效果
🎮 交互式控制 - 实时调节折射参数和视觉效果
📱 响应式设计 - 支持桌面和移动设备
🖼️ 自定义背景 - 支持上传自定义背景图片
⚡ 高性能渲染 - 60fps 流畅动画

还有一些其他实现Liquid Glass的整合

前端 | 折腾啥

Memos 魔改记录最近想重新整一下自建存一点碎碎念之类的试了一些 感觉都不太好用先用 memos 吧 memoMemos 问题也有点多…先留个备忘 可能还得换 Memos 魔改记录 服务器合集 合集 群组 恰饭 联系推广#Memos #前端 #JavaScript #CSS #HTML

#前端 #新动态PocketJS：在 32MB 内存 PSP 上跑 Modern Web 的极致跨平台 UI 框架：作者分享了如何利用 QuickJS、SolidJS/Vue Vapor 和 Claude 辅助，将现代 Web 框架塞进老掌机并跑满 60 帧的硬核经历

AntV Infographic: 用声明式语法让信息图栩栩如生• AI 友好语法，支持流式生成与渲染 • 内置约200套模板，开箱即用快速构建专业信息图 • 高质量 SVG 输出，兼顾视觉效果与可编辑性

#优质博文 #JavaScript #新特性 #前端 #错误处理Error chaining in JavaScript: cleaner debugging with Error.cause

#优质博文 #JavaScript #前端 #新特性 #浏览器好东西

#React #组件库 #前端 #tailwind #动画 #开源挺不错的～ForgeUI ｜ 官网

使用官方 Sub-Store 前端连接非本地 HTTP 后端Chrome 如图 1chrome://settings/content/insecureContentEdge 如图 2edge://settings/privacy/sitePermissions/allPermissions/insecureContent添加 sub-store.vercel.app 即可有的浏览器可能有 bug 可尝试填写

Memos 魔改记录最近想重新整一下自建存一点碎碎念之类的试了一些感觉都不太好用先用 memos 吧 memoMemos 问题也有点多…先留个备忘可能还得换 Memos 魔改记录服务器合集合集群组恰饭联系推广#Memos #前端 #JavaScript #CSS #HTML

#React #组件库 #前端 #tailwind #动画 #开源挺不错的～ForgeUI ｜官网