#文章【必知】 语义化 HTML 和 无障碍响应式设计，经常被忽略，很少被提起。radix primitives 做的还不错。

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/

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

nextjs.org

Guides: SPAs

Next.js fully supports building Single-Page Applications (SPAs).

#软件 动画设计平台
Rive - Build interactive motion graphics that run anywhere
https://rive.app/

rive.app

Rive — a new way to design, build, and ship user interfaces

Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast renderer. This pipeline brings interfaces to life with motion across apps, games, websites, products, and vehicles.

#文章 Doug Lowder 撰写了关于他使用 Expo 重建一个 10 年历史的 iOS 应用的经验。

https://expo.dev/blog/rebuilding-a-10-year-old-ios-app-with-expo

锤子前端

#开发工具 css变量编辑器，支持shadcn和daisyUI。 https://www.cssvariables.com/

#网站 tailwindcss 团队出品的《Refactoring UI》

https://www.refactoringui.com/#get-refactoring-ui

#开源 一种用于文本和代码的墨水色调配色方案，专为数字屏幕上的阅读和写作设计。

https://stephango.com/flexoki

Steph Ango

Flexoki

An inky color scheme for prose and code.

#开发工具 css变量编辑器，支持shadcn和daisyUI。

https://www.cssvariables.com/

Cssvariables

CSS Variables Editor - AI Browser Extension for managing colors in CSS Variables

CSS Variables Editor is the Browser Extension for managing colors in CSS Variables. AI-generated color palettes. Accessibility testing. Support for shadcn/ui and daisyUI (more coming soon).

#CSS 24个CSS知识

https://css-selectors.dev/advent-calendar/2024

css-selectors.dev

CSS Selectors

Learn, practice, master - CSS Selectors for simpler coding and become a CSS hero

#文章 #React Server Components 比较不错的文章，《服务器组件的心智模型》

- 链接：https://saewitz.com/the-mental-model-of-server-components

Saewitz

The Mental Model of Server Components | Daniel Saewitz

#文章 #React Remix.js 中的 markdown 处理系列文章：

1. 使用 Markdoc 在 Remix 中渲染 Markdown 内容；
2. 在 Remix 中使用 Markdoc 和 Shiki 进行语法高亮。

1. 链接：https://andrelandgraf.dev/blog/2024-11-01_rendering-markdown-in-remix
2. 链接：https://andrelandgraf.dev/blog/2024-11-30_syntax-highlighting-with-markdoc

andrelandgraf.dev

Use Markdoc to render Markdown content in Remix | Andre Landgraf

Markdown is a great tool for working with formatted text content. In this blog post, we use Markdoc to parse and render Markdown content in Remix. We will cover styling, frontmatter, and how to render Markdown content as custom React components.

#文章 #React 储备知识 如何优化 Next.JS 应用的 Docker 镜像，使其体积大幅减小。不知道关于 remix.js 是否可以有相似的配置呢

- 链接：https://xeiaso.net/notes/2024/small-nextjs-images/

xeiaso.net

Make your Next.JS Docker images microscopic!

Do standalone builds on Alpine

#React #文章 React Router v7 的系列文章

- 链接：https://www.robinwieruch.de/react-router/

www.robinwieruch.de

React Router 7 Tutorial

React Router 7 tutorial: setup, hooks, nested routes, dynamic routes, programmatic navigation, active links, layout routes, index routes and more. A step by step React tutorial for beginners ...

#文章 #React 5个有效优化React中交互到下次绘制（INP）指标的技巧。

- 链接：https://calendar.perfplanet.com/2024/5-tips-to-effectively-optimize-inp-in-react/

Web Performance Calendar

5 tips to effectively optimize INP in React

In this post, let's consider several optimization techniques for improving Core Web Vitals metrics for sites that are built with React.

We are a team of speed consultants from the Czech Republic and in this article we would like to share some experiences…

#网站 程序员的浪漫，一个程序员的人生 changelog

链接：https://ned.im/

#文章 #React 介绍了 TanStack Start，这是一个基于 TanStack Router 的轻量级服务器层。
或许是未来的技术选型趋势的赌注？值得观望。

- 链接： https://frontendmasters.com/blog/introducing-tanstack-start/

Frontend Masters

Introducing TanStack Start

The best way to think about TanStack Start is that it’s a thin server layer atop the TanStack Router we already know and love; that means we don’t lose a single thing from TanStack Router. Not only that, but the nature of this server layer allows it to side…

#AI #文章
「 AI 辅助编码的残酷真相：它能帮你完成70%的工作，但最后30%令人非常沮丧 」
英文原文：「70%问题-AI 辅助编程的现状和代价」
AI可以帮助我们更快地迭代和实验，但只有当我们保持对项目代码的掌控和理解并把AI作为工具而不是替代良好软件实践时，我们才能构建更好的应用。

baoyu.io

AI 辅助编码的残酷真相：它能帮你完成70%的工作，但最后30%令人非常沮丧

一份实战指南，以及为何我们需要重新审视自己的期望

#原理 #文章 【了解】「 WeakRef 如何帮助管理 JavaScript 中的内存 」，里面探讨了很多关于 js 垃圾回收相关的知识，以及 FinalizationRegistry 的使用在对象被清理时回调。如果遇到了 js 内存相关的优化再看吧。。

WeakRefs in JavaScript: Explained In Simple Terms

Understanding how WeakRef helps manage memory in JavaScript

#文章 #React useRef系列「 二、Ref Callbacks, React 19 and the Compiler 」

tkdodo.eu

Ref Callbacks, React 19 and the Compiler

Reflecting on useCallback, how the Compiler changed my thinking about it, and what React 19 has in store for Ref Callbacks...

#文章 #React useRef系列「 一、尽量避免使用 useRef + useEffect 的组合 」

tkdodo.eu

Avoiding useEffect with callback refs

Interacting with DOM nodes doesn't necessarily need useEffect