It’s been two years since I started front-end work. I will share my experience during this period, hoping that it can be helpful to some students. This is the motivation of writing, but also a summary to compensate myself. Of course, these are all personal opinions, don’t spray.

Entering or about to enter the workforce

apply for a job

Of course, the focus is on how to get into a company in the first place. If students are not well qualified (for example, their major is not related to computer, they have no work experience, and their front-end knowledge comes from training institutions), they should avoid impetuousness. Most enterprises value the following two points for inexperienced freshmen :1. Moral character, 2. learning attitude; Second is to look at the technical basis, why? It’s simple. Would you rather work with someone who has worked for years but is lazy, self-motivated or difficult to get along with, or someone who is open-minded and has a good learning attitude but is not very good at technology? Therefore, these students in the preparation for the job is not only a solid foundation, more importantly, in the interview to show their self-motivated, strong learning ability, to prepare a technical blog to write technical summary and experience, Github put some usual practice small page can be, and attach the address in the resume; Also, be humble and honest, and don’t go overboard on your resume. There is not much to say about the interview experience online.

Here are some points to pay attention to when getting along with colleagues. If you are not interested, you can skip to the next section.

appellation

The biggest change for fresh graduates is the environment. It is inevitable that they will feel a little uneasy when they walk from the school where they talk about their youth to the seemingly solemn office building. The first is how you address your colleagues. Colleagues at the same level are usually called by their nicknames or first names (better if they have English names), even your mentors, and even your colleagues who are several years older than you. In this way, others will not be too embarrassed, and when chatting, they can talk to each other even. You’ll get used to the relationship. The best thing you can do for a leader is to follow his or her first name.

Ask for leave

When asking for leave, the reason should be simple and natural, not with naughty and childish in school. For example, a friend said he asked for leave because “there were too many mosquitoes last night ~”, and then was disciplined by the leadership. In this case, you can say “I didn’t sleep well last night and I’m not feeling well”. It’s human nature and the leader will understand. Leave of course, the frequency can not be too much, is really need to ask when also want bold to ask, after all, leave buckle is your own wages, of course, is to the company without what loss of the case you should be justified.

Party building

In addition, if the department organizes groups or small groups to go to dinner spontaneously, it is best to go as soon as possible, because you rarely have the opportunity to communicate with some people during working hours, and some colleagues may not even recognize the name of a colleague in the department after two months.

Constantly adjust your perception of your position

This topic in the early stage is the awareness of the web front-end position, said the early stage is because you can’t do this for a lifetime.

concept

Web is commonly said to be a web page, the main body is composed of webpage three swordsmen HTML + JS + CSS and various media and HTTP protocol technology application. The front end is the UI and the interactive part of an app. Some people also call ios and Android front-end or client development. Of course, the front end generally refers to the Web front end.

Technology stack

As society advances, people’s needs and requirements for a certain position change constantly. In recent years, because of the low learning threshold of the front end and the higher salary of programmers, the people who are engaged in and want to be engaged in the front end of the Web have soared, and the degree of competition in technical posts and even all posts is among the best. The past with Dreamweaver to write pages is history, only with “HTML+CSS+JS” can mix the front end of the day is slowly passing. The explosive development of the front end in recent years has forced us to be ready to accept new technologies.

In no particular order, let’s review the techniques to master or understand:

  1. HTML5 (needless to say, definitely need to master)
  2. JQuery /Zepto
  3. **MV* Frame ** (MVVM/MVC/MVPFramework, master a, recommendVueThe second isReact)
  4. Build tools(available from theGulpStart with it and learn about itwebpack)
  5. CSS3 (Some common new selectors, pseudo-class pseudo-element, animation, media query, Flex layout, etc.)
  6. CSS preprocessing toolMaster one, recommendLessAnd so onsass.StylusEtc.)
  7. Template engine (Master one, Mustache, HandlebarsJS, Jade, Ejs, etc.);
  8. HTTP （Get.PostThe difference between;HTTP headersThe role of common fields in request headers and response headers; HTTP works in general; Meanings of common status codes)
  9. Node.js & npm(Proper use of NPM resources,node.jsCan best useexpress.koaWait to play)
  10. PhantomJS (Test, crawler, recommended library: Casperjs)
  11. ES6(ES2015, some new features new objects, such as importantPromise)
  12. React Native/Weex (Cross-platform development)
  13. Linux(Familiar with common Linux operations, Windows students can nextcgywin )
  14. The editor(recommendedVScodeSecondly,sublime.Atom.webstorm, can install more useful and fun plug-ins)
  15. Version management tool （GitMust master, second isSvn)
  16. Js based(This should not be dropped at any stage, including rightObjects and prototypes.inheritance.scopeWait for the understanding of knowledge point, can seeJs advanced programming)

Front-end or back-end

Before I saw some students Shouting ** “the future front-end will replace the back end” ** such meaningless and self-damaging remarks, largely because node.js makes it no longer a dream to run JS on the server, we can use JS to write back-end programs. However, since it is written on the back end, it belongs to the back end. We can think of it as: browser JS is written on the front end, while Node.js is written on the server side.

Besides, there’s no point in talking about the difference between front end and back end. The boss wants you to make things. Not only node.js can write back ends in the world, and not all applications can use or use Node.js to write servers. So once we’ve mastered Node.js enough and applied it to our projects, we can call ourselves Web development, and there’s no front and back end, which is all about solving people’s problems.

Learning style

I get sleepy when I’m reading, so I read when I can’t sleep…

Later, I found that this is not the most suitable way for me to learn. I prefer to go to some communities to read good articles, because these are other people’s experience and knowledge compressed and displayed, which is a way to quickly absorb knowledge. But it is also because netizens’ articles are of different levels, lack authority, and some are even misleading. In addition, the length of the article is limited, some knowledge points are not detailed enough, so that our understanding is not thorough and comprehensive. So books still need to be read, and they complement other ways of learning. And to find their own way of learning.

Here are some of the sites I recommend (there are many more, but only a few that I think are the best) :

  • The front-end stew
  • Jane book front-end related topics
  • CNode community
  • Ruan Yifeng’s network log

You can also search for things you are interested in and fill water on Stack Overflow,Github, Zhihu and other sites, which are all rare sky for communication. It’s best to take the time to write as well, because what you think you know will get lost when people ask you about it or ask you to write it out, so writing it out makes it clearer to yourself.

Some students must have questions about how to learn a specific framework or tool. The answer is to look at their official documentation. Some of the more accessible ones have easy-to-understand tutorials (vue.js is great and has a Chinese version, for example) and their apis are the most detailed and authoritative. Of course, if they still can’t use it after reading the document, even if helloWorld has not written it, it means that they have some obstacles in reading the document, maybe their English is not good, or the official writing is not detailed and popular enough (of course, I can’t blame them, being open source is already a heart). At this time to turn to the vast number of Internet users, Google to see how others use, in short, for the new framework of learning the best or non-stop practice and access to data iteration.

Is the era of being part of jQuery over

In this video, we’re going to talk about this topic in isolation.

In recent years, excellent MVC/MVVM frameworks have emerged, slowly presenting a three-way situation: Angular,React, and Vue. This is a huge step forward for JS developers. Although they do not exist in direct opposition to jQuery, they are rarely used with jQuery due to user bandwidth and code maintenance, and most of the time we can use MVVM to achieve what jQuery’s DOM-based programming method is trying to do. Which means, “It’s either you or me.” Here’s a simple example of how to display an element using jQuery:

$("#el").show();
Copy the code

With MVVM it looks like this:

<div xx-show="isShow"></div>
Copy the code
xx.isShow = true;
Copy the code

But if you only need to deal with simple problems like “display elements”, it doesn’t matter how you use jQuery or MVVM. When we are faced with the need to frequently insert a large section of HTML containing js variables:

//jQuery var html= '<div class="panel panel-success">'+ '<div class="panel-heading text-center">'+ '<h3 role="button" data-toggle="collapse"aria-controls="content-banners-1" class="panel-title">{{title}}</h3>'+ '</div>'+ '<div class="collapse in" id="content-banners-1">'+ '<div class="panel-body">'+ '<div class="row">'+ '{{Content}}'+ '</div>'+ '<input type="hidden" id="upload-url">'+ '</div>'+ '</div>'+ '</div>'; $('#parent').html(HTML);Copy the code

By comparison:

//MVVM <! -- template --> <div class="panel panel-success" xx-if="isShow"> ... <div class="panel-title">{{title}} </div> ... <div class="row">{{content}}</div> ... //javascript xx.title= 'title'; xx.content= 'hello,world! '; xx.isShow = true;Copy the code

Simplicity and readability pale in comparison. And the more complex the DOM manipulation is, the advantages of MVVM can be demonstrated. In addition, the convenience of bidirectional binding is highlighted when dealing with user input and so on.

While we are very supportive of using the MVVM framework, even then we cannot conclude that jQuery is completely out of the picture. There are times when browser compatibility considerations are harsh and for developers who write both front and back ends, the Bootstrap + jQuery combination has its place as a cheap way to learn. So far the criteria for determining whether to use MVVM or not are: whether the project is acceptable and suitable for use, compatibility requirements or too simple and there is no need to build such a heavy thing, otherwise it will be a big deal, but we still have to explore and try. In addition, as a front-end developer, I also need to keep up with the pace of The Times, so I can’t leave the learning of these frameworks behind. It will always be useful and soon.

The right company is the best company

Let’s go back to the conceptual stuff.

Many young programmers want to go to big Internet companies, but often the standards of these companies are not up to their own, so they are anxious and even doubt themselves. This can affect your performance in interviews with other companies. Objectively speaking, the welfare, promotion, growth plan and other systems of large companies are relatively perfect, and if the company’s name is well-known, they will have a good face. Moreover, the probability of success of products of large companies is relatively high, and developers themselves will have a sense of achievement. But in this environment, some people will become slack, fishing in troubled waters also have. At a smaller company you have more room to play and the opportunity to cover a lot more ground than the scaffolding your big brothers have written for you. So small companies tend to expand your technical depth, big companies tend to expand your breadth. This isn’t an old topic, though, and there’s a lot of discussion about what size companies young apps should go to. I think the most important thing is to choose their own right, when they are not happy and have failed to improve the negotiation, just jump it; Jack Ma said there are two reasons for leaving:

  1. Dry as a dog;
  2. There isn’t enough money.

We should learn to choose companies rather than be chosen by others, if we are not willing to carry the banner of helpless and miserable programmers.

Thank you very much for reading!!