“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

2021 has been a year of ups and downs, with a lot to cheer for at times of glory and a struggle at times of rock bottom. The good news is that the hard times are over, and now it’s time to talk about them as stories.

If you have a lot of content, follow the main line of your working life, articles and technical growth.

Main Line (Work life)

I am Aligord, who joined us at the end of last year. I work in the architecture department to do the tool chain, including compilation, debugging, IDE, documentation and so on.

Since there are a lot of compilation technologies involved, such as Babel, Postcss, Typescript, Terser, etc., I took a closer look at the theory of compilation and how these compilation tools work.

After studying for a period of time, I made a compilation technology share in the company. I found that I was interested in compilation technology, so I asked a question in Zhihu: “Is front-end conversion compilation development reliable?” , lucky to get Wolf uncle, Huang Xuan, bread, a huawei senior experts and other enthusiastic answers.

Later, I had some communication with huawei experts and went to The Programming language lab of Huawei to share the “translation packaging tool chain in the front-end field” :

Translation packaging toolchain for the Front-end Domain (Part 1)

Front-end domain translation packaging tool chain (2) : Engineered closed loop

After I came back, I started to write Babel. I wrote the principles of a series of compilation techniques, such as type checking, compression obfuscating, JS interpreter, as well as automatic burying, automatic internationalization, automatic document generation and other applications in this small volume.

Although I didn’t express myself well in some places when I wrote the booklet for the first time, I got good feedback because the whole book was systematic and in-depth, and I had all the codes.

I did two live broadcasts on the Nuggets after the book was written:

Live from Babel into front-end Compilation principles

Compile from the front end to handwritten Babel

Later, I went to chat early to share technology, and I had some contact with Teacher Scott. I was also invited to share technology in the commercialization department of Byte (it should be found on the Byte Intranet).

At work, because I have studied Babel more deeply, it is easier to maintain the compiler, document generation tools and so on.

On the compilation side, Babel is just the beginning. There are more PostCss, Eslint, Typescript source code to come, and I have a plan to finish it in 3 years and write a book on front-end compilation:

About the dream, about my public number

In fact, it is a very happy thing to have a field of interest to continue to deepen, and I also enjoy it. However, too much of a good thing, the fall from the heights of the valley was only due to my dedication to the compilation technology.

One day, the person in charge of Huawei programming Language lab contacted me and asked me if I wanted to participate in a new programming language there. He said that he would accept my lack of experience in this field and compensate me for the loss of year-end bonus.

I was a little bit confused because it wasn’t front-end development, it was c++ and compiler development, but I thought it was a rare opportunity to get deeper into the compilation technology, and I could get deeper into what I was doing at ali, so I said yes.

At that time, I was still excited and thought I was going to do programming language, so I wrote an article about my understanding of programming language:

What is the nature of a programming language

Despite my leadership’s entreaty, I resigned, but huawei finally gave me an outsourcing position and drastically reduced my salary. I thought it was a terrible rip-off. I would have gone even on flat pay. A pay cut is insulting.

And I did a good job in the Architecture group at Autonavi. Going there was like giving up my future at Autonavi:

I left a large e-commerce company after one year

I gave up my year-end bonus for four months and my position in the architecture group to add a year of experience to my resume. To be honest, I was a bit devastated, and there were a lot of people laughing at me.

Fortunately, I reconciled myself to the fact that it was just my personality and my obsession with compilation was a matter of time.

I wrote about this on my wechat account and got a lot of encouragement:

Conversion failed, so continue with the front end

So I mustered my courage and continued to look for front-end work.

The official account has brought me a lot of opportunities, many internal promotion positions are also through this way, and there are at least two interviews directly asked my intention, without many technical interviews.

In the gap between looking for a job, I also rely on writing articles on public accounts to relieve their negative emotions, so the mentality is relatively stable, and even some articles are recognized by everyone, but also more happy.

I am very grateful to the readers of wechat who gave me encouragement, who gave me a light when I was in darkness.

Therefore, when I look for a job, the primary focus is actually the work intensity, I hope to have more time can be invested in writing public articles.

So I finally got a job at a foreign company (Coupang), where I could leave work at around 6 am and write articles for a few more hours at night, even though I had to move from Beijing to Shanghai.

The foreign company is engaged in business development, which involves live broadcasting, and also has access to the Java code at the back end. According to my learning concept of “focusing on workology”, I should learn some nex.js (MVC framework like Node.js of Spring), WebRTC (audio and video communication technology), Vue (front-end framework used here), so I will use these technologies to do a full stack project next.

Sum up my study view in four sentences

Work-based learning is always the most efficient way to learn, because what is learned has a real landing scene, but also because there are specific scenes can be more in-depth learning.

As a result, the planned compilation of the series will have to wait a little while to get work done first.

Here’s a rough list of things you’ll be doing next year, with some flags:

  • Nex.js + Vue full stack project (e-commerce + Live streaming/others)
  • WebRTC related technology in-depth
  • EsLint Booklets (Build series)
  • PostCss

In addition, is said before the public number more text direction:

2021 was a roller-coaster ride, but that’s behind us.

Review this year, the biggest harvest, in addition to the small volume, is the public number. I was registered in May, the name is called “Shenguang programming secrets”, just want to be able to output some of my views on technology through this platform, I hope to give you some inspiration. But I did not expect that later the public feedback I more, I can calm through the most difficult period of time this year, I can have the current work, and the public is inseparable. So in 2022, I will put more energy into the public account.

Branch lines (articles, pamphlets, technical growth)

First of all, the biggest technical output of the year was the Babel Tutorial volume, and both the case studies and the hand-written Babel improved me a lot.

Second, there are these technical articles I’ve written. Sort it out:

The front-end thought

Talk about what I’ve learned about front-end frameworks over the years

No code you’ve ever written has escaped two things: APIS and abstractions

Five levels of front-end work. Which level do you work on?

Computer theoretical basis of four front-end rendering technologies

Cross-platform solutions for the front-end, the nature of cross-end engines

Learning style

Sum up my study view in four sentences

I read the source code efficiently in five steps

Be persistent in learning skills but not too persistent

Chrome Devtools

Interviewer, I implemented a Chrome Devtools

How many of JS’s 6 ways to break points have you used?

Performance proves that rendering a web page is a macro task

You may not know what Chrome Devtools does

compile

Import to feel the power of the Babel plugin

TypeScript wants to go further? I recommend customizing the Compiler API for Transformer

The implementation principle of “coverage detection”, is that it?

Translation packaging tool Chain in the front-end domain (Part 1)

Front-end domain translation packaging tool chain (2) : Engineered closed loop

Of all the front-end compilation tools you’ve ever used, AST traversal is one of them

Quick start PostCSS plugin: Automatically convert PX to REM

CSS TreeShking principle revealed: handwritten PurgeCss

Typescript

Let’s do some exercises! Dive into TypeScript advanced types and type gymnastics

What is the nature of Typescript types

Why compiling typescript with Babel is a better choice

Based on Babel handwriting TS Type Checker

Here are my tips for reading Typescript source code

Node.js

Understand node.js’s FS module at its roots: Design a file system together

Completely master node.js four streams to solve the “back pressure” problem of burst buffer

Node.js has three layers of the Web framework

Squeezing computer performance: Asynchronous computing in browsers and Node.js (use of multiple threads)

The front end doesn’t understand process communication? Just read this one

The nature of node.js asynchronous APIS and Libuv

Understand the encoding of Node.js Buffer in depth

Debugger

Use VSCode to debug the JS code of a web page

Debugger techniques to make your NodeJS level explode

JavaScript Debugger principle revealed

Rendering technique

Computer theoretical basis of four front-end rendering technologies

How I built a house in a 3D world using Three.js

Using three. js and AudioContext to achieve 3D visualization of the music spectrum

Draw a 3D birthday cake with three.js and send it to him or her.

Visualization of Three. Js travel track from Beijing to Shanghai

This time, thoroughly understand GPU and CSS hardware acceleration

VSCode

Boy, I’ve sent you my treasure trove of VSCode plugin apis

Tips to make vscode write code more efficiently

Use VSCode to debug the JS code of a web page

Use vscode snippets and project members to improve development efficiency

Dude, let’s set off fireworks in vscode

Computer Fundamentals

What is the nature of a programming language

The secret to CPU implementation lies in bits you don’t think you need

Different memory management methods are very clever

writing

What is the core of a technical article? Talk about my thinking

What writing means to me

conclusion

I lost a lot this year (my job in Ali’s architecture group, my 4 months ‘year-end bonus) and gained a lot (Babel, my official account). I have experienced the highlight moments (early chat, byte, nuggets to do technology sharing) and the particularly difficult dark moments (Huawei outsourcing post, unemployment, loss of year-end bonus and Ali’s job). Fortunately, I have a public account to write something and communicate with everyone.

After that, I will not be so stupid. Interest is interest and work is work. I will not give up work or even the front end for a certain technology. Also won’t again credulous anyone’s promise and naked resignation.

On the technical side, if compilation is the key word in 2021, then full stack will be the key word in 2022 (because work-related stuff still comes first).

In 2021, thank you very much for your encouragement. In 2022, I will spend more time on articles and pamphlets. Let’s grow together. (Looking forward to the day of being a front-end mogul)