Front-end engineer’s body of knowledge
Source: Geek Headlines
Here is a diagram of the front end engineer:
The core of front-end development is HTML + CSS + JavaScript. Essentially they form an MVC framework, with HTML as the information Model (Model), CSS as the control style (View), and JavaScript responsible for scheduling data and implementing some kind of presentation logic (Controller).
HTML
1. Classification of tags – Tags represent an element
-
Properties: block-level and inline-level
-
Semantically:
Headings: h1, h2, h3, h4, h5, h6
Paragraphs: p
Text Formatting: em, strong, sub, del, ins, small
Lists: ul, li, ol, dl, dt, dd
Tables: table, thead, tbody, tr, th, td
Forms and Input: form, input, select, textarea
Others: div, span, a, img,
HTML5: header, footer, article, section
XHTML became a W3C standard on January 26, 2000. The W3C defines XHTML as the latest version of HTML. XHTML will gradually replace HTML. XHTML is formed by combining the strengths of HTML and XML. XHTML syntax rules are as follows: – Attribute names and tag names must be lowercase
-
Attribute values must be quoted
-
Properties cannot be abbreviated
-
Replace the name attribute with the Id attribute
-
XHTML elements must be properly nested
-
XHTML elements must be closed
3. Semantically tag documents to express semantics, not style, and a well-structured document can convey as much semantics as possible to a browser, whether it’s on a handheld computer or a trendy desktop graphical browser. Well-structured documents convey visual semantics to users, even in older browsers or in modern browsers where users have turned off CSS. Well-structured HTML code also helps search engines index your site. – Do not use table layout, table is used for table display.
-
Don’t abuse div tags; div is for chunking
-
Do not use style tags such as FONT, center, big, small, B, I. Styles can be controlled by CSS, and B and I can be replaced by strong and EM.
-
Instead of using newline tags and Spaces to control styling, use CSS.
-
Try not to use inline CSS
CSS
1. Foundation – Cascade and inheritance
-
priority
-
The box model
-
positioning
-
floating
2. Advanced – CSS Sprite: CSS Sprite is mainly used for front-end performance optimization of a technology, the principle is to reduce HTTP requests by combining multiple background images on a picture, speed up the loading speed.
-
Browser compatibility: For the most part, we need to consider browser compatibility. There are a lot of browser versions in use, IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari.
-
IE HasLayout and Block Format Content: IE HasLayout is a proprietary concept of Internet Explorer for Windows that determines how an element displays and constrains what it contains, how it interacts with and relates to other elements, how it responds to and passes application events, user events, and so on. This rendering feature can be irreversibly triggered by certain CSS properties. Some HTML elements have “layout” by default. Currently, only Internet Explorer 6 and Internet Explorer 7 have this probability. BFC is a concept in the W3C CSS 2.1 specification that determines how an element positions its content and how it relates and interacts with other elements. This has to do with browser compatibility, because most of the compatibility problems are caused by them.
-
CSS Frameworks: The CSS framework is a collection of CSS files, including basic element resets, page layout, grid layout, form styles, general rules, and other code blocks, designed to simplify web front-end development and improve productivity. Currently, common frameworks include:
960 Grid System
Blueprint CSS
Bluetrip
Minimum Page
One of the more well-known and unique frameworks is Twitter’s Bootstrap. Bootstrap is a front-end toolkit for rapid Web application development. It is a collection of CSS and HTML that uses the latest browser technology to provide your Web development with stylish layouts, forms, buttons, tables, grid systems, and more. It was developed based on Less. IE6 is not supported and doesn’t work well in IE7 and IE8.
- CSS3: Although CSS3 is not officially a standard, modern browsers including IE9+, Chrome, and Firefox support CSS3. CSS provides a lot of functionality that used to require JavaScript and graphics. The main features include:
Rounded multi-background @font-face animation with Gradient gradient Box Shadow RGBa- Add transparent text shadow
-
CSS performance optimization: CSS code is the most direct “tool” for controlling the style and effect of the page display, but it is often ignored by Web development engineers in performance tuning. In fact, non-standard CSS can have a serious impact on the efficiency of page rendering, especially for complex Web 2.0 pages. Therefore, writing standard, high-performance CSS code can greatly improve the efficiency of your application.
-
LESS and SASS: CSS preprocessor, used to add some CSS programming features, without considering the browser compatibility problems, for example, you can use the variable in the CSS, simple program logic, function and so on in some of the basic skills of the programming language, you can make your CSS more concise, more flexible, the code is more intuitive, and many other benefits. SASS is based on Ruby. LESS can be run on the client side, or on the server side with node.js or Rhino.
javascript
1. Base-data types
-
variable
-
Expressions and operators
-
Control statements
-
function
-
abnormal
-
OO
-
The event
-
BOM
-
closure
2. Advanced – DOM: DOM is the document object model. The HTML DOM defines a standard way to access and manipulate HTML documents. Almost all modern browsers support DOM well.
-
JSON :(JavaScript Object Notation) is a lightweight data interchange format that is easy for humans to read and write, but also easy for machines to parse and generate. JSON is now the de facto standard format for data exchange, and almost all languages support JSON, which is much better than XML.
-
AJAX: “Asynchronous JavaScript and XML”, AJAX is not an acronym but a noun coined by Jesse James Gaiiett and popularized by Google. Techniques for creating better, faster, and more interactive Web applications.
-
JavaScript Frameworks: Greatly simplifies our JavaScript programming efforts, providing the following main features: DOM manipulation, cross-browser compatibility, and application Frameworks. Of course jQuery itself is not a framework, it is a library. The mainstream frameworks or libraries are as follows:
jQuery
YUI
DOJO -
HTML5: Similar to CSS3 in that it is not a standard but is supported by all major browsers. HTML5 is not HMTL, and although it does offer some new tags, its primary use is JavaScript. HTML5 mainly provides the following features:
Local audio and video playback Canvas/SVG Geographic information Hardware acceleration local running local storage Drag and drop files from desktop to browser upload semantic tags, Form front end learning communication QQ group: 328058344
-
Front-end template: mainly in order to solve the complex data splicing problem, template language can be converted into HTML structure, can greatly simplify the workload, while the maintainability of the code has been greatly improved. Currently, the mainstream front-end templates are:
MustCache
JsRender -
Front-end MVC: With more and more powerful functions of Web applications and more and more Javascript codes, it has become an urgent problem to be solved which structure to organize a large number of JS codes. Therefore, some people transplant the traditional MVC architecture to the front-end to solve these problems. At present, the main front-end MVC frameworks are as follows:
Backbone.js
Spine
YUI
Agility.js
Ember.js
Batman.js
Dojo
AngularJS(MVVM)
KnockoutJS(MVVM) -
Modular development: The feature is “modular development, load on demand”. The CommonJS organization defines the AMD specification for module definitions on the browser side. RequireJS and SeaJS are two excellent frameworks that implement AMD. See: www.weakweb.com/articles/34…
-
JavaScript unit test :QUnit
-
JavaScript Design pattern
-
NodeJS: Porting JavaScript to the server so that the front-end and back-end can use the same technology for unified development. NodeJS is also non-blocking and is very strong in specific areas. And it’s a great opportunity for front-end developers to get into the backend, so that both the front and back ends can be unified without having to learn other backend languages.
-
ES5:ECMAScript 5, also known as the latest JavaScript specification, makes many improvements to the previous JavaScript and adds many new features, such as JSONECMAScript 5, Many improvements have been made to the previous JavaScript, adding many new features such as JSON.
Others
-
Responsive design: With the popularity of various smart devices, responsive design is very hot right now. In the past, you only need a PC browser to make a web page with a fixed width, such as 960px, but now the page views through mobile phones have exceeded that of PCS, and there are various sizes of devices, and there will be more in the future. In this context, web pages support all devices to access is a basic requirement, and responsive design can be a good solution to these problems.
-
Http1.1: GET, POST, Request/Response headers, status codes, etc.
-
Web mobile development: the development mode is generally native or Web, as the front-end developer is naturally to learn Web mobile development. PhoneGap is a must-learn, front-end frameworks like QueryMobile, Sencha Touch, jQTouch, etc are good choices.
-
Front-end security: with the development of front-end technology, security problems have quietly come to every user from the server in front of the theft of user data, the creation of malicious self-replicating worm code, let the virus spread between users, so that the server down. Even worse, it is not shocking to turn users into attackers without their knowledge. As the application of rich client becomes more and more widespread, the security problem of front-end also increases. Common attack methods are:
- XSS, Cross Site Script attack. It refers to the malicious attacker to insert malicious HTML code into the Web page, when the user browses the page, the embedded malicious HTML code will be executed, so as to achieve the special purpose of malicious users.
- Cross Site Request Forgery (CSRF) : Forges requests across sites. As the name implies, it is to forge connection requests without the knowledge of the user, so that the user can complete some purposes that the attacker needs to achieve with his own identity.
- Cookie hijacking refers to writing a simple request to the malicious site by obtaining the permission of the page and carrying the user’s cookie. After obtaining the cookie, the user can directly log in to the site as the identity of the stolen user.
-
Cross-domain processing: The same origin policy specifies that scripts across domains are isolated, and scripts in one domain cannot access and manipulate most properties and methods in the other domain. There are many ways to handle cross-domain processing, where steps between different domains call each other.
- Debugging tools: There are many front-end debugging tools, such as Firebug, Webkit core Web Inspector, IE IeDeveloper. Http-related Fiddler, HttpWatch, etc., and the JsBeatUtifier for formatting code, which helps you read compressed JavaScript code. IETester can emulate all versions of IE and is a great tool for debugging IE compatibility.
- SEO: Search engine optimization
- A/B test: To determine which version of two elements or versions (A and B) is better, you need to test both versions at the same time. Finally, choose the best version to use.
-
Availability/accessibility:
- Usability refers to whether the product is easy to use, whether the user can complete the task, how efficient it is, and how good the subjective feeling of the user is during the process. It is the quality of the product from the user’s point of view. Good availability means high product quality, which is the core competitiveness of enterprises.
- Accessibility: Web users who are visually impaired use keyboard commands to read the content of a web page to them through a screen reader. Web files written in semantic HTML (HTML that separates structure from presentation) make it easier for such users to navigate and more likely for them to find important information in web files.
-
Front-end process/Deployment: Grunt, Bower and Yeoman are now almost the most popular automated project build tools for the front-end
- Regular expression
- Browser plug-in development
- Principles of browsers
Communication Skills A good front-end engineer needs to have good communication skills, because your job is related to the work of many people. In any case, the front end engineer needs to meet at least four types of customer needs.
-
Product Managers – These are the people responsible for planning the application. They can imagine how the application can satisfy user needs and how they can make money from the patterns they design (often against their will). Generally speaking, these people are looking for rich features.
-
UI designers – These are the people responsible for the visual design and interaction simulation of the application. They care about user sensitivities, consistency of interactions, and overall usability. They love smooth and beautiful user interfaces that aren’t easy to implement, but often don’t think things through.
-
Project Managers – These are the people responsible for actually running and maintaining the application. The primary focus of project management is nothing more than uptime — the time, performance, and deadline when the application is always available. The goal of project managers is to keep things as simple as possible and not introduce new problems as they upgrade.
-
End users — the primary consumers of the application, of course. While we don’t often interact with end users, their feedback is critical; An app that no one wants to use is worthless. End users demand most of all features that are personally useful and that are available in competing products.
In a sense, a good front end engineer is like an ambassador who needs to approach every day with the mentality of a diplomat.
How to Improve your Front-end Skills – Github is a great code hosting site where we can create our own projects and also a great place to learn and focus on other great projects. JSFiddle is a practice ground for Web developers, a tool that can be used in many ways. We can use it to edit HTML,CSS and javascript fragments online. The code you edit can be shared with others, or embedded in your blog, etc. – read good open source code – keep up with technology trends, learn about the latest industry technologies, subscribe to well-known blogs, read tech news – blog/take notes, and accumulate knowledge.
Front of the road of cultivation
-
Getting started: Laying the foundation and being able to participate in projects.
- HMTL & XHTML
- CSS Basics
- JavaScript Basics
- DOM
- JSON
- AJAX
- JavaScript Frameworks
- Front-end learning communication QQ group: 328058344
-
In-depth: Master front-end core technology and can work independently.
- HTML5 tags, TML tags semantic
- CSS Sprite
- Browser compatibility
- IE HasLayout and Block Format Content
- CSS3
- Proficient in JavaScript Frameworks
- HTML5
- The front template
- The front-end MVC
- Modular development
- Http1.1
- A debugging tool
- Regular expression
- Responsive design
-
Out: Master the whole front-end project and be the architect of the whole front-end project.
- CSS Performance Optimization
- LESS and SASS
- JavaScript unit testing
- JavaScript Design pattern
- NodeJS
- ES5
- Web Mobile Development
- Browser plug-in development
- The front security
- Cross domain processing
- SEO
- A/B test
- Availability/accessibility
- Front-end process/deployment
- Principles of browsers
-
Master: a grandmaster.
- Keep learning new skills
- Interaction design and management skills
The future of the front end – follow the technology flow route, that is, delve into various technologies related to the front end, such as browser principles, JavaScript research itself, W3C standards, etc. The development of front-end technology is fast, all kinds of new technology emerge in endlessly, this road is very tired.
-
In the direction of interaction design, the interaction design ability of front-end engineers will be greatly improved and the ability to grasp the whole information architecture will be stronger after they have achieved a certain degree. It can make up for the deficiencies of visual designers in exchange design. In fact, this path is not in conflict with the first one, and can even be understood as the same path.
-
Go back, that is, to learn the technology of background development, such as JAVA/PHP, in fact, most of the traditional background developers are in this state, that is, both front and back. Personally, I think this has gone back to the old way, after all, the front-end is independent from the original background development there.
-
Move into management, such as project manager, or switch careers, such as civil service.