Lolipop's Studio.

Umi 是一款企业级的 React 前端应用框架，云巧产业数字组件中心推荐使用基于 Umi 的 Koi 框架统一前端应用研发流程，支撑前端项目从研发、联调到上线、发布的全流程。

本文假设您正在或计划使用 Umi 或 Koi 作为底层框架支撑前端应用的开发，并且对 Umi 有一定的了解。

数据治理的原则

React 的核心特征是“数据驱动视图”，用公式表达即 UI = render(data)，通过数据变化来驱动视图变化。React 将组件内部自有的数据称作 state（状态），通过管理 state 来实现对组件的管理。

通过 Props 传参，可以在 React 中实现简单的父子、子父和兄弟组件间数据传递。对于跨级组件间的数据传递，React 提供了基于生产者-消费者模式的 Context API 来实现全局通信。

随着应用的膨胀，组件内部的状态变得愈加复杂，数据流管理的成本也越来越高。如果说所有代码的末路都是成为一座难以维护的大山的话，在那之前，我们应当好好想想如何尽可能多地延长代码的寿命，去重新思考我们的 React 项目的代码组织逻辑。

业务上有这样一个需求：「若用户不活跃超过 12 个小时，自动退出当前页面，并切换路由到首页」。

想都没想，直接在 useEffect() 里用 setTimeout() 定个时，12 个小时后触发相应跳转事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import React, { useEffect } from "react";

const LEAVE_PAGE_COUNTDOWN = 12 * 60 * 60 * 1000; // 12h

/** 离开页面的方法 */
const leavePage = () => {
  // ...离开当前页面的业务代码
};

export default () => {
  useEffect(() => {
    // 初始化时设置定时器
    const timer = setTimeout(() => {
      leavePage();
    }, LEAVE_PAGE_COUNTDOWN);

    return () => {
      // 页面卸载时清除定时器
      if (timer) clearTimeout(timer);
    };
  }, []);
};

没想到，今天上班来，切换到没有关闭的标签页，发现还在当前页面，掐指一算怎么也有 12 个小时了，这是怎么一回事儿……？

昨天晚上走的时候还在和前辈探讨页面卸载（unload）事件与浏览器后台优化的坑，于是首先就想到了可能是浏览器优化的缘故，导致定时器没有正常执行。以「setTimeout」和「后台失效」为搜索关键词，很快找到了原因和优化解决方案。

失效原因

假设，您身边有两台电脑，一台打算用来做 PostgreSQL 数据库服务器，一台用来做客户端。服务器上的 PostgreSQL 14 安装在 C:\Program Files\PostgreSQL\14 目录下，数据库文件保存在 C:\Program Files\PostgreSQL\14\data 目录，欲访问的数据库名为 db_name，访问数据库的用户为 db_user。

配置 postgresql.conf

编辑数据库配置文件 C:\Program Files\PostgreSQL\14\data\postgresql.conf，设置监听的远程连接地址。将 listen_addresses 项的值设置为 *，如下所示：

1
2
3
4
5
6

# - Connection Settings -

listen_addresses = '*'		# what IP address(es) to listen on;
					# comma-separated list of addresses;
					# defaults to 'localhost'; use '*' for all
					# (change requires restart)

配置 pg_hba.conf

编辑数据库客户端认证配置文件 C:\Program Files\PostgreSQL\14\data\pg_hba.conf，设置允许连接到数据库的客户端 IP 地址。

笔者自高中到现在，游走于 Pixiv 若干载，不慎收藏了许多名家雅作。

独乐乐不如众乐乐！笔者想做一个 web 页面来随机访问我的收藏，不过在此之前，可以先实现服务端上的内容。再之后做网页时，不过是简单的读取数据库罢了！

最初，笔者以为得将我的库存全部放到服务器上项目中去，然后随机访问其中的图片实现功能，但这样做很难得同步，遂搁置。不过，笔者在最近发现有一个 Pixiv 图片代理网站 可以快速下载到图片，大喜，于是开始了这个小工程。

实现此功能分为两个阶段：一，为本地的图片生成数据库索引条目。二，开发 Telegram Bot 接口，随机从数据库索引中获取一张图片转发给聊天。

为本地的 Pixiv 图片建立索引

本文旨在基于 Koa 从零开始搭建一个简单的 Telegram Bot 应用服务，帮助笔者更好地将爱传递给 Telegram！

本文假设您已对 Node.js 和 Koa 有一定的了解。

初始化 Koa 项目

Koa 是为 Node.js 设计的下一代 Web 框架，其幕后开发者主要来自知名的 Express 团队。

尽管使用 koa-generator 来初始化 Koa 项目是一个不错的选择，但笔者还是喜欢从头开始的感觉。

那么首先，新建文件夹并进入，使用 npm init 初始化 package.json。

去年投简历的时候，在 Github 上找了个开源的，星星很多的仓库 best-resume-ever 来制作自己的简历。其中的 Creative 模板我觉得很喜欢，就用它制作了我人生中的第一份找工作用的简历：

然后到了现在，到了秋招真正找工作走向社会的季节了，又该制作自己的简历了。一年的时光给自己的人生又增添了几分色彩，原先简历模板已然不够用了。正巧，这个仓库由 Vue 编写，可以用自己已有的知识对简历做一些改造手术。

改造简历

举四个改造的例子好了。

添加 Chip 纸片

起因

今天突然想去搞个图床，使用 CDN 加速图片资源。因为博客放在小水管服务器上，直接用这个服务器向用户传输图片资源对带宽有很大影响。

遂上网搜索有无免费图床的服务，看到有人提起，便出现了此文的主题：使用 jsDelivr 加速 Github 仓库资源，用作图床使用。

在国内，直接使用 Github 链接来加载图片是很慢的，甚至于加载不出来；但访问 jsDelivr 速度较快。通过 jsDelivr 来加速 Github 上的图片资源，即可以实现我们想要的图床服务。

使用其它的可以加速 Github 资源的 CDN 服务来替换 jsDelivr 也可以；这应该算是目前对于个人开发者来说，最简单且经济的方式了。

创建图床仓库

笔者想要给自己翻译的设计模式教程添加多编程语言支持。最初，只选择了 JavaScript 作为示例语言，看到 Github 上有大量其它语言的实现，便想要加上这些语言，集成为一个大一统的中文翻译项目。

部署的网页基于 VuePress，最简单的方式就是将源文档复制几份，然后逐段粘贴为别人的代码即可。偶然发现有 VuePress 本身提供了一个导入代码段的功能，可以引入本地文件中的代码段。几乎没有多想，便决定使用这个功能，这样可以将代码段放入不同的文件中，很大程度上方便了后续的管理和拓展。

现在，一个项目里出现了多种不同的编程语言的代码，不考虑它们的代码质量问题（如果还考虑代码质量问题，可以参考笔者的这一篇博客），只在乎它们的格式规范。那么，如何优雅地在 VSCode 上格式化这些代码呢？

编写时 EditorConfig

EditorConfig 有助于为跨各种编辑器或 IDE 而处理同一项目的多个开发人员保持一致的编码风格。

VSCode 并没有内置对 EditorConfig 的支持，需要在插件市场中手动下载其插件。

我真傻，真的，单单受文档的推荐就选择了 Travis 作为部分项目的持续集成工具，没有料到它早已于 2020 年 12 月更换了免费政策，不再为开源项目提供免费的用于持续集成使用的 Credits 了。当赠送的 10000 个点数用完，就需要付费才能进行构建了。

当然，作为经济驱动的公司，近些天来又受 Github Actions 等其它持续集成工具打压了盈利空间，抛弃开源用户选择转型做起了商人事业也并非不可理解。感谢它曾为开发者提供的便利，不过作为一个佛系开发者，终于还是需要转投到别的免费工具上去了——Gihub Actions。

编写新的 workflow.yml

那么首先，我们就需要将为 Travis 编写的命名为 .travis.yml 的配置文件，翻译成 Github Actions 能识别的 workflow.yml 配置文件。

以献给中文读者的设计模式教程这个项目为例，原有的 .travis.yml 内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

language: node_js
node_js:
  - lts/*
branches:
  only:
    - main
install:
  - cd vuepress
  - yarn install
script:
  - yarn build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: vuepress/docs/.vuepress/dist
  github_token: $CI_DEPLOY_TOKEN
  keep_history: true
  on:
    branch: main

最近学习前端基础知识的时候，看到了这个问题和一个回答，非常生动有趣。遂抱着梳理的想法，将整个过程描述出来。

现在，假设您打开了浏览器，想要访问我的个人博客，您会在地址栏输入 lolipopj.github.io 这个 URL 然后敲下回车键。

从敲下回车键到最终顺利在浏览器显示我博客的主页，这个过程的背后发生了什么呢？

检查 URL 格式

别急，在正式驶入互联网的快车道之前，浏览器会首先检查输入的 URL 的格式是否正确。

例如，假如您输入的是 lolipop j.github.io，或是 lolipopj.gith$ub.io，浏览器将会判断它们为非 URL。在这种情况下，浏览器通常会将我们错误输入的 URL 作为搜索引擎的输入关键字，最终跳转到搜索结果界面。