Back in 2016, 996 wasn’t a blessing, and the price of a bitcoin was well below $1,000. At that time, I was in awe of Dafa and confused about the future, and took a graduation certificate to bid farewell to the campus. The first job, called Web front-end development, was code written and written until today.
Fast forward three years, from the pure need to catch up to build wheels, do sharing and lead a team, a lot of newly graduated oneself can only look up to things, now it does not seem so far away. To put it simply, I’ve had three jobs in the last three years, and each job had the highest year-end performance in my department. But this is too utilitarian, too boring. I believe this experience is more than just a rundown of weekly papers and resumes. It might be a good story for everyone to put together by the time I turn 25. Hence this article.
The first year of catching up
The first company I joined after graduation was IFlytek. It’s not a small company, but iFlytek is almost as easy for a UNIVERSITY student to get a job as it is for a Lanxiang student to drive an excavator. Remember that the interview process was basically to talk to a few high ranking HKUST alumni at Flytek, and then received an offer.
In today’s technical community, there is often a quarrel between training and training. However, at that time, I was a half-trained student, and I didn’t think there was a big difference between myself and the students in the training class except my academic background. At that time, I didn’t know the difference between absolute positioning and relative positioning, and I just knew how to add jQuery and Bootstrap functions. But it doesn’t matter, there are always good money companies willing to hire 985 students to cut pictures and write pages, this is my main work in Flytek.
In the first year of my graduation, my work was focused on realizing some of the Web front-end requirements of Flytek’s open platform. During this period, in addition to realizing various business requirements, I mainly focused on the study of open source technology and personal projects. When I first joined the team, the technology stack of my development team was still based on the jQuery + JSP model, front-end code needed to be uploaded to the static server by FTP, and my team members were still investigating the possibility of Knockout as the next generation base library — even then, Knockout has been around for almost a decade. In fact, many outdated tools can easily be replaced if they have access to mainstream technology in the community. Because of this, I quickly applied the Gulp family bucket to handle tasks that were easy to automate, and over the October holidays that year, I began to test the waters of Vue 2.0 and Webpack, both now on the rise. I then built a private NPM repository on the Intranet and released a dozen packages, including scaffolding, to help people migrate to the new technology stack. The technology, which is now commonplace for front-end students, was a bit new. Taking this as an opportunity, I promoted the practice of separating the front and back ends of the team. Later, I was honored to be rated as the best newcomer in the department that year.
Right after graduation, there’s so much to learn and want to learn. Remember that Flytek’s internal App shows you the daily clock-in rankings. If you punch in at 12 p.m., you have a chance to be the first to punch in the next day — I have more than 30 screenshots of this time on my phone. Of course, even if It’s true that Flytek has the most mandatory overtime of any company I’ve ever worked for, it’s nowhere near that busy. The truth is, I’ve learned since then that as long as you’re looking at a screen of code and delivering it on time, no one cares what you’re writing. With that heightened interest, I made a lot of things that now seem basically just fun. Such as:
- Ove LangA programming language that can explain how execution looks
(Making a statement (naming Mr Tung) (= Mr Tung) Oh.The code. - Merry8 virtual machine, can simulate running with the ancient Chip8 assembly instructions written out of the PONG game.
- Sinomap Map library, which uses the Mercator projection algorithm to render GeoJSON data to the Canvas.
- Flylog remote debugging tool that pushes log information from other devices to the PC backend.
- CSS Emoji example, you can use two div draw Emoji Emoji.
Of course you could accuse me of focusing on technology rather than business (that’s exactly what one big company said in my interview), but juggling these interesting projects made my life feel much more comfortable than when I was in college, where I had to agonize over homework every weekend. From an outsider’s point of view, I did not grow up slowly in Telefi, and there are many ALUMNI of HKUST who have become the backbone of technology there over the years. However, the fact is, I did not stay in Infoflight for a full year, leaving a “small notes in 300 days of Infoflight” as a memorial after the farewell hefei. Why did you leave? In a word, I felt like I didn’t belong there: Hefei was not a city of great belonging to me as a southerner, and the front-end technology I was familiar with was more of an icing on the cake than a lifeline for a technology company that wasn’t an Internet company. Out of longing for geography and personal value, I chose to bid farewell to the company whose canteen I miss so much. Thank you jin Dong, Fang sister and home jun and many other people’s care, I hope to be able to see you.
A photo of the debugging of the 2016 big screen Demo. It was my busiest 24 hours at Flytek and the only time I reported directly to the chairman.
Second year of community involvement
When I introduce myself, I often say that the places I’ve been seem “fake” : I study at the University of Science and Technology, but it’s not in Beijing; Before graduation, I took an internship in a goose factory, but my base was not in Shenzhen. After I left InfoFlight, I went to Meituan-Dianping, but the department was in Xiamen. Until now, I have no plans to leave the city for the time being. As long as I don’t have to shackled myself with vulgar peer pressure, Xiamen is a comfortable city to stay close to my family and easy to see the sea. In 2017, meituan-dianping’s r&d center in xiamen was still able to see a yacht before moving, and I could ride my bike to and from work every day to enjoy the sea breeze, and sometimes I could go to the beach to catch crabs with my friends after work 🙂
My interview to join Meituan-Dianping went well. The main process was that I showed off some of the toys on meituan-Dianping, the corresponding blog and the boss of the front end tiger Brother. There, my main job was to develop an internal knowledge base system called the Citadel. While the percentage of the code I submitted for the project may be small, I believe that as long as it is alive, it will always have something to do with me — I gave the citral its name. If you’ve seen Game of Thrones, you know the Citadel, which houses the maesters of the seven kingdoms of Westeros.
For wiki-like knowledge base systems, a rich text editor on the Web front end is very important. For those of you with a little experience, rich text editing is a field that has long been considered a sinkhole, where the time from startup to maturity of the relevant mainstream base libraries is measured in years. We obviously don’t have to reinvent the wheel, we can build on the mature framework that the community already has. It was in this context that I first came across Slate, a framework that lets you customize your own rich text applications in the form of writing React components. The elegance of its API, documentation, and clean source code made me jump on board quickly, without even bothering with the friendly reminder that it was still in Beta.
For the first few versions of the Citadel, the code we wrote from Slate was pretty neat. But soon the problem began: it wasn’t a battle-tested framework, and our custom components showed a lot of state problems while editing, with a very high bug count. In my previous work experience, most of the problems that are not comfortable with the framework can be adapted or bypassed in the business. This doesn’t work for rich text editors, however, because many bugs are in the framework layer and no one is obligated to fix them immediately, even if they are reported to the community. So what to do? Download a copy of the source code to change it.
Fixing bugs in frameworks is not fundamentally different from fixing bugs in business code. After all, almost all bugs can eventually be fixed as long as they reproduce steadily, but business code is more prone to dirty fixes. But what about fixing bugs? During my first year on the job, I hardly ever committed code to anyone else’s project on GitHub, but I knew that as soon as the code merged into the main branch, you would become a contributor to the project. There was no material reward, but it was a testament to my contributions to an open source project. With that in mind, I submitted my first PR for the community.
I still remember the content of the first PR: adding a line to the.npmIgnore file to solve the problem of Babel repeating compilation by default. It was only one line of code, but out of my awe of open source projects, I wrote a fairly detailed description of why I needed to add this line of code and how it would solve the problem. The author was quick to incorporate this PR. Once I found out that contributing to open source projects was what it was all about, I was greatly motivated to submit more of my improvements upstream. By the time I left the Citadel project, I had incorporated nearly 20 MR files, including bug fixes, tests, and documentation, into the Slate backbone, and maintained a complete Chinese translation of the 0.24 document. Today Slate has nearly 15,000 stars and over 200 contributors, and I can still rank in the top 10 in its coding rankings.
Unfortunately, even though I’ve tried to improve Slate, it has nested UI components for tables, lists, and so on, but it’s still not stable enough for the citcitys needs. Coupled with its more aggressive update approach, we quickly ran into problems that made it difficult to continue synchronizing upstream updates. Having adequately addressed the problem at the top of the company and presented alternatives, we migrated the rich Text framework to the architecturally similar but more stable ProseMirror, which is still in use in the Citys today. While Slate hasn’t been around long, using and improving it has given me a good understanding of how open source projects work and how to participate, and I’m finally doing more than just entertaining myself on GitHub.
A comparison of my 2016 and 2017 GitHub contributions.
By the next year, the code I submitted on GitHub still had a lot of playthings, but it wasn’t all toys anymore. It goes something like this:
- Bumpover, an asynchronous data migration tool, achieves 100% unit test coverage.
- Naming -style-demo example comparing Vue’s similarity to Angular by extracting the syntax tree node.
- HTML string to virtual DOM parser html-toy-parser.
- The 40-line MVC framework nano-MVC.
During my time at Meituan-Dianping, in addition to submitting code on GitHub, I was also quite active in some tech communities. I remember that I had to switch Vue to React when I first joined the company. My nostalgia for Vue prompted me to answer many questions about Vue on The SegmentFault, and I was once the first one under this topic in a few weeks. Also, I found the Nuggets to be a great place to write about front-end technology. By the end of 2017, my Nuggets column had more than 3,000 followers. However, I am not a pure contribution to the positive energy of technology. If you had been writing about how to understand the four directions of this and how to parasiticize inheritance and all that old crap, I would have been poking fun in the comments section 🙂 I’m just not interested in getting involved in that stuff anymore.
I didn’t work at Meituan-Dianping for more than a year due to a more suitable opportunity, but I still miss the team when I first joined. Whether it is the daily meal when friends eat all over the menu at dinner, or the starbucks brand of Tiger Brother that can be accessed from time to time, it is a very interesting memory. I would also like to thank jiali, Genlong, Chunyu and other students who have taken over the citadel. Thanks to you, Boss Zou didn’t come after me.
The polygonal building in the picture is the former location of Meituan-Dianping’s R&D center in Xiamen, where our team used to catch crabs.
The third year of breaking through the bottleneck
Before leaving Meituan-Dianping, I was able to hold on to some basic framework development. But rich text editors, by their very nature, tend to iterate after they have stabilized, more tinkering than expansion. It makes me anxious, and I feel like I’m at a bottleneck where technological progress is slowing down as I fight fires everywhere. At this point, new opportunities arise.
One day at the end of 2017, I was pouring water on the nuggets when I came across an AD campaign titled “We Write Code by the Sea”, signed By Sugar Cookies, which looked like it came from a confident front end team. Coincidentally, its base is also in Xiamen, and its actual address is just on my way to work. In the spirit of having a little chat and not losing anything, I visited the company, then called Happy Shopping, on my bicycle.
Of the two interviewers who greeted me, one said her flower name was a sugar cake (a real person is not the same as a profile picture), and the other said her flower name was Millet. The two of them looked plain, but were surprisingly patient with my long speech, and a man in yellow slippers joined in midway. It was the longest round of interviews I’ve ever had. It lasted two or three hours. I originally thought this was just a first meeting, thinking that the company’s first-line students are also quite able to withstand teasing. But in fact, I have the technical face to meet all the bosses have gone over, did not expect that said good bronze bureau to a group of Kings ah.
I must say, if Sugarcookie hadn’t posted the parallel build support PR he incorporated into Webpack, I wouldn’t have chosen to be encouraged by him to change jobs for the third time less than two years after graduation. Of course, our daily lives are not all Rocket Science. My work here was focused on draft design projects that were not yet independent at the time. I am responsible for maintaining the plane editor SDK for this design site, as well as the associated UI components. At first, I thought it was a marginal new business, until after the company moved, there was a sign on the front desk with the draft design, and I found out that I had joined the department called China Mobile in this area, which is roughly equivalent to the division called China Mobile before the breakup of China Post.
Graphic design editors have a lot in common with rich text editors, and the fact that the current mainstream open source projects in this niche don’t have the same level of scalability and flexibility as Slate does certainly gives me a lot of scope. After a year or so of getting familiar with the editor, starting with minor bug fixes, last quarter released the feature I most wanted to borrow from Slate: componentized editable elements. Slate gives us the extended ability to edit tables in a rich text editor simply by declaring a
Welcome to visit gaoding.com to experience our plane editor.
In addition to refactoring the framework to my design ideas at a high level, I did some interesting work at a low level of detail. For example, I use the idea of coordinate transformation to simplify the cutting and dragging restriction algorithm after graph rotation from hundreds of if else judgment to more than ten lines of mathematical transformation; Based on the hash value of the serialized data of nodes, the fine-grained history state structure sharing is realized, and the history state management library StateShot is opened. Automatically refactor ES5 code to ES6 using CodeMod; He designed and realized the special effect adjustment mechanism of the editor, and submitted a patent application as the first inventor. Now THAT I’m the nominal head of the Web tools team (mascot), I’ve written about 80 tech blogs and read over 200,000 gold Nuggets columns so far, doesn’t that seem like a bad idea?
But it didn’t feel like I was breaking a wall.
I asked Xiaomi a long time ago, is there any particular advantage to what we’re doing over Adobe? Xiaomi’s answer is that we need to focus on the content and segmentation of the scene, to achieve higher ease of use for ordinary users. I agree with this answer from a business point of view, but from a purely technical point of view, I always think it is more appropriate for the head of marketing than for the technical department. Also, I always felt that there was something missing in my skill set that made me not cool enough to do in a company that focused on business design and focused on front-end technology. What’s missing? My answer is rendering.
The JavaScript that we front-end students are good at writing is just single-threaded code that executes in the CPU. And let’s not forget WebGL, a very cumbersome weapon that allows us to unlock the potential of gpus. This field is often thought of as the preserve of game developers. For the application of 3D capabilities on the Web, the first thought may be to apply Three and other fully encapsulated mature open source rendering engines. So is there no need to reinvent the wheel in this area? On the contrary, I found it to be a huge blue ocean, where its application in Web design was almost blank, with great customization, optimization possibilities, and application prospects. Due to space and the topic of this article, I won’t go into detail here, but just to show some of the results of our self-developed rendering engine in the first month of development:
When I chose to go deep into WebGL some time ago, the magic reminded me that it was almost like deleting numbers again. Sure, I had a hard time with the cryptic APIS of graphics early on in the learning curve, but at some point I felt like I was finally able to connect the dots after sticking with the Demo for a while without using a pre-existing engine. At this time, coupled with the design experience of the front-end framework, I did find a self-research direction that is very suitable for our application scenario. The specific content can not be detailed here for the time being, except to say that my friends and I are under intense development, and we really hope to make our new features available to you as soon as possible 🙂
Today, at the age of 25, I feel like I’ve finally come out of the bottleneck of writing logic on a CPU for the last few years. From the earliest toy programming languages and game simulators to today’s rendering engines, I can boast that I’ve dabbled in all three of the so-called programmer romances: programming languages, operating systems, and computer graphics. It may not be easy for me to stay passionate about a job for three years and find a technical area worth pursuing, so I’m in a good place. Of course, further progress in technology in the future will require not only traditional Web front-end domain knowledge, but also more cross-domain and disciplinary knowledge. Thanks to the big guys here who are studying game engines and graphics. I benefited a lot from their communication. I have so much to do right now that my blog and column may not be able to keep up with the pace of the month. Hopefully, I’ll be able to make up for it with more dry stuff 😀
Postscript and acknowledgments
From writing display pages and back-end business logic in the first year, to being active in the open source community in the second year, to developing self-research frameworks in the third year and trying to transition to the graphics field, these experiences since graduation make me feel that I am indeed growing. I’m no longer the youngest member of the team, but I’m far from being a full manager assigning requirements and tasks: there’s so much interesting code to write, wouldn’t it be a shame to give up?
Although this post is mostly about technology, my life isn’t all about technology: I have a single micro and unmanned aerial vehicle (uav), through the Switch on the Mario and zelda, flower (Sprite) and public HaoMing (color photo album) are from the white, in addition to the public since graduation widely traveled north shanghai-hangzhou and other big cities, also went to Taiwan, Singapore, the Czech republic, France (including white at Strasbourg holy land), etc. Very interesting place. As long as you live with an open mind, you can always recognize and learn from others who are better than you. If I were to make a list in terms of acknowledgements for my papers, I would feel that the people who have most influenced me, even though I have never met some of them:
- Our company’s Millet and Sugar cake have played a great “role model” for me in the attitude towards technology and team management, and I had the best growth experience in this team.
- Slate writer Ian Storm Taylor gave me a lot of enthusiastic but rigorous reviews when I first started out in the open source community, and his framework design philosophy was a big influence on me.
- Ctrip’s industrial gathering showed me the level of elegance that code logic can achieve. The aggregated GSP coding style works well even when writing a rendering engine, reversing my overcorrected attitude toward functional programming.
- Photopea writer Ivan Kutskir warmly welcomed me in Prague, and the use of his work in graphics gave me great confidence to go deeper into this field.
- One woman, who did not want to be named, gave me a lot of comfort when I was in trouble, and I got used to seeing her on the train every weekend and writing code with peace of mind.
A photo taken during a tour of Strasbourg.
I also want to thank the many people I have met since graduation. After all, it is the countless choices I have made with you that make a person. In the vast and chaotic system of life, fortunately, We have choices to meet people, pursue our ideals, and make changes — We are what We choose. Finally, thanks again for reading 😀
This article is first published in my public number “color album”, no traffic, no ads, just make a friend, welcome to pay attention 🙂
