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