Now vibe coding, so learning hammer FE ?
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
#TS 在 Node.js 项目中设置和使用 TypeScript。它从创建项目开始，逐步指导如何安装和配置 TypeScript，设置源代码目录和入口文件，并通过工具如 tsx 和 dotenv 实现高效的开发和环境变量管理。

https://www.robinwieruch.de/typescript-node-js/
www.robinwieruch.de
TypeScript in a Node.js Project
TypeScript in a Node.js Project
Learn how to set up a TypeScript Node.js project from scratch with this step-by-step guide. Configure TypeScript, install dependencies, manage environment variables, and streamline development with tsx ...
TS
Before
After
Back to Top