Front-End Engineers novice must read: Master basic skills to understand the concept

The company recruited a few newly graduated students, as a beginner of refactoring let me take.

First of all thanks to the party, thank the country, thank the company for giving me such an opportunity, affirmation and recognition of my work, let me bring such a restructuring team, at the same time I also understand the arduous task, but I will work well, do not bear the company's expectations of me. (Haha, as if from small to large, teachers are education we have to say so first.) )

In the history of the site, the initial site construction does not need to reconstruct the post, The Web page of the WEB1.0 era requires only programmers, a pile of tables nested on the completion, or art to cooperate with the completion of the first by the art design, and then with some automated software stretching a few, directly will design a good diagram can be the layout of the software output form, there is no need to reconstruct this redundant position. With the arrival of the WEB2.0 and the universal recognition of the norms of the world, the separation of content and style is more convenient for the development and maintenance of the traditional form layout and content of the way the mix is gradually eliminated, the art can not completely single-handedly more and more complex effects and high requirements of the page layout. This has spawned a new position--the front-end engineer.

I happen to be a WEB2.0 to grow up as a front-end engineer, although said to do a few projects, but happy to share with others. Although the share may only be some very superficial and even some outdated things, but also only hope for everyone to wake up, it is best to play a role.

First, the function and function of the front-end engineer.

What is a front-end engineer? It has been said that we are designers of engineers and engineers of designers. Work do not do anything else, is playing, get some effect, save two pages, make some innovation. We are the front Siege Master (engineer). Of course, this statement is a little lightweight, the taste of ridicule, work is definitely not play so simple, sometimes for some effect or optimization, get overtime work together to develop, but in fact there are 21 statements is very pertinent, that is: We are engineers in the designer, is the designer engineers. This sentence will be the role of the front-end engineer to say very accurately. Front end engineer, in the initial stage of the development of the site, as an engineer to guide the design of the Web page, the front-end engineers understand the procedures of the output method, guide designers in the design process to avoid some can not output data typesetting, pointing out which some shadow, transparent, rounded corners can not use a wide range of use, etc. In the process of refactoring the page, will be a designer to the identity of the settings page into a static page, need to use code to the design of the original page to restore, to achieve a good effect of the front desk, arranged to allow the background of the development of the engineers to output data, to adapt to the output of the background data and maintain the page does not distort, Do not go bit, in the case of normal data output, with the program to modify the style, in order to achieve and design the effect of basically consistent. So in this page design and to the process of the present, the front-end engineers need to play a role in the bridge.

Front-End development is a very special work, the front-end engineer's work is easy to say, seemingly lightweight, but it is absolutely not so simple to do. In the development process covers a very broad, not only from a technical point of view to the realization of the interface, to avoid the corner of technology, but also from the user's point of view, how to better accept the technology presented by the boring data, better rendering information. Simply put, its main function is to combine the data of the website with the acceptance of the user, and present a friendly data interface for the user.

Second, the development prospects of front-end engineers

The front-end engineer is a very new career, at home and internationally, really began to be valued for no more than 5 years. The rapid development of the Internet, the Web page from WEB1.0 to WEB2.0, and then to the new HTML5, CSS3, now mobile phone, 3G network, such as the rise of modern technology, the Web page is mainly from the original graphics and text, to now a variety of applications based on the technology of mourning, interactive and rich media, More information, richer content, more friendly experience, has become the site front-end development requirements, the front-end development of the site has been a great change.

The development of the site for the front-end needs more and more important, but a new career in the business is still very short, so high-quality front-end development engineers will be a very popular career in the next five years, the prospects for development is very considerable.

Third, the front-end engineers need to master skills

As a front-end engineer, there are really a lot of skills that need to be mastered.

The most basic three skills: HTML, CSS, JavaScript

This is the most basic and necessary three skills in front-end development. In the development of the front end, when the layout of the page, HTML will define the elements, CSS to the display of the elements of the positioning, and then through JavaScript to achieve the corresponding effect and interaction. Although the surface seems to be very simple, but there is absolutely nothing to master. These concepts need to be understood and understood prior to development so that they are handy in the development process.

Html:

Refers to the Hypertext Markup Language (Hyper Text Markup Language), this is also our website most commonly used language, has experienced the development of several versions, now has developed to 4.01 Edition, has been able to establish the standard and the standard by the universal, has now generally upgraded to the XHTML, XHTML refers to the Extensible Hypertext Label Language (extensible Hypertext Markup Language), which became the standard of the consortium on January 26 in 2000, is a more rigorous and purer HTML code, and the goal of XHTML is to replace HTML. XHTML is almost identical to HTML 4.01, and XHTML is a redefined HTML as an XML application, and is a standard for the consortium. The consortium defines XHTML as the latest HTML version. XHTML is supported by all new browsers.

In addition, the WHATWG collaboration to create a new version of HTML, is HTML5. HTML5 will become the new standard for HTML, XHTML, and HTML DOM, and inject more surprises into the HTML world, although HTML5 is still in perfect form, but most modern browsers already have some HTML5 support, showing the vitality and vitality is so exciting, In particular, the front-end work, those for browser-compatible issues will be well resolved, more results and applications can be more convenient to achieve.

Front-end engineers, also must keep pace with the times, closely follow the development of the forefront of the industry, or forever only stay in the old technology, will only be ruthless elimination.

In fact, the elements of HTML is only dozens of, commonly used elements less, so it should not be difficult to grasp the words. But these seemingly simple elements, many beginners at the beginning of the time did not pay attention to the norms, to develop some bad habits.

1, do not ignore some details

Casually open a website, conveniently point to 163 of the first page, 163 is a more standardized and professional portal, has used some elements of the HTML5, concrete can see the source files.

In the head of the focus ad map there, with a small bug right click on the element, see such an image tag img code:

Both the IMG prerequisites and optional parameters are written, but a value in the prerequisites is not written (in fact, some large-scale professional portal site is also there are some small problems, as long as we can be more careful to find). Although this alt does not write, in the page will not have any problems, because this Alt property is only displayed if the image is missing, disabled, or not loaded, but if some other specific device access or some other condition of the picture does not show, then here is a big red xx and a large white block, Affect the user experience more.

Although only a small alt attribute, but sometimes it is the details of the decision to determine success or failure, with and without, the surface can not see what the problem, but the role in certain conditions is not estimated, that is, from these small details can be seen a front-end engineer level.