What does it take to become a front-end engineer with an annual salary of 20K?

Front end floating brother 2020-11-09 16:06:58
front-end end engineer annual salary

I am here web The longer you work in the field , The more I realized that it's not their knowledge that distinguishes talent from top talent —— It's the way they think about things .

Obviously , Knowledge is very important and critical in many cases —— But in a fast-growing field , The way you move forward and acquire knowledge ( For a long time at least ) It will be more important than what you already know . what's more : How do you use this knowledge to solve everyday problems .

I want to give some different advice . In this article , I want to talk about the mentality of a front-end Engineer , Hope to help you find your way to excellence .

Don't just solve the problem , Think about what happened

A lot of people are writing about CSS and JavaScript Until the program works , And then I went to do something else .

I passed code review Find out that this happens all the time . I always ask you :“ Why do you add float: left?” perhaps “ there overflow: hidden Is it necessary ?”, They often say :“ I don't know either , But as soon as I delete them , The page is out of order .”

JavaScript Is the same , I always see one in a place where conditions compete setTimeout, Or some people inadvertently prevent the spread of events , I don't know that it will affect other event handling in the page .

I find that in many cases , When you have problems , You're just solving the problem right now . But if you never take the time to understand the root cause of the problem , You will face the same problem again and again . Take some time to find out why , It looks like a lot of time and effort , But I promise it will save you time in the future .

After fully understanding the whole system , You don't have to guess and argue all the time .

Learn to foresee the future trend of browser development

One of the main differences between front-end and back-end development is that the back-end code usually runs in an environment that is completely under your control . The front end is relatively less in your control .

Platforms or devices of different users are the eternal topic of the front end , Your code needs to be elegant in controlling all this .

I remember myself 2011 Years ago, I read a mainstream JavaScript I've seen the following code in the framework ( Simplified ): var isIE6 = !isIE7 && !isIE8 && !isIE9; In this case, the variable IE6 To judge IE Whether the browser version is 6 Or lower version . So in IE10 When it was released , We still have problems with our program judgment .

I understand that in the real world, feature checking is not 100% Work , And sometimes you have to rely on having bug Or design whitelists based on browser features . But everything you do is critical , Because you foresee no more bug The future of .

For many of us , The code we write today will be longer than our work cycle . Some of the code I wrote is in the past 8 More than years, still running on the product line . It's very satisfying and disturbing .

Read the specification document

Browser has bug It's inevitable , But when the same code is rendered in two browsers, the effect is not the same , People always speculate without thinking , that “ Widely praised ” Your browser is right , and “ not eye-catching ” The browser is wrong .

But that's not necessarily the case , When your hypothesis goes wrong , The workarounds you choose will encounter problems in the future .

A recent example is flex The default minimum size of the element . According to the specification ,flex Element initialized min-width and min-height The value of is auto ( instead of 0), That is to say, by default, they should shrink to the smallest size of their content . But in the past, as long as 8 In months , Only Firefox The implementation of is accurate .

If you run into this browser compatibility problem and find Chrome、IE、Opera、Safari The effect is the same, and Firefox Different from them , You'd probably think it was Firefox A mistake .

In fact, I've seen a lot of this . A lot of me on my own Flexbugs The problems reported by the project are like this . And the problem with these solutions will be in two weeks Chrome 44 After repair, it is reflected .

Compared to a standard compliant solution , All of these programs hurt the right normative behavior .

When the same code is rendered differently in two or more browsers , You should take some time to determine which effect is right , And write code according to this standard .

Your solution should be future friendly . additional , So-called “ Excellent ” The front-end engineers are always feeling the change , Adapt to a technology before it becomes mainstream , Even contributing to this kind of Technology .

If you train yourself to see the specification, you can imagine how it works before the browser supports it , So you're going to be the group that talks about and influences its specification development .

Read other people's code

Reading other people's code for fun may not be the entertainment you think of every Saturday night , But it's undoubtedly the best way for you to be a good engineer .

It's definitely a good way to solve problems on your own , But it shouldn't be the only way for you , Because it will soon stabilize you at a certain level .

Reading other people's code will open your mind , And reading and understanding code written by others is also a must for teamwork or open source contribution .

I really think the biggest mistake many companies make when recruiting new employees is that they only evaluate candidates' ability to write new code from the outline . I've rarely seen an interview where candidates are asked to read existing code , Find out the problem , And fix them .

The lack of such an interview process is really bad , Because a lot of your time as an engineer is spent adding or changing existing code , Instead of building something new .

Working with people smarter than you

Many of the front-end developers I remember ( Compared to a full-time job ) They're all freelancers , There are not so many back-end developers with similar ideas .

Maybe it's because many of the front-end are self-taught, while the back-end is mostly learned from school . Whether it's self-study or self work , We all face a problem : You don't have a chance to learn anything from someone smarter than you . There's no one to help you review Code , No one collides with you for inspiration .

I strongly recommend , At least in the early stages of your career development , You have to work in a team , Especially in a team that is generally smarter and more experienced than you are .

If you eventually choose to work independently at some stage of your career development , Be sure to engage yourself in the open source community . Keep active contributions to open source projects , This will give your team the same or even more benefits .

“ To build the wheels ”

Making wheels is very bad in business , But it's very good from a learning point of view .

You may want to take those libraries and gadgets directly from npm Take it down and use it , But imagine how much you can learn by building them on your own . I know some people who read this are particularly against it . Don't get me wrong , I'm not saying you shouldn't use third-party code . Those well tested libraries have years of test case accumulation and known problem accumulation , It's a very wise choice to use them . But here I want to talk about how to go from excellence to excellence .

I think a lot of great people in this field are authors or maintainers of the very popular libraries that I use every day . You may not have built your own JavaScript Kuo also has a successful career development , But it's almost impossible to find gold if you never dirty your hands .

A common question in this line of work is : What should I do next ? If you don't try to learn a new tool, create a new application , Then try to recreate what you like JavaScript Library or CSS frame .

The good news is that , When you are in trouble , The source code of all ready-made libraries will help you .

Make a note of what you've learned

There are many reasons for this , But perhaps the most important reason is that it forces you to understand it better .

If you can't explain how it works , Throughout the process, it pushes you to figure out what you don't really understand .

In many cases, you don't realize that you don't understand them yet —— Until you write it yourself .

According to my experience , writing 、 speech 、 do demo It's the best way to force yourself to fully understand something . Even if you write something that nobody reads , The whole process will also benefit you a lot .


A digression , I always have the habit of sorting out the interview questions , Be ready to jump out of the comfort zone at any time , Before I knew it, I sorted it out 229 page , Share it here , In need Click here to get the title for free + analysis PDF

 Limited space , Show only part of the content

 Limited space , Show only part of the content

 Limited space , Show only part of the content

【 Click on the I 】 Get this interview question for free + analysis PDF.

本文为[Front end floating brother]所创,转载请带上原文链接,感谢

  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根据后台数据加载不同的组件(思考->实现->不止于实现)
  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根据后台数据加载不同的组件(思考->实现->不止于实现)
  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