前端程式設計師的一些有學習借鑑作用的網站

記錄並分享自己收藏夾中的一些網頁

2017-01-2201. vue-google-map

https://github.com/GuillaumeLeclerc/vue-google-maps

這個網址陪伴了我一個月左右的時間啊，工作以來，第一塊難啃的骨頭。原因大概是：之前沒有接觸過vue.js加上全英文..算是翻山越嶺的一次learning。最後老大來了一句：「everything should be English」 ... that TRUE ！所以啊，英語很關鍵~

02. Vue.js

https://cn.vuejs.org/

目前看來，帶給我的感受就是，易學，易懂，以及輕量。開源啥的都不說了。想學的同學上網搜，或者GitHub上，很多資源啦。晚些時候會把自己做的一個todolist demo 發上來啊。都是跟著教程學的，但是vue.js真的教會我不少啦。還在慢慢爬坑中~

03. Baidu Map

http://lbsyun.baidu.com/

不知道多少程式設計師第一次上手項目時要的功能就是地圖啊。反正我是一開始就弄了兩個地圖啊，每天就是R&D（research and develop）我大概理解是（research and die）。 其實真的說這些開源的API 都是有demo有資源可查的，但是我這根骨頭是把Baidu map 與Vue 結合。 當時剛弄好 vue-google-map，所以覺得會有個vue-baidu-map。吼吼，事實證明，是我想太多。總之最後還是在老大的幫助下實現了功能啊，後來有一天問老大，既然之前沒人弄過vue-baidu-map，要不咱弄一個...然後就沒有然後了啊。老大當時大概的反應就是，what？？？？？

04. dropzone

http://www.dropzonejs.com/#installation

可拖拽文件上傳api..具體功能就是上傳文件不用通過系統的上傳工具啊，直接把想要上穿的文件拖拽到指定區域就行了。。這個也是老大交代下來的R&D啊。看的時候就覺得自己的頭髮一根根往下掉？？？爬坑過程真的是困難，話說回來，單單拿這個插件使用起來是不錯的，除了拖拽，還有預覽，有上傳，刪除功能。但是公司項目需求只是要一個拖拽啊，然後呢，遇到了各種坑，還是沒把這個功能融入到項目中去，最終與之代替的是Reading files in JavaScript using the File APIs 接下來就介紹這個啦。

05. Reading files in JavaScript using the File APIs

https://www.html5rocks.com/en/tutorials/file/dndfiles/

這個說實在我也不太懂的。

"HTML5 finally provides a standard way to interact with local files, via the File APIspecification. As example of its capabilities, the File API could be used to create a thumbnail preview of images as they're being sent to the server, or allow an app to save a file reference while the user is offline."

從網站上copy下來的一段話。大概意思是HTML5終於提供了一個file api 通過這個能實現文件（圖片）上傳預覽功能啦。具體我也不太懂啦。這個是當時老大實現的，因為是全英文啦。如果感興趣的可以去找找中文介紹啦。

06.富文本編輯器

項目現在在用的是summernote——一個UI 友好、開源、免費的，富文本編輯器 。基本滿足基本的編輯功能，主要是summernote與Vue 結合起來很方便啊，文檔也寫得比較易懂，但是需求可能是要我們用一個類似office Word的編輯器？？？ 那就找更符合需求的咯。那我也來分享一下自己的R&D的結果。

UEditor 

百度出的一款編輯器。免費，開源。中文支持良好。目前也做了英文支持。具體操作官網文檔上有的。 個人覺得，界面不是很友好啊，但是功能確實多。

wangEditor 

基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費 ——摘自官網的一句話，網上評價還是不錯的，但是由於需求不對應，所以沒有具體了解啊，喜歡的同學可以試試~

Tinymce 

目前最優秀的 開源免費編輯器之一，這個是我個人最喜歡的編輯器了啊，界面很友好啊，功能都滿足了需求，唯一不盡人意的就是，與Vue結合起來有點困難（對於我來說），因此跟項目的timeline比起來還是timeline更重要啦。感興趣的同學可以試試。

Froala 

這個編輯器是收費的啦，但是也提供了免費版本，當然是功能閹割版啦。不過要是項目能支持的話，用這個是再好不過啦，界面很友好，功能也豐富（付費版），但是與vue結合的時候遇到了一些問題啦，不過因為收費，最終還是沒使用。

（就介紹這幾個我了解過的啦。網上還有很多開源免費的富文本編輯器啦。ps：以上順序不代表排名。博主隨意標註的啦~）

07. vue-router

https://router.vuejs.org/en/essentials/getting-started.html

知道vue.js的同學肯定要知道vue-router啦。是vue2提供的一個路由插件啦。很好用的。主要是實現幾個組件之前的切換啦。可以看看網上的demo，給我的感覺就是像過氣的iframe？但是比iframe肯定好用很多啦。不得不多吹一下vue，畢竟是我學會的第一個框架。:-)   vue裡面還有很多很好用的功能，文檔裡都有，感興趣的同學可以去查看。

08. Animate.css

https://daneden.github.io/animate.css/

前端的同學必須要看看啦。不知道怎麼解釋啦，看了就知道！！

09.firebase

https://firebase.google.com/?hl=zh-TW

firesbase 一個online database，有免費和收費版，意在幫助開發者，快速搭建app提供資料庫支持，因為是online 的啊  基本不用怎麼配置，只要知道怎麼把它引入到自己的項目中就行了。支持Android iOS Web。博主目前準備爬這個坑啦，有同學一起嘛~

2017-12-2610.vivify

http://vivify.mkcreative.cz/

vivifyshi是一個css動畫庫，其中動畫相較Animate.css 更加豐富，個人覺得兩個可以互相彌補。

11.YOU MIGHT NOT NEED JQUERY

http://youmightnotneedjquery.com/

這個厲害了，大家都知道JQuery是一個特別方便的框架，但是畢竟是需要加載或引入的資源。所以，這個網站就像它名字一樣——「你或許並不需要JQuery」，這裡面提供了大部分常用的JQuery 方法的JavaScript 版，並且提供了針對IE的兼容解決方法。如果您的項目或者網頁只有幾個小小的特效，不妨試試參考這個網站吧。

12.Iconfont-阿里巴巴矢量圖標庫

http://www.iconfont.cn/

這個是阿里巴巴做的一個icon網站，裡面的圖標類別特別多，網站同時提供不同色彩，不同文件類型的選擇下載。平時喜歡找素材的同學不妨收藏啦~

13.cubic-bezier

http://cubic-bezier.com

看到這兩個單詞相信經常寫複雜過度效果或者動畫的同學不會陌生。於是，我們需要知道貝塞爾曲線的值是多少並實時預覽效果咋整呢！於是這個網站提供了這個功能。

14.You-Dont-Need-JavaScript

https://github.com/you-dont-need/You-Dont-Need-JavaScript

You Dont Need 系列，相信許多同學都希望項目裡面，能用css解決的效果，堅決不用JS，於是就有了這個啦，有同樣想法的同學不妨學習學習哦。

15.React 入門實例（阮一峰著）

http://www.ruanyifeng.com/blog/2015/03/react

學習新知識就找阮老師的博客，不知道大傢伙是不是都這樣，至少我是的。最近算是把React的基礎學了一遍，阮老師這篇博客雖然是幾年前的，但是現在學起來依舊受益匪淺，想要入門React.js的同學可以去看看，裡面的例子也很詳細。

16.Sass用法指南（阮一峰著）

http://www.ruanyifeng.com/blog/2012/06/sass.html

同樣的，阮老師寫的這篇介紹Sass的博客，把Sass的特性講的很好，可以跟著學習。

17.Simple CSS Spinners

http://tobiasahlin.com/spinkit/

這裡展示了12個純css寫的loading. 還在用gif做loading的同學不妨看看有沒有滿足您需求的哦！

18.JavaScript Promise 迷你書

http://liubin.org/promises-book

這本電子書，比較詳細講述了JS中Promise的知識點，知道JS的異步編程以及回調地獄的同學不妨試試學習這個哦。

19.面試相關

1.流形：我是如何面試一位前端工程師

2.最新前端面試題

3.阿里、網易、滴滴共十次前端面試碰到的問題

4.破解前端面試（80% 應聘者不及格系列）：從 閉包說起

5.markyun My-blog/Front-end-Developer-Questions/Questions-and-Answers/

2017-12-2920.PACE 頁面加載loading

http://github.hubspot.com/pace/docs/welcome/

這是一個每次頁面加載時會出現的loading插件,用法很簡單,在頁面引入插件庫中的代碼即可,有興趣的同學可以看看.

21.關於JavaScript Tips

http://www.jstips.co/zh_CN/javascript/

看名字就知道了 這是一個傳授小技巧的網站, 內容不算太多吧(個人感覺).搬磚累了可以去看看.

22.Mock.js

http://mockjs.com/

對於想要做前後端分離,單頁面應用的卻不太了解後端知識的同學再適合不過了,這個插件支持很多類型的模擬數據,配置好之後會自動攔截Ajax請求,後端邏輯沒有也不用擔心頁面空白啦~

23.Swiper

http://www.swiper.com.cn/

中文網給的評價是開源、免費、強大的移動端觸摸滑動插件。

移動端開發，h5開發，或者是頁面上的一個輪播，翻頁(如果你不在乎項目體積) 都可以用的Api文檔都比較全，主要是有中文網，哈哈哈。

哦對，之前在Vue項目中用過swiper，但是在npm run build 的時候會報錯，找到的解決方法是不用這個庫。哈哈哈為什麼呢，因為已經有大神把Swiper封裝成Vue插件啦，接下來就介紹。

24.vue-awesome-swiper

https://github.com/surmon-china/vue-awesome-swiper

這是一位大神做的Vue版Swiper，用這個插件確實能解決 npm run bulid 使用原版Swiper報錯的問題，但具體原因，怎麼解決的我沒有去了解。

然後就是這個vue-awesome-swiper封裝的功能是很全面了，api直接參照Swiper官網。

插件的使用方法大神在github上講的很清楚啦。同時也提供了SSR解決方案。厲害厲害！

25.Muse-UI

http://www.muse-ui.org/#/index

官網介紹：基於 Vue 2.0 和 Material Design(本人比較喜歡的一種設計風格) 的 UI 組件庫。

這個組件庫有中文文檔，組件也比較豐富，如果希望 Material Design 和Vue的同學,不妨在自己的項目裡面嘗試一下。

26.Google Fonts

https://fonts.google.com/ (需科學上網)

這個是谷歌的開源字體庫，裡面提供多種語言的豐富樣式的字體，並且是免費下載，或者直接複製 <link>地址(需科學上網)，建議自主下載字體文件到項目中使用。噢對，這個字體庫似乎是沒有中文字體的。

27.Material Design Icon

https://material.io/icons/ (需科學上網)

上文提到了Material Design,所以這裡就順帶把這個圖標庫po出來,這個是谷歌提供的基於Material Design的一套icon,種類比較豐富,覆蓋領域也算還行,喜歡Material Design的話就可以在這裡找找需要的icon噢~

28.iCSS

https://github.com/chokcoco/iCSS

你想知道的 CSS 奇技淫巧，在這裡，都有。

本系列圍繞 CSS 展開，談一些有趣的話題，內容天馬行空，想到什麼說什麼，不僅是為了拓寬解決問題的思路，更涉及一些容易忽視或是十分有趣的 CSS 細節。

29.svgtrick

http://svgtrick.com/

想要了解SVG的同學可以看看這個網站提供的一些例子,可以找找靈感,其中也不乏CSS的動畫實例,都有提供demo哦。

30.cube-ui

https://didi.github.io/cube-ui/#/zh-CN

這是一個基於Vue.js的移動端UI組件庫,是DiDi滴滴出行做的一款UI組件庫,github的star有2000+ 文檔中有提供手機預覽。

接下來就是一些個人覺得很好看的網站和一些很有意思的css特效啦！（canvas 很深奧啊~~）

http://blockstudio.tw/en/

http://norgram.co/

https://www.obrigadonatural.com/en_gb

https://tympanus.net/Development/HoverEffectIdeas/index.html

http://www.2lgstudio.com/

https://www.ginlane.com/

以上網址都沒有任何商業，廣告等盈利目的。內容均來自本人日常收集。純屬分享，內容如有雷同，純屬巧合啦。侵刪。

感謝閱讀。

相關文章推薦

前端入行兩年 -- 教會了我這些道理

20 個很有幫助的 Web 前端開發資源

最經典的前端面試題之一，你能答出什麼么蛾子？

歡迎關注 SegmentFault 微信公眾號 :)