Back in 2016, 996 wasn’t a blessing and bitcoin was still far below $1,000 per coin. At that time, I was in awe of Dachang and confused about the future. I left the campus with a graduation certificate. This first job, called Web front-end development, was written in code until today.

Fast forward three years, from pure demand to building wheels, sharing and leading teams, many things that I could only look up to when I was a fresh graduate now seem not so far-fetched. Simply put, I’ve had three jobs in three years, and each of them had the highest year-end performance in my department. But this is too utilitarian, too boring. I believe this story is more than just a rundown in a weekly newspaper and resume, and it might make a good story for everyone as I turn 25. Hence this article.

The first year with The Times

The first company I joined after graduation was IFlytek. Although this is not a small company, iFlytek is almost as easy for a college student to get hired as lanxiang student to drive an excavator. I remember that the interview process basically consisted of chatting with a few hkUST alumni who held senior positions in Iflytek and then receiving offers.

Nowadays, in the technical community, there is always a quarrel between training class and technical class. However, as a half-degree student at that time, I didn’t think there was a big difference between myself and the trainees in the training class except for my academic background. At that time, I didn’t know the difference between absolute positioning and relative positioning, and basically only knew how to stack functions with jQuery and Bootstrap. However, it doesn’t matter, there are always rich companies willing to hire 985 students to cut graphics and write pages, which is the main content of my work in Iflytek.

In the first year of graduation, my work was mainly to implement part of the Web front-end requirements of the IFlytek 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 development team, the technology stack was jQuery + JSP, front-end code was uploaded to static servers by FTP, and my classmates were still investigating Knockout as the next basic library — even then, Knockout has been around for almost a decade. In fact, many outdated tools can be easily replaced as long as they have access to mainstream technology in the community. Because of this, I quickly applied the Gulp family bucket to handle tasks that could easily be automated, and started experimenting with the current hot Vue 2.0 and Webpack during the National Day holiday that year. Then, I set up the private NPM warehouse on the Intranet and released more than ten packages including scaffolding to help people migrate to the new technology stack. The technology that is now common to front-end students was quite new at the time. Taking this opportunity, I promoted the practice of separating the front and back ends of the team, and was honored as the best newcomer in the department that year.

There were so many things I could learn and wanted to learn when I just graduated. Remember that iFlytek’s internal App can display the daily punch ranking. If you clock in at 12 p.m., you have a shot at being number one the next day — I have more than 30 screenshots of that time on my phone. Of course, even if It’s true that IFlytek has the most forced overtime of any company I’ve ever worked for, it’s nowhere near as busy as this. The truth is that I’ve discovered since then that as long as you’re facing a screen of code and delivering it on time, no one cares what you’re writing. Through this heightened interest, I turned out a lot of things that now seem mostly just fun. Such as:

Ove Lang programming language, can explain the executive form such as (position (Mr. Dong) (= Mr. Dong) oh. The code.

The Merry8 virtual machine can simulate running PONG games written with the ancient Chip8 assembly instructions.

Sinomap map library, you can use Mercator projection algorithm to render GeoJSON data to Canvas.

Flylog remote debugging tool, you can push log information from other device pages to the PC backend.

CSS Emoji example, you can use two divs to draw Emoji.

You can certainly accuse me of being more technical than professional (that’s what a big company said about my job interview), but working on these interesting projects made my life feel more comfortable than it did when I was in college and had to agonize over copying assignments every weekend. From an outsider’s perspective, I was not slow to grow up at IFlytek, and there are many HKUST alumni who have become technical backbones there over the years. However, the truth is that I didn’t stay in Iflytek for a full year. I left Hefei after I wrote a note titled “300 Days in Iflytek” as a souvenir. Why did you leave? In a word, I don’t feel like I belong there: Hefei is a city that doesn’t have much sense of belonging for me as a southerner, and the front-end technology I am familiar with is more of a benefit to a technology company that is not an Internet company than a help in the future. Out of the yearning for geographical location and personal value, I chose to bid farewell to the company whose canteen still makes me miss very much. Thanks to the strength of the east, Fang sister and home jun and many other people’s attention, I hope to be able to see the river’s lake.

​

A photo of debugging the 2016 big screen Demo. It was my busiest 24 hours at IFlytek 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 have stayed seem to be “fake” : I studied at HKUST, but it was not in Beijing; Before graduation, I had an internship in goose Factory, but base was not in Shenzhen. When I left IFlytek, I went to Meituan Dianping, but the department was in Xiamen. Up to now, I have no intention of leaving the city for the time being. As long as I didn’t limit myself to vulgar peer pressure, Xiamen was a comfortable city near my family and easy to see the sea. In 2017, meituan-dianping’s research and development center in xiamen could still see yachts before they moved, and they could enjoy the sea breeze by riding bicycles to and from work every day. Sometimes they could go to the beach to catch crabs with their friends after work 🙂

My interview to join Meituan-Dianping went well, and the most important process was that I showed some of the toys above and the corresponding blog and front-end boss, Brother Hu. There, my main job was to develop an internal knowledge base system called The Citadel. While the percentage of code I contributed to the project may be low, I believe that as long as it lives, it will have a subtle connection to me — I named the citadel. If you’ve seen Game of Thrones, you probably know the Citadel, which houses the maesters of the seven Kingdoms of Westeros. Is that a wise name for a knowledge base?

The rich text editor of Web front end is very important for the knowledge base system like Wiki. For those of you with a bit of experience, rich text editing is a field that has long been considered a sinkhole, and the time from startup to maturity of the relevant mainstream infrastructure is measured in years. We obviously don’t have to reinvent the wheel, we can build on a 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. Its ELEGANT API, well-documented, and clean source code made me jump on board quickly, not even paying much attention to the friendly warning that it was still in Beta.

In the earliest versions of Citadel, the code we wrote on Slate was fairly neat. But it soon became a problem: it wasn’t a Battle-tested framework, and our custom components were being edited with a lot of state problems and a high number of bugs. In my previous work experience, the problem that the framework does not work well can be basically adapted or bypassed in the business. This doesn’t work for rich text editors because many bugs are inherent in the framework layer and no one is obligated to fix them for you right away, even if they are reported back to the community. So what to do? Download a copy of the source code and change it yourself.

Fixing bugs in your framework is not fundamentally different from fixing bugs in your business code. After all, almost all bugs can eventually be fixed if they are stable enough to reproduce, but business code is more likely to have dirty fixes. But after fixing the bug? In my first year on the job, I hardly ever submitted code for anyone else’s project on GitHub, but I knew that as soon as the code merged into the main trunk branch, you would become a contributor to the project. There was no financial reward for it, but it still impressed me as proof of having contributed to an open source project. With this in mind, I submitted my first PR for the community.

I still remember the first PR: a line was added to the.npmignore file to fix the Babel default repeat compilation. It’s only one line of code, but out of reverence for open source projects, I wrote a fairly detailed description of why I needed to add this line and how it would solve the problem. The authors quickly incorporated this PR as well. After discovering that contributing to open source projects is what it used to be, I had a big incentive to commit more of my improvements upstream. By the time I left the Citations project, I had incorporated nearly 20 MR, including bug fixes, tests, documentation, into Slate’s trunk, and maintained a full Chinese translation of the 0.24 document. Today Slate has nearly 15,000 stars and over 200 contributors, and I still rank in the top 10 ficolin-3 in it.

Unfortunately, even though I did my best to improve Slate, it has nested UI components for tables, lists, etc., and it’s still not stable enough to meet the needs of the citys. Coupled with its more aggressive updating approach, we quickly ran into problems with continuing to synchronize upstream updates. After sufficiently throwing questions at the top of the company and presenting alternatives, we migrated the rich text framework to the similar but more stable ProseMirror, which should have been in use in the Citytown to this day. Slate didn’t last long, but the process of using it and improving it gave me a good understanding of how open source projects work and how they participate, and I finally ended up doing more than just entertaining myself on GitHub.

​

Comparison of my GitHub contributions in 2016 and 2017.

By the second year, the code I submitted to GitHub was still a lot of fun, but it was no longer a toy. These are generally:

Bumpover, an asynchronous data migration tool, achieved 100% unit test coverage.

Naming -style-demo example comparing Vue and Angular similarity by extracting syntax tree nodes.

HTML strings go to the htML-toy-parser for the virtual DOM.

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 of the tech communities. I remember that I had to switch Vue to React when I just joined the company. The memory of Vue prompted me to answer many questions of Vue on SegmentFault, and I was the first one in 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 technical positive. If you had posted a post about how to understand the four directions of this and the parasitic inheritance, I would have made a comment in the comments section 🙂 but now I have no interest in participating in these drool topics.

I didn’t work in Meituan Dianping for more than a year due to opportunities that were more suitable for me, but I still miss the team when I first joined. Whether it was the daily meal with the menu-eating friends at dinnertime, or the occasional Tiger Brother Starbucks, it was a lot of fun. I also want to thank jia Li, Gen Long, Chunyu and other students who took over the city. Thanks to you, Boss Zou didn’t come after me.

​

The polygonal building is the former site of Meituan-Dianping’s RESEARCH and development center in Xiamen, where our team once caught crabs.

The third year of breaking the bottleneck

Before leaving Meituan-Dianping, I was able to handle some basic framework development. But rich text editors, by their very nature, tend to iterate more after they’re basically stable, more tinkering than breaking ground. It made me feel anxious, like I was at a point where I was fighting fires and technological progress was starting to slow down. At this point, new opportunities arise.

One day in late 2017, I was filling my nuggets with water when I found an AD titled “We Write Code by the Sea.” It was signed sugar Pie, and it looked like it came from a very confident front end team. Coincidentally, its base is also in Xiamen, and its actual address happens to be on my way to work. In the spirit of a good conversation, I visited the company, then known as Joy Shop, on my bicycle.

One of the two interviewers who met me said his alias was Sugar cake, while the other said his alias was Xiaomi. The two of them seemed simple enough, but were surprisingly patient with my tirade, which was attended by a man in yellow slippers. It was the longest interview round I’ve ever been through, probably two or three hours. I originally thought this is the first time, thinking that the company’s first line of students also quite withstand cheating. But in fact I have all the bosses that the technical side should encounter all over again, did not think of said good bronze bureau came a group of Kings.

I must say, if Sugar Pie hadn’t posted the parallel build support PR he incorporated into Webpack, I wouldn’t have easily chosen to be encouraged to change jobs for a third time less than two years after graduation. Of course, our average day isn’t all Rocket Science. My work here focused on draft design projects that were not yet independent. I am responsible for maintaining the plane editor SDK and related UI components in the design site. At first, I thought that draft design was a marginal new business, until the company moved to the front of the draft design signs, I found that this is probably the same as before the spin-off of China Post into a department called China Mobile.

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 are not designed with Slate’s highly extensible flexibility certainly gives me a lot to work with. After more than a year of getting familiar with the editor, starting with minor bug fixes, I finally released the feature I most wanted to borrow from Slate last quarter: componentable editable elements. Slate gives us the extended ability to edit tables in a rich text editor simply by declaring a

component with React. I applied this idea to our VUe-based editor. Now we can easily assemble new editable element type support for the editor without changing the framework’s core source code by simply providing UI components written on Vue. With the unremitting efforts of our friends in front-end drawing, our editor can combine the advantages of Canvas and DOM. At present, no mainstream open source editor can meet this requirement.

​

Our plane editor, welcome to visit gaoding.com to experience oh.

In addition to refactoring the framework to my own design ideas at a higher level, I did some interesting work at a lower level of detail. For example, I use the idea of coordinate transformation to simplify the cutting drag limit algorithm after graph rotation from hundreds of if else judgments to more than ten lines of mathematical transformation. Based on the hash value of node serialized data, the sharing of history state structure with finer granularity is realized, and the history state management library StateShot is opened source. Automatically refactor ES5 code to ES6 using CodeMod; He designed and realized the special effects adjustment mechanism of the editor, and submitted a patent application as the first inventor. I’m now the nominal head (mascot) of the Web Tools team, have written about 80 tech blogs and read over 200,000 nuggets columns in my career, so I’m not doing too much, right?

But it didn’t feel like I was breaking through.

I asked Xiaomi a long time ago, do we have any particular advantages over Adobe in what we do? Xiaomi’s answer is that we need the main content and segmentation of the scene, to achieve higher usability for ordinary users. From a business point of view, I quite agree with this answer, but from a purely technical point of view, I always think it is more suitable for the head of the Marketing Department than the consciousness of the technical department. Also, I always felt that there was something missing in my skill set that kept me from doing cool things in a company that focused on business design and focused on front-end technology. What else is missing? My answer is render.

The JavaScript that we front-end students are so good at writing is just single-threaded code executing in the CPU. Don’t forget WebGL is a very cumbersome weapon that allows us to unleash the potential of the GPU. The field is often thought of as the preserve of game developers. When it comes to 3D capabilities on the Web, the first thing that comes to mind is a fully packaged, mature open source rendering engine like Three. So is there no need to reinvent the wheel in this area? On the contrary, I found that this is a huge blue ocean, its application in the field of Web design is almost blank, there is a great possibility of customization, optimization and application prospects. Due to lack of space and the topic of this article, I won’t go into detail here, but it’s enough to show some of the results of our rendering engine in its first month of development:

​

When I chose to dive into WebGL a while back, I was reminded that this was basically a rehash of the numbers. It’s true that at the beginning of the learning curve, the threshold of an obscure GRAPHICAL API was hard for me, but after sticking with Demo without an off-the-shelf engine for a while, at some point I felt like I could finally connect the dots. At this time, combined with the front-end framework design experience, I did find a self-research direction that is very suitable for our application scenarios, the specific content can not be detailed here, I can only say that my friends and I are working on the development of our new features as soon as possible 🙂

At 25, I feel like I’ve finally gotten out of the bottleneck of writing logic on a CPU for years. From the earliest toy programming languages and game simulators to the present rendering engine, I can boast that I have dabbled in all three romances of programmer “programming languages, operating systems and computer graphics”. It may not be easy for me to stay enthusiastic and find a technical area worth digging into after three years in a job, so the current situation is pretty good for me. Of course, in order to continue to be in-depth in technology in the future, it should not only require the domain knowledge of the traditional Web front-end, but also need more cross-domain and disciplinary knowledge. Thanks to the game engine and graphics experts here, I learned a lot from their communication. I have too much to do right now, so my blog and column may not be able to maintain a monthly rhythm anymore, hopefully making up for it with more work 😀

Postscript and acknowledgements

From the first year of writing display pages and back-end business logic, to the second year of being active in the open source community, to the third year of developing self-developed frameworks and trying to transition into the graphics field, these experiences since graduation make me feel that I am still growing. I’m no longer the youngest member of the team, but I’m far from the point where a fully transformed manager can assign requirements and tasks: there’s so much interesting code to write that it’s a shame to give it up.

While this article 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 keep an open mind in life, you can always recognize and learn from others who are better than you. If I were to make a list of the people who have influenced me the most, even though I have never met some of them, I would say:

Xiaomi and Tangpie of our company have played a great “role model” in my attitude towards technology and team management, and I have 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 in the open source community, and his framework design philosophy has had a strong influence on me.

Ctrip’s industrial gathering showed me the level of elegance code logic can achieve. The aggregated GSP coding style works well even when writing a rendering engine, reversing my overzealous attitude toward functional programming.

Photopea author Ivan Kutskir hosted me warmly in Prague, and the use of graphics in his work gave me great confidence to dive into this field.

One unnamed woman gave me a lot of comfort when I was in trouble, and I got used to writing code safely on the bullet train to meet her every weekend.

​

I took this picture on a tour of Strasbourg.

I would also like to thank the many people I have met since graduation. After all, it is the countless choices of associating with others that make a person. In the big, chaotic system of life, fortunately, We have choices to meet others, pursue our ideals, and make a difference. Finally, thank you for reading oh 😀