锤子前端
- #软件 一个帮助快速打草稿原型设计，线条风格。可以看成是物料版本的excalidraw
https://frame0.app/Frame0
Frame0 ― A sleek Balsamiq alternative for wireframingFrame0 is a sleek Balsamiq alternative wireframing tool for modern applications. - #开源 Frappe 是一个开源的全栈 Web 应用程序框架，为了自己的框架，开源了一系列Saas产品
https://frappe.iofrappe.io
Frappe: Open Source SoftwareWe are a remote technology company committed to building excellent applications and services. - #开源 Vite6 是 Vite 2 以来最重要的主要版本！支持 node EOL内的版本： Node.js 18、20 和 22+，不再支持 Node.js 21。
https://cn.vite.dev/blog/announcing-vite6vitejs
Announcing Vite 6Vite 6 Release Announcement - #文章 #React 服务端组件的 #原理 ，同时对比了服务端组件和客户端组件的五个不同：
1. 包大小
2. 水合过程
3. 组件树渲染
4. 组件生命周期
5. 数据获取
https://www.tymzap.com/blog/5-differences-between-react-server-components-and-server-side-renderingTymzap
5 differences between React server components and server-side rendering • Tymek ZapałaI’m a software engineer and product maker based in Cracow, Poland. My mission is to create useful products by writing high-quality code and sharing my knowledge throughout the journey. - #文章 #React Router v7 启航开启下一个十年。
- 集成了Remix的特性，为React Router用户提供了框架模式，包括编译器、服务器渲染、代码分割、优化、类型安全增强等。
- 创建新应用可以选择作为 库(create-vite) 还是 框架(create-react-router)。
- 框架模式下，还有一些列的部署和服务端渲染等解决方案。remix.run
React Router v7React Router v7 brings all the great things you love from Remix back to React Router - #库 viselect - 让用户可视化地就像在桌面一样选择 dom 元素
https://github.com/Simonwep/selectionGitHub
GitHub - simonwep/viselect: ✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements,…✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks! - simonwe... - #文章 #原理 你真的了解 10 年前出的 ES6 新特性 Symbol 吗？
背诵的知识点：确保唯一性。
拓展知识点：
1. 对象的临时键（不干扰现有键且不会展示在Object.keys的结果和for..in循环中，场景：隐藏某些敏感键值对，比如 API_KEY）。
2. 临时键的值可以通过Object.entries读取到。
3.Object.getOwnPropertySymbols()可以查询 Symbol 键对应的值。
4.Symbol.for()可以全局注册共享Symbol。
5.Symbol.iterator可以自定义对象的可迭代方式。
6.Symbol.toPrimitive可以自定义对象的隐式转换行为。
7.Symbol.species可以限制某些继承行为和约束（计划废弃）。
https://www.trevorlasn.com/blog/symbols-in-javascripttrevorlasn.comExploring JavaScript SymbolsDeep dive into JavaScript Symbols - what they are, why they matter, and how to use them effectively - #文章 #React 什么是React Portals？
- React Portals提供了一种将子组件渲染到父组件之外的DOM节点的方法，打破了传统的组件渲染层次结构。
- React Portals的用途？
- 使用方法？
- 优点有哪些？css 控制、访问性、事件处理
- 保留虚拟 dom 层次。
- 灵活性
https://techhub.iodigital.com/articles/what-are-react-portalsiO tech_hub
What are React Portals? - iO tech_hubLet's have a look at React Portals and how they can help you in a pinch. - #文章 #React 基于 useSyncExternalStore 封装自定义 hook 应该注意的问题，还包括推荐了一个库 superjson
https://www.nico.fyi/blog/be-careful-with-usesyncexternalstore
推荐的库： superjsonNico's Blog
Be careful with useSyncExternalStoreLearn how to avoid infinite render loops when using useSyncExternalStore with non-primitive values in React, and discover a robust solution for storing objects in localStorage with proper type safety. - #React #文章 非受控或受控：这只是视角的问题？设计一个既可以受控也可以不受控的自定义组件的思路 - 内部状态控制 vs 外部状态控制
https://buildui.com/posts/uncontrolled-vs-controlled-a-matter-of-perspectiveBuild UI
Uncontrolled or controlled: A matter of perspective - #CSS #文章 关于 timeline-scope 的实际应用和落地；不过多浏览器兼容仍然有待发展。
https://frontendmasters.com/blog/scoped-scroll-timelinesFrontend Masters
(Up-) Scoped Scroll TimelinesI keep learning little details about scroll-driven animations!
![OpenAI 官方提示工程指南 [译]](/static/https://cdn4.telesco.pe/file/DWepQdqueqVwIs6PmXrF3SDQiDQH2K7liQ6CwGMtzKOK-KXD5GukI06GqmlTHukTWK9YY5HvWXIJk6HWUiFmJcKwhDFVa7TpgUoqwiMh6vUp4_9IdO04QklENWAPVcLSd6v-5-3dXQVmaRNj4SYNEXYjUM7ksXlIZpV8R0ZDdXWx_sZbiT96ei9BbNCz3PaVkpUinibNFIuUsDwCYIgcYCAyKPUMrhJM1Y5Bq3X5xGhm-GDB5rosrMYQZvMZVD_udMib_4yskOvFZOF119e2u8JkQvGys4dEV_EZmoVYFkqfgeb88NPtbw2YJJxX4XktfPd_OhWCm27of3KnJcx4Mw.jpg)
