Home

Awesome

前端资源

中文 | ENGLISH

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

前端之路,且行且珍惜。

周报

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

社区

名称地址介绍
V2EXhttp://www.v2ex.com国内技术社区,way to explore
cnodehttp://cnodejs.org国内 nodejs 社区
stackoverflowhttp://stackoverflow.com国外问答社区
SegmentFaulthttp://segmentfault.com国内问答社区
DIV.IOhttp://div.io国内前端社区
掘金https://juejin.im/国内开发者社区
前端早早聊https://www.zaozao.run/前端早早聊社区

博客

名称地址介绍
InfoQhttp://www.infoq.com/InfoQ
W3Cplushttp://www.w3cplus.com以 css3、html5、Javascript 和各类 demo 为主,推广国内前端行业的技术博客
前端观察http://www.qianduan.net前端技术文章
百度 EFEhttp://efe.baidu.com百度商业体系前端团队
百度 FEXhttp://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 Webhttp://beforweb.com关注移动应用及互联网产品、用户体验设计、前端开发
Smashing Magazinehttp://www.smashingmagazine.com技术、设计
CSS-TRICKShttp://css-tricks.com技术
Web Designer Wallhttp://webdesignerwall.com技术、设计
Tutorialzinehttp://tutorialzine.com一些不错的文章
Jake Rutterhttp://www.onerutter.comJake Rutter 的博客
Paul Irishhttp://www.paulirish.comPaul Irish 的博客
DailyJShttp://dailyjs.com技术文章
Steve Soudershttp://stevesouders.comSteve Souders 的博客
Evilcoshttp://evilcos.me余弦的博客
Krasimir Tsonevhttp://krasimirtsonev.comKrasimir Tsonev 的博客
soho UXhttp://ux.sohu.comsohu UX
w3ctechhttp://www.w3ctech.comw3ctech
阿里妈妈 MUXhttp://mux.alimama.com/阿里妈妈的用户体验部门
sitepointhttps://www.sitepoint.com/sitepoint
Alloy Teamhttp://www.alloyteam.com/Alloy Team 腾讯Web前端团队

工具

名称地址介绍
Grunthttp://gruntjs.comJavaScript 任务执行工具
Gulphttp://gulpjs.comJavascript 任务执行工具
chalkhttps://github.com/chalk/chalkTerminal string styling done right
phantomJShttp://phantomjs.org/PhantomJS is a headless WebKit scriptable with a JavaScript API.
casperJShttp://casperjs.org/CasperJS is a navigation scripting & testing utility
spritesmithhttps://github.com/Ensighten/spritesmith很不错的自动合并 icon 的工具
zepto.jshttp://zeptojs.com精巧的 js 框架
underscorehttp://underscorejs.org/A JavaScript library
lodashhttps://lodash.com/A modern JavaScript utility library delivering modularity, performance, & extras.
Amaze UIhttp://amazeui.org国内开源 HTML5 跨屏框架
FIShttp://fis.baidu.com前端工具框架
ACEhttp://ace.c9.io/c9.io 使用的很棒的代码编辑器
EChartshttp://echarts.baidu.comJavascript 图表库
Karmahttp://karma-runner.github.ioJavascript 测试驱动环境
Mochahttp://mochajs.orgJavascript 测试框架
Chaihttp://chaijs.com断言库
sea.jshttp://seajs.orgjs 模块加载工具
normalize.csshttp://necolas.github.io/normalize.csscss reset
FontAwesomehttp://fontawesome.io不错的 font icon 库
Jekyllhttp://jekyllrb.com静态网站搭建工具
nodePPThttps://github.com/ksky521/nodePPTmarkdown 语法写 ppt,支持远程控制等
impress.jshttp://bartaz.github.io/impress.js用 js 做 ppt
browserifyhttp://browserify.org让 CommonJS 的组件在浏览器里飞
jsdomhttps://github.com/tmpvar/jsdomA JavaScript implementation of the WHATWG DOM and HTML standards, for use with node.js
jshinthttp://jshint.comjs 检查工具
hammer.jshttp://hammerjs.github.io模拟页面上的手势事件
swipe.jshttp://swipejs.com轻量级的移动端页面 slider
interact.jshttp://interactjs.io/轻量级的拖拽操作库
lining.jshttp://zencode.in/lining.js/丰富的行内样式操作库
octocardhttp://octocard.in/github 卡片分享工具
Transifexhttps://www.transifex.com/在线协同翻译的网站
Handlebarshttp://handlebarsjs.com/前端模板引擎
AngularJShttps://angularjs.org/大名鼎鼎的 Angular
Reacthttps://facebook.github.io/react/大名鼎鼎的 React
Socket.IOhttp://socket.io/实时通信框架
TheaterJShttps://github.com/Zhouzi/TheaterJSA typing effect mimicking human behavior
emmethttp://emmet.io/非常好用的一个写 HTML 的插件
gmhttp://aheckmann.github.io/gm/node 上处理图片的不错的工具
esprimahttp://esprima.org/index.htmlECMAScript parsing infrastructure for multipurpose analysis
markedhttps://github.com/chjj/marked不错的 Markdown 解析器
to-markdownhttps://domchristie.github.io/to-markdown/将 HTML 转换成 Markdown
jsDochttp://usejsdoc.org/js api document generator
pikadayhttps://github.com/dbushell/PikadayA refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS
moment.jshttp://momentjs.com/Parse, validate, manipulate, and display dates in JavaScript.
fastclickhttps://github.com/ftlabs/fastclickPolyfill to remove click delays on browsers with touch UIs
pdf.jshttps://github.com/mozilla/pdf.jsjs pdf reader
lazy.jshttp://danieltao.com/lazy.js/Like Underscore, but lazier
fullPage.jshttp://alvarotrigo.com/fullPage/Create Beautiful Fullscreen Scrolling Websites
CSSOMhttps://github.com/NV/CSSOMCSS Object Model implemented in pure JavaScript.
jquery-pjaxhttp://pjax.herokuapp.com/pushState + ajax = pjax
requesthttps://github.com/request/requestSimplified HTTP request client.
psd.jshttps://github.com/meltingice/psd.jsA Photoshop PSD file parser for NodeJS and browsers
js-xlsxhttps://github.com/SheetJS/js-xlsxXLSX / XLSM / XLSB / XLS / SpreadsheetML (Excel Spreadsheet) / ODS parser and writer
alloyImagehttps://github.com/AlloyTeam/AlloyImage基于 HTML5 的专业级图像处理开源引擎
messagePackhttp://msgpack.org/MessagePack is an efficient binary serialization format
Protocol Buffershttps://developers.google.com/protocol-buffers/Protocol buffers are a language-neutral, platform-neutral extensible mechanism for serializing structured data.
rolluphttp://rollupjs.org/不错的 ES 6 模块处理器
documentation.jshttp://documentation.js.org/不错的 JS 文档工具
fontellohttp://fontello.com/在线 iconfont 生成工具
feathershttp://feathersjs.com/实时交互框架
pandochttp://pandoc.org/比较全面的文档转换工具
stacktrace.jshttp://www.stacktracejs.com/针对主流浏览器的 stacktrace 工具库
postCSShttps://github.com/postcss/postcssPostCSS is a tool for transforming styles with JS plugins.
autoPrefixerhttps://github.com/postcss/autoprefixerParse CSS and add vendor prefixes to rules by Can I Use
cssnanohttp://cssnano.co/一个不错的 CSS 压缩插件
precsshttps://jonathantneal.github.io/precss/Use Sass-like markup in your CSS
localForagehttps://mozilla.github.io/localForage/挺不错的本地缓存库
loader.csshttps://connoratherton.com/loadersDelightful and performance-focused pure css loading animations.
GSAPhttps://github.com/greensock/GreenSock-JS/性能很棒的 JS 动画库
cssTriggershttps://csstriggers.com/CSS 属性对于重绘、重排和合成的影响
nodemailerhttp://nodemailer.com/基于 Nodejs 的 email 工具
riothttps://github.com/riot/riot一个很轻量的 UI 库
amphttps://github.com/ampproject/amphtmlAMP project
weexhttps://github.com/alibaba/weexalibaba weex
polyfill-servicehttps://github.com/Financial-Times/polyfill-service自动化的 polyfill 服务
medium-editorhttps://github.com/yabwe/medium-editorMedium.com 的所见即所得编辑器
summernotehttps://github.com/summernote/summernote简单的所见即所得编辑器
ramdahttps://github.com/ramda/ramda函数式编程库
vuehttp://vuejs.org/很棒的 JS 框架
webpackhttp://webpack.github.io/大名鼎鼎的打包工具
flowhttps://flowtype.org/JS 静态类型检查工具
yarnhttps://yarnpkg.com/node 依赖理工具
chocolateyhttps://chocolatey.org/windows 包管理工具
superagenthttps://github.com/visionmedia/superagentAjax with less suck - (and node.js HTTP client to match)
requesthttps://github.com/request/requestSimplified HTTP request client.
request-promisehttps://github.com/request/request-promiseThe simplified HTTP request client 'request' with Promise support.
rxjshttps://github.com/ReactiveX/rxjsA reactive programming library for JavaScript
commanderhttps://github.com/tj/commander.jsnode.js command-line interfaces made easy
node-semverhttps://github.com/npm/node-semverThe semver parser for node (the one npm uses)
node-emojihttps://github.com/omnidan/node-emojisimple emoji support for node.js projects
shields.iohttp://shields.io/各种服务的状态图标
codecovhttps://codecov.io/测试覆盖率服务
infernohttp://infernojs.org/轻量级的类 react 库
preacthttps://preactjs.com/轻量级的类 react 库
winstonhttps://github.com/winstonjs/winstonnode 的多通道异步日志库
xohttps://github.com/sindresorhus/xo对于 eslint 的扩展配置
jsPDFhttps://github.com/MrRio/jsPDFjs pdf 生成工具
gpu.jshttps://github.com/gpujs/gpu.jsGPU Accelerated Javascript
tabris-jshttps://github.com/eclipsesource/tabris-jsnative apps in JS
iron-nodehttps://github.com/s-a/iron-nodedebug node.js with chrome dev tool
releasehttps://github.com/zeit/releaseGenerate changelogs with a single command
franchttps://github.com/wooorm/francNatural language detection
markvishttps://github.com/geekplux/markvismake visualization in markdown
icarohttps://github.com/GianlucaGuarini/icaroSmart and efficient javascript object observer
gitignorehttps://github.com/github/gitignoreA collection of useful .gitignore templates
js-githttps://github.com/creationix/js-gitA JavaScript implementation of Git
benchmark.jshttps://github.com/bestiejs/benchmark.jsA benchmarking library
nightwatchhttps://github.com/nightwatchjs/nightwatchAutomated testing and continous integration framework based on node.js and selenium webdriver
spikenailhttps://github.com/spikenail/spikenailNode.js GraphQL API framework
mailithttps://github.com/dthree/mailitA tiny drop-in REST API to send emails
medium-editorhttps://github.com/yabwe/medium-editorMedium.com WYSIWYG editor
chart.jshttps://github.com/chartjs/Chart.jsSimple HTML5 Charts using the <canvas> tag
spacetimehttps://github.com/smallwins/spacetimeA lightweight way to handle timezones in js
microhttps://github.com/zeit/microAsynchronous HTTP microservices
hyperapphttps://github.com/hyperapp/hyperapp1 KB JavaScript library for building frontend applications
acornhttps://github.com/ternjs/acornA small, fast, JavaScript-based JavaScript parser
slatehttps://github.com/lord/slateBeautiful static documentation for your API
gpu.jshttps://github.com/gpujs/gpu.jsGPU Accelerated JavaScript
unfetchhttps://github.com/developit/unfetchBare minimum fetch polyfill in 500 bytes
graphql-jshttps://github.com/graphql/graphql-jsA reference implementation of GraphQL for JavaScript
popper.jshttps://github.com/FezVrasta/popper.jsA kickass library to manage your poppers
caporal.jshttps://github.com/mattallty/Caporal.jsA full-featured framework for building command line applications (cli) with node.js
songbirdhttps://github.com/google/songbirdSpatial Audio Encoding on the Web
uncsshttps://github.com/giakki/uncssRemove unused styles from CSS
puppeteerhttps://github.com/GoogleChrome/puppeteerHeadless Chrome Node API
nprogresshttps://github.com/rstacruz/nprogressFor slim progress bars
fittyhttps://github.com/rikschennink/fittyMakes text fit perfectly
fuzzysorthttps://github.com/farzher/fuzzysortFast SublimeText-like fuzzy search for JavaScript
stylelinthttps://github.com/stylelint/stylelintA mighty, modern CSS linter
lint-stagedhttps://github.com/okonet/lint-stagedRun linters on git staged files
text-maskhttps://github.com/text-mask/text-maskInput mask for React, Angular, Ember, Vue, & plain JavaScript
pre-commithttps://github.com/observing/pre-commitAutomatically installs a git pre-commit script in your git repository which runs your npm test on pre-commit
intro.jshttps://github.com/usablica/intro.jsA better way for new feature introduction and step-by-step users guide for your website and project
lozad.jshttps://github.com/ApoorvSaxena/lozad.jsHighly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more
r2https://github.com/mikeal/r2HTTP client. Spiritual successor to request.
fastifyhttps://github.com/fastify/fastifyFast and low overhead web framework, for Node.js
graphql.jshttps://github.com/f/graphql.jsA Simple and Isomorphic GraphQL Client for JavaScript
websocket-as-promisedhttps://github.com/vitalets/websocket-as-promisedA Promise-based API for WebSockets
strapihttps://github.com/strapi/strapiNode.js Content Management Framework (headless-CMS) to build powerful API with no effort
fast-json-stringifyhttps://github.com/fastify/fast-json-stringify2x faster than JSON.stringify()
accessibilityjshttps://github.com/github/accessibilityjsClient side accessibility error scanner
napajshttps://github.com/Microsoft/napajsNapa.js: a multi-threaded JavaScript runtime
apidochttps://github.com/apidoc/apidocRESTful web API Documentation Generator
kuehttps://github.com/Automattic/kueKue is a priority job queue backed by redis, built for node.js
node-microtimehttps://github.com/wadey/node-microtimeGet the current time in microseconds
luma.glhttps://github.com/uber/luma.glA JavaScript WebGL Framework for Data Visualization
date-fnshttps://github.com/date-fns/date-fnsModern JavaScript date utility library
webdriveriohttps://github.com/webdriverio/webdriverioA Node.js bindings implementation for the W3C WebDriver protocol
spectronhttps://github.com/electron/spectronTest Electron apps using ChromeDriver
draggablehttps://github.com/Shopify/draggableThe JavaScript Drag & Drop library your grandparents warned you about
minimisthttps://github.com/substack/minimistparse argument options
ajvhttps://github.com/epoberezkin/ajvThe fastest JSON-Schema Validator. Supports draft-04/06
src2pnghttps://github.com/mplewis/src2pngTurn your source code into beautiful syntax-highlighted images
smooth-scrollbarhttps://github.com/idiotWu/smooth-scrollbarCustomizable, Pluginable, and High Performance Scrollbars!
draggablehttps://github.com/Shopify/draggableThe JavaScript Drag & Drop library your grandparents warned you about
fast-json-stringifyhttps://github.com/fastify/fast-json-stringify2x faster than JSON.stringify()
accessibilityjshttps://github.com/github/accessibilityjsClient side accessibility error scanner
parcelhttps://github.com/parcel-bundler/parcelBlazing fast, zero configuration web application bundler
clusterize.jshttps://github.com/NeXTs/Clusterize.jsTiny vanilla JS plugin to display large data sets easily
jesthttps://github.com/facebook/jestDelightful JavaScript Testing
helmethttps://github.com/helmetjs/helmetHelp secure Express apps with various HTTP headers
brotlihttps://github.com/google/brotliBrotli compression format
clipboard.jshttps://github.com/zenorocha/clipboard.jsModern copy to clipboard. No Flash. Just 3kb gzipped
workerizehttps://github.com/developit/workerizeRun a module in a Web Worker
scriptyhttps://github.com/testdouble/scriptyBecause no one should be shell-scripting inside a JSON file
modernizrhttps://github.com/Modernizr/ModernizrModernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser
greenlethttps://github.com/developit/greenletMove an async function into its own thread
cosmiconfighttps://github.com/davidtheclark/cosmiconfigFind and load configuration from a package.json property, rc file, or CommonJS module
micromatchhttps://github.com/micromatch/micromatchHighly optimized wildcard and glob matching library
carbonhttps://github.com/dawnlabs/carbonCreate and share beautiful images of your source code

最佳实践

名称地址介绍
project-guidelineshttps://github.com/wearehive/project-guidelinesa set of best practices for JS project
API-Security-Checklisthttps://github.com/shieldfy/API-Security-ChecklistChecklist of the most important security countermeasures
awesome-guidelineshttps://github.com/Kristories/awesome-guidelinesA curated list of high quality coding style conventions and standards
front-end-checklisthttps://github.com/thedaviddias/Front-End-ChecklistThe perfect Front-End Checklist for modern websites and meticulous developers

关于动画

名称地址介绍
animate.csshttps://github.com/daneden/animate.csscss 动画库
bounce.jshttps://github.com/tictail/bounce.js基于 css3 的 js 动画库
magichttps://github.com/miniMAC/magicCSS3 动画库
velocityhttps://github.com/julianshapiro/velocityjs 动画库
animehttps://github.com/juliangarnier/animejs 动画引擎
web-animations-jshttps://github.com/web-animations/web-animations-jsJavaScript implementation of the Web Animations API

关于 Material

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

关于 Visual Studio Code

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

关于 Atom

名称地址介绍
seti-uihttps://atom.io/themes/seti-ui很棒的深色主题
file-iconshttps://atom.io/packages/file-icons不错的图标插件
atom-ternjshttps://atom.io/packages/atom-ternjs还不错的 JS 补全插件
emmethttps://atom.io/packages/emmet写 HTML 很爽
minimaphttps://atom.io/packages/minimap全文内容预览
vim-modehttps://atom.io/packages/vim-modevim 插件
ex-modehttps://atom.io/packages/ex-modevim 插件的扩展,推荐一起使用
linter-eslinthttps://atom.io/packages/linter-eslinteslint 的插件
linter-htmlhinthttps://atom.io/packages/linter-htmlhinthtmlhint 的插件
pigmentshttps://atom.io/packages/pigments在文件中显示颜色

规范

名称地址介绍
w3orghttp://www.w3.org/w3org
whatwghttps://whatwg.org/whatwg
Promises/A+https://promisesaplus.com/promises spec
CommonJShttp://wiki.commonjs.org/wiki/CommonJScommonjs wiki
AMDJShttps://github.com/amdjs/amdjs-apiamdjs
CMDJShttps://github.com/cmdjs/specificationcmdjs
JSON-schemahttp://json-schema.org/JSON Schema
Swaggerhttp://swagger.io/specification/Popular APIs Spec
RAMLhttps://github.com/raml-org/raml-specRAML Specification
graphQLhttp://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 ES6https://github.com/nzakas/understandinges6NZ 大神讲解 ES6
ECMAScript 6 入门http://es6.ruanyifeng.com/阮一峰老师的中文 ES6 教程
Bash 基础教程https://github.com/Idnan/bash-guide英文的 Bash 基础教程
Front-End-Checklisthttps://github.com/thedaviddias/Front-End-ChecklistThe perfect Front-End Checklist for modern websites and meticulous developers
30 seconds of codehttps://github.com/Chalarangelo/30-seconds-of-codeCurated collection of useful Javascript snippets that you can understand in 30 seconds or less

有点意思

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