Skip to content

Latest commit

 

History

History
341 lines (315 loc) · 67.8 KB

README_ENG.md

File metadata and controls

341 lines (315 loc) · 67.8 KB

Front-end Resources

CHINESE | ENGLISH

Front-end resources collected in usually work. Keeping update. You are welcome to STAR and PULL-REQUEST. You could find more interesting repo by follow me and watch my stars list.

Weekly

NAME LINK SUMMARY
HTML5 Weekly http://html5weekly.com about html
CSS Weekly http://css-weekly.com about css
Javascript Weekly http://javascriptweekly.com about javascript
Web Design Weekly http://web-design-weekly.com/ about design
UX Weekly http://uxwkly.com about design
Responsive Design Newsletter http://responsivedesignweekly.com about responsive design
Sidebar http://sidebar.io about design
The Hacker News Newsletter http://www.hackernewsletter.com hackernews weekly
Hack Design http://hackdesign.org about design
EchoJS http://www.echojs.com/ EchoJS
Reddit JS https://www.reddit.com/r/javascript javascript of reddit
Front-End Front https://frontendfront.com/ Front-End Front
FE Weekly http://www.feweekly.com/ fe weekly with Chinese intro
Front-End Weekly https://github.com/sorrycc/weekly about front-end weekly

Community

NAME LINK SUMMARY
V2EX http://www.v2ex.com way to explore
cnode http://cnodejs.org nodejs community in China
stackoverflow http://stackoverflow.com stackoverflow
SegmentFault http://segmentfault.com QA community in China
DIV.IO http://div.io front-end community in China
juejin https://juejin.im/ dev forum in China
zaozaorun https://www.zaozao.run/ front-end community in China

Blog

NAME LINK SUMMARY
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 front-end team

Tool

NAME LINK SUMMARY
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 A good Markdown parser
to-markdown https://domchristie.github.io/to-markdown/ Convert HTML to 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 An image processing lib based on 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/ the next-generation JavaScript module bundler
documentation.js http://documentation.js.org/ beautiful, flexible, powerful js docs
fontello http://fontello.com/ online iconfont generator
feathers http://feathersjs.com/ A minimalist real-time framework for tomorrow's apps
pandoc http://pandoc.org/ a universal document converter
stacktrace.js http://www.stacktracejs.com/ Generate, parse, and enhance JavaScript stack traces in all web browsers
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/ compress your css
precss https://jonathantneal.github.io/precss/ Use Sass-like markup in your CSS
localForage https://mozilla.github.io/localForage/ A nice lib for offline storage
loader.css https://connoratherton.com/loaders Delightful and performance-focused pure css loading animations.
GSAP https://github.com/greensock/GreenSock-JS/ Ultra high-performance, professional-grade animation for the modern web.
cssTriggers https://csstriggers.com/ CSS attibute trigger about layour, paint and composite
nodemailer http://nodemailer.com/ Send e-mails with Node.JS
riot https://github.com/riot/riot A React-like, user interface library
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 Automatic polyfill service
medium-editor https://github.com/yabwe/medium-editor Medium.com WYSIWYG editor
summernote https://github.com/summernote/summernote WYSIWYG editor
ramda https://github.com/ramda/ramda Functional programming library
vue http://vuejs.org/ The Progressive JavaScript Framework
webpack http://webpack.github.io/ A bundler for javascript and friends.
flow https://flowtype.org/ A STATIC TYPE CHECKER FOR JAVASCRIPT
yarn https://yarnpkg.com/ Fast, reliable, and secure dependency management.
chocolatey https://chocolatey.org/ The package manager for 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/ status icons for lots of services
codecov https://codecov.io/ Code coverage done right
inferno http://infernojs.org/ An extremely fast React-like JavaScript library for building modern user interfaces
preact https://preactjs.com/ React-like Javascript library with the same ES6 API
winston https://github.com/winstonjs/winston a multi-transport async logging library for node.js
xo https://github.com/sindresorhus/xo JavaScript happiness style linter
jsPDF https://github.com/MrRio/jsPDF Client-side JavaScript PDF generation for everyone
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

Best Practice

NAME LINK SUMMARY
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

About Animation

NAME LINK SUMMARY
animate.css https://github.com/daneden/animate.css A cross-browser library of CSS animations. As easy to use as an easy thing
bounce.js https://github.com/tictail/bounce.js Create beautiful CSS3 powered animations in no time
magic https://github.com/miniMAC/magic CSS3 Animations with special effects
velocity https://github.com/julianshapiro/velocity Accelerated JavaScript animation
anime https://github.com/juliangarnier/anime JavaScript Animation Engine
web-animations-js https://github.com/web-animations/web-animations-js JavaScript implementation of the Web Animations API

About Material

NAME LINK SUMMARY
MDL http://www.getmdl.io/ Material Design Lite Components in HTML/CSS/JS
Materialize http://materializecss.com/ A modern responsive front-end framework based on Material Design
Material Icons http://google.github.io/material-design-icons/ An overview of material icons
Material-ui http://www.material-ui.com/#/ A Set of React Components that Implement Google’s Material Design
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

About Visual Studio Code

NAME LINK SUMMARY
Settings Sync https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync plugin for sync setting
Vim https://marketplace.visualstudio.com/items?itemName=vscodevim.vim Vim plugin
Better Align https://marketplace.visualstudio.com/items?itemName=wwm.better-align Align code without selecting them first
Bracket Pair Colorizer https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer A customizable extension for colorizing matching brackets
change-case https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
Document This https://marketplace.visualstudio.com/items?itemName=joelday.docthis Automatically generates detailed JSDoc comments in TypeScript and JavaScript files
IntelliSense for CSS class names https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion Provides CSS class name completion for the HTML class attribute based on the CSS files in your workspace
Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme Material Icon plugi

About Atom

NAME LINK SUMMARY
seti-ui https://atom.io/themes/seti-ui a pretty nice dark colored theme
file-icons https://atom.io/packages/file-icons icon plugin
atom-ternjs https://atom.io/packages/atom-ternjs JavaScript code intelligence for atom with Tern
emmet https://atom.io/packages/emmet the essential tool for web developers
minimap https://atom.io/packages/minimap A preview of the full source code.
vim-mode https://atom.io/packages/vim-mode vim plugin
ex-mode https://atom.io/packages/ex-mode Ex for Atom's vim-mode
linter-eslint https://atom.io/packages/linter-eslint plugin for eslint
linter-htmlhint https://atom.io/packages/linter-htmlhint plugin for htmlhint
pigments https://atom.io/packages/pigments display colors in project and files

Spec

NAME LINK SUMMARY
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

Tutorial

NAME LINK SUMMARY
前端开胃菜 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 ES6 book by nzakas
ECMAScript 6 Tutorial http://es6.ruanyifeng.com/ Chinese ES 6 tutorial by Ruanyifeng
Bash Tutorial https://github.com/Idnan/bash-guide Bash Basic Guide
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

Interesting

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