把一段 Shell 脚本保存成文本文件: ```sh # hello.sh echo 'Hello World' ``` 我们可以通过两种方式运行, 第一种是 Shell 命令加脚本文件: ```sh sh hello.sh bash hello.sh zsh hello.sh ``` 第二... ...继续阅读 (38)

折腾 NAS 也差不多两年的时间了, 一开始的 [Mac Mini + 硬盘柜的方案](/remote_accessible_nas_by_mac_mini), 到后来直接购买成品 NAS, 再到现在的小主机 + 外接硬盘的方案. 小主机 + 外接硬盘的方案已经稳定运行半年多了, 目前体验还可以. ... ...继续阅读 (46)

## Mixin 在 ES6 之前, React 使用 React.createClass 创建组件: ```jsx const Article = React.createClass({ getInitialState: function () { return { c... ...继续阅读 (39)

我们的一些前端页面偶尔会有用户反馈页面空白, 稍等一会刷新就正常了. 奇怪的是我们在日志系统并没有发现可能导致页面空白的报错, 所以我们一度以为是用户的网络问题. 直到有一次我们内部人员也遇到了这个问题, 我们马上封锁现场进行排查, 结果发现是某个 JS 文件 `404`, 导致页面初始化失败从而... ...继续阅读 (38)

进入主题之前, 先来了解一下现有的 CSS 长度单位, 可以分为绝对长度单位和相对长度单位. ## 绝对长度单位 ### `px` 现代显示器是由一颗颗像素组成的, 以我的显示器为例, 分辨率为 2560x1664, 也就是说这块显示器横向有 2560 个像素, 纵向有 1664 个像素, 显... ...继续阅读 (43)

 [Excalidraw](https://excalidraw.com) 是一款开源的画板工具, 可以用来绘制带有手写风格的图. 虽然 Excalidraw 本身支持多语言, 但是其手写风格的字体只支持英文, 其他语言会回退到普通字体. ![非英语会回... ...继续阅读 (38)

前段时间开始折腾 NAS, 或者说 Home server, 试了很多方案, 最后采用了 Ubuntu Server + Docker 的方式, 下面是我用 Docker 部署的一些服务. ## Portainer Docker 在 CLI 的情况下使用, 命令和参数经常需要查文档. [Port... ...继续阅读 (36)

所谓书写模式, 就是文本是如何排版的. 我们写字的时候可能从来没有注意过字与字之间是如何排列的, 都是自然而然地从左往右写满一行然后往下换行, 然而像我们的古人并不是按照这个方式去排列文本的, 他们是从上往下写满一列后再往左换一列.  除了我们古... ...继续阅读 (35)

在我负责的业务里面, 有个项目用于存放运营活动页面, 通常情况下每次运营活动都会相应地搭配一个或数个活动页面. 这个项目使用 react 构建 UI, 活动页面没有 SEO 的需求, 所以采用的是浏览器渲染. 同时使用前端路由, 每个活动页面都是 react-router 的子路由. 随着时间的增长... ...继续阅读 (38)

一般情况下我都是把影视资源放在网盘上, 第一是网盘空间大, 第二是随时随地可以观看(手机/平板/电脑). 前两个月「爱死机」出了第三季, 于是下载并放到网盘上打算晚点看. 当我忙完打开网盘想观看时, 发现被标注成「违规文件」无法观看, 也无法下载. 加上之前了解过 NAS, 所以想自己搞一个 N... ...继续阅读 (39)

[React Fragment](https://reactjs.org/docs/fragments.html) 支持**不添加额外节点**的情况下对子元素进行分组, 在文档上中 `Fragment` 的 Props 只有 `key`, 我们给 Fragment 添加任何事件监听例如 `onCli... ...继续阅读 (30)

最近看了一篇文章「[解决前端常见问题：竞态条件](https://juejin.cn/post/7098287689618685966)」([PDF](./archive.pdf)), 解释了什么是竞态条件以及如何解决这个问题, 不过觉得例子不是很完美, 所以用自己的例子复述一遍. ...继续阅读 (32)

最近看到了几篇关于被 Github 被封号的帖子, 当然帖子说的不一定是真的, 也有可能是这些账号真的违反了 Github 政策. 不过俄乌战争闹得沸沸扬扬, Github 也有考虑对俄罗斯开发者进行限制, 无独有偶, 几年前 Github 就曾将伊朗的开发者账号封禁, 导致他们无法登录账号和访问代... ...继续阅读 (32)

## 使用 function 作为 useState 的初始值 计算机科学中存在一个[求值策略](https://zh.wikipedia.org/wiki/%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5)的问题, 简单来说就是什么时候计算参数的值, 比如以下伪代码: ... ...继续阅读 (40)

最近面试时发现很多前端对 DOM 事件不熟悉, 甚至完全没有了解过相关的概念, 所以趁着这个机会, 自己也整理并复习一下 DOM 事件相关的知识点. DOM 事件指的是文档上的元素会主动或者被动地触发一些特定的行为, 然后可以使用 JavaScript 对这些行为进行监听, 当这些行为触发时会自动... ...继续阅读 (39)

在大三的时候, 我创建了自己的博客, 跟大部分人一样, 创建博客不外乎这几个原因: 1. 作为一个程序员, 拥有博客是标配, 可以对外展示自己 1. 作为学习的记录, 总结一些技术或者经验进行分享 1. 能够体验到一个项目开发部署运维的全过程 1. 炫技(作为一个菜逼程序员, 目前还没有值得炫耀的... ...继续阅读 (33)

## CookieStore API 目前, 浏览器可用的存储方式有 `cookie`/`sessionStorage`/`localStorage`/`IndexedDB`, 后三者都暴露了十分友好的 API 供开发者访问, 只有 cookie 例外. 回想一下, 平时我们都是怎么操作 cook... ...继续阅读 (43)

 `useCallback` 接受一个回调函数和一个依赖数组作为参数, 当依赖数组的每一项都不变的情况下返回缓存过后的回调函... ...继续阅读 (35)

最近在 React 项目遇到了一个问题, Web App 有一个登录弹窗, 在没有登录的情况下进行一些需要用户信息的操作, 首先会弹出登录弹窗. 然而这种操作分布在各个组件, 所以在 redux 保留一个变量 `loginDialogVisible`, 通过 `action` 控制登录弹窗是否展示... ...继续阅读 (33)

最近一段时间监控平台收集了很多 JS 错误，大部分都是`TypeError` ```txt Uncaught TypeError: Cannot read property 'xxx' of null ``` 经过排查后发现基本都是因为接口数据错误的导致，比如 ```js // 正常数据 { ... ...继续阅读 (31)

CSS3 中的`@font-face`提供了自定义字体的功能，可以使网页不局限于用户系统中的字体。 然而理想很丰满，现实很骨感。 像英文这类的语言来说，字体文件包含非常少的字符，所以一个字体文件会非常的小。 我随便下载了几份英文字体