Fonkie Chen

A frontend engineer in Shenzhen

Highlights

I am a Frontend developer with 12 years of front-end development experience providing high-impact web solutions for the social network, cloud service, and game service industries. I also have 3 years of back-end development experience, and am skilled in designing, developing, testing and deploying multiple web-based applications incorporating a range of technologies. Please consider the following highlights:
Designed and developed websites using JavaScript, HTML, CSS, TypeScript, React, Node.js + MySQL, PHP + MySQL.
Proven ability in optimizing web functionalities that improve data retrieval and workflow efficiencies.
Possesses strong team awareness and effective communication skills; accomplished at organizing team-building activities.
Motivated self-starter with robust research skills who adapts well to new technologies and platforms.

Outside of work, I am a member of the Chinese translation team of React and Webpack, and have translated numerous official documents. I can communicate freely with others in English. I am also an American Heart Association Heartsaver Instructor, as well as a lecturer for Tencent’s “Everyone is a First Aider” course. In addition, I am an experienced practitioner of traditional Chinese medicine, including acupuncture points, moxibustion, Gua Sha, and dietotherapy.

Experiences

July 2013 – November 2022 | Tencent, Shenzhen, China | Frontend Developer

Revamped web application game config service application(PV: 250,000), reducing the function running time from 100ms to 10ms. In addition, I used Cloud Serverless Function and API Gateway and Web Application Firewall for deployment, making the operation and maintenance of the service simpler and easier.
Designed and developed user-friendly web game framework pages(PV: 2,200,000), including optimized pay pages that increased user payments, and subsequently game users successfully purchases by 30%.
Designed and developed a game display scheduling tool for homepage(PV: 820,000 UV: 620,000), reducing the arranging time for game display from 3 weeks to 3 minutes.
Designed and developed Tencent Cloud billing access system, reducing the accessing time for billing from more than 1 month to less than a week.
Designed and developed Tencent Cloud billing log monitoring system, real-time monitoring of online errors and performance, fast discovery and repair of bugs online.
Designed and developed Multi CDN domain name switching system, support CDN domain name switching from one CDN domain to another, and flexibly specify the domain name to improve the success of resources loading in the world.

July 2010 – June 2013 | Sohu, Beijing, China | Frontend Developer

Participated in the core development of the microblog front-end and related operational products.
Designed and implemented the optimization of the website (t.sohu.com), the performance indicators (first screen, document load, window load) were improved greatly, the first screen performance indicator were the best.
Won the Best New Person Award of the Department in 2011, and shared the PPT Best Practice of Web Front End Performance Optimization in Sohu.

July 2007 – June 2010 | GXSKY, Nanning, China | Web Developer

Developed websites from front to backend using ASP.NET, JavaScript, HTML, CSS, SQL Server.
Designed and maintained local housing information websites, including management system and display webpages.
Implemented farm game function and gold digging game function in the Shikong continental game.
Implemented 3D urban map of Nanning and Liuzhou by programming JavaScript + HTML + CSS to zoom in/out map image on web backgrounds.

Projects

Mobile Lobby Configuration Service for QQ Games | Node.js, TypeScript, MySQL | April 2022 - June 2022

Refactored the configuration service for the mobile lobby homepage, streamlining and improving the logic for retrieving management data through interfaces.
Implemented filtering of blacklisted games and the ability to filter games by specified channels and white-label channels.
Returned a list of games within the valid period (supplemented with expired records when the number of records is insufficient) and sorted according to specified rules.
This interface is a universal interface that supports obtaining game data for different modules through agreed-upon simplified parameters, greatly simplifying the complex parameter assembly logic of the old interface and receiving positive feedback from client developers.
Adopted a new deployment method using Serverless + API Gateway + Web Application Firewall, significantly reducing the workload of operations and making service maintenance simpler and easier.
After cache optimization, the function runtime was reduced from 100ms to 10ms.

QQ Game Display Scheduling Tool | Typescript + React + Vite | September 2021 - October 2021

The Scheduling Tool addresses the time-consuming and error-prone manual scheduling of resources on the homepage. It supports both intelligent scheduling and manual intervention. By importing monthly requirements (e.g., homepage carousels, carousel splitting, carousel targeted delivery, personalized recommendations, daily picks, new game recommendations, editor recommendations), the system generates scheduling results based on game category, resource package level, activity status, priority time points, avoidance time points, and time distribution characteristics. The scheduling is done according to specified priorities and special rules (e.g., no duplicate scheduling for the same game on the same day, no duplicate scheduling for adjacent dates of the same game). Users can make secondary edits to the scheduling results and view real-time unallocated requirements. Once the scheduling results are confirmed, they can be synchronized to the live environment with one click, improving work efficiency and saving operational costs.
I was responsible for requirement analysis, algorithm design, and code implementation.

HTTPS Transformation for Web Game Framework | jQuery + HTML + CSS | June 2021 - August 2021

Due to historical reasons, web game pages were using the insecure HTTP protocol, which was susceptible to hijacking. In order to switch to the more secure and performant HTTPS protocol, and to resolve login failures on newer versions of Chrome, we initiated the HTTPS transformation for all web games in the lobby (approximately 300+ games).
I was primarily responsible for designing the solution, assigning tasks, and overseeing the implementation process. This included the transformation, debugging, testing, and acceptance of the homepage of each game, as well as managing the overall rollback process if needed.

Unified Payment Page for QQ Games Lobby | Typescript + React + Webpack | January 2021 - June 2020

The Unified Payment Page for QQ Games Lobby eliminates the need for game developers to create their own payment pages and apply for Tencent Cloud COS and domain resources. This further simplifies the integration process for game developers and improves the security performance of the payment flow. Additionally, we provide detailed integration documentation that lists common issues to facilitate the integration process for game developers.
I was primarily responsible for designing the solution, implementing the code, and managing the deployment process.

QQ Game Web Page Monitoring and Optimization | TypeScript | October 2020 - December 2020

Integrated error and performance monitoring to analyze and optimize the performance bottlenecks of web pages (using a web game framework) in order to enhance user experience.
After optimization, JavaScript execution exceptions decreased by 90.36%, JavaScript loading exceptions decreased by 7.95%, image loading exceptions decreased by 99.99%, and CSS loading exceptions decreased by 74.67%. The background image loading failure rate for the server selection page was 1.74%.

Multi CDN domain name switching system | Node.js, React | August 2020 - September 2020

Supported the freedom to switch CDN domains (from self-developed CDN to Tencent Cloud CDN) and flexibly specified domains to improve the success rate of resource loading globally.
Mainly responsible for designing and implementing the solution，which included the following tasks:

Unified domain variables: Replacing the static resource domains on the purchase page and pricing center with global variables defined in the backend configuration file.
Resource retry: Optimizing the loading method of the core JavaScript resource (seajs) by performing multiple retries using multiple domains to improve the success rate. For other JavaScript/CSS/image resources, an non-intrusive static resource retry solution (assetsRetry) was implemented, and successful resource retries were monitored.
Migrating services that were still running on the old platform qcbuy (such as Mi Pay intermediate pages and sub-account order success pages) and gradually transitioning them to the new Midway service framework using a gray release strategy. The new framework fully supported disaster recovery for CDN domains.

Tencent Cloud Billing Log Monitoring | Node.js, React, ELK (Elasticsearch, Logstash, Kibana) | June 2017 - September 2019

The project implemented a log monitoring system for Tencent Cloud billing using the ELK architecture. Logstash was used to collect logs from production machines, which were then analyzed by Elasticsearch and displayed using Kibana. On the client side, logs were collected by Insight scripts, sent to the Insight server for processing, written to local disks, and further processed by ELK.
I was responsible for planning the overall log monitoring solution, task breakdown, and implementation. In the project, I introduced a transaction ID (reqId) that spanned across frontend Nginx, Node.js services, backend Nginx, and API services, making problem localization smoother. Additionally, I introduced a life ID (lifeId) that associated logs from the access layer and the client side based on page lifecycles, making it easier to trace user behavior on pages and effectively improving troubleshooting efficiency. I also built a real-time error monitoring view that compared trends for today, yesterday, and last week, allowing for controlled assessment of the impact of changes and releases. Furthermore, I implemented monitoring and alerting services for WeChat/Enterprise WeChat/email, with alert classification and whitelist strategies.

Tencent Cloud billing access system | Egg (Node.js), Antd (React) | August 2017 – September 2020

The billing access system is the process of pricing, metering, charging, lifecycle management, and invoicing for various products facing users. It requires collaboration between the business side and the billing side to achieve commercialization of the products.
Participated in the research of the billing access process requirements and proposed detailed functional points that the billing frontend needs to cover during the integration.
Defined interfaces in collaboration with the backend based on the interaction drafts of the billing access process outlined by the product team.
Independently implemented the frontend coding.
Conducted daily maintenance and feature optimization.

Huijin Billing Operations System | Egg (Node.js), Antd (React) | July 2017 - February 2019

The Tencent Cloud Billing Operations System encompasses various management functionalities related to billing, such as billing access, price management, product definition at four levels, LTC management platform, privilege center, billing & account center, data operations platform, internal messaging platform, discount management, voucher management, postpaid product management, and other module functionalities.
Starting from scratch, designed and implemented the Huijin system. The responsibilities included:

Participated in the research of the billing access process requirements and proposed detailed functional points that the billing frontend needs to cover during the integration.
Defined interfaces in collaboration with the backend based on the interaction drafts of the billing access process outlined by the product team.
Built the frontend framework for the Huijin system. After comparing frameworks used in the industry, finalized the selection of the user-friendly Eggjs + Antd.
Implemented the frontend functionalities for the billing access process, continuously improving the Huijin system framework during the development process, such as enhancing packaging and deployment, providing commonly used components, etc.
Implemented the permission management functionality, allowing flexible control over permissions (pages, interfaces, interactions), making it easier for product teams.
Simplified the Huijin system’s integration layer, enabling simple and fast integration, freeing up backend resources.
Unified the style of the Huijin system, enriched components, and improved frontend development efficiency.

Tencent Cloud Official Website Billing Center | WebStorm (Node.js, Beejs) | January 2017 - December 2017

The Official Website Billing Center includes functions such as income and expenditure details, bill management, renewal management, contract management, and voucher management.
Responsible for frontend development and maintenance of various functional requirements. Also organized and wrote over 20 documents, including technical documents, guidance documents, and environment documents related to billing wiki.

Tencent Cloud Virtual Machine Console | WebStorm (Node.js, Beejs) | July 2016 - December 2016

The Blackstone Console includes functions such as physical servers, elastic public IPs, NAT gateways, load balancers (layer 4 listeners, layer 7 listeners), recycle bin, as well as the Blackstone physical server purchase page, load balancer purchase page, etc.
Responsible for frontend development and maintenance of various functional requirements.

Tencent Cloud Monitoring Console | WebStorm (Node.js, Beejs) | January 2016 - June 2016

The Official Website Cloud Monitoring Console includes functions such as monitoring overview, alarm policies, monitoring views, custom monitoring, etc.
Responsible for frontend development and maintenance of various functional requirements.

Barad Monitoring System | PhpStorm (DoitPHP, Bootstrap) | June 2014 - June 2015

Tencent Cloud monitoring internal management system, including monitoring data query, alarm data query, alarm configuration, storm configuration (ckv configuration, redis configuration, cgi routing configuration, translation configuration, metric configuration, statistics configuration, etc.), alarm policy management, QNS management (subscription management, alarm actions, message topics, user management), stargate management (stargate running status, operation logs, gray list, full list, upgrade package, upgrade logs, component list, component running status), etc.
Responsible for the planning and development of all frontend pages.

Yun Tu system | PhpStorm (DoitPHP, Bootstrap) | January 2014 - December 2014

Network operation and troubleshooting toolset, including real-time monitoring, duty view, network topology, probe data query, probe quality analysis, real-time attack traffic, network quality map, network topology diagram, network troubleshooting tools, operation console, alarm view, filter multidimensional statistical data display, etc.
Responsible for frontend development of Cloud Map.

Fengyun system | PhpStorm (DoitPHP, Bootstrap, jQuery) | July 2013 - June 2014

Fengyun system integrates various operation and maintenance tools to facilitate troubleshooting by operation and maintenance personnel. It can locate specific machines and related applications based on IP and QQ searches. It also provides app queries and includes voucher management and work order management functions.
Responsible for frontend reconstruction of the system, redesigning some pages, optimizing page performance, and developing new page features.

Sohu Weibo | Notepad, Intellij Idea, Git | December 2010 - June 2013

Sohu Weibo, a microblogging platform under the Sohu portal website, similar to twitter.com in foreign countries and weibo.com in China. It is a broadcast-style social networking platform that shares short real-time information through the following mechanism. The details of the participated functional modules are as follows:

Main Product (t.sohu.com)
Settings: Common functions for microblog users, including personal information, avatar modification, and personalized tags. Real-time front-end validation and Ajax submission without refreshing.
Template Settings: Display templates classified by style, browse by page, and display real-time effects when changing templates.
Following List: Display followed users in groups, add users to a group, follow/unfollow, set remarks, report or block users.
Timeline: List of microblogs, mainly implementing functions such as commenting, forwarding, and favoriting. When expanding a microblog, images can be rotated (canvas), videos can be played (video), and voting can be participated.
Back to Top: When the page exceeds one screen, “Back to Top” automatically appears, clicking it will jump to the specified position.
Toolbar Navigation: Multiple dropdown lists can be freely displayed. When one is displayed, others are hidden. The navigation for unlogged users can display a lightweight login box, and the navigation for logged-in users can display the number of notifications received by the user. The navigation also includes functions to search for microblogs, users, and topics.
New Microblog Notification Bar: Based on Ajax long polling, when the server pushes data, update the microblog notification bar and save the corresponding microblog content data for quick display when clicked by the user.
Expand More: When the user views the next screen of microblogs, use Ajax to obtain data and insert it at the end of the microblog list.
Card: When the mouse moves over a user’s avatar, display the user’s personal information card, including remarks, follow, group, send private messages, block, etc.
Private Messages: Display the list of private messages, send/reply/delete private messages.
Bind MSN: Bind with MSN for users to directly log in using their MSN account.
Font Settings: Set the default font for microblogs based on different operating systems (supporting and non-supporting Microsoft YaHei).
Registration and Login: Regular registration process for microblogs, popup registration and login, compatible with mainstream browsers.
Operational Products
Micro Interview: http://t.sohu.com/talk
Micro Live: http://t.sohu.com/live/list
Micro Public Welfare: http://t.sohu.com/gy

Performance Optimization

Implemented different optimization plans in four stages and recorded the impact on page performance.
Overall optimization of the page according to YSlow principles, with a focus on improving the cache rate of page resources.
Adjust the order of loading page resources to prevent blocking caused by the download or execution of different resources.
Load JavaScript in and execute it before .
Use preloading method to fully utilize the browser cache, let the main JavaScript load in advance on the login page, and add and execute it before . Statistical Methods:
Collect performance indicators data (first screen, total download, DNS, connection establishment, first packet, download speed, basic page, etc.) through third-party tools and directly output reports.
Insert monitoring code to generate reports by the performance monitoring and analysis system (Boomerang, Performance). Optimization Results: For reading-type pages such as the microblog homepage, the key performance indicator of first screen time has been reduced by 50%.

Major Hazard Source Monitoring System | Visio, Axure, Visual Studio 2008, SQLServer, Flex(ActionScript) | September 2010 - November 2010

The system collects data through sensing technology to monitor devices and hazardous sources in real-time. Once the set value is exceeded, it will issue warnings and alarms, and process the warning and alarm information, providing fault diagnosis analysis and disposal decision suggestions. The system automatically analyzes monitoring data, including parameter monitoring, video monitoring historical data, and provides functions such as statistics and reports. In addition, the system also implements management of hazardous source information, device-related information, and permissions.
Communicated with clients, participated in requirement analysis and research. Responsible for functional module sorting, database design, and detailed design. Designed system prototypes using Axure tools to enhance user experience.

Lezhong.com Website | PHP, MySQL, Flex(ActionScript) | July 2010 - September 2010

The website mainly compares historical prices of products on JD.com. Users can customize their favorite products and prices, and the system will automatically send price drop notifications to users’ emails.
Responsible for requirement mining of Lezhong.com, website function planning, and daily data crawling from jd.com.

Shikong Continent Game | Flash, Flex(ActionScript), Visual Studio 2008, SQLServer | September 2009 - May 2010

Shikong Farm Game: Players take on the role of virtual farmers and purchase seeds, young animals, or fish fry from the store. They can plant crops in the plantation, water them, weed them, kill pests, and harvest them. They can also raise livestock in the breeding farm, clean up manure, feed the animals, and treat diseases. In the fish pond, players can raise fish, clean up sludge, and treat diseases. They can also help or sabotage friends (such as weeding, planting grass, picking, stealing) to experience the joy of labor and harvest.
Shikong Continent Map: Simulates the map of Nanning City in Guangxi Province, China. It divides the city into different areas for street construction, building construction, land use, etc. Players can purchase land and choose its purpose: running a restaurant or a farm. They can also enter the entertainment center on the map to play various mini-games (such as puzzles, gold digging).
Shikong Gold Digging Game: A casual and entertaining mini-game with three levels: stones, gold nuggets, and diamonds. The number of stones, gold nuggets, and diamonds gradually increases with each level. After completing all three levels, players are ranked based on their scores. The game is developed using Flex for client-side programming and Flash for game assets, which are referenced in the Flex project in SWC format. The game data is encoded in JSON and interacts with the database through ASP.NET WebService.
Participated in the development of the Time and Space Continent game. Responsible for implementing the farm game and gold digging game, and conducting performance testing by integrating the Time and Space Continent module with the restaurant module.

Shikong 3D Map | Visual Studio 2005, SQLServer 2005, JavaScript | November 2007 - June 2008

Shikong 3D Map is a web-based application system compatible with mainstream browsers (IE, Maxthon, Firefox). It is implemented using ASP.NET 2.0 Ajax+JavaScript. The main functions include displaying, dragging, and zooming the main map and the overview map, displaying and locating map annotations and bus routes, map interfaces, and editing and processing backend map data.
Requirement analysis for the Shikong 3D Map, database design, coding implementation of the JavaScript drag library, displaying, dragging, and zooming of the main map and the overview map, locating and adding search functionality to map annotations, displaying bus routes, referencing map interfaces, and handling map images and annotation data.

Education

2007 Guangxi Teacher College, Nanning, Guangxi, China
Bachelor of Computer Science

Other

Language: Mandarin Chinese; English; Cantoneses
Certificates: Health Manager; American Heart Association Heartsaver® Instructor