Home English

我也非常喜欢造轮子

无论是解决实际问题,还是尝试新技术

生命不息,折腾不止

  • Saladict 沙拉查词

    Github Stars Chrome Web Store Chrome Web Store Mozilla Add-on Mozilla Add-on

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


    在功能设计上,

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

    在技术实现上,

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

    Github Stars Chrome Web Store Chrome Web Store Mozilla Add-on Mozilla Add-on

    一款可以分享网页到饭否、推特和微博的 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 Safe Important

    NPM Downloads Monthly NPM Downloads Total

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


    造这个轮子的原因有三:

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

    NPM Downloads Monthly NPM Downloads Total

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


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

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

    [ 展开全文 ]
  • Release Notifier for Github

    Github Stars Chrome Web Store Chrome Web Store Mozilla Add-on Mozilla Add-on

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


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

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

    screenshot

    [ 展开全文 ]
  • JavaScript 30

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


    比较有意思的如

    [ 展开全文 ]
  • 本项目

    基于 NUXT 生成的静态网站。


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

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

    [ 展开全文 ]
  • Leetmark

    Chrome Web Store Chrome Web Store

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

  • Empty Module Loader

    NPM Downloads Monthly NPM Downloads Total

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