前端资源整理 - 订阅、工具等

2024年1月17日 281次阅读来源: 张小猪要飞天

取自我的GITHUB 的 fe-store-house repo，欢迎 PR，欢迎 STAR。原 repo 不定期更新，此文可能断更。
断更了一年多，重新更新一下，似乎 sfgg 的文章渲染中 gfm table 解析有问题。最新更新时间 2017-11-02。

前端资源

中文 | 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

最佳实践

名称 | 地址 | 介绍
—–|——|—–
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 基础教程

有点意思

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

    原文作者：张小猪要飞天
    原文地址: https://segmentfault.com/a/1190000004903841
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。