61 things website developers should know [interpretation]

After reading 61 things that should be known by website developers translated by Ruan Yifeng, I recorded my understanding and analysis as follows:
If you have any mistakes or omissions, please criticize and correct them!
The description section uses the green font.

1. Interface and User Experience)

1.1

Know the implementation of Web standards in various browsers to ensure that your site can run normally in the main browser. You must test at least the following engines: Gecko (for Firefox), Webkit (for Safari, Chrome, and some mobile browsers), and IE (you can use Microsoft's Application Compatibility VPC Images for testing) and Opera. At the same time, different operating systems may also affect how browsers present your website.

The domestic Internet Explorer 6 shares are still high! If you are using a general-purpose website, you still need to consider compatibility with Internet Explorer 6.
In my opinion, the compatibility sequence should be IE6, IE7, IE8, Firefox, and Chrome.
For travel, 360, QQ browsers and other domestic browsers, because they generally provide IE with a shell, so it should be okay to be compatible with IE!

1.2

In addition to browsers, websites also have other usage methods: mobile phones, screen readers, and search engines. You should know the running status of your website under these circumstances. MobiForge provides some knowledge about mobile website development.

For browsing terminal! Nowadays, mobile Internet is common and also a development trend! If necessary, open the website's mobile phone version! But pay attention to the restrictions on mobile browsers.
Screen readers should avoid placing large sections or key words in images.
Search engines, if SEO is good, will bring a lot of traffic to the website! Refer to the Google search engine optimization beginner's Guide (HTML Version!
The viewer's screen resolution, color (256 colors, etc.), and network speed should be considered!

1.3

Know how to upgrade your website without affecting your use. Generally, you must have a version control system (CVS, Subversion, Git, and so on) and a data backup mechanism (backup ).

When the number of user views is small, the website should be released and updated! It is best to have the upgrade log to tell the user what has been modified!
Version control. If you find any problems with this release, you can change it back to the original version in time! Because the Internet environment is still different from the development environment after all!
Back up necessary data before updating to facilitate recovery! Data backup is designed to cope with disasters! Very important! There should be comprehensive data backup policies (regular backup, remote backup, etc )!

1.4

Do not let users see unfriendly error prompts.

Customize your 404 page! Inform the user of the cause of this error as much as possible! It is best to propose a solution!
Error feedback is provided!
Do not display program error messages to users! It should be translated into a language that users can understand!

1.5

Do not directly display the user's Email address, or at least do not display it in plain text.

After you log on to your account, you can view the private data in text format (account name, number, Email, mobile phone number, and so on )!
However, for public data shared by users (Email, mobile phone number, QQ number and other common contact information), you should use an image (you can consider twisting the text in the image, similar to the Verification Code) to express it!
Because there is a program on the Internet to automatically collect user privacy information! The image format is provided to invalidate these automatic retrieval programs (at least to increase the difficulty of obtaining them )!

1.6

Set reasonable limits for your website. Once the threshold value is exceeded, the service will automatically stop. (This is also related to website security .)

Restrict the automatic submission program!
Limit the maximum number of accessible users based on bandwidth and processing capabilities!
Restrict malicious access and crawling!
Input value based on business restrictions! Make it within a reasonable range!
A prompt should be given if the limit is exceeded!

1.7

Know how to implement progressive enhancement of web pages (progressive enhancement ).

The basic content should be available in all mainstream browsers!
Basic functions should be available in all mainstream browsers!
For advanced browser features, it is only a helper, but cannot affect the business content and functions!
You can treat the page views differently, but the main services should be supported!
Non-mainstream features should not be used as necessary conditions for business!
Respect user preferences (that is, like IE6 Khan )!

1.8

After a POST request is sent, the user always redirects it to another webpage.

The submission result should be forwarded to the next page! Clear structure!
It can be avoided that, if asp.net is on this page, if it is not transferred to another page, the user will prompt repeated submission after refreshing!

1.9

Do not forget the accessibility of your website (accessibility, that is, how people with disabilities use your website ). For us websites, this is sometimes a legal requirement. WAI-ARIA has some good references in this regard.

Consider users with impaired vision! (Elderly, color blindness, etc)
Consider Hearing Impaired Users! (Screen reader)

Ii. Security)

2.1

Read OWASP Development Guide, which provides comprehensive website security guidance.

OWASP Top 10 in 2010
Ten of the most serious risks for web applications in enterprise use:
A1: Injection
A2: XSS)
A3: invalid authentication and session management
A4: insecure direct object reference
A5: Cross-Site Request Forgery (CSRF)
A6: Security Configuration Error
A7: Insecure Password Storage
A8: failed to restrict URL access
A9: insufficient transport layer protection
A10: unauthenticated redirection and forwarding

2.2

Understand SQL injection and its prevention methods.

Prevent SQL injection! Parameterize all input from the client!
Filter SQL keywords and symbols!
Encode the input content!

2.3

Never trust the data submitted by the user (cookies are also submitted by the user end !).

Type detection required! User input needs to be verified repeatedly on the server side! Front-end JS verification users can skip!

2.4

Do not store users' passwords in plain text. Do not store passwords after hash processing.

Do not store passwords in plain text! Encrypt and store passwords with MD5 encryption! Do not transmit the password in plain text!
Prevent internal administrators from directly obtaining user passwords from the database!

2.5

Do not be too confident about your user authentication system. It may be easily cracked, and you are not aware of the vulnerability.

Not absolutely secure! Technology advances, always be vigilant!

2.6

Learn how to handle credit cards.

Credit card processing. Do not store credit card information in plain text, and do not store user credit card information! Such as the card number!
Do not display the full credit card number in plain text anywhere!

2.7

Use SSL/HTTPS on the logon page and other pages that process sensitive information.

Use a secure HTTP connection!
Https Chinese documents
SSL Chinese documents

2.8

Know how to deal with session hijacking ).

Session hijacking principle Introduction: http://hi.baidu.com/liamxd/blog/item/acbe71d0e764aada562c8477.html

2.9

Avoid cross site scripting (XSS ).

XSS (cross-site) Attack Data: http://www4.it168.com/jtzt/shenlan/safe/xss/

2.10

Avoid cross-origin request forgeries (XSRF ).

CSRF | XSRF Cross-Site Request Forgery: http://www.cnblogs.com/lsk/archive/2008/05/26/1207467.html

2.11

Patch your system to keep up with the latest version.

Promptly update server and software patches! Prevent hackers from exploiting the unrepaired vulnerability!

2.12

Confirm the security of your database connection information.

Delete unnecessary database users!
Use a strong password!
Secure database server: http://www.microsoft.com/china/technet/security/guidance/secmod91.mspx

2.13

Track the latest development of attack technology and the latest security vulnerabilities on your platform.

Only the enemy and the enemy can win a hundred battles!

2.14

Read Google's Browser Security Handbook ).

This is in English! Never seen it!

2.15

Read The Web Application Hackers Handbook ).

This is in English! Never seen it!

Iii. Performance)

3.1

Cache is used whenever possible ). Correctly understand and use HTTP caching and HTML5 for offline storage.

The cache here is the Client Cache! When the content is not updated, it is read from the local device! It can speed up display and save bandwidth!
HTML5 offline storage: http://www.w3school.com.cn/html5/html_5_webstorage.asp

3.2

Optimize the image. Do not use a 20KB image file as a recurring webpage background pattern.

A large image of 20 KB occupies a large browser memory when the background is also arranged repeatedly! Reduced browser efficiency!
Avoid using large images as much as possible! Pictures occupy bandwidth and consume memory!

3.3

Learn how to use gzip/deflate to compress content (deflate is preferred ).

Gzip compression is used to compress text on the server, transfer it to the client, and decompress it. This will save a lot of bandwidth!

3.4

Combining Multiple style sheet files or script files into one file can reduce the number of http requests of the browser and the total volume of files compressed by gzip.

Fewer http requests, faster webpage loading!

3.5

Browse Yahoo's predictional Performance website, which provides a large number of excellent suggestions to improve front-end Performance, as well as their YSlow tools. Google's page speed is another tool used to analyze Web page performance. Both require the installation of Firebug.

Accelerate your website's Best Practices
Minimize HTTP requests
Use CDN
Add Expires and Cache-Control headers
GZIP Compression
Place the style sheet on the top
Put the script at the bottom
Avoid CSS expressions
Use external JavaScript and CSS
Reduce DNS Lookup
Compress Javascipt and CSS
Avoid redirection
Delete duplicate script references
Configure ETags
Optimize AJAX
Use flush
Use GET for AJAX requests
Delayed resource Loading
Pre-load Resources
Reduce the number of DOM elements
Cross-origin maximized parallel download
Use less iframe
Alert 404! If the resource referenced by external JS does not exist after custom 404. The JS operation will be terminated!
Reduce COOKIE size
Static content is stored in different domains to avoid passing cookies!
Reduce DOM operations!
Reduce DOM events
Do not use @ import
Avoid using the IE filter! You must use a browser with a time limit!
Optimized images
Use CSS genie
Specify the image width and height. Do not scale the image.
Optimized favicon. ico and Cache
The iphone does not cache resources larger than 25 kb to ensure that the resources are less than 25 kb.
Do not set the SRC of the image to null!

3.6

If your webpage uses a large number of small images (such as the toolbar), you should use CSS Image Sprite to reduce the number of http requests.

Use the CSS genie to reduce HTTP requests!

3.7

For a large-traffic website, you should consider spreading webpage objects across multiple domain names (split components into SS domains ).

Allows concurrent download of static resources!

3.8

Static content (such as slice, CSS, JavaScript, and other webpage content unrelated to cookies) should be placed on an independent domain name that does not require cookies. If there is a cookie under the domain name, the client will attach the cookie content to each http request sent to the domain name. A good method here is to use Content Delivery Network (CDN ).

An independent domain name for static resources can prevent COOKIE transmission!

3.9

Minimize the number of http requests required by the browser to complete web page rendering.

Minimize http requests, merge JS and css files, and use CSS genie.

3.10

Google's Closure Compiler can be used to compress JavaScript files, and YUI Compressor can also be used.

JavaScript and CSS compression tools (GUI)

3.11

Make sure that the favicon. ico file is in the root directory of the website, because even if the file is not included in the webpage, the browser automatically sends a request to it. If this file does not exist, a large number of 404 errors will occur, consuming the bandwidth of your server.

Horrible! This is my first hearing! It is recommended that the favicon. ico file be within 1 K and set it to permanent cache!

4. Search Engine Optimization (SEO)

4.1

Use the URL format of "search engine friendly", such as example.com/pages/45-article-title, but not example.com/index.php? Page = 45.

This is a bit of a problem. You have already corrected it! In fact, as long as you give the URL a name, it is easy to understand! Try to use a short URL.

4.2

Do not use hyperlinks such as "Click here", because it wastes a SEO opportunity and reduces the effect of screen reader.

And do not connect to an image! This is also not good.

4.3

Create an XML sitemap file. The default location is/sitemap. xml (put in the root directory of the website ).

Convenient search engine crawling! But remember to update the site map file in time!

4.4

When you have multiple URLs pointing to the same content, use <link rel = "canonical".../> In the webpage code.

Http://www.google.com/support/webmasters/bin/answer.py? Hl = cn & answer = 139394

4.5

Use Google's Webmaster Tools and Yahoo's Site Explorer.

Webmaster analysis tools help you analyze SEO problems!

4.6

Google Analytics (or open-source access volume analysis tool Piwik) was used from the very beginning ).

Visit statistics to learn about Website access!

4.7

Role of Zhidao robots.txt and how search engine spider works.

Tell the search engine what the spider can read.

4.8

Direct access requests from www.example.com to example.com (with 301 Moved Permanently redirection) or use the opposite approach to prevent Google from using them as two websites and calculating rankings separately.

Multiple Domain Names are useful!

4.9

A web spider who knows that there are malicious or improper behaviors.

The spider may not depend entirely on robots.txt.
Prevent competitors from automatically crawling your data!

4.10

If your website has non-text content (such as video and audio), you should refer to Google's sitemap extension protocol.

This is not clear!

V. Technology)

5.1

Understand the HTTP protocol and concepts such as GET, POST, sessions, and cookies, including what stateless means.

Understanding these concepts can better configure and optimize your website.

5.2

Make sure that your XHTML/HTML and CSS comply with W3C standards so that they can pass the test. This allows your web page to avoid triggering the quirk of the browser and make it work properly on the screen reader and mobile phone.

Try to comply with standard specifications!

5.3

Understand how the browser handles JavaScript scripts.

This is not understood yet!

5.4

Understand how JavaScript files, style sheet files, and other resources on the Web page are loaded and run, and how they affect page performance. In some cases, the script file may be placed at the end of the web page.

To learn more!

5.5

Understand how JavaScript sandbox works, especially if you plan to use iframe.

To learn more!

5.6

JavaScript may not be available or disabled, and Ajax may not always run. Remember, "Do Not Allow script running" (NoScript) is becoming popular for some users. Mobile browsers have different support for scripts, but Google does not run most of the script files when indexing webpages.

Currently, scripts are not allowed. It is estimated that no website can be browsed. If script running is not supported, it is best to prompt the user!

5.7

Learn the difference between 301 redirection and 302 redirection (this is also a SEO issue ).

To learn more!

5.8

Learn as much as possible about your deployment platform ).

Learn about IIS.

5.9

Consider using the Style Sheet Reset (Reset Style Sheet ).

Eliminate CSS differences between browsers!

5.10

Consider using JavaScript frameworks (such as jQuery, MooTools, and Prototype), so that you do not have to consider the differences between browsers.

Using the General JS framework on the basis of understanding and understanding JS can simplify JavaScript compatibility in various browsers!

6. fix bugs

6.1

Understand that 20% of the programmer's time is used for coding, and 80% of the time is used for maintenance.

Maintenance should be considered during design and programming!

6.2

Establish an effective error reporting mechanism.

Error logs are required!

6.3

Establish some channels or systems so that users can contact you and give you suggestions and criticism.

User feedback, forums, blogs, message boards, Weibo, etc...

6.4

Write documents for future maintenance and customer service personnel to explain how the system runs.

Help System

6.5

Regular backup! (And make sure these backups are valid .) In addition to the backup mechanism, you must also have a recovery mechanism.

Complete backup mechanisms, including programs, databases, and resources

6.6

Use a version control system to store your files, such as Subversion or Git.

The program must have version control.

6.7

Don't forget to do Unit Testing. frameworks like Selenium will be useful to you.

Unit test! Be diligent in publishing! Quickly handle bugs.

 

PS: website optimization is a complex process that requires accumulation and practice at ordinary times! Through the above analysis, we found that there are still many areas to be strengthened! It's amazing!