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