各式 Web 前端開發工具整理

各式 Web 前端開發工具整理

這裡收集了一系列各式各樣與「網頁前端」相關的開發工具、函式庫與參考文件，這些工具僅針對一般桌上型/筆記型電腦的顯示環境為主 (不含平板或手機等行動版網頁相關工具)。

程式碼編寫工具
(Coding Tools)

工作流程/建置/組合
(Workflow/Builds/Assemblers)

lumbar
brunch
grunt

lineman
yeoman
Takeoff

mimosa
codeKit
liveReload
stealJS
anvil.js
modjs
AUTOMATON
Fire.app


瀏覽器套件管理員
(Browser Package Managers) (參見: Front-End Package Manager Comparison)

bower
component
ender
jam


CSS
基底樣式/樣板

normalize.css


CSS
框架 (參見: 框架比較 或 前端
CSS 框架)

foundation
bootstrap
HTML KickStart
kube
skeleton
baseline
gumby
Groundwork
topcoat
purecss
tuktuk
Metro UI CSS
workless
99lime
SUSY


HTML
基底結構/樣板

HTML5 Boilerplate
Rock Hammer
html5bones
dCodes


操作
DOM 的相關函式庫 (FYI: dojo, yui, ext, qooxdoo 都有自己的 DOM 工具)

jQuery

jQuery++

zepto
tire
mooTools
DOMAssistant
Enders The Jeesh

domReady
query
bonzo
bean


各式
JavaScript 輔助工具/函式庫

lo-dash
lazy.js
string.js
boiler.js
underscore

underscore.string

sugar.js
craft.js
valentine
platform.js
modernizr

yepnope

JSON3
uri.js
moment.js
wait.js
Numeral.js
accounting.js
Upcast
taffydb
communist


鍵盤控制相關工具/函式庫

keys.js
mousestrap


事件相關輔助工具/函式庫
(mouse/touch/pointer)

pointer.js
thumbs.js
Hammer.js
Event.js
DeepTissue.js


CSS
關輔助工具/函式庫

-prefix-free
CSScomb


模組與指令碼載入工具/函式庫
(參見: Javascript Loaders Comparison)

require.js

almond

cajon
browserify
curl
shepherd-js
UMD (Universal Module Definition)

UMD-inspired Module Boilerplate

Inject
volo
controlJS
JAL
yepnope
AXEL
lmd
LazyJS


JavaScript
範本引擎 (template chooser)

handlebars
pure
dust
transparency
plates
mustache

hogan.js

icanhaz
doT.js
underscore
mold


UI
Widgets (comparison)

chico-ui
google closure
DHTMLX
extJS
kendoUI
qooxdoo
bootstrap components & javascript

Fuel UX

wijmo
YUI3 Widgets
dojo dijits
jQuery UI
Zino UI
JKIT
w2ui
basis.js
webix


測試執行工具
(Test Runners)

testem
Karma
intern


使用者自動化測試工具
(User Automated Testing)

casperJS


測試框架
(Testing Frameworks)

mocha
buster.js
qunit
jasmine
expect.js


其他測試函式庫
(Assertion Libraries)

chai
should
expect


遠端
DOM 與 JS 測試工具

browserstack
browserling/testling
selenium
JS test driver


JavaScript
效能檢測工具 (JS Performance Testing)

benchmark.js
jsPerf — JavaScript performance playground


JavaScript
自動化文件工具 (JS Auto Documentation Tools)

yuiDoc
docco

docco-husky

jsduck
jsdoc
node-jsdoc-toolkit
dox

markdox


CSS
自動化文件工具 (CSS Auto Documentation Tools)

kss
styledocco/


JavaScript
程式碼品質驗證工具 (JS Quality Validators)

jslint
jshint
JSLint Error Explanations
jscomplexity


CSS
品質驗證工具 (CSS Quality Validators)

csslint
recess


HTML
品質驗證工具 (HTML Quality Validators)

html-inspector


JavaScript
最佳化/最小化/壓縮工具 (JS Optimizer/Minification/Compression Tools)

google closure compiler
uglifyJS
Esprima


CSS
最佳化/最小化/壓縮工具 (CSS Optimizer/Minification/Compression Tools)

ycssmin
CSSO


CSS
前置處理器 (Languages Compiling to CSS)

Sass

compass
inuit.css
Bourbon: Mixins library for Sass
Neat: Semantic CSS grid framework

stylus

nib

less

LESS Elements: Mixins library for LESS
Semantic.gs: Semantic CSS grid system


JavaScript
前置處理器 (Languages Compiling to JS) (http://altjs.org/)

coffeeScript
dart
roy
ClojureScript
TypeScript


HTML
前置處理器 (Languages Compiling to HTML)

jade
haml
markdown
slim


純前端應用程式框架
(Front End Application Structure) (somewhat backend agnostic)

backbone

marionette
chaplin
aura
thorax

ember
knockout
canjs
spine
angularJS

ngmodules.org

maria
sparky.js
hoodie
lure.js


包含後端技術的前端應用程式框架
(Front End Application Structure) (with backend opinions)

derby (requires NodeJS)
flatiron (requires NodeJS)
batman.js (requires NodeJS)
jsMVC (requires Java)
montage (requires NodeJS)


整合式應用程式框架
(Full Stack Application Structure/Frameworks)

tower.js (requires NodeJS)
wakanda
meteor


前端
JavaScript 框架 (Frontend JavaScript Frameworks) (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)

YUI3
dojo
extJS
qooxdoo
google closure

參考資料/教學手冊/相容性套件/程式產生器等相關工具
(Reference/Guide/Polyfill/Generator Tools)

文件翻閱工具

DevDocs — API Documentation Reader
DocHub | Instant Documentation Search


瀏覽器相容性工具/文件
(Browser X Supports X)

http://caniuse.com/
http://html5please.com/
http://html5readiness.com/
html5test.com
http://www.browsersupport.net/
http://css3test.com/
Browserscope
HTML5 & CSS3 Support
CSS4-Selectors
HTML5 - Information and samples for HTML5 and related APIs
CSS3 - Information and samples
JavaScript tests & Compatibility tables
Cross Browser Handbook Knowledgebase
JS-Compatibility-Table
webbrowsercompatibility


HTML
語言參考 & 相容性工具 (HTML Language References & Polyfills)

HTML5 A technical specification for Web developers
HTML Living Standard
HTML5 A vocabulary and associated APIs for HTML and XHTML
HTML 5 Reference A Web Developer’s Guide to HTML 5
HyperText Markup Language (HTML), from Mozilla
HTML5 differences from HTML4
html5shiv
html5.js


HTML5
相關規格/參考資料與相容性套件 (HTML5 & Friends Specs/Ref & Polyfills)

webbrowsercompatibility.com
HTML5 & Friends, from Mozilla
html5rocks
HTML5 Cross Browser Polyfills
HTML5 - Information and samples for HTML5 and related APIs
HTML 5 Demos and Examples
SVG

SVG-edit browser editor
D3.js
raphaeljs
bonsaijs.org

Canvas

paper.js
fabric.js
kineticjs

webGL

three.js
The X Toolkit


DOM
相關規格/參考資料與相容性套件 (DOM Specs/Ref & Polyfills)

DOM Living Standard
DOM Parsing and Serialization Living Standard
DOM4
Document Object Model (DOM) Technical Reports, from W3C
Document Object Model, from Microsoft
Document Object Model, from Mozilla
Event compatibility tables


CSS
相關規格/參考資料與相容性套件 (CSS Specs/Ref & Polyfills)

CSS, from Mozilla
CSS SPEC-I-FI-CA-TIONS, from W3C
http://cssvalues.com/
CSS contents and browser compatibility
CSS Compatibility and Internet Explorer
HTML5 Cross Browser Polyfills (look for CSS)
CSS Selectors from CSS4 till CSS1
css3clickchart.com
CSS selectors


CSS
產生器 (CSS Generators)

patternify
Ultimate CSS Gradient Generator
patternizer
css3please.com
cssarrowplease.com
CSS Flexbox Please
CSS3 GENERATOR
css3generator.com
css3maker.com
CSS3 Sandbox
The Shapes of Css
CSS matic


CSS
編寫風格與慣例指引 (CSS Style/Conventions Guides)

kss
SMACSS
Google HTML/CSS Style Guide
idiomatic-css
Object-Oriented CSS
WordPress.org UI Style Guide
Starbucks Style Guide
Github CSS styleguide
General CSS notes, advice and guidelines


JavaScript
ES5 相關規格/參考資料與相容性套件 (JavaScript ES5 Specs/Ref & Polyfills)

ECMA-262-5 in detail
ECMAScript Language Specification
Annotated ECMAScript 5.1
ECMAScript 5 compatibility table
Internet Explorer ECMA-262 ECMAScript Language Specification (Fifth Edition) Standards Support Document
JavaScript Reference, from Mozilla
The sample usage of ECMA 5 Features Implemented in V8
Understanding JavaScript OOP
JavaScript, aka. Web ECMAScript Living Standard
es5-shim
poly
Augment.js


JavaScript
ES6 相關規格/參考資料與相容性套件 (JavaScript ES6 Specs/Ref & Polyfills)

ES6 what can be shimmed and what not
ECMAScript 6 compatibility table
Draft Specification for ES.next (Ecma-262 Edition 6)
es6-shim
ECMA-262 6th Edition/Draft


JavaScript
編寫風格與慣例指引 (JavaScript Style/Conventions Guides)

Google JavaScript Style Guide
Felix's Node.js Style Guide
idiomatic.js
Code Conventions for the JavaScript Programming Language
jsbeautifier
Airbnb JavaScript Style Guide


JSON
產生器

JSON Generator – tool for generating random JSON data


一般前端開發實務與開發習慣
(General Front-end Practices/Conventions)

isobar
Being A Web Developer
Front End Dev Guidelines
HTML and CSS code guide

效能調校

相關工具

Charles
webpagetest
PageSpeed Insights Browser Extensions
Chrome Developer Tools: Network Panel
Chrome Developer Tools: Timeline Panel
Chrome Developer Tools: Profiles Panel
DOM Monster
ImageOptim


準則與實務

Web Performance Best Practices
Best Practices for Speeding Up Your Web Site
High Performance Web Sites - 14 Rules for Faster-Loading Web Sites
Even Faster Web Sites

各式線上編輯器/開發工具
(REPL)

JS
REPL

repl.it
jsconsole.com
codeboot.org
continuum


JavaScript
線上編輯器 (JS focused editors)

jsfiddle
jsbin


正規表示式編輯器
(Regular Expression editors)

Scriptular
regexr
refiddle
RegexPlanet
Debuggex: The online visual regex tester. JavaScript, Python, and PCRE.


HTML/CSS
編輯器

dabblet
cssdesk


HTML/CSS/JS
編輯器

tinker.io
tinkerbin
Plunker
cssdeck
codepen


執行/測試代碼工具
(Execute/Test live code)

runnable


雲端開發工具
(Browser IDE's)

koding
cloud9 IDE
action.io


JSON
編輯器

jsoneditoronline.org
JSON Tinker
JSONmat

瀏覽器安全性
(Browser Security)

Browser Security Handbook

各式
CSS/HTML Hacks 整理 (Browser Hacks)

browserhacks.com

給前端開發人員的後端服務
(Backend services for frontend developers)

firebase
pusher
jaystack
parse
singly
cloud CMS
kinvey
stackmob
cloudmine
kumulos
deployd
backlift.com
hull.io
stormpath.com

API
開發與測試工具

apiary
mocky.io
FillText.com

JSON
資料操作/查詢工具 (JSON Query Tools)

TaffyDB
linq.js
json:select()
JSONiq
json-query
SpahQL

格式化工具

Online JavaScript beautifier
CSS Beautifier

转自 https://github.com/doggy8088/frontend-tools