61 Things Every Web Developer Should Know

Original URL: http://stackoverflow.com/questions/72394

Translator: Ruan Yifeng

1. Interface and User Experience

1.1

Know how major browsers implement web standards and ensure that your site runs properly on all major browsers. You should test at least the following engines: Gecko (used in Firefox ), Webkit (used in Safari , Chrome , and some mobile browsers), IE (you can use the Application Compatibility VPC Images released by Microsoft for testing), and Opera . At the same time, different operating systems may also affect how the browser renders your website.

1.2

In addition to browsers, there are other ways to use websites: mobile phones, screen readers, search engines, etc. You should know how your website performs in these situations. MobiForge provides some relevant knowledge about mobile website development.

1.3

Know how to upgrade your website with minimal disruption to your users. Generally speaking, you must have a version control system (CVS, Subversion, Git, etc.) and a data backup mechanism (backup).

1.4

Don't let users see unfriendly error messages.

1.5

Do not display the user's email address directly, at least not in plain text.

1.6

Set some reasonable usage limits for your website and automatically stop the service once the threshold is exceeded. (This is also relevant to website security.)

1.7

Know how to implement progressive enhancement of web pages.

1.8

After a user sends a POST request, it is always redirected to another web page.

1.9

Don't forget about the accessibility of your website (i.e. how people with disabilities can use it). For US sites, this is sometimes a legal requirement . WAI-ARIA has some good reference material on this.

2. Security

2.1

Read the OWASP Developer's Guide , which provides comprehensive guidance on website security.

2.2

Understand SQL injection and how to prevent it.

2.3

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

2.4

Do not store user passwords in plain text; store them in hashed form.

2.5

Don't be too confident in your user authentication system; it can be easily compromised without you being aware of the vulnerability.

2.6

Learn how to process credit cards .

2.7

Use SSL / HTTPS on login pages and other pages that handle sensitive information.

2.8

Know how to deal with session hijacking.

2.9

Avoid cross site scripting (XSS).

2.10

Avoid cross site request forgeries (XSRF).

2.11

Apply patches in a timely manner to keep your system up to date with the latest version.

2.12

Make sure your database connection information is secure.

2.13

Keep track of the latest developments in attack techniques and the latest security vulnerabilities for the platforms you use.

2.14

Read Google's Browser Security Handbook .

2.15

Read The Web Application Hackers Handbook .

3. Performance

3.1

Whenever possible, use caching. Correctly understand and use HTTP caching and HTML5 offline storage .

3.2

Optimize images. Don't use a 20KB image file as a recurring background pattern on a web page.

3.3

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

3.4

Combine multiple style sheet files or script files into one file. This can reduce the number of http requests of the browser and the total size of the file after gzip compression.

3.5

Check out Yahoo's Exceptional Performance site for tons of great tips on improving front-end performance, as well as their YSlow tool. Google's page speed is another tool used to analyze web page performance. Both require Firebug to be installed.

3.6

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

3.7

Websites with high traffic should consider splitting components across domains .

3.8

Static content (such as images, CSS, JavaScript, and other web content that is not related to cookies) should be placed on a separate domain that does not require the use of cookies . Because if there is a cookie under the domain name, the cookie content will be attached to each http request made by the client to the domain name. A good approach here is to use a Content Delivery Network (CDN).

3.9

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

3.10

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

3.11

Make sure that there is a favicon.ico file in the root directory of your website, because the browser will automatically request it even if the web page does not include this file at all. So if this file doesn't exist, it will generate a lot of 404 errors and eat up your server's bandwidth.

4. Search Engine Optimization (SEO)

4.1

Use "search engine friendly" URLs, such as example.com/pages/45-article-title instead of example.com/index.php?page=45.

4.2

Don't use "click here" hyperlinks, as this wastes an SEO opportunity and reduces the effectiveness of screen readers.

4.3

Create an XML sitemap file, the default location of which is usually /sitemap.xml (i.e. placed in the root directory of the website).

4.4

When you have multiple URLs pointing to the same content, use <link rel="canonical" ... /> in your web page code.

4.5

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

4.6

Use Google Analytics (or the open source traffic analytics tool Piwik ) from the beginning.

4.7

Know the role of robots.txt and how search engine spiders work.

4.8

Redirecting requests for www.example.com to example.com (using a 301 Moved Permanently redirect), or vice versa, is intended to prevent Google from treating them as two websites and calculating their rankings separately.

4.9

Know that there are malicious or shady web spiders out there.

4.10

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

5. Technology

5.1

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

5.2

Make sure your XHTML / HTML and CSS conform to W3C standards so that they pass validation . This will keep your pages from triggering browser quirks, and make them work properly with screen readers and mobile phones.

5.3

Understand how browsers process JavaScript scripts.

5.4

Understand how JavaScript files, style sheets, and other resources on a web page are loaded and run, and consider how they affect page performance. In some cases, it may be appropriate to place script files at the end of your web page .

5.5

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

5.6

Know that JavaScript may not be available or disabled, and that Ajax may not necessarily work. Keep in mind that "NoScript" is becoming popular among some users, script support varies widely among mobile browsers, and Google indexes pages without running most scripts.

5.7

Understand the difference between 301 redirects and 302 redirects (this is also an SEO related question).

5.8

Learn as much as you can about your deployment platform.

5.9

Consider using Reset Style Sheet .

5.10

Consider using a JavaScript framework (such as jQuery , MooTools , Prototype ) that allows you to ignore browser differences.

6. Solve bugs

6.1

Understand that a programmer spends 20% of their time coding and 80% of their time maintaining, and plan your time accordingly.

6.2

Establish an effective error reporting mechanism.

6.3

Create some channels or systems that allow users to contact you and give you suggestions and criticisms.

6.4

Write documentation for future maintenance and customer service personnel to explain clearly how the system works.

6.5

Back up often! (And make sure those backups are valid.) In addition to a backup mechanism, you must also have a recovery mechanism.

6.6

Use some kind of version control system to store your files, such as Subversion or Git .

6.7

Don't forget to do unit testing, frameworks like Selenium will be helpful to you.

(over)