Recommended tips for web front-end engineers

Recommended tips for web front-end engineers

Let's first talk about the value of web front-end engineers. Currently, web product interactions are becoming more and more complex. User experience and website front-end performance optimization all have to rely on web front-end engineers. Web front-end engineers are a combination of design and development. Among developers, web front-end engineers are the most directly product- and user-oriented designers. The results of a development team must be presented by web front-end engineers, because users don't care how powerful the background processing is. Among designers, web front-end engineers are designers who directly face developers and convey their design concepts to developers in a computer language. Web front-end engineers are very critical in the entire team.

In my opinion, a qualified web front-end engineer must master HTML, CSS and JavaScript. It's not enough to know just one or two of them, you have to be familiar with all three languages. It doesn't mean you have to be proficient in all three languages, but you should at least be able to use them to complete most tasks without having to frequently seek help from others.

Here are the basic knowledge and skills that web front-end engineers should master in my opinion:

1 Basic structure of a web page (HTML + CSS)

HTML is a markup language, not a programming language. The most basic tags are <html> and <body>. CSS is used to define how to display HTML elements. It is easy to get started with HTML+CSS, but many people do not go deep enough. Here are a few examples: What is the <meta> tag used for? What is the difference between margin-left and left, and in what situations should they be used? Here is another DIV+CSS layout problem: three horizontally aligned DIVs are placed inside a DIV of uncertain width. The width of the left and right DIVs is fixed at 150px, and the middle DIV fills the remaining width. If you don’t know these problems yet and cannot solve the layout problem within a few minutes, it means that you don’t have a deep enough understanding of HTML+CSS.

2 How does the browser display the web page?

Browsers with different kernels render web pages differently. Currently, browsers all have client debugging tools. The following figure shows the loading details of a Google homepage in IE9:

image_thumb2

When optimizing web performance, you need to have a better understanding of browser rendering and details. Here is a more useful piece of knowledge: the current upper limit of parallel loading of browsers is 6, and the older versions of browsers may be different.

3 The life cycle of a web page

The life cycle of a page may vary in different web frameworks, but is generally the same: the client sends a GET request, the server returns the corresponding page, the client completes the operation and data, and then POSTs it to the server. You must be aware of the details of data transmission (between the front-end and the back-end, and between pages).

4 DHTML DOM BOM Javascript AJAX

This is the most important part of Web front-end development, and most of the time we are dealing with them. Here are a few points to note: javascript is single-threaded programming, and the so-called javascript asynchronous programming is nothing more than planning to execute corresponding events at a certain time in the future; understand the DOM event mechanism in detail; client storage (localStorage and sessionStorage were added in HTML5); javascript is not as rigorous as server-side languages, and debugging is not very convenient, so you must develop rigorous javascript editing habits from the beginning; javascript is very powerful and flexible, don't imagine becoming proficient in it (let alone mastering it) in a short period of time, and writing some frameworks and class libraries. In the initial stage, you should use a familiar and mature framework (such as jquery) as an introduction; you must be proficient in using client-side debugging tools.

6. Experience in server-side language development, PS image cutting technology

Web front-end development is between design and development, so you need to know a little about both ends. The editing languages ​​are similar. Having written server languages ​​before is very helpful for learning JavaScript. To convert images into static HTML pages, PS cutting technology is indispensable.

5 Browser Compatibility

Due to historical reasons, browser compatibility has always been a torment for web front-end engineers. Although there is a W3 organization and some specifications have been formulated, and although browser manufacturers are working hard to improve and approach their specifications, in the real network environment, browsers of various kernels and versions have their place. Solving browser compatibility requires experience accumulation, and fortunately, there is a lot of information on this topic online. http://www.w3help.org/zh-cn/This is a good reference website.

6. Quick learning ability and willingness to learn actively

The web front-end is developing very fast. To work in this industry, you must have the ability to learn quickly and the willingness to learn actively so that you can adapt to the requirements of web products. There is no absolute right or wrong in the field of web front-end. There are many ways to solve a problem, but we have to find a more suitable method. Finding a more suitable method requires experience accumulation. In short, it is easy to get started with web front-end, but it is difficult to become proficient, and it requires more active willingness to learn.

7. Good communication skills

An excellent front-end engineer needs to have good communication skills, because your work is closely related to the work of many people, such as project managers, designers, end users, and development engineers. Front-end engineers are at the intersection of these types of people. You have to take care of the requirements of these roles, balance the needs of these four types of people, and come up with a more appropriate plan. This shows that communication skills require higher standards for front-end engineers.

Finally, some good learning materials:

1. W3C learning website (https://www.jb51.net/w3school/), the information above is very comprehensive and practical, and it is the best introductory material.

2. The Definitive Guide to JavaScript

3. "The Art of JavaScript + DOM Programming"

4. Advanced JavaScript Programming

You can read the following blog post: Nicholas C. Zakas on how to become an excellent front-end engineer

 Yesterday, I was in charge of an interview activity organized by Yahoo!, and what impressed me most was the question-asking session for the candidates. I have to say I'm pretty disappointed with most of the questions candidates ask. I hope to hear some feedback on the Yahoo! Work with passion questions. Among the applicants yesterday, only one person asked what I thought was the best question. That person asked me, "What do you think makes a good front-end engineer?" I think it is necessary to take this question out of the interview room and discuss it.

First of all, front-end engineers must master HTML, CSS, and JavaScript. It's not enough to know just one or two of them, you have to be familiar with all three languages. It doesn't mean you have to be proficient in all three languages, but you should at least be able to use them to complete most tasks without having to frequently seek help from others.

An excellent front-end engineer should be able to learn quickly. The technologies that power the Web don't stand still, do they? I would even go so far as to say that these technologies are changing almost every day, and without the ability to learn quickly, you won’t be able to keep up with the pace of Web development. You must constantly improve yourself and learn new technologies and new models; relying solely on today's knowledge will not adapt to the future. The Web of tomorrow will be very different from what it is today, and your job is to figure out how to reflect this radical change through your Web applications.

Many branches under the broad category of computer science are actually considered science in people's eyes. However, what we call front-end is not a science, but an art. Artists must not only master the skills to make a living, but also know how to use them. A solution to the same problem that works in one situation may not work in another. For the front end of a web application, there are often many solutions to the same problem. There is no wrong solution, but some are more appropriate than others. A good front-end engineer should know when to use which solution and when to choose another one.

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

Product Managers – These are the people responsible for planning the application. They can imagine how to satisfy user needs through their applications and how to make money through the model they design (hopefully). Generally speaking, these people are looking for rich features.
UI Designers – These people are responsible for the visual design and interaction mockups of an application. They care about what users are sensitive to, the consistency of interactions, and overall usability. They are passionate about smooth and beautiful user interfaces, but they are not easy to achieve.
Project Managers – These are the people who actually run and maintain the application. The main focus of project management is uptime - the time the application is always available, performance and deadlines. The goal of a project manager is often to keep things as simple as possible and not introduce new problems when upgrading or updating.
End users – are, of course, the primary consumers of your application. Even though we don't interact with end users very often, their feedback is critical; an application that no one wants to use is worthless. What end users most request are features that are personally useful and that are available in competing products.
So, whose opinions should front-end engineers pay most attention to? The answer is all four. An excellent front-end engineer must know how to balance the needs and expectations of these four types of people, and then come up with the best solution based on this. Since front-end engineers are at the intersection of communicating with these four types of people, the importance of their communication skills is self-evident. If a very cool new feature has to be simplified because it will affect the front-end performance, how do you explain it to the product manager? For example, suppose a design may have a negative impact on the application if it is not changed back to the original plan. How can you convince the UI designer? As a front-end engineer, you must understand where each group of people's ideas come from and must be able to come up with solutions that all parties can accept. In a sense, an excellent front-end engineer is like an ambassador, who needs to always maintain a diplomat's mentality to deal with his daily work.

The most common piece of advice I give to new front-end engineers is not to accept a task without first making an assessment. You must always remember to first figure out what others want you to do, and not simply accept vague statements such as "there is a problem with this function." Furthermore, you need to know exactly what the real intent of this feature or design is. A task like “add a button” doesn’t always mean you’ll end up adding a button. It may also mean that you will find a product manager to ask what the button is used for, and then find a UI designer to discuss whether the button is the best means of interaction. This kind of communication is crucial to becoming a good front-end engineer.

In every way, I think front-end engineer is the most complex job in the computer science profession. Most traditional programming ideas are no longer applicable. In order to be used on multiple platforms, various technologies have borrowed a lot of soft science knowledge and concepts. The professional skills required to become an excellent front-end engineer involve broad and complex areas, which will become more complicated due to the involvement of various parties that you must ultimately serve. Technical expertise may get you into the door as a front-end engineer, but it’s the applications you create with that technology and your ability to work with others that will make you great.

<<:  Example code for converting html table data to Json format

>>:  Detailed explanation of the causes and solutions of conflicts between filters and fixed

Recommend

Native JS to achieve special effects message box

This article shares with you a special effect mes...

MySQL chooses the right storage engine

When it comes to databases, one of the most frequ...

MySQL 8.0.12 Installation and Usage Tutorial

Recorded the installation and use tutorial of MyS...

Install mysql5.7 on Ubuntu 18.04

Ubuntu 18.04 installs mysql 5.7 for your referenc...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

4 ways to achieve a two-column layout with fixed left column and adaptive right column using CSS

1. float+overflow:hidden This method mainly trigg...

Detailed explanation of Vue mixin usage and option merging

Table of contents 1. Use in components 2. Option ...

Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() metho...

A brief discussion on MySQL index design principles and the differences between common indexes

Index definition: It is a separate database struc...

Introduction to useRef and useState in JavaScript

Table of contents 1. useState hook 2. useRef hook...

MySQL 8.0.21 installation and configuration method graphic tutorial

Record the installation and configuration method ...

Detailed explanation of selinux basic configuration tutorial in Linux

selinux ( Security-Enhanced Linux) is a Linux ker...

Detailed explanation of vue.js dynamic components

:is dynamic component Use v-bind:is="compone...

Detailed explanation of the two modes of Router routing in Vue: hash and history

hash mode (default) Working principle: Monitor th...

How to install mongodb 4.2 using yum on centos8

1. Make a repo file Refer to the official install...