内网穿透下 NAS 使用 DNS 轮循作为负载均衡
> 注意是**轮循**而不是**轮询**, 前者对应的英文是 round-robin, 后者对应 polling. 由于我的宽带没有公网 IP, 所以我的 NAS 上一些服务是通过内网穿透到具有公网 IP 的 VPS 上进行远程访问的. 这里有两个问题导致远程访问不太稳定, 一个是 NAS 和 V...
2025/3/2
articleCard.readMore<众安车保>上当指南
年初的时候车险快要到期, 当时好几个保险销售加我微信给我报价单(好奇怎么知道我信息), 有平安/人保这些, 还有个自称**众安**的销售也给我报了价, 她的报价比其他保险要低 5% 到 10% 这样子.  , 到后来直接购买成品 NAS, 再到现在的小主机 + 外接硬盘的方案. 小主机 + 外接硬盘的方案已经稳定运行半年多了, 目前体验还可以. ...
2023/12/12
articleCard.readMoreReact 组件中复用代码的方式
## Mixin 在 ES6 之前, React 使用 React.createClass 创建组件: ```jsx const Article = React.createClass({ getInitialState: function () { return { c...
2023/12/10
articleCard.readMore负载均衡下的前端资源更新策略
我们的一些前端页面偶尔会有用户反馈页面空白, 稍等一会刷新就正常了. 奇怪的是我们在日志系统并没有发现可能导致页面空白的报错, 所以我们一度以为是用户的网络问题. 直到有一次我们内部人员也遇到了这个问题, 我们马上封锁现场进行排查, 结果发现是某个 JS 文件 `404`, 导致页面初始化失败从而...
2023/9/20
articleCard.readMoreCSS 基于视区的长度单位
进入主题之前, 先来了解一下现有的 CSS 长度单位, 可以分为绝对长度单位和相对长度单位. ## 绝对长度单位 ### `px` 现代显示器是由一颗颗像素组成的, 以我的显示器为例, 分辨率为 2560x1664, 也就是说这块显示器横向有 2560 个像素, 纵向有 1664 个像素, 显...
2023/9/12
articleCard.readMoreExcalidraw 支持自定义字体
 [Excalidraw](https://excalidraw.com) 是一款开源的画板工具, 可以用来绘制带有手写风格的图. 虽然 Excalidraw 本身支持多语言, 但是其手写风格的字体只支持英文, 其他语言会回退到普通字体.  除了我们古...
2023/3/31
articleCard.readMore大量活动页面持续性维护的解决方案
在我负责的业务里面, 有个项目用于存放运营活动页面, 通常情况下每次运营活动都会相应地搭配一个或数个活动页面. 这个项目使用 react 构建 UI, 活动页面没有 SEO 的需求, 所以采用的是浏览器渲染. 同时使用前端路由, 每个活动页面都是 react-router 的子路由. 随着时间的增长...
2022/10/20
articleCard.readMoreMac mini 搭建外网可访问的简易 NAS
一般情况下我都是把影视资源放在网盘上, 第一是网盘空间大, 第二是随时随地可以观看(手机/平板/电脑). 前两个月「爱死机」出了第三季, 于是下载并放到网盘上打算晚点看. 当我忙完打开网盘想观看时, 发现被标注成「违规文件」无法观看, 也无法下载. 加上之前了解过 NAS, 所以想自己搞一个 N...
2022/8/8
articleCard.readMoreReact Fragment 添加事件监听?
[React Fragment](https://reactjs.org/docs/fragments.html) 支持**不添加额外节点**的情况下对子元素进行分组, 在文档上中 `Fragment` 的 Props 只有 `key`, 我们给 Fragment 添加任何事件监听例如 `onCli...
2022/6/26
articleCard.readMore如何在 React 解决竞态条件
最近看了一篇文章「[解决前端常见问题：竞态条件](https://juejin.cn/post/7098287689618685966)」([PDF](./archive.pdf)), 解释了什么是竞态条件以及如何解决这个问题, 不过觉得例子不是很完美, 所以用自己的例子复述一遍. <iframe...
2022/6/19
articleCard.readMore使用脚本备份 Github 仓库
最近看到了几篇关于被 Github 被封号的帖子, 当然帖子说的不一定是真的, 也有可能是这些账号真的违反了 Github 政策. 不过俄乌战争闹得沸沸扬扬, Github 也有考虑对俄罗斯开发者进行限制, 无独有偶, 几年前 Github 就曾将伊朗的开发者账号封禁, 导致他们无法登录账号和访问代...
2022/3/6
articleCard.readMore高性能 React 应用的几个小技巧
## 使用 function 作为 useState 的初始值 计算机科学中存在一个[求值策略](https://zh.wikipedia.org/wiki/%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5)的问题, 简单来说就是什么时候计算参数的值, 比如以下伪代码: ...
2022/3/3
articleCard.readMore复习 DOM 事件
最近面试时发现很多前端对 DOM 事件不熟悉, 甚至完全没有了解过相关的概念, 所以趁着这个机会, 自己也整理并复习一下 DOM 事件相关的知识点. DOM 事件指的是文档上的元素会主动或者被动地触发一些特定的行为, 然后可以使用 JavaScript 对这些行为进行监听, 当这些行为触发时会自动...
2021/11/19
articleCard.readMore我的博客架构变迁之路
在大三的时候, 我创建了自己的博客, 跟大部分人一样, 创建博客不外乎这几个原因: 1. 作为一个程序员, 拥有博客是标配, 可以对外展示自己 1. 作为学习的记录, 总结一些技术或者经验进行分享 1. 能够体验到一个项目开发部署运维的全过程 1. 炫技(作为一个菜逼程序员, 目前还没有值得炫耀的...
2021/5/10
articleCard.readMore浏览器和 JavaScript 的一些新特性
## CookieStore API 目前, 浏览器可用的存储方式有 `cookie`/`sessionStorage`/`localStorage`/`IndexedDB`, 后三者都暴露了十分友好的 API 供开发者访问, 只有 cookie 例外. 回想一下, 平时我们都是怎么操作 cook...
2021/1/25
articleCard.readMoreuseCallback 的误区
 `useCallback` 接受一个回调函数和一个依赖数组作为参数, 当依赖数组的每一项都不变的情况下返回缓存过后的回调函...
2020/10/30
articleCard.readMore在 React 中使用事件分离状态
最近在 React 项目遇到了一个问题, Web App 有一个登录弹窗, 在没有登录的情况下进行一些需要用户信息的操作, 首先会弹出登录弹窗. 然而这种操作分布在各个组件, 所以在 redux 保留一个变量 `loginDialogVisible`, 通过 `action` 控制登录弹窗是否展示...
2020/1/15
articleCard.readMore如何处理 RESTFUL 数据异常导致的前端错误
最近一段时间监控平台收集了很多 JS 错误，大部分都是`TypeError` ```txt Uncaught TypeError: Cannot read property 'xxx' of null ``` 经过排查后发现基本都是因为接口数据错误的导致，比如 ```js // 正常数据 { ...
2019/5/30
articleCard.readMore基于 Node.js 的 WebFont 解决方案
CSS3 中的`@font-face`提供了自定义字体的功能，可以使网页不局限于用户系统中的字体。 然而理想很丰满，现实很骨感。 像英文这类的语言来说，字体文件包含非常少的字符，所以一个字体文件会非常的小。 我随便下载了几份英文字体 ![英文字体大小](./english_font_size.pn...
2019/3/10
articleCard.readMore