了解网络开发的最新工具和技术非常重要。在本期 “网页设计师和开发人员的资源清单” 中，我们将介绍一些最有前途的资源，帮助网络开发人员保持领先。
从图片资源、新的设计系统指南和配色设计资源到各种前后端框架，再到各种 CSS 教程、免费课程，我们为每个级别的开发人员都准备了相应的资源，帮助他们提升技能，开启网络开发之旅。
设计资源
图标资源
Iconify
Iconify 这是一个多功能图标框架，包含 100 多个图标集的 100,000 多个图标。通过它，您可以使用统一的应用程序接口将图标嵌入到纯 HTML 和 SVG 中，也可以嵌入到 Vue.js 或 React.js 等前端框架中。
通过 Figma、Sketch 和 Adobe XD 的插件，您还可以在设计应用程序中使用图标。这最终有助于避免供应商锁定，同时还能访问成千上万的高质量图标。它以 NPM 软件包和 Composer for PHP 的形式提供。
AtalsIcons
AtalsIcons 是一个免费的开源图标库，可用于各种设计项目。该库包含 2,701 个 SVG 格式的图标，还提供网页字体、Figma、React、Vue 和 Flutter 包。
有了 Atlas 图标，设计人员和开发人员就可以轻松获取各种风格一致、可用于各种平台的图标。
Icones
Icones 是一款提供流行图标集的网络工具，包括 Tabler、Bootstrap Icons、Ionicons、Octicons 等。它旨在通过提供友好的用户界面和工作流程，简化在项目中查找和使用图标的过程。Icones 还可作为 VS Code 扩展使用，并计划在不久的将来推出桌面应用程序。
IconHunt
IconHunt 拥有大量免费和开源图标，界面简单友好，便于搜索和浏览。您可以轻松下载图标或将其导入 Notion 和 Figma。对于寻找免费和高质量图标的设计师和开发人员来说，这是一个非常有用的资源。
设计系统资源
The Design System Guide
The Design System Guide 网站提供了学习设计系统的综合指南。它涵盖了基础、设计代币和其他资源等重要主题。
设计系统旨在通过为团队工作提供一种通用语言和一套原则来提高设计和开发的一致性和效率。如果你有兴趣了解设计系统，这个网站可以作为一个很好的起点。
UK Gov Design System
UK Gov Design System 是英国政府可以说拥有最好的官方网站之一。他们的开发团队提供了大量可重复使用的用户界面元素，旨在支持多种应用程序。虽然您可能不会在自己的网站上直接使用这种设计系统，但您可以从中汲取丰富的知识 – 尤其是在可访问性和用户界面一致性方面。
Design System Checklist
Design System Checklist 网站为设计和实施设计系统提供了一份详尽的核对表。它涵盖了排版、颜色、间距、组件、可访问性、文档和版本等各个方面。该资源可帮助设计人员和开发人员创建用户友好型体验和简化开发流程。
配色设计资源
Dark Mode Design
Dark Mode Design 是一个展示设计精美网站的资源库，这些网站要么完全采用暗色模式，要么可以切换到暗色模式。这可以为您在自己的网站上建立暗模式功能提供灵感。
本网站上的所有网站都是由 Cai Cardenas 精心挑选和策划的，以确保所选网站都是高质量和精心设计的。
Alphredo
Alphredo 是一款配色生成应用程序，可创建半透明版本的色彩，当将其置于相同背景下时，会显示出与不透明版本相同的色彩。
使用该软件，您可以指定背景，并在调色板的连续步骤中调整饱和度，这可以帮助您创建一个连贯的调色板，供整个项目使用。
OKLCH
OKLCH 是一款帮助设计师使用 LCH 和 OKLCH 色彩空间挑选和转换色彩的工具。OKLCH 是一种较新的色彩空间，与 RGB 和 HSL 一样，是 CSS Color 4 规范的一部分。
它能更好地支持现代屏幕，并且在色彩转换后始终具有可预测的对比度。如果您想深入了解这种新的色彩空间，请查看这篇文章，了解它为何优于 RGB 和 HSL。
设计相关
Freefaces Gallery
Freefaces Gallery 网站展示了从互联网上收集的具有免费许可证的字体。该网站提供多种字体样式，包括草书字体、显示字体、单空格字体、衬线字体、无衬线体和板块字体。这些字体可以美化您网站的外观，也可以为您提供灵感。
Intel One Mono
Intel One Mono 是专为开发人员设计的单空间字体系列。该字体系列包括四种重量，即浅色、普通、中等和粗体，每种重量都有相应的斜体。它支持 200 多种使用拉丁字母的语言。
Landing Love
Landing Love 是一个经过精心策划的网站最佳动画展示平台。它展示了着陆页的顶级范例，为创建美观有效的着陆页设计提供了设计灵感。
LottieFiles Figma
LottieFiles Figma 插件可让设计师轻松地将 Figma 设计导出为 Lottie 动画。它通过直接连接 Figma 和 LottieFiles 来增强工作流程。在处理动画时，这款实用的插件可提高设计人员和开发人员的工作效率。
Notion Avatar
如果您有兴趣制作一个独特的在线角色，Notion Avatar 是一款在线工具，可以让您创建与 Notion 中类似的头像。它提供多种自定义选项，如不同的脸型、鼻子、嘴巴、眼睛、眉毛、眼镜、发型、胡须、面部细节和配饰。
前端开发
前端开发工具集
Precedent
Precedent – Next.js 项目的组件、钩子和实用程序集合。它采用了所有最新的库和框架，如用于基本用户界面的 Radix UI、用于处理谷歌、Twitter 和 GitHub 等提供商的用户身份验证的 Auth.js、用于组件动画的 Framer Motion，以及通过一组预定义的 CSS 实用工具类为组件设计样式的 TailwindCSS。
Mafs
Mafs 是一套有主见的 React 组件，可让您轻松为用户创建精美、引人入胜的数学内容。无论您是要创建数学学习平台、数据可视化工具，还是其他什么，Mafs 都是创建交互式数学体验的完美工具。
Web Components Guide
Web Components Guide 允许开发人员创建具有自己行为的自定义可重用元素，并将其呈现在浏览器中，就像标准的 HTML 元素一样。它速度很快，而且可以与一些框架集成。
如果您想了解更多有关 Web 组件的信息，本网站提供了一些创建自己的 Web 组件的介绍和教程。您将学习到封装、阴影 DOM、事件、插槽等概念。
HTML with Super Powers
要进一步了解网络组件，可以访问 HTML with Super Powers。它涵盖了网络组件的基础知识，如 template 标签、 slot 签和样式的使用，并包含了从简单到复杂的各种实用示例。
Mitt
Mitt 是一个小型、快速的 JavaScript 事件发射器库，既可在浏览器中使用，也可在 Node.js 中使用。它提供了一个简单的 API，用于为事件添加监听器和发射带有数据的事件。它没有依赖性，支持 IE9+。如果您的应用程序需要自定义事件监听器，这是一个非常适合安装的库。
Arktype
ArkType 是一个运行时验证库，可自动推导 TypeScript 定义。当你在代码编辑器中输入时，它会在编辑器中提供即时反馈，显示完全推导的类型或特定的解析错误。这些反馈反映了运行时会发生的情况。
如果您希望在开发过程中和应用程序运行时都能确保类型安全，那么它就是一个非常有用的库。
magic-regex
magic-regex 是一个让 RegEx 更简单的 NPM 库。你可以使用函数和自然语言语法，而不必编写难以理解的奇怪 RegEx 语法。该库会将函数编译并转换为纯粹有效的 RegEx。
Magicast
Magicast 是一个 JavaScript 和 TypeScript 代码修改库，允许用户使用简单易用、熟悉的语法对源代码进行编程修改。它使用由 recast 和 babel 解析的 AST，并提供导出/导入操作、函数参数操作、智能格式化和改进代码可读性等功能。
它可能不是你使用的库，但如果你需要进行涉及代码修改的底层编程，这可能是一个非常方便的库。
Variant Vault
Variant Vault 是一个资源库，其中收集了使用 Framer Motion 制作的设计精美、免费且易于访问的动画和变体。对于希望使用预先设计的、美观的动画来丰富项目的开发人员来说，它是一个方便的工具。
Taxonomy
Taxonomy 是 Next.js 13 的一个示例项目，具有多种现代功能，如身份验证、订阅、API 路由和静态页面。此外，它还包含一个博客和使用 Contentlayer 和 MDX 创建的详尽文档。它是建立全栈 Next.js 应用程序的绝佳灵感来源。
Next SEO
Next SEO 可让 Next.js 应用程序中的 SEO 元数据管理变得轻而易举。通过它，您可以轻松添加标题标签、元描述等内容。这将增强网站的搜索引擎优化，并简化每个页面上的元数据定制。
ESLint Stylistic
ESLint Stylistic 为 ESLint 和 TypeScript-ESLint 提供特定于样式的规则。启动该项目是为了将格式和样式规则与 ESLint 区分开来，尤其是在 ESLint 核心团队决定弃用此类功能之后。看看这个项目如何发展会很有趣。
UI组件库
Semi Design
Semi 是一个用户界面设计框架，可帮助设计人员和开发人员创建高质量的数字界面。它遵循 W3C 标准，支持多种语言、时区和从右到左的语言。
此外，它还兼容服务器端渲染场景，可用于 Next.js 和 Gatsby 等流行框架。此外，它还提供全面的设计标记和组件变体，这些标记和变体由 Figma 同步和提供。
WindmillUI
Windmill UI 是一个现代、免费的网络用户界面库，用于构建仪表盘、管理区和其他网络应用程序。它包含一系列预建组件和样式，如表格、表单、模态和警报，可完全响应和自定义。
它采用 Tailwind CSS（一个实用优先的 CSS 框架）构建，并可与 React 轻松集成。Windmill UI 还为仪表盘提供了现成可用的模板，让您更轻松地开始构建网络应用程序。
NaiveUI
NaiveUI 是 Vue 3 的用户界面库，它提供了大量高度可定制的用户界面组件，如按钮、表单、菜单和模型，以及布局和样式设计工具。
它支持国际化（提供 10 多种语言的翻译）、暗模式和可访问性（组件设计符合 WCAG 2.0 标准）。如果您想使用 Vue 构建应用程序，它可能是构建用户界面的完美库。
NuxtLabs UI
NuxtLabs UI 为 Nuxt 应用程序提供全面的用户界面解决方案。它包括组件、图标、颜色、暗模式支持和键盘快捷键。它采用 Headless UI 和 Tailwind CSS 构建，提供 HMR 支持、捆绑图标和全键入功能，从而改善开发体验。
Radix Vue
Radix Vue 是 Radix UI Primitives 的 Vue.js 版本，这是一个开源 UI 组件库。该库的设计侧重于可访问性、自定义和增强开发人员体验。它是构建高质量设计系统和网络应用程序的坚实基础，尤其注重解决现有网络平台实施的局限性。
Draft UI
Draft UI 是一组 React 组件，它们优先考虑了网页的可访问性，并可轻松复制和粘贴到您的项目中。这些组件从 shadcn/ui 中汲取灵感，提供了对代码的完全控制，便于自定义和调整。Draft UI 兼容任何 React 框架。
Marigold UI
Marigold 是基于 react-aria 和 Tailwind CSS 的用户界面框架和组件库。其主要目标是提供一系列可访问的预设计用户界面组件，可无缝集成到任何网络应用程序中。Marigold 可帮助开发具有一致性和视觉冲击力的用户界面。
v0
v0 是由 Vercel 开发的人工智能生成用户界面系统。在您输入提示后，您将收到三个由 Shadcn UI 和 Tailwind CSS 制作的人工智能用户界面选项。您可以选择其中一个，复制其代码，或通过调整单个用户界面组件进行自定义。v0 的目标是简化您的开发工作流程，让您能够毫不费力地创建和集成漂亮的用户界面。
FloatUI
FloatUI 是一个免费、开源的现代 UI 组件和模板集合，采用 Tailwind CSS 构建，适用于 React 和 Vue。它提供精心设计的组件和即用型模板，可加快任何规模项目的开发速度。
Kitchen
Kitchen 在 React 或 React Native 中提供可定制的样式化组件。它包含遵循 WAI-ARIA 标准的可访问组件，可根据设计需求调整主题，并支持所有平台。
它还包含一个简单的响应式系统和可重复使用的钩子，确保在开发过程中提高您的工作效率。
Vant
Vant 提供各种可定制和可重用的用户界面组件，如为 Vue.js 构建的按钮、表单和导航元素。它旨在通过提供具有一致风格和行为的即用组件来简化开发流程。
Semi Design
“Semi Design” 是一个用户界面库，拥有 60 多个组件。它与 Figma 集成，实现了从设计到代码的无缝过渡。该库强调可访问性，支持国际化，并通过详尽的测试流程（单元测试、e2e 测试和可视化测试）确保严格的质量保证。此外，它还兼容 SSR，可与 Next.js、Astro 等现代工具兼容。
Vanilla Components
Vanilla Components 是一个为 Vue 3 量身定制的轻量级、适应性强的用户界面库。它使用 Vue 3、TypeScript 和 Tailwind CSS 作为基础样式，简化了所有复杂的细节，使开发人员能够专注于开发，实现更高的生产力。
React相关资源
React.js Email
React.js Email 是一个可帮助您使用 React 和 TypeScript 创建精美电子邮件的库。它带有非样式化组件，可让您更轻松地编写响应式电子邮件。它能为你处理 Gmail、Outlook 和其他电子邮件客户端之间的不一致性，所以你不必担心。它甚至还支持暗模式。
React Aria Components
React Aria Components 是构建在 React Aria hooks 之上的非样式化组件集合。它简化了自定义风格组件的构建，并抽象出了将钩子连接在一起所需的胶水代码。它目前处于 alpha 阶段，正在积极开发和维护中。
React Dev
这是 React.js 的官方网站，由 Facebook 开发和维护。它提供 React 的全面使用指南，包括文档、教程和示例。
对于想要开始使用 React 并了解 React 开发的最新更新和最佳实践的人来说，该网站是必不可少的资源。
React Email
ReactEmail 是一组高质量、无样式的 React 组件，用于创建视觉效果吸引人的电子邮件。它采用 React 和 TypeScript 开发，旨在简化创建响应式电子邮件的过程，并解决与 Gmail 和 Outlook 等电子邮件客户端不一致的问题。
React TypeScript 指南
该开源项目为将 TypeScript 与 React 结合使用提供了全面的指南和最佳实践。它涵盖了 React 开发的各个方面，包括组件、钩子和其他关键概念。该项目旨在帮助开发人员在使用 TypeScript 和 React 时编写更可靠、更可维护的代码。
Reactime
Reactime 是一款 Chrome 浏览器扩展，旨在增强现代 React 应用程序的调试功能。它具有时间旅行调试、状态组件显示、性能可视化等功能，甚至允许你以 JSON 文件的形式下载状态历史。
前端框架/库
Next.js Drupal
适用于 Drupal 的 Next.js 可让您为自己的 Drupal 网站创建高级前端。它支持各种页面渲染方法，包括 SSG、SSR 和增量静态再生（ISR）。它还支持 Drupal 的内置功能，如多站点功能、身份验证、网络表格、搜索 API、国际化（i18n）和预览模式。它可与 JSON:API 和 GraphQL 无缝协作，为 Drupal 用户提供强大而灵活的开发体验。
Nuxt Studio
Nuxy Studio 是一款网络应用程序，为 Nuxt 提供了基于 Git 的内容管理系统。通过它，您可以像在开发过程中一样通过 Github 处理内容文件。您可以根据模板创建新项目，或从 GitHub 导入现有项目，并轻松共享实时预览链接。
对于那些协作开发内容并使用 GitHub 进行版本控制的人来说，这是一款很棒的应用程序。
Astro Starlight
Starlight 是使用 Astro 框架创建文档的工具。它提供网站导航、搜索、国际化、搜索引擎优化、排版、代码高亮、暗模式等基本功能。它还支持各种标记语言，允许你使用 React、Vue、Svelte、Solid 等框架。
UnoCSS
UnoCSS 是一个实用优先的 CSS 框架，旨在提供一种直观灵活的样式编写方式。它允许开发人员直接在标记中编写 CSS，而无需担心底层结构或特殊性，从而更易于维护和重构样式。
它还包含一个灵活的主题系统，并支持多种开箱即用的 CSS 功能，如伪类、媒体查询和动画。
Next Sitemap
Next Sitemap 是一款专门为 Next.js 项目生成搜索引擎友好型网站地图的工具。它能与 Next.js 平滑集成，支持所有类型的页面渲染，包括静态、预渲染、动态和服务器端页面。该工具提供多种自定义选项，用于定制网站地图结构和内容。
Docus
Docus 是一个允许您使用 Markdown 和 Vue 组件编写文档的框架。它建立在 Nuxt 架构之上，拥有 50 多个用于构建页面、导航和目录的组件。
Docus 具有高度可扩展性，允许您自定义设计或使用 slots 添加组件，使其成为您自己的文档。
Nodl
Nodl 是一个框架，可让您为基于 Node 的应用程序创建计算节点图。通过该库，您可以轻松设计、操作和执行这些图。
如果您需要在应用程序中实现复杂数据的可视化，同时还需要为用户提供某种形式的界面来与数据进行交互，那么 Nodl 就是一个很好的库。
Unlazy
Unlazy 是一个 JavaScript 库，它提供了一种使用本机浏览器 API 轻松加载图片的方法。它可与 loading="lazy" 属性一起使用，并使用 BlurHash 算法支持（模糊）占位符图像。
该库包括自动大小计算、使用 <picture> 支持多个图片标签和搜索引擎友好等功能。该库专为现代浏览器而构建，与框架无关，允许您在有框架或无框架的情况下使用。
Nitro
Nitro 是运行网络服务器的开源 TypeScript 框架。它可通过零配置设置和 HMR 实现快速开发。您可以在任何地方进行部署，包括 AWS、Deno、DigitalOcean，甚至 Github 页面，而无需额外配置。
Panda CSS
Panda CSS 是一个 CSS-in-JS 框架，它为网页开发人员提供了一个类型安全、可扩展的 CSS-in-JS 解决方案。它允许你直接在 JS 文件中编写样式，然后在构建时提取出来。它还支持为主题创建设置高级设计标记，并提供类型安全的自动完成功能，以帮助避免常见错误并提高工作效率。
Nue.js
Nue.js 是一个轻量级 JavaScript 库，旨在简化网络开发。它是 React 和 Vue 等流行框架的替代品。通过消除钩子和道具等复杂性，Nue.js 使那些对 HTML、CSS 和 JavaScript 有基本了解的人更容易进行网络开发。尽管 Nue.js 仍在开发中，但它显示了未来的发展前景。
Stacks.js
Stacks.js 是一个快速全栈开发框架，采用 “约定重于配置 “的方法。它简化了网页和桌面应用程序、无服务器 API、云基础设施的开发，并附带一套用户界面组件。它采用 Bun, Tauri, UnoCSS, Vite, 和 Vue 等现代网络开发堆栈构建。
TresJS
TresJS 是一个在 Vue 中引入 ThreeJS 的 JavaScript 库。它简化了使用 Vue 组件创建 3D 对象的过程。因此，如果您没有三维建模方面的经验，现在也可以轻松创建带有灯光、材质和特效的令人惊叹的三维场景，给网站访客留下深刻印象。
BlockNote
Blocknote 是一个开源 JavaScript 库，用于创建所见即所得的编辑器。除了粗体、斜体和下划线等基本文本编辑功能外，它还具有一些高级功能，如实时协作、拖放块和可定制的/菜单。
它具有灵活性和可定制性，如果你想为自己的网络应用程序添加一个现代化的编辑器，它将是一个不错的选择。
UA Parser JS
UA Parser JS 是一个 JavaScript 库，用于解析用户代理字符串以提取浏览器、操作系统和设备详细信息等有价值的信息。它支持多种用户代理，并为开发人员访问解析信息提供了简单、用户友好的 API，既可在浏览器中使用，也可在 Node.js 应用程序中使用。
Ziggy
Ziggy 是专为 Laravel 设计的开源 JavaScript 库。它简化了路由处理，提供了一种从前端与后台路由无缝交互的方式。总之，它是一个使用 Laravel 构建单页面应用程序 (SPA) 的便捷库。
Shikiji
Shikiji 是一个开源 JavaScript 库，其灵感来源于流行的语法高亮库 Shiki。它侧重于对 ESM 的支持，并引入了一些变化，以增强在各种 JavaScript 引擎（包括普通浏览器、Deno、Node.js 和 Bun）中的可移植性。
SweetAlert2
SweetAlert2 是一个 JavaScript 库，用于在网络应用程序中制作具有视觉吸引力和响应性的模式对话框。它允许自定义标题、内容、图标、按钮和动画，从而增强网站的用户体验和用户界面，而不是受限于浏览器内置的警报用户界面。
Plotly
Plotly.js 是一个开源 JavaScript 库，用于创建基于网络的交互式数据可视化。它允许您创建各种图表、图形和仪表盘。它支持多种图表类型，尤其适合科学、统计和金融应用。
KaTeX
KaTeX 是一个 JavaScript 库，用于在网络上快速、高质量地渲染数学表达式。它轻便、高效，非常适合在网络应用程序中加入 LaTeX 表达式，而无需进行繁重的处理。
Tremor
Tremor 是专为构建仪表盘而设计的 React 库。通过它，您可以毫不费力地创建从简单到高级的各种复杂仪表盘。它完全开源，由数据科学家和具有敏锐设计眼光的软件工程师团队开发。
useCannon
useCannon 是一个 React.js 钩子，可让您轻松地将物理模拟集成到您的 React.js 应用程序中。您可以创建具有质量、力和速度的对象，应用重力和其他力，甚至检测对象之间的碰撞。它是使用 React.js 创建逼真 3D 模拟和游戏的绝佳工具。
Million
Million.js 是一个轻量级库，可显著增强 React 组件的性能。该库只需封装组件即可与 React 无缝集成。它能优化虚拟 DOM，从而提高渲染和加载效率，最高可提高 70%。对于那些希望优化 React.js 应用程序的人来说，使用 Million.js 可以让他们轻松获胜。
useHooks
useHooks 是一个用 TypeScript 编写的自定义 React 钩子库。它为常见的 React 开发任务提供了实用工具。您会发现像 useEffectOnce （只运行一次代码）、 useScript （脚本加载）等更多钩子。
Superplate
Superplate 是 React 和 Next.js 的即用前端模板，支持 TypeScript。它包含一系列流行的库，如 React Testing Library、styled-components、React Query、Axios 和 Prettier。CLI 界面简化了项目设置，无需额外配置。真正的极品
Drei
Drei 是一系列用于 react-three-fiber 的实用程序和组件。它简化了 React 环境中的常见模式，提供了组件和辅助工具来简化 3D 应用程序的创建。
CSS相关资源
CSS clamp() Calculator
CSS clamp() 是 CSS 中的一项功能，可根据视口大小在最小值和最大值之间设置一个值。不过，设置这些值有时会令人困惑。CSS clamp() Calculator 工具可帮助您更轻松地计算和生成网站所需的箝位值。
Native CSS Masonry Layout
CSS masonry 布局在用户界面和用户体验设计师中越来越受欢迎。
Native CSS Masonry Layout 由 Pinterest 推广而来，在 Pinterest 中，元素的排列是为了填补垂直间隙，而不是与行轴对齐。
有许多 JavaScript 库可以在网站上添加砖石布局。但很快您就可以只使用 CSS 来实现它。无需 JavaScript。
Windstatic
Windstatic 是用 Tailwind CSS 和 Alpine.js 制作的 161 个元素和布局的集合，具有视觉吸引力的设计，是您下一个项目的良好基础。在该合集中，你可以找到一些常见的设计模式或布局，如英雄部分、网格布局、CTA、推荐等。
AlmondCSS
无类 CSS 样式集，旨在改善简单网站的外观。AlmondCSS 将 CSS 样式规范化，以实现跨浏览器兼容性，并添加了可个性化的自定义样式。
该项目的目标是只使用标签，实现跨浏览器兼容，易于设计主题，响应迅速，易于访问和使用，轻量级，并保持设计简洁而优雅。
Gradient Style
Gradient.style 是一个用户友好型网站，用于生成 CSS 渐变。它支持各种渐变类型、实时预览，并能生成相应的 CSS 代码，方便添加到网站中。此外，它还支持最新的 CSS Color 4 规范，包括 oklch, lch, 和 hsl。
后端开发
API相关资源
OpenAPI Generator
OpenAPI Specification 是一个被广泛采用的 RESTful API 文档标准，它促成了一个可互操作工具和库的生态系统。
通过 OpenAPI Generator 工具，您可以根据规范（第 2 版或第 3 版）自动生成 API 客户端库、服务器存根、文档和配置。它有助于加快开发速度并保持一致性。
EnvShare
EnvShare 是一款用于共享环境变量的安全工具。通过 EnvShare，你可以发送链接并限制链接的读取次数，从而安全地共享环境变量。
链接可以设置为在一定时间后自动失效，确保数据在不再需要时被删除。在向服务器发送数据前，它使用 AES-GCM 加密技术对数据进行加密，确保数据安全传输。
AsyncAPI
AsyncAPI 是一项开源计划，致力于为事件驱动的应用程序接口创建一个标准。它为异步应用程序接口的结构定义提供了一个规范，其格式易于不同工具和平台共享、理解和实施。
通过推广设计、记录和测试 API 的标准化方法，它有助于改善构建系统的团队之间的沟通与协作。
HTTPie App
HTTPie 发布了一款用于与 API 交互的网络应用程序。该应用程序提供终端版本的功能，但用户界面更加时尚。用户可以通过网络应用程序实现以下功能：
- 轻松使用 API
- 利用人工智能辅助，使工作更加顺畅
- 用空间和集合组织应用程序接口
- 添加参数化请求
- 实现多设备无缝同步
此外，即使在离线或没有账户的情况下，该应用程序也能让用户构建和预览请求。
OFetch
OFetch 是 Fetch API 的增强库，旨在与 Node.js、浏览器和 Worker 兼容。它通过促进自动 JSON 解析、有效的错误管理和提供 “重试 “选项来简化 HTTP 请求和响应管理。鉴于其轻量级特性，OFetch 是通过 API 获取数据的最佳选择。
Next Intl
Next Intl 简化了为 Next.js 应用程序添加国际化的任务。它提供了一个强大而简单的 API 来处理多种语言，并包含富文本 ICU 消息语法以及日期、时间和数字格式化等功能。由于只使用钩子 API，它既类型安全又高效。
JSON Server
JSON Server 是一款 REST API 模拟工具，用于快速制作和测试前端应用程序的原型。它基于 JSON 文件生成一个模拟服务器，允许开发人员模拟 CRUD（创建、读取、更新、删除）操作，并为测试和开发定义路由和资源。它支持过滤、排序和分页等功能。
PHP相关资源
PXP
PXP 是 PHP 编程语言的一个功能强大的超集，旨在改善开发人员的使用体验。它提供了一套扩展的语法规则和语言特性，使编码更具表现力和效率。
PXP 的关键功能之一是其扩展的类型系统，它可以进行更强大的静态分析。在撰写本文时，PXP 正在积极开发中，我热切地期待着看到它将如何影响未来的 PHP 开发。
Skeleton PHP
Skeleton PHP 是一个 PHP 软件包，为构建现代 PHP 应用程序提供了一个简单而现代的模板代码库。它遵循 PSR-4 命名约定，并包含用于 PHPStan 和 PHPUnit 等开发工具的基本配置。
它还包括示例文件和测试用例，帮助开发人员快速入门。该软件包可帮助您快速构建 PHP 应用程序，而无需花费大量时间进行设置和配置。
Laravel Pennant
Laravel Pennant 是 Laravel 团队随 Laravel 10 一起发布的一个官方软件包，它为 Laravel 开发人员在其应用程序中使用功能标志（Feature Flags）提供了一种简便的方法。
Feature Flags 是一种发布机制，允许开发人员根据特定的用户条件启用功能，逐步分阶段发布，并在向所有用户全面推出之前进行 A/B 测试。
Docker Image PHP
来自 ServerSiderUp 的 Docker 镜像（Docker Image PHP）可让您运行 PHP 应用程序。它已为生产做好准备，并预置了许多功能，包括 Nginx、PHP-FPM 和自动健康检查。
它还针对 Laravel 进行了高度优化，包括并处理队列、任务、存储链接和开箱即用的迁移。它是 PHP 官方 Docker 镜像的最佳替代品之一，而且运行速度更快。
Plugin PHP
Plugin PHP 是 Prettier.io 的功能扩展，可实现 PHP 代码的自动格式化。您可以利用该工具确保您的 PHP 代码和您的团队遵循标准化、易读的格式。请在其 Online Playground 上试用，看看它是如何运行的。
JSON Parser
JSON Parser 是一个零依赖的 PHP 库，设计用于从各种来源高效读取大型 JSON 数据。它支持字符串、数组、文件路径、流、API 端点 URL 等。该库甚至允许实现默认不支持的自定义来源。
Castor
Castor 是一款基于 PHP 的任务运行程序或命令工具，可增强开发人员的使用体验。它能简化输入处理、支持自动完成、顺利执行进程、实现并行处理、在文件修改时触发操作、提供可定制的通知并提供日志记录。Castor 可以替代 Makefile 和 Shell 脚本等工具。
NativePHP
在 Laracon 2023 大会上亮相的 NativePHP 是一个专为使用 PHP 快速创建本地桌面应用程序而设计的框架。它对用户友好，既适合经验丰富的 PHP 开发人员，也适合初学者，便于使用 HTML、CSS、JavaScript 和 PHP 进行跨平台应用程序开发。NativePHP 为应用程序开发领域带来了新的可能性，尤其是对那些有 PHP 背景的人来说。
Lighthouse PHP
Lighthouse PHP 能完美地将GraphQL整合到PHP应用程序中。它采用模式优先（schema-first）方法，可与Laravel Eloquent轻松集成。Lighthouse PHP提供GraphQL指令、身份验证、分页、排序和强大的错误处理功能。
Brick DateTime
Brick DateTime 提供了一系列不可变类，用于在 PHP 中轻松处理日期和时间。它建立在 PHP 的本地日期时间类之上，并通过额外的概念和 API 扩展了这些类的功能。其中包括 LocalDate, LocalTime, YearMonth, 和 MonthDay。这些类符合 ISO 8601 标准，确保开箱即能准确地表示日期和时间。
Hyperf
Hyperf 是一个高性能、灵活、可扩展的框架，用于使用 PHP 制作现代化、可扩展的网络应用程序和微服务。它的速度、用户友好性和管理并发连接的能力尤其受到认可。此外，Hyperf 还提供了一整套开箱即用的功能，包括路由器、数据库适配器、中间件等。
LaRecipe
LaRecipe 是一个 PHP 库，用于简化基于 Laravel 的项目中产品或应用程序的文档创建。它使开发人员能够直接在代码中使用 markdown 格式生成和管理文档，便于随着项目的发展进行维护和更新。
PHP ECMA Intl
PHP ECMA Intl -该 PHP 扩展程序遵循 ECMA-402 国际化标准。它提供了用于管理本地敏感数据（如日期、时间、货币和数字）的函数和类。有了这个扩展，您就可以确保使用 PHP 的网络应用程序具有一致和安全的国际化内容。
Laravel相关资源
LemonSqueezy Laravel
LemonSqueezy Laravel 软件包简化了将你的Laravel应用程序与Lemon Squeezy集成的过程。通过该软件包，你可以为你的产品设置付款方式，并使客户能够订阅你的产品计划。它还可以管理宽限期、订阅暂停和免费试用等功能，使设置过程毫不费力。
Laravel Herd
Herd 是 Laracon 2023 上介绍的另一个工具，是 Laravel 开发的新成员。它提供了一个无需依赖的一键式 PHP 开发环境。Herd 专为 macOS 打造，是一个速度极快的原生环境，包含启动 Laravel 项目所需的一切，从 PHP 到 nginx。
Orchid Software
Orchid 是一个开源平台，专为使用 Laravel 构建管理面板而设计。它具有可视化生成器、可定制主题和访问控制功能。它还提供数据可视化和可扩展功能，允许开发人员在其基础上添加新功能。
Wave
Wave 是基于 Laravel 框架开发的终极软件即服务（SaaS）入门套件。它提供了一个强大的基础，具有身份验证、订阅、发票、公告和用户配置文件等功能。这使它成为构建 SaaS 项目的理想基础。
Canvas
Canvas 是一个开源软件包，可在几分钟内建立一个博客，从而增强您的 Laravel 应用程序。它提供了一个无干扰的写作环境，并能提供每月趋势、流量和其他统计数据等有价值的见解。这些见解提供了宝贵的数据，丰富了您的博客体验。
TastyIgniter
TastyIgniter 是在 Laravel 基础上开发的具有在线订餐功能的开源餐厅管理系统。它通过用户友好的界面处理在线订餐、管理菜单、处理订单和处理餐桌预订，从而简化了餐厅运营。它还提供多语言支持，并允许通过扩展和主题进行定制。
Laravel Compass
Laravel Compass 是一个开源的 Laravel 软件包，可用于测试 API 调用或根据定义的路由生成交互式 RESTful API 文档。它支持所有标准 HTTP 方法和各种身份验证机制，并与 OpenAPI 规范兼容。如果你正在寻找一个简单的工具来开发与 Laravel 完美集成的 API，那么这个软件包值得你安装。
TypiCMS
TypiCMS 是使用 Laravel 构建的开源内容管理系统。它提供内容管理、用户管理、多语言支持和可定制主题等基本功能。它的模块化架构允许与现有的 Laravel 安装轻松集成，并使开发人员能够根据需要扩展或包含特定功能。
Jigsaw
Jigsaw 是一款开源的静态网站生成器，利用 Laravel 的刀片模板和 Markdown 进行内容创建。它可以管理资产编译，提供本地开发服务器，并包含网站的基本功能，如 Markdown 支持、分页、可定制主题等。如果你喜欢使用 Laravel 或 PHP，那么这个库是构建静态网站的绝佳选择。
Laravel Folio
Laravel Folio 引入了基于页面的路由器，减少了 Laravel 应用程序中路由的复杂性。通过与应用程序 resources/views/pages 目录中的 Blade 模板无缝集成，路由变得更加简单。不过，您仍然可以使用 Laravel 在传统路由器中提供的所有强大功能，包括中间件、缓存、模型绑定等。
教程资源
使用 React 和 TypeScript 构建动态头像组件
这是一门免费的 TypeScript 课程，旨在教授该语言的实际用法。它展示了使用 TypeScript 的好处，特别是在提高类型安全性和避免错误方面。
它将通过使用 React 和 TypeScript 构建动态头像组件来介绍 TypeScript 在现实世界中的使用，这是大多数具有登录系统的应用程序中的常见功能。如果你想学习 TypeScript，本文将是一个良好的开端。
Next.js 13 速成班
由 Traversy Media 制作的免费 Next.js 课程。它介绍了 Next.js 13 并涵盖了其中的一系列主题，包括浏览新功能、设置 Next.js 项目、使用页面和组件、使用 CSS 模块设计样式以及部署。
如果您已经熟悉 React，并希望学习如何使用 Next.js 构建可扩展的网络应用程序，那么这将是一本非常棒的教程。
Styling a “pre” that Contains a “code”
在 Styling a “pre” that Contains a “code” 一文中，meyerweb 的创建者 Eric A. Meyer 分享了他使用 CSS :has() 选择器为包含 code 元素的 pre 元素设计样式的经验。他深入浅出地介绍了如何使用现代 CSS 语法在保持网站语义的同时，实现具有视觉吸引力的设计。
New to the web platform
Chrome DevRel 团队推出的 “New to the web platform” 系列介绍了稳定版和测试版网络浏览器新增的有趣功能。这是一个非常好的系列，可以帮助您走在时代前沿，创造最先进的网络体验。
Node.js 全栈开发人员
另一个免费课程将教您如何使用 MEEN 协议栈（MariaDB、Nginx、Express 和 Node.js）构建一个正常运行的照片共享应用程序。您将学习如何设置和使用 Node.js、NPM 和 MariaDB，以及路由和中间件等技术概念。
对于想要学习全栈 Node.js 和 JavaScript 开发技能的任何技能水平的开发人员来说，这都是一门很好的课程。
用 Git 学习版本控制
这是一门适合初学者的免费视频课程，教授 Git 的基础知识，涵盖从安装 Git 和版本控制基础到高级主题的所有内容。
课程分为简短、循序渐进的视频，每课只关注一个主题，平均时长仅 5 分钟。这样，即使每天只有一个短视频，您也可以按照自己的节奏学习。
与杰克一起学习 Statamic
Laracasts 上的免费课程，教授如何使用使用 Laravel 的内容管理系统 Statamic。课程涵盖的主题包括构建附加组件和入门套件，以及了解 Statamic 如何在引擎盖下工作。更棒的是，本课程由 Statamic 的创建者 Jack 讲授。
PHP速成课程
由 @TraversyMedia 提供的 PHP 入门课程是一个 3 个多小时的速成课程，是学习 PHP 的第一步。
它涵盖了 PHP 的所有基础知识，包括使用 XAMPP 设置开发环境、配置 VS Code 和自动重新加载、学习构造和函数、了解数据类型和变量、使用数组以及使用条件。
多年来，PHP 一直在稳步发展和不断改进。如果您想入门 PHP，这是一个很好的视频课程。
React.js 纪录片
这段来自 Honeypot 的 YouTube 视频将带您回顾 React 早期的故事，其中包括对在其开发过程中发挥关键作用的不同开发人员的采访。看到 React.js 如何从零起步到现在成为一个被广泛使用的库，感觉非常酷。
AI 驱动的 Laravel 错误解决方案
这篇来自 Marcel Pociot 的博文深入探讨了如何使用人工智能来解决 Laravel 应用程序中的错误。他分享了自己对创建有效提示的见解，并提供了详细的技术解释。
此外，他还就开发人员如何将这项技术集成到自己的应用程序中提供了指导。如果您有兴趣在您的开发工作流程中利用人工智能，这是一个宝贵的资源。
基于动态组件架构的现代 CSS
随着越来越多的网站采用基于组件的架构，本文将探讨 CSS 的最新功能和改进，重点关注主题化、响应式布局和组件设计。其中包括代码组织示例、网格和容器查询等布局技术以及其他实际示例。
HTML5 Canvas 速成班
本 YouTube 教程涵盖 HTML5 画布的基本要素，包括设置画布项目、绘制圆圈、添加鼠标交互性和制作粒子系统，所有这些都从头开始，无需使用库。如果您希望掌握创造性的前端网络开发，本教程将是您的不二之选。
Naming Things
本视频探讨了代码中元素命名的常见问题，并就最佳实践提出了宝贵建议。它探讨了命名规范的各个方面，包括变量名中单字母变量、缩写、类型和单位的使用。它充满了有价值的见解，我相信这些见解能帮助你成为一名更好的开发人员。
Bite-Sized Accessibility
本网站提供简短易懂的网络可访问性课程。每节课都以 “一口大小 “的形式呈现，并配有清晰的解释和示例，便于理解和应用所涵盖的概念。
它涵盖了一系列主题，包括色彩对比、键盘无障碍性、屏幕阅读器兼容性等。对于任何希望提高无障碍知识的人来说，这都是一个很好的资源。
WordPress Developer News
WordPress 开发者博客是 WordPress 为开发者提供的新的官方资源，让开发者了解与开源项目相关的最新软件功能、教程和学习材料。
它涵盖的主题包括主题和区块开发教程、WordPress API、最佳实践和学习资源，无论您是 WordPress 开发人员的初学者还是经验丰富的开发人员。
Build a MERN React Admin Dashboard
在本视频中，您将学习如何使用 MERN（MongoDB、Express、React、Node）堆栈开发和部署堆栈管理仪表板。在前端开发过程中需要使用大量库和工具，包括 Material UI、Material UI Data Grid、Nivo Charts、Redux Toolkit 和 Redux Toolkit Query。
而在后端，则需要使用 Node.js、Express、Mongoose 和 MongoDB。该教程长达 7 小时！对于想要学习成为全栈开发人员的人来说，这是一个很好的资源。
ChatGPT 速成班
Traversy Media 提供的又一精彩免费课程。本课程将向您展示作为开发人员有效利用 ChatGPT 的 10 种方法，例如如何使用它生成文档、示例数据、解释错误等。这些方法不仅能提高您的工作效率，还能提高您作为开发人员的技能。
Patterns Resources
Patterns Resources 网站收集了为 React.js、Vue.js 和 Angular 等各种框架构建网络应用程序的设计模式和最佳实践。其中包括文章、资源库和代码片段等资源，涵盖架构、测试和安全等各种主题。
对于希望提高对一些流行开发模式的理解的架构师或技术负责人来说，这是一个完美的资源库。
TotalTypeScript Tips
本视频集提供了有用的提示，可帮助您更好地理解 TypeScript 并有效解决常见问题。每条提示都以简明、带注释的视频形式呈现，时长在 2-5 分钟之间，是寻求快速、实用的 TypeScript 故障排除技巧的用户的首选资源。
TypeScript 挑战视频
本视频集包含 100 多个解决各种 TypeScript 挑战及其解决方案的视频。每个视频的长度因主题而异；有些简明扼要，有些则可能超过 1 小时。对于希望提高 TypeScript 技能的人来说，这是一个值得收藏的综合视频集。
其他工具和资源
开发工具
VSCode Settings
VSCode Settings 是一个资源库，其中包含 Visual Studio Code（VS Code）中的各种意见设置和扩展，如主题、字体、缩进和键盘快捷键。
不过，您仍然可以挑选最适合自己需要的设置和扩展。如果你想改善开发体验，Visual Studio Code 是一个很好的灵感来源。
VSCode Blade Formatter
VSCode Blade Formatter 是一个 Visual Studio Code (VSCode) 扩展，用于在 Laravel 项目中自动格式化 Blade 模板。它提供可定制的规则和无缝集成，确保你的代码保持一致和井井有条。如果你是一位使用 VSCode 的 Laravel 开发者，那么这个扩展是你的必备之选。
TotalTypeScript VS Code
此 VSCode 扩展可帮助您在 VSCode 编辑器环境中无缝学习 TypeScript。它提供语法方面的有用提示，并针对复杂的错误提供直接的文档链接。对于经验丰富的开发人员，尤其是初学者来说，这是一款全面的工具。
Noctis
Noctis 是 VSCode 的明暗主题集，旨在减轻眼睛疲劳。它有 11 个版本，包括 8 个深色主题和 3 个浅色主题，每个主题都有不同的调色板，从非常深的冷蓝绿色到非常浅的暖橙色。
Vesper
Vesper 是一款免费的 VS Code 主题，它提供了简洁明了的视图，让你在编码时倍感舒适。它的深色背景搭配薄荷和橙色语法高亮颜色，有助于减轻长时间编码时的眼睛疲劳。
它在 VS Code Marketplace 上提供，只需点击几下即可安装。如果你想更新你的代码编辑器，这可能是一个不错的选择。
Clack
Clack 是一个 NPM 软件包，能让你在 Node.js 中轻松构建命令行界面（CLI）。它的体积比同类软件小 80%，并提供了简单的 API，如 text, confirm, select, 和 spinner 功能。
该软件包已经配备了漂亮的用户界面，开发人员使用它可以毫不费力地在几分钟内创建出漂亮的交互式 CLI。
Slic
Slic 是一款 CLI 命令工具，可为运行自动化测试提供一个容器化环境。它专为 WordPress 和 Codeception 而设计，可简化测试的设置过程，并确保测试运行的一致性。
此外，它还提供了有用的开发工具和实用程序，供项目开发或 CI 构建时使用。
cSpell
cSpell 是一种命令行工具和库，用于对代码进行拼写检查。它旨在帮助捕捉编程和技术文档中常见的拼写错误和错别字，并可通过编辑器扩展、构建工具和其他集成整合到开发人员的工作流程中，还可通过用户自定义字典和配置文件进行定制。它支持多种语言，包括英语、德语、法语和西班牙语。
它是开发人员和技术撰稿人避免错别字的有用资源。
trurl
trurl 是一种命令行工具，用于简化 shell 脚本的 URL 解析和操作。它与 curl 命令行工具使用相同的 URL 解析器，因此无需重新发明轮子。它还能解决安全问题，让 URL 处理变得更简单，是在脚本和命令行界面中处理 URL 的完美辅助工具。
EnvPane
EnvPane 是一款用于管理 macOS 环境变量的便捷应用程序。它允许你通过友好的用户界面轻松查看、添加、编辑和删除环境变量，而无需命令行操作或手动编辑配置文件。
QNM
QNM 是一款命令行工具，用于查询 node_modules 目录。它提供了一种快速检查模块版本的方法，而不受 npm list 等类似解决方案的限制。QNM 只提供相关模块信息，同时支持 npm 和 yarn。
Devpod
Devpod 是一款旨在简化开发环境的工具。它支持 devcontainer.json 设置，并能分析项目以确定最佳环境。作为一款采用声明式文件标准的开源工具，它提供了功能强大的桌面应用程序和命令行界面（CLI），无需锁定供应商或进行服务器端设置。DevPod 可为任何基础架构、集成开发环境或编程语言创建可重复的开发环境。
Dprint
Dprint 是一款强大的自动化代码格式化命令行工具。它使用 Rust 开发，为各种代码格式化任务提供了一个灵活的平台。它的独特功能之一是利用 WebAssembly 的插件架构。你可以从 URL 或本地文件系统导入这些插件。包括官方插件在内的这些插件都具有很强的可定制性，让你可以根据自己的特殊需要调整代码格式。
CodeEdit
CodeEdit 是一款专为 macOS 设计和开发的开源轻量级工具。它采用 Swift 构建，运行效率更高，在 macOS 上的编辑更流畅、更快速。尽管它尚未准备好投入生产，但在撰写本文时，它有可能成为最受 macOS 用户欢迎的代码编辑器之一。
TypeTrials
TypeTrials 是一款免费的网络工具，允许用户试验和测试各种字体（包括可变字体和静态字体），并创建快速设计与他人分享。该工具专为想要充分挖掘不同字体潜力的人设计。
Spaghettify
Spaghettify 是一款 VS Code 扩展工具，旨在使用人工智能将您的代码库重写为意大利面条代码。它旨在成为一款寓教于乐的工具，让开发人员体验编写糟糕代码的负面影响。请不要在您的生产网站中使用真正的意大利面条代码！
Houston
HoustonAI 是一个实验性的支持机器人，旨在帮助用户使用 Astro – 一种适用于现代网络应用的静态网站构建工具。该机器人由 GPT-3 和 LangChain 提供支持，并在 Astro 文档网站上接受培训。目前它还处于实验阶段，可能会返回错误的答案。但看到人工智能将如何改变我们的学习方式，还是令人兴奋的。
TS-REST
TS-REST 是一种为网络应用程序接口提供端到端类型安全的合约定义方法的工具。可以使用 Zod schema 或 TypeScript 类型轻松定义合约。
它经过了良好的测试，可随时投入生产，并且与框架无关，因此可以与 Express、Nest、Next 和 react-query 等多种框架一起使用。
Stark Accessibility Checker
Stark Accessibility Checker 是 Google Chrome 浏览器的一个扩展，它提供了一套用于测试网站可访问性的集成工具。其功能包括对比度检查器、视觉模拟器、Alt-Text 注释和排版分析，可帮助您发现并修复网站的可访问性问题。
Transforms
Transforms 为开发人员提供各种数据转换工具。例如，您可以将 SVG 转换为 React.js 或 React Native，将 HTML 转换为 JSX，将 JSON 转换为多种数据类型，包括 TOML、YAML、JSDoc、GraphQL 等。它超级方便，我认为所有开发人员都应该把它加入书签。
Zed
Zed 是一款代码编辑器，可与电脑硬件配合使用，提供即时反馈，让您始终处于编码流程中。它能让你快速高效地编写代码。
它有很多功能，包括自动完成、代码导航、诊断和重构。此外，Zed 还包含集成终端、Vim 模式和各种主题。
Fleet
JetBrains Fleet 是一款快速易用的文本编辑器和集成开发环境。它支持多种编程语言，并能从源代码中自动检测项目配置。这使它更易于使用，并节省您的时间。
Fleet 还能为不同类型的项目提供一致的用户体验，因此你只需使用一个集成开发环境即可满足所有编程需求。
Zap
Zap 是 Zsh 的插件管理器，可简化插件、主题和配置的安装、更新和管理。它提供了大量社区贡献的插件，包括语法高亮、Git 集成、NVM 等选项，让你增强电脑的终端体验。
Pasteboard-Viewer
Pasteboard-Viewer 是一款 macOS 应用程序，它为检查系统剪贴板的内容提供了一种便捷的方式。通过它，你可以查看和分析剪贴板中存储的数据，这对于排除故障、调试或简单了解复制的数据非常有用。
Lucia Auth
Lucia 是一个用户和会话管理库，为身份验证提供了一种直接而灵活的方法。它充当应用程序与数据库之间的中介，提供简化且易于理解的解决方案。Lucia 采用简约设计，注重简洁性和用户友好性。
Plane
Plane 是提供数据库适配器，可与流行的数据库和 ORM 无缝集成，并支持 SvelteKit、Next.js、Express 和 Astro 等框架。它还包括用于处理 OAuth 等身份验证策略的软件包，为开发人员提供了灵活的解决方案。
Unhead
Unhead 是一款与平台无关的通用文档 <head> 标签管理器。它提供一个直观的 API，具有自动重复数据删除和排序功能。它还包括用于优化标签和推断搜索引擎优化元标签的强大插件。Unhead 与运行时构建兼容，可将客户端开销降至最低，并提供全面的可扩展性。
Twolash
Twolash 是 Shiki 的扩展，可简化 JavaScript 和 TypeScript 语言的代码嵌入。它通过文本编辑器编译器 API 提供类型驱动的洞察力和错误检测。代码示例在服务器端生成，以减少对客户端 JavaScript 的依赖。对于那些希望向受众展示详细代码片段的人来说，这是一个极好的库。
Lerna
Lerna 是一款著名的开源工具，可在单个资源库中管理多个软件包。最近，它被 NX 背后的团队收购，并重新确定了方向和重点。有了 Lerna，升级多个软件包的版本并随后将它们发布到 NPM 注册表变得轻而易举。对于包含多个需要同时进行开发和版本控制的相关软件包或库的项目来说，这是一个非常宝贵的工具。
Valibot
Valibot 是一个一体化数据验证库，可无缝集成来自服务器、表单和配置文件的数据。令人印象深刻的是，它不依赖于任何外部组件，并且兼容各种 JavaScript 环境，包括浏览器、Node.js 和 Deno。该库对于确保数据输入和输出的准确性至关重要。
Consola
Consola 是一款现代的、可高度配置的日志记录器，适用于 Node.js 和浏览器环境。它旨在为开发人员提供一种高效、可定制的方法，用于在开发和调试阶段管理日志和输出信息。用户可以配置日志显示，引入自定义格式、时间戳和颜色编码，并应用各种样式和主题。
Untun
Untun 提供了一个有用的工具，可让您使用 Cloudflare Quick Tunnels 建立从本地 HTTP（s）服务器到全球互联网的 “隧道”。该工具对于在各种设备（包括移动设备）上测试网络应用程序非常有价值，而且无需部署在公共服务器上。
Git 相关
Grep
Grep.app 是一款面向开发人员的搜索引擎，允许您在 GitHub、GitLab 和 NPM 等软件仓库和软件包管理器中搜索数十亿行代码。
它通过上下文高亮显示搜索结果，并可按语言、文件类型、项目和日期进一步过滤和排序。如果你想搜索特定代码用于研究、调试或仅仅是寻找灵感，那么它就是一个非常有用的搜索引擎。
Ripgrep
Ripgrep 是一款面向行的开源快速搜索工具，可在当前目录下执行递归 regex 模式搜索。它能自动遵守 gitignore 规则，跳过隐藏/二进制文件，并可高度配置以排除特定文件或目录。它可跨平台运行，并与 Git 无缝集成。
Drift
Drift 是 GitHub Gist 的克隆版，允许你自行托管代码和文本片段。它支持 GitHub Extended Markdown、用户认证以及私人和公开发布。其他功能还包括语法高亮和文件上传功能。
Google Github Actions
Release Please Action 是 Google 推出的一款 GitHub 工具，可自动为 GitHub 项目进行版本管理并生成发布版本。它会分析你的提交历史，根据语义版本规则确定下一个版本，创建一个新的发布分支，并生成必要的拉取请求和发布。
Gogs
Gogs 是一个用 Go 编程语言编写的自托管 Git 服务。它旨在成为 GitLab 和 GitHub 等其他 Git 托管系统的易用、轻量级替代品。Gogs 支持创建仓库、用户身份验证、协作功能等，为在基础架构内管理 Git 仓库提供了一个全面的解决方案。
开源项目
Automatisch
Automatisch 是一款自动化工具，可连接 Twitter 和 Slack 等不同服务，无需编程技能即可实现工作流程自动化。它与 Zapier 相似，只是它是一个开源工具。
由于可以将数据存储在自己的服务器上，因此灵活性更高，如果企业要处理敏感信息，这一点尤为重要。
Frontend Learning Kit
Frontend Learning Kit 是一个开源项目，提供了一个相当全面的前端学习资源列表，包括视频教程、在线课程和书籍，涵盖 HTML、CSS、JavaScript、React、Redux 等广泛主题。
这些资料都经过精心挑选并定期更新，无论你是刚刚入门还是正在提高前端技能，它都是一个非常有价值的工具。
MRSK
MRSK 是 Basecamp 公司推出的一款新工具。它可以使用 Docker 将网络应用程序部署到从裸机到云虚拟机的任何环境中，而无需停机。它使用 Traefik 作为动态反向代理，在容器切换过程中管理请求。虽然最初是为 Rails 应用程序构建的，但它可以与任何网络应用程序配合使用。
Bearclaw
Bearclaw 是一款简化从 Markdown 生成网站的工具，无需模板语言知识。您只需在 Markdown 文件中添加内容，然后运行该工具将其转换为 HTML，即可部署到 Github Pages 或任何服务器上。它不需要框架、NPM 或任何复杂的配置。它只需运行即可。
SaasKit
SaasKit 是一款免费、开源、现代的模板，专为满足典型的 Saas 需求而设计。它具有一系列功能，包括登陆页面、通过 Stripe 进行订阅计费、客户门户、用户认证、搜索引擎优化友好和移动友好。
它建立在 Fresh 和 Deno 这两种快速可靠的技术之上，使网络应用程序开发变得简单，并为开发人员提供了良好的体验。
Infisical
Infisical 是一个开源的端到端加密秘密管理平台。它集中管理 API 密钥、数据库凭证和配置等秘密，提供用户友好的仪表板，便于跨团队、跨项目和跨环境管理。它还通过 SDK 和 CLI 提供无缝集成，包括简单的 AWS 或 Digital Ocean 部署。
Leantime
Leantime 是一个开源的精益项目管理系统。它提供任务跟踪、里程碑管理、团队协作和时间跟踪等一系列功能。作为 ClickUp、Notion、Asana 等 SaaS 平台的绝佳替代品，它适用于从初创公司到企业级业务的各种需求。
Katana
Katana 是一个开源的爬行和网络蜘蛛框架。它具有强大的功能，如可定制的蜘蛛搜索规则、并发控制、动态目标发现以及对各种输出格式的支持。
Lychee
Lychee 是一个基于网络的照片管理系统，可在数秒内安装到您的服务器上。您可以像使用本地应用程序一样轻松上传、组织和共享照片。它提供所有必要的功能，确保您珍贵照片的安全存储。
Alf
Alf 是一个门票预订系统，专为会议、贸易展、研讨会和聚会等活动设计。它是一个免费、开源和自托管的平台，对于寻求隐私、安全和与会者公平定价政策的组织者来说，它是一个理想的平台。
Clear
Clear 是一款独特的图像搜索引擎，完全在客户端运行，无需后台服务器。它不存储图像，也不建立搜索索引，为图像搜索提供了一种全新的方法，同时确保了隐私并消除了数据存储需求。
Automatisch
Automatisch 是一款业务自动化工具，集成了 Twitter 和 Slack 等服务，可简化工作流程。它可以在您自己的服务器上运行，以加强隐私保护和 GDPR 合规性。Automatisch 可简化自动化，无需编程知识或高成本，也不会锁定供应商。
Coolify
Coolify 是 Heroku 和 Netlify 的开源替代品，可以自行托管。通过它，您可以在自己的机器或硬件上托管应用程序、数据库和开源服务。对于喜欢内部托管并希望保持独立于大型云提供商的公司、团队、业余爱好者和个人来说，它是一个理想的解决方案。
Cachet
Cachet 是一个开源状态页面系统，可让您随时向用户通报服务事故、维护和正常运行时间。它提供简便的定制、事件跟踪、API 支持和用户通知功能。
Plane
Plane 是 JIRA 或 Linear 的开源替代产品。它为问题跟踪、史诗管理和产品路线图提供了解决方案。它还具有富文本编辑器、文件附件、自定义布局、周期规划、模块细分、自定义过滤器等基本功能，甚至还能与 GitHub 同步，以加强跟踪和协作。
Astro Portofolio
这款 Astro 模板专为建立作品集网站而设计。它由 Astro 设计团队精心打造，展示了一个突出您的技能和近期项目的登陆页面。其他功能还包括用户友好的明暗模式切换、所有页面上醒目的 “联系请求”、字体安全的前台以及精心挑选的图标集。
Siyuan
Siyuan 是一款开源、自托管的笔记和知识管理应用程序。它拥有大量用于制作和组织笔记、文档和其他内容类型的功能。例如，你可以使用 Markdown 来设置笔记格式，按层次排列笔记，为不同的笔记类型设计自定义模板，等等。
Medusa
Medusa 提供一套开源模块和工具，用于简化电子商务应用程序（包括在线商店和市场）的开发。这些模块涵盖了库存、购物车、结账、订单和产品等基本功能。最棒的是什么？您可以轻松定制它们，以满足您的特定需求。
Dub
Dub 是一个开源链接管理解决方案，基于 Vercel Edge Functions、Upstash Redis 和 PlanetScale MySQL 等技术构建。它为创建、共享和跟踪短链接提供了一种简化的方法。Dub 具有内置分析、自定义域支持、二维码生成和 OG 图像代理等功能，可简化短链接管理。
OpenStatus
OpenStatus 是一个使用 Next.js、TailwindCSS 和 shadcn/ui 构建的自托管开源状态页面系统。它提供实时服务健康状况更新和定制功能，并可与其他监控工具集成。这使它成为希望透明传达服务状态的企业的绝佳选择。
Outstatic
Outstatic 是专为 Next.js 定制的静态网站内容管理系统（CMS）。它拥有友好的用户界面，不需要外部数据库。设置简单快捷，支持自定义字段。您可以自由选择将其托管在任何服务器上。
Peppermint
Peppermint 是 Zendesk 的自托管替代产品，具有基于 Markdown 的票单创建、客户历史跟踪和响应式设计。它包括一个同样使用 Markdown 的笔记本功能。您可以使用 Docker 和 pm2 将其轻松部署到自己的服务器上。
Formbricks
Formbricks 是一款开源调查和体验管理解决方案。它具有无代码编辑器、模板、目标调查、可共享链接、团队协作以及与 Slack 和 Zapier 等工具集成等多种功能。您可以自行托管，因此可以完全控制应用程序和数据。
Orama
Orama 是一款完全由 TypeScript 编写的轻量级全文和矢量搜索引擎。它的最小占用空间不到 2kb，旨在为您的网站提供快速、内存和容错的搜索功能。它兼容任何 JS 环境，包括浏览器、Node.js 和 Deno。
WordPress 相关
wp-now
wp-now 是 WordPress.com 提供的开发环境，与 WordPress Playground 的开发环境相同。它提供更无缝的设置，是目前创建本地 WordPress 网站最快的方法。相信这一工具将在未来改变开发人员使用 WordPress 的方式。
Falcon
Falcon 是一款 WordPress 插件，可为 WordPress 提供一系列性能和用户体验优化。它包含禁用某些功能的选项，包括禁用 Gutenberg、REST API、心跳、XML-RPC、表情符号、嵌入、修订和自定等。
它还可以删除网站上不必要的资产和代码，并对网站的标题和管理区域进行各种调整。如果你想提高 WordPress 网站的性能，这是一款非常棒的插件。
Full Site Editing
WordPress 中的 Full Site Editing 为主题开发引入了一种新方法。它引入了用于自定义模板的站点编辑器、用于调整颜色和排版的全局样式、用于使用块创建完整页面的块主题，以及用于开发人员定义默认设置的 theme.json。本网站旨在通过提供一个易于使用的表单，简化在这种新模式下生成主题模板的过程。
UnderscoreTW
UnderscoreTW 是一款使用 Tailwind CSS 和 Tailwind Typography 生成 WordPress 初始主题的工具，该主题已针对现代开发进行了优化。它带有预配置的 Tailwind 设置，并允许通过 theme.json 文件进行自定义。该主题与 Tailwind 3 的 JIT 编译器兼容，包括使用 esbuild 进行 JavaScript 捆绑，以提高开发效率。
其他资源
产品设计路线图
在这个网站（Product Design Roadmap）上，你可以找到一个交互式图表，它可以帮助你学习产品设计的一些概念和技能。该图表条理清晰，涵盖了所有必要的主题。
它分为五个主要部分，每个部分都有自己的分支，可以通向有用的资源。无论你是有兴趣从事产品设计工作，还是想创造自己的产品，这个网站都能为你提供一些有价值的知识。
Google Chrome Samples
此 Git 代码库收集了由 Google Chrome 浏览器团队维护的代码示例和演示。这些示例涵盖了一系列 Web 开发主题，是使用 Google Chrome 浏览器最新功能构建 Web 应用程序的最佳实践的实用示例。每当 Google Chrome 浏览器发布新功能时，它都会更新。
Microsoft Wallpapers
在最近举行的微软 Build 2023 大会上，微软设计团队发布了一组 16 款免费 4K 壁纸。这些壁纸非常适合使用高分辨率显示器的用户，尤其是软件开发人员，可提供引人入胜、身临其境的视觉体验。
Homepage
Homepage 是一个现代化、可定制和安全的应用程序仪表板，集成了超过 25 种服务和超过 15 种语言的翻译。它支持所有 Raspberry Pi、大多数 SBC 和 Apple Silicon，并在构建时静态生成，因此加载时间极短。它提供全面的 i18n 支持和多语言翻译。
此外，它还包括服务和网络书签、容器状态和统计数据以及系统统计小部件等功能。
Day Progress
Day Progress 是一款 macOS 应用程序，可通过菜单栏图标直观地显示一天的剩余时间。它允许你自定义一天的开始和结束时间，并在进度饼、进度条或百分比显示之间进行选择。它能有效提醒你保持动力，有效管理时间。
Omnivore
Omnivore 专为简化文章、通讯和文档的收集、组织和管理而设计，以备将来阅读之用。它拥有记笔记和高亮显示等实用功能，丰富了阅读之旅。此外，Omnivore 还允许用户根据个人喜好自由组织阅读列表，并确保在各种设备之间实现无缝同步。
Kinoweb
Kino 是一款渐进式 Web 应用程序 (PWA)，可作为视频点播 (VOD) 应用程序的示例。它展示了媒体功能，允许您下载视频进行离线观看。它包括来自 Google Chrome 浏览器开发人员 YouTube 频道的内容和视频，介绍了 PWA 的功能及其若干用例。
Open Domains
Open Domains 是一个为个人网站、开源项目等提供免费子域的平台。您可以注册 *.is-cool.dev 或 *.is-not-a.dev 等子域，并支持r A, AAAA, CNAME, MX, NS, 和 TXT 记录。这对寻求免费子域注册的个人和项目非常有用。
小结
这份资源列表提供了一个精选的网页开发工具和技术集合，包括设计资源、图标库、设计系统指南、配色设计资源、前端开发工具、与WordPress相关的工具以及其他有用的资源。
- 资源列表包括各种设计资源，如Iconify、AtalsIcons、Icones和IconHunt，为设计师和开发者提供了各种高质量的图标。
- 设计系统资源，如The Design System Guide和UK Gov Design System，提供了全面的指南和可重复使用的UI元素，以提高设计的一致性和效率。
- 配色设计资源，如Dark Mode Design、Alphredo和OKLCH，提供了创作吸引人且一致的配色方案的灵感和工具。
- 前端开发工具，如Precedent、Mafs和Web Components Guide，提供了组件、实用工具和框架，以简化前端开发。
- 与WordPress相关的工具和资源，如wp-now、Falcon和Full Site Editing，提供了WordPress开发、优化和自定义的解决方案。
- 其他资源包括产品设计路线图、Google Chrome示例、Microsoft壁纸以及诸如Homepage、Day Progress、Omnivore和Kinoweb等各种应用程序，满足网页开发和生产力的不同需求。
- Open Domains是一个提供免费子域名（subdomain）注册的平台，为个人网站和项目提供了有用的资源。
评论留言