WebDev:FrontendCodeStandards: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(New 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? =...)
 
(Replaced content with "This page has been deprecated. For current coding standards and guidelines check out: > [http://mozweb.readthedocs.org/ '''Mozilla Webdev Bootcamp'''] (it's on [https://g...")
 
(108 intermediate revisions by 11 users not shown)
Line 1: Line 1:
=== Browser Requirements ===
This page has been deprecated. For current coding standards and guidelines check out:
* Follow Yahoo! GBS? http://developer.yahoo.com/yui/articles/gbs/
* Except we should support a degraded experience in all Mozilla/Firefox versions?
* More?


> [http://mozweb.readthedocs.org/ '''Mozilla Webdev Bootcamp'''] (it's on [https://github.com/mozilla/webdev-bootcamp github], contributions welcome!)


=== QA Requirements ===
(For the previous version of this page, check out the [https://wiki.mozilla.org/index.php?title=WebDev:FrontendCodeStandards&oldid=735044 wiki history]).
(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?
* 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?

Latest revision as of 23:33, 22 October 2013

This page has been deprecated. For current coding standards and guidelines check out:

> Mozilla Webdev Bootcamp (it's on github, contributions welcome!)

(For the previous version of this page, check out the wiki history).

Retrieved from "https://wiki.allizom.org/index.php?title=WebDev:FrontendCodeStandards&oldid=735048"