14 12 2010

WebDev:FrontendCodeStandards

bigCat Posted in JavaScript - Comment.isBlank

WebDev:FrontendCodeStandards

Contents

[hide]

  1. 1 Browser Requirements
  1. 1.1 Support Levels
  2. 1.2 Mobile Devices
  3. 1.3 Internal Tools
  4. 1.4 Minimum Browser Support
  5. 1.5 Other Support
  1. 2 QA Requirements
  2. 3 Accessibility Requirements
  3. 4 Code Standards
  4. 5 Performance Standards
  1. 5.1 Page requirements
  2. 5.2 Recommendations
  1. 6 Security Standards
  2. 7 Video Standards

Browser Requirements

Support Levels

  1. A grade:
  1. Roughly 90% or more of functionality and design is supported and functional
  2. 大約 90% 的功能和版面要能正確運作
  3. Variations between browsers is acceptable
  4. 不同瀏覽器的表現可以有差異
  5. 'Advanced' browsers can receive a higher fidelity experience with other browsers receiving a lower fidelity
  6. 使用較好的瀏覽器可以得到比較好的使用體驗
  1. B grade:
  1. Larger rendering issues allowed
  2. 允許較難處理的問題存在
  3. Core functionality and content should still be accessible
  4. 主要的功能和內容仍需要可以使用
  5. Fallback to basic html from dhtml/ajax where necessary
  6. 需要時降到純 HTML 而不使用 DHTML/AJAX

If it's not on the chart, we don't support it.

不在表上的表示不支援

Mobile Devices

Support Level
Mobile IE A-Grade
Fennec A-Grade
Opera Mobile A-Grade

Internal Tools

Linux Win XP Vista OS 10.5 OS 10.6
Fx 3.5 A-Grade A-Grade A-Grade A-Grade A-Grade
Fx 3 B-Grade B-Grade B-Grade B-Grade B-Grade

Minimum Browser Support

Support of other browsers is left to each product team.

其餘的瀏覽器支援交給各產品團隊決定

Linux Win7 Win XP Vista OS 10.5 OS 10.6
IE 8 A-Grade A-Grade A-Grade
IE 7 A-Grade A-Grade
Fx 3.5 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Fx 3 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Safari 4 A-Grade A-Grade A-Grade A-Grade A-Grade
Opera 10 A-Grade A-Grade A-Grade A-Grade A-Grade A-Grade
Chrome A-Grade A-Grade A-Grade
Gecko based B-Grade B-Grade B-Grade B-Grade B-Grade B-Grade

Other Support

  1. New Sites/Projects: Progressive enhancement for advanced functionality
  2. 新網站/計畫：進階功能使用漸進增強方式加上
  3. Current Sites: make new functionality degrade, don't rewrite current code
  4. 現有網站：不要修改現有的程式，讓新功能？
  5. Need to work on accessibility! (ex: AMO Control Panel)
  6. 需要關注親和力問題

QA Requirements

QA should test and file bugs appropriately for the browser support chart that applies to each site.

Accessibility Requirements

  1. Add basic ARIA support where appropriate
  2. 加入基本的 ARIA 支援（包括 landmark role, required, invalid, live region）

Code Standards

  1. Layered semantic markup
  1. Semantic class/id names and appropriate HTML tags for content
  2. 有語意的 class/id 名稱和適當的 HTML 標籤
  3. No inline CSS & JS unless absolutely necessary
  4. 非必要不使用行內 CSS/JS
  5. Progressive enhancement (see bolded QA requirements)
  6. 漸進增強
  1. HTML:
  1. HTML5 doctype. Safe to use for all browsers.
  2. 使用 HTML5 doctype 宣告，對所有瀏覽器都適用
  3. Pages should validate. Not a strict requirement. Some layouts can't be achieved without a few errors.
  4. 頁面需要盡量通過標準檢測，此項要求並非絕對需要遵守，因為部分版面設計無法在完全遵守標準的狀況下實作
  5. Use most meaningful tags for content
  6. 使用最能表現物件內容意義的標籤
  7. 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.
  8. 圖片或背景圖有文字時，需要加上文字資訊（例如替代文字或讓文字出現在版面範圍之外）
  1. CSS:
  1. Separate stylesheets for other browsers (IE) are ok
  2. 可以為特定瀏覽器獨立 CSS 檔案
  1. If only 1 or 2 properties are changed, keeping them in the original stylesheet is ok
  2. 如果只有意兩個屬性的修改，可以不必分到不同檔案
  1. For new sites, look into YUI Fonts & Reset, this will reduce browser layout differences
  2. 新網站可以參考 YUI Fonts 和 Reset ，這會幫助減少花在處理不同瀏覽器的版面差異的時間
  3. Semantic classnames
  4. 有語意的 class 名稱
  5. Don't use position: absolute unless absolutely necessary
  6. 非必要不使用 absolute
  7. Use least amount of selectors possible to allow for overriding
  8. 近可以能減少 selector 的使用，讓他比較容易被覆蓋
  9. Don't use !important (see above)
  10. 不要使用 !importanr
  11. Specify font sizes in EMs or %
  12. 使用 EM 或 % 指定字型大小
  13. Clear floats with zoom:1 & content:after
  14. 使用 zoom:1 和 content:after 來 clear float
  15. Hide content for screen readers with position:absolute and position offscreen. Display:none hides content from screen readers.
  16. 如果要隱藏部分訊息，使用 position: absolute ，並把位置移到畫面外，使用 display: none 的話，會讓螢幕報讀器也看不到這些內容
  17. Design layouts to stretch according to their contents (good for localization and good for font-resizing)
  19. Avoid selectors that are native element names (i.e. don't style on "div" or "p") except when resetting.
  20. 避免只使用標籤名稱做 selector ，除非要重設
  21. Specify in comments the scope of generic sounding class names (what does .block mean and where is it applied? one page or multiple pages?)
  1. Try avoiding generic class names altogether
  1. JS
  1. Don't pollute the global namespace (put all functions into objects/closures)
  2. 別使用全域變數
  3. Use Module pattern for singletons? (http://yuiblog.com/blog/2007/06/12/module-pattern/)
  4. Use .prototype for objects
  5. 物件可以使用 .prototype
  6. Use jQuery
  7. 使用 jQuery
  1. Very fast & light
  2. 非常快且輕量
  3. If you need another library, please concatenate & use as little as possible
  4. 如果需要使用其他函式庫，盡可能減少使用
  1. Make JS reusable as best as possible.
  2. 盡量讓 JS 可以重複利用
  3. var your variables
  4. 變數都用 var 宣告
  5. Use JSlint : http://www.jslint.com/
  6. 使用 JSLint

Performance Standards

Page requirements

  1. Min score of B on homepage and 1 other 'major' page
  2. ~400k max page size
  3. 頁面最大不要超過 400k

Recommendations

  1. Follow Yahoo!'s 34 rules
  2. 遵守 Yahoo 的 34 條規範
  3. http://developer.yahoo.com/performance/rules.html
  4. Follow these best practices:
  5. 遵守這些最佳實踐
  6. http://developer.yahoo.net/blog/archives/2008/01/the_7_habits_fo.html
  7. Sprite images
  8. 使用 Sprite images 技巧（多長小圖放在一張大圖內）
  9. Concat and minify JS & CSS with
  10. 串皆並最小化 JS 和 CSS
  1. YUI Compressor (http://www.julienlecomte.net/blog/2007/08/13/)
  2. or Minify (http://code.google.com/p/minify/)
  1. Max 3s load time for all pages (tracked via Gomez)
  2. 頁面讀取時間不超過 3 秒
  3. Use YSlow to see where pages can be improved
  4. 使用 YSlow 檢查頁面是否還有可以加強的地方

(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

  1. Protect against cross-site request forgeries with crumbs (http://developer.yahoo.com/security/)
  3. Filter all input (SQL, HTML, JS, CSS)
  4. 所有的使用者輸入都要過濾
  5. Verify user has permissions on content they are editing/deleting
  6. Don't include JS from 3rd party domains
  7. 不要從其它網域讀取 JS 檔案
  8. Read http://phpsec.org/projects/guide/
  9. More?

Video Standards

  1. Players, in order of degradation...
  2. 播放器採用以下的優先順序
  1. <video>, obviously the first choice
  2. <video> 當然是第一優先
  1. Supported by FF 3.5+, Safari 3+, Chrome
  2. FF 3.5+, Safari 3+, Chrome 都支援
  1. Quicktime
  1. IE w/ quicktime installed, iPhone
  2. IE 且有安裝 Quicktime, iPhone
  1. Flash
  1. Check out open source JW-FLV player
  2. 先使用開放原碼的播放器
  3. YouTube, DailyMotion, etc are also options
  4. 也可以使用 YouTube, 或 DailyMotion 來放置影片
  1. Download links
  1. If all else fails, at least let the user download easily
  2. 如果以上都不可行，那就讓訪客可以簡單下載檔案
  1. Formats
  1. OGG - Firefox
  2. MP4 / H.264 - everything else
  3. Consider high vs. low vs. audio-only formats?
  1. Resources
  1. Video For Everybody - excellent page detailing complete setup, from codecs to HTML
  2. Open source flash player
  1. Hosting
  1. Currently, file a bug with IT (mozilla.org:server ops) and host at videos.mozilla.org
  2. https://intranet.mozilla.org/Uploading_Videos
  3. Link to videos should use CDN (videos-cdn.mozilla.net)

Host: (miao) | Word: Press | Code: bigCat | Valid: HTML5