How deep is the water on the front of the page? Further discussion on page development

Anyone engaged in the internet will basically write a few lines of HTML, using Word Dreamweaver also can make regular pages, so most people will naturally think "page development is not a technical content, very simple." Not only this universal cognition, but also a lot of confusion for practitioners: do the front-end implementation of the page, no problem, compatibility, small case, picture integration, has been used ... What's the problem? The bottleneck, the ceiling, the transformation, the way out is widely discussed in the practitioner. Is there really nothing wrong with that? NetEase Mailbox front-end Technology center has been set up for several years, seems to have discussed the topic, but also often have some new ideas to let everyone spirits. So what are the requirements of page development, what else to do, how deep the water inside, let us scoop to see.

The view of the front page at different times seems to be changeable. In the early days of the internet, the car is more expensive than the house, sesame cakes and fans are only used to eat, chrysanthemum is only used to make tea. At that time the page design style is relatively simple, the corresponding page demand is simpler, and at that time the browser is basically the world of IE6, JavaScript is only a synonym for Web effects, the HTML page itself has not caused too many people's attention, It seems as long as you can use DIV or even table with CSS help to set a good picture, the content of the page is OK, and this concept existed for a long time. With the richness of the content of the page, the development of design style, the increase of interactive complexity, the application of Ajax, the renewal of the browser, we attach importance to the most basic page itself. Then the hot discussion is the compatibility of the browser, the most enthusiastic encounter problem is full network search hack, by the way again scold IE6, 7 ... When these are done again, it seems to meet the bottleneck, and began to find a way out. Let's start at this stage.

Implementation of the effect diagram is the most basic work

The visual manuscript through the way of the page code contains two basic requirements: 1. Able to reflect the visual version of the true; 2. Able to be compatible through the browser. These two requirements to achieve the need for us to pursue the details of the attitude and a certain degree of knowledge of the page, can complete these two content can be initially entered the forefront of the ranks of the practitioners, but this represents that we can be competent page development work? No, it's just begun!

Communication with the designer and participation of the project

Communication is important. Let's start with a couple of questions: Have we ever discussed with a designer that some effects have a greater impact on the rendering efficiency of low-end browsers? Have you explored some of the effects can be achieved with CSS3 to make the structure more concise and clear? Have you ever sought balance in code and vision? The development of the front page The code that is written is also directly in the browser, and we are obligated to be responsible for the stability and rendering efficiency of the page. We also often encounter the project under the overall progress pressure caused by the design and page front-end development synchronization, it is more necessary to get the project information as much as possible to understand what we have to do, these can help us to fully consider reuse and framework development.

Good page structure

The preparation of the page structure is like building the foundation of the house, its good or bad will directly affect the quality of CSS code, JS Development, background development will also affect the future page expansion, Iteration and page adjustment. After you get the visual manuscript, do not start with your hands, and watch and think more. First analyze the layout, divide the frame, then plan the structure and write the code. Especially in large-scale projects, the rational use of modular development, whether from the overall or extended maintenance has considerable benefits.

About hack

Many students in the page development of the Internet search is hack, whether we have to rely on hack to achieve page compatibility, the answer is negative. We often liken the IE6 to us a lie, the result we want to spread 100 lie again to round this lie. Do not deny that IE6 often let us spit blood, but does not mean that we use more "lies" to make up for it can be complacent. In most cases, you can adjust the HTML structure by changing your mind or use some CSS that is not explained but relatively secure to kill hack. No one can predict the use of hack when it will give us a big somersault. Triggering layout or position:relative, for example, can help solve a lot of IE6 problems.

Graceful code.

Now many Web projects are complex, the size of the code will become very large, how to better collaborative development and maintenance is a problem we face. Need to consider the perfect unified planning, but also to develop good code development habits will be in the face of various situations. Browsing the page code, see the reasonable use of tags, good comments, clear code structure, the intention of the accurate CSS is not just like appreciating a work of art, more downstream development and collaborative development to reduce the cost of communication, we have any reason not to do so? As a negative example: div abuse is now a more typical problem. Count the number of labels you use? Different semantics should use the corresponding tag code, especially HTML5 provides richer semantic tags, they are desperately waiting for the battlefield Chongfeng, let us to liberate them!

Barrier-Free Page development

Accessibility and ease of use are very subjective and humane things. The seemingly perfect pages of ordinary people may not seem so intimate in particular groups. We should feel guilty when a blind person uses a screen-reading software to get into a loop in a certain area of the page. Can only say that the current domestic web site to this degree is not enough, this requires us to work together to make more people feel our enthusiasm.

Guarantee efficiency

As the front of the project development, page development may need to be completed as early as possible to buy time for the project, which requires us to be as efficient as possible. "工欲善其事, its prerequisite", in addition to actual combat experience and the formation of code habits can help us improve efficiency, want to improve the progress of their development control ability, there are many auxiliary tools to help us with the page development. For example, using less or sass can help us expand and organize CSS, greatly improving the authoring efficiency of CSS and increasing maintainability. For example, you can use the Zen coding automatic completion and custom code block to allow you to fly a sword. You've even seen a code block keyword that customizes the input method to improve development speed. A lot of excavation will find the most suitable for their own use of tools.

Optimized for servers

Page development also needs to understand server optimization, minimize server burden. For example, CSS sprite is a typical example of reducing the number of server requests. NetEase mailbox in the front-end development of the page we are constantly doing a variety of optimization, for example, you've been looking for a balance between file size and server requests; To maximize cache utilization using patch upgrades, confusing class names to avoid naming too long redundancy, applying base64 to reduce the number of requests, and more. These are the results of a comprehensive trade-off that needs to be considered in terms of overall optimization. Because when the page access to a certain order of magnitude, then a little bit of optimization will achieve considerable results, and then small problems may form a huge disaster.

Hug HTML5

This is an era full of opportunities, the advent of the HTML5 era with the rise of mobile internet to create a greater opportunity, there are too many things we should learn to find. HTML5 provides a wealth of JS API interface, we need to study; CSS3 's gorgeous attract enough eyeballs, need us to study, how to develop more suitable pages on mobile devices, we need to study ...

Stay hungry, Stay foolish

Water is more scoop, but found that the bottom is still bottomless, the above content more in-depth research will find more mountains need to climb. To keep hungry, with the eyes to find efforts to discover, constantly enrich the skills to find positioning, breakthrough bottlenecks, is the so-called "only farsighted can be ripe." The formation of this article is because before and peer discussion to the bottleneck of the problem, want to give themselves to the front page of the students to find positioning, comb the train of thought. Take Apple CEO at Stanford Speech "Stay Hungry, Stay foolish" and everyone.

by Lemon

Article: NetEase Mailbox Front-End Technology Center