An overview of the

On February 2, IT was the first anniversary of my introduction to front-end. During this year, I was constantly groping for ways to learn. Here to record and share their daily life in contact with learning resources.

I graduated in 2018 and am now working in Nanjing. Although I majored in software engineering in university, I didn’t decide to take this path until my senior year (because I planned to do a similar job in sales before). I found my interest and gradually went into the front end. I started intensive study in July.

At present, I mainly study books (paper books), blog articles, a few paid videos, and practice websites. Share your learning methods and resources here.

Personal habits

I like to take notes while reading or studying. So far, I have written about ten books of notes. Each B5 is about 60 pages like this. So the speed of reading will be much slower. But the results will be better.

There are three reasons why you love taking notes:

  1. I think I’m stupid. I think a good memory is better than a bad pen.
  2. Easy to find their own knowledge. As long as you remember the directory structure.
  3. It is convenient for you to sort out the knowledge, sort out the knowledge, and also convenient for you to sort out the technology blog for knowledge search.

Of course, there are downsides to the note-taking habit. For example: technical update will lead to note the knowledge of technology behind or cause misunderstandings. In my opinion, the advantages outweigh the disadvantages.

Books recommended

JavaScript part

JavaScript advanced program design, this book I read twice, really thick. However, I attached great importance to the foundation. In fact, during the second time of careful reading, I found many details that I had not noticed before. So this good book is worth reading more than once, the bible at the front.

JavaScript language essence, very thin a book, but knowledge is very clear, the author is very clear pointed out the essence of JavaScript language and dross part, in addition, also explained some coding skills, very useful.

Writing Maintainable JavaScript, this book is not very thick, but it gives me a lot of coding tips on how to write readable, maintainable JavaScript code. In addition, the book is based on ES5. So, many tricks can be replaced with ES6 syntax. In this process, I summarized the difference between ES6 code and ES5 syntax, so we should be good at summing up.

ES6 standard entry, very complete very meticulous read again, and often turn over this book in the work. It is really ruan Yifeng teacher to make. I highly recommend this book. Of course, there are also electronic manuscripts. You can have a deep understanding of ES6 syntax and even extend it to ES6+.

JavaScript you don’t know, volume 1, 2, 3. These three books helped me to have a deeper understanding of JavaScript. This book dissects JavaSCript from the ground up, so it’s a slow read. We’ll have a chance to review these three books again. It is highly recommended

JavaScript ninja techniques, the author of the book’s aim is to make the readers of this book to become a real naruto, in my opinion, this book the biggest characteristic is the author of the maximum combines several of the most popular libraries, the author of that time, not now MVVM), teaches us how to write better code, or even a good library. In addition, the author describes cross-browser strategy a lot (but cross-browser is not really interesting), and the book uses JQ thinking a lot. (Because the author is the author of JQ)

A guide to JavaScript functional programming. The author temporarily read half of this book, a little confused, later added a lot of functional programming related knowledge, and when the relevant thinking and feeling mature, I will come back to this book. In addition, the author has used the idea of functional coding in coding, or very good, this is the process of thinking transformation, this process is very painful, slowly appreciate the benefits of functional programming to us after the opportunity to feel great.

The book high-performance JavaScript is currently being prepared for reading.

CSS books

CSS authoritative guide, very thorough analysis of the CSS2 properties, but, I read the second time, on which the properties of one attempt, found that a lot of knowledge points have actually been modified by the standard. Therefore, we should be careful not to blindly trust authority, but to practice by ourselves. In addition, I particularly like the clarity with which the author lists the support and application of attributes. Unfortunately, there is no description of CSS3

CSS Revealed, I was halfway through the book, and I kept saying how good I was at it, and how it hurt my confidence. The author is one of the canonical members of the CSS organization, and those tips are enough to make us stand out. This book, reading once is obviously not enough, I think it is important to understand the ideas. Instead of using CSS as a tool. The only drawback is that the book is a bit expensive. Full color printing 200 + pages, pricing is 90 +. (This is the highest book readers have ever bought.)

CSS world is the work of zhang Xinxu, a well-known blogger in China, but I haven’t read it yet. Later I will take time to read, now I will never have enough time, a bit of the feeling of learning not to move.

Knowledge of network, computer, algorithm

It’s only about 200 pages. It took me two days over the weekend to read it. It’s very clear and easy to read. I also like a lot of illustrations.

I haven’t read it yet, but I’m going to read it because I’m going to illustrate HTTP.

The definitive guide to HTTP, this book is too thick, fully more than 600 pages, now I have read more than 300 pages, relatively slow reading, and REMEMBER a lot of notes. This is the first time for me to read HTTP so deeply. Although the book is very thick, it is not too obscure to read, and the language is simple and easy to understand. Let’s just say the translator is amazing.

Introduction to Computer Science, as the author puts it, aims to educate people about computers who are new to them. But I think it’s bullshit. The book is very difficult to read and requires a lot of computer knowledge to understand, otherwise it is impossible to read at all. As I read, I read and did the exercises. Feel that some knowledge of the computer to do a good reserve, such as: computer storage principle, the integer to complement the form of storage, floating point number in the form of excess code storage, why not the form of the original code storage, what are the benefits of doing so? So, this book is well worth reading. Halfway through, I read something about HTTP, so I went straight to the HTTP guru’s guide. Behind the algorithm, operating system chapter, have prepared their own corresponding books.

Deep understanding of computer systems, a very thick book, not read. I will spare some time to read it later. Now I have a full schedule.

TCP/IP protocol (Volume 1), this book is also very thick, but I always feel that MY understanding of TCP/IP protocol is not deep enough, I will read this book when I have time.

JavaSCript description of data structures and Algorithms, this book serves only as an appetizer for me to delve into algorithms and data structures, and it’s just under 200 pages. I haven’t read it yet.

Introduction to Algorithms, the thickest book, about 1000 pages by eye. To my horror, my colleague told me that the book was rusty, but I still bought it myself. With a deeper understanding of HTTP and TCP, you’ll focus on data structures and algorithms.

Knowledge of the browser kernel.

I recently bought a book called Inside WebKit Technology, which is used and out of print. The most expensive book I’ve ever bought, more than 200. I turned over part of it and liked it very much. How can a front end not get a close-up look at the tool browser you’re dealing with all day? Before about the understanding of the principle of rendering of a browser, but some of the tutorial does not meet their expectations and understanding of the book, their principle and some of them practice have some own opinions, later will be in the form of blog, with 3 or 4 to length to explain it in detail, from the input the URL to the page to render, what has happened.

Learning resources

Now I am in contact with many Websites in English, but my English is too poor. I can read English articles at a tortoise speed at most, but I can’t understand videos. Therefore, I am ready to practice English hard. Here is my collection of technical sites or blogs to recommend out.

Learning website

These resources are gradually collected in my daily study, which is of great help to my study. These are just used in the process of learning, and will always be used in the future.

Front End Basics

  1. Frontend Master is my first choice. Just seeing the lecturers in it, I am so interested in it. However, this video is charged, and the fee is not cheap. What if I can’t afford it? Look at the following

  2. Egghead offers free videos, a great lineup of instructors, and well-known authors. For example: Dan Abramov, the author of Redux, so take it if you have some basic English.

  3. Moocs network in some free courses, and the quality of paid courses is also quite high, the author had spent 699 yuan on the moOCs online Vue. Js source comprehensive in-depth analysis, so that their understanding of vue.js more in-depth.

  4. Vue technology insider, the website is open source, is also the Vue author recommended source analysis of the first choice, the author analysis is very hierarchical, their own source code to see this tutorial, can be very methodical interpretation of the source code, and the author taught me a lot of reading source code skills.

  5. Uncle Tom’s in-depth Understanding of JavaScript series, the first technical blog I came into contact with, has a more in-depth analysis of JavaScript.

  6. 15 JavaScript Utility Libraries you should Know about in 2018, with many useful JavaScript libraries recommended, such as: Ramda, which I love, and 30 Seconds of Code, where I learned a lot about how to write functions, are very useful. Also through this series to further the use of some JavaScript advanced functions such as reduce, filter and so on. Although there is a Chinese translation, it is recommended to learn from Github, because the Chinese translation will not be updated with the source code. In addition, there are other series such as CSS, React are quite good.

  7. Codewar, an off-site exercise site, is comprehensive in language and task. May need to climb over the wall. It’s your choice.

  8. Leetcode, the site’s algorithm-focused practice site. You have your choice.

  9. Img tags, unknown things, this article is about some hidden knowledge of IMG tags, through reading this article, you can have a clearer understanding of some knowledge of IMG tags.

Network knowledge

  1. Che Xiaopang technology blog, this is about the network of technology blog, the network of some phenomena to do a more transparent explanation, I prefer.

  2. Che Xiaopang, this is a series of articles, introducing the knowledge related to the network. If you want to know more, check it out.

  3. This is about DNS query process, with illustrations and text to describe, you can have a general understanding of DNS query process.

  4. Howdns. works, fully illustrated to explain howdns works, very graphic.

Functional programming

  1. Functional light JavaScript provides a thorough explanation of lightweight functional programming. The Original English text, which is not very good English as I am, is not very hard to read. In the process of reading, I have a deeper insight into the control of asynchronous data flow, pipeline data flow, currying, anti-currying, partial function application, point-free than before.

  2. Functional programming tutorial, this electronic tutorial, is a good functional programming tutorial

  3. A series of articles on category theory, this is a series of articles, some of the articles are a little hard to follow, but it gives you a better understanding of the underlying abstractions of functions.

  4. I am interested in learning Haskell. In order to better learn functional programming, I decided to contact Haskell. This tutorial is from simple to deep. This road does not know whether slant a bit, however, oneself can use other time to study. Just to make sense of it.

  5. Visual learning rx.js, in the form of animation to show rx.js, no longer need so abstract learning rx.js, in addition, there are redux, etc., there are corresponding and other displays.

Knowledge of browsers

  1. WebKit technology insider author’s blog, a very in-depth explanation of the browser kernel on the relevant knowledge.

  2. Chorme browser comprehensive tutorial, system description of Chrome browser information, can be more comprehensive understanding of Chrome browser, the most powerful is the use of all the tools introduced.

The react related

React resources: The transition from the VUE stack to React was smooth, as you gained some insight into the ideas behind the current popular framework. So, it was a smooth transition, in the spirit of not only learning how to use it, but understanding the idea behind it. This maximizes the power of the framework.

  1. React website. I think the best way to learn react is to use first-hand resources. It should be read closely, not used as a reference site. React hooks, for example. I just read it on the latest official website. It’s easy to read in English.

  2. This is the best tutorial I’ve ever learned about React Redux. It doesn’t teach you how to use redux. It tells you why Redux has the API, what it would be like without it, and how you can implement it. By reading through this tutorial, I have implemented a simple version of Redux and React-Redux myself, but of course the idea behind it is most important. It’s important to understand the nature of the redux and React-Redux libraries by looking at their official implementations.

  3. React-router is the V4 version that I learned directly. This tutorial is in English, but most of the code is there, so you can take your time to think about it.

  4. Zhihu written by Lv Siyuan, Zhang Lili, tang Yi and other six authors is not popular now, but there are still many high-quality articles. In the process of learning React, I will inevitably encounter a lot of confusion, such as: How efficient is the optimization of PureComponent, whether component state and rendering should be separated, how to avoid meaningless rendering more efficiently, and whether components should be split more fine-grained. These should be in practice to find the answer, and then solve the confusion.

  5. React In Depth, justjavac’s column gives you a deep understanding of some ideas In React. In the same words, ideas are more important than code. Good ideas are worth learning from.

  6. React, a classic column by Morgan.

  7. The preacher of React Fiber in China, ONLY after reading many of his articles did I have the idea of learning and good guidance.

other

  1. Ruan yifeng teacher’s blog, I will not list, we should often go to see.

  2. There are also many articles on the Nuggets, we can pay attention to the article I like, I think the quality is very good.

conclusion

What I want to say here is that practice should coexist with theory, instead of reading blindly, my purpose is to apply what we learn, we should be good at thinking and summarizing. We need to think about how to apply the knowledge learned in practical projects more effectively. The author usually reads books first and then practices. Mature methods will be applied in practical projects. If you have a better way, welcome to exchange and learn.

Of course, there are many ways of learning. The author will update it irregularly, and the update may not be synchronized to nuggets. I will update it on my GitHub Pages. If there are good books or learning methods, please recommend them to me. Thank you very much.

As for the future plan, the author will put more emphasis on React, HTTP and algorithm, and at the same time, start to learn some front-end ecological tools in depth, such as Node and Webpack.