3
  1. 技术琐事

    拿刚买的 Mac Mini 做我的应用服务器

    去年笔者拿 N100 小型主机安装 OpenWRT 系统作主路由服务器,又塞进去一些笔者自己部署的应用服务。后来 Mac Mini 4 发售了,评测得到的功耗与性能令人惊叹,最重要的是定价很不苹果,让我这个苹果小黑子也想要入手一台玩玩。 当然,笔者在逛 V2EX 的时候也看了大量劝退购入 Mac Mini 4 的帖子,尤其是像笔者这样只是拿来做轻量级应用服务器的用途 —— 大炮打蚊子。但是你知道的…

    03 月 30 日 2025 年
    MacOS Remote-Desktop Docker PostgreSQL Minecraft
  2. 前端开发

    对油猴脚本 Pixiv Previewer 进行二次开发

    笔者的业余爱好之一就是逛 Pixiv,收藏好看的插画等作品并下载到本地。油猴脚本 Pixiv Previewer 做了两个笔者很喜欢的便利性工作: 作品预览:鼠标悬浮在作品缩略图上时自动在当前页面显示大图,快速决定要不要点进作品页。 作品排序:作品搜索页可以按“排序”按钮,自动获取若干页的作品并按照收藏数排序,快速筛选优质作品。 出于爱好,笔者去脚本仓库翻阅了一下源码,觉得有一些可以改进的地方…

    03 月 17 日 2025 年
    TypeScript Tampermonkey Pixiv
  3. 前端开发

    基于 Gatsby 打造我的个人博客系统

    碎碎念 搭建一个自己的博客是无数跻身于 IT 行业开发者的心中最质朴的愿望! 回想笔者的历程,刚上大学的时候就摩拳擦掌想要实现一个博客系统,但在 Github 上创建了仓库以后就开始了无限期的拖延:自己没有任何的开发经验,不知道框架也不知道 UI 组件库,只知道要写 HTML + CSS + JavaScript 代码,面对眼前想要实现的完整系统不知该如何下手。 从零开始实现博客系统的计划虽然搁浅…

    03 月 12 日 2025 年
    React TypeScript Gatsby
7
  1. 全栈开发

    从同步 QQ 空间说说到前端呈现,我都做了些啥

    最近在捣腾我的 Timeline 时间线项目,希望将我在不同平台上的发言和活跃记录同步过来,在独立的站点上按照创建时间倒序呈现。 过去,我尝试把这个想法放到 Telegram 上实现,把发言和记录同步到我的频道上。但是格式转换的繁杂以及自由度上的限制让我大费周章,加之增量开设的同步内容会以消息的方式一条一条添加到末尾,无法按时间排序,最终我放弃了这个方案。 言归正传,在项目开发的过程中…

    10 月 17 日 2024 年
    React TypeScript Node ffmpeg
  2. 前端开发

    纯前端如何实现一个转盘抽奖组件

    为什么 前阵子面试的时候被问到这个问题,觉得挺有意思,于是决定亲手实现一个转盘抽奖组件试试。 翻看别人的实现方案时,发现和自己面试时答得相差很大,悲 😢。但总之,是时候开始弥补自己的 CSS 和动画技能了。 是什么 一个转盘抽奖组件主要由三部分组成,写有中奖结果的圆形转盘、指向结果的指针和开始转动的按钮。 如果每个中奖结果的概率相近,我们可以按照真实概率来划分每个奖品所占圆形的扇形比例…

    09 月 06 日 2024 年
    TypeScript CSS
  3. 前端开发

    Electron 执行后台程序并在渲染器实时打印运行日志

    开发图像查重工具时遇到了这样一个问题:在查重之前,用户需要先对图像文件进行索引操作,后台将调用可执行文件并为每张图像生成特征值。索引操作所需的时间与图像的数量及大小呈正相关,笔者为大约 50000 张图片(约 170GB)生成特征值,需要花费将近 90 分钟的时间。在这种情况下,如果渲染器什么也不展示,卡在那里,用户难免会非常焦虑 —— 后台是否还在运行,我是不是卡死了? 那么需求也就明了了…

    08 月 05 日 2024 年
    Node Electron TypeScript React
  4. 技术琐事

    部署一个给朋友使用的 Minecraft 模组服务器

    笔者在今年五月份部署了一个与朋友同玩共乐的 Minecraft 服务器,稳定运行至今。忽然想记录为一篇博客,分享分享折腾的经历。 笔者结合个人喜好(最新版本,模组优先)和大众推荐(Fabric 更适合新版本 Minecraft),决定基于 Fabric 搭建一个可以添加模组的 Minecraft 服务器。此类服务器简称为模组服务器,还有基于 Paper, Spigot 等搭建的插件服务器…

    07 月 05 日 2024 年
    Linux Game-Server Minecraft
  5. 技术琐事

    基于 SteamCMD 部署一个给朋友使用的饥荒联机版服务器

    本文重现了笔者在自己的 CentOS 7 (64-bit) 系统中部署饥荒联机版服务器的全过程,供君参考。 Steam 版的饥荒联机版与 Wegame 版数据不互通,也无法相互联机。 笔者主要参考了如下两个部署教程: Guides/Don’t Starve Together Dedicated Servers How to setup dedicated server with cave on…

    07 月 02 日 2024 年
    Linux SteamCMD Game-Server Don't-Starve
  6. 技术琐事

    使用 Nginx 治理我的服务

    这些天在阿里云的 ECS 服务器上捣鼓自己的东西,通过 Nginx 转发请求,允许以域名的方式访问到笔者开设的不同站点、服务。 笔者撰写本篇文章,晒晒在服务器上都做了哪些工作,也希望能为您提供一些启发。 安装最新版本的 Nginx 笔者使用的服务器为 CentOS 7 系统,默认的 yum 源中包含的 Nginx 版本为 (2021-05-21)。 更新 yum 源,添加 Nginx 的官方源:…

    05 月 13 日 2024 年
    Nginx Linux
  7. 后端开发

    基于原生 Node 备份软路由上的 Minecraft 服务器存档,并通过 Alist 上传到云端

    笔者最近在 OpenWRT 软路由上部署了一个 Minecraft 服务器,出于对数据安全的焦虑,于是折腾了一下存档备份的相关事宜,记录为此文。 在 CurseForge 等模组站上已有方便好用的 Minecraft 服务器存档备份插件,除非您喜欢折腾或高自由度的定制,不用像笔者这样编写一整个脚本。 完整的脚本可见此。 编写备份脚本 前置准备 为了脚本编写方便,约定应该在 Minecraft…

    05 月 11 日 2024 年
    Linux OpenWRT Minecraft Node JavaScript Alist
5
  1. 前端开发

    为什么我使用 Umi 的 model 简易数据流管理插件

    Umi 是一款企业级的 React 前端应用框架,云巧产业数字组件中心推荐使用基于 Umi 的 Koi 框架统一前端应用研发流程,支撑前端项目从研发、联调到上线、发布的全流程。 本文假设您正在或计划使用 Umi 或 Koi 作为底层框架支撑前端应用的开发,并且对 Umi 有一定的了解。 数据治理的原则 React 的核心特征是“数据驱动视图”,用公式表达即 ,通过数据变化来驱动视图变化。React…

    10 月 23 日 2022 年
    React Umi
  2. 前端开发

    定时器 SetTimeout 在后台失效?试试 Web Worker 吧

    业务上有这样一个需求:「若用户不活跃超过 12 个小时,自动退出当前页面,并切换路由到首页」。 想都没想,直接在 里用 定个时,12 个小时后触发相应跳转事件: 没想到,今天上班来,切换到没有关闭的标签页,发现还在当前页面,掐指一算怎么也有 12 个小时了,这是怎么一回事儿……? 昨天晚上走的时候还在和前辈探讨页面卸载()事件与浏览器后台优化的坑,于是首先就想到了可能是浏览器优化的缘故…

    09 月 22 日 2022 年
    TypeScript React Web-Worker Umi Webpack
  3. 后端开发

    连接到 Windows 端的 PostgreSQL 数据库

    假设,您身边有两台电脑,一台打算用来做 PostgreSQL 数据库服务器,一台用来做客户端。服务器上的 PostgreSQL 14 安装在 目录下,数据库文件保存在 目录,欲访问的数据库名为 ,访问数据库的用户为 。 配置 编辑数据库配置文件 ,设置监听的远程连接地址。将 项的值设置为 ,如下所示: 配置 编辑数据库客户端认证配置文件 ,设置允许连接到数据库的客户端 IP 地址。 该…

    02 月 12 日 2022 年
    PostgreSQL Windows
  4. 后端开发

    这位客官,要来一张我珍藏许久的图片吗

    笔者自高中到现在,游走于 Pixiv 若干载,不慎收藏了许多名家雅作。 独乐乐不如众乐乐!笔者想做一个 web 页面来随机访问我的收藏,不过在此之前,可以先实现服务端上的内容。再之后做网页时,不过是简单的读取数据库罢了! 最初,笔者以为得将我的库存全部放到服务器上项目中去,然后随机访问其中的图片实现功能,但这样做很难得同步,遂搁置。不过,笔者在最近发现有一个 Pixiv 图片代理网站 可以快速下载…

    01 月 13 日 2022 年
    Telegram Bot Node Koa
  5. 后端开发

    从零开始使用 Telegram Bot

    本文基于 Koa 从零开始搭建一个简单的 Telegram Bot 应用服务,支持获取 Github Issues 的评论并转发到 Telegram 频道,帮助笔者更好地将捣玩 Telegram! 时间推移至 2024 年,笔者现在更建议使用 Bun 开发应用服务,开箱即用的高性能服务以及完备的 TypeScript 支持,能大大提升开发体验。下面为撰写于 2022 年初的原文。 本文假设您已…

    01 月 09 日 2022 年
    Telegram Bot Node Koa PostgreSQL Sequelize
24
  1. 前端开发

    把自己的简历做成 Web 页面

    去年投简历的时候,在 Github 上找了个开源的,星星很多的仓库 best-resume-ever 来制作自己的简历。其中的 Creative 模板我觉得很喜欢,就用它制作了我人生中的第一份找工作用的简历: 然后到了现在,到了秋招真正找工作走向社会的季节了,又该制作自己的简历了。一年的时光给自己的人生又增添了几分色彩,原先简历模板已然不够用了。正巧,这个仓库由 Vue 编写…

    08 月 19 日 2021 年
    resume CSS Vue-2 Github-actions rxjs
  2. 技术琐事

    使用 jsDelivr 加速 Github 仓库搭建自己的图床服务

    使用此类公益服务时应保留敬畏之心,不要滥用服务,消耗他人的善意。 今天突然想去搞个图床,使用 CDN 加速图片资源。因为博客放在小水管服务器上,直接用这个服务器向用户传输图片资源对带宽有很大影响。 遂上网搜索有无免费图床的服务,看到不少将 jsDelivr 用作图床使用的教程,便自己实践一番。 在国内,直接使用 Github 链接来加载图片是很慢的,甚至于加载不出来;但访问 jsDelivr…

    08 月 13 日 2021 年
    Github jsDiliver
  3. 技术琐事

    使用 EditorConfig 和 Prettier 优雅地配置 VSCode 代码格式化

    编写代码时使用 EditorConfig EditorConfig 能够帮助跨各种 IDE 开发同一项目的不同开发人员保持一致的编码风格。 VSCode 没有内置对 EditorConfig 的支持,需要在插件市场中手动下载插件。 EditorConfig 会自动读取工作区中的 文件,更详细的配置说明可以参考官方介绍。下面是笔者常用的配置: 推送仓库前使用 Prettier 为了进一步确保代码…

    08 月 07 日 2021 年
    Node EditorConfig Prettier VSCode
  4. 技术琐事

    更换持续集成工具,从 Travis 到 Github Actions

    我真傻,真的,单单受文档的推荐就选择了 Travis 作为部分项目的持续集成工具,没有料到它早已于 2020 年 12 月更换了免费政策,不再为开源项目提供免费的用于持续集成使用的 Credits 了。当赠送的 10000 个点数用完,就需要付费才能进行构建了。 当然,作为经济驱动的公司,近些天来又受 Github Actions 等其它持续集成工具打压了盈利空间…

    07 月 10 日 2021 年
    Travis Github-actions
  5. 技术琐事

    在浏览器中输入 URL 到显示网页,背后发生了什么

    最近学习前端基础知识的时候,看到了这个问题和一个回答,非常生动有趣。遂抱着梳理的想法,将整个过程描述出来。 现在,假设您打开了浏览器,想要访问我的个人博客,您会在地址栏输入 这个 URL 然后敲下回车键。 从敲下回车键到最终顺利在浏览器显示我博客的主页,这个过程的背后发生了什么呢? 检查 URL 格式 别急,在正式驶入互联网的快车道之前,浏览器会首先检查输入的 URL 的格式是否正确。 例如…

    07 月 08 日 2021 年
    计算机网络 网络安全 密码学
  6. 前端开发

    为 Archer 主题更换字体

    看腻了原先的字体,亦或是想满足独树一帜的设计欲望?不妨更换一下博客的字体吧!本文将基于 Hexo 和主题 Hexo-Theme-Archer 展示如何更换博客的中文字体。 引入字体文件 这里提供两种引入的思路,一种是 CDN 引入,一种是本地引入。建议通过 CDN 的方式引入,可以大大提高加载效率。 引入 CDN 字体文件 以更换字体为思源黑体(Google 字体上叫 ,Adobe 版本叫 )为例…

    06 月 26 日 2021 年
    Node Hexo hexo-theme-archer
  7. 技术琐事

    使用基于 Docker 的 Nginx 部署静态网页项目

    现在,我已经安装了 Docker,并拉取了 Nginx 的镜像。除此之外,我也购买了域名,完成了备案,并且为域名配置了 SSL。一切准备就绪,那么我该怎么将我的静态网页项目在 Linux 主机上通过 Nginx 部署,最终实现域名访问呢? 本文以部署我的个人博客页面为例,介绍如何使用基于 Docker 的 Nginx 部署静态网页项目。 准备静态网页项目 为了更方便管理网页项目…

    06 月 25 日 2021 年
    Nginx Docker Linux
  8. 后端开发

    在 Linux 系统下启用 Project-V

    下载 Release 在 Project-V 的 Github Releases 页面下载最新的二进制包。 本文以通用于 x86_64 机器的 为例。下载完成后传入 Linux 主机即可。 安装 Project-V 执行 命令: 文件将全部解压到当前目录。 创建软链接 执行 命令: 这里的 是压缩包里已编译好的二进制可执行文件。 配置 Project-V 编辑与 相同目录下的 文件…

    06 月 09 日 2021 年
    Linux
  9. 后端开发

    在 Euler 系统上离线安装 MySQL 5.7

    查看系统 OS 及架构 以 Euler 系统为例,在终端上输入命令查看,可以通过 命令找到 rpm 包,再通过 查看系统 OS 及架构信息: 当然,也可以使用通用的 命令。 当前系统为 Euler 2.0 (SP5),处理器架构为 x86_64。 下载 MySQL Euler 2.0 系统基于 CentOS 7 开发,而 CentOS 7 由 Red Hat Enterprise…

    06 月 04 日 2021 年
    Linux MySQL
  10. 技术琐事

    漫谈 JavaScript 类(Class)的使用

    类(Class)是用于创建对象的模板,他们用代码封装数据以处理该数据,是面向对象编程方法的重要特性之一。JavaScript 中的 语法在 ES6 中引入,其底层实现基于原型(Prototype),系原型继承的语法糖(Syntactic Sugar)。 本博文将探讨 JavaScript 中如何使用类的相关知识,文章组织架构和内容基于 MDN 上关于类的章节。 定义类 类可以被看作一种…

    05 月 20 日 2021 年
    JavaScript ES6
  11. 技术琐事

    漫谈 JavaScript 闭包

    JavaScript 中有一个叫作闭包(Closure)的概念,非常有趣且适用,值得学习并整理为一篇博客。 为了更好理解闭包的作用,不妨看看我的关于 JS 变量提升(Hoisting)和函数提升现象的阐述。 作用域 在 JavaScript 中,作用域(Scope)是当前代码执行的上下文,也即是值和表达式在其中可访问到的上下文。 如果一个变量或其它表达式不在当前作用域中,就会沿作用域链…

    05 月 18 日 2021 年
    JavaScript
  12. 技术琐事

    漫谈 JavaScript 变量提升和函数提升

    在 ES6 规范出现之前,使用 JavaScript 声明变量只有 , 以及隐式声明三种方式。 按照一般编程的思维,我们会通过“先声明,后调用”的方式去使用变量,例如: 但假如反过来,我们“先调用,后声明”,会发生什么呢? 如上所示,在声明变量 之前尝试将它的值打印出来,控制台输出的结果是 ,而不是预期中的报错 。这就是变量提升。 而对于函数的声明与使用,也出现了相似的情况: 在声明函数…

    05 月 11 日 2021 年
    JavaScript
  13. 前端开发

    函数防抖和节流,以及在 Vue 中的运用

    在前端性能优化中存在一个老生常谈的问题:如何优化高频率执行的 JS 代码?例如: 我们为浏览器滚动 scroll 绑定了监听事件,当滚动到某位置之下后,会在浏览器右下方显示一个点击后能快速回到页面顶部的浮动按钮;而滚动回该位置之上时,浮动按钮消失。现在我们发现,用户每次使用滚轮滑动页面,都会触发很多次该事件,判断当前在该位置之上还是之下,这在一定程度上降低了前端的性能。 我们为网页添加了搜索功能…

    05 月 08 日 2021 年
    JavaScript Vue-2 Nuxt
  14. 后端开发

    Windows 系统编译安装基于 C++ 的 gRPC

    本博客基于 CMake 实现编译 版本。 本博客的 Windows 端使用的命令提示符界面为 Powershell。 安装编译依赖软件 在 Windows 系统上编译 gRPC 需要首先准备下述软件: Visual Studio 2015(或 2017),将使用到 Visual C++ compiler Git CMake nasm ninja(可选) Visual Studio 2015…

    04 月 26 日 2021 年
    Windows CPP gRPC
  15. 后端开发

    Linux 系统编译安装基于 C++ 的 gRPC

    本文适用于 C++ 版本 gRPC 的离线编译安装,但对于下载 gRPC 步骤强烈建议使用 git 进行。 如果在能直接连接外网的机器上编译,可直接按照 gRPC 官网文档的指引快速执行编译操作。 安装基本依赖 确保机器上包括这些基本依赖:, , 与 C++ 编译环境。 gRPC 的编译需要 版本在 及以上。假如版本低于此,应当在 Docker 容器中安装较新版本的 GCC 再执行编译操作…

    04 月 22 日 2021 年
    Linux CPP gRPC Docker
  16. 后端开发

    Linux 容器更新或降级 GCC 版本

    如果软件源可用,可以使用 CentOS 的 yum 包管理器或 Ubuntu 的 apt 包管理器等一键安装 GCC,例如: 本文适用于系统中包含有其它版本的 GCC 编译器情况下,手动更新或降级 GCC 编译器。编译 GCC 的过程十分耗时,如果能使用包管理器尽量还是使用包管理器吧。 NOTE: 如果仅使用 GCC 进行编译操作或不确定当前系统能否兼容新版本的 GCC,建议在 Docker…

    04 月 20 日 2021 年
    Linux GCC Docker
  17. 技术琐事

    Protobuf 学习笔记

    实习中学习一下 Protobuf 的功能和语法等,整理为此笔记。主要为翻译官方文档而来。 什么是 Protobuf Protobuf 是 Google 公司研发的一种用于序列化结构数据的机制,全称为 Protocol Buffers,具有语言无关、平台无关以及可拓展的特性。 我们常常把 Protobuf 与 XML (Extensible Markup Language) 相比较…

    03 月 29 日 2021 年
    gRPC Protobuf
  18. 前端开发

    在 Nuxt.js 中引入高德地图并实现定位及逆地理编码

    迷途知反!腾讯地图的 JS API 文档实在过于简陋,且库很久没有更新,转身投入高德地图的怀抱,享受 this moment 的美好! 高德地图与腾讯地图定位功能区别 高德地图将定位功能和逆地理编码功能分开为两个操作,而腾讯地图将二者合并。 这意味着使用高德地图实现逆地理编码,首先需要执行定位操作,再将得到的结果传给逆地理编码插件获得最后的结果。 此外…

    03 月 17 日 2021 年
    JavaScript Node Vue-2 Nuxt Promise
  19. 前端开发

    使用腾讯位置服务进行 Web 前端定位

    正在开发的 Web 项目需要获取使用者的位置信息,而使用者主要通过移动端访问此 Web 服务。位置信息需要精确到区。在腾讯位置服务的定位解决方案里想要搜索可用的 JavaScript 库,只看到了服务端的 IP 定位和移动端的几个 SDK 包,甚异之。 终于在不起眼的地方找到了前端定位组件,适用于浏览器进行定位操作。 本文基于 Nuxt.js 实现前端定位功能。 它能做什么 组件旨在优化纯 HTM…

    03 月 16 日 2021 年
    JavaScript Node Vue-2 Nuxt
  20. 技术琐事

    提示 *** is not a symbolic link 解决方案

    问题描述 在 CentOS 环境下执行 和 命令时都出现提示警告,节选内容如下所示: 错误分析 进入到对应目录下查找可以发现,这里的 与 实际上是相同的动态库文件,而非我们期望的符号链接和动态库文件。 这个错误的产生原因是, 在正常情况下应该是一个指向 文件的软链接,但却变成了一个动态库文件。 在一般情况下,这个错误并不会导致严重的问题;但假如目录下有多个不同版本的动态库文件…

    03 月 10 日 2021 年
    Linux
  21. 前端开发

    Nuxt 项目配置 ESLint 和 Prettier 检查并规范代码质量与格式

    哪位代码人不希望自己的代码总有统一优美的风格,不会因为合作开发项目而杂乱呢? 在最开始写项目代码的时候我就用起了 ESLint 和 Prettier,再装一堆预设的配置,便跑了起来。令人沮丧的是,用 ESLint 修复了代码质量问题,还是会在编译器里看到红色波浪线,提醒还有些代码风格需要修复。直到这一次,我才忽然意识到 ESLint 和 Prettier 其实分工了不同领域,协同使用体验极好。 本…

    03 月 03 日 2021 年
    Node Nuxt ESLint Prettier VSCode
  22. 前端开发

    Webpack 读取本地 Markdown 文件并进行预处理

    在开发 NetUnion 的官网页面时,有这样一个需求:读取本地目录下的新闻和博客文件,并在前端渲染,其中文件均为 Markdown 格式。 与全栈开发直接调用后端数据库不同的是,没有数据表字段来记录文件的不同属性,例如文件的题目、作者、撰写日期等,因此这些属性需要记录在 .md 文件当中。 这样的撰写方式是不是很熟悉?没错,不就是我正在写的 Hexo 博客中 .md 文件的编写格式嘛! 自动导入…

    02 月 23 日 2021 年
    Markdown JavaScript Node Webpack
  23. 技术琐事

    一键安装并配置 MTProto Proxy 代理 Telegram

    Telegram 和 MTProto 是什么 Telegram,中文名称为“电报”,或简称“tg”,是一款跨平台即时通讯软件,客户端完全开源。我觉得重要的有如下 Features: 私密性高。不再使用的账号最长保留年限为 1 年,随时销毁聊天记录和一切账号资料。 安全性。端对端加密,不受审查。 完全免费。不限制上传文件(视频会有压缩),甚至可以拿来当备用网盘使用。不过已经确认会在将来布局群组广告…

    02 月 21 日 2021 年
    Telegram MTProto
  24. 技术琐事

    使用 Github Actions 持续集成与部署 Hexo 博客

    这是我撰写的第一篇与 Github Actions 有关的博客,那么就首先对 Github Actions 做一个简短的介绍吧。 Github Actions 是 Github 于 2018 年 10 月推出的持续集成服务(CI)。 大家知道,持续集成由很多操作组成,比如抓取代码、运行测试、登录远程服务器,发布到第三方服务等等。GitHub 把这些操作就称为 actions…

    02 月 19 日 2021 年
    Github-actions Hexo