«
»

Web developers need to understand what

In StackExchange on such a question was asked: What every Programmer should know about Web Development? (on Web development, what is all the programmer need to know?) which gives a very good answer, so I translated reproduced over. By the way, StackExchange really very good, we can contribute to the same answer and amended, look at this problem the revision process you know – the professional Q & A website should be how to do it. This is what I have said in this article really is what kind of user experience .

Well, here is the text (I made some comments on the original, and perhaps incorrect or misleading, please correct me)

Following these things may not be familiar to most people, but there may be some things you have not seen before, or did not fully get to know, not even heard of. (Chen Hao Note: I believe when you read this list, you will feel a little Web development for China's weak, then again, the surface of things is always superficial)

Interface and user experience

  • Careful implementation of the standard browser on the inconsistency, be sure to make your Web site to properly cross-browser. At least, your site needs to test the following browsers:

Finally, you can use about this tool to look at your page in different browsers is how he has been shown (Chen Hao Note: This tool is introduced in the previous site in different browsers and platforms to check your site compatibility )

  • Consider how many people are to visit your site, rather than those of major Web browsers: phone, screen reader software and search engines, such as: Accessibility of some things: WAI and Section508 , mobile devices: MobiForge .
  • Deployment Staging: how to deploy the update site will not affect the user's access. Ed Lucas answer can let you know some (Chen Hao Note: Ed said something such as version control, automated build, backup, rollback mechanisms).
  • Do not directly to the user friendly error message.
 
  • Do not put the user's e-mail address is displayed in clear text, it will be reptiles crawl away and was to the user's mailbox is spam Gaosi.
  • Links for users with rel="nofollow" attribute in order to avoid the interference of spam . (Chen Hao Note: nofollow is an HTML attribute used to notify search engines "is not my web page the link points beyond the control of, comment on its contents," or simply, the link is not a target site or page to the "vote", so that search engines will not visit this link and this is used to reduce the number of dirty pages on the original site-specific effects, which can improve the quality of search results, and to prevent the spread of spam links.)
  • Establish some limits for the site – this is security areas. (Chen Hao Note: For example, when you register with Google mail, you breath more than two registered mail, gmail asking him to give you a text message or call you certification, such as Discuz Forum Posts or limit your search intervals, etc., more sites will use CAPTCHA to verify the operation of man-made and these restrictions are to prevent spam and malicious attacks)
  • Learn how to do Progressive Enhancement . (Chen Hao Note: Progressive Enhancement is a Web Design ideas, such as: 1) basic content and functionality should be accessible by all browsers, 2) the page layout should use external CSS link , 3) Javascript should be external links should also be unobtrusive , and 4) should allow users to set their preferences)
  • Serious concern Accessibility. Because this is a legal requirement (Chen Hao Note: Section 508 of the United States 508, it is the U.S. labor Rehabilitation Act of improvement, it is a federal law, the law requires that all technical people with disabilities to consider the application, If a public information dissemination website, if certain user groups (such as the disabled) to obtain information browse the site if they can not normally get the desired information (If you can not view), it can be based on relevant laws and regulations, can the Website prosecuted under the law). WAI-ARIA for this and in fact provide very good resources.

Security

  • There are many online articles about safety, but the OWASP Development Guide covers almost all the things on the Web site security. (Chen Hao Note: OWASP (Open Web Application Security Project – Open Web Application Security Project) is an open non-profit organization, currently has 130 chapters worldwide nearly 10,000 members, whose main goal is to help solve deliberation Web software security of standards, tools and technical documents, long-term commitment to assist the Government to understand and improve the web or enterprise applications and Web services security. OWASP Web application security is considered the authoritative reference published in 2009 following the U.S. national and international legislation , standards, guidelines, committees and industry codes of practice references the OWASP. U.S. Federal Trade Commission (FTC) is strongly recommended that all companies need to follow the OWASP Top Ten vulnerabilities WEB Protection Code)
  • Never trust user input (including Cookies, because that is the user's input)
  • The user's password Hash, and use salt, to prevent the Rainbow attack (Chen Hao Note: Hash algorithms MD5 or SHA1, etc. available on the use of salt means the password, user password is set, system generates another random string ( salt). stored in the datbase is produced with salt + passwd md5sum and salt. When the password to validate user input when you put the string with the user's salt, to produce md5s um than in theory with salt can significantly make the password harder to crack, unless the same happens to salt the same password, and finally there is the content on the database is not the same. google about md5 + salt you can see a lot of articles on the Rainbow attack , it is meant like the password dictionary table, but the difference is, Rainbow Table is being maintained over the password Hash, and its faster to find the password, which can allow an attacker very quickly). Hash algorithms use a little slow to save the passwords, such as bcrypt (by the time passed inspection certificate) or scrypt (stronger, but also update some of the) ( 1 , 2 ). You can read How To Safely Store A Password (Chen Hao Note: Cool shell previously described bcrypt this algorithm , here, I suggest that we should allow the user to enter strong passwords, such as Apple ID registration process requires users to enter more than 8, the need for case and number of passwords, or to make a similar user experience such things ).
  • Use SSL / HTTPS to encrypt the login page, or transmission of any sensitive information can have a page, such as credit card numbers.
  • Know how to deal with session hijacking. (Chen Hao Note: See wikipedia for this Session Hijacking ,)
  • To keep all your system software update to the latest patch.
  • Make sure your database connection is secure.
  • Make sure you understand the latest attack techniques, as well as the vulnerability of your system at.

Performance

  • Optimize the page – do not use 20KB page background image to tile. (Chen Hao Note: There are many web pages optimization of the article, you can STFG – Search The Fucking Google it. If you want to debug, you can use firebug or chrome built-in developer tools to view the page loaded performance)
  • Learn how to gzip / deflate website ( deflate better ).
  • CSS and Javascript files into multiple files into one, thus reducing the number of browser network connection, and use gzip compression to be used repeatedly file.
  • Use the small picture for the CSS Image Sprites , the same as the toolbar. (See "Minimize HTTP requests") (Chen Hao Note: all the small pictures into one picture, then use CSS to display them one, so that they only transmit a small picture, cool shell style that WordPress RSS feed icon in the list is done)
  • Busy network should be considered separate from the content of the website under the domain name in a different. (Chen Hao Note: for example, a dedicated image server – Photo considerable consumption of bandwidth, or a dedicated Ajax server)
  • Static pages (eg images, CSS, JavaScript, and cookies that do not require access to the website) should be placed on a do not use cookies for a separate domain, because all in the same domain or subdomain of the cookie under the domain name will be the sent with the request. Another good option is to use the Content Delivery Network (CDN).
  • Use of a single page to minimize the number of HTTP requests.
  • Javascript used for the Google Closure Compiler or other compression tools (Chen Hao Note: Javascript code compression can reduce network traffic of your page which can be quickly rendered. Note that not all tools are properly compressed Javascript, Google, the tool can even help you optimize your code)
  • Make sure your site has a favicon.ico file in the root of the site, such as /favicon.ico . browser will automatically request the file , even if the icon file is not apparent in the description of your page, the browser will request. If you do not have this file, it will a lot of 404 errors, it will consume your server bandwidth. (Chen Hao Note: The server returns a 404 page than the ico file may be bigger)

SEO (search engine optimization)

  • Use the "Search engines like" URL, such as: use example.com/pages/45-article-title instead of example.com/index.php?page=45 (Chen Hao Note: This URL is that WordPress, after who is the default)
  • If you want to use dynamic pages # , then put it into a #! , while in the service side, you need to deal with $_REQUEST["_escaped_fragment_"] This is the Google search engine needs. In other words, ./#!page=1 will be converted into the Google search engine ./?_escaped_fragments_=page=1? (Chen Hao Note: Usually the URL after the # else will be passed to the server, so Google can crawl AJAX to make things, you need to use #!, And Google will "#! "turn into" _escaped_fragment_ "to send a request to the server, Twitter is a lot of links to those #!, such as: https://twitter.com/ #! / your_activity ). In addition, the user may use the Firefox or Chromium, history.pushState({"foo":"bar"}, "About", "./?page=1"); is a very good command. So, even if we change the address on the address bar, the page will not reload. This allows you to use ? rather than #! also brushless to keep the current dynamic pages, which can make the AJAX request by the browser to remember.
  • Do not use "click here" this link. As a result, not SEO, but for some people who need to use the screen reader is very friendly (Chen Hao Note: For screen reader software, you can see the site's " programming if you can not see you ")
  • Make a XML sitemap , and on the network side of the root /sitemap.xml . (Chen Hao Note: This document allows the search engines know your site map)
  • When you have more than one URL pointing to the same page for the use of <link rel="canonical" ... /> you can use Google Webmaster Tools to see the related issues.
  • About robots.txt and search engine spiders how it works.
  • Redirects the request (using the 301 ????? ), if you want www.example.com directed to example.com (or other changes) that can prevent Google's change in rank because the domain name change. (Chen Hao Note: The 301 redirect is generally used as a domain name change)
  • Know that not all reptiles are good and some reptile's behavior is not good. (Chen Hao Note: for example, send to your site a lot of requests result in poor server performance)
  • If you have some non-text content in Google's sitemap needs, such as video or something. Tim Farley's answer , can you see a lot of valuable things.

Technology

  • Understand what is HTTP such as GET, POST, sessions, cookies, etc., to understand what is "stateless" stateless.
  • Make your XHTML / HTML and CSS in line with W3C specifications , and make sure they are qualified . Our goal is to avoid browser "quirks mode", and can be allowed to more easily work and non-standard browser, such as screen readers or mobile devices.
  • Understand how the browser handles JavaScript. (Chen Hao: you will see some Javascript code on the front page, while others are in the back, so you need to understand clearly why it is so)
  • Understand how the browser is loading JavaScript, CSS and other resources, to understand their visual impact. (Chen Hao Note: I did 10 years ago when the web page because HTML is also very weak, so only use table to layout, table layout problem is to use the entire page will be displayed after the table read, the user's visual experience is not good .) In some cases, you may need to put your script on the back page .
  • How the sandbox is to understand how JavaScript works, especially if you want to use iframes.
  • Please note that JavaScript may be disabled, so make your AJAX failure. Even if most users are on the Javascript function, but may in some cases the script is not running, such as mobile devices, web search engines, they also arrested and will not execute your script.
  • Learn as much as your deployment platform. (Example: operating system, Web Server: Apache / Nginx, firewalls, databases, etc.)
  • The visual effects together and discuss the JS framework, consider using a Service, such as: Google Libraries API to load the framework, which would allow the browser may already have this cache the JS framework without the need to download from your website the.

Bug fixing

  • Understand that you will spend 20% of the time to write code, while 80% of the time in maintenance, so you have to be careful coding. (Chen Hao Note: See the site of the " more time can be less code "article)
  • Design a good error reporting mechanism.
  • Allows people to design a portal to contact you and give you suggestions and criticisms.
  • For the formation of the document you develop something, so then people can easily maintain your software and systems.
  • Frequent backups (these can also be sure that your backup is functioning properly) Ed Lucas answered some advice. You also need to have a recovery strategy, not just a backup strategy.
  • Use a version control system to store your code, such as: Subversion or Git .
  • Do not forget to do Acceptance Testing, using Selenium help to you.
  • Make sure you have enough log, you can use log4j, log4n or log4r. If a problem, this can allow you to quickly find the way.
  • When you write the log, make sure you capture a record of your treatment and unhandled exceptions. Reporting and analysis of logs can let you know that your website issues.

Here's how things are omitted, not because there is help those who may not be the answer, but because those things are too detailed, and is beyond the scope of the issue, because it's actually a Web developer needs to know what's Overview. I think you can see what the other person's answer, I have time, I will add someone else's answer came. Please feel free to edit this answer because there may be some things forgot, there may be some things wrong.

(End) Cool Shell – CoolShell.cn Author: Chen Hao

This entry was posted on Wednesday, December 7th, 2011 at 2:25 am and is filed under Other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply