各式 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
• Convert JSON to TypeScript Interface(https://json-5.com/json-to-typescript)

---

一般前端開發實務與開發習慣 (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
• JSON5 Editor

瀏覽器安全性 (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