「0」Intro

Many people feel very confused when they face higher knowledge mountains in their front-end career.

Many of my fans had texted me asking "What should I learn?" and "When will I be finished with this front-end learning loop?"

Don't worry, buddy! Once you read this article, you'll know a bit more about what makes a great front-end engineer. Creating a knowledge management system and building a career development plan will make sense to you.

---

「1」How do you define a good developer?

Think about the following question:
"What does an excellent front-end developer possess?"

After interviewing many front-end engineers, here is what I got:

• Familiarized with frameworks such as Angular, React, Vue.
• Knowing the web standards is essential.
• Experience with Webpack and Babel
• Ten years of experience in development
• Performance tuning and optimization
• Object-oriented programming and closures
• A NodeJS expert.

A good front-end developer will have more important qualities than these.

---

So how to determine the quality of a developer?

🔭 Knowledge of the field

• Different type of engineer has different field knowledge
• Different fields of knowledge are interrelated

🧬 Abilities and potentials

• As long as the ability of the individual matches the requirements of the role, you will be promoted
• Potential is the upper limit of our abilities, anyone with the same potential should be able to write the same quality code.
• The difference is the ability to come up with solutions to problems and solve them independently
• Each engineer will be assigned with a KPI (Eg. 30% - outstanding, 60% - normal, 10% - unqualified)
• Each individual's potential will be assessed and a prediction will be given as to when they will be promoted.

🗓 Career planning

According to Alibaba's engineer ranking

• Mid-level Engineer (P5) —— Ability to work independently
• Senior Engineer (P6) —— Core developer, work as a team leader, who can lead the team to break through difficult problems.
• Expert (P7) —— A field expert. Become an authority in one area, drive development, and apply common solutions to solve problems in this area.
• Manager (P8)

📈 How to get promoted?

• Continuously improve technical capabilities
• Precipitation is occurring in your area of speciality

🏆 Achievements

• Your achievements prove your abilities and potentials.
• A reflection of what you have contributed and took on in your previous work experiences

---

「2」How to become a good developer?

Career Planning

You are the owner of your career.

• Many thinks career planning is the responsibility of their "boss", their "parents" or their "teachers". The reality is, it is you who is responsible for your career.
• Many get out of shape when implementing their career planning. They think that career promotion is the consciousness of the boss.
• Do we just give up if our boss doesn't promote us? No! we are the boss of our career, we need to take full responsibility for our career growth. So we have to act for ourselves!
• A career plan is the most important aspect of a successful professional life, therefore we should act as if we are in charge of it, and we have to come up with a solution to ensure our results.
• You need to know when and where you want to be in the company or your role, and if not, how to get there!
• So we should always keep a sense of urgency and crisis in the workplace
• No one will be responsible for your career success. This is why you need to exert enough effort. The same applies to career development.

---

Advancements in Career

1. Growth —— Develop your skills through continuous learning
2. Achievement —— As you advance in skill, you will acquire achievements that can be used to prove your technical abilities
3. Promotion —— You can be promoted to the next level by demonstrating your achievements.

Hence, achievements are paramount to career advancement. What achievements can we acquire in the course of our daily routine?

There are three main types of achievements we can obtain!

🎡 Achieve Project Objectives

• Business objectives
  • Understand the core objectives of your company's business
  • Turn objectives into metrics (UV, PV, page load time, profits)
• Technical solutions
  • Conversion of the business target to technical target
  • Put the plan to work and complete small size trials
• Implementing the plan
  • Determine implementation objectives and participants
  • Manage the implementation progress
• Result evaluation
  • Collecting data and form into a data report
  • Then report to a superior
  • No promotion is possible without positive results, else all you get is a "diligent and hard-working" reputation

A study case:

• Business goals & metrics:
  • Improve click-through rate
• Technical solution:
  • Add gesture operation to TAB component
• Implementation 1:
  • Add corresponding feature
  • Push to production*
• Result:
  • Click-through rate increased 3 times
• Implementation 2:
  • Compile general TAB components
  • Helping making a good base UI/UX guideline

⚙️ Achieve Development Automation

• Target
  • Improved code quality
  • Improved development efficiency
• Plan and implementation
  • Rules and regulations
  • Repo / Pacakges
  • Tools / CLI
  • Systems
• End result
  • Ability to monitor production

A case study: Prevention of XSS attacks

• Target:
  • XSS attack white hat feedback vulnerability
• Technical solution:
  • Organize the security manual
  • Review the historical code
  • Building a code scan tool
• Implementation:
  • Change the code release process
  • Review the entire code
  • Preach to all the front-end developers
• Result:
  • XSS vulnerabilities significantly reduced

🪄 Resolving technical difficulties

• Target a:
  • Recognized technical difficulties
  • One that can affect the business
• Planning and implementation
  • Rely on solid programming skills

A case study:

• Case: Crawling commodity prices
• Background:
  • In a browser plug-in project, you need to crawl the price comparison of each website
  • But each website will use image prices and other means to defend
• Solution:
  • Introduce Javascript terminal digital recognition technology
  • Rely on AI technology to solve the problem

---

「3」Front-end and learning methods

Being a good developer requires us to know how to study as a front-end developer.

---

🔮 A better approach to learning

No pressure should be put on learning the knowledge system, instead one should try to understand the integrity and the framework of the knowledge system.

A knowledge system should be accomplished by analyzing things from multiple perspectives.

Many developers are questioning whether what they have learned is useful.

The following tips can help you approach learning better:

• Although some knowledge is useless, some small points may be useful during the course of a working day
• Most of the time there's no way to find out for certain how effective a piece of knowledge is
• In order to extract the most meaningful knowledge, we must have a knowledge system to sort them.
• We need to have a good study habit, whenever we see a new the knowledge we should try to understand it regardless of its usefulness
• The fact is that we do not have to fully comprehend new knowledge; it becomes clearer once you are faced with it again and again from different situations or environments.

Conclusion is:
"Combining systematic learning with random learning"

---

🏗 Front-end skill model

Once we have a better understanding of the learning approach, then we must then decide which categories to focus our learning efforts on.

• Domain Knowledge
  • Different fields will have different knowledge
  • Learning by practice
• Frontend knowledge
  • Establish a knowledge system
  • The focus is to mastery the knowledge not the magnitude of the knowledge system
• Abilities —— deliberate practice
  • Programming ability
  • Architecture capability
  • Engineering capability

"Frontend technology is not a magic spell book,
the real ability is obtained by practice."

---

📚 Learning method

Relating pieces of knowledge

To build our knowledge system, we want to pursue completeness but not perfection.

The first key goal is to find the key logical relationship between all your knowledge.

• Sequential relation
  • Record the relationship between processes in a system.
• Combination relationship
  • Find the relationship between combinations
• Perspective relationship
  • When you look at knowledge, Each perspective you see is a complete thing on its own
  • Understand a complete thing by looking at a piece of knowledge from various angles
• Classification relationship
  • Sort knowledge by category

Organizing and sorting

1. You can find clues by searching or by reading manuals or articles.
2. Find multiple sources of information.
3. Make sure your knowledge is complete by comparing and strengthening it.

Finding the source

• Source of knowledge
  • Establish the knowledge base from the source and enhance the credibility
  • Find the earliest published papers or magazines
  • Study the initial implementation case
• Standards and documents
  • Read the ones with high authorities
  • Make a good comparison to ensure accuracy

---

「4」Knowldege System

Following all the tips in this article, you will able to build the above knowledge system.

Building a complete knowledge system by filling in missing pieces of knowledge while learning. In the end, this knowledge system will be carved into your head, not just in your computer.

---

Recommended Open Source Projects

Hexo Theme Aurora

Usage Document

---

VSCode Aurora Future theme

---

Firefox Aurora Future

Theme page