软件概览
Front-end-tutorial
与时俱进版前端资源教程
目标与哲学
众所周知，前端发展如火如荼，日新月异，而且很长一段时间内都将如此。这份由晚晴幽草轩轩主正在维护的教程列表；旨在为前端学习，技能提升，视野扩展，资料查找等行个方便。将会在日常工作探索、学习中，持续保持更新，增新优之章，除旧失之文；尽可能使得这份列表保持简练，以避免信息过重且冗杂；望其能在浩如烟海的讯息中，堪有所用。详细说明，可参见：与时俱进版前端资源教程。
分类目录
��
The Future
��
Front-End Tutorial
- 大前端综合
- EcmaScript
- Html(5)
- Css(3)
- Framework News
- Vue
- React
- Angular
- 快应用
✨ - 微信小程序
✨ - Webpack
- Gulp
- UI UI UI
- Optimization
- Testing
��
Back-End Tutorial
��
Front-Back-End Tutorial
��
Other Wizards List
相关链接
| 微信公众号 | 前端微信群 | 推荐 Web 应用 | 推荐小程序 |
|---|---|---|---|
|
|
|
|
|
 |
 |
 |
 |
微注：在继续学习 & 探索 & 积累，并率先于『引』最全前端资源汇集持续更新。
综合类
工具类
| 工具类 | 地址 |
|---|---|
| 倾城利器之家 | https://nicelinks.site/theme/tools 为极大提升效率而存 |
| Web 开发工程师工具推荐 | https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/tools-tutorial.md |
| 前端人的俱乐部 | http://f2er.club/ 真可以解放你的收藏夹 |
| 如何优雅地使用Sublime Text | http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/# |
| 新编码神器Atom使用纪要 | http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/ |
| IntelliJ IDEA 简体中文专题教程 | https://github.com/judasn/IntelliJ-IDEA-Tutorial |
综合效果搜索平台
| 综合效果搜索平台 | 地址 |
|---|---|
| JavaScript 资源大全中文版 | https://github.com/jobbole/awesome-javascript-cn |
| 倾城美图之家 | https://nicelinks.site/theme/picture 高质量图库集 |
| 倾城设计之家 | https://nicelinks.site/theme/design 设计师的修道场 |
| 倾城程序之家 | https://nicelinks.site/theme/program 程序网站导航 |
| 倾城图标之家 | https://nicelinks.site/theme/icons 云集高质量图标社区 |
| 倾城社区之家 | https://nicelinks.site/theme/community 云集高质量交流社区 |
| 倾城搜索直接 | https://nicelinks.site/theme/search 综合 Google 搜索引擎替代品 |
| 100+ 超全的web开发工具和资源 | https://xituqu.com/170.html |
| 设计师网址导航 | http://hao.uisdc.com/ |
| Web前端导航(Alloyteam) | http://www.alloyteam.com/nav/ |
| 快搜 | http://so.chongbuluo.com/ |
| 阿里iconfont | http://www.iconfont.cn/ |
| zoommyapp.com | http://zoommyapp.com/ 高质量图库 |
| unsplash.com | https://unsplash.com/ 高质量图库 |
| www.pinterest.com | https://www.pinterest.com/ 图库 |
| New Old Stock | http://nos.twnsnd.co 复古风图库 |
| 500px.com | https://500px.com/ 唯美照片 |
| 效果网 | http://www.jq22.com |
| 花瓣网 | http://huaban.com/ |
| 优美图 | http://www.topit.me/ |
| codepen | http://codepen.io/ |
| 摄图网 | http://699pic.com/ |
| 常用的JavaScript代码片段 | http://microjs.com |
入门类
| 入门类 | 地址 |
|---|---|
| 前端入门教程 | http://www.cnblogs.com/jikey/p/3613082.html |
| 瘳雪峰的Javascript教程 | http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 |
| 前端工程师必备的PS技能——切图篇 | http://www.imooc.com/view/506 |
| 结合个人经历总结的前端入门方法 | https://github.com/qiu-deqing/FE-learning |
团队Blog
开发中心
| 开发中心 | 地址 |
|---|---|
| mozilla js参考 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript |
| chrome开发中心（chrome的内核已转向blink） | https://developer.chrome.com/extensions/api_index.html |
| safari开发中心 | https://developer.apple.com/library/safari/navigation |
| microsoft js参考 | https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94.aspx |
| js秘密花园 | http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html |
| js秘密花园 | http://bonsaiden.github.io/JavaScript-Garden/zh |
| w3help | http://www.w3help.org 综合Bug集合网站 |
Nodejs
| Nodejs | 地址 |
|---|---|
| Node.js 包教不包会 | https://github.com/alsotang/node-lessons |
| 一个nodejs博客 | http://60sky.com |
| 【NodeJS 学习笔记04】新闻发布系统 | http://www.cnblogs.com/yexiaochai/p/3536547.html |
| 过年7天乐，学nodejs 也快乐 | http://www.cnblogs.com/qqloving/p/3541099.html |
| 七天学会NodeJS | https://github.com/nqdeng/7-days-nodejs |
| Nodejs学习笔记（二）--- 事件模块 | http://www.cnblogs.com/zhongweiv/p/nodejs_events.html |
| nodejs入门 | http://www.cnblogs.com/liusuqi/p/3735491.html |
| angularjs nodejs | https://github.com/zensh/jsgen |
| 从零开始nodejs系列文章 | http://blog.fens.me/series-nodejs |
| 理解nodejs | http://debuggable.com/posts/understanding-node-js:4bd98440-45e4-4a9a-8ef7-0f7ecbdd56cb |
| nodejs事件轮询 | http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop |
| node入门 | http://www.nodebeginner.org/index-zh-cn.html |
| nodejs cms | http://ourjs.com/detail/53e1f281c5910a9806000001 |
| Node初学者入门，一本全面的NodeJS教程 | http://ourjs.com/detail/529ca5950cb6498814000005 |
| NodeJS的代码调试和性能调优 | http://www.barretlee.com/blog/2015/10/07/debug-nodejs-in-command-line |
综合API
| 综合API | 地址 |
|---|---|
| OverAPI.com | http://overapi.com/ |
| javascripting | http://www.javascripting.com |
| 各种流行库搜索 | http://microjs.com |
| runoob.com-包含各种API集合 | http://www.runoob.com |
| 开源中国在线API文档合集 | http://tool.oschina.net/apidocs |
| devdocs | http://devdocs.io 英文综合API网站 |
Ecmascript
| Ecmascript | 地址 |
|---|---|
| Understanding ECMAScript 6 - Nicholas C. Zakas | https://leanpub.com/understandinges6/read |
| exploring-es6 | https://leanpub.com/exploring-es6/read |
| exploring-es6翻译 | https://github.com/es6-org/exploring-es6 |
| exploring-es6翻译后预览 | http://es6-org.github.io/exploring-es6 |
| 阮一峰 es6 | http://es6.ruanyifeng.com |
| 阮一峰 Javascript | http://javascript.ruanyifeng.com |
| ECMA-262，第 5 版 | http://yanhaijing.com/es5 |
| es5 | http://es5.github.io |
Vue
| Vue.js | 地址 |
|---|---|
| Vue2.0 | https://vuefe.cn/ |
| Vue | http://cn.vuejs.org |
| Vue Router | https://router.vuejs.org/ |
| Vuex | https://vuex.vuejs.org/ |
| Vue-Cli | https://github.com/vuejs/vue-cli |
| Vue 论坛 | http://forum.vuejs.org |
| Vue 聊天室 | https://gitter.im/vuejs/vue |
| Vue 入门指南 | http://www.cnblogs.com/aaronjs/p/3660102.html |
| Vue 的一些资源索引 | http://segmentfault.com/a/1190000000411057 |
| awesome-vue | https://github.com/vuejs/awesome-vue |
| vue-syntax-highlight | https://github.com/vuejs/vue-syntax-highlight |
| 如何写一手漂亮的 Vue | http://jeffjade.com/2017/03/11/120-how-to-write-vue-better/?me |
Angularjs
React
| React | 地址 |
|---|---|
| react.js 中文论坛 | http://www.react-china.org |
| react.js 官方网址 | https://facebook.github.io/react/index.html |
| react.js 官方文档 | https://facebook.github.io/react/docs/getting-started.html |
| react.js material UI | http://material-ui.com/# |
| react.js TouchstoneJS UI | http://touchstonejs.io |
| react.js amazeui UI | http://amazeui.org/react |
| React 入门实例教程 - 阮一峰 | http://www.ruanyifeng.com/blog/2015/03/react.html |
| React Native 中文版 | http://wiki.jikexueyuan.com/project/react-native |
| Webpack 和 React 小书 - 前端乱炖 | http://www.html-js.com/article/Fakefish%203053 |
| Webpack 和 React 小书 - gitbook | https://fakefish.github.io/react-webpack-cookbook |
| webpack | https://github.com/webpack/webpack |
| Webpack，101入门体验 | http://html-js.com/article/3009 |
| webpack入门教程 | http://html-js.com/article/3113 |
| 基于webpack搭建前端工程解决方案探索 | http://segmentfault.com/a/1190000003499526 |
Js template
| Js template | 地址 |
|---|---|
| template-chooser | http://garann.github.io/template-chooser |
| artTemplate | https://github.com/aui/artTemplate |
| tomdjs | https://github.com/aui/tmodjs/blob/master/README.md |
| Fxtpl v1.0 繁星前端模板引擎 | http://koen301.github.io/fxtpl |
| laytpl | http://laytpl.layui.com |
| mozilla - nunjucks | https://github.com/mozilla/nunjucks |
| Juicer | https://github.com/PaulGuo/Juicer |
| dustjs | http://akdubya.github.io/dustjs |
| etpl | http://ecomfe.github.io/etpl |
HTML5(HTML)
| HTML(HTML5) | 地址 |
|---|---|
| 深入理解HTML5标签 | https://segmentfault.com/a/1190000002695791 |
| 如何写出高效率的HTML | https://segmentfault.com/a/1190000002680822 |
| HTML meta标签总结与属性使用介绍 | https://segmentfault.com/a/1190000004279791 |
| 戏说HTML5 | http://www.cnblogs.com/dojo-lzz/p/5059316.html |
CSS3(CSS)
| CSS | 地址 |
|---|---|
| CSS 语法参考 | http://tympanus.net/codrops/css_reference |
| 如何编写可维护的CSS | https://github.com/chadluo/CSS-Guidelines/blob/master/README.md |
| CSS3动画手册 | http://isux.tencent.com/css3/index.html |
| 腾讯css3动画制作工具 | http://isux.tencent.com/css3/tools.html |
| 志爷css小工具集合 | http://linxz.github.io/tianyizone |
| css3 js 移动大杂烩 | http://www.note12.com/category/blog/2014-6-5/538fe0a9f786f1b7019a4dfb |
| bouncejs 触摸库 | http://bouncejs.com |
| animate.css | http://daneden.github.io/animate.css |
| 全局CSS的终结(狗带 [译] | http://www.alloyteam.com/2015/10/8536 |
| browserhacks | http://browserhacks.com |
移动端API
| 移动端API | 地址 |
|---|---|
| 99移动端知识集合 | https://github.com/jtyjty99999/mobileTech |
| 移动端前端开发知识库 | https://github.com/AlloyTeam/Mars |
| 移动前端的一些坑和解决方法（外观表现） | http://caibaojian.com/mobile-web-bug.html |
| 【原】移动web资源整理 | http://www.cnblogs.com/PeunZhang/p/3407453.html |
| zepto 1.0 中文手册 | http://www.html-5.cn/Manual/Zepto |
| zepto 1.1.2 | http://www.css88.com/doc/zeptojs_api |
| zepto 中文注释 | http://www.cnblogs.com/sky000/archive/2013/03/29/2988952.html |
| jqmobile 手册 | http://app-framework-software.intel.com/api.php |
| 移动浏览器开发集合 | https://github.com/maxzhang/maxzhang.github.com/issues |
| 移动开发大杂烩 | https://github.com/hoosin/mobile-web-favorites |
jQuery
| jQuery | 地址 |
|---|---|
| YOU MIGHT NOT NEED JQUERY | http://youmightnotneedjquery.com/ |
| jQuery API 中文文档 | http://www.jquery123.com |
| hemin 在线版 | http://hemin.cn/jq |
| css88 jq api | http://www.css88.com/jqapi-1.9/on |
| css88 jqui api | http://www.css88.com/jquery-ui-api |
| 学习jquery | http://learn.jquery.com |
| jquery 源码查找 | http://james.padolsey.com/jquery |
| Web前端资源汇总(jQuery,Js,Css3等) | http://www.cnblogs.com/jihua/p/webfront.html |
D3
Requriejs
| Requriejs | 地址 |
|---|---|
| Javascript模块化编程（一）：模块的写法 | http://www.ruanyifeng.com/blog/2012/10/javascript_module.html |
| Javascript模块化编程（二）：AMD规范 | http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html |
| Javascript模块化编程（三）：require.js的用法 | http://www.ruanyifeng.com/blog/2012/11/require_js.html |
| RequireJS入门（一） | http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html |
| RequireJS入门（二） | http://www.cnblogs.com/snandy/archive/2012/05/23/2513712.html |
| RequireJS进阶（三） | http://www.cnblogs.com/snandy/archive/2012/06/08/2538001.html |
| requrie源码学习 | http://www.cnblogs.com/yexiaochai/p/3632580.html |
| requrie 入门指南 | http://www.oschina.net/translate/getting-started-with-the-requirejs-library |
| requrieJS 学习笔记 | http://www.cnblogs.com/yexiaochai/p/3214926.html |
| requriejs 其一 | http://cyj.me/why-seajs/requirejs/ |
| require backbone结合 | http://www.cnblogs.com/yexiaochai/p/3221081.html |
Seajs
| Seajs | 地址 |
|---|---|
| seajs | http://seajs.org |
| seajs 中文手册 | http://cyj.me/why-seajs/zh |
Less,sass
| Less,sass | 地址 |
|---|---|
| sass | http://www.w3cplus.com/sassguide |
| sass教程-sass中国 | http://www.sass.hk |
| Sass 中文文档 | http://sass.bootcss.com |
| less | http://less.bootcss.com |
Markdown
| Markdown | 地址 |
|---|---|
| Markdown 语法说明 (简体中文版 | http://wowubuntu.com/markdown |
| markdown入门参考 | https://github.com/LearnShare/Learning-Markdown/blob/master/README.md |
| gitbook | https://www.gitbook.com 国外的在线markdown可编辑成书 |
| mdeditor | https://www.zybuluo.com/mdeditor 一款国内的在线markdown编辑器 |
| stackedit | https://stackedit.io 国外的在线markdown编辑器，功能强大，同步云盘 |
| mditor | http://bh-lay.github.io/mditor 一款轻量级的markdown编辑器 |
| lepture-editor | https://github.com/lepture/editor |
| markdown-editor | https://github.com/jbt/markdown-editor |
| 作业部落 | https://www.zybuluo.com 功能强大，速度流畅，全平台同步 |
兼容性
| 兼容性 | 地址 |
|---|---|
| esma 兼容列表 | http://kangax.github.io/compat-table/es6 |
| W3C CSS验证服务 | http://jigsaw.w3.org/css-validator/validator.html.zh-cn |
| caniuse | http://caniuse.com/#index |
| csscreator | http://csscreator.com/properties |
| microsoft | https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx |
| 在线测兼容-移动端 | http://www.responsinator.com |
| emulators | https://www.manymo.com/emulators |
UI相关
| UI相关 | 地址 |
|---|---|
| Foundation | http://foundation.zurb.com/?form=jeffjade.com |
| Bootcss | http://v3.bootcss.com/?form=jeffjade.com |
| Element UI | http://element.eleme.io/#/zh-CN 基于Vue |
| ANT DESIGN | http://ant.design 一个 UI 设计语言 |
| Smart UI | http://smartui.chinamzz.com |
| MetroUICSS | http://www.w3cplus.com/MetroUICSS |
| Semantic | http://semantic-ui.com |
| Layui | http://www.layui.com/?form=jeffjade.com |
| Buttons | http://alexwolfe.github.io/Buttons |
| kitecss | http://hiloki.github.io/kitecss |
| pintuer | http://www.pintuer.com |
| amazeui | http://amazeui.org |
| worldhello | http://www.worldhello.net/gotgithub/index.html |
| linuxtoy | http://igit.linuxtoy.org/contents.html |
| gitmagic | http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn |
| rogerdudler | http://rogerdudler.github.io/git-guide/index.zh.html |
| gitref | http://gitref.justjavac.com |
| book | http://git-scm.com/book/zh |
| gogojimmy | http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic |
其它API
| 其它API | 地址 |
|---|---|
| HTTP API 设计指南 | http://segmentfault.com/bookmark/1230000002521721 |
| javascript流行库汇总 | javascriptoo |
| 验证api | http://niceue.com/validator/demo/index.php |
| underscore 中文手册 | http://www.css88.com/doc/underscore |
| underscore源码分析 | http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031 |
| underscore源码分析-亚里士朱德的博客 | http://yalishizhude.github.io/tags/underscore |
| underscrejs en api | http://underscorejs.org |
| lodash - underscore的代替品 | https://lodash.com |
| ext4api | http://extjs-doc-cn.github.io/ext4api |
| qwrap手册 | http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm |
| 缓动函数 | http://easings.net/zh-cn |
| svg 中文参考 | http://www.w3school.com.cn/svg/svg_reference.asp |
| svg mdn参考 | https://developer.mozilla.org/en-US/docs/Web/SVG |
| svg 导出 canvas | https://github.com/gabelerner/canvg |
| svg 导出 png | https://github.com/exupero/saveSvgAsPng |
| ai-to-svg | http://www.zamzar.com/convert/ai-to-svg |
| localStorage 库 | https://github.com/machao/localStorage |
图表类
| 图表类 | 地址 |
|---|---|
| Highcharts 中文API | http://www.hcharts.cn/api/index.php |
| Highcharts 英文API | http://api.highcharts.com/highcharts |
| ECharts 百度的图表软件 | http://echarts.baidu.com/ |
| 高德地图 | http://lbs.amap.com/api |
| 开源的矢量图脚本框架 | http://paperjs.org |
| svg 地图 | http://jvectormap.com |
正则
| 正则 | 地址 |
|---|---|
| JS正则表达式元字符 | http://segmentfault.com/a/1190000002471140 |
| 正则表达式30分钟入门教程 | http://deerchao.net/tutorials/regex/regex.htm |
| MDN-正则表达式 | https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions |
| ruanyifeng - RegExp对象 | http://javascript.ruanyifeng.com/stdlib/regexp.html |
| 小胡子哥 - 进阶正则表达式 | http://div.io/topic/764?page=1 |
| is.js | https://github.com/Cedriking/is.js/blob/master/is.js |
| 正则在线测试 | http://regexper.com |
前端规范
PHP
| PHP | 地址 |
|---|---|
| 最流行的PHP 代码规范 | http://segmentfault.com/a/1190000000443795 |
| 最流行的PHP 代码规范 | https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md |
各大公司开源项目
| 各大公司开源项目 | 地址 |
|---|---|
| Facebook Projects | https://code.facebook.com/projects/web |
| 百度web前端研发部 | http://fex.baidu.com |
| 百度EFE | http://efe.baidu.com |
| 百度github | https://github.com/fex-team |
| alloyteam | http://www.alloyteam.com |
| alloyteam-github | http://alloyteam.github.io |
| alloyteam-AlloyGameEngine | https://github.com/AlloyTeam/AlloyGameEngine |
| AlloyDesigner | http://alloyteam.github.io/AlloyDesigner 即时修改，即时保存，设计稿较正，其它开发辅助工具 |
| H5交互页编辑器AEditor介绍 | http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao H5动画交互页开发的工具介绍 |
| AEditor | http://aeditor.alloyteam.com H5动画交互页开发的工具 |
| 值得订阅的weekly | https://github.com/fenbility/weekly-feed |
| 奇舞团开源项目 | http://75team.github.io |
| Qunar UED | http://ued.qunar.com |
常用
| 常用 | 地址 |
|---|---|
| ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性 | http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome |
| 模拟键盘 | http://mottie.github.io/Keyboard |
| 拼音 | https://github.com/hotoo/pinyin |
| 中国个人身份证号验证 | https://github.com/mc-zone/IDValidator |
算法
| 算法 | 地址 |
|---|---|
| 数据结构与算法 JavaScript 描述. 章节练习 | https://github.com/Ralph-Wang/algorithm.in.js |
| 常见排序算法（JS版） | https://github.com/twobin/twobinSort |
| 经典排序 | https://github.com/luofei2011/jsAgm/blob/master/js/sort.js |
| 常见排序算法-js版本 | https://github.com/hechangmin/jssort |
| JavaScript 算法与数据结构 精华集 | https://github.com/lightningtgc/JavaScript-Algorithms |
| 面试常考算法题精讲 | http://www.nowcoder.com/live/courses |
移动端
| 移动端 | 地址 |
|---|---|
| fastclick | https://github.com/ftlabs/fastclick |
| no-click-delay | https://github.com/mmastrac/jquery-noclickdelay |
| 【敏捷开发】Android团队开发规范 | http://www.cnblogs.com/lcw/p/3619181.html |
| Android 开发规范与应用 | http://www.jianshu.com/p/4390f4fe19b3 |
| ionic | https://github.com/ychow/ionic-guide |
JSON
| JSON | 地址 |
|---|---|
| 模拟生成JSON数据 | http://beta.json-generator.com |
焦点图
| 焦点图 | 地址 |
|---|---|
| myfocus | https://github.com/koen301/myfocus |
| myfocus-官方演示站 | http://www.chhua.com/myfocus |
| SuperSlidev2.1 -- 大话主席 | http://www.superslide2.com |
| soChange | http://www.bujichong.com/sojs/soChange/index.html |
Ext, EasyUI, J-UI 及其它各种UI方案
| Ext, EasyUI, J-UI 及其它各种UI方案 | 地址 |
|---|---|
| 雅虎UI - CSS UI | http://developer.yahoo.com/yui/grids |
| extjs | https://www.sencha.com/products/extjs |
| ext4英文api | http://docs.sencha.com/extjs/4.0.7 |
| ext4中文api | http://extjs-doc-cn.github.io/ext4api |
| jquery easyui 未压缩源代码 | http://jquery-easyui.googlecode.com/svn/trunk/src |
| J-UI | http://jui.org |
| MUI-最接近原生APP体验的高性能前端框架 | http://dcloudio.github.io/mui |
| Amaze UI(中国首个开源 HTML5 跨屏前端框架) | http://amazeui.org |
| 淘宝 HTML5 前端框架 | http://m.sui.taobao.org |
| KISSY - 阿里前端JavaScript库 | http://docs.kissyui.com |
| 网易Nej - Nice Easy Javascript | http://nej.netease.com |
| Kendo UI MVVM Demo | http://demos.telerik.com/kendo-ui/mvvm/index |
页面 社会化 分享功能
| 页面 社会化 分享功能 | 地址 |
|---|---|
| 百度分享 | http://share.baidu.com pc端 |
| JiaThis | http://jiathis.com pc端 |
| 社会化分享组件 | http://developer.baidu.com/soc/share 移动端 |
| ShareSDK 轻松实现社会化功能 | http://www.mob.com/#/index 移动端 |
| 友盟分享 | http://dev.umeng.com/social/android/quick-integration 移动端 |
富文本编辑器
| 富文本编辑器 | 地址 |
|---|---|
| 功能齐全 tinymce | https://www.tinymce.com |
| 百度 ueditor | http://ueditor.baidu.com/website |
| 经典的ckeditor | http://ckeditor.com |
| 经典的kindeditor | http://kindeditor.net |
| wysiwyg | http://www.bootcss.com/p/bootstrap-wysiwyg |
| 一个有情怀的编辑器。Bach's Editor | http://integ.github.io/BachEditor |
| tower用的编辑器 | https://github.com/mycolorway/simditor |
| summernote 编辑器 | https://github.com/summernote/summernote |
| html5编辑器 | http://neilj.github.io/Squire |
| Quilljs编辑器 | http://quilljs.com |
| wangEditor | https://github.com/wangfupeng1988/wangEditor |
前端概述
| 前端概述 | 地址 |
|---|---|
| 前端工具大全 | http://www.awesomes.cn |
| 什么是前端工程化 | https://github.com/fouber/blog/issues/10?from=timeline&isappinstalled=0# |
| [译] 前端攻略-从路人甲到英雄无敌 | https://segmentfault.com/a/1190000005174755 |
Gulp
| Gulp | 地址 |
|---|---|
| Gulp官网 | http://gulpjs.com |
| Gulp中文网 | http://www.gulpjs.com.cn |
| gulp资料收集 | https://github.com/Platform-CUF/use-gulp |
| Gulp：任务自动管理工具 - ruanyifeng | http://javascript.ruanyifeng.com/tool/gulp.html |
| Gulp插件 | http://gulpjs.com/plugins |
| Gulp探究折腾之路(I) | http://www.jeffjade.com/2015/11/25/2015-11-25-toss-gulp/ |
| Gulp折腾之路(II) | http://www.jeffjade.com/2016/01/19/2016-01-19-toss-gulp/ |
| Gulp不完全入门教程 | http://www.ido321.com/1622.html |
| 为什么使用gulp? | https://github.com/hjzheng/CUF_meeting_knowledge_share/issues/33 |
| Gulp安装及配合组件构建前端开发一体化 | http://www.dbpoo.com/getting-started-with-gulp |
| Gulp 入门指南 | https://github.com/nimojs/gulp-book |
| Gulp 入门指南 - nimojs | https://github.com/nimojs/blog/issues/19 |
| Gulp in Action | http://www.imooc.com/video/5692 |
| Gulp开发教程（翻译） | http://www.w3ctech.com/topic/134 |
| 前端构建工具gulpjs的使用介绍及技巧 | http://www.cnblogs.com/2050/p/4198792.html |
Grunt
| Grunt | 地址 |
|---|---|
| gruntjs | http://gruntjs.com |
| Grunt中文网 | http://www.gruntjs.net |
Fis
| Fis | 地址 |
|---|---|
| fis 官网 | http://fex-team.github.io/fis-site/index.html |
| fis | http://fis.baidu.com |
pc图轮
| pc图轮 | 地址 |
|---|---|
| Vue 的图片轮播组件:vue-slider | https://github.com/qusiba/vue-slider |
| 左右按钮多图切换 | http://bxslider.com/examples/carousel-demystified |
| fullpage全屏轮播 | https://github.com/alvarotrigo/fullPage.js |
移动端图轮
文件上传
| 文件上传 | 地址 |
|---|---|
| 百度上传组件 | http://fex.baidu.com/webuploader |
| 上传 | https://blueimp.github.io/jQuery-File-Upload |
| flash 头像上传 | http://www.hdfu.net |
| 图片上传预览 | http://www.dropzonejs.com |
| 图片裁剪 | http://elemefe.github.io/image-cropper |
| 图片裁剪-shearphoto | http://www.shearphoto.com |
| jQuery图片处理 | http://www.oschina.net/project/tag/284/jquery-image-tools?lang=0&os=0&sort=view&p=2 |
模拟select
| 模拟select | 地址 |
|---|---|
| 糖饼 select | http://aui.github.io/popupjs/doc/selectbox.html |
| flexselect | https://github.com/rmm5t/jquery-flexselect |
| 双select | http://loudev.com |
| select2 | http://select2.github.io |
取色插件
| 取色插件 | 地址 |
|---|---|
| 类似 Photoshop 的界面取色插件 | http://www.jq22.com/plugin/367 |
| jquery color | https://github.com/jquery/jquery-color |
| 取色插件集合 | http://www.oschina.net/project/tag/287/color-picker |
| farbtastic 圆环＋正方形 | https://github.com/mattfarina/farbtastic |
城市联动
| 城市联动 | 地址 |
|---|---|
| jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果 | http://www.ijquery.cn/?p=360 |
剪贴板
| 剪贴板 | 地址 |
|---|---|
| 剪贴板 | https://github.com/zeroclipboard/zeroclipboard |
| clipboard 最新的剪切方案 | http://zenorocha.github.io/clipboard.js |
| 不是Flash的剪贴板 | https://github.com/zenorocha/clipboard.js |
简繁转换
| 简繁转换 | 地址 |
|---|---|
| 简繁转换 | https://github.com/BYVoid/OpenCC |
表格 Grid
| 表格 Grid | 地址 |
|---|---|
| facebook表格 | http://facebook.github.io/fixed-data-table |
| 类似于Excel编辑表格-handsontable | http://handsontable.com |
| bootstrap-table插件 | http://bootstrap-table.wenzhixin.net.cn |
| datatables | https://www.datatables.net |
在线演示
| 在线演示 | 地址 |
|---|---|
| js 在线编辑 - runjs | http://runjs.cn |
| js 在线编辑 - jsbin | http://jsbin.com |
| js 在线编辑 - codepen | http://codepen.io |
| js 在线编辑 - jsfiddle | http://jsfiddle.net |
| java 在线编辑 - runjs | http://ideone.com |
| js 在线编辑 - hcharts | http://code.hcharts.cn |
| js 在线编辑 - jsdm | http://jsdm.com |
| sql 在线编辑 - sqlfiddle | http://sqlfiddle.com |
| mozilla 在线编辑器 | https://thimble.mozilla.org |
常规优化
优化工具
| 优化工具 | 地址 |
|---|---|
| JavaScript 性能分析新工具 OneProfile | http://www.html-js.com/article/3083 |
| JavaScript 堆内存分析新工具 OneHeap | http://www.html-js.com/article/3091 |
在线工具
| 在线工具 | 地址 |
|---|---|
| google在线工具 | https://developers.google.com/speed/pagespeed/insights |
| 阿里-免费测试服务 | http://itest.aliyun.com |
| 阿里-F2etest多浏览器兼容性测试解决方案 | https://github.com/alibaba/f2etest |
| js性能测试 | http://jsperf.com |
前端架构
| 前端架构 | 地址 |
|---|---|
| 技术架构 | http://www.zhihu.com/topic/19612641 |
| 前端架构 | http://saito.im/note/The-Architecture-of-F2E |
| 如何成为前端架构师 | http://www.zhihu.com/question/24092572 |
| 关于前端架构-张克军 | http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html |
| 百度腾讯offer比较（腾讯游戏VS百度基础架构） | http://www.zhihu.com/question/25583350 |
推荐作品
简历模板
面试题
iconfont
| iconfont | 地址 |
|---|---|
| 中文字体 | http://www.zhihu.com/question/21253343 |
| 淘宝字库 | http://iconfont.cn |
| 字体 | http://mux.alimama.com/fonts |
| 制作教程 | http://iconfont.cn/help/platform.html |
| zhangxinxu-icommon | http://www.zhangxinxu.com/wordpress/?s=icomoon |
| icommon | https://icomoon.io/app |
| 用字体在网页中画ICON图标(推荐教程 | http://imooc.com/learn/243 |
| 字体压缩工具 | http://font-spider.org |
Fiddler
| Fiddler | 地址 |
|---|---|
| Fiddler调式使用知多少(一深入研究 | http://www.cnblogs.com/tugenhua0707/p/4623317.html |
| 微信fiddle | http://www.cnblogs.com/strick/p/4570006.html |
| 微信fiddle | http://gaoboy.com/article/26.html |
Chrome
Firebug
| Firebug | 地址 |
|---|---|
| firebug视频教程 | http://www.imooc.com/learn/137 |
| firefox 模拟器 | https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE |
| console.log 命令详解 | http://www.cnblogs.com/ctriphire/p/4116207.html |
| Firebug入门指南 | http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html |
| Firebug控制台详解 | http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html |
移动,微信调试
| 移动,微信调试 | 地址 |
|---|---|
| 浏览器端调试安卓 | https://openstf.github.io |
| 移动端前端开发调试 | http://yujiangshui.com/multidevice-frontend-debug |
| 使用 Chrome 远程调试 Android 设备 | https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md |
| mac移动端调试 | http://plus.uc.cn/document/webapp/doc5.html |
| mac移动端调试 | http://www.mihtool.com |
| 无线调试攻略 | http://thx.github.io/mobile/debugging-in-mobile |
| 无线调试攻略 | http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile |
| 屌爆了,完美调试 微信webview(x5 | http://www.jianshu.com/p/ccf124f1f74b |
| 微信调试的那些事 | 微信调试的那些事 |
| 远程console | http://jsconsole.com |
| 微信调试工具 | http://blog.qqbrowser.cc |
| 各种真机远程调试方法汇总 | https://github.com/jieyou/remote_inspect_web_on_real_device |
iOS Simulator
| iOS Simulator | 地址 |
|---|---|
| Simulator | iOS_Simulator_Guide-Introduction |
| iOS Simulator的介绍和使用心得 | http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary |
Image
| img | 地址 |
|---|---|
| loading img | http://preloaders.net/en/circular |
| 智图-图片优化平台 | http://zhitu.isux.us |
| 在线png优化 | https://tinypng.com |
| SM.MS(图床工具～简易好用) | https://sm.ms/ |
| yutuku：极简图床 | http://yotuku.cn/ |
| Qchan图床 | http://tuchuang.org/ |
浏览器同步
| 浏览器同步 | 地址 |
|---|---|
| puer | https://github.com/leeluolee/puer |
| liveReload | http://livereload.com |
| f5 | http://getf5.com |
| File Watchers | http://geek100.com/2608 |
在线PPT制作
| 在线PPT制作 | 地址 |
|---|---|
| nodePPT | nodePPT |
| Cleaver快速制作网页PPT | http://www.jeffjade.com/2015/10/15/2015-10-16-cleaver-make-ppt/ |
| impress.js | http://www.cnblogs.com/Darren_code/archive/2013/01/04/impressjs.html |
| PPT | https://github.com/ksky521/nodePPT |
| reveal | https://github.com/hakimel/reveal.js |
| bespoke-fx | https://github.com/ebow/bespoke-fx |
| slippy | https://github.com/Seldaek/slippy |
前端导航网站
| 前端导航网站 | 地址 |
|---|---|
| 界面清爽的前端导航 | http://uxbees.com/index.html |
| 前端导航 | http://whycss.com |
| 前端网址导航 | http://www.daqianduan.com/nav |
| 前端名录 | http://sentsin.com/daohang |
| 前端导航 | http://123.jser.us |
| 前端开发资源 | http://www.css88.com/nav |
| 前端开发仓库 - 众多效果的收集地 | http://code.ciaoca.com |
| 前端资源导航 | https://github.com/jnoodle/f2e-collect |
| F2E 前端导航 | http://f2e.im/static/pages/nav/index.html |
常用CDN
| 常用CDN | 地址 |
|---|---|
| 新浪CDN | http://lib.sinaapp.com |
| 百度静态资源公共库 | http://cdn.code.baidu.com |
| 360网站卫士常用前端公共库CDN服务 | http://libs.useso.com |
| Bootstrap中文网开源项目免费 CDN 服务 | http://www.bootcdn.cn |
| 开放静态文件 CDN - 七牛 | http://staticfile.org |
| CDN加速 - jq22 | http://www.jq22.com/cdn |
| jQuery CDN | http://code.jquery.com |
| 微软CDN | http://www.asp.net/ajax/cdn |
Git
| Git | 地址 |
|---|---|
| git-scm | http://git-scm.com |
| 廖雪峰-Git教程 | 廖雪峰-Git教程 |
| git-for-windows | https://git-for-windows.github.io |
| GitHub 添加 SSH keys | http://daemon369.github.io/git/2015/03/10/add-ssh-keys-for-github |
| gogithub | http://www.worldhello.net/gotgithub/index.html |
| git常规命令练习 | http://pcottle.github.io/learnGitBranching |
| git的资料整理 | https://github.com/xirong/my-git |
| 我所记录的git命令（非常实用） | http://www.cnblogs.com/fanfan259/p/4810517.html |
| 企业开发git工作流模式探索部分休整 | https://github.com/xirong/my-git/blob/master/git-workflow-tutorial.md |
| GitHub 漫游指南 | https://github.com/phodal/github-roam |
| GitHub秘籍 | https://github.com/tiimgreen/github-cheat-sheet/blob/master/README.zh-cn.md |
| 使用git和github进行协同开发流程 | http://livoras.com/post/28 |
| 动画方式练习git | http://onlywei.github.io/explain-git-with-d3 |
各种日期日历
Date library
| Date library | 地址 |
|---|---|
| Datejs | https://github.com/datejs/Datejs |
| sugarjs | http://sugarjs.com/api/Date |
其它
| 其它 | 地址 |
|---|---|
| Mock.js 是一款模拟数据生成器 | http://mockjs.com |
| 特色的HTML框架可以创建精美的iOS应用 | http://framework7.taobao.org |
| 淘宝SUI | http://m.sui.taobao.org |
| avalonjs | http://avalonjs.github.io |
| Avalon新一代UI库： OniUI | http://ued.qunar.com/oniui/index.html |
| avalon.oniui-基于avalon的组件库 | https://github.com/RubyLouvre/avalon.oniui |
| 生成二维码(草料) | http://cli.im |
效果类
| 效果类 | 地址 |
|---|---|
| 弹出层 | http://www.imooc.com/learn/58 |
| 焦点图轮播特效 | http://www.imooc.com/learn/18 |
| HTML5 有哪些让你惊艳的 demo？ | http://www.zhihu.com/question/24398907 |
弹出层
| 弹出层 | 地址 |
|---|---|
| artDialog 最新版 | https://github.com/aui/artDialog |
| artDialog 文档 | http://aui.github.io/artDialog/doc/index.html |
| google code 下载地址 | https://code.google.com/p/artdialog/downloads/list |
| 贤心弹出层 | http://layer.layui.com |
| 响应式用户交互组件库 | https://github.com/bh-lay/UI |
| sweetalert-有css3动画弹出层 | http://t4t5.github.io/sweetalert |
优秀JavaScript项目
转载请保留原链接：http://www.jeffjade.com/2016/03/30/104-front-end-tutorial/
您可能感兴趣(/有用)的文章：
-
3.1「Dfinity前端」Front-end概览 Internet Computer区块链允许您通过使用他们的 JavaScript 代理(agent)，为您的 dapps托管 Web 3.0前端。通过使用 dfx 提供的asset canister将静态文件上传到 Internet Computer，您将能够在去中心化技术上运行您的整个应用程序。 这里有一些教程的快速链接，其中包含开发前端 d
相关资料
-
front-end-Doc 前端文档汇总（含代码规范、开发流程、知识分享,持续更新） 综合类 地址 前端文档基本例子 https://github.com/mgbq/front-end-Doc/blob/master/base.md 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/J
-
Grab Front End Guide Credits: Illustration by @yangheng This guide has been cross-posted on Free Code Camp. Grab is Southeast Asia (SEA)'s leading transportation platform and our mission is to drive S
-
Front-end Challenges Este repositório é mantido pela comunidade WoMakersCode, trazendo uma série de desafios e tutoriais sobre Desenvolvimento Front-end. ❓ Não sabe o que é Git ou Github? Se você não
-
目录 HTML5 基础 HTML 介绍 第一个 HTML 页面 HTML 基本元素 HTML 列表 链接元素 图片元素 HTML 表格 HTML 表单 HTML5 新特性 HTML5 介绍 HTML5 表单 音视频处理 Canvas 画布 HTML5 SVG 百度地图 HTML5 拖放 Web Workers Web 存储 Web Sockets CSS 基础 CSS 介绍 如何使用 CSS CS
-
Nice Front-End Tutorial �� Constantly updated front-end resources, tutorials, opinions. 目标与哲学 众所周知，前端发展如火如荼，日新月异，而且很长一段时间内都将如此。这份由晚晴幽草轩轩主正在维护的教程列表；旨在为前端学习，技能提升，视野扩展，资料查找等行个方便。将会在日常工作探索、学习中，持续保持更新，增新优之
-
Front-end tooling recipes Collection of pre-configured front-end tooling setups for common uses. Recipes Compress with Brotli and Gzip - Compress static files with Brotli and Gzip using maximum compre