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

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

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

SVG Viewer - View, save, and optimize SVGs

标签：SVG · 在线 · 工具

关键字：svg, svg tool, svg viewer, online svg, svg to jsx, svg to react, svg to react native, svg optimize

SVG Viewer is an online tool to view and optimize SVGs.

倾城之链 - SVG Viewer - View, save, and optimize SVGs

推荐语：SVG Viewer，是一个在线工具，用于查看（预览）和优化 SVG，这对 Web 开发相关从业人员，颇为有用。在介绍该网站功能之前，有必要对 SVG 做一个大致科普：

SVG：可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式，像 JPEG 和 PNG 不同，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大，而且不失真或降低质量，并且可以方便地修改内容。
正如 HTML 一样，SVG 也有可被 JavaScript 访问的文档对象模型（DOM）和事件。这允许开发者创建丰富的动画和可交互的图像。如欲了解 SVG 更多，可参见 SVG | MDN。

再说回 SVG Viewer，因为可以方便预览 SVG 内容和美化（Prettify）SVG 代码，您可以基于该网站来编写 SVG（支持清除（Clear）、调整大小（Resize）、以及大量可选项设置（Options））；还支持一键转换为 React、React Native 代码及 PNG 图片；此外，您可以一键下载和分享您所创建的 SVG。如果您有操作 SVG 相关诉求，SVG Viewer 是您值得关注且典藏的网站。

── 出自倾城之链 - SVG Viewer - View, save, and optimize SVGs

VueUse

标签：Vue · JavaScript · Web开发

Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

倾城之链 - VueUse

推荐语：VueUse，是一组基于 Vue Composition API 的实用函数（常用工具集）；支持 Vue 2 和 3。它的初衷是：将一切原本并不支持响应式的 JS API，变得支持响应式，省去程序员自己写相关代码。目前 VueUse 已提供几十个解决方案，适用于常见的开发者用例，如跟踪 Ref 变化、检测元素可见性、简化常见的 Vue 模式、键盘/鼠标输入等。使用 VueUse 是一个节省开发时间的好方法，因为您不必自己添加所有这些标准功能。它具有以下功能特征：

🎛 功能丰富：140+功能供您选择；
🕶 无缝迁移：适用于 Vue 3 和 2；
⚡ 完全可摇树：（tree shakeable）只拿你想要的；
🦾 类型增强：用 TypeScript 编写，带有完整的 TS 文档；
🛠 灵活：将 refs 作为参数传递，完全可定制、可配置的事件过滤器和目标；
☁️ 无需捆绑器：可通过 CDN 使用，无需任何捆绑程序；
🔋 SSR 友好：与服务器端渲染/生成完美配合；
🎪 互动演示：功能文档还附带交互式演示；
🔌 附加组件：支持 Router、Firebase、RxJS 等各种插件。

VueUse 使用方式也非常简单：

# 安装 VueUse
npm i @vueuse/core

// 使用 VueUse
import { useMouse, usePreferredDark, useLocalStorage } from '@vueuse/core'
export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  }
}

总结一下，VueUse 中有以下 9 种类型的函数。如果你想了解实用程序的完整列表，建议移步至 VueUse 官方文档。

Animation：包含易于使用的过渡、超时和计时功能；
Browser：可用于不同的屏幕控制、剪贴板、偏好等；
Component：提供了不同组件方法的简写；
Formatters：提供响应时间格式化功能；
Sensors：用来监听不同的 DOM 事件、输入事件和网络事件；
State：管理用户状态（全局、本地存储、会话存储）；
Utility：不同的实用函数，如 getter、条件、引用同步等；
Watch：更多高级类型的观察器，如可暂停的观察器、退避的观察器和条件观察器；
Misc：不同类型的事件、WebSockets 和 Web workers 的功能。

VueUse 很大程度启发于 react-use、vue-hooks、react-hooks 等项目。Vue Compostion API 支持了更好的逻辑分离，让这些常用的工具可以被复用，能够让你快速地构建丰富的应用。VueUse 中的大多数函数都会返回一个refs 对象，您可以使用 ES6 的对象解构语法来获取您需要的内容。

── 出自倾城之链 - VueUse

Ruby on Rails — A web-app Framework

标签：Web开发 · 程序 · 框架

A web-app framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

倾城之链 - Ruby on Rails — A web-app Framework

推荐语：Ruby on Rails（官方简称为 Rails，亦被简称为 RoR），是一个基于 Ruby 语言写的开源 Web 应用程序框架，包括根据模型-视图-控制器（MVC）模式创建数据库支持的 Web 应用程序所需的一切。它努力使自身保持简单，来使实际的应用开发时的代码更少，使用最少的配置。Rails 的设计原则包括 “不做重复的事”（Don't Repeat Yourself）和 “惯例优于设置”（Convention Over Configuration）。

Ruby on Rails 是一种结合 Ruby 语言与 Rails 平台的一种网页程序框架，Ruby 语言以自然、简洁、快速著称，全面支持面向对象程序设计，而 Rails 则是 Ruby 广泛应用方式之一，在 Rails 平台上设计出一套独特的 MVC 开发架构，采取模型（Model）、视图（View）、控制器（Controller）分离的开发方式，不但减少了开发中的问题，更简化了许多繁复的动作。

Rails 是一个全栈框架。它附带了在前端和后端构建出色的 Web 应用程序所需的所有工具：渲染 HTML 模板、更新数据库、发送和接收电子邮件、通过 WebSocket 维护实时页面、为异步工作排队作业、将上传存储在云中，为常见攻击提供可靠的安全保护。Rails 可以做到这一切，且还有更多。

Ruby on Rails 的数千个程序已经在线上得到应用。包括 Twitter、Airbnb、GitLab、Shopify 等知名网站。如果您对其感兴趣，不妨前往其官网了解一下。

── 出自倾城之链 - Ruby on Rails — A web-app Framework

npm ｜ the package manager for Node.js

标签：npm · Node.js · JavaScript

npm is the package manager for Node.js. It was created in 2009 as an open source project to help JavaScript developers easily share packaged modules of code.

倾城之链 - npm ｜ the package manager for Node.js

推荐语：NPM（Node Package Manager) 是 JavaScript 运行时环境 Node.js 的默认包管理器，由 npm, Inc. 维护（一家成立于 2014 年的公司，于 2020 年 3 月 17 日被 GitHub 收购）。npm 是 JavaScript 社区的重要组成部分，有助于支持世界上最大的开发者生态系统之一。npm 有非常多东西：

npm 是 Node.js 的包管理器。它作为一个开源项目创建于 2009 年，旨在帮助 JavaScript 开发人员轻松共享打包的代码模块。
npm Registry 是一个公开的开源代码包集合，用于 Node.js、前端 Web 应用程序、移动应用程序、机器人、路由器以及 JavaScript 社区的无数其他需求。
npm 是允许开发人员安装和发布这些包的命令行客户端。

GitHub 现在已经保证 npm 将永远免费。截至 2020 年 3 月 17 日，npm 为大约 1200 万开发人员，提供了 130 万个软件包，这些开发人员每月下载这些软件包达 750 亿次。

新版的 Node.js 已经集成了 npm；如果您有安装 Node.js，那么 npm 也一并安装好了。您可以通过输入 npm -v 来测试是否成功安装。

NPM 是一种重用其他开发人员的代码的方法，也是一种与他人共享代码的方式，并且可以很容易地管理不同版本的代码。npm 开始作为 Node 包管理器，所以你会发现很多模块可以在服务器端使用。也有很多的包添加命令供您在命令行中使用。如果您从事前端开发相关工作，想必 npm 是您必不可少的工具；当然，您也可以使用其替代性产品 yarn，详情可参见文章 ──Npm vs Yarn 之备忘详单。

── 出自倾城之链 - npm ｜ the package manager for Node.js

mark.js – JavaScript keyword highlight

标签：JavaScript · 前端开发 · Web开发

Search term highlighting intended for every use case. Can be used with plain JavaScript or as jQuery plugin.

倾城之链 - mark.js – JavaScript keyword highlight

推荐语：mark.js，是一个用 JavaScript 编写的文本荧光笔（高亮工具库），可以与纯 JavaScript 或作为 jQuery 插件一起使用。它可以用来动态标记搜索词或自定义正则表达式，并为您提供内置选项，如支持标点符号、单独的单词搜索、自定义同义词、支持 iframes、自定义过滤器、准确性定义、自定义元素、自定义类名等。它不仅功能强大，而且使用非常简单，如下示例：

# 基于 npm 安装
npm install mark.js --save-dev
# 或者基于 yarn
yarn add mark.js

// 使用
import Mark from 'mark.js'
const contentDom = document.querySelector('.content')
const instance = new Mark(contentDom);
instance.mark(keyword, {
  exclude: ["h1"],
  className: "mark-highlight"
});

如果您有打算做本地搜索功能，那么 mark.js 工具库非常拥有，可以帮您高亮关键字。

── 出自倾城之链 - mark.js – JavaScript keyword highlight

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

本期文末寄语

舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。── 战国 · 孟子《生于忧患死于安乐》

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

倾城之链 | 优质网站周刊