一款实用、美观的 Chrome / Firefox 划词扩展，其设计与实现得到大量用户的肯定。许多用户留言评价这是其用过最好用的划词扩展。

---

在功能设计上，

1. 聚合多个词典的结果可以取各所长，并用统一的风格重排显示，极大地方便了交叉查阅词典。
2. 多重划词模式再结合多种情景模式能让用户快速切换，以不同方式灵活查词。
3. 生词本保留了查词的上下文并自动获取整句翻译，以保证准确理解、记忆单词。
4. 高可访问性，兼容各种复杂不一的网页，兼容 iframe 内划词，支持 PDF 划词。

在技术实现上，

1. 利用 RxJS 处理复杂的用户输入。
2. 查词面板是植入到网页中去的，使用 iframe 进行隔离，并结合 React Portal 使到 iframe 内的事件通过 SyntheticEvent 直接冒泡出来，在 React 角度看仿佛就是操作同一个页面。
3. 整合词典结果需要理解不同词典网页的设计，并从中总结出规律，稳定地提取出需要的信息；还需要阅读理解混淆的代码，如多年没有更新的有道网页翻译，经过 Saladict 的整合已支持 https 网页翻译。
4. HTML 设计考虑到了可用性与可访问性，并兼容 Vimium 全键盘操作。
5. 自动化构建脚本，代码结构多层抽象，添加词典采用插件式机制载入。

一款可以分享网页到饭否、推特和微博的 Chrome / Firefox 扩展。并可以从网页中提取所有图片。

---

1. 对 OAuth 1a 与 2 的验证流程消化理解，并抽象出通用类利用模板模式支持各个平台（饭否与推特使用 OAuth 1a，微博使用 Oauth 2）。
2. 利用 chrome.identity 以及 content script 黑科技实现 OAuth 的无服务器自动授权。
3. UI 完全基于 iview 。
4. 代码构建系统利用 webpack-chain 基于 vue-cli 展开，一键构建打包。

PostCSS 插件，安全地为 CSS 中所有样式添加 !important 。已被许多大型项目使用与推荐，如 Uppy、stylelint、vmd、HoverCards 等。

---

造这个轮子的原因有三：

1. 准确性。当时阅读了一些同类工具的源码，基本是基于正则表达式匹配的，这准确性不容易保证。PostCSS 会把 CSS 规则解析为语法树（AST），从而可以达到准确操作。
2. 安全性。不能盲目添加 !important ，否则可能会破坏样式。现在有了 AST 就可以根据语义判断是否需要改变。
3. 可配置性。提供灵活的配置实现更细粒度的控制。

一个基于 JAMstack 架构的技术博客。利用 React 框架 GatsbyJS 搭配 GraphQL 开发，使用 Netlify CMS 管理文章内容并托管在 Netlify 平台上。

---

这次开发也是全程用 React Hooks 取代 Class 的尝试，开发过程更加轻便清晰。

利用 GraphQL 统一管理信息和资源为开发带来了极大的便利。

Netlify CMS 和 Utterances 实现了文章和评论数据都保存回 Github 上，减少了第三方服务的依赖。

样式基于一个现代 CSS 框架 Bulma， Sass 模块的设计借鉴了 ITCSS 思想。

LOGO 图标使用 illustrator 设计，社交图案采用 NViconsLib 2 ，使用 Boxy SVG 手工编辑，利用 IcoMoon 合并以及 SVGOMG 压缩。

Hexo 插件，利用 Github Emojis API 支持在 Markdown 和 HTML 模板中添加语义化的 emojis 。

---

考虑到可访问性，本插件会生成 emoji 的 unicode 并将字体设为透明，然后在背景图片中添加 Github emoji 图片。当加载失败时恢复字体颜色。

插件同时提供丰富的配置选项，满足各种不同的需求。

一款可以按 major、minor 和 patch 版本来订阅 Github release 的 Chrome / Firefox 扩展。

---

灵感源于一个 issue 的讨论。一年后 Github 终于推出了初步的官方支持。

请求利用 E-Tags 304 （Not Modified）跳转来快速查询。

三十天每天用纯 JavaScript 、CSS 和 HTML 写个小东西，并尝鲜一些新的浏览器 API 。灵感来自于 Wes Bos 的 JavaScript 30 。他的例子相对简单，我根据自己的能力实现了些更复杂的点子。

---

比较有意思的如

• Day 4 Queue*2 = Stack 可视化两个队列实现一个栈。
• Day 7 Stack*2 = Queue 可视化两个栈实现一个队列。
• Day 19 Webcam Fun 利用 canvas 变换摄像头数据。
• Day 20 Levitation Charm 麦克风识别悬浮咒。
• Day 23 Country Flags Game 基于语音合成的猜国旗游戏。
• Day 27 Jelly Pickle 手写 spring 算法实现 Q 弹腌黄瓜。
• Day 29 Digital Clock 基于 CSS 变换的时钟，以及升级版基于 Recompose 和 RxJS 的计时器。

基于 NUXT 生成的静态网站。

---

利用 SSR （服务器渲染）为每个路由生成了静态页面，故打开页面无需加载 JavaScript 即可开始渲染 DOM ，待 JavaScript 加载完成后由 Vue 接管 DOM 以及 Vue-router 接管路由跳转。

使用了 nuxt-i18n 自动生成多语言路由，动态加载，每个项目的富文本介绍用 Markdown 编写，使用 markdown-loader 转换为 HTML 加载。

一款可以将 Leetcode 题目转换为 Markdown 的 Chrome 扩展。题目元数据被保存为 Front Matter 格式。

一个可以将特定模块替换为空函数的 webpack loader 。配合 Tree Shaking 可在生成的代码中完全清除。