Willin Wang 的全栈升级指南

优先解决关键渲染路径的阻塞问题使用 requestAnimationFrame 优化动画性能避免内存泄漏（及时清除定时器/事件监听）对复杂数据操作使用 WebAssembly合理使用缓存（Memoization、Service Worker）请根据实际项目需求选择合适的优化方案，并使用性能分析工具验证优化效果。不同场景可能需要组合使用多种优化策略。

简化样板代码：如可选链、空值合并。增强异步处理：如 Promise.any、顶层 Await。强化语言表达力：如私有字段、装饰器。这些特性并非炫技，而是源自社区真实需求。建议开发者逐步采用，但不必盲目追求“最新”——理解场景，方为利器。

由于 DeepSeek API 是兼容 openai 的，所以直接使用 openai 的 sdk 即可。经常会返回 “请开始你的表演”，或者直接返回空白文本。习惯就好，经常性超时，可能服务器压力太大。个人信息，使用农历日期、性别加出生时辰。注意提前申请 API Key。注意提前申请 API Key。

提供中文、英文两个版本。

如果安装了 WSL 2支持，则默认在子系统中也可以直接使用 Docker 相关的命令。注意 WSL 版本，Windows 11 下是 2+。如果是 1.x 需要注意。由于未翻墙访问 raw.githubcontent.com 会有一些问题。Docker Compose 文件 和 Gitignore 文件。在启动界面，选择 WSL 或者 Connect to WSL。通过 WSL 子系统进行 JAVA项目开发。通过 WSL 启动 VS Code 后，安装 WSL 插件以支持子系统。

使用 Cloudflare D1 和 Drizzle ORM 将后端添加到 Astro 项目的分步指南。

欢迎抢先体验 Prisma ORM 中的边缘功能部署支持！通过此抢先体验，您可以在 Cloudflare Workers 或 Cloudflare Pages 上使用 Prisma Client，并将 Cloudflare D1 作为数据库。

使用 Stripe 为您的生意进行线上收款开发。

网站：开源代码仓库：比如您在 Mastodon 系统上的用户名为：js.coolcss.fundsh.gglog.luv0.chati@js.cooli@v0.md都指向到了。

要完全配置高亮器，使用选项。如果你想配置其他 Shikiji 选项，如langs，这将很有帮助。})

官网： https://svelte.js.cool/i18n可以通过 , , 或者 进行安装：使用创建 声明：创建翻译文件，这里是一个示例：创建路由页面 或 。可选，配置语言参数校验 ：配置 ：在页面中使用：TypeDocs自动化生成的接口文档维护者： Willin Wang如果您对本项目感兴趣，可以通过以下方式支持我：Apache-2.0

Session 是网站的重要组成部分，它允许服务器识别来自同一个人的请求，尤其是在涉及服务器端表单验证或页面上没有 JavaScript 时。会话是许多允许用户“登录”的网站的基本构建块，包括社交、电子商务、商业和教育网站。创建自定义的 Session 存储策略(可用于 Cloudflare Workers、Pages)官网：adapter: {options: {},session: {},cookie: {path: '/',},

Svelte Auth是一个完整的开源身份验证解决方案，适用于Svelte应用程序。深受和Remix-Auth的启发，但完全从头开始重写，以便在之上工作。Svelte Auth可以在最小的设置下添加到任何基于Svelte的应用程序中。与Passport.js一样，它使用策略模式来支持不同的身份验证流程。每个策略都作为单独的npm包单独发布。官网：如果您没有设置，您首先需要添加一个?'github';});然后添加回调// 根据实际需要修改?'github';});

Cloudflare Email Routing 免费邮件发送（作为 Service 服务）用于 Workers/Pages 项目中。

注意：该文件命名采用的是 remix v2 规则，v1 的话用目录分隔。如果您对爱发电感兴趣，想要让其支持更多的框架。可以联系我进行定制开发。在项目根目录下创建一个。这个可以根据需要添加。这样已经大功告成了。

超过四十亿人（也就是世界人口的一半）至少拥有一个电子邮件地址，其中许多人将它当成处理个人和职业事务的重要工具。每天收发的电子邮件数量超过 3000 亿封，但若只将电子邮件视为通信工具对它来说并不公平。它在我们生活当中的作用远远不止于消息传输工具，其用途也包括作为在线验证个人身份的一个常用途径，以及充当其他通信平台的网关。如今，大多数人将电子邮件用于敏感的用途，例如登录银行账户或与政府机关通信等。与此同时，他们也将同样的电子邮件用于申领网上找到的九折优惠券，而这必然会导致未来数月被垃圾邮件侵扰。

如果您尝试调用的终端节点影响加载程序使用的数据，您可能不希望只对其进行常规提取调用。Remix 的 useFetcher 钩子有很多你想要利用的生活质量功能，例如自动重新获取装载机重复请求取消避免具有多个请求的争用条件如果服务器返回重定向响应，则重定向客户端因此，为了在这里正确使用它，我们可以在模式中采用创建一个自定义的类型安全获取器钩子，我们可以在应用程序中的任何位置使用它。})},[fetcher],这是使我们与 tRPC 等解决方案具有平价功能缺失的部分。

我的首选解决方案是使用 ProgressiveClientOnly 组件，该组件将使用 CSS 隐藏服务器呈现的内容，并在 Javascript 可用时将其交换为客户端内容，否则它将显示服务器内容。这意味着，如果您在服务器上创建一个日期并将其发送到客户端，客户端将在其自己的时区中创建一个日期，该时区将与服务器的时区不同。由于 React 正在将它生成的 HTML 与浏览器显示的 HTML 进行比较，因此在服务器发送它和 React 开始运行的时间之间更改 HTML 的任何内容都可能导致水合错误。

这意味着，如果您尝试在 IDE 中访问 process.env ，它不会为您自动完成变量，并且您不会进行任何类型检查。Remix 使用全局导航状态，因此，如果您单击指向一个页面的链接，然后在加载之前单击指向其他页面的链接，则对第一页的请求将被取消。由于这些变量是在运行时提供的，而不是在构建时提供的，因此我们无法静态地保证将设置某些变量或它们将具有正确的类型。这对于您明确提交的表单可能有意义，但对于预期会自动保存的输入，您不希望仅因为用户单击链接太快而保存失败。环境变量是在运行时配置应用程序的一种方法。

访问加载器数据的典型方法是钩子，它将获取最近的加载器的数据。这是通过 React Context 实现的，因此您也可以在组件中使用它。这里有一把脚枪：如果您尝试在不同的路由中重用该组件，它将获取该路由的加载器数据。为了解决这个问题，Remix 提供了一个钩子，让你通过传递其 ID 来获取任何活动路由的加载器数据。请务必注意，这不会导致任何新的加载程序运行，它只是获取数据（如果可用）。首先，让我们介绍所有网页应用程序中最常见的错误之一，404 Not Found。

需要考虑的事项：如果我们中止对另一个 API 的 POST 请求，并且该 API 没有中止数据库更改，我们可能仍然会遇到一半突变发生的问题，因为一半已经运行但另一半已中止。如果您将页码和大小存储在 URL 中，Remix 将获取新数据并在 URL 更改时立即显示在页面上，并且由于数据库通常有办法一次返回一页数据，因此您也可以免费获得。这些是生成 .js 输出的文件，是您通常编写代码的位置。应用的其他部分可能依赖于自己的查询参数，当我们创建设置参数的分页组件时，我们不希望覆盖其他查询 $skip 参数。

这篇文章介绍了什么是单点登录以及如何使用 GitHub 和 Clerk 实现它。Clerk 是一个 SSO 提供程序，其集成可帮助您在更短的时间内安全地采用和实施应用程序的单点登录身份验证方案。我们在本教程中使用了 UI 组件，但您可以使用自定义 UI 组件和 Clerk SDK 中的 React 钩子执行相同的操作。您可以在 SDK 参考文档中阅读有关使用挂钩的更多信息。

单点登录 （SSO） 发生在用户登录到一个应用程序，然后自动登录到其他应用程序时，无论用户使用的平台、技术或域如何。用户仅登录一次，因此功能的名称（单一登录）。例如，如果您登录 Gmail 等 Google 服务，您将自动通过 YouTube、AdSense、Google Analytics 和其他 Google 应用的身份验证。同样，如果您退出Gmail或其他Google应用程序，则会自动退出所有应用程序;这称为单点注销。SSO 可在用户使用应用程序和服务时提供无缝体验。

Hono - [炎]在日语中的意思是火焰🔥 - 是一个小型，简单且超快的Edges Web框架。它适用于任何JavaScript运行时：Cloudflare Workers，Fastly Compute@Edge，Deno，Bun，Vercel，Netlify，Lagon，AWS Lambda，Lambda@Edge和Node.js。快，但不仅快。

i18n（国际化）是指将应用程序设计为能够适应多种语言和区域设置，以满足不同国家和地区的不同语言和文化习惯。在现代软件开发中，i18n 已经成为了非常重要的一部分。为了让应用程序更好地支持不同语言和文化习惯，开发者需要使用各种工具和技术进行处理。Remix i18n 是一种基于 Remix 开发框架的 i18n 处理方式，它使得开发者能够非常方便地实现应用程序的国际化需求。本文将介绍 Remix i18n 的原理、使用方法以及适用场景。

这里通过 context 将服务传递进来，避免反复使用 env 进行初始化。参考这个， Env 是你自己所需要的环境变量的类型定义。由于 Cloudflare Pages 无法使用。如果需要通过类型提示的话，添加一个。

我们最近听到越来越多的关于Cloudflare的服务。我对Clouflare D1特别感兴趣，所以我决定研究一下。与这次我想使用的 Remix 一起，我想介绍 Remix + Cloudflare Pages + D1 的第一步。

Vercel 将 SDK 定义为“一个可互操作、支持流媒体、边缘就绪的软件开发工具包，用于使用 React 和 Svelte 构建的 AI 应用程序”。它支持React/Next.js和Svelte/SvelteKit，对Nuxt/Vue的支持“即将推出”。[更新：Vercel建议Nuxt和Solid.js框架现在都受支持。在LLM方面，SDK“包括对OpenAI，LangChain和Hugging Face Inference的一流支持。为了补充SDK，Vercel提供了一个游乐场，里面有二十多个LLM。

Vercel 是一个面向前端开发人员的云平台，通过它我们可以抽象出部署、预览、CI/CD、API 调用和一大堆其他功能。免费。2020 年 4 月，Zeit 更名为 Vercel，反映了其对核心产品的关注以及对持续改进的承诺。自成立以来，Vercel在开发和推广Jamstack架构方面发挥了重要作用，该架构强调静态站点生成和无服务器功能，以构建快速安全的Web应用程序。Vercel 也是流行的 Next.js 框架背后的公司，这是一个基于 React 的框架，用于构建服务器渲染的应用程序。

JavaScript 运行时可帮助您构建高级的、服务器驱动的 JavaScript 项目，这些项目不依赖于用户的浏览器来运行。有几种运行时可供选择，老牌坚定至高无上地位的 Node.js受到 Deno 和 Bun 的挑战。Deno是由最初创建Node.js的开发人员Ryan Dahl在2009年制作的最新项目。Deno旨在通过细粒度访问控制来提高其安全性，并提供更现代的功能，例如本机TypeScript支持和更好的Web兼容性。与此同时，Bun是最新的新贵，提供极快的速度，并显着优于其竞争对手。但是，它仍处

Next.js 是一个 React 框架，它可以让你快速地构建服务器渲染的 React 应用程序。这是一个简单的 Next.js 依赖注入的示例。在实际应用中，你可能需要使用更复杂的解决方案，但是这个例子演示了如何使用。接下来，它将用户列表显示在一个简单的列表中。中，我们将服务包装在一个上下文中，并将其作为 props 传递给我们的组件。的 prop，该 prop 是用于传递所有依赖项的对象。中注入依赖项，然后将其作为 props 传递给任何组件。创建一个上下文对象。然后，在我们的组件中，我们可以使用。

静态站点生成，顾名思义，在构建时生成静态 HTML 文件。每次构建应用程序时，都会创建一堆页面。然后将这些文件提供给用户，这意味着当用户访问网站时，服务器不需要做任何额外的工作。此方法非常适合内容不经常更改的网站，例如博客或文档网站。服务器端呈现涉及在用户请求时为服务器上的每个页面生成 HTML。使用 SSR，有一个服务器可以预渲染页面 - 它就像一个模板，您可以将变量插入其中，服务器处理所有渲染。这发生在请求时，因此当用户请求页面时，他们会获得服务器端呈现的页面。

在 TypeScript 中，使用枚举类型可以方便地定义常量和枚举值，提高代码的可读性和可维护性。// 使用枚举类型定义常量在使用枚举类型时，需要注意枚举值的正确性和可读性，避免出现歧义或冲突。

在本教程中，您将学习如何为名为“Medium”（一个简单的模仿）的博客应用程序构建后端 REST API。您将从创建一个新的 NestJS 项目开始。然后，您将启动自己的PostgreSQL服务器并使用Prisma连接到它。最后，您将构建 REST API 并使用 Swagger 对其进行记录。祝贺！你已经使用 NestJS 构建了一个基本的 REST API。使用 NestJS 构建了一个 REST API将Prisma顺利集成到NestJS项目中。

本 GraphQL 和 NestJS 教程最后更新于 2023 年 8 月，旨在探索使用 GraphQL API 的好处。NestJS是一个TypeScript Node.js框架，可帮助您构建企业级，高效且可扩展的Node.js应用程序。它支持 RESTful 和 GraphQL API 设计方法。GraphQL 是一种用于 API 的查询语言，也是使用现有数据完成这些查询的运行时。

在本 Web 开发教程中，我们将了解如何使用 HTML、CSS 和 vanilla JavaScript 创建基本的聊天机器人。本练习侧重于 JS 基础知识，而不是任何类型的人工智能 （AI）。为了使该过程更简单，更易于学习，我没有使用任何第三方库。我将通过专注于JavaScript编程语言的基础知识从头开始构建聊天机器人。本练习旨在帮助 JavaScript 程序员了解聊天机器人的工作原理以及 Web 开发人员如何使用 JavaScript 构建基本的聊天机器人。

NestJS v10 来了！这个渐进式 Node.js 框架提供了高效、可靠和可扩展的服务器端应用程序构建。根据StackOverflow Developer的调查，NestJS是世界上最受欢迎的10个后端框架之一。在。它的中有超过 58k Star。

gRPC 是由 Google 开发的高性能开源远程过程调用 （RPC） 框架。它使客户端应用程序能够调用位于远程计算机上的服务器应用程序上的方法，其方式与在本地对象上调用方法一样容易。它通过在客户端和服务器应用程序之间提供高效且独立于语言的通信，简化了构建和扩展分布式应用程序的过程。

服务器组件是一种新型的 React 组件，它们在服务器上运行并返回发送到客户端的已编译 JSX。Next.js 在 Next.js 13 中发布了新的应用目录，通过将服务器组件设置为默认类型组件，完全接受了服务器组件。这是与在服务器和客户端上运行的传统 React 组件的重大转变。事实上，正如我们所指定的，React Server 组件不会在客户端上执行。服务器组件不能使用仅限浏览器的 API服务器组件不能使用 React 钩子服务器组件无法使用 Context 上下文。

在本文中，我们深入探讨了在开始使用 Next.js 13 之前需要了解的 8 件事。从默认的服务器组件，到组件组合的细微差别、库集成的怪癖、不同的渲染模式以及路由组的引入 — 在开始之前有很多东西需要了解。虽然它并非没有成长的痛苦，但Next.js 13是框架的一次飞跃，推动了Web开发的可能性。当你进入Next.js 13的领域时，请记住，权力越大，责任越大。明智地使用这些功能，您将立即构建一些真正令人惊叹的 Web 应用程序。保持好奇心，不断探索，永不停止学习。直到下一次，祝您编码愉快！