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

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

在我每天網上的搜尋中，我遇到過很多有趣的info-apps(可以查詢幫助查詢資訊的應用)和文件，因此在這裡我列出了它們。

確實，不是 每一個都喜歡“列表帖子”或者摘要，但是，我們做不到讓每一個人都滿意。無論怎樣，我們不會總是發這些型別的帖子的。

在這種情況下，在某些晚上或者週末閱讀，作一些記錄也許是非常好的方法。我保證在這裡你會發現有一些連結，你會重新點選進去閱讀的。

請盡情欣賞!

1.CSS Vocabulary(CSS詞彙表)

（需自備牆梯才可以訪問）

點選該應用，將會使你瞭解到CSS語法所有不同的部分，和它們對應的屬性名是什麼。

2. Liquidapsive

一個簡單的資訊佈局，通過藉助一個下拉選框，可以讓你在Responsive(響應)，Adaptive(自動適配)，Liquid(流體)，和Static(靜態)之間選擇，你可以分別選擇這四種佈局看看它們之間有什麼不同。

3.Superhero.js

它是精彩文章,視訊,和簡報的集合,有助於維持一個龐大的JavaScript程式碼庫。

包括一些常用的原則性型別的東西,在測試上的一些資源，工具，效能，安全，和其它更多的東西。

4. HowToCoffeeScript.com

它是用來學習和記住CoffeScript語法的一份參考手冊。

5. The HTML Landscape

它非常有趣。它是一份W3C文件，用來描述WHATWG，W3C的HTML5.0和W3C的HTML5.1這三種HTML說明書之間”明顯的差別所在”。

它也許有一點側重技術,但是你或許能夠在這裡找到一些有趣的東西。

6. The Elements of HTML(HTML元素)

它只有非常漂亮的一頁圖表,在這頁圖表裡綜合了HTML和XHTML元素。通過這張圖表，你可以知道每個具體元素屬於哪個。

這張圖表非常有利於查詢出哪個元素已經被棄用或者哪個元素在HTML5裡已經淘汰了。

7. JavaScript Equality Table(JavaScript等式表)

非常漂亮的一個三層結構的圖表，它有助於你理解JavaScript的雙等和三等操作符。

上圖的結論呢?“除非你完全理解了在二等之間的轉換，你才可以使用三等。”

8. Web Accessibility Checklist(Web 許可權手冊)

一個有用但是不是必要的手冊，它有助於你在你的專案裡核對不同專案的許可權。

該手冊裡的很多內容都很簡單,除了做一些許可權驗證外,看看總是沒害的。

9. Static Web Apps — A Field Guide(靜態的網頁應用-一份隨手的工作指南)

根據它的描述:”這份指南將向你介紹靜態Web 應用的世界和在構建它們時遇到的相同挑戰而提供的解決方案。”

它的理念是推廣一個架構來消除常見的開發問題。

10. Learn regular expressions in about 55 minutes(在大約55分鐘的時間內學習正規表示式)

一份內容豐富的文件或者叫指南，它介紹了正規表示式。

我猜要想從這份文件裡有所收穫,所花費的時間將會比它說的”55分鐘”更長久,但是它確實值得看看。

11. Open Web CSS Reference(開放的Web CSS參考指南)

這確實是一份綜合性的，而且是很少有人知道的CSS屬性和功能的參考指南。

根據參考指南上的字母表和包含的連結,你可以去訪問上面列出的內容的詳細資訊。

12. CSS Values(CSS Value值)

這是我自己做的。它可以很方便地查詢一個CSS屬性，並且可以迅速地瀏覽可能的value值。例如，你忘記了像font-variant這樣模糊不清的值，你可以通過它來找到令你滿意的值。

除了可以查詢value值外,最新的版本還包括每一個屬性的瀏覽器支援圖表,由caniuse.com提供。

Caniuse.com連結地址: http://caniuse.com/

13. ES6features(ES6功能入門)

它來自Microsoft(微軟)開發者Luke Hoban,在ECMAScript6說明書裡新增的新東西的一份綜述。

介紹指出,”在主流JavaScript引擎裡實現這些功能已經開始了”,所以它對於開始熟悉這些東西非常有用。

14. Relevant Spec Links(相關的具體連結)

我通常都苦於沒有具體的資訊可以告訴我去哪兒搜尋自己想要的東西。它是從Mozilla上總結的一份簡潔的連結資訊，這是你要知道的規範。

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

15. OverAPI.com

大量的參考手冊，多個系列。

它似乎包括了所有的計算機語言。當點選圖示時，參考手冊會連結到相關的官方資源(包括MDN,PHP,.net等等)。

16. JavaScript: The Right Way

它是一份JavaScript指南，它的目的是把JavaScript介紹給新的開發者和幫助他們通過JavaScript最佳實踐獲取到豐富的程式設計經驗。’

17. The HTML5 JavaScript API Index(HTML5的JavaScript API索引)

一個真正的用來搜尋HTML5 API資訊的全面一站式的地方。

它”自動從HTML5說明文件生成”,而且在三個皮膚區域檢視下導航很容易。

18. Zeal

它很優雅整潔。它是一個原生app，對於Windows作業系統和Linux作業系統都有對應的Dash文件瀏覽器版本，它可以讓你離線搜尋超過130份的API文件。

Dash連結地址: https://kapeli.com/dash

只要有一個簡單的鍵盤快捷鍵,你就能在你的工作空間的任何地方顯示出該API瀏覽器。

19. The Ultimate Flexbox Cheat Sheet(可擴充套件的終極參考手冊)

它是一個可擴充套件的參考手冊，可以幫助你找到你需要的flexbox(可擴充套件布局盒)語法,並且幫助你重溫你有點不熟的相關東西。

同一個人，製作了非常棒的interactive Flexbox tutorials(互動式的Flexbox(可伸縮佈局盒)教程)。

Interactive Flexbox tutorials連結地址: http://www.sketchingwithcss.com/flexbox-tutorial/

20. jsCode

它是一個app，可以幫助你建立你自己常用的JavaScript編碼指南。

你也可以檢視由其他人制作的常用JavaScript程式設計指南,也可以和你的團隊或者其他合夥人來分享你製作的常用JavaScript程式設計指南。

總結

我在這裡寫的絕大部分的東西都是很少被人知道的東西。如果你製作了什麼，或者知道了某個文件工具，或者有一套指南想分享，你可以在評論區告訴我們。