My Frontend Journey
My Frontend Journey
I have been in Full Stack Community more than 10 years.
Shell GUI
When I was in junior high, I took a course called Backtrack 5 Basics. It taught me about shell and hacker tools, even though most concepts were initially difficult to grasp. Despite this, I diligently followed the course and felt excited about everything I learned - even something as simple as displaying an ASCII graph in Shell.
Once I mastered control and loop commands in the shell, I experimented with drawing shapes and texts using scripts for batch file handling.
jQuery Web Application + PHP
During high school, I created a web application using jQuery and PHP with MySQL. I recall setting up the environment with WAMP on Windows, which streamlined the process by configuring Apache, MySQL, and PHP in one click.
Under the mentorship of my computer science teacher Mr. Du, I participated in a national competition where I presented my project—a calendar platform for teachers—and won first place in China. This marked the beginning of my career as a software engineer. Subsequently, I developed demo apps and addressed real-world issues through accessible applications for users.
Django/Flask
During my bachelor's program, I studied Computer Networks and learned Python. I also experimented with Django and Flask while working on various projects. One project that stands out involved creating a Python web crawler to gather English articles from the web, store them in a database, and display them on our website. Although this project is only partially finished, I quickly developed a prototype before moving on to other tasks.
jQuery Html5 Game
There was a period when I was obsessed with playing the mobile game FGO. This led me to embark on an interesting project related to FGO. I developed a static game using jQuery, HTML, MySQL, and PHP, dedicating over 40 hours to its creation. At times, I even sacrificed meals and sleep just to complete it quickly. Once finished, I published the game and asked my roommates to try it out. One of them became hooked on the game, boosting my confidence and providing satisfaction in my development efforts. It felt great. During this time, I had already become accustomed to using GitHub for managing my projects. Fortunately, this project is accessible on my GitHub profile: FateGrend0rder
The intentional misspelling is part of a hacker culture like sql injection, and also need to avoid copyright issues. I felt funny to name it like this.
React + Node.js, ThinkJS
I worked on a project during my undergraduate Software Engineering course where I used React for the first time instead of vanilla HTML and JavaScript. It was more challenging than I anticipated, and I had to put in a lot of effort to get it up and running. Every line of JSX showed errors, making tasks like rendering a list within a loop particularly difficult for me. However, with the pressure of the course project looming over me, I managed to complete it in the end.
I wrote Node.js code to set up a server using the ThinkJS framework, which is based on koa.js. Having limited experience with ThinkPHP, I found it easy to learn and completed this part without much difficulty. This experience was valuable for my upcoming internship at Alipay, where they use ChairJS to set up their business API servers. ChairJS is also based on koa.js and is very similar to ThinkJS. However, I was not aware of this when choosing the tech framework.
HTML5 2D Game: Egret
Mini-Program: Wechat and Alipay
Vue + TypeScript + Tornado
React + Vite + TypeScript
React
When I firstly used React, it was only the initial stage with JSX. Developers in frontend community were seeking a solution like JS template engine to move from PHP HTML template to JS HTML Template. That's how jQuery become popular and how Google developers have Angular. And in recent years, there are more and more changes like React Hooks, Function Components, Redux and various components library. I have always been at the forefront of the front-end community, adhering to the philosophy of lifelong learning.