速查手册
飞冰-让前端开发简单而友好 让前端开发简单而友好

文章

前端进阶by Phodal
2019校招面经大汇总!
前端工程化
AJAX总结
前端笔试题面试题记录上
前端笔试题面试题记录下
Github面试题集锦
前端面试笔试
腾讯Web前端笔试题
面试官心得
最全前端资源合集
Frontend Knowledge Structure
JavaScript 内存详解

博客

腾讯AlloyTeam导航
Awesomes.cn
如何跟上前端开发的最新前沿
张鑫旭
AlloyTeam
众成翻译
粉丝日志

Github

Awesome The Front End Develop Guide
大前端的瑞士军刀,只记录有用的。
结合个人经历总结的前端入门方法
爆栈!
腾讯移动 Web 前端知识库
《Node.js 包教不包会》 by alsotang

以下为转载·最全前端资源合集·
整理了来自 CSDN 的前端资源合集,对于我这种前端渣渣来说是最好的宝藏,看了一下真的是非常多,而且有些网站需要翻墙才能打得开,所以可能的话会一步一步把这些网站内容这么多一时间也写不完,所以会慢慢更新。

前端资源合集包括 77 个类别

综合类

综合类 地址
前端书籍 https://github.com/dypsilon/frontend-dev-bookmarks
前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html
前端知识结构 https://github.com/JacksonTian/fks
前端开发笔记本 https://li-xinyang.gitbooks.io/frontend-notebook/content
前端开发者手册 https://dwqs.gitbooks.io/frontenddevhandbook/content
前端免费书籍大全 https://github.com/vhf/free-programming-books
JS 函数式编程指南 http://t.cn/RUb6CuX
重新介绍 JavaScript http://t.cn/RP0NbZo
大前端工具集 - 聂微东 https://github.com/nieweidong/fetool
Web 前端开发大系概览 https://github.com/unruledboy/WebFrontEndStack
免费的编程中文书籍索引 https://github.com/justjavac/free-programming-books-zh_CN
腾讯移动 Web 前端知识库 https://github.com/AlloyTeam/Mars
Web Front-end Stack v2.2 https://img.qqstop.cn/img/WebFrontEndStack.png
智能社 - 精通 JavaScript 开发 http://study.163.com/course/introduction/224014.htm
Web 前端开发大系概览 - 中文版 http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html
JavaScript Promise 迷你书(中文版) http://liubin.github.io/promises-book
JavaScript 中的 this 陷阱的最全收集 http://segmentfault.com/a/1190000002640298
Front-End-Develop-Guide 前端开发指南 http://t.cn/R4czQxk
麻省理工学院公开课:计算机科学及编程导论 http://v.163.com/special/opencourse/bianchengdaolun.html

入门类

入门类 地址
前端入门教程 http://www.cnblogs.com/jikey/p/3613082.html
瘳雪峰的 Javascript 教程 http://dwz.cn/W0kMT
结合个人经历总结的前端入门方法 https://github.com/qiu-deqing/FE-learning
前端工程师必备的 PS 技能——切图篇 http://www.imooc.com/view/506

工具类

工具类 地址
Atom https://atom.io/
SublimeText https://github.com/jikeytang/sublime-text
前端人的俱乐部 http://f2er.club/
visual studio code https://code.visualstudio.com/
css sprite 雪碧图制作 http://www.imooc.com/learn/93
新编码神器 Atom 使用纪要 http://www.jeffjade.com/2016/03/03/2016-03-02-how-to-use-atom/
版本控制入门 – 搬进 Github http://www.imooc.com/learn/390
如何优雅地使用 Sublime Text http://www.jeffjade.com/2015/12/15/2015-04-17-toss-sublime-text/#
IntelliJ IDEA 简体中文专题教程 https://github.com/judasn/IntelliJ-IDEA-Tutorial
Grunt-beginner 前端自动化工具 http://www.imooc.com/learn/30

综合效果搜索平台

综合效果搜索平台 地址
效果网 http://www.jq22.com/
花瓣网 http://huaban.com/
优美图 http://www.topit.me/
摄图网 http://699pic.com/
Codepen http://codepen.io/
Pinterest https://www.pinterest.com/
unsplash.com https://unsplash.com/
New Old Stock http://nos.twnsnd.co/
zoommyapp.com http://zoommyapp.com/
JavaScript 资源大全中文版 https://github.com/jobbole/awesome-javascript-cn
常用的 JavaScript 代码片段 http://microjs.com/
100+ 超全的 web 开发工具和资源 https://xituqu.com/170.html

团队 Blog | 周报类

团队 Blog 周报类 地址
奇舞周刊 http://old.75team.com/weekly/
码农周刊 http://weekly.manong.io/
WEB 前端开发 http://www.css88.com/
A JS tip per day! http://www.jstips.co/
腾讯全端 AlloyTeam http://www.alloyteam.com/webdevelop/
平安科技移动开发二队技术周报 https://github.com/PaicHyperionDev/MobileDevWeekly

开发中心

开发者中心 地址
W3Help http://www.w3help.org/
js 秘密花园 http://t.cn/R6sGYmK
js 秘密花园 http://bonsaiden.github.io/JavaScript-Garden/zh
mozilla js 参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
safari 开发中心 https://developer.apple.com/library/safari/navigation
Microsoft.js 参考 http://t.cn/R6sGflT
chrome 开发中心(chrome 的内核已转向 blink) https://developer.chrome.com/extensions/api_index.html

Node.js

Node.js 地址
Node.js 包教不包会 https://github.com/alsotang/node-lessons
node express 入门教程 http://www.w3cfuns.com/article-5598538-1-1.html
nodejs 定时任务 http://my.oschina.net/u/568264/blog/193773
一个 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://t.cn/hqIEO6
nodejs 事件轮询 http://t.cn/h5Vqo3
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://t.cn/RyHKUZS

综合 API

综合 API 地址
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/

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/

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
淘宝模板 juicer 模板 http://juicer.name/docs/docs_zh_cn.html
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
css3 按钮动画 http://fian.my.id/Waves
animate.css http://daneden.github.io/animate.css
全局 CSS 的终结 [译] http://www.alloyteam.com/2015/10/8536
browserhacks http://browserhacks.com

Angular.js

Angularjs 地址
Angular.js 的一些学习资源 https://github.com/dolymood/AngularLearning
angularjs 中文社区 http://angularjs.cn
Angularjs 源码学习 http://www.cnblogs.com/xuwenmin888/p/3739096.html
Angularjs 源码学习 http://www.ifeenan.com/?c=AngularJS
angular 对 bootstrap 的封装 http://angular-ui.github.io/bootstrap
angularjs + nodejs https://cnodejs.org/topic/51404e0f069911196d2e3923
吕大豹 Angularjs http://www.cnblogs.com/lvdabao/tag/AngularJs
AngularJS 最佳实践 http://www.infoq.com/cn/news/2013/02/angular-web-app
Angular 的一些扩展指令 http://www.lovelucy.info/angularjs-best-practices.html
Angular 数据绑定原理 https://github.com/Pasvaz/bindonce
一些扩展 Angular UI 组件 https://github.com/angular-ui
Ember 和 AngularJS 的性能测试 http://t.cn/R6sGBvw
带你走近 AngularJS - 基本功能介绍 http://t.cn/8ssCbKl
Angularjs 开发指南 http://angular.duapp.com/docs/guide
Angularjs 学习 http://www.cnblogs.com/amosli/p/3710648.html
不要带着 jQuery 的思维去学习 AngularJS http://www.rainweb.cn/article/angularjs-jquery.html
angularjs 学习笔记 http://wangjiatao.diandian.com/?tag=angularjs
angularjs 开发指南 http://www.angularjs.cn/T008
angularjs 英文资料 https://github.com/jmcunningham/AngularJS-Learning
angular bootstrap http://angular-ui.github.io/bootstrap
angular jq mobile http://t.cn/R6sGsFw
angular ui http://mgcrea.github.io/angular-strap
整合 jQuery Mobile+AngularJS 经验谈 http://www.tuicool.com/articles/7ZZVr2
有 jQuery 背景,该如何用 AngularJS 编程思想 http://blog.jobbole.com/46589/
AngularJS 在线教程 http://each.sinaapp.com/angular
angular 学习笔记 http://www.zouyesheng.com/angular.html

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 3053
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
React 原创实战视频教程 http://www.piliyu.com

vue

vue 地址
Vue http://cn.vuejs.org
Vue 论坛 http://forum.vuejs.org
Vue 入门指南 http://www.cnblogs.com/aaronjs/p/3660102.html
Vue 的一些资源索引 http://segmentfault.com/a/1190000000411057
awesome-vue https://github.com/vuejs/awesome-vue

移动端 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://mweb.baidu.com/zeptoapi
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 地址
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

D3 地址
D3 Tutorials https://github.com/mbostock/d3/wiki/Tutorials
Gallery https://github.com/mbostock/d3/wiki/Gallery
lofter http://datavisual.lofter.com/post/40cf3a_188e535
iteye http://alanland.iteye.com/blog/1878595
ruanyifeng http://javascript.ruanyifeng.com/library/d3.html

Requrie.js

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

Sea.js

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 相关 地址
bootcss http://v3.bootcss.com
MetroUICSS http://www.w3cplus.com/MetroUICSS
semantic http://semantic-ui.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 流行库汇总 http://www.javascriptoo.com/
验证 api http://niceue.com/validator/demo/index.php
underscore 中文手册 http://www.css88.com/doc/underscore
underscore 源码分析 http://t.cn/RqZnS09
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
backbone 中文手册 http://www.csser.com/tools/backbone/backbone.js.html
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
svgmdn 参考 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 - 正则表达式 http://t.cn/RvAH8HM
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

前端规范

前端规范 地址
通过分析 github 代码库总结出来的工程师代码书写习惯 http://alloyteam.github.io/CodeGuide
HTML&CSS 编码规范 by@mdo http://codeguide.bootcss.com
团队合作的 css 命名规范 - 腾讯 AlloyTeam 前端团队 http://t.cn/RcXcaMY
前端编码规范之 js - by yuwenhui http://yuwenhui.github.io
前端编码规范之 js - by 李靖 http://t.cn/zQE1sfN
前端开发规范手册 http://zhibimo.com/read/Ashu/front-end-style-guide
Airbnb JavaScript 编码规范(简体中文版) https://github.com/yuche/javascript#table-of-contents
AMD 与 CMD 规范的区别 http://www.zhihu.com/question/20351507
AMD 与 CMD 规范的区别 http://www.cnblogs.com/tugenhua0707/p/3507957.html
KISSY 源码规范 http://t.cn/8sFa4xx
bt 编码规范 http://codeguide.bootcss.com
规范加强版 https://github.com/Suxiaogang/Code_Guide
前端代码规范及最佳实践 http://blog.jobbole.com/79075
百度前端规范 http://coderlmn.github.io/code-standards
百度前端规范 http://isobar-idev.github.io/code-standards
百度前端规范 http://zhuanlan.zhihu.com/fuyun/19884834
ECMAScript6 编码规范 -- 广发证券前端团队 https://github.com/gf-rd/es6-coding-style
JavaScript 风格指南 / 编码规范(Airbnb 公司版) http://blog.jobbole.com/79484
网易前端开发规范 http://nec.netease.com/standard
css 模块 http://www.75team.com/archives/1049
前端规范资源列表 https://github.com/ecomfe/spec

PHP

PHP 地址
最流行的 PHP 代码规范 http://segmentfault.com/a/1190000000443795
最流行的 PHP 代码规范 http://t.cn/zY8VRtf

各大公司开源项目

各大公司开源项目 地址
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://t.cn/RLPjLUl
AEditor http://aeditor.alloyteam.com
maka http://forum.maka.im/wordpress
值得订阅的 weekly https://github.com/fenbility/weekly-feed
腾讯 html5 http://cube.qq.com
奇舞团开源项目 http://75team.github.io
Qunar UED http://ued.qunar.com
Scrat http://scrat.io

常用

常用 地址
IEBetter.js - 让 IE6-IE8 拥有 IE9+,Chrome 等浏览器特性 http://t.cn/8kCZzo9
模拟键盘 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
返回跨域 JSONAPI http://jsonp.afeld.me

焦点图

焦点图 地址
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 方案 地址
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 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
Bootstrap http://www.bootcss.com
Smart UI http://smartui.chinamzz.com
雅虎 UI - CSS UI http://developer.yahoo.com/yui/grids

页面社会化分享功能

页面社会化分享功能 地址
百度分享 http://share.baidu.com
JiaThis http://jiathis.com
社会化分享组件 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
XEditor http://lab.hustlzp.com/XEditor
wangEditor https://github.com/wangfupeng1988/wangEditor

前端概述

前端概述 地址
前端工具大全 http://www.awesomes.cn
什么是前端工程化 http://t.cn/R6sqNE2
[译] 前端攻略 - 从路人甲到英雄无敌 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 图轮播 地址
单屏轮播 sochange http://www.jsfoot.com/jquery/demo/2011-09-20/192.html
左右按钮多图切换 http://bxslider.com/examples/carousel-demystified
fullpage 全屏轮播 https://github.com/alvarotrigo/fullPage.js

移动端图轮播

移动端图轮播 地址
无缝切换 http://www.swipejs.com
滑屏效果 http://www.idangero.us/swiper
全屏 fullpage https://github.com/peunzhang/fullpage
单个图片切换 https://github.com/qiqiboy/touchslider
单个全屏切换 https://github.com/peunzhang/slip.js
百度的切换库 http://t.cn/R6sqlbC
单个全屏切换 https://github.com/peunzhang/iSlider
滑屏效果 https://github.com/saw/touch-interfaces
旋转拖动设置 http://baijs.com/tinycircleslider
类似于 swipe 切换 http://touchslider.com
支持多种形式的触摸滑动 http://www.swiper.com.cn/demo/index.html
滑屏效果 http://t.cn/R6sqT5K
大话主席 pc 移动图片轮换 http://www.superslide2.com
滑屏效果 https://github.com/hahnzhu/parallax.js
基于 zepto 的 fullpage https://github.com/yanhaijing/zepto.fullpage
[WebApp] 定宽网页设计下,固定宽度布局开发 WebApp 并实现多终端下 WebApp 布局自适应 http://t.cn/zj1xq74
判断微信客户端的那些坑 http://t.cn/R2zImUE
可以通过 javascript 直接调用原生分享的工具 https://github.com/JefferyWang/nativeShare.js
JiaThis 分享到微信代码 http://t.cn/zHbPVUS
聊聊移动端跨平台开发的各种技术 http://t.cn/RAFwai0
前端自动化测试 http://www.zhihu.com/question/29922082
多种轮换图片 http://ajccom.github.io/niceslider
滑动侧边栏 https://mango.github.io/slideout

文件上传

文件上传 地址
百度上传组件 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://t.cn/R6sqmx0

模拟 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 高性能动画与页面渲染 http://t.cn/8suvd2x
移动 H5 前端性能优化指南 http://isux.tencent.com/h5-performance.html
5173 首页前端性能优化实践 http://ued.5173.com/?p=1731
给网页设计师和前端开发者看的前端性能优化 http://t.cn/zTImhZJ
复杂应用的 CSS 性能分析和优化建议 http://www.orzpoint.com/profiling-css-and-optimization-notes
张鑫旭——前端性能 http://t.cn/R6stviq
前端性能监控总结 http://www.xiaoqiang.org/javascript/font-end-performance-monitor.html
web 前端性能优化进阶路 http://t.cn/zjsjrxP
前端技术:网站性能优化之 CSS 无图片技术 http://my.eoe.cn/tuwandou/archive/4544.html
浏览器的加载与页面性能优化 http://www.baiduux.com/blog/2011/02/15/browser-loading
页面加载中的图片性能优化 http://www.w3ctech.com/p/1503
Hey——前端性能 http://www.feelcss.com/tag/前端性能
Yslow——性能优化 http://www.yslow.net/category.php?cid=20
YSLOW 中文介绍 http://www.cnblogs.com/yslow
转一篇 Yahoo 关于网站性能优化的文章,兼谈本站要做的优化 http://www.360ito.com/article/40.html
Yahoo! 团队实践分享:网站性能 http://www.360doc.com/content/10/0928/09/2588264_56971287.shtml
网站性能优化指南:什么使我们的网站变慢? http://blog.jiasule.com/i/153
网站性能优化实践,减少加载时间,提高用户体验 http://www.powereasy.net/helpyou/knowledge/ecommerce/9593.html
浅谈网站性能优化前端篇 http://www.umtry.com/archives/747.html
前端重构实践之如何对网站性能优化? http://www.adinnet.cn/blog/designview/2012-7-12/678.html
前端性能优化:使用媒体查询加载指定大小的背景图片 http://t.cn/R6stjmr
网站性能系列博文 http://t.cn/R6stE7I
加载,不只是少一点点 http://t.cn/z0du5e2
前端性能的测试与优化 http://mzhou.me/article/95310
分享网页加载速度优化的一些技巧 http://t.cn/zYaPkSI
页面加载中的图片性能优化 http://www.f2es.com/images-bytes-opt
web 前端优化 (基于 Yslow) http://www.tcreator.info/webSchool/website/Front-end-Opt-Yslow.html
网站性能优化工具大全 https://www.qianduan.net/website-performance-optimization-tool.html
【高性能前端 1】高性能 HTML http://www.alloyteam.com/2012/10/high-performance-html
【高性能前端 2】高性能 CSS http://www.alloyteam.com/2012/10/high-performance-css
由 12306 谈谈网站前端性能和后端性能优化 http://coolshell.cn/articles/6470.html
毫秒必争,前端网页性能最佳实践 http://www.cnblogs.com/developersupport/p/3248695.html
网站性能工具 Yslow 的使用方法 http://blog.sina.com.cn/s/blog_6e9d2e0701017kvu.html
前端工程与性能优化(上):静态资源版本更新与缓存 http://t.cn/z8NY6b4
前端工程与性能优化(下):静态资源管理与模板框架 http://t.cn/z8pTqN4
HTTPS 连接的前几毫秒发生了什么 http://blog.jobbole.com/48369
Yslow http://uicss.cn/yslow/#more-12319
Essential Web Performance Metrics — A Primer, Part 1 http://t.cn/R6st94a
Essential Web Performance Metrics — Part 2 http://t.cn/R6steeS
YUISlide, 针对移动设备的动画性能优化 http://jayli.github.io/blog/data/2011/12/23/yuislide.html
Improving Site Performance http://joelglovier.com/improving-site-performance
让网站提速的最佳前端实践 http://segmentfault.com/a/1190000000367899
Why Website Speed is Important http://sixrevisions.com/web-development/why-website-speed-is-important
Need for Speed – How to Improve your Website Performance http://t.cn/R6stsv8
阿里无线前端性能优化指南 (Pt.1 加载期优化 https://github.com/amfe/article/issues/1

优化工具

优化工具 地址
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://www.alibench.com
阿里 - 免费测试服务 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

推荐作品

推荐作品 地址
winter 代码片段需要翻墙 https://gist.github.com/wintercn
fgm http://www.fgm.cc/learn
岑安作品集 https://github.com/hongru/hongru.github.com
当耐特 demo 集合 http://kmdjs.github.io
米空格 js 作品 http://www.laoshu133.com/Lab
myFocus http://koen301.github.io
SeaJS 组件库 http://panxuepeng.github.io/seajslib
颜海镜作品 http://yanhaijing.com/myProject
脚儿网作品 http://jo2.org/category/myworks
javascript 个人作品 http://www.cnitblog.com/yemoo/category/3107.html
妙味的雷东升游戏作品 http://bbs.miaov.com/forum.php?mod=viewthread&tid=7790
javascript 作品集 http://bbs.csdn.net/topics/380227212
云五笔,灰度产生生成工具 https://github.com/TooBug/works
项目主页 http://koen301.github.io
个性的作品主页 http://zaole.net
播放器 http://static.tingall.com/v2/player
ucren js demos 集 http://ucren.com/blog/demos
智能社 http://www.zhinengshe.com/works_list.html
实例陈列架 http://demos.shizuwu.cn
zoye demo http://zoye.sinaapp.com/demo
王员外 http://lab.yuanwai.wang
平凡 http://pingfan1990.sinaapp.com
jyg 游戏案例 http://www.lovewebgames.com
很多 jquery 插件 http://www.helloweba.com/list.html
不羁虫 - soJs 作品系列 http://www.bujichong.com/sojs/api/index.html
frozenui http://frozenui.github.io/case.html
黑白棋 http://js-game.github.io/othello
fromone http://yansm.github.io/fromone/index.html
pazguille http://pazguille.me
Html5 VideoPlayer https://github.com/zmmbreeze/DeadSimpleVideoPlayer
Proton 烟花 http://a-jie.github.io/Proton/#example

简历模板

简历模板 地址
简历 http://hcy2367.github.io/resume
张伦 http://ncuey.sinaapp.com/CrispElite/
简历 https://github.com/hacke2/ResumeSample
马斯特 http://pinkyjie.com/resume
张秋怡 https://joyeecheung.github.io/resume/
翁天信 http://blog.dandyweng.com/2013/07/how-my-website-was-created
动画方式的简历 http://www.webhek.com/misc/interactive-resume
组件丰富简历 http://www.linqing07.com/resume.html
haorooms 博客 http://www.haorooms.com/about

面试题

面试题 地址
那几个月在找工作(百度,网易游戏) http://www.nowcoder.com/discuss/3196
2014 最新面试题 http://www.html-js.com/article/1743
2016 校招内推 -- 阿里巴巴前端 -- 三面面试经历 http://www.cnblogs.com/imwtr/p/4685546.html
年后跳槽那点事:乐视 + 金山 + 360 面试之行 http://www.cnblogs.com/lvdabao/p/3660707.html
Interviewing a front-end developer http://blog.sourcing.io/interview-questions
拉勾网 js 面试题 http://www.cnblogs.com/52cik/p/js-question-lg.html
前端面试 http://www.cnblogs.com/allenxing/p/3724382.html
Web 开发笔试面试题大全 http://mianshiti.diandian.com
前端开发面试题 http://segmentfault.com/a/1190000000465431
2014 最新前端面试题 http://t.cn/8FzKdfF
百度面试 https://github.com/fex-team/interview-questions
面试题 http://t.cn/R6sc4DC
前端工作面试问题 http://t.cn/RGjmCwz
前端开发面试题 http://segmentfault.com/a/1190000000465431
5 个经典的前端面试问题 http://t.cn/RhnGGUI
最全前端面试问题及答案总结 http://segmentfault.com/a/1190000002562454
如何面试一名前端开发工程师? http://t.cn/RqU7cov
史上最全前端开发面试问题及答案整理 http://t.cn/R2WotE6
前端实习生面试总结 http://www.cnblogs.com/xiaoruo/p/4665163.html
史上最全前端开发面试问题及答案整理 http://t.cn/R2WotE6
BAT 及各大互联网公司 2014 前端笔试面试题:JavaScript 篇 http://blog.jobbole.com/78738
前端开发面试题大收集 http://t.cn/RzUr7wL
收集的前端面试题和答案 https://github.com/qiu-deqing/FE-interview
如何面试前端工程师 http://www.zhihu.com/question/19568008
前端开发面试题 http://t.cn/RLR3JdG
牛客网 - 笔试面经 http://www.nowcoder.com/discuss?type=2

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

Chrome 地址
Google Chrome 官方 https://developer.chrome.com/devtools
Chrome - 基础 http://www.cnblogs.com/constantince/p/4565261.html
Chrome - 进阶 http://www.cnblogs.com/constantince/p/4579121.html
Chrome - 性能 http://www.cnblogs.com/constantince/p/4585983.html
Chrome - 性能进阶 http://www.cnblogs.com/constantince/p/4607497.html
Chrome - 移动 http://www.cnblogs.com/constantince/p/4624241.html
Chrome - 使用技巧 http://www.cnblogs.com/liyunhua/p/4544738.html
Chrome - Console 控制台不完全指南 http://t.cn/RhxRaC2
Chrome - Workspace 使浏览器变成 IDE http://c7sky.com/chrome-devtools-workspace.html
network 面板 http://www.html-js.com/article/Nothing-blind 2975
chrome 开发工具快捷键 http://anti-code.com/devtools-cheatsheet
chrome 调试工具常用功能整理 http://www.html-js.com/article/2327
Chrome 开发工具 Workspace 使用 http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace
Chrome 神器 Vimium 快捷键学习记录 http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html
sass 调试 - w3cplus http://www.w3cplus.com/sassguide/debug.html
如何更专业的使用 Chrome 开发者工具 - w3cplus http://t.cn/RyxzxwG
chrome 调试 canvas http://sentsin.com/web/253.html
chrome profiles1 https://developer.chrome.com/devtools/index
chrome profiles2 http://h5dev.uc.cn/article-25-1.html
chrome profiles3 http://t.cn/zHdFqNB
chrome 移动版调试 https://developer.chrome.com/devtools/docs/mobile-emulation
chrome 调试 http://ued.taobao.org/blog/2012/06/debug-with-chrome-dev-tool
chrome 的调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html
chrome console 命令详解 https://developer.chrome.com/devtools/docs/commandline-api
查看事件绑定 1 http://www.cnblogs.com/leonkao/p/3809655.html
查看事件绑定 2 http://www.cnblogs.com/xiaoyao2011/p/3447421.html
神器——Chrome 开发者工具 http://segmentfault.com/a/1190000000683599
奇趣百科性能优化 (Chrome DevTools 中的 Timeline Profils 等工具使用介绍 ) https://xinranliu.me/2015-05-22-qiqu-performance
chrome 开发者工具的 15 个小技巧 http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html
Chrome 开发者工具不完全指南 http://1ke.co/course/361
Chrome 开发者工具使用技巧 http://segmentfault.com/a/1190000003882567

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 设备 http://t.cn/RZKZqDc
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 http://www.jianshu.com/p/ccf124f1f74b
微信调试的那些事 http://t.cn/RU2TlFd
远程 console http://jsconsole.com
微信调试工具 http://blog.qqbrowser.cc
各种真机远程调试方法汇总 https://github.com/jieyou/remote_inspect_web_on_real_device

iOS Simulator

iOS Simulator 地址
Simulator http://t.cn/R6sVBW0
iOS Simulator 的介绍和使用心得 http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary

Image

Image 地址
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/