优质网站同好者周刊（第 069 期）

倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界。此周刊，将汇聚过去一周倾城所收录的内容，以飨同好；欢迎推荐或自荐（仅限有独立域名的网站，可以是二级域名）。您如果要了解收录要求，请参见关于倾城。

备注：本周刊每周五生成，首发于个人微信公众号晚晴幽草轩、博客晚晴幽草轩，以及悠然宜想亭社区；此一键生成脚本基于 Deno 编写，并在 Github 开源：nicejade/nicelinks-weekly。

Kap - Capture your screen

标签：Mac · 工具 · 软件

关键字：Kap, capture, record, screen, aspect, ratio, HD, FPS, 60FPS

An open-source screen recorder built with web technology

倾城之链 - Kap - Capture your screen

推荐语：Kap 是一款免费且开源的 Mac 录屏软件（使用 Web 技术构建的开源屏幕录像机，支持 M1 芯片电脑）。它支持多种录制方式，你可以选择全屏录制，或窗口录制，也可以自定义框选录制特定区域，还支持设定特定比例和尺寸，在录制完成后，你还可以使用它自带的编辑工具设置视频的格式，比如设置开始和结束时间、尺寸大小、帧率、导出格式等，无需再导入到剪辑软件中进行处理。它具备以下功能特征：

质量更高，噪音更低

导出为带有可选音频的 GIF、MP4、WebM 或 APNG，突出显示点击和修剪。

开源的力量

您一直在寻找的易用性和速度——您不知道自己需要的功能和可扩展性。

除了简单的录制屏幕外，该软件还有非常多特色，值得称赞：

它支持插件系统；你可以通过安装额外的插件，来增强录屏；比如增加摄像头录制、录制完成后自动上传分享、隐藏桌面图标等；
录制完毕，支持剪辑、重新设置尺寸；此外，还能选择格式转换，比如 GIF，这就非常棒；无需再借助其他工具来处理；
在丰富的模式外，Kap 支持显示鼠标点击位置。在录制演示视频或动图时，能显示鼠标点了何处，会让演示变得更清晰、易懂。

不管你是喜欢简洁的录制工具，还是喜欢增强插件，Kap 都是一个很好的工具。有了 Kap，录制屏幕内容的工作流，变得简单，让我有了录制的热情；在所用为数不多几款录屏软件中，我愿称 Kap 最强。如果您也有录屏的需求，Kap 是不应该错过的选择。

── 出自倾城之链 - Kap - Capture your screen

免费在线学习代码重构和设计模式

标签：编码 · 在线 · 学习

关键字：免费, 在线, 学习, 代码, 重构, 设计模式, 工厂模式, 迭代器, 单例, 观察者

重构是一种能够在不新增功能的情况下改善代码的可控过程。设计模式是软件设计中常见问题的典型解决方案。立即开始学习！

倾城之链 - 免费在线学习代码重构和设计模式

推荐语：Refactoring.Guru，免费、在线学习代码重构和设计模式的网站。在这里，您可以免费在线学习代码重构、设计模式、 SOLID 原则（单一职责、开闭原则、里氏替换、接口隔离以及依赖反转）以及其他和智能编程主题相关的一切内容。该网站有写道：

我们将帮助你先从整体了解各种代码重构技巧和设计模式，学习它们之间如何交叉、合作和关联。这些概念并不是我发明的，而是过去 20 年间由无数大师级程序员提出。但是，我认为代码重构、设计模式和一般编程原则之间的联系对于大部分程序开发者来说仍是非常神秘的。这也是我为什么创建这个网站的原因。

值得一提的是，目前网站中，已有许多关于重构和设计模式的信息，但作者仍会不时地对该项目进行更新。你还可以通过「电子邮件」关注项目进展。对于 IT 从业者（程序员）， 设计模式（是软件设计中常见问题的典型解决方案。它们就像能够根据需求进行调整的预制蓝图，可用于解决代码中的特定设计问题），与重构（是一种能够在不新增功能的情况下优化代码的系统过程，它可将一团乱麻变成清晰的代码和简洁的设计），是非常值得掌握的技能；该网站，以非常合理的方式，介绍了「什么是设计模式」，每种模式的意图、所解决的问题、伪代码，适合应用场景、实现方式、优缺点、与其他模式的关系、代码示例等等，可谓全面，超乎想象，如果您有从事编程行业，强烈推荐收藏 & 阅读。

── 出自倾城之链 - 免费在线学习代码重构和设计模式

VitePress | Vite & Vue Powered Static Site Generator

标签：网站生成器 · Vue · Markdown

Vite & Vue powered static site generator.

倾城之链 - VitePress | Vite & Vue Powered Static Site Generator

推荐语： VitePress ，基于 Vue & Vite 的静态站点生成器（开源、简单、强大且高性能）。截止目前（2022/06/07），它正处于 alpha 阶段。它已经适合开箱即用的文档使用，但配置和主题 API 可能仍会在次要版本之间发生变化。VitePress 具有以下功能特性：

Vite 无可匹敌的 DX

感受 Vite 的速度。即时的服务器启动和闪电般的 HMR，无论应用程序的大小都能保持快速。

简洁至上的设计

以 Markdown 为中心的内容，它的建立是为了帮助你专注于写作，并以最小的配置进行部署。

Vue 的力量与 Markdown 的结合

用 Markdown 中 Vue 的所有功能增强你的内容，同时能够用 Vue 定制你的网站。

完全静态但仍然动态

使用真正的 SSG+SPA 架构，尽情发挥。在页面加载时是静态的，但从那里开始以 100% 的互动性吸引用户。

倒是用过非常多静态站点生成器工具，来搭建博客或承载文档，诸如：VuePress、Next.js、Wiki.js 等等。在如何选定搭建个人独立博客工具一文中，有做详细叙述。Vue3 和 Vite，有体验过，于前端开发而言，非常值得使用。之于 VitePress 相信也有其可取处，感兴趣的朋友不妨玩儿一下。

── 出自倾城之链 - VitePress | Vite & Vue Powered Static Site Generator

JSON Viewer - JSON Hero

标签：开源 · JSON · 工具

JSON Hero makes reading and understand JSON files easy by giving you a clean and beautiful UI packed with extra features.

倾城之链 - JSON Viewer - JSON Hero

推荐语：JSON Hero，是一个开源的、漂亮的网络 JSON 浏览器，可让您快速浏览、搜索和导航您的 JSON 文件。🚀 它通过为您提供包含额外功能的、干净美观的 UI，使阅读和理解 JSON 文件变得容易。JSON Hero 具有以下功能特征：

以您喜欢的任何方式查看 JSON：列视图、树视图、编辑器视图等；
自动推断字符串的内容并提供有用的预览；
创建可用于验证 JSON 的推断 JSON 模式；
快速扫描相关值以检查边缘情况；
搜索您的 JSON 文件（键和值）；
可使用键盘快捷键；
支持黑暗模式、代码视图、VS 代码插件等；
具有路径支持的可轻松共享的 URL；

JSON 本身非常不利于阅读，但 JSON Hero 正在让它变得更好：停止盯着编辑器中的千行 JSON 文件；此外，JSON Hero 使用非常的简单，只需打开网站，输入 JSON URL，或者粘贴 JSON 内容即可。另外值得一提的是，JSON Hero 免费可用，并在 Github 完全开源，感兴趣的朋友，可以了解下。

── 出自倾城之链 - JSON Viewer - JSON Hero

What is GraphQL Start - GraphQL Start

标签：GraphQL · JavaScript · 教程

GraphQL Start is a pragmatic guide that explains how to build a GraphQL API (server) from start to finish on top of Node.js stack using JavaScript and GraphQL.js library.

倾城之链 - What is GraphQL Start - GraphQL Start

推荐语：GraphQL Start 是一本实用指南（该网站基于 Gitbook 所搭建），它解释了如何使用 JavaScript 和 GraphQL.js 库在 Node.js 堆栈之上从头到尾构建 GraphQL API（服务器）。在本教程中，您将学习以下内容：

如何组织你的 GraphQL API 项目
如何实现查询、突变和订阅；
如何使用批处理和缓存优化 API 性能；
如何处理认证和授权；
如何验证用户的权限并限制对内容的访问；
如何使用无服务器基础架构将 API 部署到云中；

需要补充说明的是，在阅读这份教程，您至少需要熟悉 Node.js 和 JavaScript 的基本概念。

── 出自倾城之链 - What is GraphQL Start - GraphQL Start

Relay | A JavaScript Framework for building data-driven React Applications

标签：React · GraphQL · 框架

Relay is a JavaScript framework for building data-driven React applications.

倾城之链 - Relay | A JavaScript Framework for building data-driven React Applications

推荐语：Relay 是一个 JavaScript 框架，用于构建数据驱动的 React 应用程序。它专为任何规模的高性能而设计。无论您的应用程序有数十、数百或数千个组件，Relay 都可以轻松管理数据获取。并且由于 Relay 的增量编译器，即使您的应用程序增长，它也可以保持您的迭代速度；您可以从以下功能特征，进一步了解 Relay：

声明式：不再使用命令式 API 与您的数据存储进行通信。只需使用 GraphQL 声明您的数据需求，然后让 Relay 确定如何以及何时获取您的数据。
托管：查询位于依赖它们的视图旁边，因此您可以轻松地推断您的应用程序。Relay 将查询聚合为高效的网络请求，以仅获取您需要的内容。
突变：Relay 允许您使用 GraphQL 突变对客户端和服务器上的数据进行突变，并提供自动数据一致性、乐观更新和错误处理。
保持快速迭代：Relay 是数据获取变成声明性的。组件声明它们的数据依赖关系，而不用担心如何获取它们。Relay 保证每个组件需要的数据都被获取并且可用。这使组件保持解耦并促进重用。使用 Relay，可以快速修改组件及其数据依赖关系，而无需修改系统的其他部分。这意味着您在重构或更改应用程序时不会意外破坏其他组件。
自动优化：Relay 的编译器聚合和优化整个应用程序的数据需求，以便可以在单个 GraphQL 请求中有效地获取它们。Relay 处理繁重的工作，以确保以最有效的方式获取组件声明的数据。例如，通过对相同字段进行重复数据删除，以及在运行时预计算使用的信息，以及其他优化。
数据一致性：当影响它们的数据发生变化时，Relay 会自动使所有组件保持最新，并且仅在绝对必要时才有效地更新它们。这意味着没有不必要的重新渲染。Relay 还支持执行 GraphQL Mutations，可选择乐观更新和本地数据更新，同时确保屏幕上的可见数据始终保持最新。

Relay 用于在 React 应用程序中获取和管理 GraphQL 数据，它强调可维护性、类型安全和运行时性能。通过结合声明性数据获取和静态构建步骤来实现这一点。通过声明性数据获取，组件声明它们需要什么数据，而 Relay 会弄清楚如何有效地获取数据。在静态构建步骤中，Relay 验证和优化查询，并预先计算工件以实现更快的运行时性能。如果您从事 Web 前端开发相关工作，并对 Relay 感兴趣，可阅读 Relay 文档以便进一步了解和使用它。

── 出自倾城之链 - Relay | A JavaScript Framework for building data-driven React Applications

对倾城之链感兴趣的朋友，可通过 Web，小程序，快应用等渠道进行访问(后续将支持更多，如 VsCode 插件，Chrome 扩展等)。您有任何问题，欢迎随时向我们反馈（您可以通过官网反馈渠道），🤲 。

本期文末寄语

目标，不一定总是要达到，目标往往只是用来帮助你瞄准方向。如果你给每件事情都设了限，无论是有形的还是无形的，它都会融进你的工作和生活。没有极限，只有停滞不前，而你千万别停滞不前，你必须超越和突破。── 当代 · 国际著名华裔武术家、截拳道创始人、动作片演员、动作导演、武术指导、功夫片的开创者、好莱坞首位华人主角李小龙

倾城之链作为一个开放平台，旨在云集全球优秀网站，探索互联网中更广阔的世界；在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。

倾城之链 | 优质网站周刊