25 years old, three years of graduation writing front-end

Love front end does not love love 2020-11-08 10:57:12
years old years graduation writing

Time to go back to 2016 year , At the time 996 Not a blessing yet , Bitcoin's unit price is far less than 1000 dollar . At that time, I was in awe of the big factory and confused about the future , Take a graduation certificate to say goodbye to the campus . The first one is called Web Front end development work , The code says it's today .

Three years later , From pure demand to wheel building 、 Share and lead the team , A lot of new graduates can only look forward to things , Now it doesn't seem so far away . In short , I've changed three jobs in the last three years , And the year-end performance of each job is the highest in the Department . But this is too utilitarian 、 It's boring . I believe that this experience is not just a routine account in the weekly newspaper and resume , Put it in my full 25 At the age of 18 , Maybe it can be a good story for you . So there is this article .

<<< The front end is my lifelong faith , Write code until 50 year >>>
Pay attention to WeChat public number :web Front end learning circle
Reply key words 2020 receive 2020 New year web Front end system learning tutorial ( video + note + material + Source code + Project practice ) The whole set of arrangement is about 50G
In addition, Grandpa will share learning methods every day. , Knowledge dry goods , Practical cases , Interview skills , Experience sharing and other related articles , Focus on web Front end learning circle = Focus on 5000+ Front end Daniel

Catch up with the first year of the times
The first company I joined after graduation was iFLYTEK . Although it's not a small company , But iFLYTEK is a college student , It's almost as easy to get into a job as a Lanxiang student driving an excavator . I remember that the interview process is to talk with some alumni of HKUST who are in high positions in iFLYTEK , And then I received offer 了 .

In today's technology community , Often because of the training class and professional class origin quarrel ceaselessly . But at that time, I was half a professional , I don't think I was in addition to my education background at that time , It's very different from the trainees in the training class : At that time, I didn't know the difference between absolute positioning and relative positioning , Basically, I can only jQuery Add Bootstrap It's just a pile of functions . But that's okay , There's always a good company willing to hire 985 To cut pictures and write pages , This is my main work in iFLYTEK .

In the first year of graduation , My work to achieve iFLYTEK open platform part Web Front end demand is the main demand . During this period, my energy is not only to achieve various business needs , Mainly on the study of open source technology and personal projects . When I first started , The technology stack of my development team is not separated from the front end jQuery + JSP Pattern , Front end code upload to the static server still needs to rely on FTP, And the team members are still investigating Knockout The possibility of being the next generation infrastructure —— Even then , leave Knockout It's been nearly ten years since it was born . Actually , As long as you have access to mainstream technology in the community , Many outdated tools are easy to replace . Because of that , I quickly applied Gulp The whole family can handle some work that is easy to automate , And from the November holiday of that year , Start to test water, and now it's at the height of the sun Vue 2.0 and Webpack. Then , I set up private intranet again NPM Warehouse , More than ten packages including scaffolding have been released to help you move to the new technology stack . This set of technology that is common to front-end students is still quite new at that time . Take this as an opportunity , I've driven the front and back separation practices of the team , Later, I was honored as the Department's best rookie in that year .

When I just graduated , There's so much to learn and want to learn . Remember the inside of iFLYTEK App Can display the daily clock in ranking . If you're at night 12 Clock in on time , Then you have a chance to win the first place in the clock out the next day —— A screenshot of this time period , I have more than 30 in my cell phone . Of course , Even if iFLYTEK is the company I have stayed in, I have to work overtime the most , But in fact, it is far from being busy to this magnitude . The truth is, since then, I've discovered , As long as you face a screen of code and can hand over on time , No one cares what you write . With the high interest at that time , I've churned out a lot of things that now seem to be basically entertainment . such as :

Ove Lang programing language , It can be explained that execution takes the form of ( Declare ( be appointed by the emperor to the Imperial Academy Mr. Dong Chief Executive ) (= Chief Executive Mr. Dong ) Oh . Code for .

Merry8 virtual machine , It can be simulated and run with ancient Chip8 Assembly instructions written out of PONG game .

Sinomap Map base , We can use the Mercator projection algorithm to put GeoJSON Data rendering to Canvas On .

Flylog Remote debugging tools , You can put the log Push information to PC On the backstage .

CSS Emoji Example , You can use two div Draw Emoji expression .

You can of course accuse me of focusing on technology and not on business ( This is really a big factory's evaluation of my interview ), But toss up these interesting projects , It made me feel that life at that time was more painful than at every weekend ( copy ) The University of homework is much more comfortable . From the perspective of onlookers , I didn't grow up slowly in iFLYTEK , There are also many alumni of HKUST who have become the technical backbone there over the years . But the truth is , I didn't stay in iFLYTEK for a year , Left a piece of 《 In iFLYTEK's 300 God 》 As a memorial, I bid farewell to Hefei . Why leave ? It must be summed up in one sentence , I feel like I don't belong there : The city of Hefei doesn't have so much sense of belonging to me, a southerner , And the front-end technology I'm familiar with is for a technology company that's not an Internet company , They prefer to add to the icing on the cake rather than help them in time of crisis . Out of a desire for geography and personal values , I chose to say goodbye to the company that I miss so much . Thank you Jindong 、 The care of sister Fang and her family army , I hope I can see you again .

A debug 2016 The big screen of the annual meeting Demo Photos of the . That's my busiest time in iFLYTEK 24 Hours , It's also the only time to report directly to the chairman of the board .

The second year of community participation
When I introduce myself , It's often said that the places I've been in seem to be 「 fake 」: I study at HKUST , But it's not in Beijing ; Before I graduated, I went to the goose factory as an intern , but base Not in Shenzhen ; After I left iFLYTEK, I went to meituan to comment on , But the Department is in Xiamen . Until now, , I have no plans to leave the city yet . As long as not to those vulgar peer pressure to shackle themselves , Xiamen is a comfortable city which is close to my family and easy to see the sea .2017 year , Meituan commented that Xiamen R & D center can still see yachts before moving , Every day riding a bicycle to and from work can blow the sea breeze , Sometimes my friends and friends can go to the beach to catch crabs

My interview for joining meituan review was very smooth , The main process is that I show some of the above colorful toys and the corresponding blog and front-end boss tiger brother . There? , My main job is to develop an internal knowledge base system called Xuecheng . Although I'm probably running out of code for this project , But I believe as long as it's alive , There will always be a subtle relationship with me —— I gave the name of Xuecheng . seen 《 Game of thrones 》 All of you should know that Jonah westello has a bachelor's degree from seven countries in mainland China Citadel Well , Is this intelligent sounding name suitable for a knowledge base ?

Yes, similar Wiki In terms of knowledge base system ,Web The front-end rich text editor is very important . Any student with a little experience knows that , Rich text editing is a field that has long been considered a sinkhole , The time from start-up to maturity of the relevant mainstream infrastructure is measured in years . We obviously don't have to reinvent the wheel , It can be developed based on a mature framework already in place in the community . In this context , I first came into contact with Slate, This is one that allows you to write React Component to customize the framework of your own rich text application , its API It's elegant 、 The perfection of the documents and the neatness of the source code made me decide to get on the bus soon , I don't even care that it belongs to Beta Friendship reminder of status .

In the earliest versions of Xuecheng , We are based on Slate Well written code . But soon the question came : It doesn't count as a battle-tested Framework , Our customized components exposed a lot of state problems when editing ,bug The number is very high . In my previous work experience , For the problem that the framework doesn't work well , Basically, they can be adapted or bypassed in the business . But this doesn't work for rich text editors , Because many bug It's in the frame layer , Even if it comes back to the community , And no one has an obligation to solve it for you right away . So what to do ? Download a source code and change it yourself .

Fix the frame bug And fix business code bug, In fact, there is no essential difference . After all, as long as it can be stably reproduced , Almost all bug It can be fixed in the end , It's just that dirty fix code is more likely to appear in business code . But repair bug After that ? In my first year at work , I am here GitHub There's hardly any code submitted to someone else's project yet , But I know as long as the code is merged into the main branch , You'll be a contributor to this project . Although there is no material reward , But as proof of contributing to open source projects, I'm still thrilled . With this yearning mood , I submitted the first PR.

I still remember the first one very clearly PR The content of : to .npmignore A line has been added to the file , To solve Babel Default duplicate compilation problem . Although there is only one line of code , But out of my awe for open source projects , I've written a fairly detailed description of why I need to add this line of code , And how it will solve the problem . The author soon merged this PR. After discovering that contributing to open source projects is exactly what it is , I had a lot of motivation to submit more of my improvements upstream . Until I leave the school city project , I'll include bug Repair 、 test 、 Documents are close to 20 individual MR Merge into Slate The backbone of , And maintained a copy of 0.24 Complete Chinese translation of version document . today Slate It's already close to 1.5 m star And over 200 A great contributor , And I'm in it contributors You can still be in the top 10 .

It is a pity , Even if I try to improve Slate, It's for tables 、 There are nested lists UI Components , Its stability is still difficult to meet the needs of the school city . Plus its more radical way of updating , We soon ran into the problem of continuing to synchronize upstream updates . After sufficiently throwing questions and alternatives at the top of the company , We moved the rich text framework to a more stable but similar architecture ProseMirror On , It should have been used in Xuecheng today . although Slate The landing time is not long , But in the process of using and improving it , Let me fully understand the operation and participation of open source projects , I am here GitHub Finally, it is no longer just self entertainment .

2016 Years and 2017 I was in GitHub Compared with the contribution of .

The next year , I am here GitHub Although the code submitted on has a lot of playing elements , But it's not just a toy anymore . There are roughly these :

Asynchronous data migration tools Bumpover, It has achieved 100% Unit test coverage of .

Compare by extracting syntax tree nodes Vue And Angular Similar naming-style-demo Example .

HTML String to virtual DOM The parser html-toy-parser.

40 Yes MVC frame nano-mvc.

During the period of meituan's comments , In addition to the GitHub In addition to submitting code , I'm also quite active in some tech communities . Remember to put Vue Switch to React, Yes Vue The remembrance of me prompted me to SegmentFault A lot of Vue The problem of , It was once the number one topic in a few weeks . also , I also found that the Nuggets are a great fit for hair ( Novice ) Front end technical article place . stay 2017 At the end of the year , My Nuggets column already has 3000 The followers of the above . however , I'm not just a stupid white sweet who only contributes the positive energy of technology . If you were digging for blonde hair during that time, the article on how to understand this The four directions and parasites are mixed into the old dross of inheritance , Then I will probably stand up and make complaints about the reviews It's just that now I have no interest in participating in these salivary topics .

Because of the opportunity that suits me better , I haven't worked in meituan reviews for more than a year , But I still miss the team I just started with . Whether it's a daily dinner with friends eating through the menu at night , It's still the tiger's Starbucks that can be rubbed up from time to time , They are very interesting memories . I also want to thank Jiali 、 Genlong 、 Chunyu and other students who took over the school city . Thanks to you , Boss Zou didn't come to the door to hunt me down .

The polygonal building in the picture is the former location of Xiamen R & D center , Our team used to capture crabs in the photo location .

The third year of breakthrough
Before leaving meituan's comments , I can really hold Live in the development of some basic framework . But the nature of the rich text editor determines how it iterates after it's basically stable , It's more about tinkering than opening up territory . It makes me feel anxious , I feel like I'm in a situation where I'm tired of fighting fires everywhere , Technological progress began to slow down the bottleneck state . At this time , New opportunities arise .

2017 One day at the end of the year , I found an article called 《 We write code on the beach 》 Soft prose of , Signed sugar cake , It seems to have come from a front-end team with a lot of confidence . Coincidentally, it's base It's also in Xiamen , And the actual address is just on my way to work . In the spirit of a chat, anyway, not a loss mentality , I rode my bike to visit the company, which was called happy shopping at that time .

My two interviewers , One said that his flower name was sugar cake ( Real people don't match the head painting style ), Another said his flower was called Xiaomi . The two of them look very simple , But I'm incredibly patient with my long talk , On the way, a man in yellow slippers participated in the audit . It was the longest interview I've ever had , I've been talking to me for two or three hours . I thought this was the first time , Thinking about this company's front-line students can withstand the swindle . But in fact, I have put all the technical aspects that I should encounter Boss It's all over , Unexpectedly, a group of Kings came to the bronze Bureau .

Must say , If the cookie is not posted, he merges it into Webpack Parallel build support for PR, I would not easily choose to be encouraged to change to a third job less than two years after graduation . Of course , Our daily life is not always so tall Rocket Science. My work here , It mainly focused on the draft design projects that had not been independent at that time . I am responsible for maintaining the graphic editor in this design site SDK, And related UI Components . In the beginning , I thought it was a relatively marginal new business , Until the company moved, the front desk was hung with the sign of the draft design , I found that I was in this is about the same as the division of China Post, called China Mobile .

Graphic design editor and rich text editor have many similarities , And the current mainstream open source projects in this segment , Its design idea is not up to Slate That highly scalable flexibility , This undoubtedly gives me a lot of room to play . In the past year or more , I went from the tiny bug Repair begins to familiarize yourself with this editor step by step , Finally launched in the last quarter, I would like to start from Slate The characteristics of learning from : Componentized and editable elements .Slate It gives us just to use React Declare a component , The ability to edit tables in a rich text editor . I applied this idea to us based on Vue On the editor of . Now we just need to provide based on Vue Compiling UI Components , You can easily assemble a new type support for the editor , Without changing the core source code of the framework . Coupled with the small partner in the front-end map of unremitting efforts , Our editor does take and take Canvas And DOM The advantages of both , At present, there is no mainstream open source editor that can meet this point .

Our flat editor , Welcome to gaoding.com Experience oh .

Except at a higher level , Refactoring the framework according to its own design ideas , I've also done some interesting work at a lower level of detail . such as , I use the idea of coordinate system transformation , Drag and drop the clipping algorithm after the graph rotation from hundreds of lines if else The judgment is simplified to more than ten lines of mathematical transformation ; Hash value based on node serialized data , More fine-grained historical state structure sharing is realized , And open source historical state management library StateShot; Use CodeMod Automatically put ES5 The code is refactored to ES6; Design and implement the special effect adjustment mechanism of the editor , And as the first inventor, he filed patent applications and so on . Now I am Web The nominal head of the tool team ( The mascot ), The work has been written so far 80 About a technical blog , The Nuggets column read more than that 20 ten thousand , It seems to be OK ?

But it didn't make me feel like I was breaking through the bottleneck .

I asked Xiaomi a long time ago , What we do is compared to Adobe, Is there any particular advantage ? 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 . From a business point of view, I agree with the answer , But I'm from a purely technical point of view , I always feel that this is more suitable for the answer of the head of the marketing department than the consciousness of the technical department . also , I have always felt that my own skill system is not good enough , I'm in a company that focuses on business design and pays special attention to front-end technology , It's not cool enough . What's the difference ? My answer is to render .

What our front-end students are good at writing JavaScript, It's just CPU It's just a single threaded code . Don't forget we still have WebGL Although this is very cumbersome , But it allows us to release GPU Potential weapons . This area is often considered exclusive to game developers . And you're talking about applications Web Upper 3D Ability , The first thing I think of is probably to apply Three After full encapsulation of mature open source rendering engine . therefore , Is there no need to reinvent the wheel in this field ? On the contrary , I found it was a huge blue ocean , It's in Web The application in the field of design is almost blank , There's a lot of customization 、 Optimization possibilities and application prospects . Limited to space and the subject of this article , No more details here , It's enough to show some rendering effects that our self-developed rendering engine can get within one month of development :

Some time ago, I chose to go deep WebGL When , Illusory God reminded me that this is basically equivalent to deleting the number and practicing again . exactly , At the beginning of the learning curve , Graphics is obscure API It's very difficult for me , But insist on not using ready-made engine to achieve Demo After a while , At some point in time, I felt that I could finally connect the scattered points . At this time, plus the design experience of the front-end framework , I did find a self-study direction that is very suitable for our application scenarios , For the time being, there is no way to elaborate on the specific content here , It can only be said that my friends and I are under intense development , I hope we can see you soon with our new features

stay 25 Today, I am , I feel like I'm finally out of... Years ago CPU The bottleneck of writing logic on . From the earliest toy programming languages and game simulators , Now the rendering engine , So-called 「 programing language 、 Operating systems and computer graphics 」 The three romance of programmers , I can boast that I've been dabbling in . For me, , After three years in a job, I still have a high enthusiasm and find a technology field worthy of further study , It may not be easy , So I'm in good shape now . Of course , If you want to be able to continue to deepen in technology in the future , What is needed should be more than just traditional Web Front end domain knowledge , More interdisciplinary and interdisciplinary knowledge is needed . Thank you for the guys who worked on game engine and graphics , I benefited a lot from the communication with them . Now I really have too much to do , So my blog and column may not be able to maintain the rhythm of the month , I hope we can make up for it with more dry goods in the future

Postscript and thanks
Write the display page and background business logic from the first year , By the next year, active in the open source community , In the third year, we will develop our own research framework and try to transform to the field of graphics , These experiences since graduation make me feel that I am still growing up . I'm no longer the youngest member of the team , But now I'm far from the time for a fully transformed manager to allocate needs and tasks : There's so much interesting code to write , It's a pity to give up ?

Although this article is mainly about technology , But my life is not just about technology : I have micro single and drones , It's done Switch Selda and Mario on , flower ( Sprite ) And the official account ( Color album ) All from Bai Xue , Since graduation, in addition to official travel to Beijing, Shanghai, Guangzhou, Shanghai and Hangzhou and other big cities , I also went to Taiwan 、 Singapore 、 The Czech republic 、 The French ( Strasbourg, the holy land of the white scholars ) And other interesting places . Just keep an open mind in life , Always recognize and learn from many people who are better than themselves . If you make a list according to the way you thank for your paper , Well, I feel that the most influential people for me are , Even if some of them I haven't met yet :

Our millet and sugar cakes have played a great role in technical attitude and team management 「 A model takes the lead 」, The experience of growing up in this team is the best .

Slate The author of Ian Storm Taylor When I first joined the open source community, it gave me a lot of enthusiasm without losing strict Review, His concept of frame design has a deep influence on me .

Ctrip's industrial cluster shows me the level of elegance that code logic can achieve . Gather together to sum up GSP The coding style works even when writing rendering engines , Changed my overcorrected attitude towards functional programming .

Photopea The author of Ivan Kutskir I was warmly received in Prague , The application of graphics in his works gives me great confidence to go deep into this field .

A woman who didn't want to be named gave me a lot of comfort when I was in trouble , I'm used to going to see her every weekend and writing code safely on the train .

Photos taken during a tour of Strasbourg .

I would also like to thank many, many people I have met since graduation , After all, it's the innumerable choices that can make a person . In the huge and chaotic system of life , Fortunately, we can make choices to meet people 、 Pursue your ideals and make changes ——We are what we choose. Last , Thank you for reading too

本文为[Love front end does not love love]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple