本文内容包含：落地页开发理念、rough notation与framer-motion的应用、暗黑模式的支持与国际化最佳实践。

我为独立开发者开发落地页模板（二）

如何开发一个通用的落地页模板，这不就来了

我为独立开发者开发落地页模板（一）

Node拒绝当咸鱼，Node 22大进步

2024年4月，React 19的第一个版本发布，版本号是19.0.0-Beta，快来抢先学习新特性。

React正式更新！开始学习React 19！

盼星星，盼月亮，终于盼来 React 19。这是继引入 hooks 之后的又一个里程碑式版本，快来抢先学习一下新版本可能发布的特性！

React 19 发布在即，抢先学习一下新特性

我整理了一份独立开发者出海技术栈

本文分享了近期 React Server Components（RSC）引发的技术分歧，讨论了其为前端开发带来的新机遇。

React Server Components引发的分歧与机遇

AI引爆新的技术周期，前端工程师该如何享受这个周期的技术红利、找到自己在这个时代的技术转型机遇？

年终总结：新的技术周期，每个前端都有更好的职业转型机遇

CSS又整活了！CSS的新特性 @scope 让你能够给CSS设置作用域了，以后即使你不用Less、SCSS，也可以写出容易管理的CSS了。

CSS前瞻：用@scope 定义你的CSS作用域

觉得新拟态高大上自己却不会做？来学习一下设计思路，学完保证你也能做出自己的新拟态组件。

CSS技巧：人人都能看懂的新拟态实现思路

在SVG里面使用HTML+CSS制作你的动画卡片，学完就可以去炫你的创意了

CSS技巧：用CSS + SVG foreignObject实现一个动画组件

用10行代码写一个让文字跃动的组件，这谁顶得住？

CSS技巧：用十行代码写一个跃动文字链的hover效果

本文介绍了一个好用但不常见的CSS关键字——currentColor ，学会使用 currentColor 就能提升你的样式的灵活性和一致性。

CSS技巧：用 currentColor 提升样式的灵活性和一致性

介绍一个 CSS 的新特：@media (scripting) 。有了它，以后就可以针对网站是否支持JavaScript脚本进行CSS样式增强和优雅降级。

CSS前瞻：@media (scripting)助你优雅降级

本文从React Fiber架构的原理和源码入手，为你织开一面关于Fiber架构的基础知识网。

万字长文介绍React Fiber架构的原理和工作模式

LocalTunnel是主流的内网穿透工具之一，当你本地调试开发支付功能的时候，LocalTunnel可以帮助你建立外部服务向本地服务推送数据的通道。

用localtunnel实现内网穿透，完成支付功能的调试

本文介绍了 Next.js 里 metadata 的配置与管理、sitemap 的导出和网站访问追踪的引入实现，希望能够帮助你步入 SEO 的优化之路。

提升网站搜索排名：Next.js的关键SEO配置

书接上回，本文介绍了基于Lemon Squeezy怎么开发你的会员系统

基于Lemon Squeezy开发你的全球可用的会员功能

相信每一位程序员都梦想着有一天开发出自己的产品，而且有人愿意为自己的产品买单。本文分享了会员功能的设计和开发的思考，希望可以给正在开发会员功能的开发者提供一点帮助。

带你设计一套会员功能并开发它

use 是一个能让你的代码更优雅的hook，虽然它还不是一个正式发布的 hook，但这不妨碍我们学习。

精读React hooks（十六）：一个为代码优雅而生的hook——use

useDebugValue 是一个专为开发者调试自定义 hook 而设计的 React hook，它可以让你的 hook 在 debug 时有更友好的提示。

精读React hooks（十五）：把useDebugValue加入你的React调试工具库

在服务端渲染的应用中，在需要指定HTML节点ID的时候，我们需要确保服务端和客户端hydration后HTML可以正确合并，React v18推出的useId就是用来解决这个问题的。

精读React hooks（十四）：总有一天你会需要useId为你生成唯一id

useImperativeHandle是一个为库开发者设计的hook，作为一名应用开发者，你可以不用它，但有必要了解它。

精读React hooks（十三）：使用useSyncExternalStore获取实时数据

useImperativeHandle提供了一种精确控制组件对外暴露的能力，有了它，开发者可以轻松实现对组件的细粒度控制和高度封装。

精读React hooks（十二）：使用useImperativeHandle能获得什么能力

useInsertionEffect是为CSS-in-JS库提供的一个hook，它让后者可以更合理地注入样式，本文就来介绍一下useInsertionEffect的用法和优势。

精读React hooks（十一）：useInsertionEffect——CSS-in-JS样式注入新方式

useDeferredValue带来的是可延迟的状态更新，当实际工作中遇到大数据量渲染的场景，不妨引入useDeferredValue试试。

精读React hooks（十）：使用useDeferredValue延迟状态更新

React的默认渲染行为是同步的，遇到大数据量渲染时就会出现卡顿，使用useTransition就可以轻松把UI渲染变成异步的，让卡顿消失无踪。

精读React hooks（九）：使用useTransition进行非阻塞渲染

本文对 React 的useCallback钩子进行了详细的探讨，解释了其背后的原理、与useMemo的对比、合适的应用场景以及如何正确使用。

精读React hooks（八）：我们为什么需要useCallback

为了更好地满足开发者对于细粒度性能控制的需求，React推出了useMemo这一Hook，允许我们针对复杂的计算进行精细化的优化，从而避免不必要的渲染重复。

精读React hooks（七）：用useMemo来减少性能开销

useLayoutEffect的用法和useEffect完全一样，那么本文就来谈谈这二者在使用场景上的区别，以及useLayoutEffect的使用注意事项。

精读React hooks（六）：useLayoutEffect解决了什么问题？

useEffect是一个常用的 hook，正因为常用容易让开发者忽略了其中的使用细节，本文梳理了useEffect的使用细节和清除函数的使用场景。

精读React hooks（五）：useEffect使用细节知多少？

在这篇文章中，我们对 React 的 useRef 进行了深入的探讨，透过实际代码，再现了useRef绝大多数应用场景，无论你是 React 新手还是老手，相信本文都能为你提供有价值的知识。

精读React hooks（四）：useRef的多维用途

useContext为我们解决多层嵌套传值的问题，本文主要讨论了useContext跨层级组件共享状态的知识和性能方面的注意项。

精读React hooks（三）：useContext从基础应用到性能优化

随着应用逐渐复杂，useState在管理复杂的状态逻辑时显得有些力不从心。这时，就要使用useReducer来帮助我们优雅地处理复杂状态。

精读React hooks（二）：全面掌握useReducer

自从 React v16.8 版本以来，React Hooks 为我们提供了全新的编写和思考 React 组件的方式。这是本系列文章第一篇，我们将探讨最常用的 hook——useState。

精读React hooks（一）：useState 的几个基础用法和进阶技巧

NextJS 为开发者提供了一些列渲染方式——CSR, SSR, SSG, 和 ISR，本文探讨了这些渲染方式的优势和适用场景。

讲清楚 Next.js 里的 CSR, SSR, SSG 和 ISR

又有一个省心省事的工具了，个人项目开发如果觉得自己安装维护 Redis 很麻烦，那么你应该试试这个免费的第三方 Redis 托管平台——Upstash。

用 Upstash 作为你的 Redis 服务器

探讨 NextJS v13 的服务端组件和客户端组件的工作原理、使用时机和最佳实践

NextJS v13服务端组件和客户端组件及最佳实践

NextJS v13 已经推出很久了，社区也在逐步转向 app router 的开发模式，但你知道 app router 背后是什么样的渲染机制考量吗？

NextJS v13 的渲染机制有什么不同？

当前端拥有Docker，如磁悬浮列车获得了超导加持。前端工程师不要再拒绝Docker，请收下这一份前端看得懂也用得上的Docker教程。

前端有了Docker，全栈之路更轻松了

让我们用前端当红炸子鸡NextJS+Next-Auth+Postgres+Prisma来完成登录模块，全新的技术栈将极大简化我们的登录模块开发流程，不信来看看

从Next-Auth到Prisma，用最新潮的技术栈做登录

本文介绍了prisma migrate命令的使用方法

prisma migrate命令简明教程

这篇文章将深入讲解前端开发中的重排、重绘和合成的概念，同时探讨如何通过优化技巧提升页面性能。从减少重排重绘的次数到合理使用图层合成，你将学到实用的前端性能优化方法和最佳实践。

性能优化——把重排、重绘、合成掰开了、揉碎了学

contentlayer可以帮助你把mdx文件转成静态页面，有了它，你可以专注写markdown文件，然后自动获得解析后的页面。

让contentlayer帮你把md文件变成静态页面吧

一时Markdown一时爽，一直Markdown一直爽

记录一些好用的Markdown优化插件

把你的网站接入谷歌广告

要做微信开发，繁琐的配置和本地调试总是会耗费很多时间精力，特此写一篇文章记录配置和调试步骤，我称之为“打通微信公众号开发任督二脉”，打通后就是大家熟悉的业务开发了，希望这篇文章对大家有用。

【胎教级】微信公众号开发配置

写这篇文章的目的是抹平谷歌OAuth2.0开发的信息差，跟随文章的思路，你只需要半个小时就能完成自己的谷歌授权登录功能。

【冷门教程】接入谷歌OAuth2.0登录的分析和代码实践

因为网络大环境和谷歌文档的灾难性缺漏，网上能找到基于谷歌APIs开发的文章比较少，所以我摸索了一番，并写下这篇手把手的教程。

模板	特性
smart-excel-ai（免费）	Next.js。集成登录、支付（lemon squeezy）、AI功能
Opensaas（免费）	React + Node.js。集成登录、支付（stripe）、邮件、AI功能
Shipfast（付费）	Next.js。集成登录、支付（stripe）、邮件、AI功能

模板	特性
Plasmo	支持 React、Vue 等多种前端框架
wxt.dev	支持 Vue、Svelte 等多种前端框架

技术栈	备注
Next.js🌟	基于 React。附属学习教程：Next.js Practice
Remix	基于 React
Nuxt	基于 Vue

技术栈	备注
Nest.js	基于 Node.js
Midway.js	基于 Node.js

技术栈	备注
Supabase🌟	支持数据库、文件存储、登录鉴权
Upstash🌟	支持 Redis、kafka、向量数据库
Mongodb🌟	Mongodb 官方提供一个免费数据库

🛠️我整理了一份独立开发者出海技术栈

Web 开发模板

Chrome 插件开发模板

技术栈推荐

前端

后端

数据库

ORM

样式与UI库

登录鉴权

支付

邮件

网站分析

在线客服

部署与托管

域名购买

文档管理

logo

图标库

图片视频处理工具

录屏

短链

技术栈	备注
Clerk🌟	ㅤ
Supabase	PostgreSQL数据库、文件存储、登录鉴权
Next-Auth v4	ㅤ
Next-Auth v5	v5 配置和 v4 不同，请注意区分。v5 Demo

技术栈	备注
Lemon Squeezy🌟	支持个人香港卡、虚拟卡，国内开发者首选
Stripe	需要企业资质

平台	备注
Vercel🌟	首选
Aircode	字节跳动出品
Zeabur	国内出海团队出品
Railway	ㅤ
Netlify	ㅤ
Github Pages	ㅤ
Cloudflare Pages	ㅤ

平台	备注
Namesilo🌟	自动屏蔽whois
Namecheap	据说比较便宜
Godaddy	狗爹，懂的都懂
阿里云腾讯云字节火山引擎	国内平台，cn域名首选平台

平台	备注
iconbuddy	logo 设计
iconray	logo 设计
icon horse	logo 探测
favicon generator	生成多平台多种类logo(ico、PNG、SVG)
比特虫	PNG/JPG 转 ico

平台	备注
Tinypng	图片压缩
Tinify	图片压缩 - 国内版
video-to-gif	视频转 GIF

技术栈	备注
Tawk	中国地区可注册

平台	备注
dub	免费用户每个月可以创建25个链接