WebDev:FrontendCodeStandards

	THIS PAGE IS A WORKING DRAFT
	The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page.

Browser Requirements

• Follow Yahoo! GBS? http://developer.yahoo.com/yui/articles/gbs/
• Except we should support a degraded experience in all Mozilla/Firefox versions?
• More?

QA Requirements

(Copied from Y! GBS)

Grading the browser ecosystem enables meaningful, targeted, and cost-effective QA testing. As noted, representative C-grade testing and systematic A-grade testing ensures a usable and verified experience for approximately 99% of our audience. A-grade testing must be thorough and complete, while C-grade testing can be accomplished with one or two representative browsers (e.g., Netscape 4.x and Lynx).

It’s worth reiterating that testing resources do not examine X-grade browsers.

Representative testing of the core experience is critical. If you choose to adopt a Graded Browser support regime for your own web applications, be sure your site’s core content and functionality is accessible without images, CSS, and JS. Ensure that the keyboard is adequate for task completion and that when your site is accessed by a C-grade browser all advanced functionality prompts are hidden.

Code Standards

• Layered semantic markup
  • Semantic class/id names and appropriate HTML tags for content
  • No inline CSS & JS unless absolutely necessary
  • Progressive enhancement (see bolded QA requirements)
  • More?
• HTML:
  • XHTML 1.0 strict doctype (we might want to move to HTML 4.01 strict if we are serving XHTML as html/text)
  • Pages must validate
  • Use most meaningful tags for content
  • Images/bg images with text in them must have alternate textual representation (alt text or text positioned offscreen for screenreaders). Avoid these due to L10n difficulties anyway.
  • More?
• CSS:
  • No separate stylesheets for any browser and no conditional statements.
  • For new sites, look into YUI Fonts & Reset, this will reduce browser layout differences
  • Semantic classnames
  • Don't use position: absolute unless absolutely necessary
  • Use least amount of selectors possible to allow for overriding
  • Don't use !important (see above)
  • Specify font sizes in EMs or %
  • Clear floats with zoom:1 & content:after
  • Hide content for screen readers with position:absolute and position offscreen. Display:none hides content from screen readers.
  • Design layouts to stretch according to their contents (good for localization and good for font-resizing)
  • More?
• JS
  • Don't pollute the global namespace (put all functions into objects/closures)
  • Use Module pattern for singletons? (http://yuiblog.com/blog/2007/06/12/module-pattern/)
  • Use .prototype for objects
  • Standardize on jQuery?
  • Make JS reusable as best as possible.
  • var your variables
  • Use JSlint : http://www.jslint.com/
  • More?

Performance Standards

• Follow Yahoo!'s 14 rules http://developer.yahoo.com/performance/rules.html
• Follow these best practices: http://developer.yahoo.net/blog/archives/2008/01/the_7_habits_fo.html
• Sprite images
• Concat and minify JS & CSS with YUI Compressor (http://www.julienlecomte.net/blog/2007/08/13/) (possibly at build time?)
• No more images in the DB!
• Min 1.5s load time for all pages (broadband)?
• Min Xs for dialup?
• Min Xms for page to execute?
• More?

Security Standards

Also IT's responsibility, we should work with them together on this

• Protect against cross-site request forgeries with crumbs (http://developer.yahoo.com/security/)
• Filter all input (SQL, HTML, JS, CSS)
• Verify user has permissions on content they are editing/deleting
• Don't include JS from 3rd party domains
• Read http://phpsec.org/projects/guide/
• More?