FE Tycoon
#文章 防止XSS攻击，探讨 styled-components 动态样式注入的安全防范。检验值类型或者使用枚举限制。
https://andrei-calazans.com/posts/styled-components-xss-danger/#main
https://andrei-calazans.com/posts/styled-components-xss-danger/#main
Andrei Calazans
The XSS dangers in interpolating styled-components
Learn about XSS vulnerabilities when interpolating styled-components in React
#文章 ECMAScript的一个新特性——正则表达式模式修饰符（Regular Expression Pattern Modifiers）
https://2ality.com/2025/01/regexp-modifiers.html
https://2ality.com/2025/01/regexp-modifiers.html
#文章 CRDTs
https://learn.yjs.dev/
https://learn.yjs.dev/
learn.yjs.dev
Learn Yjs by Jamsocket
Learn Yjs is an interactive tutorial series on building realtime collaborative applications using the Yjs CRDT library. Learn about handling state in distributed applications using Yjs shared types, with explorable explanations and code exercises.
#文章 #RN React Native 在 Shopify 实践的五年历程。市面上对于 flutter 和 react native 的选型众说纷纭，一个大型公司的成功应用可以为相似技术需求的开发者提供选型参考和社区支撑。
https://shopify.engineering/five-years-of-react-native-at-shopify
https://shopify.engineering/five-years-of-react-native-at-shopify
Shopify
Five years of React Native at Shopify (2025) - Shopify
Five years ago, we announced that React Native (RN) is the future of mobile at Shopify. Today, we are excited to share the progress we've made, lessons learned, and what the future holds.
To recap, we decided to switch to RN for 3 main reasons:
Write it…
To recap, we decided to switch to RN for 3 main reasons:
Write it…
#文章 结论是，MD5不仅安全性不如SHA-256，而且在速度上也并不比SHA-256快。尽管SHA-256在纸面上看起来更昂贵，但现代处理器通常具有加密扩展来加速它。作者建议不应该使用MD5，而应该选择SHA-256。（少量数据差距不大，文中的对比是数据量庞大的情况。）
https://lemire.me/blog/2025/01/11/javascript-hashing-speed-comparison-md5-versus-sha-256/
https://lemire.me/blog/2025/01/11/javascript-hashing-speed-comparison-md5-versus-sha-256/
#React #文章 在使用 react-router 导航的时候，避免使用 navigate(-1)
https://programmingarehard.com/2025/01/13/maybe-dont-navigate-1.html/
https://programmingarehard.com/2025/01/13/maybe-dont-navigate-1.html/
#文章【必知】 语义化 HTML 和 无障碍响应式设计，经常被忽略，很少被提起。radix primitives 做的还不错。
https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know
https://martijnhols.nl/blog/accessibility-essentials-every-front-end-developer-should-know
Martijn Hols
Accessibility essentials every front-end developer should know by Martijn Hols
Essential accessibility practices for front-end developers, including semantic HTML, alt texts, ARIA, and keyboard navigation tips to build inclusive components.
#React #文章 理解 RSC：是否使用RSC取决于具体的应用场景。对于高度交互的应用，作者建议谨慎地进行客户端/服务器重构，可能会更多地保持客户端组件。
https://tonyalicea.dev/blog/understanding-react-server-components/
https://tonyalicea.dev/blog/understanding-react-server-components/
Tony Alicea
Understanding React Server Components | Tony Alicea
A deep dive into the internals of React and Next.js to understand RSCs.
#React #文章 Next.js 可以构建单页面应用程序（SPA），提到一个 “strict SPA” ：
- 客户端渲染（CSR）：应用程序由一个 HTML 文件提供（例如 index.html ）。每个路由、页面转换和数据获取都由浏览器中的 JavaScript 处理。
- 无整页重载：客户端 JavaScript 不会为每个路由请求新文档，而是根据需要操作当前页面的 DOM 并获取数据。
还提到了我常推荐的请求上层库 SWR ，react-query 确实很大的知名度，但是开发通常会学习接触到的技术栈，SWR 的 API 和代码更容易学习和简单，主要是：官方中文支持！感谢作者 shuding，他还有两个很nice 的开源：Nextra 和 React Wrap Balancer.
自从 SWR 2.3 开始支持 react19之后，可以配和 Next.js 渐进式采用RSC功能：
- Client-only: useSWR(key, fetcher)
- Server-only: useSWR(key) + RSC-provided data
- Mixed: useSWR(key, fetcher) + RSC-provided data
因为 SPA 应用仍然是大多数，vercel 的这个举动，会推动对 RSC 感兴趣的人们在技术选型的层面开始看向 Next.js。
https://nextjs.org/docs/app/building-your-application/upgrading/single-page-applications
- 客户端渲染（CSR）：应用程序由一个 HTML 文件提供（例如 index.html ）。每个路由、页面转换和数据获取都由浏览器中的 JavaScript 处理。
- 无整页重载：客户端 JavaScript 不会为每个路由请求新文档，而是根据需要操作当前页面的 DOM 并获取数据。
还提到了我常推荐的请求上层库 SWR ，react-query 确实很大的知名度，但是开发通常会学习接触到的技术栈，SWR 的 API 和代码更容易学习和简单，主要是：官方中文支持！感谢作者 shuding，他还有两个很nice 的开源：Nextra 和 React Wrap Balancer.
自从 SWR 2.3 开始支持 react19之后，可以配和 Next.js 渐进式采用RSC功能：
- Client-only: useSWR(key, fetcher)
- Server-only: useSWR(key) + RSC-provided data
- Mixed: useSWR(key, fetcher) + RSC-provided data
因为 SPA 应用仍然是大多数，vercel 的这个举动，会推动对 RSC 感兴趣的人们在技术选型的层面开始看向 Next.js。
https://nextjs.org/docs/app/building-your-application/upgrading/single-page-applications
nextjs.org
Upgrading: Single-Page Apps
Next.js fully supports building Single-Page Applications (SPAs).
#软件 动画设计平台
Rive - Build interactive motion graphics that run anywhere
https://rive.app/
Rive - Build interactive motion graphics that run anywhere
https://rive.app/
rive.app
Rive - Design and build production-ready graphics that run anywhere
Rive is a new way to build production-ready UI and graphics — with rich interactivity and state-driven animation. Complex designer-developer handoff is a thing of the past, empowering teams to iterate faster and build better products.
#文章 Doug Lowder 撰写了关于他使用 Expo 重建一个 10 年历史的 iOS 应用的经验。
https://expo.dev/blog/rebuilding-a-10-year-old-ios-app-with-expo
https://expo.dev/blog/rebuilding-a-10-year-old-ios-app-with-expo
#开源 一种用于文本和代码的墨水色调配色方案，专为数字屏幕上的阅读和写作设计。
https://stephango.com/flexoki
https://stephango.com/flexoki
Steph Ango
Flexoki
An inky color scheme for prose and code.
