本周開始,你也許想靜下心來學(xué)些什么新的東西,或者提高一下你在一門特殊計(jì)算機(jī)語言或者技術(shù)的能力。
在四月份,我把a(bǔ) collection of useful docs and guides(一些有用的文檔和指南)打包到了一起,那是一個(gè)很受歡迎的帖子。自此以后,我又收集了一些。請盡情享受!
1. Adobe Web Platform Team(Adobe Web Platform團(tuán)隊(duì))
新設(shè)計(jì)的Adobe Web Platform站點(diǎn)的網(wǎng)頁平臺上有很多新技術(shù)的信息和示例。包括SVG的內(nèi)容,CSS Regions的內(nèi)容,F(xiàn)ilters的內(nèi)容,Web Extensions的內(nèi)容和其他的內(nèi)容。它們產(chǎn)生的很多新的標(biāo)準(zhǔn)都被Adobe team 添加進(jìn)了參考手冊里,因此該站點(diǎn)羅列了一些,你可以通過點(diǎn)擊它們鏈接到參考手冊和代碼示例。
2. Flexbox Cheatsheet Cheatsheet(Flexbox(伸縮布局盒)參考手冊)
Joni Trythall的參考手冊是在多個(gè)參考手冊基礎(chǔ)上制作的,它可以幫助你理解Flexbox(伸縮布局盒)。它是一個(gè)覆蓋了Flexbox(伸縮布局盒)不同方面的流程圖決策樹,因此通過掃一眼這個(gè)圖你就能得到形象化的一切Flebox的知識。在頁面上可以作為一個(gè)PNG格式的圖片或者一個(gè)全尺寸的PDF文件使用。
3. Flexy Boxes(玩轉(zhuǎn)布局盒)
它是Flebox(伸縮布局盒)展示的地方,并且可以生成相應(yīng)的代碼。我喜歡這個(gè)上面的所有附加的選項(xiàng)。每一個(gè)功能的下面都有一個(gè)幫助說明,并且你也可以選擇使用RTL編寫模式,生成舊代碼,同時(shí)也可以不用前綴來觀察只有標(biāo)準(zhǔn)CSS版本的代碼。
RTL介紹鏈接地址: http://baike.sogou.com/v4890574.htm?fromTitle=RTL
4. Grid by Example
它是由Rachel Andrew制作的擁有大量資源的文檔,它覆蓋了CSS Grid Layout Module(CSS網(wǎng)格布局模塊)的可用示例。包括很多相關(guān)的外部鏈接,同時(shí)羅列了覆蓋了說明書的不同部分,并且有可視的示例。
5. CSS Guidelines(CSS指南)
Harry Roberts制作的,它的目標(biāo)是“為理性編寫可管理和可擴(kuò)展的CSS代碼而提供有用的建議和指導(dǎo)”。這里有適合不同CSS開發(fā)者水平的很多內(nèi)容。
6. Foundation 5 Cheat Sheet
它是只有一頁(雖然是一個(gè)很長的頁)的參考站點(diǎn),可以快速地查看到類名在ZURB流行的前端框架的不同部分的使用。我喜歡它在頁面上直接包括示例部分,并且在每個(gè)部分旁邊都有必要的預(yù)先定義好的類列出來。
7. Cheetyr
“它是一個(gè)便利的手冊和快捷方式的集合,可以用來提高設(shè)計(jì)者和開發(fā)者的工作效率。”這個(gè)項(xiàng)目還在繼續(xù)進(jìn)行,但是目前該站點(diǎn)包括可以被搜索到的CSS手冊,Git手冊,Vim手冊,Photoshop手冊,Illustrator手冊和InDesign手冊。
8. keyCod.es
一個(gè)簡便快速的手冊,可以幫助你在鍵盤上獲取不同鍵的正確鍵值。如果你在你的腳本里使用event.keyCode或者event.which來判斷哪個(gè)鍵被用戶按了,該手冊遲早會有用的。
9. AngularJS Style Guide(AngularJS樣式指南)
“它的出發(fā)點(diǎn)是,通過最佳實(shí)踐來為AngularJS開發(fā)團(tuán)隊(duì)提供融合性?!彼鼘?shí)際上有很多的文檔,覆蓋了AngularJS語法超過20個(gè)類別。
10. Poor Man’s Styleguide
“它是一個(gè)應(yīng)急式的前端樣式指南,它可以直接被copy(復(fù)制),然后粘貼到你的CMS項(xiàng)目里?!彼峁┝嗽贖TML和Markdown里的所有不同的元素的代碼,并且在頁面上有所有樣式的顯示效果。
Markdown介紹鏈接地址: http://baike.sogou.com/v7868944.htm?fromTitle=markdown
11. Web Fundamentals(Web 基礎(chǔ))
它是Google(谷歌)開發(fā)者的”現(xiàn)**發(fā)的最佳實(shí)踐”。它覆蓋了很多不同的領(lǐng)域,包括多策略的布局、表單,并且它甚至有一部分還盈利了。
12. CSS PRE(CSS 預(yù)處理)
一份“一站式的手冊”,它用來對照不同的CSS預(yù)處理。它包括了一個(gè)博客部分,一張對照圖表,和一些Less,Sass,和Stylus的轉(zhuǎn)化工具的集合。
Less介紹的鏈接地址: http://lesscss.cn/
Sass介紹的鏈接地址: http://baike.sogou.com/v73912368.htm?fromTitle=SASs
Stylus介紹的鏈接地址: http://blog.fens.me/nodejs-stylus-css/
13. GitHub Cheat Sheet(GitHub參考手冊)
“它是Git和GitHub非常棒的一些功能的列表”。即使你是一個(gè)高級的Git/GitHub用戶,在這里你也可以清楚地找到一些你之前從沒有看到過的東西。
14. HTML Vocabulary(HTML詞匯表)
在最后收集里出現(xiàn)的文檔和”CSS Vocabulary”類似,這個(gè)主要關(guān)注HTML的不同部分。
15. iOS Human Interface Guidelines(iOS人機(jī)界面指南)
它在iTunes商店里可以免費(fèi)使用。它主要是為iOS app開發(fā)者服務(wù)的,但是在它上面也有一些常用的UI設(shè)計(jì)原則的討論,這些對web平臺開發(fā)者或者設(shè)計(jì)者來說可能會有些利用價(jià)值。遵循設(shè)計(jì)原則對構(gòu)建基于web的響應(yīng)式站點(diǎn)非常有幫助,它可以使你制作的native(本地)app更加可用。
16. HTML5 Cheat Sheet(HTML5參考手冊)
它是設(shè)計(jì)的很漂亮的HTML5標(biāo)簽的參考手冊。如果你想有一份方便的復(fù)印件,它可以以PNG格式的文件或者PDF格式的文件打印出來。
17. jQuery Coding Standards & Best Practices(jQuery編碼標(biāo)準(zhǔn)&最佳實(shí)踐)
它是開發(fā)者編寫jQuery最佳實(shí)踐的集合。你或許不贊同描述的所有東西,但是毫無疑問你會找到一些值得思考的的建議。
18. HTML5 Game Engines(HTML5游戲引擎)
它真的很棒。它比較了用來創(chuàng)作基于HTML5游戲的不同庫。每一個(gè)條目都提供了大量的說明,花費(fèi)的成本(如果有的話),過濾的標(biāo)簽,并且在網(wǎng)頁上甚至還有和Amazon網(wǎng)站類似的用戶星評級和評論。
19. You Might Not Need jQuery(你或許不需要jQuery)
你也許已經(jīng)看過這個(gè),因?yàn)楫?dāng)它問世的那一刻它就相當(dāng)?shù)厥軞g迎。它是大量vanilla JavaScript的綜述,相當(dāng)于多種多樣的jQuery方法。但是在后續(xù)文檔里將會有一些有經(jīng)驗(yàn)的jQuery開發(fā)者作注釋,他們會指出為什么你不應(yīng)該那么快地拋棄jQuery。
Vanilla中文社區(qū)鏈接地址: http://vanillaforums.cn/
20. Airbnb JavaScript Style Guide(Airbnb JavaScript樣式指南)
它是一份由受歡迎的國際酒店的站點(diǎn)開發(fā)者制作的樣式指南。你沒必要完全去遵循上面的某些東西,但是像其它的樣式指南一樣,你或許可以挑選出一些內(nèi)容來應(yīng)用到你自己的工作中。
總結(jié)
如果你為精通前端語言或者技術(shù)的某些方面,而編寫了一個(gè)工具或者樣式指南,請?jiān)谠u論區(qū)分享分享,而且或許在之后的一篇文章里我將把它添加進(jìn)去。
20個(gè)為前端開發(fā)者準(zhǔn)備的文檔和指南(1)