What is this article

This is my periodic summary. I write this article for two purposes:

1. Self-review is my summary of my past transcoding learning
2. Give back to the community, because I got a lot of help from the community when I was studying

If MY experience is similar to yours and I can help you, that’s great.

• Note: because there is a self-review part, so if the following may be some of the same things, I can skip, that is because I simply want to review the scene and mentality at that time

I. Introduction to my background

My undergraduate major is Energy and Power Engineering, and my postgraduate major is agriculture and biological engineering. Now I am about to finish my third semester of postgraduate study. During my undergraduate study, I participated in relevant competitions of our major with my teacher, and also did scientific research, using Matlab to do simulation. If THE C language I learned during my undergraduate study is included, they are the only two things related to code writing in my undergraduate study.

Since I don’t have much contact with Computer Science (CS), why did I switch to CS?

Although MY direction is engineering, the engineering value of this direction is not particularly high. Besides, I have always had a fanatical longing for writing code. At that time, I applied to the graduate school, whose CS courses were good, and THERE was no major limit on my courses selection, so I decided to switch to CS.

So I took a CS course, data mining, in my first semester. In the second semester, I took two courses, artificial intelligence and data structure. I was at the beginning of the second semester.

Wait a minute, you said you had zero foundation, you know you’ve learned data structures? Clickbait, report it. Ha ha, no, I learned front-end while learning data structure, front-end started with zero foundation. Good, I know, don’t say me, everyone front end is the 😝 that begins to learn from zero

Anyway, this is my background. Then I began to learn front-end in the second half of 19th year. Although I was still taking classes during this period, I was almost part-time when I got in touch with front-end. Next, I will elaborate on my learning experience, interview experience and some of my learning ideas.

OK, let’s talk about my interview experience

Ii. My interview experience with Amoy Department

This chapter, I am more partial record, so there will be some running list, I have folded it, you can skip it if you don’t want to read it

Before the interview tao department, have seen a lot of face, but in addition to one side of the time was asked a lot of basic knowledge, the back was asked very little, so this face does not have universality. (Update 4.30: My internship offer is not full time.)

The interview process consisted of 4 rounds of technical interviews and 1 round of HR interviews. Since there was no record at that time, I could only pick the questions I still remembered

One side

One side, as usual, looks at the basics, classic topics like browser caching, closure in one sentence, web optimization techniques and so on

Second interview

And then, the second interview I remember the most, totally surprised me, was struck by dimension reduction. The interviewer was a P8 mogul (don’t bosses play by the rules?)

Click the button below to expand the content 👇Copy the code

Dot me dot me dot me dot me 🚀

• How do you go from one point to yoursKnowledge of the boundary
  • The interviewer says,Since you've studied data structures, tell me which data structures you find most interesting
    • The first question I directly meng, is not the regular JS CSS and computer network to a set of it. But for half a second, my mind started frantically trying to figure out what data structures I could bring up. I thought of it firstmap“The second thoughttreeI wanted to talk about trees, but I thought I might dig a hole for myself, because there are so many places in the computer world that use trees, such as DOM tree, AST, B/B+ tree, K-D tree, red-black tree… Thought of here, I suddenly found that I, for some trees are not very familiar with, if the question asked to compile principle and database direction, it is not GG, so in order to avoid digging holes for their own
  • And I said,I think the picture is optimal
  • The interviewer says,Why is the picture interesting
  • I said,Because it's the most complex data structure(Later on, this is digging a hole for yourself.)
  • The interviewer says,Can you tell me more about it
  • I said,I took A course in artificial intelligence, where I learned A path finding algorithm, and one of the algorithms was called A Star algorithm (A*), BlablablaFortunately, last semester just on, have not forgotten
  • And the interviewer says,Where do you think Taobao can use this data structure(I’m getting a little carried away by this point)
  • I thought about it for a moment and said,Recommendation systems, because there is a connection between users and goods, and there is a connection between goods(I made that up, I had no idea)
  • Tell me about recommendation algorithms(All right, let’s go.)
  • I don't know, no, my A.I. classes were mostly about things like pathfinding, natural language processing, artificial neural networks
  • Why don't you tell me how artificial neural networks work
  • Then I blabla. Since the assignment is done by calling the PyTorch library, I won’t touch on the complex algorithms inside, so I’ll just cover the basics.
  • Well, by the way, you were talking about natural language processing, you know Chinese is not like English, semantic analysis is very complicated, you tell me what you understand
  • Then I vaguely remember reading a tweet about how Google Translate’s Chinese accuracy has been dramatically improved and how it uses neural networks/deep learning. (I really can’t go on at this point because my class is very introductory and doesn’t delve into it.)
• This is just part of the conversation
  • Browser and Node event loops are different.
  • If you design, how to design the JS event loop;
  • About your views on Flutter development;
  • Has the performance of different frames been compared?
  • React Native is implemented;
• I felt why I was so vegetables ah, almost a question can not answer, these a series of questions, directly I asked meng, felt the blow of dimension reduction. Of course, I managed to answer all the questions.

Three sides, four sides, HR side

Next the basic knowledge that a few faces ask is not very much, have deep impression with respect to the following 2, as to why impression is deep, hey hey, I won’t say 😆

• ES6 lets have block-level scope. How does ES5 implement block-level scope
• How does Chrome detect a memory leak and locate which line
• In the end, HR simply chatted and asked if you would like to come to Hangzhou. Don’t talk nonsense and say that you would like to come very much. There are paradise on earth and Suzhou and Hangzhou on earth

To summarize

• I felt a lot of pressure on my second face. Faced with a senior expert who had been working on the front end for 10 years, and whose previous experience was of no use at all, I wondered if I had learned the front end for nothing.
  • But if you look back, why don’t you have professors who haven’t been working in their profession for a decade or two
  • On second thought, there are two reasons
    • One is that you haven’t been interviewed by a professor for a job, and if he comes up with something real and wants to test you, you’ll be asked blank B
    • Second, psychological factors, should not feel that the front end is very mysterious, nor feel that the front end is easy, stay in awe and humility, but also not afraid of @

How did I learn the front end

In this section, I reviewed and recorded my learning route according to the timeline for your reference

Front-end learning timeline combing

I started learning The Complete JavaScript Course 2020: Build Real Projects when I bought an online Course of Udemy! (It wasn’t 2020, it was 2019. I thought it was 2019, but it changes its name every year!) , followed this network course to learn the JS foundation, and finally made a search menu page. My interest in the front end was ignited during this process. In the process, I also took notes while writing. Now it seems that the form is more than the benefit. I wrote like a running account, of course, I also enjoyed it at that time.

But then I made the mistake of buying a front-end course on Coursera.

You might say, what? Isn’t Coursera taught by university professors who also teach the front end? Yes, there is, but that’s where I went wrong.

I’ve taken a Coursera course on data structures before, and I was impressed by it, but the front end is very close to the industry, and the courses taught by university professors are obviously not as good as those taught by front-line practitioners, unless the teacher delves into some niche areas that can be delved into, such as human-computer interaction. However, the teacher taught basic Web development, so I learned Bootstrap from him and then learned React. In the middle of React course, I really couldn’t understand what he was talking about, so I stopped. So because of that, I probably didn’t learn the front end for more than 10 days.

Then I found that many free videos on YouTube are of very high quality, such as the channels Coding Tech and freeCodeCamp.org. There should also be Chinese translations for you to learn.

Besides, since I stopped taking that teacher’s class, I became much more relaxed and began to learn React in a different way. First, I followed the tutorial of the React official document with a small game. Then, I wrote my own homepage using React and deployed it to GitHub. Creating something is a very important way for me to keep learning.

After that, you don’t have to follow a tutorial, it’s where you don’t learn, you have a problem, you search, you solve the problem, you write it down, you have a problem, you start the cycle. It’s like this learning route.

At the same time, I also read some blogs, column articles, other people’s learning experience, and established my own knowledge system. Later, the spring recruitment of various enterprises began, I began to improve my knowledge system through the interview (it is really effective, this is the same as the high school model examination review, rather than reading the textbook review is the same truth)

Because I don’t like to use computers to read books, SO in the whole process, if there is any problem, I directly use the search engine to learn.

To summarize my learning route

Net lesson introduction --> wrote the first project --> kindle the enthusiasm --> continue the class --> read blogs, columns --> establish a system --> face to face through programming --> perfect knowledge systemCopy the code

I still have a lot of shortcomings. For example, compared with my classmates, I have not learned the principle of compiler, computer structure and operating system. These things I put in my future study plan.

Iv. Own experience (dry goods stage)

Based on my own situation, I recommend some articles and people who have influenced me. It can also be understood that if I give some suggestions to myself when I was getting started, I will give them to myself for your reference

1. Don’t watch Coursera front-end courses

Ha ha, shake a clever, (escape

2. Be sure to read quality articles

Only by reading the best quality articles can you learn the best content. The knowledge itself is not high or low, but it is easy to absorb after finishing and digestion. This is the added value brought by good articles.

There are a lot of good articles on the Nuggets

1. The process from entering the URL to loading the page? How to improve their front-end knowledge system by a problem! “, the author is the front-end boss of Nail Nail, write very detailed, covering most knowledge points, comb the whole system, I first recommend this article. As I said, especially for novices, it is not recommended to watch it all at once, but to review it frequently, so there is always something new to learn (visit Hailan House twice a year, and each time you learn something new?).

2. (1.6W word) browser soul ask, how many can you catch? , the author is god three big man, often mixed digging gold students should not be unfamiliar, write the article is simple, is my generation to learn the example, often see the title will not help but point in. This article works well in combination with the last one.

3. I would like to highlight this article. The author should be working in Ant Financial now. He introduced in detail the process of his career transition from a zero-based liberal arts student to a front end, and recommended many industry masters and learning methods of functional programming. Although I am also learning, I feel that it will take at least half a year of off-duty study to finish what he recommended. What this article really brings to me is a thinking mode and vision, which makes me know that I can understand the front end with a broader vision, which is very rare for a newcomer.

This list is not complete. There are many similar articles. The advantage of such articles is that you can systematically comb through the knowledge points. The authors are almost at the same time as you, and the knowledge they have filtered is what you need most at the moment.

Finally, I think reading the article to stop, can temporarily not in-depth, like Chrome such a behemoth, V8 engine is enough to drink a pot, and many mechanisms are changing at any time, can not recite the changes of each version of it, I think it is good for beginners to have a general understanding.

3. How do you distinguish high-quality articles

There are two methods, find primary data, or high quality paraphrase data, great articles

1. Find primary sources
2. Find the article written by Daniel

Take, for example, the V8 article

• [Huhu] the element types and performance optimization of JavaScript in V8. This article is from an interview when I was asked how to implement Array in V8. Later I searched this question and found this article. After reading it, I felt that this article was the most understandable one I had ever seen. It was progressive, with theories and examples. At that time, I thought it was written by myself, but on closer inspection, I found it was an article from the translated official website. (No offense to Deno, but Deno is also a big bull and a core contributor to Deno.)
• ‘Elements kinds’ in V8, following the link he gave me, I found the original address on V8’s official website. If, the answer Lord did not translate this article, that I can not see this article? Yes, I certainly would not have been able to retrieve such a good article. So a lot of times, primary data can give you more power. Evan You is much more active than You are as a righty.

However, reading primary materials, English is the biggest problem, my English is actually very poor.

How bad can it be? Well, I never met anyone who had a lower TOEFL score than me (and I would never say what my score was)

But I am also forcing myself to read English materials, as long as I can reach level 4 and 6, I won’t have a big problem reading technical articles. You can use translation software if you don’t know the words and sentences.

I think the most difficult part is to start reading, because I subconsciously know that I must read Chinese faster than English, my eyes are sensitive to Chinese, a glance, can instantly catch the keywords on the page.

Because of this, when I am writing code in a high spirit (or when the code requires a lot of work) and I need to look up information, I unconsciously use Chinese instead of English, because I don’t want to interrupt my coding thinking to study English.

So, the best way is to find a special time and start reading technical articles a little bit. When you are confident that you can read English material much less efficiently than Chinese, then you are on the right track. Now I don’t resist English material at all

(Not just in English, by the way. If you feel that your current job is so stressful that you no longer have time to improve your skills, it’s time to consider other options, because manual labor is so fungible.)

4. The benefits of high-quality articles

Good writing allows you to quickly digest the content. Two examples:

1. closure: Take a series of high-quality posts for example
2. Prototype chainTo:BYVoidTake the big guy’s sketch

Example 1: Understanding closures

Definition of closure

Like most modern programming languages, JavaScript uses lexical scoping. This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked. In order to implement lexical scoping, the internal state of a JavaScript function object must in- clude not only the code of the function but also a reference to the current scope chain. (Before reading the rest of this section, You may want to review the material on variable scope and the scope chain in §3.10 and §3.10.3.) This combination of a Function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a Closure in the computer science literature. (This is an old term that refers to the fact that the function’s variables Have bindings in the scope chain and that therefore the function is “closed over” its variables.)

Technically, all JavaScript functions are closures: they are objects, and they have a scope chain associated with them. Most functions are invoked using the same scope chain that was in effect when the function was defined, And it doesn’t really matter that there is a closure involved. Closures become interesting when they are invoked under a different scope chain than the one that was in effect when they were defined. This happens most commonly when a nested function object is returned from the function within which it was defined. There are a number of powerful programming techniques that involve this kind of nested function closures, and their use has become relatively common in JavaScript programming. Closures may seem confusing when you first en- counter them, but it is important that you understand them well enough to use them comfortably.

JavaScript, The Definitive Guide

Do not want to see English, Chinese translation can see rccoder blog JavaScript closure related

With this definition, turn to Hu Hu of Ba’s blog Hu Hu of Ba’s blog writing place, see his in-depth series 2-8

Finally, if you understand the difference between the following five examples, then the concept of closures is mastered

// ====== Example 1 ======
for (var i = 0; i < 10; i++) {
  setTimeout (function () {
    console.log (i); 
  }, 1000);
}
// 10 10 10....


// ====== Example 2 ======
for (var i = 0; i < 10; i++) {
  (function (e) {
    setTimeout (function () {
      console.log (e);
    }, 1000);
  })(i);
}
// 1 2 3 4 5 6 7....


// ====== Example 3 ======
for (var i = 0; i < 10; i++) {
    setTimeout (function (i) {
        console.log (i); 
    }, 1000);
}
// undefined undefined undefined ... 


// ====== Example 4 ======
var x = 'global'
function test1() {
    console.log(x)
}
function test2() {
    x = 'local'
    test1()
}
test2()
// local


// ====== Example 5 ======
var x = 'global'
function test1() {
    console.log(x)
}
function test2() {
    var x = 'local'
    test1()
}
test2()
// global
Copy the code

Finally, for specific application, you can refer to the zhihu column by Morgan cheng, React useEffect traps. If you understand closures, you will understand this article

Example 2: Understanding the prototype chain

BYVoid JavaScript object and prototype, he used a very simple example + a diagram let me quickly understand what is a prototype chain, and I saw the article before, hundreds of words, I did not understand. The image below is from the original post

The Javascript language is actually a hybrid of the two language styles —- (simplified) functional programming + (simplified) object-oriented programming

Javascript were born

If you are interested, you can also read ruan Yifeng teacher wrote about the origin of JavaScript JavaScript birth notes, understand why JS has a prototype chain, but also support functions as first-class citizens

5. Recommended blogs

Let me tell you some of the blogs I read in my daily life.

1. Hu Yu’s blog – GitHub, Hu Yui’s blog, his deep JS series, I benefited a lot from it
2. Ruan Yifeng network log, Ruan Yifeng big blog, just mentioned, this needless to say, the depth and breadth of knowledge
3. Of course I’m bullshitting. I didn’t just write the name of the blog, it’s called that. His writing is more theoretical than applied, so I don’t understand it most of the time. In addition, there are different opinions about him on Zhihu, but it is not my turn for the time being. My words are finished.
4. Coolshell, Chen Hao, known online as Left Ear Mouse, is a software developer with 20 years of experience. (There are few people who have been doing technology for 20 years. The latest blog post is on April 4, 2020.)
5. GitHub, the blog of the great god of jade, has been the destination and value of the front end since 8 years ago. Sometimes, it is a wonderful thing to have a look at the previous experience of the industry by the predecessors
6. Zhang yunlong’s blog, GitHub, is also a big deal, but like Yu Bo, it has not been updated
7. .

There are many, many more, they are just part of a larger community, countless open source projects contribute to the prosperity of the entire ecosystem, this open source spirit of sharing is an important point that attracts me in the field of computing.

5. My own questions and thoughts

The last part is also a summary of myself and some things I have figured out during this time

1. Why change your major

   As mentioned above, I like the open source atmosphere here. For example, in many fields, people build walls on the sharing of knowledge and eat with the family code all their life. Martial arts of students who are not from their own school cannot be transmitted. It is difficult for ordinary people to obtain information. But in the field of computer, any ordinary person can access most of the information, that is a mobile society, I as an ordinary person, of course, support the latter

2. Study pressure is very big how to deal with

   In the first semester of my study, I took data mining, and I didn’t even know how to use Python before the class. I asked my senior for my first assignment, and he wrote for 4 or 5 hours a night, while I wrote for about 5 days and every day. That’s a really big difference.

   There was no old man hidden in the ring, no tail beast in the belly, no father hunter named Gold, no buff rookie was thrown solo in front of tai Lung, and his teammates were either higher in level than me or had red and blue buffs. It would be strange if there were no Peer Perssure for such a graduate start. But luckily, I found my spot.

   How do I look at Peer Pressure now?

   At any level, our pressure is on the students with excellent grades, learning god; Learning the pressure of god is Daniel; The industry’s heavyweights are under pressure from industry leaders such as goesing, the father of Java, Bjarne Stroustrup, the father of C++, Linus, who released the source code for the Linux kernel at the age of 22 (better than them, if they compare themselves to historical giants such as feynman, Einstein, Newton, They have to live under pressure all their lives. So simple is good

3. Why blog

   I used to keep writing blogs, but now I look back and find that most of them are junk posts, which have no value to share or extract key information for deep thinking. The only benefit is to make my memory deeper and typing faster. So my plan for the future is to write as high a quality blog post as possible, with at least one of the following

   1. Share value
   2. It’s worth looking back
   3. Finally, pay attention to readability. What is important is not the expression, but the content of the expression. If people can’t read, how to deliver the content

Sixth, the end

Finally, I would like to end with a quote from Han Han. Although the original meaning may not be this, I think it is very appropriate to describe the spirit of open source.

It’s just that they knocked me through every high wall I could possibly hit, fell down every gully I could possibly fall into, and then told me that this is the right way, keep going

They come first, I pick up the run too fast for them falling out of his pocket CARDS, I always run in they cut the flow of air, but I didn’t feel the wind resistance decreased, but they hit for me I may have to hit every wall with high walls, fall for every I may have to fall into the ravine, and then tell me, yes, this road to move on. But you’ve already used one chance to help. Goodbye friend. — Han Han, 1998 I Want to Talk to the World

Afterword.

• I would have preferred not to write nonsense, but some of it made me more rigorous, but it didn’t make me more interesting to the audience or professional. Can be… However, it was too difficult, or to write more than 6000 words
• I think the articles written by the half-Buddha fairy teacher are concise + hardcore + interesting (SAO) and worth my learning.
• After the