frontend-navigation

技术资讯信息导航，我想记录一些技术的地址方便自己没事的时候逛

列表

• 美团技术团队博客
• 阿里无线前端
• 天猫前端
• 玉伯的blog
• xufei 民工精髓
• risingstack
• w3ctech
• react-china
• es6学习
• Cnode社区
• 淘宝前端团队
• F2E 前端技术社区
• echojs
• 淘宝ued
• Hacker News
• statistics and a ranking of the 10k most popular JavaScript projects on GitHub
• 天镶的博客
• lobste
• css-tricks
• ES6入门
• javascript
• codepen
• 异步编程之Promise
• javascript标准参考教程
• 回田园
• 寸志
• 云风的blog
• 三清水
• 三清水的分享
• 大搜车前端团队博客
• 19楼UED
• Kuitos's Blog
• i5ting的react入门
• div.io
• w3cplus
• w3 help
• 稀土掘金
• 前端早读课
• 极限前端
• riskers blog
• 前端资源库
• thefullstack
• Startup News
• Front-End-Develop-Guide
• 前端外刊评论
• crzidea(美团的童鞋)
• 醬爆的不穩定因素
• 黄玄的博客

腾讯

• MacQQ的项目团队 IBlog
• 财付通设计中心 UID
• QQ邮箱博客
• QQ客户端团队博客
• 腾讯用户研究与体验设计中心 CDC
• 腾讯Web前端 Alloy 团队 Blog
• 腾讯微信博客
• 腾讯游戏官方设计团队TGideas
• QQ游戏设计中心GDC
• 腾讯移动互联网设计团队MXD
• 腾讯电商用户设计体验部ECD
• 腾讯社交用户体验设计部ISUX
• 腾讯大讲堂

阿里

• 阿里巴巴中国站用户体验设计部UED
• 淘宝网UED官方博客
• 支付宝用户体验部UED
• 支付宝官方博客
• 阿里巴巴国际站UED团队
• 淘宝良无限（无名良品)用户体验团队博客UED
• 淘宝一淘用户体验中心UX
• 阿里集团数据平台官方博客
• 支付宝中间件团队
• 天猫UED
• 淘宝核心系统团队RDC

百度

• 百度泛用户体验部UUX
• 百度无线用户体验部MUX
• 百度商业用户体验部UED

搜狐

• 搜狐畅游视觉设计中心团队VC
• 搜狐焦点用户体验设计UED

新浪

• 新浪微博用户体验设计中心UDC
• 新浪UED

360

• 奇虎360公司应用开发部Web前端
• 360UXC用户体验设计中心

携程

• 携程旅行前端开发团队UED

网易

• 网易用户体验设计中心UEDC

迅雷

• 迅雷用户体验设计中心CUED

angular资源

• AngularJS在线教程

微信html5开发框架

• vux
• ratchet
• SUI
• weui

1. 综合类

• 前端知识体系
• 前端知识结构
• Web前端开发大系概览
• Web前端开发大系概览-中文版
• Web Front-end Stack v2.2
• 免费的编程中文书籍索引
• 前端书籍
• 前端免费书籍大全
• 前端知识体系
• 免费的编程中文书籍索引
• 智能社 - 精通JavaScript开发
• 重新介绍 JavaScript（JS 教程）
• 麻省理工学院公开课：计算机科学及编程导论
• JavaScript中的this陷阱的最全收集--没有之一
• JS函数式编程指南
• JavaScript Promise迷你书（中文版）
• 腾讯移动Web前端知识库
• Front-End-Develop-Guide 前端开发指南
• 前端开发笔记本
• 大前端工具集 - 聂微东
• 前端开发者手册

入门类

• 前端入门教程
• 瘳雪峰的Javascript教程
• jQuery基础教程
• 前端工程师必备的PS技能——切图篇
• 结合个人经历总结的前端入门方法

效果类

• 弹出层
• 焦点图轮播特效

工具类

• css sprite 雪碧图制作
• 版本控制入门 – 搬进 Github
• Grunt-beginner前端自动化工具

慕课专题

• 张鑫旭 - 慕课系列
• lyn - 慕课系列
• 艾伦 - 慕课系列
• 碧仔 - Hello，移动WEB

周报类

• 平安科技移动开发二队技术周报

API:

开发中心

• mozilla js参考
• chrome开发中心（chrome的内核已转向blink）
• safari开发中心
• microsoft js参考
• js秘密花园
• js秘密花园
• w3help 综合Bug集合网站

综合搜索

• javascripting
• 各种流行库搜索

综合API

• runoob.com-包含各种API集合
• 开源中国在线API文档合集
• devdocs 英文综合API网站

jQuery

• jQuery API 中文文档
• hemin 在线版
• css88 jq api
• css88 jqui api
• 学习jquery
• jquery 源码查找

Ecmascript

• Understanding ECMAScript 6 - Nicholas C. Zakas
• exploring-es6
• exploring-es6翻译
• exploring-es6翻译后预览
• 阮一峰 es6
• 阮一峰 Javascript
• ECMA-262，第 5 版
• es5

Js template

• template-chooser
• artTemplate
• tomdjs
• 淘宝模板juicer模板
• Fxtpl v1.0 繁星前端模板引擎
• laytpl
• mozilla - nunjucks
• Juicer
• dustjs
• etpl

弹出层

• artDialog 最新版
• artDialog 文档
• google code 下载地址
• 贤心弹出层
• 响应式用户交互组件库
• sweetalert-有css3动画弹出层

CSS

• CSS 语法参考
• CSS3动画手册
• 腾讯css3动画制作工具
• 志爷css小工具集合
• css3 js 移动大杂烩
• bouncejs 触摸库
• css3 按钮动画
• animate.css
• 全局CSS的终结(狗带) [译]

Angularjs

• Angular.js 的一些学习资源
• angularjs中文社区
• Angularjs源码学习
• Angularjs源码学习
• angular对bootstrap的封装
• angularjs + nodejs
• 吕大豹 Angularjs
• AngularJS 最佳实践
• Angular的一些扩展指令
• Angular数据绑定原理
• 一些扩展Angular UI组件
• Ember和AngularJS的性能测试
• 带你走近AngularJS - 基本功能介绍
• Angularjs开发指南
• Angularjs学习
• 不要带着jQuery的思维去学习AngularJS
• angularjs 学习笔记
• angularjs 开发指南
• angularjs 英文资料
• angular bootstrap
• angular jq mobile
• angular ui
• 整合jQuery Mobile+AngularJS经验谈
• 有jQuery背景，该如何用AngularJS编程思想
• AngularJS在线教程
• angular学习笔记

React

• react.js 中文论坛
• react.js 官方网址
• react.js 官方文档
• react.js material UI
• react.js TouchstoneJS UI
• react.js amazeui UI
• React 入门实例教程 - 阮一峰
• Webpack 和 React 小书 - 前端乱炖
• Webpack 和 React 小书 - gitbook
• webpack
• Webpack，101入门体验
• webpack入门教程
• 基于webpack搭建前端工程解决方案探索
• React原创实战视频教程

React Native

• React Native 中文版
• ReactNative打离线包-android篇
• ReactNative打离线包-ios篇
• 加载、维护 bundle 的正确姿势
• React-Native学习指南
• 30 Days of React Native
• React Native通讯原理
• React Native通信机制详解
• React Native Bundle拆分
• React Native 研究与实践
• React Native热更新部署/热更新-CodePush最新集成总结

移动端API

API

• 99移动端知识集合
• 移动端前端开发知识库
• 移动前端的一些坑和解决方法（外观表现）
• 【原】移动web资源整理
• zepto 1.0 中文手册
• zepto 1.0 中文手册
• zepto 1.1.2
• zepto 中文注释
• jqmobile 手册
• 移动浏览器开发集合
• 移动开发大杂烩
• 微信webview中的一些问题

框架

• 特色的HTML框架可以创建精美的iOS应用
• 淘宝SUI

avalon

• avalonjs
• Avalon新一代UI库： OniUI
• avalon.oniui-基于avalon的组件库

Requriejs

• Javascript模块化编程（一）：模块的写法
• Javascript模块化编程（二）：AMD规范
• Javascript模块化编程（三）：require.js的用法
• RequireJS入门（一）
• RequireJS入门（二）
• RequireJS进阶（三）
• requrie源码学习
• requrie 入门指南
• requrieJS 学习笔记
• requriejs 其一
• require backbone结合

Seajs

• seajs
• seajs 中文手册

Less,sass

• sass
• sass教程-sass中国
• Sass 中文文档
• less

Markdown

• Markdown 语法说明 (简体中文版)
• markdown入门参考
• gitbook 国外的在线markdown可编辑成书
• mdeditor 一款国内的在线markdown编辑器
• stackedit 国外的在线markdown编辑器，功能强大，同步云盘
• mditor 一款轻量级的markdown编辑器
• lepture-editor
• markdown-editor

D3

• d3 Tutorials
• Gallery
• lofter
• iteye
• ruanyifeng

兼容性

• esma 兼容列表
• W3C CSS验证服务
• caniuse
• csscreator
• microsoft
• 在线测兼容-移动端
• emulators

UI相关

• bootcss
• MetroUICSS
• semantic
• Buttons
• kitecss
• pintuer
• amazeui
• worldhello
• linuxtoy
• gitmagic
• rogerdudler
• gitref
• book
• gogojimmy
• material-ui

HTTP

• HTTP API 设计指南

其它API

• javascript流行库汇总
• 验证api
• underscore 中文手册
• underscore源码分析
• underscore源码分析-亚里士朱德的博客
• underscrejs en api
• lodash - underscore的代替品
• ext4api
• backbone 中文手册
• qwrap手册
• 缓动函数
• svg 中文参考
• svg mdn参考
• svg 导出 canvas
• svg 导出 png
• ai-to-svg
• localStorage 库

图表类

• Highcharts 中文API
• Highcharts 英文API
• ECharts 百度的图表软件
• 高德地图
• 开源的矢量图脚本框架
• svg 地图

vue

• Vue
• Vue 论坛
• Vue 入门指南
• Vue 的一些资源索引

正则

• JS正则表达式元字符
• 正则表达式30分钟入门教程
• MDN-正则表达式
• ruanyifeng - RegExp对象
• 小胡子哥 - 进阶正则表达式
• is.js
• 正则在线测试

ionic

• ionic

其它

• Mock.js 是一款模拟数据生成器

开发规范

1. 前端

• 通过分析github代码库总结出来的工程师代码书写习惯
• HTML&CSS编码规范 by @mdo
• 团队合作的css命名规范-腾讯AlloyTeam前端团队
• 前端编码规范之js - by yuwenhui
• 前端编码规范之js - by 李靖
• 前端开发规范手册
• Airbnb JavaScript 编码规范（简体中文版）
• AMD与CMD规范的区别
• AMD与CMD规范的区别
• KISSY 源码规范
• bt编码规范
• 规范加强版
• 前端代码规范 及 最佳实践
• 百度前端规范
• 百度前端规范
• 百度前端规范
• ECMAScript6 编码规范--广发证券前端团队
• JavaScript 风格指南/编码规范（Airbnb公司版）
• 网易前端开发规范
• css模块
• 前端规范资源列表

2. PHP

• 最流行的PHP 代码规范
• 最流行的PHP 代码规范

3. Android

• 【敏捷开发】Android团队开发规范
• Android 开发规范与应用

其它收集

各大公司开源项目

• Facebook Projects
• 百度web前端研发部
• 百度EFE
• 百度github
• alloyteam
• alloyteam-github
• alloyteam-AlloyGameEngine
• AlloyDesigner 即时修改，即时保存，设计稿较正，其它开发辅助工具
• H5交互页编辑器AEditor介绍 H5动画交互页开发的工具介绍
• AEditor H5动画交互页开发的工具
• maka
• 值得订阅的weekly
• 腾讯html5
• 奇舞团开源项目
• Qunar UED

Javascript

1. 常用

• ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性
• 模拟键盘
• 拼音
• 中国个人身份证号验证

2. 算法

• 数据结构与算法 JavaScript 描述. 章节练习
• 常见排序算法（JS版）
• 经典排序
• 常见排序算法-js版本
• JavaScript 算法与数据结构 精华集
• 面试常考算法题精讲

3. 移动端

• fastclick
• no-click-delay

4. JSON

• 模拟生成JSON数据
• 返回跨域JSONAPI

Html5

• HTML5 有哪些让你惊艳的 demo？

CSS

• browserhacks

jQuery

1. 焦点图

• myfocus
• myfocus-官方演示站
• SuperSlidev2.1 -- 大话主席
• soChange

Ext, EasyUI, J-UI 及其它各种UI方案

1. Ext

• extjs
• ext4英文api
• ext4中文api

2. EasyUI

• jquery easyui 未压缩源代码

3. J-UI

• J-UI

4. Other

• MUI-最接近原生APP体验的高性能前端框架
• Amaze UI | 中国首个开源 HTML5 跨屏前端框架
• 淘宝 HTML5 前端框架
• KISSY - 阿里前端JavaScript库
• 网易Nej - Nice Easy Javascript
• Kendo UI MVVM Demo
• Bootstrap
• Smart UI
• 雅虎UI - CSS UI

页面 社会化 分享功能

• 百度分享 pc端
• JiaThis pc端
• 社会化分享组件 移动端
• ShareSDK 轻松实现社会化功能 移动端
• 友盟分享 移动端

富文本编辑器

• 百度 ueditor
• 经典的ckeditor
• 经典的kindeditor
• wysiwyg
• 一个有情怀的编辑器。Bach's Editor
• tower用的编辑器
• summernote 编辑器
• html5编辑器
• XEditor
• wangEditor

日历

1. PC

• 经典my97
• 强大的独立日期选择器
• fullcalendar
• fullcalendar日历控件知识点集合
• 中文api
• 农历日历
• 超酷的仿百度带节日日历老黄历控件
• 日期格式化
• 大牛日历控件
• 我群某管理作品
• input按位替换-官网
• input按位替换-github
• bootstrap-daterangepicker
• 国外30个插件集合
• JavaScript datepicker
• Datepair.js
• 一个风格多样的日历
• 弹出层式的全日历
• jquery双日历

2. 移动

• 大气实用jQuery手机移动端日历日期选择插件
• jQuery Mobile 移动开发中的日期插件Mobiscroll

3. Date library

• Datejs
• sugarjs

综合效果搜索平台

• 效果网
• 17素材
• 常用的JavaScript代码片段

前端工程化

1. 概述

• 前端工具大全
• 什么是前端工程化

2. Gulp

• Gulp官网
• Gulp中文网
• gulp资料收集
• Gulp：任务自动管理工具 - ruanyifeng
• Gulp插件
• Gulp不完全入门教程
• 为什么使用gulp?
• Gulp安装及配合组件构建前端开发一体化
• Gulp 入门指南
• Gulp 入门指南 - nimojs
• Gulp入门教程
• Gulp in Action
• Gulp开发教程（翻译）
• 前端构建工具gulpjs的使用介绍及技巧

3. Grunt

• gruntjs
• Grunt中文网

4. Fis

• fis 官网
• fis

轮播图

1. pc图轮

• 单屏轮播sochange
• 左右按钮多图切换
• fullpage全屏轮播

2. 移动端

• 无缝切换
• 滑屏效果
• 全屏fullpage
• 单个图片切换
• 单个全屏切换
• 百度的切换库
• 单个全屏切换
• 滑屏效果
• 旋转拖动设置
• 类似于swipe切换
• 支持多种形式的触摸滑动
• 滑屏效果
• 大话主席pc移动图片轮换
• 滑屏效果
• 基于zepto的fullpage
• [WebApp]定宽网页设计下，固定宽度布局开发WebApp并实现多终端下WebApp布局自适应
• 判断微信客户端的那些坑
• 可以通过javascript直接调用原生分享的工具
• JiaThis 分享到微信代码
• 聊聊移动端跨平台开发的各种技术
• 前端自动化测试
• 多种轮换图片
• 滑动侧边栏

文件上传

• 百度上传组件
• 上传
• flash 头像上传
• 图片上传预览
• 图片裁剪
• 图片裁剪-shearphoto
• jQuery图片处理

模拟select

• 糖饼 select
• flexselect
• 双select
• select2

取色插件

• 类似 Photoshop 的界面取色插件
• jquery color
• 取色插件集合
• farbtastic 圆环＋正方形

城市联动

• jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

剪贴板

• 剪贴板
• clipboard 最新的剪切方案
• 不是Flash的剪贴板

简繁转换

• 简繁转换

表格 Grid

• facebook表格
• 类似于Excel编辑表格-handsontable
• bootstrap-table插件
• datatables

在线演示

• js 在线编辑 - runjs
• js 在线编辑 - jsbin
• js 在线编辑 - codepen
• js 在线编辑 - jsfiddle
• java 在线编辑 - runjs
• js 在线编辑 - hcharts
• js 在线编辑 - jsdm
• sql 在线编辑 - sqlfiddle
• mozilla 在线编辑器

播放器

• Html5 VideoPlayer

粒子动画

• Proton 烟花

Nodejs

• nodejs 篇幅比较巨大
• Node.js 包教不包会
• 篇幅比较少
• node express 入门教程
• nodejs定时任务
• 一个nodejs博客
• 【NodeJS 学习笔记04】新闻发布系统
• 过年7天乐，学nodejs 也快乐
• 七天学会NodeJS
• Nodejs学习笔记（二）--- 事件模块
• nodejs入门
• angularjs nodejs
• 从零开始nodejs系列文章
• 理解nodejs
• nodejs事件轮询
• node入门
• nodejs cms
• Node初学者入门，一本全面的NodeJS教程
• NodeJS的代码调试和性能调优

性能优化

1. 常规优化

• Javascript高性能动画与页面渲染
• 移动H5前端性能优化指南
• 5173首页前端性能优化实践
• 给网页设计师和前端开发者看的前端性能优化
• 复杂应用的 CSS 性能分析和优化建议
• 张鑫旭——前端性能
• 前端性能监控总结
• 网站性能优化之CSS无图片技术
• web前端性能优化进阶路
• 前端技术：网站性能优化之CSS无图片技术
• 浏览器的加载与页面性能优化
• 页面加载中的图片性能优化
• Hey——前端性能
• html优化
• 99css——性能
• Yslow——性能优化
• YSLOW中文介绍
• 转一篇Yahoo关于网站性能优化的文章，兼谈本站要做的优化
• Yahoo!团队实践分享：网站性能
• 网站性能优化指南：什么使我们的网站变慢？
• 网站性能优化实践，减少加载时间，提高用户体验
• 浅谈网站性能优化 前端篇
• 前端重构实践之如何对网站性能优化？
• 前端性能优化：使用媒体查询加载指定大小的背景图片
• 网站性能系列博文
• 加载，不只是少一点点
• 前端性能的测试与优化
• 分享网页加载速度优化的一些技巧？
• 页面加载中的图片性能优化
• web前端优化(基于Yslow)
• 网站性能优化工具大全
• 【高性能前端1】高性能HTML
• 【高性能前端2】高性能CSS
• 由12306谈谈网站前端性能和后端性能优化
• AlloyTeam——前端优化
• 毫秒必争，前端网页性能最佳实践
• 网站性能工具Yslow的使用方法
• 前端工程与性能优化（上）：静态资源版本更新与缓存
• 前端工程与性能优化（下）：静态资源管理与模板框架
• HTTPS连接的前几毫秒发生了什么
• Yslow
• Essential Web Performance Metrics — A Primer, Part 1
• Essential Web Performance Metrics — Part 2
• YUISlide,针对移动设备的动画性能优化
• Improving Site Performance
• 让网站提速的最佳前端实践
• Why Website Speed is Important
• Need for Speed – How to Improve your Website Performance
• 阿里无线前端性能优化指南 (Pt.1 加载期优化)

2. 优化工具

• JavaScript 性能分析新工具 OneProfile
• JavaScript 堆内存分析新工具 OneHeap

3. 在线工具

• google在线工具
• 阿里测
• 阿里-免费测试服务
• 阿里-F2etest多浏览器兼容性测试解决方案
• js性能测试

前端架构

• 技术架构
• 前端架构
• 如何成为前端架构师
• 关于前端架构-张克军
• 百度腾讯offer比较（腾讯游戏VS百度基础架构）

个人作品

1. 推荐作品

• winter代码片段需要翻墙
• fgm
• 岑安作品集
• 当耐特demo集合
• 米空格 js作品
• myFocus
• SeaJS组件库
• 颜海镜作品
• 脚儿网作品
• javascript个人作品
• 妙味的雷东升游戏作品
• javascript作品集
• 云五笔，灰度产生生成工具
• 项目主页
• 个性的作品主页
• 播放器
• ucren js demos 集
• 智能社
• 实例陈列架
• zoye demo
• 王员外
• 平凡
• jyg 游戏案例
• 很多jquery插件
• 不羁虫 - soJs 作品系列
• frozenui
• 黑白棋
• fromone

2. 群员作品

• MDialog - [合肥-M.J]
• 轮播图 - [上海－冷静]
• [广州—坚壳]
• [成都 - 无痕]　感恩节专题
• [球霸天]
• [北京-小数]
• [ptf] Magix 工具
• [杭州-Pft] Magix 基于 MVC 结构和 Hash 驱动的 OPOA（One Page One Application）应用
• [上海-剧中人]-实验室
• [上海-豪情 ] 作品集合
• [成都-feeling]
• [上海-angela]
• [海南-hank]作品
• [上海-张力]博客
• [上海-zenki]作品
• 移动端图案解锁
• [合肥-M.J] - MPreview 移动端图片预览组
• [合肥-M.J] - Mexam 移动端在线做题组
• [北京-苏瑞] - dancer小人
• [上海-玄沐]- 个人网站
• [厦门-二哲]- 个人博客

3. 国外大牛精品

• pazguille

简历模板

• 不错的个人简历
• 简历
• 张伦
• 简历
• 翁天信
• 动画方式的简历
• 组件丰富简历
• 简历池
• haorooms博客
• Justin Young

面试题

• 那几个月在找工作（百度，网易游戏）
• 2014最新面试题
• 阿里前端面试题
• 2016校招内推 -- 阿里巴巴前端 -- 三面面试经历
• 腾讯面试题
• 年后跳槽那点事：乐视+金山+360面试之行
• 阿里前端面试题上线
• 拉勾网js面试题
• 前端面试
• Web开发笔试面试题 大全
• 前端开发面试题
• 2014最新前端面试题
• 百度面试
• 面试题
• 前端工作面试问题
• 前端开发面试题
• 5个经典的前端面试问题
• 最全前端面试问题及答案总结
• 如何面试一名前端开发工程师？
• 史上最全 前端开发面试问题及答案整理
• 前端实习生面试总结
• 史上最全 前端开发面试问题及答案整理
• BAT及各大互联网公司2014前端笔试面试题：JavaScript篇
• 前端开发面试题大收集
• 收集的前端面试题和答案
• 如何面试前端工程师
• 前端开发面试题
• 牛客网-笔试面经

iconfont

• 中文字体
• 淘宝字库
• 字体
• 制作教程
• zhangxinxu-icommon
• icommon
• 用字体在网页中画ICON图标(推荐教程)
• 字体压缩工具 感谢初级群　[深圳-小鱼] 的推荐

开发工具类

1. 前端开发工具

• IntelliJ IDEA 简体中文专题教程
• Webstorm,InterllIdea,Phpstorm
• SublimeText
• Atom
• visual studio code

2. Chrome, Firebug, Filddle 调试

   1. Fiddler
   • Fiddler调式使用知多少(一)深入研究
   • 微信fiddle
   • 微信fiddle
   2. Chrome
   • Google Chrome 官方
   • Chrome - 基础
   • Chrome - 进阶
   • Chrome - 性能
   • Chrome - 性能进阶
   • Chrome - 移动
   • Chrome - 使用技巧
   • Chrome - Console控制台不完全指南
   • Chrome - Workspace使浏览器变成IDE
   • network面板
   • chrome开发工具快捷键
   • chrome调试工具常用功能整理
   • Chrome 开发工具 Workspace 使用
   • Chrome神器Vimium快捷键学习记录
   • sass调试-w3cplus
   • 如何更专业的使用Chrome开发者工具-w3cplus
   • chrome调试canvas
   • chrome profiles1
   • chrome profiles2
   • chrome profiles3
   • chrome移动版调试
   • chrome调试
   • chrome的调试
   • chrome console 命令详解
   • 查看事件绑定1
   • 查看事件绑定2
   • 神器——Chrome开发者工具(一)
   • 奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)
   • chrome 开发者工具的 15 个小技巧
   • Chrome开发者工具不完全指南
   • Chrome 开发者工具使用技巧
   3. Firebug
   • firebug视频教程
   • firefox 模拟器
   • console.log 命令详解
   • Firebug入门指南
   • Firebug控制台详解
   4. 移动,微信调试
   • 浏览器端调试安卓
   • 移动端前端开发调试
   • 使用 Chrome 远程调试 Android 设备
   • mac移动端调试
   • mac移动端调试
   • 无线调试攻略
   • 无线调试攻略
   • 屌爆了,完美调试 微信webview(x5)
   • 微信调试的那些事
   • 远程console
   • 微信调试工具
   • 各种真机远程调试方法汇总
   5. iOS Simulator
   • Simulator
   • Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得

3. img

• loading img
• 智图-图片优化平台
• 在线png优化

4. 生成二维码

• 生成二维码

5. 浏览器同步

• puer
• liveReload
• f5
• File Watchers

6. 在线PPT制作

• nodePPT
• PPT
• reveal
• slippy

前端导航网站

• 界面清爽的前端导航
• 前端导航
• 前端网址导航
• 前端名录
• 前端导航
• 前端开发资源
• 网址导航
• 前端开发仓库 - 众多效果的收集地
• 前端资源导航
• F2E 前端导航

常用CDN

• 新浪CDN
• 百度静态资源公共库
• 360网站卫士常用前端公共库CDN服务
• Bootstrap中文网开源项目免费 CDN 服务
• 开放静态文件 CDN - 七牛
• CDN加速 - jq22
• jQuery CDN
• Google jQuery CDN
• 微软CDN

Git,SVN,Github

1. Git

• git-scm
• 廖雪峰-Git教程
• git-for-windows
• GitHub 添加 SSH keys
• gogithub
• git常规命令练习
• git的资料整理
• 我所记录的git命令（非常实用）
• 企业开发git工作流模式探索部分休整
• GitHub 漫游指南
• GitHub秘籍
• 使用git和github进行协同开发流程
• 动画方式练习git

前端自动化(Workflow)

• 前端构建工具
  • Webpack - module bundler
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解决方案
• 前端模块管理器
  • Bower - A package manager for the web
  • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • LABjs - 文件加载器
  • css-modulesify - CSS模块加载器
• css预处理器
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS
• 前端性能分析工具
  • analyze-css - CSS 选择器的复杂度和性能分析器

前端框架(Frameworks)

• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Materialize - 一个基于 Material Design 的 CSS 框架
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• App.js

JavaScript 框架汇总

• JavaScript 框架
  • react
  • Angular
  • jQuery
  • Backbone.js
  • ember.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • Vanilla JS
  • Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
  • Can.js
  • Avalon
  • T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架
  • jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用
• 轻量级JavaScript框架
  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • Sprint.js - 一个高性能、小体积的 DOM 操作库
  • knockout
  • PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API
• 函数式反应型编程框架 FRP (Functional Reactive Programming) library
  • Bacon.js - A small functional reactive programming lib for JavaScript.
  • Flapjax - 一个支持FRP的JavaScript框架
• JavaScript 工具库
  • underscore.js
  • Underscore.string.js字符串操作库
  • functional.js
  • Lo-Dash - A JavaScript utility library
  • Lazy.js - a functional utility library for JavaScript
  • Fn.js
  • Way.js - 双向数据绑定库
  • boiler - a utility library that makes tasks in JavaScript easier
  • 快捷键操作

• Keys.js - 应用快捷键
• simple-hotkeys
• jquery.hotkeys
• Mousetrap - 键盘快捷键操作

前端游戏框架

• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• Stage.js
• phaser - 一个快速、免费、开源的 HTML5 游戏框架

ui组件库

• WeUI - 微信官方UI库
• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC - 更好的CSS方案
• NEJ - 更好的JS解决方案
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• light7 - A Light and easy to use UI Lib

基础模版

• 浏览器统一(Cross Browser)
  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell
  • ieBetter.js: make ie browser like a morden browser main for ie6~ie8
• 响应式
  • Responsive - 响应式布局
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局
• 适配方案
  • MetaHandler.js：移动端适配各种屏幕无痛工具脚本
  • lib-flexible: 移动端自适应方案

• 参考: 使用Flexible实现手淘H5页面的终端适配
• flexible demo 1
• flexible demo 2
  • pageResponse
  • responsive-page

排版

• yue.css
• typo.css
• chinese-copywriting-guidelines - 中文文案排版指南

网格系统

• grid
• Flexbox Grid
• MasonJS - creating a perfect grid

路由和链接(Routing And URLs)

• History.js - gracefully supports the HTML5 History/State APIs
• jquery-pjax - pushState+ajax
• jquery-address - Deep Linking
• page.js - Micro client-side router
• crossroads.js
• hash.js
• path.js
• director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)
• URI.js
• Roadcrew.js
• SpeakingURL
• uparams - An URL params parser

UA 识别

• detector

表单处理

1. 表单验证(Form Validator)/表单提示

• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• validator.js

2. < select > 相关

• Chosen
• Select2
• bootstrap-select

3. 单选框/复选框相关

• iCheck - 增强复选框和单选按钮
• Switchery - iOS 7 style switches for your checkboxes

4. 上传组件

• jQuery File Upload Plugin
• 百度 Web Uploader
• uploadify
• Plupload
• Fine Uploader
• arale-upload - 轻量级 iframe and html5 file uploader
• Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)
• flow.js
• localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC
• simple-uploader

5. 日期选择

• Both Date and Time picker widget based on twitter bootstrap
• GMU 日历组件
• Mobiscroll
• Pikaday - 日期选择器
• PriceCalendar - 酒店价格日历
  • API文档
  • DEMO

6. 取色

• Colorpicker plugin for Twitter Bootstrap

7. 标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件
• selectize.js
• Bootstrap Tags Input

8. 自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library

9. 样式修正

• autosize - 使文本框自动适应所输入的内容

图表绘制/图形库(Graphics)

• Highcharts
• Chart.js - Simple HTML5 Charts using Canvas
• 百度 ECharts
• Chartist.js
• D3.js - A JavaScript visualization library for HTML and SVG.
  • intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• epoch - 数据图表可视化
• Vis.js
• Coutour.js
• zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

日期格式化 & 时间轴

• Moment.js - 日期处理
• Smart Time Ago - 显示相对时间
• timeline.js

页面交互

1. Slider

• slick - the last carousel you'll ever need
• Swipe - the most accurate touch slider
• Swiper - Most modern mobile touch slider
• iscroll - Smooth scrolling for the web
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件
• PhotoSwipe
• TouchSlide - 触屏滑动特效(焦点图,Tab切换)

2. 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts

3. 懒加载/加载监听/预加载

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• layzr.js - 一个小巧快速的图片懒加载库
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用

4. 图片轮播(幻灯片)/图片展示

• FlexSlider
• unslider - 小而美的轮播库
• prettyPhoto
• FlickerPlate - A cool jQuery plugin that lets you flick through content.
• Holder.js - Client-side image placeholders.
• RowGrid.js - 在径直的行里放置图片
• ImageLightbox.js - 灯箱效果
• JQuery Panorama Viewer - 全景视图
• Intense Images - 全屏查看图片
• Picturefill - 一个响应式图片 JS 插件
• zoom.js - 一个 jQuery 图片放大插件
• watermarkjs - 一个在浏览器中添加图片水印的 JS 库
• responsive-images.js

5. 图片剪裁/图片处理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• smartcrop.js - 智能图片裁剪库
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• imgareaselect
• CSSgram - CSS 实现的 Instagram 滤镜库
• antimoderate - 图片模糊库

6. 进度条/加载动画(Loading)

• NProgress.js
• progress.js
• Pace - Automatic page load progress bar
• jquery-ajax-progress
• nanobar - Very lightweight progress bars.
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js
• loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
• css-loaders

7. 侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

8. 菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单
• Responsive Nav - 响应式导航

9. 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条

10. 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.

11. 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件

12. 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式

13. 分屏滚动

• multiscroll.js - 分屏滚动效果

14. 转场效果

• Animsition - 页面切换时的过渡效果

15. 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表

16. 触控事件

• Hammer.js
• jquery.event.move.js

17. 拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库
• dragula - 一个让拖放操作变简单的 JS 库
• GridList - 可拖拉的响应式列表库

18. 隐藏或展示页面元素

• Headroom.js - 在不需要页头时将其隐藏
• Readmore.js - 内容显示与隐藏插件
• oriDomi - 像指一样折叠Dom元素

19. 滚动条(Scrollbar)

• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar

20. 视差滚动(Parallax Scrolling)

• parallax.js
• jparallax
• skrollr

代码高亮插件/代码编辑器

• google-code-prettify
• highlight.js
• Rainbow
• ACE
• CodeMirror
• Crayon Syntax Highlighter
• prism - Lightweight, robust, elegant syntax highlighting.

UI Icon 组件

• Font Awesome
• Glyphter: The SVG Font Machine
• Perfect Icons
• iconizr
• Cikonss - 纯CSS实现的响应式Icon
• Simple Icons

动画(Animate)

• animate.css - A cross-browser library of CSS animations.
• Transit - CSS transitions and transformations for jQuery
• WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
• AniJS - A Library to Raise your Web Design without Coding
• Move.js - 简化CSS3动画的JS库
• ScrollMe – 在网页中加入各种滚动动画效果
• Effeckt.css - A Performant Transitions and Animations Library
• NEC动画库
• csshake - CSS classes to move your DOM
• magic - CSS3 Animations with special effects
• Hover.css - 很多鼠标Hover态的效果
• SpinKit
• Velocity.js - 加速JavaScript动画
• lenticular.js - 响应倾斜或鼠标事件创建图片动画
• jQuery Interactive 3D - Create a 3D interactive object using images
• AnimateScroll - A Simple jQuery Plugin for Animating Scroll
• Blast.js - 把动画和样式注入到文本中
• Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
• Sticker.js - create a Sticker Effect
• scrollReveal.js - 元素进入可视区域自动触发设置好的动画
• stroll.js - CSS3 list scroll effects
• jQuery Easing - 动画效果扩展
• animations - CSS3 ANIMATION CHEAT SHEET
• iconate.js：将 icons 增加动画效果的 JS 库

本地存储

• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js
• Neurosync - JavaScript 本地离线 ORM 库

模板引擎

• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• Hogan.js - JavaScript templating from Twitter.
• Dust.js - Linkedin维护的项目

通知组件/弹框组件/模态窗口

• Notify.js(Web Notifications API)
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的弹框组件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模态窗口插件
• action.js - 极简的tip和Modal弹窗效果

提示控件(Tooltips)

• hint.css - 一款非常小巧的提示框效果
• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件
• intro.js - 一个创建引导式网站介绍功能的 JS 库
• data-tip.css - 纯 CSS 实现的工具提示

对话框/遮罩层/弹出层(lightbox)

• fancyBox - Fancy jQuery lightbox
• jquery-lightbox - The popular lightbox script, ported to jQuery
• Colorbox - a jQuery lightbox
• artDialog - 经典的网页对话框组件
• DialogEffects
• jQuery blockUI - Page or element overlay
• layer - web弹出窗/层

文档/表格/PDF

• Backgrid.js - 强大的表格组件
• handsontable - 在线可编辑excel表格
• jQuery Bootgrid - 用于ajax生成动态表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一个 JavaScript 编写的 PDF 阅读器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 灵活操作和展示数据
• Dynatable - 交互式表格插件
• fattable - 创建无限滚动无限行列数的表格

目录树插件

• zTree_v3 - jQuery Tree Plugin
• jstree - jQuery Tree Plugin
• fancytree - Tree plugin for jQuery

Ajax模块

• fetch - A window.fetch JavaScript polyfill
• reqwest - browser asynchronous http requests
• ajax - Standalone AJAX library
• then-request
• browser-request
• superagent
• minAjax.js

音频/视频

• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
• Clappr - 开源的Web视频播放器
• Plyr - A simple HTML5 media player
• FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
• BigVideo.js - The jQuery Plugin for Big Background Video
• BigScreen - A simple library for using the JavaScript Full Screen API
• Vide - 视频背景
• winamp2-js
• Buzz - A Javascript HTML5 Audio library
• MediaElement.js

按钮

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.

富文本编辑器/Markdown编辑器/Markdown解析器

• Simditor - 简单快速的富文本编辑器
• BachEditor - 一个有情怀的编辑器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 开源在线Markdown编辑器
• stackedit
• Redactor Text Editor
• micromarkdown.js - 轻量级的md解析器

内容提取(Readability)

• Readability
• json.human.js - Json Formatting for Human Beings

颜色(CSS Colors)/SVG/Canvas

• CSS Colours
• SVGeneration
• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
• Seen.js - 渲染3D场景为SVG或者HTML Canvas

选项卡(Tabs)

• Easy Responsive Tabs to Accordion
• Responsive-Tabs
• ion.tabs - jQuery tabs plugin
• jQuery-EasyTabs
• tabulous.js

文本处理

• ZeroClipboard - 文本复制插件
• clipboard.js
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• Flowtype.js - 自动调整字体大小和行号
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• shine.js - 实现漂亮阴影
• Type Rendering Mix - 文本渲染引擎
• jquery-expander - 阅读更多
• Typed.js - 输入模拟插件

布局(Layout)

• 分隔面板(Split Panel)
  • split-pane
  • jQuery UI Layout

演示/幻灯片

• reveal.js - The HTML Presentation Framework
• bespoke.js - DIY Presentation Micro-Framework
• impress.js
• shower
• deck.js

国际化(i18n)

• jquery-i18n
• i18next.js
• jsperanto.js
• jed.js
• messageformat.js
• Polyglot.js

邮件模板(Email Templates)

• responsive-html-email-template

移动端优化(Optimizing Mobile Performance)

• FastClick - 处理移动端 click 事件 300 毫秒延迟
• tappy
• jquery-fast-click

实用工具/其他插件

• jquery-cookie
• InstantClick - 预加载用户可能会点击的一些链接
• Async.js - 异步操作
• html2canvas - 实现纯JS网页截图
• jquery.qrcode.js - 生成二维码的 jQuery 插件
• qrcodejs - JS生成QRCode的库
• nakedpassword - 用脱衣女帮助检测密码强度
• KityMinder - 脑图编辑工具
• MixitUp - 动画过滤和排序
• JQuery Tip Cards - 创建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject
• prettyprint.js - An in-browser JavaScript variable dumper
• Shepherd - 为应用创建用户指南
• RulersGuide.js - 类似PhotoShop标尺的js库
• Gremlins.js - Monkey 测试库
• RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具
• favico.js - 动态改变浏览器标签栏中的网站图标

设计模式( JavaScript Patterns )

• javascript-patterns
• jquery-patterns - A variety of jQuery plugin patterns
• Learning JavaScript Design Patterns

在线工具( Online Tools )

• jsbin - Collaborative JavaScript Debugging App
  • jsbin@Github
• jsfiddle
• jsbeautifier - Online JavaScript beautifier
• resume.github.com

前端开发工具

1. 开发工具

• Sublime Text

2. 调试工具

• Fiddler
• Weinre
• Rythem
• csscss - 用于检查css代码冗余
• FECS - 基于 Node.js 的前端代码检查工具

3. 浏览器扩展(Chrome Extensions)

• Postman - REST Client
• Fiddler - Fiddler for Chrome Extension
• WEB前端助手(FeHelper)
• Web Developer
• Chrome Logger
• ColorZilla
• ColorPick Eyedropper
• Code Cola
• 1px
• AlloyDesigner - 前端重构开发辅助工具
• Fontface Ninja
• PageSpeed Insights (by Google)
• HTTP Status
• Redirect Path
• Responsive Web Design Tester
• Window Resizer
• CSSViewer
• IE Tab
• Clear Cache
• JSONView
• Image Downloader
• Pretty Beautiful Javascript - 可以自动格式化混淆的js文件
• JavaScript Errors Notifier
• CSS Diff - 在线比对页面上两个元素的CSS样式差异
• WhatFont- 识别网页所使用的字体

前端参考集

• frontend-guidelines - Some HTML, CSS and JS best practices.
• frontend-dev-bookmarks
• Codrops - Useful resources
• Front-end Code Standards & Best Practices
• frontend-dev-bookmarks
• Airbnb 的 JavaScript 编码规范
• awesome-javascript