“前端程序员的一些有学习借鉴作用的网站”

2017-01-22 本文已影响444人小罗程序员

记录并分享自己收藏夹中的一些网页

2017-01-22

01. vue-google-map

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

这个网址陪伴了我一个月左右的时间啊，工作以来，第一块难啃的骨头。原因大概是：之前没有接触过vue.js加上全英文..算是翻山越岭的一次learning。最后老大来了一句：“everything should be English” ... that TRUE ！所以啊，英语很关键~

02. Vue.js

https://vuejs.org/ vue.js

目前看来，带给我的感受就是，易学，易懂，以及轻量。开源啥的都不说了。想学的同学上网搜，或者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 theFile 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的结果。

1.UEditor百度出的一款编辑器。免费，开源。中文支持良好。目前也做了英文支持。具体操作官网文档上有的。个人觉得，界面不是很友好啊，但是功能确实多。

2.wangEditor基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费 ——摘自官网的一句话，网上评价还是不错的，但是由于需求不对应，所以没有具体了解啊，喜欢的同学可以试试~

3.CKEditor目前最优秀的开源免费编辑器之一，虽说是开源，免费，但是有的功能还是收费的。这款编辑器功能确实强大啊，界面也友好，但是个人觉得文档可阅读性不高，所以也没具体了解啦

4.Tinymce目前最优秀的开源免费编辑器之一，这个是我个人最喜欢的编辑器了啊，界面很友好啊，功能都满足了需求，唯一不尽人意的就是，与Vue结合起来有点困难（对于我来说），因此跟项目的timeline比起来还是timeline更重要啦。感兴趣的同学可以试试。

5.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-26

10.vivify

http://vivify.mkcreative.cz/

vivifyshi是一个css动画库，其中动画相较Animate.css更加丰富，个人觉得两个可以互相弥补。

11.YOU MIGHTNOT NEEDJQUERY

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的同学可以去看看，里面的例子也很详细。