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

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


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


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



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


“Webpack是一款流行的??櫬虬ぞ?,它能在語塊里很方便地打包應用的代碼資源,并且它能從一個服務器里把代碼加載到一個瀏覽器里?!閉夥葜改顯贏ngular的官網上有,這份指南已經準備好在Angular2應用里使用Webpack。


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


“HTML元素是如何被屏幕閱讀器所支持的?!痹赪indows10操作系統上的Firefox瀏覽器里,在VoiceOver上的Firefox瀏覽器里和在OSX操作系統上的Safari9瀏覽器上,和在Windows8.1操作系統上的NVDA和Firefox瀏覽器里是由四個表格組成的數據來覆蓋JAWS的, 還有更多的測試。


JAWS介紹鏈接地址: //wenku.baidu.com/view/18d8337a1711cc7931b716d4.html


VoiceOver介紹鏈接地址: //baike.sogou.com/v7818959.htm?fromTitle=voiceover


OSX介紹鏈接地址: //baike.sogou.com/v286354.htm?fromTitle=OSX


NVDA介紹鏈接地址: //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?!?/p>


Telerik的介紹鏈接地址: //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、Cheat Sheet


“列出了在你的文檔里的標簽元素里有很多的可以執行的東西?!蔽蟻不墩飧?,因為它不僅列出了標準的元素,同時也列出了我們能看見的很多特定的東西,但是對于這些特定的東西我們也許并不完全理解。




11、Generators and Iterators


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




12、Node.js ES2015 Support


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




13、HTML5 Accessibility


我在之前一個帖子里已經貼了這個,但是它被重新設計了,而且重新設計后的看上去很棒?!閉飧鐾靜饈粵嗽謚髁韉匿榔魃隙訦TML5新特性的支持程度。這包括它們是否有鍵入訪問權限,是否允許通過APIs映射到平臺,并且是否任何涉及到新特性的權限功能都被支持?!?/p>




14、MaintainableCSS


“編寫CSS不用再擔心之前存在的樣式會帶來問題。MaintainableCSS是編寫??榛?可擴展的和可擴展性的CSS樣式的一種方式?!閉饈怯葾dam Silver編寫的有十二個部分的指南。




15、Simplified JavaScript Jargon


最初是由Hugo Giraudel開始的,這是一個社區驅動的試圖用最少簡單的詞匯來解釋很多時髦的詞匯,來編織當前的JavaScript生態系統?!閉飧魷敕ú⒉皇僑〈鋈說奈牡?,但是可以作為某種形式的術語表,可以被輕松地引用?!?/p>




16、Bootstrap 4 Cheat Sheet


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


Bootstrap 4的介紹鏈接地址: //www.bootcss.com/




17、AngularJS Cheat Sheets(AngularJS參考手冊)


“我們創建了一些參考手冊學習指南來幫助你克服最初的AngularJS學習曲線,并且提供給你的日常工作提供一份參考?!卑ㄈ薟慰際植?AngularJS Core Services(AngularJS核心服務),AngularJS Directive Definition Object(AngularJS指令定義對象),和AngularJS ui-router(AngularJS 用戶界面路由)。




18、React Makes You Sad


Dan Abramov為那些在使用React框架時有理解不同概念困難的人而制作的一張流程圖。這張流程圖提供了一些可以做和不可以做的類型的建議,來幫助你簡化事情,這樣你就可以更好地理解這個庫了。


React介紹鏈接地址: //www.ruanyifeng.com/blog/2015/03/react.html




19、Flexbox Patterns(可擴展布局盒模式)


“Flexbox很棒,但是引入了很多新的概念,這樣做可能使使用它變得有些困難。這些交互示例將會展示給你很實際的方法,來使用Flexbox構建UI組件。它們以簡單的代碼,而在結尾之前得到更復雜的代碼


Flexbox介紹鏈接地址: //www.cnblogs.com/starof/p/4894140.html




20、Hacksplaining


它不僅僅適用于前端開發者,同時也值得在開發領域的人進去看一看?!盩he best defense against hackers(對抗黑客最好的防御)是一個見多識廣的開發團隊。我們交互式的練習將教會你的團隊,關于如今大多數的常見的安全漏洞?!?/p>


當然如果需要幫助,請在線咨詢小碼哥HTML5前端培訓~


來源:碼農網

上一篇: HTML 5 實戰 之 HTML 5中的重要元素與公共屬性

下一篇: javascript對象(1)

分享到: 更多
彩神计划总站 福建时时开奖列表 赛车pk拾免费软件 江苏时时开奖号码走势图 时时彩怎么买稳赚不赔 黄金计划软件手机版 网上棋牌赌博通比牛牛 重庆老时时彩 重庆时时组六杀号技巧 稳赚七码倍投方案表 前三组选包胆是什么意思? 重庆时时开奖结果 pk10赌博带人计划骗局 老虎机怎么玩 规则 打鱼游戏 天津时时下载手机版