20個為前端開發者準備的文件和指南（6）

本文由碼農網 – 唐李川原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

是時間選擇你想重溫的工具或者技術了。如果你感到你已經很努力了，但是結果卻並非你所願，我將會幫助你。

請盡情欣賞我們文件和指南系列的第六部分，而且在欣賞之後，不要忘了讓我們知道，我們在本帖或者之前五個帖子中的某個沒有列到的文件或者指南。

1. DevTools Challenger

它是一個互動式的站點,演示瞭如何在Firefox開發者版本里使用其擁有的新的相關動畫功能。

2. The HTML & CSS Workmanship Manual(HTML和CSS技巧手冊)

一個很好的HTML/CSS的樣式指南，可以幫助開發者編寫“耐用，持久”的程式碼，它是受NASA的技巧標準專案啟發而編制的。

NASA介紹連結地址: http://baike.sogou.com/v449802.htm?fromTitle=NASA

3. ECMAScript 6 Cheatsheet(ECMAScript6參考手冊)

我相信我們沒有太多的ES6的學習資源，因此這個就是其中一個。ES6在JavaScript的發展歷史上是一個巨大的進步，並且這個參考手冊將向你介紹ECMAScript標準內容最新版本的一切。

4. React Cheat Sheet(React參考手冊)

React介紹的連結地址:  http://www.ibm.com/developerworks/cn/web/1509_dongyue_react/index.html

React是目前最流行的框架技術，而本快速入門手冊對學習者來說具有很大的幫助。在該網站的頂部有一個搜尋表單，可以供過濾所需要的內容，而且每一個功能都有一個連結，當點選連結後就會連結到React的官方文件頁面上。

5. Six Speed

它是一張圖表，是為通過不同的轉換編譯器(Babel，Traceur等等)渲染涉及到Es5基層操作的不同的ES6功能顯示效能報告資訊。

Babel介紹連結地址: http://babeljs.cn/

Traceur介紹連結地址: http://www.oschina.net/p/traceur

6. U.S. Web Design Standards(美國Web設計標準)

“它是開源的UI元件和視覺化的樣式指南，貫穿了美國聯邦政府網站，旨在提供創造穩定的和出色的使用者體驗。”

7. ECMAScript 6 — New Features:Overview&Comparison (ECMAScript6-新功能:概述和對比)

這是另一個很棒的ES6學習資源。這個ES6的學習資源最棒的地方是，每一個功能它都有兩個程式碼示例，包括同樣的程式碼在ES5裡是如何實現的。

8. Interactive WCAG 2.0(互動式的WCAG2.0)

WCAG2.0介紹的連結地址: http://baike.sogou.com/v10626070.htm?fromTitle=wcag

它是為不同的UI元素製作的一個Web內容許可權指南的列表，可以通過WCAG水平級別或者根據職責功能(包括前端,設計,使用者體驗等等。)來過濾所需內容。它還有W3C和WebAIM的建議。

UX介紹的連結地址: http://baike.sogou.com/v68495939.htm?fromTitle=UX

WebAIM介紹：他們的任務是授權組織機構來使這些組織機構的網頁內容可以被身有殘疾的人士閱讀。

WebAIM 連結地址: http://webaim.org/(英文網站)

9. Mac OS X Dev Setup Reference(Mac電腦的OSX系統的開發者設定手冊)

“安裝一臺新的開發者機器一定是一個連續的，既耗體力又耗時間的過程。該手冊旨在通過容易理解的說明和點檔案或者指令碼來自動完成大量不同的設定，達到簡化安裝過程的目的。”

10. Kinetic Email CSS Support(KineticJS郵箱的CSS支援表)

Kinetic的介紹連結地址: http://www.cnblogs.com/zhangleblog/category/604046.html

該網站以表格的形式列出了HTML和CSS的主要功能，這些功能在互動式的和動態的CSS技術裡經常被使用，並且列出了主流郵件客戶端對它們的支援。

11. HTMLBook

它是由O’Reilly Media發起的基於XHTML5編寫程式碼和數字產品和列印書籍的標準概述的一個非官方的說明書。Lea Verou寫的CSS Secrets(CSS的祕密)就是使用這個標準編寫的。

O’Reilly Media介紹的連結地址: http://baike.sogou.com/v69267939.htm?fromTitle=O%27Reilly+Media

Lea Verou介紹的連結地址: https://www.amazon.cn/%E5%9B%BE%E4%B9%A6/dp/B01ET3FO86?ie=UTF8&dpID=51zBDFxt-yL&dpSrc=sims&preST=_AC_UL160_SR125%2C160_&psc=1

12. ECMAScript® 2016 Language Specification(ECMAScript 2016 計算機語言規範)

官方的ECMAScript說明書現在在GitHub上，被編輯成單頁而且使用方便的HTML格式並且有著過濾器選項的說明書。

13. How DNS works(DNS如何工作的)

“它精彩地解釋了DNS是怎麼工作的…我們製作該連環畫，目的是解釋當你在瀏覽器裡鍵入一個網站的地址時，究竟發生了什麼。”

14. StaticGen

它是可以過濾的“頂級開源的靜態站點生成器的排行榜。”可以讓你通過計算機語言，GitHub星級，叉狀數和開源問題來過濾你所需要的內容。

15. doiuse…?

開啟該網站後，貼上某些CSS程式碼或者某個網站的URL到相應的地方，點選tell me後，該站點就會告訴你哪個瀏覽器支援該CSS程式碼或者不支援該CSS程式碼。你可以執行一個一般的搜尋或者使用Autoprefixer許可的關鍵字列表來過濾搜尋你需要的內容。

Autoprefixer介紹連結地址: http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html

16. Font Family Reunion(字型大全)

它是一個可以過濾內容的相容圖表，圖表內容顯示的是在所有作業系統上的預設的當地字型。該圖表告訴你，該字型是否被支援，是否有別名，或者給該系統恢復預設字型。

17. Perf.Rocks

它是一個資源站點，用來查詢文章，工具，視訊，音訊，幻燈片和覆蓋所有web效能的書。它維護得很好，你可以上傳你自己的東西到上面。

18. Website Style Guide Resources(網站樣式指南資源)

從幾年前到現在，樣式指南已經成了一個很重要的東西。該站點是一個單一的資源站點，擁有編譯工具，文章，書籍，視訊廣播和很多關於樣式指南的主題內容。

19. package.json

package.json介紹連結地址: http://javascript.ruanyifeng.com/nodejs/packagejson.html

“它是一個互動式的指南，用來檢視package.json為node.js應用打包格式的不同重要的屬性。你可以通過把滑鼠懸停在某個屬性名上或者點選該屬性名來獲取到該屬性的詳細資訊。”

20. Promise Cookbook(Promise手冊)

Promise介紹連結地址: http://www.infoq.com/cn/news/2011/09/js-promise

一個在JavaScript裡使用Promise的簡介。

之前的五個帖子回顧：

20個為前端開發者準備的文件和指南（1）

20個為前端開發者準備的文件和指南（2）

20個為前端開發者準備的文件和指南（3）

20個為前端開發者準備的文件和指南（4）

20個為前端開發者準備的文件和指南（5）