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

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

是時候接著學習了！在這個行業裡，我認為學習會是不斷的。這是我收集的釋出的第四個這樣的帖子了，而且這個也許是最好的一個。

它們是最近幾個月，我偶然發現並收集的很多不同的指南和學習資源，並且這些都是最新的部分。請盡情享受！

1. Loupe

它是“一個小型視覺化工具，可以幫助你理解JavaScript如何相互呼叫 stack(棧)/event loop(迴圈事件)/callback queue(回撥函式佇列)。”它是互動式的，允許你輸入你自己編寫的程式碼，然後執行這些程式碼，並且在同一個主題下還有一個視訊的演示。

2. First Aid Git

它是“一個可搜尋的集合了很多經常被問到的Git問題”的站點。它對有一定的Git使用技巧水平的人或者沒有Git使用技巧水平的人來說都有用。目前該站點被分成了38個主題，而且你可以通過在頁面上的搜尋過濾器來找到你需要的內容。

3. Periodic Table of ARIA 1.0 Roles & Attributes(ARIA1.0角色和屬性週期表)

它被分成了兩頁——我原本設想把它作為這個列表的第21個——文件上詳細的記載了ARIA角色和屬性的資訊。

只需要點選一個角色或者屬性，然後就會有一個視窗覆蓋在網頁上，從參考手冊上顯示關於該功能的詳細資訊。

4. Is Service Worker Ready?

Service Worker介紹連結地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

Service Workers參考手冊是一個有前途的(沒有其他意思)新標準，它還不適合產品，因為它缺乏瀏覽器的支援，而且它一直都沒有穩定下來。這個小站點對參考手冊上的功能有描述，以及這些功能是如何在不同的瀏覽器上採取措施獲得不同瀏覽器支援的。

5. Browser support for broken/missing images(瀏覽器對損壞或丟失圖片的支援)

很多時候，這可能是我們認為理所當然的事情。它是由Bart Veneman基於CodePen網站專案製作的離線文件,該文件介紹了不同的瀏覽器或者作業系統是如何處理損壞的圖片的(使用palceholder屬性,提示文字,border等等。).

6. 2014 Responsive Report(2014年度回訪報告)

這是由Gridset上的人發起的一個年度回訪調查。在本次調查中有超過1000的參與者，提供了他們在RWD(響應性網頁設計)工作流程中所面臨的挑戰的資訊，他們面臨的困難涉及到客戶端,測試等等。該調查也著眼於樂觀的態度(或者缺少樂觀的態度)，行業趨勢和在RWD(響應性網頁設計)裡使用的工具。

Gridset介紹連結地址: https://gridsetapp.com/

7. Typography Cheatsheet(字元排版手冊)

“它是一份綜合性的指南，指導使用適當的排版字元，包括正確語法的使用。”它也可以作為只有一頁的PDF文件列印下來，文件裡的內容包括為Mac系統和Windows系統通過鍵盤快捷鍵產生的不同的字元，很方便。

8. ARIA Examples(ARIA例項)

由Heydon Pickering使用不同的示例為ARIA各個功能編譯的HTML示例演示。演示和程式碼分為9個不同的示例。它對每一個想要實現高階ARIA功能的人來說是一個很好的出發點。

9. ES5 Mobile Compatibility Table(ES5手機作業系統相容表)

這是一個有點不同，而且更加具體的手機作業系統相容表格。它的主旨是把所有的JavaScript的功能引入ES5，而且使它們能相容不同的手機瀏覽器。

10. iOS Fonts(IOS字型)

“每一個IOS版本都有一個對應的字型集。”當和手機進行具體的通話時，這裡有一張篩選後的列表，在列表上列出了在不同的iOS裝置包括Apple Watch手錶上所能使用的字型集。

11. CSS Filters Playground(CSS Filters(濾鏡)集中營)

一個混合了CSS濾鏡不同方面的介面。它也是有用的，因為你可以選擇一個常用的URL，甚至可以用一個iframe框架或者視訊嘗試一下。

12. Git Cheatsheet(Git參考手冊)

一個為Git命令設計的互動式可點選的參考手冊。不同的區域也有深層的連結，它是用來分享的額外獎賞。

13. Keycodes(鍵盤鍵值)

一個可以快速訪問的小型資訊站點，它可以讓你獲取到在HTML、CSS或者JavaScript裡使用的鍵盤的鍵值、字元編碼和URL編碼字元。

14. Regular Expressions 101

一個做得很漂亮的app，可以幫助你測試和學習正規表示式。我喜歡它顯示的“解釋”和“匹配資訊”，而且它給你提供三種不同的正規表示式供你選擇。

15. CIUM

它是一個手機app，它的功能是“為HTML5的功能、CSS3的功能、JS API的功能、SVG的功能和其他即將到來的web技術提供相容圖表。”它的名字被人認為是“Can I Use Mobile”的簡稱，但是他們的用詞卻並不準確，也許是為了避免版權問題，總之我不知道。

16. DevTools Snippets(開發者程式碼片段工具)

“它是一個有用程式碼片段的結合，可以在瀏覽器開發工具裡使用。”能看到的大約是它們中的20個，而且你可以貢獻你自己的。

17. Codrops CSS Reference(Codrops網站的 CSS參考手冊)

為了防止你錯過了這個Codrops網站，在Sara Soueidan的幫助下，精心設計製作了他們自己的內容全面的CSS參考手冊。

18. Screen Sizes(螢幕尺寸)

一個包含了大量手機裝置和電腦分別擁有的螢幕尺寸的列表。這些裝置甚至可以連結到它們在Amazon網站上的產品銷售頁面。

19. Frontend Guidelines(前端指南)

某個開發者為在HTML或者CSS或者JavaScript各個方面寫作的程式碼樣式忠告。這裡有很過好的忠告。

20. CSS Ruler

一個簡單的互動式的小工具，可以幫你理解CSS處理相對和絕對字型大小的方法。

結論

如果你有其他建議的某個學習資源，可以把它放到評論區讓我們知道。與此同時，當你從上到下看完本帖時，你可以點選下面的連結，檢視之前的帖子。

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

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

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