Build the front-end of new version of <a href="http://loveiizakka.com/">loveiizakka.com</a>, both customer view and admin view.

Senior Software Engineer

In charge of front-end parts of all projects.

Senior Front-End Engineer

Was the only front-end in the company, in charge of all front-end parts of the projects. Working with back-end(Laravel) mostly via API and some Laravel view rendering. Build up web apps, landing pages and Chrome extension according to design.Notable projects (more details in the projects section below) ParrotTalks Note (with Chrome extension) ParrotTalks Reader ParrotTalks PDF Reader

Full-stack engineer. Work closely with Flash team to provide APIs for events, develop campaign sites, dashboard charts, maintain game servers (in Perl). Developed an HTML5 game and published to Windows Store in the last year.Notable projects (more details in the projects section below) GodGame Mahjong GodGame Bigtwo

Software Engineer

I basically write front-end JavaScript everyday. Very experienced in jQuery. Created two Windows8 games with CreateJS. Recently developing chrome extensions with AngularJS.

I'm the creator of several AngularJS modules. Currently using AngularJS in my daily job. Have proficient skills in creating directives and a good understanding of promise as well as it usage in AngularJS.

Along with HTML/CSS skill, jQuery is also an important part of my front-end development.

Part of my full-time job is to transform prototype images from our designer to working HTML pages with great responsiveness and some tint transitions/animations with CSS.

front-end engineer with 4 years experience

Robin Fan

EC site for selling Japanese merchandises

Loveiizakka.com EC site (customer/admin)

The official site of Masukawa Inc. Build with static site generator Gatsby with i18n support (zh-tw/ja)

Masukawa Official site

This is my first cross-browser extension, can run in both Chrome and Firefox. Project goal is to prevent streamer from missing messages in chat 1000+ users (2022/04)

I Hear You Twitch

Project for trying out Firebase Cloud Functions. Using Real-time Database to pair with Cloud Functions on purpose. This is a simplified version of WOW armory. The goal is to search TW-WOW armory with the help of character name index, with additional character information extracted from the official API.

Hi.. Armory

Provides PDF reading and translating function right on the web for users who can't use Chrome extension or prefer the tooltip-style display of the results.

ParrotTalks PDF Reader

VOD highlight making/voting platform made for miao11255 (a streamer on Twitch) Real-time database using Firebase Login with Twitch (custom authentication connected to Firebase) Some back-end with Google App Engine Didn't promote it properly, basically no user for now

Miao's Streaming Platform (R葵的實況大平台)

Handy extension for adding time tags for YouTube video (especially for the long ones). Spent lots of time for properly embedding the extension UI into YouTube page. The core principle is to add/adjust time tags effectively without using the mouse. First time CSSModules 5000+ users (2022/04)

TimeTags for YouTube

Pure front-end cover generator CreateJS directives in AngularJS Web Font text in canvas In order to optimize the facebook cover display, the image downloaded is 3x sized in comparison to the one you see in the web app

Facebook Cover Generator for Graduates

A bookmarklet developed soon after ParrotTalks Reader went online. Reading friendly mode of the current page is just one click away. Since the page content is passed to ParrotTalks Reader via localStorage, the result is even more accurate than fetching the URL from the server.

ParrotTalks Reader Bookmarklet

English article reader web app with click-to-translate(using click-to-translate below) and vocabulary saving. More than just normal RWD on mobile version, optimized the article list loading operation and article display for mobile Asynchronous loading container components with Webpack common chunk My first React project in production

ParrotTalks Reader

Originally a widget developed for our partner to provide click-to-translate feature on their site, used in several projects later. Click to translate Select to translate NLP feature to enable precise definition based on POS Asynchronous loading display panel component (for mobile/desktop) with Webpack common chunk

ParrotTalks Click-to-translate

Provides a convenient way to query definition & example sentences and save to your own notebook for further review. I was learning ES6 & Webpack, hence tried to combine AngularJS with them in the project.

ParrotTalks Note - New card

Click-to-translate feature right in your Chrome. Separated display panel for displaying, editing & saving Select a range to translate NLP feature to enable precise definition based on POS PDF support Simple mode & window mode My first Chrome extension

ParrotTalks Note (Chrome extension)

Language learning based on spaced repetition Import notebooks in the market Create your own notebooks My first AngularJS project in production

ParrotTalks

GodGame Mahjong was the only one multiplayer Chinese Mahjong game made with JavaScript & HTML5 in the Windows Store. Game lobby constructed with HTML/CSS, and game itself is mainly made of HTML5 Canvas. GodGame Mahjong in the Windows Store: http://goo.gl/VyLe1 (Bad reviews result from lack of maintenance) Shortly after Mahjong went online, I began working on Bigtwo. With the experience working on Mahjong, the development of Bigtwo is faster and the performance is better, and it's one of my finest work. But it's not in the Windows Store now (taken off by Gamesofa).

Windows Store GodGame Mahjong/Bigtwo

Developed nice touch experience. I suggested supporting retina-display, and it became a standard of Gamesofa mobile web during that time. The mobile web has been updated. It's no longer my version now.

Gamesofa Mobile Web

According to new Dialog API Facebook proposed then, I developed a couple of PHP functions and a mini JavaScript library for custom "Dialog" experience for Gamesofa Facebook Dialogs Overview: http://goo.gl/fIcmD The JS library: http://g.mwsrv.com/js/FBDialog.js

Facebook API study

Provide support for game-related campaign, like some APIs for mini game in flash to improve campaign engagement. Also made lots of campaign pages. During that time, I developed a huge interest in front-end web, enjoyed writing different effects that matches the campaign design to give more happiness to our users. Gamesofa Mail System http://goo.gl/7gjB9 (login required) Upgrade the mail system from per-mail display to Gmail-like by topic display. Also from pure PHP mail rendering to API-based single page app.

Gamesofa Website Upgrade & Campaign Code/Pages

Since Blizzard didn't provide Armory API then, I tried to map the current Armory URL into API URL. With output format JSON and JSONP (to deal with CORS issue). Google App Engine and WOW Armory both upgraded, and I not maintaining it anymore.

World Of Warcraft Armory API

Provide a fast shortcut for users to query if a player owns certain combination of achievements. Google App Engine Apis (urlfetch, memcache etc.) parsing XML document in pure Python (with https://github.com/pc035860/ParseNSelect-py) lively UI with little jQuery Developed into the next project - World Of Warcraft Armory API

Quick WOW Achieve

I actually made two version of competition client, one is in command-line, and the other one has GUI. Both of them support Login with student account (with POP3 authentication) Sync new competition article online weekly Switch between English/Chinese competition The most important feature of the GUI version, is that it provides keystroke sound effect like ICQ, which tremendously improve the typing experience. There was a ranking page on the web site, generated by PHP.

Personal details

Robin F.

Technical skills

About

Work Experience

Projects

Education