Cici Blog

About Me

Hi, I’m Yanchun Shi, a front-end developer who graduated from Beijing Institute of Technology in 2023.

Contact: 1901177100@qq.com

Skills

• Proficient in HTML, CSS, and JavaScript, with a good understanding of JS prototype chain, closures, scope, and ES6 features. Experienced in TypeScript development and proficient in CSS preprocessors like Less and Sass.
• Familiar with the Vue technology stack (Vue3+Vuex+Vue Router+Vue Cli) and have practical project experience. Understanding of the core principles of Vue.
• Familiar with Webpack configuration and the bundling process. Proficient in using Git for version control, using git flow and git submodule to manage projects.
• Proficient in native WeChat mini-program development.
• Possess basic data structure and algorithm analysis skills. Familiarity with HTTP and browser caching.
• Familiarity with Node.js, Koa framework, and MySQL.

Education

Beijing Institute of Technology
Bachelor’s Degree in Economics
September 2019 - June 2023

• Honors and Awards: Excellent Student, Outstanding Scholar, First-class Scholarship, Second-class Scholarship, Third Prize in National College English Competition
• Relevant Courses: Internet Entrepreneurship Practice (100), Computer Fundamentals, Calculus (98), Linear Algebra, Probability Theory and Mathematical Statistics
• Certificate: CET6 (581)

Internship Experience

Yidu Cloud Technology Co., Ltd. (Beijing)
Front-end Development Intern, Data Platform Business Unit
August 2022 - April 2023
Tech Stack: Vue + Element-ui + Sass + Echarts

• Responsible for developing large screen visualizations, adapting to large screens, using gsap to display animation effects, and implementing seamless scrolling with the vue-seamless-scroll plugin.
• Packaged Echarts, unified data return format with the backend, and allowed dynamic configuration of chart data and types by the backend. Achieved backend-driven frontend page views, reducing maintenance costs.
• Refactored the medical record details page using virtual scrolling to improve initial loading speed.
• Packaged business components such as table, modal, and form in the backend management system, dynamically rendered using configuration options. Extracted and encapsulated components using techniques such as slots, mixins, and component communication to improve project maintainability.

Project Experience

1. Music Player (Mini Program)

Simulated QQ Music mini program using the Netease Cloud public API. It includes pages such as home, recommended songs, recommended videos, and playlist display, as well as song playback.

Tech Stack: WXML + WXSS + JavaScript + Vant

• Optimized package size by utilizing subpackage loading, manually removing unused components from Vant, and manually encapsulating debounce functions. Achieved a 60% reduction in package size.
• By using WXS, similar to filters and computed properties in Vue, we can achieve functionalities like time formatting, string-to-array conversion, and string truncation in WXML.
• Leveraging the swiper component, we implemented horizontal switching between songs and lyrics on the song playback page.

2. JSON Schema-based Form Generator (PC)

A form generator based on Vue.js and JSON Schema. With a given JSON Schema, it can generate corresponding form fields. Basic components include radio buttons, dropdowns, date pickers, file uploads, email inputs, URL inputs, etc. Supports custom components, custom error message configuration, and validation rules.

Tech Stack: Vue3 + TypeScript + Ajv.js + JSS + Vite + Vitest

• We utilized Ajv for form data validation, ajv-i18n for converting error messages to different languages, and ajv-errors for custom error messages.
• Development was done using JSX combined with JSS, providing excellent type support and flexibility.
• The provide and inject pattern was used to pass information across component hierarchies, resolving circular reference issues.
• Code style was enforced using eslint and prettier for code formatting. Unit tests were conducted using Vitest to ensure code reliability.
• Demo: https://vue3-json-schema-form.vercel.app/

3. Alibaba Front-end Internship Program

Web Front-end, Project Manager
September 2022 - October 2022

E-live Data, a live e-commerce data backend, visualizes and analyzes data from live e-commerce platforms. Rewarded as an excellent project.

PC Tech Stack: Vue3 + Element Plus + Axios + Pinia + Vite + Echarts

• Implemented authorization functionality using tokens for identity verification and route guards for route interception. Different roles were mapped to different menu directories to generate dynamic route mappings.
• We encapsulated the basic request process and interceptors based on Axios. Customized components were developed using Element Plus to maintain a consistent style.
• As a project manager, I created development schedules and milestone plans to ensure the successful delivery of the PC version, Android app, and mini-program according to the project timeline.