Now vibe coding, so learning hammer FE ?
#React #文章 非受控或受控：这只是视角的问题？设计一个既可以受控也可以不受控的自定义组件的思路 - 内部状态控制 vs 外部状态控制
https://buildui.com/posts/uncontrolled-vs-controlled-a-matter-of-perspective
https://buildui.com/posts/uncontrolled-vs-controlled-a-matter-of-perspective
Build UI
Uncontrolled or controlled: A matter of perspective
#CSS #文章 关于 timeline-scope 的实际应用和落地；不过多浏览器兼容仍然有待发展。
https://frontendmasters.com/blog/scoped-scroll-timelines
https://frontendmasters.com/blog/scoped-scroll-timelines
Frontend Masters
(Up-) Scoped Scroll Timelines
I keep learning little details about scroll-driven animations!
![OpenAI 官方提示工程指南 [译]](/static/https://cdn4.telesco.pe/file/O3qmbKNmqQfb3oItCHMBksRH3WRj897NLfvWol7DnMuRy7hTDoYAbC3yv6V-ptDEWe0x5UxWMcHph7ksGrQntnkjCo-b4RaUgMQOVd3NWjHO_aaN9JWT9XKK8l4FwaX7s9Hh5YN3Z8kQcEtZZIgMnbHgaG_GGqZ3J84Qlk0GsWYQftEyCI9oaxWylnRL5DAd1oiDRi2mOBxV6MMuamhT4aI-nKbbgNCWVf2D4FFxBWn1zHyUm2dH54CjK3nXJj9oJVybz90IXIj8aVpfQcI6e5TDMmI5T2UZy_VzBM82VURhT-YtyZAeYtKNwudNvmniuvoisq_SxkfdyY-DIAVATg.jpg)
#文章 #CSS 你不知道的 overflow: clip 实战应用和工作原理。
https://ishadeed.com/article/overflow-clip/
https://ishadeed.com/article/overflow-clip/
Ishadeed
Overflow Clip
Learn how overflow: clip works in CSS.
#原理 #浏览器 #文章 v8 如何在处理动态添加的属性（slow properties）的同时提供快速的属性（fast properties）访问。
https://v8.dev/blog/fast-properties
https://v8.dev/blog/fast-properties
#开源 #网页工具 多框架比较学习组件写法；对许多不同框架（如 React、Vue、Svelte、Angular、Qwik、Solid.js 等）进行了长期比较。
https://component-party.dev/
https://component-party.dev/
Component Party
Compare JavaScript frameworks side-by-side: React, Vue, Angular, Svelte, Solid.js, and more. See syntax differences, features, and code examples for web development frameworks.
#文章 10个JavaScript搜索引擎优化（SEO）技巧
https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/
https://thenewstack.io/top-10-javascript-seo-tricks-every-developer-should-know/
#CSS #文章 当设置单个CSS属性时，setProperty性能更优；而设置多个属性时，setAttribute更快。此外，setAttribute不验证值，对于需要设置自定义属性或错误值时非常有用。
重点知识关注两者的解析和处理流程的差异。
https://blog.frontend-almanac.com/style-setproperty-vs-setattribute
重点知识关注两者的解析和处理流程的差异。
https://blog.frontend-almanac.com/style-setproperty-vs-setattribute
Teletype
style.setProperty vs setAttribute
Which is faster, element.style.setProperty(property, value) or element.setAttribute(\'style\', \'property: value\')? Let's delve into it.
#开源
- framer motion 独立开源，适配 js 和 react：https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion
- tailwindcss 4.0 不用 tailwind.config 文件了：https://www.luisball.com/blog/shadcn-ui-with-tailwind-v4
- framer motion 独立开源，适配 js 和 react：https://motion.dev/blog/framer-motion-is-now-independent-introducing-motion
- tailwindcss 4.0 不用 tailwind.config 文件了：https://www.luisball.com/blog/shadcn-ui-with-tailwind-v4
motion.dev
Framer Motion is now independent, introducing Motion - Motion Blog
Framer Motion is now independent. Introducing Motion, a new animation library for React and all JavaScript environments. Here's what it means for you.
#文章 #TS 关于 tsconfig 各个配置项需要了解的：
- tsconfig 小抄：https://www.totaltypescript.com/tsconfig-cheat-sheet
- 你应该使用基本的 tsconfig 选项：https://www.totaltypescript.com/tsconfig-cheat-sheet
- tsconfig 小抄：https://www.totaltypescript.com/tsconfig-cheat-sheet
- 你应该使用基本的 tsconfig 选项：https://www.totaltypescript.com/tsconfig-cheat-sheet
Total TypeScript
The TSConfig Cheat Sheet
Learn the essential TypeScript configuration options and create a concise tsconfig.json file for your projects with this helpful cheatsheet.
#文章 #React useSyncExternalStore是一个强大的工具，能够同步应用状态与LocalStorage等外部数据源，使得React应用能够处理跨多个组件或实例的共享数据。
https://www.56kode.com/posts/using-usesyncexternalstore-with-localstorage
https://www.56kode.com/posts/using-usesyncexternalstore-with-localstorage
56Kode
Example of Using useSyncExternalStore with LocalStorage | 56kode - Web Development Blog on React & TypeScript
Learn how to efficiently synchronize application state with external data sources like LocalStorage using React's useSyncExternalStore hook, with a practical example and detailed explanation.
#文章 #React 关于使用 TS 声明条件类型联动的方式（type discrimination）。
场景：根据某个类型的值，约束其他特定的属性类型。
https://elanmed.dev/blog/conditional-props-using-type-discrimination#second-attempt-type-discrimination
场景：根据某个类型的值，约束其他特定的属性类型。
https://elanmed.dev/blog/conditional-props-using-type-discrimination#second-attempt-type-discrimination
