是時(shí)候重新學(xué)習(xí)了！和以前一樣，我收集了很多不同的學(xué)習(xí)資源，包括學(xué)習(xí)指南，學(xué)習(xí)文檔，和其他有用的網(wǎng)站來幫助你在前端開發(fā)的不同領(lǐng)域里快速地進(jìn)入狀態(tài)。
所以請(qǐng)盡情享受我們的文檔和指南系列的第九部分，并且不要忘了在評(píng)論區(qū)讓我知道任何我沒有找到的。
1. JavaScript Standard Style?( JavaScript標(biāo)準(zhǔn)樣式 )
JavaScript標(biāo)準(zhǔn)樣式并不是一個(gè)主要的學(xué)習(xí)指南,但是它是一個(gè)模式,根據(jù)這個(gè)模式你可以安裝和運(yùn)行JavaScript，并且可以通過命令行來測(cè)試你的JavaScript代碼，而不是一系列JavaScript語法的規(guī)則。它也被用作一個(gè)文本編輯器的插件。作為一份指南，你也可以看看Rules breakdown，這對(duì)于初學(xué)者和其他人來說是培養(yǎng)一些基本的JavaScript意識(shí)練習(xí)的最好方法。
2. Webpack: An Introduction?(Webpack:一份入門手冊(cè))
“Webpack是一款流行的模塊打包工具，它能在語塊里很方便地打包應(yīng)用的代碼資源，并且它能從一個(gè)服務(wù)器里把代碼加載到一個(gè)瀏覽器里。”這份指南在Angular的官網(wǎng)上有，這份指南已經(jīng)準(zhǔn)備好在Angular2應(yīng)用里使用Webpack。
3. Aural UI?of the Elements of HTML?(HTML元素的Aural UI)
“HTML元素是如何被屏幕閱讀器所支持的?！痹赪indows10操作系統(tǒng)上的Firefox瀏覽器里,在VoiceOver上的Firefox瀏覽器里和在OSX操作系統(tǒng)上的Safari9瀏覽器上,和在Windows8.1操作系統(tǒng)上的NVDA和Firefox瀏覽器里是由四個(gè)表格組成的數(shù)據(jù)來覆蓋JAWS的,?還有更多的測(cè)試。
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
Type Terms工具對(duì)設(shè)計(jì)者的有用程度遠(yuǎn)大于開發(fā)者，但是它對(duì)于那些想更加熟悉排版術(shù)語的人來說，是為他們精心設(shè)計(jì)的和有用的交互工具。它是Supremo(蘇帕摩)的民間機(jī)構(gòu)，一個(gè)曼徹斯特的設(shè)計(jì)機(jī)構(gòu)開發(fā)出來的。
5. Email Toolbox(Email 工具盒)
它是大量的鏈接資源，主要聚焦在設(shè)計(jì)和編寫HTML郵件代碼上。這些資源都在不同的分類下，包括人們應(yīng)遵循的，課程，可讀的博客文章，工具和郵件服務(wù)提供者(商)。
6. Almost complete guide to flexbox (without flexbox)
這里有很多不同的伸縮布局盒指南和工具，但是他們有一些不同。這份指南將向你展示在你的布局里如何使用傳統(tǒng)的方法來達(dá)到和伸縮布局盒一樣的效果。很高興能看到它們?cè)谶@樣一個(gè)帖子里，并且還有代碼示例。
7. Angular 1.x styleguide (ES2015)
這是由Todd Motto寫的一份”針對(duì)團(tuán)隊(duì)的Angular樣式指南”,他是一名Telerik倡導(dǎo)開發(fā)人員。Todd也在Angular JS開發(fā)網(wǎng)站上提供課程。這份樣式指南”已經(jīng)為ES2015從頭到腳重新寫了一遍,內(nèi)容變化的是在Angular1.5以上版本在未來升級(jí)你的應(yīng)用到Angular2?！?/p>
Telerik的介紹鏈接地址:http://bbs.51aspx.com/showtopic-44305.html
這個(gè)網(wǎng)站可以給你一些流行網(wǎng)站和框架排名的有效統(tǒng)計(jì)數(shù)據(jù)，可維持的CSS.它可以展現(xiàn)CSS文件大小的數(shù)據(jù),具體的排名,和使用的CSS屬性。
（需自備墻梯才能打開鏈接）
歸功于Umar Hansa在推特上寫的博客文章。這是Chrome瀏覽器使用的核心CSS文件,該核心CSS文件用來為HTML元素提供以西基本默認(rèn)的樣式。有興趣可以快速瀏覽,因?yàn)樗_實(shí)有一些奇怪。
“列出了在你的文檔里的標(biāo)簽元素里有很多的可以執(zhí)行的東西?！蔽蚁矚g這個(gè)，因?yàn)樗粌H列出了標(biāo)準(zhǔn)的元素，同時(shí)也列出了我們能看見的很多特定的東西，但是對(duì)于這些特定的東西我們也許并不完全理解。
這是一份由Greg Reimer所寫的，覆蓋了ES6 Generators的有著八個(gè)部分的教程?！痹谌缃竦腏avaScript中Generators是一個(gè)最被忽視的功能。我認(rèn)為這是因?yàn)間enerators僅僅是由generators和iterators組成的一個(gè)兩部分整體的一半。而且知道如果只學(xué)習(xí)其中一個(gè)而不學(xué)其他的,則就像是在畫一幅不完整的畫。至少對(duì)于我本人來說,啊哈!那個(gè)時(shí)刻沒有到來知道我縮小范圍并且從整體上看iterators和generators?！?/p>
從技術(shù)上說，這是后端，但是它和JavaScript開發(fā)者息息相關(guān)。這里有為ES2015準(zhǔn)備的兼容的表格集合，但是它只能在Node.js上應(yīng)用。
我在之前一個(gè)帖子里已經(jīng)貼了這個(gè)，但是它被重新設(shè)計(jì)了，而且重新設(shè)計(jì)后的看上去很棒?！边@個(gè)網(wǎng)站測(cè)試了在主流的瀏覽器上對(duì)HTML5新特性的支持程度。這包括它們是否有鍵入訪問權(quán)限，是否允許通過APIs映射到平臺(tái)，并且是否任何涉及到新特性的權(quán)限功能都被支持?！?/p>
“編寫CSS不用再擔(dān)心之前存在的樣式會(huì)帶來問題。MaintainableCSS是編寫模塊化的,可擴(kuò)展的和可擴(kuò)展性的CSS樣式的一種方式。”這是由Adam Silver編寫的有十二個(gè)部分的指南。
15. Simplified JavaScript Jargon
最初是由Hugo Giraudel開始的，這是一個(gè)社區(qū)驅(qū)動(dòng)的試圖用最少簡(jiǎn)單的詞匯來解釋很多時(shí)髦的詞匯，來編織當(dāng)前的JavaScript生態(tài)系統(tǒng)?！边@個(gè)想法并不是取代個(gè)人的文檔，但是可以作為某種形式的術(shù)語表，可以被輕松地引用?！?/p>
一份Bootstrap4的參考手冊(cè),來自HackerThemes網(wǎng)站的Alex。這個(gè)網(wǎng)站有一個(gè)非常漂亮交互式布局,這個(gè)漂亮的交互式布局展示了可被點(diǎn)擊的條目,當(dāng)該條目被點(diǎn)擊時(shí)在該頁面的視口的底端會(huì)有代碼片段和代碼效果顯示出來。你也可以在版本4里點(diǎn)擊突出的所有新的東西。
Bootstrap 4的介紹鏈接地址:http://www.bootcss.com/
17. AngularJS Cheat Sheets（AngularJS參考手冊(cè)）
“我們創(chuàng)建了一些參考手冊(cè)學(xué)習(xí)指南來幫助你克服最初的AngularJS學(xué)習(xí)曲線，并且提供給你的日常工作提供一份參考?！卑ㄈ輩⒖际謨?cè):AngularJS Core Services(AngularJS核心服務(wù)),AngularJS Directive Definition Object(AngularJS指令定義對(duì)象)，和AngularJS ui-router(AngularJS 用戶界面路由)。
Dan Abramov為那些在使用React框架時(shí)有理解不同概念困難的人而制作的一張流程圖。這張流程圖提供了一些可以做和不可以做的類型的建議，來幫助你簡(jiǎn)化事情，這樣你就可以更好地理解這個(gè)庫了。
React介紹鏈接地址:http://www.ruanyifeng.com/blog/2015/03/react.html
19. Flexbox Patterns（可擴(kuò)展布局盒模式）
“Flexbox很棒，但是引入了很多新的概念，這樣做可能使使用它變得有些困難。這些交互示例將會(huì)展示給你很實(shí)際的方法，來使用Flexbox構(gòu)建UI組件。它們以簡(jiǎn)單的代碼，而在結(jié)尾之前得到更復(fù)雜的代碼
Flexbox介紹鏈接地址:http://www.cnblogs.com/starof/p/4894140.html
它不僅僅適用于前端開發(fā)者，同時(shí)也值得在開發(fā)領(lǐng)域的人進(jìn)去看一看?！盩he best defense against hackers(對(duì)抗黑客最好的防御)是一個(gè)見多識(shí)廣的開發(fā)團(tuán)隊(duì)。我們交互式的練習(xí)將教會(huì)你的團(tuán)隊(duì)，關(guān)于如今大多數(shù)的常見的安全漏洞?！?/p>
譯文鏈接：http://www.codeceo.com/article/20-docs-guides-for-web-dev.html
英文原文：20+ Docs and Guides for Front-end Developers (No. 9)
翻譯作者：唐李川
