Home 中文

Sometimes, I like to make stuff.

Some are useful, others are utterly useless.

But all are good fun.

  • Saladict

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

    A handy Chrome / Firefox dictionary extension with eye-pleasing UI. Praised and supported by hundreds of thousands of users.


    In terms of functional design:

    1. Results from different dictionaries are integrated into one panel with consistent styles for easy cross-reference.
    2. Rapid searching with multiple search modes plus different profiles.
    3. Search text contexts as well as translations are kept in notebook.
    4. Works every where. Even inside iframes and PDFs.

    In terms of technical implementation:

    1. Complex user inputs are handled with RxJS.
    2. Embed dict panel is sandboxed with iframe. Thanks to React Portal, elements inside iframe are generated under the same React component tree; events within iframe can bubble out via React SyntheticEvent.
    3. Extraction of dictionary results requires thorough understanding of page DOM structure pattern and obfuscated JavaScript code. Saladict has revived some of the abandoned services like Youdao page translation.
    4. Usability and accessibility and taken into consideration when designing the HTML. Compatible with shortkey tools like Vimium.
    5. Automation are introduced into the build process. Dictionaries are loaded with a plugin mechanism.
    [ Read More ]
  • WeiTweet

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

    Chrome / Firefox extension. Share Fanfou, Twitter and Weibo in one click.


    1. Abstract OAuth 1a & 2 flows using template design pattern to support different platforms(OAuth 1a with Fanfou and Twitter, Oauth 2 with Weibo).
    2. Serverless OAuth flow with chrome.identity and content script magic.
    3. UI with iview.
    4. Build system is vue-cli based and extended with webpack-chain, which enables building and packing in one click.
    [ Read More ]
  • PostCSS Safe Important

    NPM Downloads Monthly NPM Downloads Total

    PostCSS plugin that adds !important to style declarations safely. Used and recommended by many large projects like Uppy, stylelint, vmd and HoverCards.


    1. Accuracy. Unlike other regex based implementations, this plugin uses AST (Abstract Syntax Tree) generated by PostCSS to accurately locate rules.
    2. Safety. Adding !important to every declarations might break styles. This plugin will skip unnecessary declarations.
    3. Configurability. Flexible and fine-grained control over the plugin.
    [ Read More ]
  • Hexo Filter Github Emojis

    NPM Downloads Monthly NPM Downloads Total

    A Hexo plugin that adds emoji support, using Github Emojis API.


    With accessibility in mind, this plugin generates unicodes for emojis then makes the font transparent and displays emoji images with background-image.

    [ Read More ]
  • Release Notifier for Github

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

    Chrome / Firefox extension for watching Github releases.


    Unofficial "polyfill" for watching Github releases. It was based on this lovely idea. A year later Github finally added basic official support.

    It uses Github APIs and takes advantage of 304 cache.

    screenshot

    [ Read More ]
  • JavaScript 30

    30-day vanilla JS coding challenge. Inspired by Wes Bos's JavaScript 30.


    Some of my interesting ideas:

    [ Read More ]
  • This Project

    NUXT based static website.


    With SSR generated static pages, DOM can be rendered before JavaScript loading, after which Vue will take over DOM manipulation and routing is controled by Vue-router.

    Nuxt-i18n overrides Nuxt default routes and adds locale prefixes to every URL. Description of each project is written in Markdown and transformed to HTML via markdown-loader.

    [ Read More ]
  • Leetmark

    Chrome Web Store Chrome Web Store

    A Chrome extension that can generate a decent Github Flavored Markdown template from a Leetcode problem page.

    Meta data is stored as Front Matter from which Github will generate a neat data table.

  • Empty Module Loader

    NPM Downloads Monthly NPM Downloads Total

    A webpack loader that replaces module with empty function which can be eliminated with Webpack Tree Shaking.