Now vibe coding, so learning hammer FE ?
#AI #开发工具 自然语言交互、数据提取、断言验证、Chrome 插件、YAML 脚本、Puppeteer 集成、Playwright 集成、自定义模型、开源模型、通用模型、可视化报告、调试 Playground、数据安全、开源免费、JavaScript 集成

https://midscenejs.com/zh/index.html
Midscenejs
Midscene.js - joyful automation by AI - (AI UI Automation, AI Testing, Computer Use, Browser Use, Android Use)
AI UI Automation, AI Testing, Computer Use, Browser Use, Android Use. It offers JavaScript SDK, Chrome extension, and support for scripting in YAML.
AI 开发工具
https://mp.weixin.qq.com/s/m4-RgmN96KgeuzqD65dFqA

### CSS 新特性
- Anchor Positioning（锚点定位）
- CSS 动态定位
- CSS 候补位置

### 核心属性
- anchor-name
- position-anchor
- anchor()
- anchor-size()
- position-try-fallbacks
- @position-try

### 功能实现
- Popover 功能
- 智能边界处理
- 动态位置调整
- 锚点定位

### 工具与库
- Chrome 125
- Popper.js
- Tippy.js
- floating-ui

### 其他
- 视口边界检测
- 滚动事件处理
- 动态布局优化
- CSS 回退策略
Weixin Official Accounts Platform
浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
锚点连接+位置策略=自适应布局！再复杂的关联定位也能轻松表达。让定位逻辑回归样式层！
#原理 #文章 7分钟了解函数柯里化

https://www.yazeedb.com/posts/deeply-understand-currying-in-7-minutes
原理 文章
#TS 一个类型安全的fetch包装

https://github.com/L-Blondy/up-fetch
GitHub
GitHub - L-Blondy/up-fetch: Advanced fetch client builder
GitHub - L-Blondy/up-fetch: Advanced fetch client builder
Advanced fetch client builder. Contribute to L-Blondy/up-fetch development by creating an account on GitHub.
TS
#CSS 学习 #tailwind 布局

https://layoutsfortailwind.lalokalabs.dev/
layoutsfortailwind.lalokalabs.dev
LaLoka Layouts for Tailwind CSS
LaLoka Layouts for Tailwind CSS
A collection of useful Tailwind CSS layouts and patterns
CSS tailwind
#AI 基于TS的AI开发框架

https://github.com/mastra-ai/mastra
GitHub
GitHub - mastra-ai/mastra: The TypeScript AI agent framework. ⚡ Assistants, RAG, observability. Supports any LLM: GPT-4, Claude…
GitHub - mastra-ai/mastra: The TypeScript AI agent framework. ⚡ Assistants, RAG, observability. Supports any LLM: GPT-4, Claude…
The TypeScript AI agent framework. ⚡ Assistants, RAG, observability. Supports any LLM: GPT-4, Claude, Gemini, Llama. - mastra-ai/mastra
AI
#CSS #文章 解密css选择器之 :has(:not) vs :not(:has)

https://polypane.app/blog/decoding-css-selectors-has-not-vs-not-has/#main
polypane.app
Decoding CSS Selectors: :has(:not) vs :not(:has) | Polypane
Decoding CSS Selectors: :has(:not) vs :not(:has) | Polypane
CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…
CSS 文章
#文章 #浏览器 怎么构建扩展

https://chenhuijing.com/blog/learning-web-extensions/
Chen Hui Jing
Learning web extensions
Learning web extensions
I blinked and the first month of 2025 went by. NGL, 2024 was…challenging. So forgive me for choosing to just shut down during the end of last year. But I did…
文章 浏览器
#React 动效组件集合

https://www.reactbits.dev/
React Bits
React Bits
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
React
#React 组件库 9ui是基于baseUI的tailwind组件库，熟悉shadcn的话，一看就是熟悉的味道

https://www.9ui.dev/
9ui
9ui
Beautiful, customizable components built with Base UI and Tailwind CSS.
React
#开源 沉浸式翻译的开源替代

https://github.com/Bistutu/FluentRead
GitHub
GitHub - Bistutu/FluentRead: Open Immersive Translate. A revolutionary open-source browser translation plugin that enables everyone…
GitHub - Bistutu/FluentRead: Open Immersive Translate. A revolutionary open-source browser translation plugin that enables everyone…
Open Immersive Translate. A revolutionary open-source browser translation plugin that enables everyone to have a native-like reading experience. 开源的沉浸式翻译，一款革命性的浏览器翻译插件，让所有人都能够拥有母语般的阅读体验。 - Bistutu/...
开源
#React react-hook-form现在支持上面提到的标准schema。

https://github.com/react-hook-form/resolvers/releases/tag/v4.0.0
GitHub
Release v4.0.0 · react-hook-form/resolvers
Release v4.0.0 · react-hook-form/resolvers
4.0.0 (2025-02-10)
Bug Fixes

add support for names option (#713) (985c48d)
arktypeResolver: resolve type error when schema is defined from an ArkType scope (#732) (3233667)
handle raw: true option...
React
#开源 标准约束 standard schema 这个一定要了解，未来检验肯定会走向统一。

https://github.com/standard-schema/standard-schema
GitHub
GitHub - standard-schema/standard-schema: A standard interface for TypeScript schema validation libraries
A standard interface for TypeScript schema validation libraries - standard-schema/standard-schema
开源
#开源 自定义解释器的工具库

https://github.com/ohmjs/ohm
GitHub
GitHub - ohmjs/ohm: A library and language for building parsers, interpreters, compilers, etc.
GitHub - ohmjs/ohm: A library and language for building parsers, interpreters, compilers, etc.
A library and language for building parsers, interpreters, compilers, etc. - ohmjs/ohm
开源
#CSS style observer一个可以监听样式变化的库

https://observe.style/
observe.style
Style Observer
Style Observer
A robust, production-ready library to observe CSS property changes.
CSS
#React #CSS 动画集合组件

https://www.reactbits.dev/
React Bits
React Bits
An open source collection of high quality, animated, interactive & fully customizable React components for building stunning, memorable user interfaces.
React CSS
#React 已经正式废弃的CRA，现在可以使用CTA😊

https://github.com/TanStack/create-tsrouter-app
GitHub
GitHub - TanStack/create-tsrouter-app: Create-tsrouter-app is drop-in replacement for create-react-app that builds TanStack Router…
GitHub - TanStack/create-tsrouter-app: Create-tsrouter-app is drop-in replacement for create-react-app that builds TanStack Router…
Create-tsrouter-app is drop-in replacement for create-react-app that builds TanStack Router based SPA applications - TanStack/create-tsrouter-app
React
Before
After
Back to Top