乾貨！前端開發指南20+

廢話少說，直接上乾貨！

---

1. CSS介質查詢和範圍選擇器

如果你有看過Patrick Clancey最近寫的那篇關於A List Apart的文章“mod queries”，那麼將會更好地理解這一點。它是一個工具或者說是指南，可以很好的幫助讀者去了解這些CSS選擇器，以及如何使用它們在網頁佈局中佈置未知數量的專案。

2.拋棄JavaScript

通過智慧警告，提示這些元件可能不是語義的或所有使用者都可以訪問的，這個網站整合了大量不同的技術，展示瞭如果只使用HTML，CSS和Sass，可以做到什麼。如果你想學習前端，可以來這個群，首先是291，中間是851，最後是189，裡面可以學習和交流，也有資料可以下載。

3. HTML5超大備忘錄

HTML5超大備忘錄可以說是一個非常全面的資訊圖表，你可以選擇把它儲存為PDF，它涵蓋了HTML5所有的標籤（不論是舊版，新版和已經過時的版本），屬性，桌面和移動瀏覽器支援，事件處理程式和Canvas功能。

4. SVG創作指南

W3C的官方文件描述了一些用於建立可互操作，可重用，且高效能，高效，實用的SVG文件的最佳例項，這些描述是使用註釋和程式碼樣例呈現的。這些文件提供了不需要設定要求的指導，對於手動建立SVG的碼農非常有用。

5. HTML 5.2 W3C工作草案

雖然WHATWG HTML5規則依舊是無可爭議的“生活標準”，但W3C正在推進它規則的完善。如果你有興趣看看什麼是新的、不同的HTML5.2，不妨從這裡開始。

6.Web碼農清單

這個清單使碼農在完成專案時能有一個精準且具體的參考。 包括可用性，可訪問性，搜尋引擎優化 ，程式碼質量，安全性等類別。 此外，類別中的每個專案都包括一些連結，幫助碼農檢查專案。

7.我可以把…製成動畫嗎？

這一個簡單的網站，它允許你搜尋一個CSS屬性，並會告訴你該屬性是否是“可製成動畫的”，並將提供瀏覽器是怎樣計算動畫的進一步的資訊。

8. 移動裝置測試

BrowserStack的移動裝置測試指南，是基於市場份額資料，作業系統版本，螢幕大小，視口和解析度等來製作的。這個網站解釋說：“我們從3萬多個BrowserStack客戶的使用統計資料和當前全球市場趨勢中獲得靈感。這些列表將會不斷的更新，當然包括最新的和即將推出的裝置。“

9. 設計師的Web效能優化清單

Jon Yablonski建立了這個動態清單，這個清單是基於他創作的一篇文章建立的，設計師們為他們的前端專案新增一些有價值的、通常情況下易於實現的效能改進。每個專案都有指向相關文章的相應部分的連結。

10. Web平臺功能的可用性如何？

“由caniuse.com和StatCounter的資料提供支援，這個頁面標明具有本機支援的各種Web平臺功能的瀏覽器的使用者的百分比。 顯然，這不考慮填補能力或其他後備方案。”

11. JavaScript開發者狀態調查

“有超過九千名的碼農參加了第一版的JavaScript狀態調查。 這次調查對相關前端框架和狀態管理，構建工具和測試庫等方面的問題進行了回答。 你會發現哪一種庫類是碼農最想要學習的，並。 希望這些資料能幫助你瞭解不斷變化的JavaScript生態系統。

12. 移動使用統計

這是一個實時、動態的移動使用資料資訊圖表，演示了線上活動的各個方面是如何隨著時間的推移而變化。

13. 字型載入策略的綜合指南

Zach Leatherman詳盡的技術指導給開發者提供了許多處理網路字型的最佳建議和例項，幫助碼農處理實際中遇到的問題。

14. MDN學習社群

這是一個你可能已經有所瞭解的社群，MDN並不適合我們所有人，因為它主要是為初學者所開設的，但不可否認的是，Mozilla Developer Network 是一個可以快速訪問和獲取 HTML、CSS 和 JavaScript 等各類學習知識的社群。

15.彈力球

Sparkbox中的一支團隊建立了一個簡單的互動式頁面，用於演示如何使用各種技術建立一個彈跳球動畫。如果考慮使用動畫庫的話，這可能是一個不錯的選擇來比較不同的編碼和介面。

16.無障礙指南清單

不論對於碼農，工程師，專案經理，測試和編輯人員來說。“讓工作在全體成員中進行無縫銜接是一個非常棒的感受。 無論在專案中的你負責什麼崗位或專案處於什麼階段，都可以使用這個清單幫助構建無障礙程式。“

17. WebAIM輔助功能列表

這是一份出自WebAIM技術人員隻手的一份更詳盡、技術含量更高的輔助功能檢查表，可在Web頁面或作為PDF使用，它分為HTML和Scripts/Plugins（指令碼/外掛）兩部分。

18. 拋棄Lodash / Underscore

這是一項廣泛使用的資源，其中羅列出了許多使用vanilla JavaScript替換如Lodash和Underscore等其他內容的技術。並且還對每項技術的瀏覽器支援進行了介紹。

19.Web的易訪問性模式

來自於 eBay 的開發者 Ian McBurnie 說，這是一個針對於易用網路模式而進行的有趣測試，測試內容包括自動完成、核取方塊、彈出選單、分頁、提示等。你可以在the associated GitBook找到更多的相關文件。

20. Angular程式碼審查

Angular 1.x的核對清單可以幫助你進行程式碼審查，並確保您在風格，體系結構，安全性，輔助功能和效能方面使用公認的最佳方法。 你也可以進行使用者註冊，以便Angular 2的檢查表可用時收到通知。