#各式 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
Canvas
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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!