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

2016-07-26 分類：WEB開發、程式設計開發、首頁精華4人評論發表於2016-07-26

原文網址 : http://www.codeceo.com/article/20-docs-guides-for-web-dev.html?replytocom=11024

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

是時候重新學習了！和以前一樣，我收集了很多不同的學習資源，包括學習指南，學習文件，和其他有用的網站來幫助你在前端開發的不同領域裡快速地進入狀態。

所以請盡情享受我們的文件和指南系列的第九部分，並且不要忘了在評論區讓我知道任何我沒有找到的。

1. JavaScript Standard Style(JavaScript標準樣式)

JavaScript標準樣式並不是一個主要的學習指南,但是它是一個模式,根據這個模式你可以安裝和執行JavaScript，並且可以通過命令列來測試你的JavaScript程式碼，而不是一系列JavaScript語法的規則。它也被用作一個文字編輯器的外掛。作為一份指南，你也可以看看Rules breakdown，這對於初學者和其他人來說是培養一些基本的JavaScript意識練習的最好方法。

2. Webpack: An Introduction(Webpack:一份入門手冊)

“Webpack是一款流行的模組打包工具，它能在語塊裡很方便地打包應用的程式碼資源，並且它能從一個伺服器裡把程式碼載入到一個瀏覽器裡。”這份指南在Angular的官網上有，這份指南已經準備好在Angular2應用裡使用Webpack。

3. Aural UI of the Elements of HTML(HTML元素的Aural UI)

“HTML元素是如何被螢幕閱讀器所支援的。”在Windows10作業系統上的Firefox瀏覽器裡,在VoiceOver上的Firefox瀏覽器裡和在OSX作業系統上的Safari9瀏覽器上,和在Windows8.1作業系統上的NVDA和Firefox瀏覽器裡是由四個表格組成的資料來覆蓋JAWS的, 還有更多的測試。

JAWS介紹連結地址: http://wenku.baidu.com/view/18d8337a1711cc7931b716d4.html

VoiceOver介紹連結地址: http://baike.sogou.com/v7818959.htm?fromTitle=voiceover

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

NVDA介紹連結地址: http://blog.sina.com.cn/s/blog_bdda07c4010197aq.html

4. Type Terms

Type Terms工具對設計者的有用程度遠大於開發者，但是它對於那些想更加熟悉排版術語的人來說，是為他們精心設計的和有用的互動工具。它是Supremo(蘇帕摩)的民間機構，一個曼徹斯特的設計機構開發出來的。

5. Email Toolbox(Email 工具盒)

它是大量的連結資源，主要聚焦在設計和編寫HTML郵件程式碼上。這些資源都在不同的分類下，包括人們應遵循的，課程，可讀的部落格文章，工具和郵件服務提供者(商)。

6. Almost complete guide to flexbox (without flexbox)

這裡有很多不同的伸縮佈局盒指南和工具，但是他們有一些不同。這份指南將向你展示在你的佈局裡如何使用傳統的方法來達到和伸縮佈局盒一樣的效果。很高興能看到它們在這樣一個帖子裡，並且還有程式碼示例。

7. Angular 1.x styleguide (ES2015)

這是由Todd Motto寫的一份”針對團隊的Angular樣式指南”,他是一名Telerik倡導開發人員。Todd也在Angular JS開發網站上提供課程。這份樣式指南”已經為ES2015從頭到腳重新寫了一遍,內容變化的是在Angular1.5以上版本在未來升級你的應用到Angular2。”

Telerik的介紹連結地址: http://bbs.51aspx.com/showtopic-44305.html

8. CSS Purge

這個網站可以給你一些流行網站和框架排名的有效統計資料，可維持的CSS.它可以展現CSS檔案大小的資料,具體的排名,和使用的CSS屬性。

9. Google Chrome’s CSS File

（需自備牆梯才能開啟連結）

歸功於Umar Hansa在推特上寫的部落格文章。這是Chrome瀏覽器使用的核心CSS檔案,該核心CSS檔案用來為HTML元素提供以西基本預設的樣式。有興趣可以快速瀏覽,因為它確實有一些奇怪。

10. <head> Cheat Sheet

“列出了在你的文件裡的<head>標籤元素裡有很多的可以執行的東西。”我喜歡這個，因為它不僅列出了標準的元素，同時也列出了我們能看見的很多特定的東西，但是對於這些特定的東西我們也許並不完全理解。

這是一份由Greg Reimer所寫的，覆蓋了ES6 Generators的有著八個部分的教程。”在如今的JavaScript中Generators是一個最被忽視的功能。我認為這是因為generators僅僅是由generators和iterators組成的一個兩部分整體的一半。而且知道如果只學習其中一個而不學其他的,則就像是在畫一幅不完整的畫。至少對於我本人來說,啊哈!那個時刻沒有到來知道我縮小範圍並且從整體上看iterators和generators。”

12. Node.js ES2015 Support

從技術上說，這是後端，但是它和JavaScript開發者息息相關。這裡有為ES2015準備的相容的表格集合，但是它只能在Node.js上應用。

13. HTML5 Accessibility

我在之前一個帖子裡已經貼了這個，但是它被重新設計了，而且重新設計後的看上去很棒。”這個網站測試了在主流的瀏覽器上對HTML5新特性的支援程度。這包括它們是否有鍵入訪問許可權，是否允許通過APIs對映到平臺，並且是否任何涉及到新特性的許可權功能都被支援。”

14. MaintainableCSS

“編寫CSS不用再擔心之前存在的樣式會帶來問題。MaintainableCSS是編寫模組化的,可擴充套件的和可擴充套件性的CSS樣式的一種方式。”這是由Adam Silver編寫的有十二個部分的指南。

15. Simplified JavaScript Jargon

最初是由Hugo Giraudel開始的，這是一個社群驅動的試圖用最少簡單的詞彙來解釋很多時髦的詞彙，來編織當前的JavaScript生態系統。”這個想法並不是取代個人的文件，但是可以作為某種形式的術語表，可以被輕鬆地引用。”

16. Bootstrap 4 Cheat Sheet

一份Bootstrap 4的參考手冊,來自HackerThemes網站的Alex。這個網站有一個非常漂亮互動式佈局,這個漂亮的互動式佈局展示了可被點選的條目,當該條目被點選時在該頁面的視口的底端會有程式碼片段和程式碼效果顯示出來。你也可以在版本4裡點選突出的所有新的東西。

Bootstrap 4的介紹連結地址: http://www.bootcss.com/

17. AngularJS Cheat Sheets（AngularJS參考手冊）

“我們建立了一些參考手冊學習指南來幫助你克服最初的AngularJS學習曲線，並且提供給你的日常工作提供一份參考。”包括三份參考手冊:AngularJS Core Services(AngularJS核心服務),AngularJS Directive Definition Object(AngularJS指令定義物件)，和AngularJS ui-router(AngularJS 使用者介面路由)。