前端資源整理 – 訂閱、工具等

張小豬要飛天發表於2019-02-16
前端

取自 我的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

相關文章