Skip to content

Commit b6563b4

Browse files
author
梁怀刚
committed
feat: 整理网站内容
1 parent 97b64d4 commit b6563b4

File tree

36 files changed

+88
-2961
lines changed

36 files changed

+88
-2961
lines changed

‎blog/2022-01-06-送自己一个生日礼物.md renamed to ‎blog/2015-01-06-送自己一个生日礼物.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ tags: [daily]
55

66
建站初衷: 自问是一个比较喜欢 it，喜欢学习，但是往往学习过的工作中不太常用的知识总是遗忘，所以秉承“好记性不如烂笔头”的宗旨决定自己建站，用于自己的学习记录，便于快速回顾知识点，可能有人会说直接注册一个掘金账号不就行了，但是我希望我的产出始终在我自己这里，而不是在别人的数据库。综上所述，有了现在的这个网站。
77

8+
<!-- truncate -->
9+
810
> 简单的事情简单做, 今天用最简单的方式完成了这个网站，用最简单的方式做一个生活的记录，没有数据库，没有后端，只有简单的 Markdown。
911
1012
## 当前网站使用的技术

‎blog/2016-04-30-Web端裁剪图片方法.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
## Web端裁剪图片方法
2-
3-
4-
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
由于在Web端，JavaScript不能直接处理本地文件，因此可以在后台裁剪图片，或者利用html5的canvas来处理。
77

8+
<!--truncate-->
9+
810
### 方法1：传送到后台剪切
911

1012
**步骤1：上传图片到后台，向前端返回图片URL**

‎blog/2016-12-09-jQuery实现弹幕效果、文字水平滚动垂直滚动插件.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
## jQuery实现弹幕效果、文字水平滚动/垂直滚动插件
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
在写这个插件之前，已经在很多专题页面需要用到弹幕，或者是文字滚动等效果，原理大致相同（也有细微区别），但一直没有封装成插件。也是在这些工作中尝试使用了多种方法，在这里也将一一列举其中的优缺点。
77

88
### **一、使用CSS Animation的解决方案**
99

1010
使用CSS Animation这个解决方案并不好，但这也是我最开始的一个思路。我个人认为这是一个最差的解决方案，在实际使用过程中发现了许多意外的问题。它的兼容性倒是其次，更大的问题是弹幕元素的不可控制，以及窗口失去焦点后，动画暂停，但是JS并没有暂停。这就导致了重新恢复窗口焦点后，弹幕一堆的出现。是一个非常不好的效果。
1111

12+
<!--truncate-->
13+
1214
**思路：**
1315

1416
使用@keyframes定义一个移动的动画，通过JS动态的加载弹幕元素到显示区域边缘，并指定相应的类。那么添加的元素就会执行我们定义的这个移动动画。那么这个弹幕的效果就实现了。当然这些元素都是绝对定位元素。

‎blog/2016-12-22-《JavaScript设计模式》学习笔记——发布订阅者模式.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
## 《JavaScript设计模式》学习笔记——发布订阅者模式
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
因前段时间业务需要使用到了观察者（Observer）模式，同时在使用的过程中，让我想起了Publish/Subscribe（发布/订阅）模式。起初感觉这两种模式非常相似，但是细细观察你会发现，Obsever模式要求希望接收到主题通知的观察者（或对象）必须订阅内容改变事件。
77

88
然而Publish/Subscribe模式使用了一个主题/事件通道，这个通道介于希望接收到通知（订阅者）的对象和激活事件的对象（发布者）之间。其目的是避免订阅者和发布者产生依赖关系。这与Obsever模式不同，因为它允许任何订阅者执行适当的事件处理程序来注册接收发布者发出的通知。
99

10+
<!--truncate-->
11+
1012
```
1113
let pubsub = {};
1214

‎blog/2017-02-18-CSS3硬件加速技巧.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
## CSS3硬件加速技巧
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。
77

@@ -11,6 +11,8 @@
1111

1212
最近深入了解了一些浏览器内核的细节，感觉这里面其实有坑啊。。。
1313

14+
<!--truncate-->
15+
1416
事情要从最近看的《[WebKit技术内幕](http://book.douban.com/subject/25910556/?ref=zhelin.me)》说起，第二章介绍了网页的结构，其中提到了Webkit硬件加速的方式，会把需要渲染的元素放到特定的『Composited Layer』中，在chrome的控制台可以这样开启：
1517

1618
![CSS3硬件加速技巧](https://cdn.jsdelivr.net/gh/HarryPoint/oss@main/uPic/2024-07-12_15:06:02_rJ2GXd.png)

‎blog/2018-04-22-再谈JavaScript作用域.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
## 再谈JavaScript作用域
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
### 什么是作用域？
77

88
作用域，这个词在编程界经常能听到看到，每一个程序员几乎都有被问到过。在前端圈，面试JavaScript相关知识，这可以算说是一个非常基础的问题了。但早年间我长期陷入了一种“只可意会不可言传”的地步，我不知道是不是有许多小伙伴与我曾经有一样的经历，所以我就抽时间把书本中看到的东西整理了一下。把提炼的东西分享给大家。
99

10+
<!--truncate-->
11+
1012
可能大多对作用域的通用解释是这种：
1113

1214
> 作用域就是变量（标识符）适用范围，控制着变量的可见性。

‎blog/2018-05-06-简述Node.js内存限制.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
## 简述Node.js内存限制
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
前段时间在Ghost博客系统群与群友交流，谈到了Node内存管理的问题，发现很多小伙伴对Node内存管理完全处于一个“零认识”的状态，这可能与本身工作没有接触到相关，毕竟我们大多数工作可能与DOM打交道，当页面内存占用过多（可能性也很低），几乎不用等GC，用户已经刷新或关闭了网页。
77

88
做为前端工程师的我们，大多使用Node做一做小工具，这大多是短时间执行的场景，即使内存使用过多或是内存泄漏，也只会影响到我们使用者，随着进程的退出，内存也会释放。但面对Node服务端应用的开发，内存管理这样一个话题就不可避免的摆在了我们面前。虽然我对Node的认知也比较浅薄，但觉得也有必要将知道的内存相关知识整理一下。
99

1010
第一次看重内存管理是在做[推妹子前端占位图](https://tuimeizi.cn/?ref=zhelin.me)的时候，顺便了解了一下相关知识，算下来正好快一年了。基于Node无阻塞、事件驱动建立的网络服务，本身就具有内存消耗低的优点，但面对海量的图片处理请求，也不得不让我考虑超低配云服务器内存的问题。
1111

12+
<!--truncate-->
13+
1214
### V8内存管理
1315

1416
在浏览器开发工作中，我几乎没有遇到过垃圾回收对程序构成的性能影响。知道的也就是老生常谈的通过eval('Code')或是setTimeout('Code', 0)等方法动态改变作用域带来的性能影响。但都不会这样去写代码。我们知道Node的JavaScript执行引擎是V8，关于V8的历史，或是关于Node的历史我们就不在这里赘述了，毕竟学一门语言和使用一门框架，最先应该了解的是它是基于怎样的场景为了解决什么样的问题而诞生的。但我们必须要记住和了解的是：*Node对JavaScript执行的优异表现直接受益于V8。它可以随着V8的升级享受到更好的性能表现和实现新的语言特性。但也会因为V8受到一些限制。*

‎blog/2018-09-28-前端基础算法——二分查找.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ tags: [daily]
55

66
## 前端基础算法——二分查找
77

8+
<!--truncate-->
89

910
> 二分查找，其查找的列表必须有序。时间复杂度为：O(log n)
1011
@@ -16,7 +17,7 @@ tags: [daily]
1617

1718
二分查询/简单查询对比（查找数1）
1819

19-
<!--kg-card-begin: markdown-->
20+
2021

2122
```
2223
function binarySearch (list, item) {
@@ -41,6 +42,4 @@ function binarySearch (list, item) {
4142
}
4243
```
4344

44-
<!--kg-card-end: markdown-->
45-
4645
[binarySearch](https://codepen.io/ZhelinCheng/embed/preview/dQjjZK?height=300\&slug-hash=dQjjZK\&default-tabs=js,result\&host=https://codepen.io)

‎blog/2018-10-01-前端基础算法——选择排序.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
## 前端基础算法——选择排序
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
> 选择排序，运行时间：O(n^2)
77
@@ -35,6 +35,6 @@ function selectionSort (arr) {
3535
}
3636
```
3737

38-
<!--kg-card-end: markdown-->
38+
<!--truncate-->
3939

4040
[Selection Sort](https://codepen.io/ZhelinCheng/embed/preview/WYaZOX?height=300\&slug-hash=WYaZOX\&default-tabs=js,result\&host=https://codepen.io)

‎blog/2019-09-18-Nest.js学习笔记.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
## Nest.js学习笔记
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
## 控制器Controller
77

88
@Controller() 装饰
99

10+
<!-- truncate -->
1011
### 使用
1112

1213
```

‎blog/2022-01-22-iptables与nftables详解.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ tags: [daily]
77

88
本文将深入探讨两个关键的防火墙技术，即iptables和nftables，它们是Linux操作系统中用于设置和管理防火墙规则的工具。我们将探讨防火墙的基础原理，以及iptables和nftables的工作原理、用法和功能。通过本文，读者将能够了解如何配置和管理这些强大的防火墙工具，以确保网络的安全性和完整性。
99

10+
<!-- truncate -->
11+
1012
## 1. 防火墙基础
1113

1214
### 1.1. 什么是防火墙

‎blog/2022-03-18-React核心回顾.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
5+
16
## React Fiber理念
27

38
### 1. 为什么ES语法中有Generator可以实现异步、中断、恢复的功能，React团队还要重新设计呢？
@@ -9,6 +14,8 @@
914

1015
同时，Generator虽然可以实现异步、中断、恢复，但无法调度更新的优先级。
1116

17+
<!-- truncate -->
18+
1219
### 2. Fiber架构的实现原理？
1320

1421
> [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture?ref=zhelin.me)

‎blog/2022-05-30-Rust学习笔记.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
## Rust学习笔记
2-
3-
4-
<!--kg-card-begin: markdown-->
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
55

66
## 关键点
77

88
1. Rust没有null，但null的概念还是有用的，因某种原因而变为无效或缺失的值 `Option<T>`
99

1010
## 5. Struct结构体
1111

12+
<!-- truncate -->
13+
1214
### 定义
1315

1416
### 方法

‎blog/2023-02-13-mini-censor实现敏感词过滤.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ tags: [daily]
99

1010
算法使用的是AC（Aho–Corasick）自动机算法。会简单地对方案进行阐述，主要是代码实现。需要注意的是，在这里将采用TypeScript编写。同时代码也上传至GitHub，[点击此处](https://github.com/HarryPoint/mini-censor)查看本文完整代码。
1111

12+
<!-- truncate -->
13+
1214
> Aho–Corasick算法是由Alfred V. Aho和Margaret J.Corasick 发明的字符串搜索算法，用于在输入的一串字符串中匹配有限组“字典”中的子串。它与普通字符串匹配的不同点在于同时与所有字典串进行匹配。算法均摊情况下具有近似于线性的时间复杂度，约为字符串的长度加所有匹配的数量。
1315
1416
在正式进入到AC自动机算法之前，我们需要先了解Trie树。

‎blog/2023-04-02-前端算法.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const dfs = (root) => {
2323
};
2424
```
2525

26+
<!-- truncate -->
27+
2628
### 树的广度优先遍历
2729

2830
> 访问离根节点最近的节点

‎blog/2023-09-13-Docker管理工具Portainer重置密码.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
## Docker管理工具Portainer重置密码
2-
3-
4-
<!--kg-card-begin: markdown-->
5-
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
65
使用Portainer忘记密码快速解决方案：
76

87
1、进入服务器后台
@@ -13,6 +12,8 @@
1312
sudo docker pull portainer/helper-reset-password
1413
```
1514

15+
<!-- truncate -->
16+
1617
3、停止portainer
1718

1819
```shell

‎blog/2023-09-29-RouterOSv7通过MAC地址获取IPv6并上报至DNSPodCloudFlare.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
## RouterOS v7 通过 MAC 地址获取IPv6并上报至 DNSPod / CloudFlare
2-
3-
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
45
在我将家里的主路由改为RouterOS后，始终找不到一个能完美更新内网设备IPv6的脚本，要么是通过EUI64转换的，要么就是端口转发，还有引入第三个设备，用别的语言去做DDNS的更新，这些方案虽然都能实现最终的效果，但无疑是增加了别的成本，而且不够优雅。RouterOS本身就支持的东西，为什么要舍近求远并？这并不是我的风格。
56

67
在网络上搜索了一周后，还真发现了有一个相关的脚本，但是整体看着较乱，作者也是在RouterOS v6上写的，所以也不敢运行。最终各种查阅无果后，只有自己动手写这个脚本了。
78

9+
<!-- truncate -->
10+
811
那先说这个脚本的需求：\
912
运行在RouterOS上，自动获取指定内网设备的IPv6地址，具有自动更新、定时检查等功能；
1013

‎blog/2023-10-28-RouterOS根据FakeIP分流至Linux旁路网关.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
## RouterOS 根据 Fake IP 分流至 Linux 旁路网关
2-
1+
---
2+
authors: Harry
3+
tags: [daily]
4+
---
35

46
通过充分利用RouterOS的强大功能，我们可以探索自定义路由的各种协议，如BGP和OSPF，但这些方法可能在上手时有一些难度。在家庭网络中，使用这些协议会增加维护成本。很长一段时间以来，我一直依赖旁路网关和DHCP模式来满足上网需求。然而，我常常在思考是否有更简单且影响范围更小的上网方式。
57

68
最近，我放弃了在旁路网关上使用OpenWrt，而改为使用Ubuntu。相较于OpenWrt这种路由系统，我认为在Linux系统上设置旁路网关具有更高的自主性（尽管OpenWrt也是基于Linux）。因此，我开始考虑**更为简单的上网方式**，这个想法在我的心中涌现，也就有了下面这篇文章。
79

10+
<!-- truncate -->
11+
812
该篇文章需要使用Fake IP模式，如果不知道这个是什么，那就可以关闭了；
913

1014
## 1. RouterOS 配置

0 commit comments

Comments
 (0)