記錄并分享自己收藏夾中的一些網(wǎng)頁

2017-01-22

01. vue-google-map

https://github.com/GuillaumeL...

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

02. Vue.js

https://cn.vuejs.org/

目前看來，帶給我的感受就是，易學，易懂，以及輕量。開源啥的都不說了。想學的同學上網(wǎng)搜，或者GitHub上，很多資源啦。晚些時候會把自己做的一個todolist demo 發(fā)上來啊。都是跟著教程學的，但是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。吼吼，事實證明，是我想太多。總之最后還是在老大的幫助下實現(xiàn)了功能啊，后來有一天問老大，既然之前沒人弄過vue-baidu-map，要不咱弄一個...然后就沒有然后了啊。老大當時大概的反應就是，what？？？？？

04. dropzone

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

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

05.?Reading files in JavaScript using the File APIs

https://www.html5rocks.com/en...

這個說實在我也不太懂的。"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."——從網(wǎng)站上copy下來的一段話。大概意思是HTML5終于提供了一個file api 通過這個能實現(xiàn)文件（圖片）上傳預覽功能啦。具體我也不太懂啦。這個是當時老大實現(xiàn)的，因為是全英文啦。如果感興趣的可以去找找中文介紹啦。

06.富文本編輯器

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

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

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

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

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

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

07. vue-router

https://router.vuejs.org/en/e...

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

08. Animate.css

https://daneden.github.io/ani...

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

09.firebase

https://firebase.google.com/?...

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

---

2017-12-26

?

10.vivify

http://vivify.mkcreative.cz/

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

11.YOU MIGHT?NOT NEED?JQUERY

http://youmightnotneedjquery....

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

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

http://www.iconfont.cn/

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

13.cubic-bezier

http://cubic-bezier.com

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

14.You-Dont-Need-JavaScript

https://github.com/you-dont-n...

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

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

http://www.ruanyifeng.com/blo...

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

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

http://www.ruanyifeng.com/blo...

同樣的，阮老師寫的這篇介紹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.阿里、網(wǎng)易、滴滴共十次前端面試碰到的問題

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

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

---

2017-12-29

20.PACE 頁面加載loading

http://github.hubspot.com/pac...
這是一個每次頁面加載時會出現(xiàn)的loading插件,用法很簡單,在頁面引入插件庫中的代碼即可,有興趣的同學可以看看.

21.關于JavaScript Tips

http://www.jstips.co/zh_CN/ja...
看名字就知道了 這是一個傳授小技巧的網(wǎng)站, 內容不算太多吧(個人感覺).搬磚累了可以去看看.

22.Mock.js

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

23.Swiper

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

中文網(wǎng)給的評價是開源、免費、強大的移動端觸摸滑動插件

移動端開發(fā),h5開發(fā),或者是頁面上的一個輪播,翻頁(如果你不在乎項目體積) 都可以用的Api文檔都比較全.主要是有中文網(wǎng),哈哈哈
哦對,之前在Vue項目中用過swiper,但是在npm run build 的時候會報錯, 找到的解決方法是不用這個庫. 哈哈哈 為什么呢, 因為已經(jīng)有大神把Swiper封裝成Vue插件啦,接下來就介紹

24.vue-awesome-swiper

https://github.com/surmon-chi...
這是一位大神做的Vue版Swiper,用這個插件確實能解決npm run bulid 使用原版Swiper報錯的問題,但具體原因,怎么解決的我沒有去了解.哈哈哈
然后就是.這個vue-awesome-swiper封裝的功能是很全面了,api直接參照Swiper官網(wǎng).插件的使用方法大神在github上講的很清楚啦.同時也提供了SSR解決方案.厲害厲害!

25.Muse-UI

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

官網(wǎng)介紹:基于 Vue 2.0 和 Material Design(本人比較喜歡的一種設計風格) 的 UI 組件庫

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

26.Google Fonts

https://fonts.google.com/ (需科學上網(wǎng))
這個是谷歌的開源字體庫,里面提供多種語言的豐富樣式的字體,并且是免費下載,或者直接復制<link>地址(需科學上網(wǎng)),建議自主下載字體文件到項目中使用,噢對,這個字體庫似乎是沒有中文字體的.

27.Material Design Icon

https://material.io/icons/ (需科學上網(wǎng))
上文提到了Material Design,所以這里就順帶把這個圖標庫po出來,這個是谷歌提供的基于Material Design的一套icon,種類比較豐富,覆蓋領域也算還行,喜歡Material Design的話就可以在這里找找需要的icon噢~

28.iCSS

https://github.com/chokcoco/iCSS

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

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

iCSS官方說法

29.svgtrick

http://svgtrick.com/
想要了解SVG的同學可以看看這個網(wǎng)站提供的一些例子,可以找找靈感,其中也不乏CSS的動畫實例,都有提供demo哦

30.cube-ui

https://didi.github.io/cube-u...
這是一個基于Vue.js的移動端UI組件庫,是DiDi滴滴出行做的一款UI組件庫,github的star有2000+ 文檔中有提供手機預覽

接下來就是一些個人覺得很好看的網(wǎng)站和一些很有意思的css特效啦！

（canvas 很深奧啊）

http://blockstudio.tw/en/

http://norgram.co/

https://www.obrigadonatural.c...

https://tympanus.net/Developm...

http://www.2lgstudio.com/

https://www.ginlane.com/

第一次分享。不足之處多多指點~

第二次分享。不足之處多多指點~

第三次分享。不足之處多多指點~

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

感謝閱讀

總結

以上是生活随笔為你收集整理的前端程序员的一些有学习借鉴作用的网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。