WebDev:FrontendCodeStandards: Difference between revisions

Jump to navigation Jump to search

WebDev:FrontendCodeStandards (view source)

Revision as of 23:33, 22 October 2013

8,100 bytes removed ,  22 October 2013
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..."
(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...")
 
(64 intermediate revisions by 7 users not shown)
Line 1: Line 1:
{{draft}}
This page has been deprecated. For current coding standards and guidelines check out:


=== Browser Requirements ===
> [http://mozweb.readthedocs.org/ '''Mozilla Webdev Bootcamp'''] (it's on [https://github.com/mozilla/webdev-bootcamp github], contributions welcome!)
* Follow Yahoo! GBS? http://developer.yahoo.com/yui/articles/gbs/
** Do we want to Grade A IE6? (Do we want property-specific GBS?)
*** Potential users vs. existing users
*** Support Linux on our matrix
*** Support last major release (2) and revisit support for FF2 in 6 months.
*** Some IE6 stats:
**** sfx: 7.9%
**** gfx: 14%
**** moco: 4.8%
**** sumo: 2.1%
**** amo: 0.75%
* Except we should support a degraded experience in all Mozilla/Firefox versions?
* More?
==== Proposed schema ====
===== 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.
(For the previous version of this page, check out the [https://wiki.mozilla.org/index.php?title=WebDev:FrontendCodeStandards&oldid=735044 wiki history]).
 
===== Mobile Devices =====
{|
|
! 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.4
! OS 10.5
|-
 
! Fx 3
| 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
|-
|}
 
===== Full Support =====
(primary goal of website is to drive Firefox downloads)
{|
|
! Linux
! Win XP
! Vista
! OS 10.4
! OS 10.5
|-
! IE 8
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|-
! IE 7
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|-
! IE 6
|
| 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
|-
! Fx 2
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 4
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 3
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 2
|
|
|
| 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
|-
! Chrome
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|
|-
! Gecko based
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
|}
 
===== Latest Support =====
(primary audience of website is Firefox users)
{|
|
! Linux
! Win XP
! Vista
! OS 10.4
! OS 10.5
|-
! IE 8
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|-
! IE 7
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|-
! IE 6
|
| bgcolor="#FFCCCC" | C-Grade
|
|
|
|-
! Fx 3
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Fx 2
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 4
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 3
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Safari 2
|
|
|
| bgcolor="#FFCCCC" | C-Grade
| bgcolor="#FFCCCC" | C-Grade
|-
! Opera 9
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|-
! Chrome
|
| bgcolor="#CCFFCC" | A-Grade
| bgcolor="#CCFFCC" | A-Grade
|
|
|
|-
! Gecko based
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | B-Grade
| bgcolor="#CCFFCC" | 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 ===
(Copied from Y! GBS)
 
 
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.
 
===Accessibility Requirements===
* Hard to define what 'accessible' is
* Read [http://diveintoaccessibility.org/table_of_contents.html Accessibility accommodations]
* Read up on: [http://www.w3.org/TR/2008/WD-wai-aria-20080204/ ARIA]
* WAI Priority 1
 
=== 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. 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.
** More?
* 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
** 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?
*** jQuery++, but remember Cake uses Prototype and the namespaces can conflict
** Make JS reusable as best as possible.
** var your variables
** Use JSlint : http://www.jslint.com/
** More?
 
=== Performance Standards ===
* 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/) (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?
* Use ySlow to see where pages can be improved
* 250k max page size overall
* More?
 
''(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?
Wenzel
Confirmed users
1,209

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/154598...735048"

Navigation menu