R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

使用 Puppeteer 编写 CTF XSS Checker

之前写过一篇文章:《使用 PhantomJS 来实现 CTF 中的 XSS 题目》,后来被群里的某大佬翻了出来并被吐槽了一番:好吧,现在是 8102 年了,该升级一下技术了。于是今天下班后没去打太鼓,转而去折腾 puppeteer。所需技术XSS 基础:相信点进来的同学都了解。Promise:相信搞过前端开发的同学都知道。async / await:相信大家都会把 Promise 转成这东西。Puppeteer:Chrome Headless 的 Node.JS 库,相信大家都听说过。Phant...

代码高亮的可行方案

Update 20180704:负向零宽断言我手边只有 Chrome 支持,所以目前还是不可用的,还好 PrismJS 提供了一种 Hack 的方法可以支持这个特性的很有限的部分:当传入 lookbehind 属性时,会删掉 match 数组的第零项,这样第一个括号的内容就成了匹配到的东西……我已经给 PrismJS 提了 Pull Request(地址在 这里),但尚未被合并,仅供参考。背景作为一个强迫症,我对博客里的代码高亮一向是要求很高的,一个好的代码高亮库,需要满足如下几点:屏幕大、电量...

编写状态驱动的业务代码

什么是状态驱动的业务代码别看概念似乎很高大上,其实是我胡扯出来的……简单来说,就是把业务按照一个个状态进行拆分,然后通过状态来计算当前要执行的操作(后端)或当前要展示的界面(前端)。虽然这个做法很早就有了,而且绝对有很多人实践过了,但似乎一直没有一个专门的名词(也可能是我不知道),于是我就将其描述为“状态驱动的业务代码”了。几个业务场景多个步骤的页面我们的一个业务场景是(部分逻辑已修改):提供一个拣货的页面,操作员首先扫描订单上的条形码,页面上显示这个订单所需的货物列表,然后操作员再依次扫描货物...

关于一个同学的事情

文章里会有一些负能量,如果心情不好的话请先关掉吧。晚上的时候从我爸那儿得知,有个跟我一个院子里长大的同学,因为抑郁症,寻短见了。虽然跟他大学四年几乎没有任何交集,但我记得,从小我就经常跟他一起玩。小时候我们一起扔过飞盘,去后院比赛骑车,在他家里第一次看到拨号上网,一起玩过《上古神器》,争论过谁的小学毕业考试成绩好;初中之后,他是我做的第二个和第三个游戏的主人公之一,我们为《高端手册》中的题目争论过,一起跟后院的“闲杂人等”打过篮球,也一起为了体育中考而拉单杠练跳远;高中被分到了一个班,由于我跟他...

由 npm link 引发的一个坑

什么是 npm link可能很多同学没有接触过这个命令,就先提一下吧。NPM 文档在 这里。假设我们开发了一个 NPM 的包 a,然后我们的项目使用了这个包,那么正常情况下,每次 a 有变动,我们都要更新到项目中。npm 的 link 命令可以解决这个问题,步骤如下:进入 a 的根目录,执行 npm link,这会创建一个软链接 $PREFIX/lib/node_modules/a,指向 a 的根目录,也会将包里的 bin 指定的文件放到 $PREFIX/lib/bin 下;进入项目的根目录,执...

为了用户体验而做的事情

嗯你没看错,这篇文章的主角还是那个编辑器,还是熟悉的 react-dnd 和 immutable-js。现在这个编辑器已经可以替代目前线上的旧版编辑器了,而且功能更全。接下来我就说一说,为了让这个编辑器的用户体验更好,我都做了哪些事情——有技术方面的,也有设计方面的。技术方面拖拽时显示元素的详细内容由于用的是 react-dnd,之前的效果是默认效果——对元素 DOM 所占矩形区域的网页截图,这样就造成了一些神奇的现象。后来我用了一个临时的解决方案,就是使用 dragPreview 来为拖拽添加...

对 react-dnd、immutable-js 与树形结构的优化

背景最近一直在做一个低配版网页编辑器(面单编辑器),这是我刚入职的时候从同事那儿接手的一个 React 项目,项目中使用了 react-dnd 作为拖拽库,Store 中的信息都是 Immutable 对象。按理说应该效率挺高的,于是我就一直专注于业务需求,这周就差不多写完了。如果一切顺利的话就不会有这篇文章了,起因是前天我手贱,搞了 256 个元素进去,别说拖拽了,选中一个元素都得卡上一秒左右……这怎么行,赶紧祭出之前摸索出来的 Performance 优化大法。由于支持 JSON 格式的导入...

一次很蠢的优化经历:判断数组 A 是否是数组 B 的一部分

原问题昨天一个同学问了我一个问题,他想扩展 JavaScript 中的 Array.prototype,以判断当前数组是否被包含于另一个数组(不考虑 a = [a] 这样的循环引用),例如:[1] 被包含于 [2, [1], 3] 和 [[2], [3, [1], 4]] 两个数组中。其实这道题如果只需要考虑引用相等,例如这样设计测试用例:const a = [1]; const b = [2, a, 3]; console.log(a.isPartOf(b)); // => true那就...

陈独秀同学请你坐下

昨天在推上看到某大佬的一条推文:“程序员往往是最会生活,最能感受生活的吧”。我不敢完全认同,毕竟每天累死累活的程序员我也见过;但这个问题的“幸存者偏差”其实刚好反着:会享受生活的程序员往往自己享受去了,反而是各种苦逼的同行们发声比较大。所以为了纠正这个偏差,我就诞生了~(被打上次的面试通过了,第二次来到深圳,还有十几个小时就满两周了,在新公司蹭着零食,跟旁边两个小哥哥一起写项目,日子过得其实挺滋润的。当然,首要的原因是公司的办公环境。之前听同事说,中国储能大厦是地铁站旁边的甲级办公楼,其它公司都...

深圳一日游兼 Shopee 终面酱油记

突然发现好久没写过酱油记了,看来退役之后以前的习惯都变了呢……之前经由三三内推,绕过了 Shopee 招聘要求中“一年以上工作经验”的限制,然后莫名其妙通过了让我跪到怀疑人生的技术面,进入了终面。终面是要去公司现场面试的。很开心的是公司可以报销往返的机票和一晚的住宿费,于是我在想如何才能尽可能呆的久一点,毕竟深圳是个大部分时间都可以穿着短袖短裤拖鞋到处晃的城市!最终定下来是前一天早上的飞机到,面试完当天晚上飞回来。在准备安检之前,感觉自己带的东西有点太多了(一共就两天所以没带行李箱),于是就将衣...

Rex 的 2018 新年红包例行题解

今年又来出题凑热闹了。依旧是五道题,由于前面挂了一层 Cloudflare,并为这个域名开了浏览器检验,因此题目就直接用纯静态文件了。这次的界面比上次稍微好了一点,框的图片用的是我很久以前做的游戏中的窗口。具体的实现方法就请大家自行扒代码吧。下面说说题目。Level 1传送门:https://red-packet.rexskz.info/2018/?s=the_first_levelconst encrypted = 'gard dna kcilc'; const decry...

从连接器开始的一系列旅程

偶然认识的连接器最近有小伙伴在群里问一些关于 Underscore.js 中 fnull 函数的问题,我并没用过这个函数,于是就去翻文档,于是就发现了一个之前没见过的词:combinator。其实光看英文“连接器”大概能知道是带有“函数组合”的意思,并且文档里写到这个函数是个高阶函数,于是我就大概知道是怎么回事了。在我看来,combinator 其实跟之前见过的 decorator(装饰器)差不多。对装饰器的第一印象第一次见到装饰器,是在 Coding.net 的后端代码中,Spring 自带的...

这是我们共同度过的

第 3072 天