How to become a good front-end engineer

I. Technical Requirements

As a basic front-end engineer, you must master HTML, CSS, and JavaScript. The three must be proficient at the same time. Similar to my words, I know the front-end knowledge. When I encounter problems, I will stop working and search for solutions. First, I will not be able to use a qualified front-end personnel. If I become a front-end engineer like me, the construction period cannot be guaranteed. Qualified front-end engineers must first learn how to complete most tasks without any external help (including search engines.

The following knowledge points must be understood and familiarized as a front-end engineer:

• Dom Structure-- What are the possible relationships between the two nodes and how to move them freely.
• Dom operations-- How to add, remove, move, copy, create, and search nodes.
• Event-- How to Use Events and what are the main differences between the IE and DOM event models.
• XMLHttpRequest-- What is this, how to fully execute a GET request, and how to detect errors.
• Strict mode and hybrid mode-- How to trigger these two modes to differentiate their significance.
• Box Model-- The relationship between the outer margin, the inner margin, and the border. What is the difference between the Box Model in IE <8.
• Block-level and intra-row Elements-- How to Use CSS to control them, how they affect the surrounding elements, and how you think they should be defined.
• Floating Element-- How to use them, what problems they have, and how to solve them.
• HTML and XHTML-- What is the difference between the two? Which one do you think should be used and why.
• JSON-- What it is, why it should be used, how it should be used, and implementation details.

The above knowledge points should be something you know without thinking about. In addition to the above front-end knowledge, you also need to learn at least one backend programming language, so that you can learn how to better interact with the backend.

Many front-end engineers are very familiar with some libraries, such as jquery and bootstrap. However, they are not able to tell you how good you are. What is really good is the mechanisms behind the library, especially those who can write their own databases by hand.

A truly qualified front-end engineer can meet specific functional requirements, and an excellent front-end engineer needs to solve the problem by finding an optimal solution.

2. Important Communication

Excellent front-end engineers must have good communication skills, because your work is closely related to the work of many people. In any case, front-end engineers must meet the requirements of at least four types of customers.

1. Product Manager-- These are groups of people responsible for planning applications. They can imagine how to use applications to meet user needs and how to make money (hopefully) through their design model ). In general, these people are pursuing a wealth of features.
2. UI Designer-- These people are responsible for visual design and Interactive Simulation of applications. They care about what users are sensitive to, what interactions they have, and how they can be used as a whole. They are keen on FLUENT and beautiful user interfaces that are not easy to implement.
3. Project Manager-- These people are responsible for running and maintaining the application. The main focus of project management is nothing more than the normal running time-the time when the application is always available, performance, and deadline. The goal of a project manager is to keep things as simple as possible and not introduce new problems when upgrading and updating.
4. End User-- Of course, it is the main consumer of applications. Although we don't often deal with end users, their feedback is crucial; applications that no one wants to use are worthless. What end users require most is personal functions and the functions of competitive products.

Do not accept a task unless it is evaluated. You must always remember that you must first understand what others want you to do, and cannot simply accept such statements as "this function has a problem. And you need to know exactly what the purpose of this function or design is. Adding a button does not always mean that you will add a button at last. It may also mean that you will ask the product manager about the usefulness of the button, and then ask the UI Designer to see if it is the best interaction method. To become a good front-end engineer, such communication is crucial.

So who should front-end engineers be most concerned about? The answer is all four groups of people. Good front-end engineers must know how to balance the needs and expectations of these four groups of people, and then come up with the best solution. As front-end engineers are at the intersection of the four groups of people, the importance of their communication capabilities is self-evident. If a really cool new feature affects front-end performance and must be simplified, how can you explain it to the product manager? For another example, if a design is not changed back to the original solution, it may have a negative impact on the application. How can you convince the UI Designer? As a front-end engineer, you must understand where each type of thinking comes from, and come up with solutions that all parties can accept. In a sense, a good front-end engineer is like an ambassador who needs to handle every day's work with the attitude of a diplomat.

Professional technology may lead you to become a front-end engineer, but only Applications created using this technology and the ability to work with others can truly make you excellent.

3. Endless improvements

Excellent front-end engineers should be able to learn quickly. The technologies that promote web development are not static. These technologies are changing almost every day. Without the ability to learn quickly, you will not be able to keep up with the pace of web development. You must constantly improve yourself and learn new technologies and models. You cannot adapt to the future by relying solely on today's knowledge. The future of the Web will be quite different from today, and your job is to figure out how to reflect this earth-shaking change through your web applications.

Iv. Front-end development knowledge architecture

• Front-end engineer
  • Browser
    • IE6/24/60/9
    • Firefox
    • Chrome/Safari/Opera
  • Programming Language
    • Javascript/node. js
    • The essence of JavaScript Language
  • Switch page
    • Html/HTML5
    • CSS/css3
    • Photoshop/paint.net
  • Development Tools
    • IDE
      • Vim/sublime text2
      • Notepad ++/editplus
      • Webstorm
    • Debugging tools
      • Firebug/firecookie
      • Yslow
      • Iedevelopertoolbar/ietester
      • Fiddler
    • Version Management
      • Git/SVN
      • GitHub/Bitbucket/Google Code
  • Code Quality
    • Coding style
      • Jslint/jshint
      • Csslint
      • Markup validation service
    • Unit Test
      • Qunit/Jasmine
      • Mocha/shoshould/Chai
    • Automated Testing
      • WebDriver
  • Front-End library/framework
    • Jquery/underscore/mootools/prototype. js
    • Yui3/dojo/extjs
    • Backbone/knockoutjs/emberjs
  • Frontend standards/specifications
    • Http1.1
    • Ecmascript3/5
    • W3C/DOM/BOM/XHTML/XML/JSON/jsonp
    • Commonjs/AMD
    • HTML5/css3
  • Performance
    • Jsperf
    • Yslow 35 rules
    • Pagespeed
    • Httpwatch
    • Dynatrace's Ajax
    • High-performance Javascript
  • Programming knowledge reserve
    • Data Structure
    • Oop/AOP
    • Prototype chain/scope chain
    • Closure
    • Functional Programming
    • Design Mode
    • Javascript tips
  • Deployment process
    • Compression and merge
      • Yui Compressor
      • Google clousure complier
      • Cleancss/uglifyjs
    • Document Output
      • Jsdoc
      • Dox/doxmate
    • Project Build Tool
      • Make/ant
      • Gyp
      • Grunt
      • Yeoman
  • Code Organization
    • Modular class library
      • Commonjs/AMD
      • Yui3 Module
    • Modular business logic
    • File Loading
      • Labjs
      • Seajs/require. js
  • Security
    • Csrf/XSS
    • Adsafe/Caja/sandbox
  • Mobile Web
    • HTML5/css3
    • Responsive Design
    • Zeptojs/iscroll
    • V5/sencha touch
    • Phonegap
    • Jquery mobile
  • Javascript Ecosystem
    • MongoDB/couchdb
  • Cutting-edge technology communities/conferences
    • D2/webrebuild
    • Nodeparty/w3ctech/HTML5 DreamWorks
    • JSCONF/Hu JS (jsconf.cn)
    • Qcon/velocity/sdcc
    • JSCONF/nodeconf
    • Ydn/yuiconf
  • Computer Knowledge reserves
    • Compilation principles
    • Computer Network
    • Operating System
    • Algorithm principle
    • Software Engineering/software testing principles
  • Soft Skills
    • Knowledge management/Summary and sharing
    • Communication skills/team collaboration
    • Requirement management/PM
    • Interaction Design/availability/accessibility
  • Visualization
    • SVG/canvas/VML
    • D3/Rapha rjl/datav
• Backend Engineer
  • Programming Language
    • C/C ++/Java/PHP/Ruby/Python /...
  • Database
    • SQL
    • MySQL/MongoDB/Oracle
  • Operating System
    • Unix/Linux/OS X/Windows
  • Data Structure

Reference link:

Http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html

Https://github.com/jacksontian/fks

Http://julying.com/blog/how-to-become-a-good-web-front-end-engineer/

How to become a good front-end engineer