前端资源

中文 | ENGLISH

平时开发和学习过程中自己收集的一些前端资源。自行取用，不断更新。欢迎 star 和 fork 补充。你也可以关注我从而在我的点赞中了解到更多有意思的项目。

前端之路，且行且珍惜。

周报

名称	地址	介绍
HTML5 Weekly	http://html5weekly.com	html 技术推送
CSS Weekly	http://css-weekly.com	css 技术推送
Javascript Weekly	http://javascriptweekly.com	javascript 技术推送
Web Design Weekly	http://web-design-weekly.com/	设计相关推送
UX Weekly	http://uxwkly.com	用户体验和设计相关推送
Responsive Design Newsletter	http://responsivedesignweekly.com	响应式设计相关推送
Sidebar	http://sidebar.io	设计相关推送
The Hacker News Newsletter	http://www.hackernewsletter.com	hackernews 推送
Hack Design	http://hackdesign.org	每周发布一个设计类课程
EchoJS	http://www.echojs.com/	EchoJS
Reddit JS	https://www.reddit.com/r/javascript	reddit 的 javascript 分类
Front-End Front	https://frontendfront.com/	Front-End Front
FE Weekly	http://www.feweekly.com/	带中文导读的前端周刊
前端周刊	https://github.com/sorrycc/weekly	云谦大佬的前端周刊，每周发布

社区

名称	地址	介绍
V2EX	http://www.v2ex.com	国内技术社区，way to explore
cnode	http://cnodejs.org	国内 nodejs 社区
stackoverflow	http://stackoverflow.com	国外问答社区
SegmentFault	http://segmentfault.com	国内问答社区
DIV.IO	http://div.io	国内前端社区
掘金	https://juejin.im/	国内开发者社区
前端早早聊	https://www.zaozao.run/	前端早早聊社区

博客

名称	地址	介绍
InfoQ	http://www.infoq.com/	InfoQ
W3Cplus	http://www.w3cplus.com	以 css3、html5、Javascript 和各类 demo 为主，推广国内前端行业的技术博客
前端观察	http://www.qianduan.net	前端技术文章
百度 EFE	http://efe.baidu.com	百度商业体系前端团队
百度 FEX	http://fex.baidu.com	百度 FEX 前端团队
张鑫旭-鑫空间-鑫生活	http://www.zhangxinxu.com/wordpress	前端技术文章
ria 之家	http://www.36ria.com	前端技术文章
大前端	http://www.daqianduan.com	杂七杂八
设计达人	http://www.shejidaren.com	设计类
司徒正美	http://www.cnblogs.com/rubylouvre	司徒正美的博客
阮一峰	http://www.ruanyifeng.com/blog	技术文章
Be For Web	http://beforweb.com	关注移动应用及互联网产品、用户体验设计、前端开发
Smashing Magazine	http://www.smashingmagazine.com	技术、设计
CSS-TRICKS	http://css-tricks.com	技术
Web Designer Wall	http://webdesignerwall.com	技术、设计
Tutorialzine	http://tutorialzine.com	一些不错的文章
Jake Rutter	http://www.onerutter.com	Jake Rutter 的博客
Paul Irish	http://www.paulirish.com	Paul Irish 的博客
DailyJS	http://dailyjs.com	技术文章
Steve Souders	http://stevesouders.com	Steve Souders 的博客
Evilcos	http://evilcos.me	余弦的博客
Krasimir Tsonev	http://krasimirtsonev.com	Krasimir Tsonev 的博客
soho UX	http://ux.sohu.com	sohu UX
w3ctech	http://www.w3ctech.com	w3ctech
阿里妈妈 MUX	http://mux.alimama.com/	阿里妈妈的用户体验部门
sitepoint	https://www.sitepoint.com/	sitepoint
Alloy Team	http://www.alloyteam.com/	Alloy Team 腾讯Web前端团队

工具

名称	地址	介绍
Grunt	http://gruntjs.com	JavaScript 任务执行工具
Gulp	http://gulpjs.com	Javascript 任务执行工具
chalk	https://github.com/chalk/chalk	Terminal string styling done right
phantomJS	http://phantomjs.org/	PhantomJS is a headless WebKit scriptable with a JavaScript API.
casperJS	http://casperjs.org/	CasperJS is a navigation scripting & testing utility
spritesmith	https://github.com/Ensighten/spritesmith	很不错的自动合并 icon 的工具
zepto.js	http://zeptojs.com	精巧的 js 框架
underscore	http://underscorejs.org/	A JavaScript library
lodash	https://lodash.com/	A modern JavaScript utility library delivering modularity, performance, & extras.
Amaze UI	http://amazeui.org	国内开源 HTML5 跨屏框架
FIS	http://fis.baidu.com	前端工具框架
ACE	http://ace.c9.io/	c9.io 使用的很棒的代码编辑器
ECharts	http://echarts.baidu.com	Javascript 图表库
Karma	http://karma-runner.github.io	Javascript 测试驱动环境
Mocha	http://mochajs.org	Javascript 测试框架
Chai	http://chaijs.com	断言库
sea.js	http://seajs.org	js 模块加载工具
normalize.css	http://necolas.github.io/normalize.css	css reset
FontAwesome	http://fontawesome.io	不错的 font icon 库
Jekyll	http://jekyllrb.com	静态网站搭建工具
nodePPT	https://github.com/ksky521/nodePPT	markdown 语法写 ppt，支持远程控制等
impress.js	http://bartaz.github.io/impress.js	用 js 做 ppt
browserify	http://browserify.org	让 CommonJS 的组件在浏览器里飞
jsdom	https://github.com/tmpvar/jsdom	A JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js
jshint	http://jshint.com	js 检查工具
hammer.js	http://hammerjs.github.io	模拟页面上的手势事件
swipe.js	http://swipejs.com	轻量级的移动端页面 slider
interact.js	http://interactjs.io/	轻量级的拖拽操作库
lining.js	http://zencode.in/lining.js/	丰富的行内样式操作库
octocard	http://octocard.in/	github 卡片分享工具
Transifex	https://www.transifex.com/	在线协同翻译的网站
Handlebars	http://handlebarsjs.com/	前端模板引擎
AngularJS	https://angularjs.org/	大名鼎鼎的 Angular
React	https://facebook.github.io/react/	大名鼎鼎的 React
Socket.IO	http://socket.io/	实时通信框架
TheaterJS	https://github.com/Zhouzi/TheaterJS	A typing effect mimicking human behavior
emmet	http://emmet.io/	非常好用的一个写 HTML 的插件
gm	http://aheckmann.github.io/gm/	node 上处理图片的不错的工具
esprima	http://esprima.org/index.html	ECMAScript parsing infrastructure for multipurpose analysis
marked	https://github.com/chjj/marked	不错的 Markdown 解析器
to-markdown	https://domchristie.github.io/to-markdown/	将 HTML 转换成 Markdown
jsDoc	http://usejsdoc.org/	js api document generator
pikaday	https://github.com/dbushell/Pikaday	A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS
moment.js	http://momentjs.com/	Parse, validate, manipulate, and display dates in JavaScript.
fastclick	https://github.com/ftlabs/fastclick	Polyfill to remove click delays on browsers with touch UIs
pdf.js	https://github.com/mozilla/pdf.js	js pdf reader
lazy.js	http://danieltao.com/lazy.js/	Like Underscore, but lazier
fullPage.js	http://alvarotrigo.com/fullPage/	Create Beautiful Fullscreen Scrolling Websites
CSSOM	https://github.com/NV/CSSOM	CSS Object Model implemented in pure JavaScript.
jquery-pjax	http://pjax.herokuapp.com/	pushState + ajax = pjax
request	https://github.com/request/request	Simplified HTTP request client.
psd.js	https://github.com/meltingice/psd.js	A Photoshop PSD file parser for NodeJS and browsers
js-xlsx	https://github.com/SheetJS/js-xlsx	XLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer
alloyImage	https://github.com/AlloyTeam/AlloyImage	基于 HTML5 的专业级图像处理开源引擎
messagePack	http://msgpack.org/	MessagePack is an efficient binary serialization format
Protocol Buffers	https://developers.google.com/protocol-buffers/	Protocol buffers are a language-neutral, platform-neutral extensible mechanism for serializing structured data.
rollup	http://rollupjs.org/	不错的 ES 6 模块处理器
documentation.js	http://documentation.js.org/	不错的 JS 文档工具
fontello	http://fontello.com/	在线 iconfont 生成工具
feathers	http://feathersjs.com/	实时交互框架
pandoc	http://pandoc.org/	比较全面的文档转换工具
stacktrace.js	http://www.stacktracejs.com/	针对主流浏览器的 stacktrace 工具库
postCSS	https://github.com/postcss/postcss	PostCSS is a tool for transforming styles with JS plugins.
autoPrefixer	https://github.com/postcss/autoprefixer	Parse CSS and add vendor prefixes to rules by Can I Use
cssnano	http://cssnano.co/	一个不错的 CSS 压缩插件
precss	https://jonathantneal.github.io/precss/	Use Sass-like markup in your CSS
localForage	https://mozilla.github.io/localForage/	挺不错的本地缓存库
loader.css	https://connoratherton.com/loaders	Delightful and performance-focused pure css loading animations.
GSAP	https://github.com/greensock/GreenSock-JS/	性能很棒的 JS 动画库
cssTriggers	https://csstriggers.com/	CSS 属性对于重绘、重排和合成的影响
nodemailer	http://nodemailer.com/	基于 Nodejs 的 email 工具
riot	https://github.com/riot/riot	一个很轻量的 UI 库
amp	https://github.com/ampproject/amphtml	AMP project
weex	https://github.com/alibaba/weex	alibaba weex
polyfill-service	https://github.com/Financial-Times/polyfill-service	自动化的 polyfill 服务
medium-editor	https://github.com/yabwe/medium-editor	Medium.com 的所见即所得编辑器
summernote	https://github.com/summernote/summernote	简单的所见即所得编辑器
ramda	https://github.com/ramda/ramda	函数式编程库
vue	http://vuejs.org/	很棒的 JS 框架
webpack	http://webpack.github.io/	大名鼎鼎的打包工具
flow	https://flowtype.org/	JS 静态类型检查工具
yarn	https://yarnpkg.com/	node 依赖理工具
chocolatey	https://chocolatey.org/	windows 包管理工具
superagent	https://github.com/visionmedia/superagent	Ajax with less suck - (and node.js HTTP client to match)
request	https://github.com/request/request	Simplified HTTP request client.
request-promise	https://github.com/request/request-promise	The simplified HTTP request client 'request' with Promise support.
rxjs	https://github.com/ReactiveX/rxjs	A reactive programming library for JavaScript
commander	https://github.com/tj/commander.js	node.js command-line interfaces made easy
node-semver	https://github.com/npm/node-semver	The semver parser for node (the one npm uses)
node-emoji	https://github.com/omnidan/node-emoji	simple emoji support for node.js projects
shields.io	http://shields.io/	各种服务的状态图标
codecov	https://codecov.io/	测试覆盖率服务
inferno	http://infernojs.org/	轻量级的类 react 库
preact	https://preactjs.com/	轻量级的类 react 库
winston	https://github.com/winstonjs/winston	node 的多通道异步日志库
xo	https://github.com/sindresorhus/xo	对于 eslint 的扩展配置
jsPDF	https://github.com/MrRio/jsPDF	js pdf 生成工具
gpu.js	https://github.com/gpujs/gpu.js	GPU Accelerated Javascript
tabris-js	https://github.com/eclipsesource/tabris-js	native apps in JS
iron-node	https://github.com/s-a/iron-node	debug node.js with chrome dev tool
release	https://github.com/zeit/release	Generate changelogs with a single command
franc	https://github.com/wooorm/franc	Natural language detection
markvis	https://github.com/geekplux/markvis	make visualization in markdown
icaro	https://github.com/GianlucaGuarini/icaro	Smart and efficient javascript object observer
gitignore	https://github.com/github/gitignore	A collection of useful .gitignore templates
js-git	https://github.com/creationix/js-git	A JavaScript implementation of Git
benchmark.js	https://github.com/bestiejs/benchmark.js	A benchmarking library
nightwatch	https://github.com/nightwatchjs/nightwatch	Automated testing and continous integration framework based on node.js and selenium webdriver
spikenail	https://github.com/spikenail/spikenail	Node.js GraphQL API framework
mailit	https://github.com/dthree/mailit	A tiny drop-in REST API to send emails
medium-editor	https://github.com/yabwe/medium-editor	Medium.com WYSIWYG editor
chart.js	https://github.com/chartjs/Chart.js	Simple HTML5 Charts using the <canvas> tag
spacetime	https://github.com/smallwins/spacetime	A lightweight way to handle timezones in js
micro	https://github.com/zeit/micro	Asynchronous HTTP microservices
hyperapp	https://github.com/hyperapp/hyperapp	1 KB JavaScript library for building frontend applications
acorn	https://github.com/ternjs/acorn	A small, fast, JavaScript-based JavaScript parser
slate	https://github.com/lord/slate	Beautiful static documentation for your API
gpu.js	https://github.com/gpujs/gpu.js	GPU Accelerated JavaScript
unfetch	https://github.com/developit/unfetch	Bare minimum fetch polyfill in 500 bytes
graphql-js	https://github.com/graphql/graphql-js	A reference implementation of GraphQL for JavaScript
popper.js	https://github.com/FezVrasta/popper.js	A kickass library to manage your poppers
caporal.js	https://github.com/mattallty/Caporal.js	A full-featured framework for building command line applications (cli) with node.js
songbird	https://github.com/google/songbird	Spatial Audio Encoding on the Web
uncss	https://github.com/giakki/uncss	Remove unused styles from CSS
puppeteer	https://github.com/GoogleChrome/puppeteer	Headless Chrome Node API
nprogress	https://github.com/rstacruz/nprogress	For slim progress bars
fitty	https://github.com/rikschennink/fitty	Makes text fit perfectly
fuzzysort	https://github.com/farzher/fuzzysort	Fast SublimeText-like fuzzy search for JavaScript
stylelint	https://github.com/stylelint/stylelint	A mighty, modern CSS linter
lint-staged	https://github.com/okonet/lint-staged	Run linters on git staged files
text-mask	https://github.com/text-mask/text-mask	Input mask for React, Angular, Ember, Vue, & plain JavaScript
pre-commit	https://github.com/observing/pre-commit	Automatically installs a git pre-commit script in your git repository which runs your npm test on pre-commit
intro.js	https://github.com/usablica/intro.js	A better way for new feature introduction and step-by-step users guide for your website and project
lozad.js	https://github.com/ApoorvSaxena/lozad.js	Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more
r2	https://github.com/mikeal/r2	HTTP client. Spiritual successor to request.
fastify	https://github.com/fastify/fastify	Fast and low overhead web framework, for Node.js
graphql.js	https://github.com/f/graphql.js	A Simple and Isomorphic GraphQL Client for JavaScript
websocket-as-promised	https://github.com/vitalets/websocket-as-promised	A Promise-based API for WebSockets
strapi	https://github.com/strapi/strapi	Node.js Content Management Framework (headless-CMS) to build powerful API with no effort
fast-json-stringify	https://github.com/fastify/fast-json-stringify	2x faster than JSON.stringify()
accessibilityjs	https://github.com/github/accessibilityjs	Client side accessibility error scanner
napajs	https://github.com/Microsoft/napajs	Napa.js: a multi-threaded JavaScript runtime
apidoc	https://github.com/apidoc/apidoc	RESTful web API Documentation Generator
kue	https://github.com/Automattic/kue	Kue is a priority job queue backed by redis, built for node.js
node-microtime	https://github.com/wadey/node-microtime	Get the current time in microseconds
luma.gl	https://github.com/uber/luma.gl	A JavaScript WebGL Framework for Data Visualization
date-fns	https://github.com/date-fns/date-fns	Modern JavaScript date utility library
webdriverio	https://github.com/webdriverio/webdriverio	A Node.js bindings implementation for the W3C WebDriver protocol
spectron	https://github.com/electron/spectron	Test Electron apps using ChromeDriver
draggable	https://github.com/Shopify/draggable	The JavaScript Drag & Drop library your grandparents warned you about
minimist	https://github.com/substack/minimist	parse argument options
ajv	https://github.com/epoberezkin/ajv	The fastest JSON-Schema Validator. Supports draft-04/06
src2png	https://github.com/mplewis/src2png	Turn your source code into beautiful syntax-highlighted images
smooth-scrollbar	https://github.com/idiotWu/smooth-scrollbar	Customizable, Pluginable, and High Performance Scrollbars!
draggable	https://github.com/Shopify/draggable	The JavaScript Drag & Drop library your grandparents warned you about
fast-json-stringify	https://github.com/fastify/fast-json-stringify	2x faster than JSON.stringify()
accessibilityjs	https://github.com/github/accessibilityjs	Client side accessibility error scanner
parcel	https://github.com/parcel-bundler/parcel	Blazing fast, zero configuration web application bundler
clusterize.js	https://github.com/NeXTs/Clusterize.js	Tiny vanilla JS plugin to display large data sets easily
jest	https://github.com/facebook/jest	Delightful JavaScript Testing
helmet	https://github.com/helmetjs/helmet	Help secure Express apps with various HTTP headers
brotli	https://github.com/google/brotli	Brotli compression format
clipboard.js	https://github.com/zenorocha/clipboard.js	Modern copy to clipboard. No Flash. Just 3kb gzipped
workerize	https://github.com/developit/workerize	Run a module in a Web Worker
scripty	https://github.com/testdouble/scripty	Because no one should be shell-scripting inside a JSON file
modernizr	https://github.com/Modernizr/Modernizr	Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
greenlet	https://github.com/developit/greenlet	Move an async function into its own thread
cosmiconfig	https://github.com/davidtheclark/cosmiconfig	Find and load configuration from a package.json property, rc file, or CommonJS module
micromatch	https://github.com/micromatch/micromatch	Highly optimized wildcard and glob matching library
carbon	https://github.com/dawnlabs/carbon	Create and share beautiful images of your source code

最佳实践

名称	地址	介绍
project-guidelines	https://github.com/wearehive/project-guidelines	a set of best practices for JS project
API-Security-Checklist	https://github.com/shieldfy/API-Security-Checklist	Checklist of the most important security countermeasures
awesome-guidelines	https://github.com/Kristories/awesome-guidelines	A curated list of high quality coding style conventions and standards
front-end-checklist	https://github.com/thedaviddias/Front-End-Checklist	The perfect Front-End Checklist for modern websites and meticulous developers

关于动画

名称	地址	介绍
animate.css	https://github.com/daneden/animate.css	css 动画库
bounce.js	https://github.com/tictail/bounce.js	基于 css3 的 js 动画库
magic	https://github.com/miniMAC/magic	CSS3 动画库
velocity	https://github.com/julianshapiro/velocity	js 动画库
anime	https://github.com/juliangarnier/anime	js 动画引擎
web-animations-js	https://github.com/web-animations/web-animations-js	JavaScript implementation of the Web Animations API

关于 Material

名称	地址	介绍
MDL	http://www.getmdl.io/	Google 基于 Material Design 规范出的框架
Materialize	http://materializecss.com/	基于 Material Design 的前端框架
Material Icons	http://google.github.io/material-design-icons/	Google 关于 Material 图标的指南
Material-ui	http://www.material-ui.com/#/	React Components
Angular Material	https://material.angularjs.org/latest/	UI Component framework for angular
Bootstrap Material	https://mdbootstrap.com/	Material Design for Bootstrap3

关于 Visual Studio Code

名称	地址	介绍
Settings Sync	https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync	同步配置的插件
Vim	https://marketplace.visualstudio.com/items?itemName=vscodevim.vim	Vim 插件
Better Align	https://marketplace.visualstudio.com/items?itemName=wwm.better-align	代码对齐插件
Bracket Pair Colorizer	https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer	高亮区分配对的括号
change-case	https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case	在不同格式命名见快速切换
Document This	https://marketplace.visualstudio.com/items?itemName=joelday.docthis	为 JS 和 TS 文件自动生成 JSDoc 风格的注释
IntelliSense for CSS class names	https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion	通过项目中的 CSS 文件自动补全 HTML 的 class 属性
Material Icon Theme	https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme	Material Icon 插件

关于 Atom

名称	地址	介绍
seti-ui	https://atom.io/themes/seti-ui	很棒的深色主题
file-icons	https://atom.io/packages/file-icons	不错的图标插件
atom-ternjs	https://atom.io/packages/atom-ternjs	还不错的 JS 补全插件
emmet	https://atom.io/packages/emmet	写 HTML 很爽
minimap	https://atom.io/packages/minimap	全文内容预览
vim-mode	https://atom.io/packages/vim-mode	vim 插件
ex-mode	https://atom.io/packages/ex-mode	vim 插件的扩展，推荐一起使用
linter-eslint	https://atom.io/packages/linter-eslint	eslint 的插件
linter-htmlhint	https://atom.io/packages/linter-htmlhint	htmlhint 的插件
pigments	https://atom.io/packages/pigments	在文件中显示颜色

规范

名称	地址	介绍
w3org	http://www.w3.org/	w3org
whatwg	https://whatwg.org/	whatwg
Promises/A+	https://promisesaplus.com/	promises spec
CommonJS	http://wiki.commonjs.org/wiki/CommonJS	commonjs wiki
AMDJS	https://github.com/amdjs/amdjs-api	amdjs
CMDJS	https://github.com/cmdjs/specification	cmdjs
JSON-schema	http://json-schema.org/	JSON Schema
Swagger	http://swagger.io/specification/	Popular APIs Spec
RAML	https://github.com/raml-org/raml-spec	RAML Specification
graphQL	http://graphql.org/	A query language for your API

教程

名称	地址	介绍
前端开胃菜	http://poppinlp.github.io/front-end-appetizers	前端基础入门教程
CSS 词汇表	http://yisibl.github.io/css-vocabulary/	适合 CSS 初学者了解各种 CSS 基本概念
Git 在线入门教程	http://pcottle.github.io/learnGitBranching/?locale=zh_CN	适合 Git 入门者的在线学习教程，可直接在线操作
ProGit 中文版	http://git.oschina.net/progit/	很棒的一本讲 Git 的书，这是网页版，当然也有很多地方能下载到 pdf 版
CSS 布局水平垂直居中总结	http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/	总结的挺全面
understanding ES6	https://github.com/nzakas/understandinges6	NZ 大神讲解 ES6
ECMAScript 6 入门	http://es6.ruanyifeng.com/	阮一峰老师的中文 ES6 教程
Bash 基础教程	https://github.com/Idnan/bash-guide	英文的 Bash 基础教程
Front-End-Checklist	https://github.com/thedaviddias/Front-End-Checklist	The perfect Front-End Checklist for modern websites and meticulous developers
30 seconds of code	https://github.com/Chalarangelo/30-seconds-of-code	Curated collection of useful Javascript snippets that you can understand in 30 seconds or less

有点意思

名称	地址	介绍
Attack Map	http://map.norsecorp.com/	对于全球黑客攻击蛮有意思的可视化
Gource	https://github.com/acaudwell/Gource	对于 commit 的可视化呈现
hardseed	https://github.com/yangyangwithgnu/hardseed	hardseed