前端资源

中文 | 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/ 带中文导读的前端周刊

社区

名称 地址 介绍
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/ 国内开发者社区

博客

名称 地址 介绍
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

工具

名称 地址 介绍
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 http://fezvrasta.github.io/bootstrap-material-design/ 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

Fe Store House

The front-end resource that gathered in my working days.

Fe Store House Info

⭐ Stars 83
🔗 Source Code github.com
🕒 Last Update 7 months ago
🕒 Created 7 years ago
🐞 Open Issues 0
➗ Star-Issue Ratio Infinity
😎 Author poppinlp