前端学习网址和工具

工欲善其事必先利其器，在技术快速更新的时代，我们不要闭门造车，要借助的现有的资源提高我们的效率，以下是我整理出来比较实用的网址，会持续更新……

学习的网站

• 纳米学习[http://1nami.com/]

工具网址

• GTmetrix，输入任何你想测评的网址，就可以得到优化建议了。[https://gtmetrix.com/ ]
• 图片压缩[https://tinypng.com/ ]
• 加私有前缀[ https://autoprefixer.github.io/ ]
• 快速生成栅格化 [ http://grid.guide/ ]
• code pen [ https://codepen.io/ ]
• 阿里巴巴矢量图标 [ http://www.iconfont.cn/ ]
• 有字库 [https://www.youziku.com/ ]
• 字体下载 [https://www.fontke.com/font/10728033/ ]
• ico转换工具 [http://www.bitbug.net/ ]
• 查询兼容的网站 [ http://caniuse.com/ ]
• 升级各大浏览器的网站 [ https://browsehappy.com/ ]
• 富文本 [http://www.wangeditor.com/index.html ]
• 大前端 [http://www.daqianduan.com/nav ]
• Javascript ES2015 特性 [https://segmentfault.com/a/1190000011867361 ] [ http://overapi.com/javascript ]
• Javascript 正则表达式 [https://www.debuggex.com/cheatsheet/regex/javascript ]
  -React[ https://devhints.io/react ]
• Vuejs [https://vuejs-tips.github.io/cheatsheet/ ]
• Vuex [ https://vuejs-tips.github.io/vuex-cheatsheet/]
• Angular 4 [ https://angular.io/guide/cheatsheet ]
• Flexbox [ https://yoksel.github.io/flex-cheatsheet/ ]
• SCSS [ https://devhints.io/sass ]
• 好用神器网址 [ http://www.jianshu.com/p/058671d37f4d ]
• h5大纲查询 http://h5o.github.io/
• 验证会html结构是否书写规范 https://validator.w3.org/
• css重置样式1 https://meyerweb.com/eric/tools/css/reset/
• css重置样式2 http://necolas.github.io/normalize.css/
• 腾讯浏览器服务 http://x5.tencent.com/tbs/guide.html
• ui框架 https://www.jianshu.com/p/7df8ca2f8846
• 图表 http://echarts.baidu.com/index.html
• 图片转换工具 https://jinaconvert.com/cn/
• 前端工具导航 http://www.daqianduan.com/nav
• git学习网站 https://learngitbranching.js.org/
• 有趣的js和css库 https://mp.weixin.qq.com/s/pktKzPJWQ1gtdFXxnGHMtQ
• 移动工具箱 http://www.nicetool.net/
• gitbook https://gitbook.cn/
• h5视频 http://chimee.org/#demo
• sgv+vue+ts https://github.com/seanyujc/sgv-cli

动效网站

• loading加载动画[ https://loading.io/ ]
• 按钮动画[ http://www.17sucai.com/pins/demoshow/25581]
• 白鹭时代[https://www.egret.com ]
• canvas-echart图表[http://echarts.baidu.com/ ]
• jquery 插件 [http://www.unheap.com/ ]
• 有关动画网站 [ https://www.awwwards.com/web-animation-infographics-a-map-of-the-best-animation-libraries-for-javascript-and-css3-plus-performance-tips.html ]

插件

• pcikadate 响应式的时间插件
• Magnific-Popup
• 弹幕插件 http://yaseng.org/jquery.barrager.js/

插件工具

• 谷歌浏览器的几款插件
  1、JSONview插件，将json数据美化；
  2、Wappalyzer插件，查看网站用了那些技术；
  3、Vue Devtools插件，可以查看vue整体的结构；

设计网站

• website [ http://reeoo.com/ ]
• seeseed [https://www.seeseed.com/ ]
• bwg [ https://bestwebsite.gallery/ ]
• 天空之城 [ https://www.skypixel.com/ ]
• 500px [https://500px.com/popular ]
• 国外优秀的UI设计资源库 [http://www.w3cplus.com/source/ui-design.html ]
• 20个免费下载PSD设计网站 [ http://www.w3cplus.com/source/20-great-websites-to-download-free-psd-files.html ]
• https://www.iloveimg.com/ 压缩图片
• 设计素材导航 http://hao.shejidaren.com/

设计神器

• logo、背景图快速生成 https://shapefactory.co/
• 炫光生成器 http://weavesilk.com/
• 万箭启发 https://wangyasai.github.io/Stars-Emmision/

书籍

• 《JavaScript DOM编程艺术》
• 《JavaScript权威指南》
• 《javaScript DOM高级程序设计》
• 《JavaScript设计模式》
• 《锋利的jquery》

国外的

• 解决方案 https://stackoverflow.com/
• 可以买卖代码的 http://codecanyon.net

其他

• GitHub最全的前端资源汇总仓库（包括前端学习、开发资源、求职面试等）[https://github.com/helloqingfeng/Awsome-Front-End-learning-resource ]
• 关于js的学习方法 [ https://www.sitepoint.com/projects-can-sometimes-be-the-worst-way-to-learn-javascript/ ]
• 9 个常见错误阻碍你进步 [ https://juejin.im/post/59bb4a7c6fb9a00a53274cd7 ]
• 如何优雅的编写 JavaScript 代码 [ https://zhuanlan.zhihu.com/p/28910636 ]
• 12个免费学编程的网站[ http://www.csdn.net/article/2015-09-09/2825663 ]
• 源码分享网站 [ http://www.zuidaima.com/]
• 编程中国 [ https://www.bccn.net/ ]
• js收藏夹[ https://www.zhihu.com/collection/174332512 ]
• 纳米学习 [http://1nami.com/]
• 打造全满分网站 [ https://segmentfault.com/a/1190000011867361]
• 10 个独特的 CSS 背景视觉效果 [ http://svgtrick.com/tricks/dc4f73cd7193fff5f61dfdb1d36a4b6c]
• git的使用 https://www.imooc.com/article/35753
• js代码常见技巧 https://www.imooc.com/article/35552
• web学习路线 https://www.imooc.com/article/261756