WebDev:FrontendCodeStandards: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(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...")
 
(39 intermediate revisions by 7 users not shown)
Line 1: Line 1:
=== Browser Requirements ===
This page has been deprecated. For current coding standards and guidelines check out:
===== Support Levels =====
* A grade:
** Full functionality and layout support
** Minor inconsistencies between browsers is tolerable
* B grade:
** Larger rendering issues allowed
** Fallback to basic html from dhtml/ajax where necessary
* C grade
** Send down just HTML
** Degrade to base interactions


If it's not on the chart, we don't support it.
> [http://mozweb.readthedocs.org/ '''Mozilla Webdev Bootcamp'''] (it's on [https://github.com/mozilla/webdev-bootcamp github], contributions welcome!)


===== Mobile Devices =====
(For the previous version of this page, check out the [https://wiki.mozilla.org/index.php?title=WebDev:FrontendCodeStandards&oldid=735044 wiki history]).
{|
|
! Support Level
|-
! Mobile IE
| bgcolor="#CCFFCC" | A-Grade
|-
! Fennec
| bgcolor="#CCFFCC" | A-Grade
|-
! Opera Mobile
| bgcolor="#CCFFCC" | A-Grade
|}
 
===== Internal Tools  =====
 
{|
|-
|
! Linux
! Win XP
! Vista
! OS 10.5
! OS 10.6
|-
! Fx 3.5
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Fx 3
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
|}
 
===== Full Support  =====
 
(primary goal of website is to drive Firefox downloads and/or offer technical support)
 
{|
|-
| <br>
! Linux
! Win7<br>
! Win XP
! Vista
! OS 10.5
! OS 10.6<br>
|-
! IE 8
| <br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
|-
! IE 7
| <br>
| <br> | <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
|-
! IE 6
| <br>
| <br> | <br>
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
| <br>
|-
! Fx 3.5<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Fx 3
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Fx 2
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Safari 4
| <br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Safari 3
| <br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Opera 10<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Opera 9
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade<br>
|-
! Chrome
| <br>
| bgcolor="#ccffcc" | A-Grade<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
| <br>
|-
! Gecko based
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade<br>
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade<br>
|}
 
===== Latest Support  =====
 
(primary audience of website is Firefox users)
 
{|
|-
| <br>
! Linux
! Win7<br>
! Win XP
! Vista
! OS 10.5
! OS 10.6
|-
! IE 8
| <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
|-
! IE 7
| <br>
| <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
|-
! Fx 3.5<br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Fx 3
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Fx 2
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
|-
! Safari 4
| <br>
| bgcolor="#ccffcc" | A-Grade <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Safari 3
| <br>
| bgcolor="#ccffcc" | A-Grade <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Opera 10<br>
| <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Opera 9
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
|-
! Chrome
| <br>
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| bgcolor="#ccffcc" | A-Grade
| <br>
| <br>
| <br>
|-
! Gecko based
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
| bgcolor="#ffe303" | B-Grade
|}
 
===== Other Support =====
* New Sites/Projects: Progressive enhancement for advanced functionality
* Current Sites: make new functionality degrade, don't rewrite current code
* Need to work on accessibility! (ex: AMO Control Panel)
 
=== QA Requirements  ===
 
QA should test and file bugs appropriately for the browser support chart that applies to each site.
 
===Accessibility Requirements===
* Add [[Webdev:WAI-ARIA#Basic_ARIA_Support|basic ARIA support]] where appropriate
 
=== 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)
* HTML:
** HTML5 doctype. Safe to use for all browsers.
** Pages must validate. Not a strict requirement. Some layouts can't be achieved without a few errors.
** 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.
* CSS:
** No separate stylesheets for any browser and no conditional statements.
*** This might be necessary for some layouts. Reserved for worst case scenarios.
** 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)
** Avoid selectors that are native element names (i.e. don't style on "div" or "p") except when resetting.
** Specify in comments the scope of generic sounding class names (what does .block mean and where is it applied? one page or multiple pages?)
*** Try avoiding generic class names altogether
* 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
** Use jQuery
*** Very fast & light
*** If you need another library, please concatenate & use as little as possible
** Make JS reusable as best as possible.
** var your variables
** Use JSlint : http://www.jslint.com/
 
=== Performance Standards ===
==== Page requirements ====
* Min score of B on homepage and 1 other 'major' page
* ~400k max page size
 
==== Recommendations ====
* Follow Yahoo!'s 34 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/)
** or Minify (http://code.google.com/p/minify/)
* No more images in the DB!
* Max 3s load time for all pages (tracked via Gomez)
* Min Xms for page to execute?
* Use ySlow to see where pages can be improved
 
''(see [[Webtools:Scalability]] for an overview of tools/infrastructure)''
 
=== Security Standards ===
 
''To be branched off into separate document''
 
''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"