#各式 Web 前端開發工具整理
這裡收集了一系列各式各樣與「網頁前端」相關的開發工具、函式庫與參考文件，這些工具僅針對一般桌上型/筆記型電腦的顯示環境為主 (不含平板或手機等行動版網頁相關工具)。
##程式碼編寫工具 (Coding Tools)
######工作流程/建置/組合 (Workflow/Builds/Assemblers)
######瀏覽器套件管理員 (Browser Package Managers) (參見: Front-End Package Manager Comparison)
######CSS 基底樣式/樣板
######CSS 框架 (參見: 框架比較 或 前端 CSS 框架)
- foundation
- bootstrap
- HTML KickStart
- kube
- skeleton
- baseline
- gumby
- Groundwork
- topcoat
- purecss
- tuktuk
- Metro UI CSS
- workless
- 99lime
- SUSY
######HTML 基底結構/樣板
######操作 DOM 的相關函式庫 (FYI: dojo, yui, ext, qooxdoo 都有自己的 DOM 工具)
######各式 JavaScript 輔助工具/函式庫
- lo-dash
- lazy.js
- string.js
- boiler.js
- underscore
- sugar.js
- craft.js
- valentine
- platform.js
- modernizr
- JSON3
- uri.js
- moment.js
- wait.js
- Numeral.js
- accounting.js
- Upcast
- taffydb
- communist
######鍵盤控制相關工具/函式庫
######事件相關輔助工具/函式庫 (mouse/touch/pointer)
######CSS 關輔助工具/函式庫
######模組與指令碼載入工具/函式庫 (參見: Javascript Loaders Comparison)
- require.js
- cajon
- browserify
- curl
- shepherd-js
- UMD (Universal Module Definition)
- Inject
- volo
- controlJS
- JAL
- yepnope
- AXEL
- lmd
- LazyJS
######JavaScript 範本引擎 (template chooser)
######UI Widgets (comparison)
- chico-ui
- google closure
- DHTMLX
- extJS
- kendoUI
- qooxdoo
- bootstrap components & javascript
- wijmo
- YUI3 Widgets
- dojo dijits
- jQuery UI
- Zino UI
- JKIT
- w2ui
- basis.js
- webix
######測試執行工具 (Test Runners)
######使用者自動化測試工具 (User Automated Testing)
######測試框架 (Testing Frameworks)
######其他測試函式庫 (Assertion Libraries)
######遠端 DOM 與 JS 測試工具
######JavaScript 效能檢測工具 (JS Performance Testing)
######JavaScript 自動化文件工具 (JS Auto Documentation Tools)
######CSS 自動化文件工具 (CSS Auto Documentation Tools)
######JavaScript 程式碼品質驗證工具 (JS Quality Validators)
######CSS 品質驗證工具 (CSS Quality Validators)
######HTML 品質驗證工具 (HTML Quality Validators)
######JavaScript 最佳化/最小化/壓縮工具 (JS Optimizer/Minification/Compression Tools)
######CSS 最佳化/最小化/壓縮工具 (CSS Optimizer/Minification/Compression Tools)
######CSS 前置處理器 (Languages Compiling to CSS)
- Sass
- stylus
- less
- LESS Elements: Mixins library for LESS
- Semantic.gs: Semantic CSS grid system
######JavaScript 前置處理器 (Languages Compiling to JS) (http://altjs.org/)
######HTML 前置處理器 (Languages Compiling to HTML)
######純前端應用程式框架 (Front End Application Structure) (somewhat backend agnostic)
######包含後端技術的前端應用程式框架 (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)
######前端 JavaScript 框架 (Frontend JavaScript Frameworks) (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)
##參考資料/教學手冊/相容性套件/程式產生器等相關工具 (Reference/Guide/Polyfill/Generator Tools)
######文件翻閱工具
######瀏覽器相容性工具/文件 (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
######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 產生器
######一般前端開發實務與開發習慣 (General Front-end Practices/Conventions)
##效能調校
######相關工具
- 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
######JavaScript 線上編輯器 (JS focused editors)
######正規表示式編輯器 (Regular Expression editors)
- Scriptular
- regexr
- refiddle
- RegexPlanet
- Debuggex: The online visual regex tester. JavaScript, Python, and PCRE.
######HTML/CSS 編輯器
######HTML/CSS/JS 編輯器
######執行/測試代碼工具 (Execute/Test live code)
######雲端開發工具 (Browser IDE's)
######JSON 編輯器
##瀏覽器安全性 (Browser Security)
##各式 CSS/HTML Hacks 整理 (Browser Hacks)
##給前端開發人員的後端服務 (Backend services for frontend developers)
- firebase
- pusher
- jaystack
- parse
- singly
- cloud CMS
- kinvey
- stackmob
- cloudmine
- kumulos
- deployd
- backlift.com
- hull.io
- stormpath.com
##API 開發與測試工具
##JSON 資料操作/查詢工具 (JSON Query Tools)
##格式化工具
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent