在 VSCode 中配置 Go 调试环境 前期准备 作为一个 Go 开发者，首先需要把系统中的 Go 的环境配好（包括环境变量和包管理器），具体怎么配这儿就不说了。不过 Go 的项目似乎都需要跑在 $GOPATH/src 下面，感觉有点反人类。Go 最推荐的调试器就是 Delve，安装和使用方法这儿也不说了，正确安装后应该可以在命令行中直接运行 dlv 命令。 想看结果的同学，可以直接跳到文章末尾，那儿有可以运行的配置。 ... 2018-08-13 环境
雪碧图的应用场景 & 一种生成算法 CSS 雪碧图 相信上古时期搞过前端的同学都知道，可以通过合并一些小图片、使用 CSS 控制 background-position 的方式来减少 HTTP 请求次数，从而优化网页加载时间，这就是 CSS 雪碧图（Spritesmith）。不过自从 HTTP/2 出来之后，这个用途就已经没什么意义了。当然，它也可以避免当正常状态与 hover 状态使用不同的图片时，首次 Hover 要... 2018-07-26 开发
Service Worker 踩坑指南（缓存与 WebP） 背景 前天晚上在清理 Chrome 插件的时候，发现了好久之前因好奇而安装的 Lighthouse 插件，它是 Chrome 团队出的一个自动化页面审计工具，可以帮助开发者优化页面。继续怀着好奇的心理，我打开了我的网站主页，然后点了一下 Generate report 按钮，得分惨不忍睹…… 嗯由于特别惨不忍睹，所以我就不放结果了，放一张 Lighthouse 的界面代替好了……当... 2018-07-08 环境
对 CSS 变量的一点实践 什么是 CSS 变量 之前我刚接触 CSS 预处理器的时候，被里面的变量功能给吸引了，你可以跟正常的编程语言一样定义变量，里面的值可以是各种各样的东西，例如 2rem 或者 #123456 ，甚至还可以对变量做一些运算，例如两个数值相加，或者把这个颜色变深 10% 。 后来无意间听说了 CSS 变量这个概念，于是上网查了一下，这儿的变量其实更相当于预定义的常量，因为 CSS 还不支持... 2018-06-18 开发
使用 Puppeteer 编写 CTF XSS Checker 之前写过一篇文章： 《使用 PhantomJS 来实现 CTF 中的 XSS 题目》 ，后来被群里的某大佬翻了出来并被吐槽了一番： 好吧，现在是 8102 年了，该升级一下技术了。于是今天下班后没去打太鼓，转而去折腾 puppeteer。 所需技术 XSS 基础：相信点进来的同学都了解。 Promise：相信搞过前端开发的同学都知道。 async / await：相信大家都会把... 2018-06-07 安全
代码高亮的可行方案 Update 20180704：负向零宽断言我手边只有 Chrome 支持，所以目前还是不可用的，还好 PrismJS 提供了一种 Hack 的方法可以支持这个特性的很有限的部分：当传入 lookbehind 属性时，会删掉 match 数组的第零项，这样第一个括号的内容就成了匹配到的东西……我已经给 PrismJS 提了 Pull Request（地址在 这里 ），但尚未被... 2018-06-02 开发
编写状态驱动的业务代码 什么是状态驱动的业务代码 别看概念似乎很高大上，其实是我胡扯出来的……简单来说，就是把业务按照一个个状态进行拆分，然后通过状态来计算当前要执行的操作（后端）或当前要展示的界面（前端）。 虽然这个做法很早就有了，而且绝对有很多人实践过了，但似乎一直没有一个专门的名词（也可能是我不知道），于是我就将其描述为“状态驱动的业务代码”了。 几个业务场景 多个步骤的页面 我们的一个业务场景是（部分... 2018-05-20 开发
关于一个同学的事情 文章里会有一些负能量，如果心情不好的话请先关掉吧。 晚上的时候从我爸那儿得知，有个跟我一个院子里长大的同学，因为抑郁症，寻短见了。 虽然跟他大学四年几乎没有任何交集，但我记得，从小我就经常跟他一起玩。小时候我们一起扔过飞盘，去后院比赛骑车，在他家里第一次看到拨号上网，一起玩过《上古神器》，争论过谁的小学毕业考试成绩好；初中之后，他是我做的第二个和第三个游戏的主人公之一，我们为《高端手册》中... 2018-05-08 日常
由 npm link 引发的一个坑 什么是 npm link 可能很多同学没有接触过这个命令，就先提一下吧。NPM 文档在 这里 。 假设我们开发了一个 NPM 的包 a ，然后我们的项目使用了这个包，那么正常情况下，每次 a 有变动，我们都要更新到项目中。 npm 的 link 命令可以解决这个问题，步骤如下： 进入 a 的根目录，执行 npm link ，这会创建一个软链接 $PREFIX/lib... 2018-04-26 开发
为了用户体验而做的事情 嗯你没看错，这篇文章的主角还是那个编辑器，还是熟悉的 react-dnd 和 immutable-js 。现在这个编辑器已经可以替代目前线上的旧版编辑器了，而且功能更全。接下来我就说一说，为了让这个编辑器的用户体验更好，我都做了哪些事情——有技术方面的，也有设计方面的。 技术方面 拖拽时显示元素的详细内容 由于用的是 react-dnd ，之前的效果是默认效果——对元素 DO... 2018-04-22 开发
对 react-dnd、immutable-js 与树形结构的优化 背景 最近一直在做一个低配版网页编辑器（面单编辑器），这是我刚入职的时候从同事那儿接手的一个 React 项目，项目中使用了 react-dnd 作为拖拽库，Store 中的信息都是 Immutable 对象。按理说应该效率挺高的，于是我就一直专注于业务需求，这周就差不多写完了。 如果一切顺利的话就不会有这篇文章了，起因是前天我手贱，搞了 256 个元素进去，别说拖拽了，选中一个元素都得卡上... 2018-04-12 开发
一次很蠢的优化经历：判断数组 A 是否是数组 B 的一部分 原问题 昨天一个同学问了我一个问题，他想扩展 JavaScript 中的 Array.prototype ，以判断当前数组是否被包含于另一个数组（不考虑 a = [a] 这样的循环引用），例如： [1] 被包含于 [2, [1], 3] 和 [[2], [3, [1], 4]] 两个数组中。其实这道题如果只需要考虑引用相等，例如这样设计测试用例： const a = [1]... 2018-03-31 开发