前端文章收藏

[moocss]

https://github.com/guanMac/blog （全栈技术博客， 👍 💯 , 牛）

https://github.com/yygmind/blog (高级前端进价系列文章, 高质量, 👍 💯)

https://love2.io （做最好的技术文档分享平台， 👍 💯 , 酷）

https://github.com/songjinzhong/react-learning
https://github.com/songjinzhong/JavaScriptLearning
https://github.com/songjinzhong/vue-learning

https://github.com/MeCKodo/forchange （如何实现一个类jQuery？）
https://github.com/songjinzhong/JQuerySource （jQuery 源码解读，v3.1.1，从菜鸟到大神之路 👍 💯 , 学习 ）
https://github.com/songjinzhong/BaiDu_IFE （百度前端技术学院学习及代码 👍 💯 , 学习）

---

https://github.com/jsfront/src (代码片段 👍 )

https://github.com/joshbuchea/HEAD ( Cheat Sheet 👍 💯 )

https://github.com/jgthms/marksheet ( html5, css3, sass ,教程集合，非常漂亮的文档，CSS 专家 👍 💯 )

kuitos/kuitos.github.io#33 (Web语义化标准解读 👍 )

http://syaning.com/archives/ （很多最新的前端高级知识文章 👍 ）

https://github.com/moocss/HEAD (标签中到底可以放什么? 👍 )

https://github.com/phodal/growth-ebook/ （Growth: 全栈增长工程师指南）

https://github.com/ouvens/frontend-system-map (2015-2016前端知识体系)

http://pinggod.com/2016/2016-JavaScript-%E6%8A%80%E6%9C%AF%E6%A0%88%E5%B1%95%E6%9C%9B/ ( 2016 JavaScript 技术栈展望 👍 💯 )

http://icodeit.org/2016/02/performance-testing-in-ci/ （CI上的Web前端性能测试 ） http://icodeit.org/2016/02/pitfall-of-technology/ （技术的执念）

http://wwsun.github.io/posts/javascript-oo-tutorial.html (JavaScript面向对象编程实践 👍 💯 )
http://wwsun.github.io/posts/javascript-oo-summary.html (深入解读JavaScript面向对象编程实践 👍 💯)

http://www.iinterest.net/2014/08/19/javascript-best-practices/#more-2078 ([译]Javascript 最佳实践 👍 💯 )

http://www.zcfy.cc/article/building-resizeable-components-with-relative-css-units-1276.html (使用CSS相对单位构建可缩放的组件 👍 💯 )

https://blog.coding.net/blog/css-margin （细说 CSS margin 💯 ）

https://toddmotto.com/ (Angular, React, 最新知识点研究，专家 👍 💯 )

http://lishaopeng.com/2016/02/19/js-module3/

• 后端程序员的 JavaScript 之旅 - 模块化（一） | 简书
• 后端程序员的 JavaScript 之旅 - 模块化（二） | 简书
• 后端程序员的 JavaScript 之旅 - 模块化（三） | 简书

https://github.com/ouvens/es6-code-style-guide (EcmaScript6 全规范（含node）)
cssmagic/blog#56 ([译] 基于 Webpack 和 ES6 打造 JavaScript 类库 👍 💯 )

https://github.com/gf-rd/blog/issues/29 ([Node] - 16年，新 Node 项目注意点)

https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862 （响应式断点 👍 💯 ）
http://ouvens.github.io/frontend-css/2016/01/15/responsive-css.html (web前端响应式设计总结)

http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=402340325&idx=1&sn=5b7bf6025b1a83a0e529e630fc95ae28&scene=0#wechat_redirect (从0到1：微信后台系统的演进之路 )

http://fucku.singles/2015/12/02/%E8%AF%91-web%E6%9D%83%E9%99%90%E9%AA%8C%E8%AF%81%E6%96%B9%E6%B3%95%E8%AF%B4%E6%98%8E/ ([译]web权限验证方法说明)

http://wwsun.github.io/posts/async-api-using-fetch-and-generators.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io (使用Fetch API和ES6生成器来构建异步API 👍 💯 )
http://wwsun.github.io/posts/become-a-better-node-developer-in-2016.html (如何在2016年成为一个更好的Node.js开发者)

http://taligarsiel.com/Projects/howbrowserswork1.htm (cn, 浏览器如何工作的 👍 💯 )
http://my.oschina.net/anna153/blog/377259 (zh, 浏览器如何工作的 👍 💯 )

• Javascript编码规范 [1.3]
• Javascript编码规范 - ESNext补充篇 [draft]
• HTML编码规范 [1.2]
• CSS编码规范 [1.2]
• Less编码规范 [1.1]
• E-JSON数据传输标准 [1.0]
• 模块和加载器规范 [1.1]
• 包结构规范 [1.1]
• 项目目录结构规范 [1.1]
• 图表库标准 [1.0]

http://blog.melonhuang.gitpress.org/~docs/js/prototype.md (什么是Prototype)

http://zhuanlan.zhihu.com/FrontendMagazine/19632520 （基于Backbone的复杂SPA架构）

http://geekplux.com/grid/ (响应式设计简易指南 👍 💯 )

http://www.cnblogs.com/lyzg/p/5125934.html (浏览器缓存知识小结及应用)

http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/ (在 JS 中使用 fetch 更加高效地进行网络请求)

http://www.w3cfuns.com/notes/23515/c9163ddd620baac5dd23141d41982bb8.html (整理前端面试题)

https://github.com/andycall/class （前端全部技术栈 👍 💯 , 学习 ）

web 标准

http://ideazhao.com/2016/06/27/less_sass/ （抛开语法，深度剖析CSS预处理器）
http://ideazhao.com/2016/08/07/css_design_method/ （ 没那么难，谈CSS的设计模式）

http://ideazhao.com/2016/04/09/web_standard/ （是时候再提web标准）

http://www.dang-jian.com/html5/2015/01/21/web-frontend-best-practice-5.html （正确闭合HTML标签，停止使用不标准的标签和属性）
http://www.dang-jian.com/html5/2015/01/25/web-frontend-best-practice-6.html （过时的块状元素和行内元素）

CSS

http://www.w3cplus.com/css/css-font-metrics-line-height-and-vertical-align.html （深入了解CSS字体度量，行高和vertical-align）
http://www.w3cplus.com/css/how-well-do-you-know-display.html (如何理解CSS的display属性)

http://www.w3cplus.com/css/fix-1px-for-retina.html (再谈Retina下1px的解决方案)

js

http://www.taoweng.site/index.php/archives/42/ (JavaScript数据结构之数组栈队列)
http://www.taoweng.site/index.php/archives/88/(ES6之路之模块详解)

[moocss]

http://zhuanlan.zhihu.com/FrontendMagazine/19973091 （同构 JavaScript 应用 —— Web 世界的未来？）
http://zhuanlan.zhihu.com/FrontendMagazine/19955794 （Flexbox 设计指南）
http://zhuanlan.zhihu.com/FrontendMagazine/19978387 （Flexbox 设计指南2：垂直布局）

[moocss]

如何编写高扩展且可维护的 JavaScript系列

• “狂野西部”症
• 命名空间
• 模块（化）
• 代码耦合

[moocss]

http://xuhong.github.io/2014/05/22/notification/ （使用HTML5 Notification API开启浏览器桌面提醒）

[moocss]

http://segmentfault.com/t/reactjs/blogs?page=2 （recat 文章集合）

[moocss]

http://www.jikexueyuan.com/course/typescript/ （typescript视频教程）

[moocss]

http://www.75team.com/archives/882 (AMD+CommonJS模板骨架)就是UMD

[moocss]

https://github.com/superlin/cross-demos

http://blog.liuwanlin.info/shi-shi-kua-yu-tong-xin-iframe/ (试试跨域通信 - 利用iframe)
http://blog.liuwanlin.info/shi-shi-kua-yu-tong-xin-websocket/ (试试跨域通信 - Websocket)
http://blog.liuwanlin.info/shi-shi-kua-yu-tong-xin-sse/ (试试跨域通信 - SSE)
http://blog.liuwanlin.info/shi-shi-kua-yu-tong-xin-comet/ (试试跨域通信 - Comet)
http://blog.liuwanlin.info/kua-yu-tong-xin-tu-xiangping-yu-jsonp/ (试试跨域通信 - 图像ping与JSONP)

[moocss]

http://blog.rainy.im/2015/06/10/react-jwt-pretty-good-practice/ (JWT -- JSON Web Token）授权机制 在前后端分离中的应用与实践 )

[moocss]

版本控制系統 Git

• 三個使用版本控制系統的建議
• Git 從微觀到宏觀 投影片
• 談 Git 的開發流程
• 加快 git pull 和 git push 速度
• 如何在本地端取出和送出 Github 的 Pull Requests
• Yet another introduction to Git – from the bottom up 投影片
• Git rebase 和 merge 合併操作示範錄影
• Git 教育訓練課程投影片
• 如何建立一個沒有 Parent 的 Git branch
• 我的 Git 偏好設定
• Git flow 開發流程
• Git 版本控制系統 (3) 還沒 push 前可以做的事
• 使用 git rebase 避免無謂的 merge
• Git 版本控制系統 (2) 開 branch 分支和操作遠端 repo.
• Git 版本控制系統 (1)
• Github 分散式版本控制的殺手級應用

[moocss]

Gulp Tutorial
http://www.zell-weekeat.com/gulp-tutorial-2/
http://www.zell-weekeat.com/gulp-tutorial/

[moocss]

http://xudafeng.github.io/slide/archives/javascript/#page=1 （http://xudafeng.github.io/slide/archives/javascript/#page=1）

[moocss]

https://github.com/gf-web/es6-coding-style （ECMAScript6 编码规范）

[moocss]

https://github.com/wchaowu/javascript-code (包含javascript的基础语法，面向对象的实现和设计模式实现)

[moocss]

http://www.w3ctech.com/topic/1419 （前后端分离项目实践）

[moocss]

https://github.com/hanan198501/imitator （一个简单的nodejs服务器，可以实现数据模拟，静态资源映射，HTTP代理等服务。 ）

[moocss]

http://chensd.com/2015-01/45-useful-javascript-tips-tricks-and-best-practices.html (JavaScript奇技淫巧45招 )

[moocss]

http://gank.io/post/564151c1f1df1210001c9161 (給 JavaScript 初心者的 ES2015 實戰) 👍 💯

[moocss]

http://www.cnblogs.com/sskyy/p/4592353.html （理想的应用框架）

[moocss]

http://segmentfault.com/a/1190000004070442 (CORS跨域资源共享 👍 )

[moocss]

2015年50+ CSS 工具、框架、库合集(1-54) ：

http://info.9iphp.com/css-tools-frameworks-libraries-2015-first/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io
http://info.9iphp.com/css-tools-frameworks-libraries-2015-second/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

[moocss]

http://www.cnblogs.com/vajoy/p/5041860.html （AlloyTeam2015前端大会 重点知识 👍 ）

http://jinlong.github.io/2015/09/30/what-forces-layout-reflow/ (是什么导致重排（layout / reflow）？

[moocss]

http://jinlong.github.io/2016/01/14/checkbox-trickery-with-css/ (复选框的 CSS 魔法 )

[moocss]

豪情前端作品列表 - 着重于原生js的研究与探索 ：

http://jikeytang.github.io 👍 💯

1. 第一章 表单常用代码

   去除字符串左右的空格

   验证用户是否输入

   禁止用户输入

   关闭用户中文输入法

   禁止用户复制和粘贴

   限制只能输入数字

   限制字符串长度

   仿微博提示可输入剩余字数

   换行文本自动滚动

   Ctrl + Return提交表单

   文本内容进行关键字过滤

   全选反选少选复选框

   动态操作下拉选项

   级联菜单

   可添加的下拉选项

2. 第二章 常用图片相关代码

   可添加的下拉选项

   图片放大镜效果

   点击图片逐渐放大

3. 第三章 内容展示常用代码

   单元行上鼠标悬停提示

   隔行换色鼠标经过换色

   添加或删除表格行

   可拖动的弹出层

   选项卡轮播

4. 第四章 常用图片轮换

   百度爱玩 - 图片轮换

   百度爱玩 - 遮罩下拉

   百度爱玩 - 榜单tab切换

   css3弹出层

   米4-活动页面

   百度爱玩 - 图片轮换

   百度微购－中秋送好礼

   商品分类

   渐显的tab菜单2

   经典图片轮换－单个滚动

   经典图片轮换－整个翻页

5. 第五章 移动端效果

   选项卡切换

[moocss]

前端图谱

核心 Core

• HTML(HTML5)
• CSS(CSS3)
• JavaScript
• jQuery
• ES6
• 插件

包管理工具 Package Managers

• NPM
• Bower
• Yarn

前端性能 Front-End Performance

• WebPagetest
• PerfBudget
• CriticalCSS
• Picturefill

编辑器 Text Editors

• WebStorm
• VScode
• Sublime Text
• Atom
• HBuilder

JS框架 JS Frameworks

• Backbone
• AngularJs
• React
• Vue

UI框架 UI Frameworks

• Bootstrap
• Ionic
• Foundation
• FrozenUI
• materializecss
• mui
• Ant Design
• eleme

JS预处理 JS Preprocessors

• TypeScript
• CoffeeScript
• Babel

响应式网页 Responsible WEB Design

• 渐进增强、可访问性

过程自动化 Process Automation

• Grunt
• Gulp

模板引擎 Templating

• Handlebars
• Haml
• Jade

代码质量 Code Quality

• JSCS
• ESLint

浏览器刷新 Browser Refreshing

• LiveReload
• Guard

构建工具 Build Tools

• RequireJS
• seajs
• Browserify
• Webpack

CSS预处理器 CSS Preprocessors

• Sass
• Less
• stylus

后端 Back-End

• nodeJS
• PHP

版本控制 Version Control

• Git
• Svn

代码测试 Testing

CSS设计模式 OOCSS & Style Guides

• MVCSS

---

核心 Core

HTML5

• W3C http://www.w3school.com.cn/html5/
• W3C https://www.w3.org/html/ig/zh/wiki/HTML5
• 菜鸟教程 http://www.runoob.com/html/html5-intro.html
• HTML5中文门户 http://www.html5cn.org/

CSS3

• W3C CSS教程 http://www.w3school.com.cn/css/index.asp
• W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
• 菜鸟教程CSS教程 http://www.runoob.com/css/css-tutorial.html
• 菜鸟教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
• CSS参考手册 http://css.doyoe.com/

JS

• W3C http://www.w3school.com.cn/js/
• 菜鸟教程 http://www.runoob.com/js/js-tutorial.html
• 廖雪峰js教程 http://www.liaoxuefeng.com
• js标准参考教程-阮一峰http://javascript.ruanyifeng.com/

jQuery

• W3C http://www.w3school.com.cn/jquery/
• 菜鸟教程 http://www.runoob.com/jquery/jquery-tutorial.html
• 极客学院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
• 廖雪峰 http://www.liaoxuefeng.com/wiki/
• 参考手册 http://www.css88.com/jqapi-1.9/
• 参考手册 http://www.runoob.com/manual/jquery/

ES6

• 阮一峰ES6 http://es6.ruanyifeng.com/
• 极客学院 http://wiki.jikexueyuan.com/project/es6/
• JavaScript 标准参考　阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html

插件

• parallel.js: 前后端通用的一个并行库
• zepto: 用于现代浏览器的兼容 jQuery 的库
• totoro: 稳定的跨浏览器测试工具
• TheaterJS: 一个用于模拟人输入状态的 JS 库
• stellar.js: 前端用于实现异步滚动效果的库，现已不再维护
• skrollr: 另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相
• Framework7: 前端框架，是开发人员可以基于 web 技术构建 IOS7 程序
• regulex: 用于生成 正则表达式 的可视化流程图
• markdown-it: 新型 Markdown 解析器，快速，支持插件
• multiline: 用于 Javascript 中的多行文本，类似于 Ruby 的 HERE Doc
• screenfull.js: 全屏插件，支持各大浏览器
• lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎，可以为 JSON 创建索引，离线也可以使用
• jquery.hotkeys: jQuery 插件，用于绑定热键
• breach_core: Javascript 编写的 Browser (浏览器)
• octocard: 用于生成 Github 信息卡片的库
• github-cards: 用于生成 Github 信息卡片的库
• money.js: 轻量级货币转换库，web 和 node 皆可用
• accounting.js: 轻量级的数字、货币转换库
• javascript-algorithms: Javascript 实现的各种算法集合
• lazy.js: 类似于 underscore, 但是会延迟执行，某些场景下，性能会有很大的提升
• seajs: 前端模块加载器，解决模块化、依赖等问题
• jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库
• js.js: Javascript 实现的 javascript JIT
• jquery-ui: jQuery 团队开发的 UI 相关的前端库，功能强大
• todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库
• localForage: Mozilla 出品，用于离线存储，基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
• EventEmitter: 浏览器版的 EventEmitter
• jquery.serializeJSON: jQuery 插件，用于将 form 表单序列化成 JSON 数据
• knockout: 前端 MVVM 框架，用于开发富前端应用
• mermaid: 可以根据文本生成流程图，类似于 Markdown 的语法
• js-sequence-diagrams: 另一款可以根据文本生成流程图的库，类似于 Markdown 的语法
• flow: 一个用来检测 Javascript 语法错误的库， Facebook 出品
• zoomooz: jQuery 插件，用来处理浏览器缩放
• fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库，优雅大方
• mithril.js: 轻量型前端 MVC 框架，部分使用场景下性能优于 Angular.js 和 React
• backbone: 强大的前端 MVC 库，鼻祖级前端库，最初为了配合 Rails 来模块化前端应用，兼容性良好 (兼容到 IE6)，插件丰富，性能良好
• jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持
• jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等
• jScrollPane: 自定义的滚动条，让所有浏览器都显示一样的滚动条
• onepage-scroll: 提供类似于 iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8
• scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等)，性能很好
• ScrollMagic: 神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果
• infinite-scroll: 滚动加载，滚动到最下到自动加载， Paul Irish 大神之作
• animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果，看真相
• Fluidbox: 页面上内嵌图片的放大缩小效果，类似于 Medium 中的效果
• jquery-validation: jQuery 的一个插件，用于校验 Form 表单
• BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
• emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度
• qrcode-generator: 各种语言的二维码生成工具
• device.js: 一个可以检测设备类型的工具，可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS
• jquery-qrcode: jQuery 插件，用来生成二维码
• Wookmark-jQuery: jQuery 的一个插件，可以用来实现瀑布流的效果
• isotope: 可以用来过滤、排列布局，实现美观的动态布局切换效果，Demo
• lazysizes: 功能强大的图片延迟加载工具，可以首先加载一个低质量的图片，然后再加载高质量的图片
• progressbar.js: 简洁美观的进度条，扁平化
• pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
• spectrum: Js实现的颜色选择器 (Colorpicker)
• jQuery.countdown: jQuery 倒计时插件
• summernote: WYSIWYG 富文本编辑器
• awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
• switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
• trix: Basecamp 公司出品的富文本编辑器，简洁小巧
• sensor.js: 在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。定位、运动、倾斜等
• hyhyhy: 用于创建 基于 HTML5 的 演示文稿
• swipebox: jQuery 插件，用于处理移动端的触摸事件
• FileAPI: 前端用户处理文件（拖放、多文件上传等）
• Sortable: 现代浏览器上用于实现元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依赖 jQuery
• Swiper: 用于实现浏览器上的滑动切换效果，支持硬件加速
• matter-js: 2D 物理效果引擎，碰撞、弹跳等
• jQTouch: 用于辅助创建手机端的 Web 应用，支持主题、Zepto.js 等
• snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
• c3: 基于 D3 的图表库
• echarts: 企业级图表库，百度开发
• parallax.js: 一个用于响应智能手机 orientation 的库
• jQuery-Animate-Enhanced: jQuery 动画库的一个增强，用于现代浏览器
• wysihtml: 富文本编辑器，适用于现代浏览器
• slip: 一个通过滑动或者拖拽来操控列表的库
• evil-icons: 一个矢量图库，提供 Ruby/Node 等支持
• PhotoSwipe: JS 的一个图片展示库
• focusable: 是页面上一个元素高亮的库，有图有真相
• firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
• jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库，基于 HTML5
• mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架
• interact.js: 一个适用于现代浏览器的，用于处理 手势、拖放、缩放等的库
• rebound-js: 实现部分物理效果，Facebook 出品
• basket.js: 基于 LocalStorage 的资源加载器，可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存
• iscroll: 高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库，且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
• metrics-graphics: 基于 D3 的图表库，简洁、高效，Mozilla 出品
• accessible-html5-video-player: Paypal 出品的 Video 播放器
• loading: 几种 Loading 效果，基于 SVG
• flippant.js: 一款能够漂亮的网页元素翻转效果库，代码许久不更新，不过作为源码学习还是不错的
• move.js: 基于 CSS3 的前端动画框架
• scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint)，看 Demo
• Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
• foundation: 另一款前端模版框架，类似于 Bootstrap
• Flat-UI: Bootstrap 的一款主题，简洁美观
• iCheck: 一款漂亮的 Checkbox 插件
• Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
• slick: 功能异常强大的一个图片滑动切换效果库
• SocialButtons: 漂亮的社交按钮
• sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
• web-animations-js: Javascript 实现的 Web Animation API
• vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
• plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
• timesheet.js: 基于 HTML5 & CSS3 时间表
• slideout: 一个非常美观的侧滑菜单

---

包管理工具 Package Managers

NPM

• 菜鸟教程NPM 使用介绍 http://www.runoob.com/nodejs/nodejs-npm.html
• 淘宝 NPM 镜像 https://npm.taobao.org/
• npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
• npm包搜索地址 https://www.npmjs.com/

Bower

• Bower中文网 http://www.bowercn.com/
• Bower：客户端库管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html

Yarn

• yarn中文网 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依赖管理
• YARN 简介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/

---

编辑器 Text Editors

WebStorm

• 官网下载 http://www.jetbrains.com/webstorm/download
• 前端网破解版下载 http://www.qdfuns.com/tools

VScode

• 官网下载 https://code.visualstudio.com/
• vscode 插件精选 - 献给所有前端工程师https://segmentfault.com/a/1190000006697219

SublimeText

• 官网下载 https://www.sublimetext.com/
• 前端网破解版插件版下载 http://www.qdfuns.com/tools

• SublimeCodeIntel: Sublime Text 的代码补全工具，支持多种语言
• Emmet：一个用于提高开发效率的编辑器插件，前身是Zen coding
• SublimeLinter: 一个提供代码质量检测的插件
• SublimeTmpl：快速新建指定的模版文件
• Syntax-highlighting-for-Sass：sass代码高亮插件
• MarkdownEditing: Sublime Text 强大的 Markdown 扩展, 提供快捷键, 主题等
• ApplySyntax: 辅助检测语法插件
• CTags: Sublime Text Ctags 支持插件, 需要安装 ctags
• sublime-react: React 代码高亮

Atom

• 官网下载 https://atom.io/

HBuilder

• 官网下载 http://www.dcloud.io/

---

JS框架 JS Frameworks

Backbone

• Backbone.js API中文文档http://www.css88.com/doc/backbone/

AngularJs

• 中文官方文档https://angular.cn/
• angularjs中文网http://www.apjs.net/
• angularjs教程http://www.angularjs.net.cn/
• Angular 基础入门http://www.cnblogs.com/micua/p/angular-essential.html

• angular-masonry: Masonry 的 AngularJS 插件，用于瀑布流
• angular-schema-form: 根据 JSON 生成响应的 Form 表单
• restangular: Angular 中用来处理 RESTful API 的插件，可替代 $resource
• ng-cordova: Cordova 常用组件的 Angular 版本
• angular-translate: Angular 的国际化 (I18n)
• ng-inspector: Chrome 插件，用于调试 Angular
• angularjs-style-guide: AngularJS 代码风格
• ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components
• material: Google Material Design 效果的 Angular 实现
• angular-local-storage: Angular 插件, 提供了对 localStorage 的友好支持, 并对不支持的浏览器使用 cookie 优雅降级
• angular-filter: 一组有用的 Angular Filters
• bindonce: Angular 插件, 用于减少 Watcher 的数量, 提升性能

React

• 英文官方文档https://facebook.github.io/react/docs/hello-world.html
• 中文官方文档http://reactjs.cn/react/docs/getting-started-zh-CN.html
• gitbooks手册https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
• 阮一峰react入门http://www.ruanyifeng.com/blog/2015/03/react.html
• 阮一峰React Router入门http://www.ruanyifeng.com/blog/2016/05/react_router.html
• React Router 中文文档https://react-guide.github.io/react-router-cn/
• react-redux 中文文档http://cn.redux.js.org/docs/react-redux/index.html
• 阮一峰Redux 入门教程http://www.ruanyifeng.com/blog

• react: React 框架源代码
• react-native: Facebook 出品的使用 React 开发 IOS 原生应用的框架
• react-hot-loader: 实时调整 React 组件效果
• grunt-react: React 的 Grunt 组件, 用于将 JSX 编译成 JS
• touchstonejs: 基于 React 的手机应用前端框架
• essential-react: 基于 React, ES6, React-Router的一个应用脚手架
• react-router: React 路由解决方案

Vue

• vue官方http://cn.vuejs.org/
• vuex官方http://vuex.vuejs.org/zh-cn/
• vue-router官方https://router.vuejs.org/zh-cn/

---

UI框架 UI Frameworks

Bootstrap

• 最受欢迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/

Ionic

• 一款接近原生的Html5移动App开发框架　会html css js就可以开发apphttp://www.ionic.wang/

Foundation

• Foundation 中文网 迄今为止最好的响应式前端框架http://www.foundcss.com

FrozenUI

• 移动端服务的前端框架http://frozenui.github.io/

materializecss

• 基于Material Design的主流前端响应式框架http://www.materializecss.cn/

mui

• 最接近原生APP体验的高性能前端框架http://dev.dcloud.net.cn/mui/

AntDesign

• 和react配合的UI框架https://ant.design

eleme

• 和vue配合的UI框架http://element.eleme.io/

---

JS预处理 JS Preprocessors

TypeScript

• TypeScript 入门教程 菜鸟教程http://www.runoob.com/
• TypeScript中文网https://www.tslang.cn/
• TypeScript教程gitbookhttps://www.gitbook.com/

CoffeeScript

• CoffeeScript 中文http://coffee-script.org/
• CoffeeScript 实用手册 极客学院http://wiki.jikexueyuan.com/project/coffeescript/

---

过程自动化 Process Automation

Grunt

• Grunt中文网http://www.gruntjs.net/

Gulp

• gulp.js 中文网http://www.gulpjs.com.cn/
• gulp详细入门教程http://www.ydcss.com/
• 前端构建工具gulpjs的使用介绍及技巧http://www.cnblogs.com/2050/p/4198792.html
• Gulp开发教程https://www.w3ctech.com/topic/134

---

模板引擎 Templating

Handlebars

• handlebarsjs官网http://handlebarsjs.com/
• Handlebars中文文档http://www.360doc.com/content/
• Handlebars.js 中文文档http://keenwon.com/992.html
• Handlebars的使用方法文档整理http://www.tuicool.com/articles/fqQFN3

Haml

• haml官方文档https://github.com/haml/haml
• haml入门http://blog.csdn.net/napoay/article/details/50491363

Jade

• Jade 官方的英文文档http://www.w3cplus.com/html/how-to-use-jade.html
• Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html
• 带你学习Jade模板引擎视频http://www.imooc.com/learn/259

---

构建工具 Build Tools

RequireJS

• RequireJS 英文网http://requirejs.org/
• RequireJS 中文网http://requirejs.cn/
• require.js的用法-阮一峰http://www.ruanyifeng.com/blog

seajs

• seajs文档http://seajs.org/docs/
• SeaJS从入门到原理http://www.tuicool.com/articles/FfEJv2u

Browserify

• 官网http://browserify.org/
• githubhttps://github.com/substack/node-browserify/

Webpack

• Webpack 中文指南http://webpackdoc.com/
• webpack的实例http://www.vichily.com
• webpack的入门http://www.vichily.com
• 一小时包教会 —— webpack 入门指南http://www.w2bc.com/Article/50764

---

CSS预处理器 CSS Preprocessors

Sass

• sass入门http://www.w3cplus.com/sassguide/
• sass参考手册http://sass.bootcss.com/docs/sass-reference/
• SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/

Less

• less中文网http://lesscss.cn/
• less快速入门http://less.bootcss.com/

stylus

• stylus中文文档-张鑫旭http://www.zhangxinxu.com/jq/stylus/

---

版本控制 Version Control

Git

• Git教程-廖雪峰http://www.liaoxuefeng.com/wiki/

Svn

• 史上最简单的SVN使用教程和注意事项http://blog.csdn.net/fwzkj/article/details/47988885
• SVN 教程 极客学院http://wiki.jikexueyuan.com/project/svn/
• SVN 教程 菜鸟教程http://www.runoob.com/svn/svn-tutorial.html