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 Users Chrome Web Store Rating Mozilla Add-on Users Mozilla Add-on Rating

    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 Users Chrome Web Store Rating Mozilla Add-on Users Mozilla Add-on Rating

    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

    Github Stars 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 ]

    Github Stars

    A technical blog following JAMstack architecture, based on GatsbyJS, a React Framework using GraphQL to manage resources. Post contents are managed on Netlify CMS. The whole site is delivered via Netlify network.

    This is also an attempt to replace Class components with React Hooks, which brings great convenience and pleasant development experience.

    Managing data and resources with GraphQL is also powerful and dead easy.

    With Netlify CMS and Utterances, post files and comments are stored back to Github which reduces the dependency of third-party services.

    Site logo are designed with illustrator. Social media icons are taken from NViconsLib 2, edited with Boxy SVG, merged with IcoMoon and compressed with SVGOMG.

    [ Read More ]
  • Hexo Filter Github Emojis

    Github Stars 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 Users Chrome Web Store Rating Mozilla Add-on Users Mozilla Add-on Rating

    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.


    [ 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 Users Chrome Web Store Rating

    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.