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...")
 
(26 intermediate revisions by 5 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:  
> [http://mozweb.readthedocs.org/ '''Mozilla Webdev Bootcamp'''] (it's on [https://github.com/mozilla/webdev-bootcamp github], contributions welcome!)
** Roughly 90% or more of functionality and design is supported and functional
** Variations between browsers is acceptable
** 'Advanced' browsers can receive a higher fidelity experience with other browsers receiving a lower fidelity
*B grade:  
**Larger rendering issues allowed
**Core functionality and content should still be accessible
**Fallback to basic html from dhtml/ajax where necessary


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.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
|}
 
===== Minimum Browser Support  =====
 
Support of other browsers is left to each product team.
 
{|
|-
| <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>
|-
! 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>
|-
! 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>
|-
! 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>
|-
! 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>
|}
 
===== 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 should 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:
** Separate stylesheets for other browsers (IE) are ok
*** If only 1 or 2 properties are changed, keeping them in the original stylesheet is ok
** 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/)
* Max 3s load time for all pages (tracked via Gomez)
* 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?
 
=== Video Standards ===
 
* Players, in order of degradation...
** &lt;video&gt;, obviously the first choice
*** Supported by FF 3.5+, Safari 3+, Chrome
** Quicktime
*** IE w/ quicktime installed, iPhone
** Flash
*** Check out open source [http://www.longtailvideo.com/players/jw-flv-player/ JW-FLV player]
*** YouTube, DailyMotion, etc are also options
** Download links
*** If all else fails, at least let the user download easily
 
* Formats
** OGG  - Firefox
** MP4 / H.264 - everything else
** ''Consider high vs. low vs. audio-only formats?''
 
* Resources
** [http://camendesign.com/code/video_for_everybody Video For Everybody] - excellent page detailing complete setup, from codecs to HTML
** [http://www.longtailvideo.com/players/jw-flv-player/ Open source flash player]
 
* Hosting
** Currently, file a bug with IT (mozilla.org:server ops) and host at videos.mozilla.org
** https://intranet.mozilla.org/Uploading_Videos
** Link to videos should use CDN (videos-cdn.mozilla.net)

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"