Skip to main content

RouterOS根据FakeIP分流至Linux旁路网关

· 5 min read
Harry
Front End Engineer

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

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

RouterOSv7通过MAC地址获取IPv6并上报至DNSPodCloudFlare

· 13 min read
Harry
Front End Engineer

在我将家里的主路由改为RouterOS后,始终找不到一个能完美更新内网设备IPv6的脚本,要么是通过EUI64转换的,要么就是端口转发,还有引入第三个设备,用别的语言去做DDNS的更新,这些方案虽然都能实现最终的效果,但无疑是增加了别的成本,而且不够优雅。RouterOS本身就支持的东西,为什么要舍近求远并?这并不是我的风格。

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

前端算法

· 8 min read

一种分层数据的抽象模型 js 中没有树,但可以用ObjectArray构建树

树的深度优先遍历

尽可能深的搜索树的分支

img

  • 访问根节点
  • 对根节点的 children 挨个进行深度优先遍历
const dfs = (root) => {
console.log(root.val);
root.children.forEach(dfs);
};

mini-censor实现敏感词过滤

· 25 min read
Harry
Front End Engineer

如何实现纯前端的敏感词过滤?

无论是评论、弹幕、文章、IM聊天,都需要做敏感词过滤处理来规避风险。在前端开发中,使用replace函数来替换字符串是我们的常规操作。在这之前我思考过如果用JavaScript来实现敏感词过滤该怎么做。在学习过程中,接触到了Trie树。

算法使用的是AC(Aho–Corasick)自动机算法。会简单地对方案进行阐述,主要是代码实现。需要注意的是,在这里将采用TypeScript编写。同时代码也上传至GitHub,点击此处查看本文完整代码。

Rust学习笔记

· 5 min read
Harry
Front End Engineer

关键点

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

5. Struct结构体

React核心回顾

· 4 min read
Harry
Front End Engineer

React Fiber理念

1. 为什么ES语法中有Generator可以实现异步、中断、恢复的功能,React团队还要重新设计呢?

Fiber Principles: Contributing To Fiber #7942

  • 类似async,Generator也是传染性的,使用了Generator则上下文的其他函数也需要作出改变。这样心智负担比较重;
  • Generator执行的中间状态是上下文关联的;

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

iptables与nftables详解

· 8 min read
Harry
Front End Engineer

在当今数字化时代,网络安全已经成为组织和个人日常生活中的一个至关重要的方面。随着互联网的普及,网络威胁和攻击的复杂性和频率也在不断增加。在这个背景下,强大的防火墙技术变得尤为关键,以保护我们的网络和数据免受未经授权的访问、恶意攻击和信息泄漏的威胁。

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

前端基础算法——选择排序

· One min read
Harry
Front End Engineer

选择排序,运行时间:O(n^2)

// 找出数组中最小的数字
function findSmallest (arr) {
let minValue = arr[0]
let minIndex = 0

for (let i in arr) {
let item = arr[i]
if (item >= minValue) { continue }
minIndex = i
minValue = item
}

return minIndex
}

// 对数字进行排序
function selectionSort (arr) {
let len = arr.length
let newArr = []
for (let i = 0; i < len; i++) {
let minIndex = findSmallest(arr)
newArr.push(arr[minIndex])
arr.splice(minIndex, 1)
}

return newArr
}

简述Node.js内存限制

· 11 min read
Harry
Front End Engineer

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

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

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

再谈JavaScript作用域

· 15 min read
Harry
Front End Engineer

什么是作用域?

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

CSS3硬件加速技巧

· 10 min read
Harry
Front End Engineer

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

常听人说:

移动端要想动画性能流畅,应该使用3d硬件加速

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

《JavaScript设计模式》学习笔记——发布订阅者模式

· 3 min read
Harry
Front End Engineer

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

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

jQuery实现弹幕效果、文字水平滚动垂直滚动插件

· 9 min read
Harry
Front End Engineer

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

一、使用CSS Animation的解决方案

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

Web端裁剪图片方法

· 5 min read
Harry
Front End Engineer

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

送自己一个生日礼物

· 2 min read
Harry
Front End Engineer

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