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

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

是時候選擇我們想要重新學習的工具或者技術了。如果你覺得你一直在為此努力，但是事實卻並不如你所願，我將滿足你。

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

1.SitePoint Sass Reference(SitePoint站點的Sass手冊)

它是SitePoint自有的專案，是由我們的常駐高手Hugo Giraudel和Stu Robson，SitePoint網站的Sass編輯基於Sass構建的一個參考站點。

2. SVG viewBox and preserveAspectRatio Interactive Demo

它是由Sara Soueidan製作的一個有相關係列文章的互動頁面網站。這個demo可以幫助讀者可視一些在SVG元素上使用的與viewBox和preserveAspectRatio屬性相關的概念。值得注意的是，這個demo頁面也有一個相關的參考手冊。

3. CSS 2.1 Index List(CSS2.1索引列表)

這是最近我無意中找到的一份W3C文件。它是一個很長的列表，幾乎涉及到CSS的每一個術語，當點選某一個術語時，它還會連結到該術語或者該功能的內容上。在一些示例中，當點選示例時，連結會連結到參考手冊的某個地方關於該示例的一個簡單定義，在另一些示例裡，它會連結到參考手冊上該功能所在的地方。

4. Popular Coding Convention on Github(在Github上受歡迎的編碼規範)

可以在網頁上選擇包括JavaScript、Ruby和PHP語言，當選擇後，這個頁面將會顯示一張圖表資料，該圖表將會告訴你某些編碼模式是如何在GitHub上的專案裡受歡迎的。

5. Dungeons and Developers(地下城與“勇士”)

它不是一個互動式的遊戲，但是類似一個角色扮演的天賦樹，它展現了web開發需要的技術，當點選某個”天賦”時,它就會連結到列出的不同”天賦”上，這些”天賦”就是需要學習的技術。

6. JSON API

“如果你曾經和你的團隊就你的JSON響應應該格式化的方法爭論過，那麼JSON API就是你們解決爭吵的武器。通過遵照共同的約定，你可以提高生產效率，可以最大限度地利用共同的工具，並且把你的注意力放在你最重要的東西上:你的應用上。 ”

7. jQuery UI Events Cheatsheet(jQuery UI Events(事件)參考手冊)

它以圖表的形式，詳細說明了哪種jQuery 事件可以用到桌面，哪種可以用到手機上，以及哪種可以用在滑鼠上，哪種可以用在鍵盤上。

8. Weightof.it

它是一個快速入門的app，通過選擇檢視JavaScript庫的壓縮大小或者沒有壓縮的權重來觀察和比較JavaScript各個庫。該app也允許你自己向一個“棧”(就好像新增到購物車裡一樣)裡新增自己的不同的JavaScript庫。這樣你就可以檢視你所有庫的大小了。

Gzipp介紹連結地址: http://baike.sogou.com/v241174.htm?fromTitle=gzip

9. JavaScript in one pic(一張圖上的JavaScript知識點)

它製作的很漂亮，圖中視覺化了所有JavaScript必須要掌握的功能。它是學習該語言最實際的方法，而且仔細瀏覽該圖，你或許會找到一些有趣的東西供你自己進一步研究。

10. Understanding NPM(理解NPM)

NPM介紹連結地址: http://www.cnblogs.com/lansy/p/4329318.html

“自從NPM誕生，npm所扮演的角色擴大到滿足廣大的JavaScript的需求和Node.js開發者社群，包括管理前端web應用，手機應用和其它的JavaScript開發工具和框架[…]該站點視覺化了npm，它的主旨是幫助你理解npm所扮演的角色和使用的範圍。”

11. SVG on the Web(在Web裡的SVG)

SVG介紹連結地址: http://www.w3school.com.cn/svg/svg_intro.asp

它是由Jake Giltsoff寫的關於SVG的綜述，通過一些提示和技巧，可以使你快速地在網站上使用SVG。

12. GreenSock Cheat Sheet(GreenSock參考手冊)

GreenSock介紹連結地址: http://blog.csdn.net/it_oracle/article/details/7353861

它是一個PDF格式的快速入門參考,該參考的目的是教人使用GreenSock這個JavaScript強大的動畫庫。

13. JavaScript Graphing Library Comparison(JavaScript繪相簿對比)

它用來比較JavaScript的繪圖或者圖示庫很方便。只要把滑鼠懸停在某個標題上，你就會得到所支援的圖表型別的詳細資訊，售價和依賴等。你也可以在該站點頁面上通過型別(包括圖表型別，價格，選項和依賴)來選擇過濾庫。

14. The Accessibility Cheatsheet(網站許可權參考手冊)

它是由Ire Aderinokun製作的，是WCAG(Web內容許可權指南)的壓縮版本，同時上面有一些實用的例子。

15. AngularJS Style Guide(AngularJS樣式指南)

“該樣式指南的目的是為某個AngularJS的應用呈上最好的示例和樣式指導。”

16. Default Browser Focus Outline Styles(預設瀏覽器焦點輪廓樣式)

它是一張圖表，使用螢幕截圖來顯示不同的瀏覽器在不同的情況下在各種表單元素上是如何處理焦點樣式的。

17. Flexbox in 5 Minutes(5分鐘搞定Flexbox)

它是一個互動式的遍歷所有新flexbox說明書上所有主要功能的站點。包括演示示例和允許你在頁面右邊演示它的功能。

18. Sass Functions Cheat Sheet(Sass函式參考手冊)

它是一個可搜尋的Sass函式(包括顏色，透明度，數字，字串等等。)列表，可以作為一個方便的參考手冊。你可以把它作為一個2頁的彩色文件下載下來或者把它作為一個黑白的PDF檔案下載下來，也可以作為一個LaTeX排版的文件下載下來。

LateX的介紹連結地址: http://baike.sogou.com/v6083378.htm?fromTitle=LaTeX

19. The State of Web Type(Web型別大全)

“在web上對型別和排版功能最新的支援。”

20. ES6 Katas(ES6功能大全)

“它是一個簡單的站點，列出了通過練習來學習ECMAScript6的不同的功能。當點選每一個功能時，它都會連結到tddbin站點頁面上，並且在該頁面上載入對應的原始碼。你唯一要做的就是修改失敗的測試程式碼。而且通過動手，你應該可以在同一時間內學會使用ES6並且掌握ES6。”

之前的四個帖子回顧：

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

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

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

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