各式Web前端開發工具整理
各式 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)
格式化工具
轉自 https://github.com/doggy8088/frontend-tools
相關文章
- WEB 前端開發外掛整理Web前端
- web前端開發工具有哪些Web前端
- web前端開發工具有哪些？8個好用的web前端開發常用工具Web前端
- Web前端開發設計常用軟體工具Web前端
- web前端開發Web前端
- Web前端培訓：有哪些好用的前端開發工具呢？Web前端
- Web前端開發工程師常用技術網站整理Web前端工程師網站
- 好程式設計師分享Web前端開發工具程式設計師Web前端
- 牆裂推薦：Web前端開發必備工具Web前端
- Web前端開發概述Web前端
- web前端開發規範Web前端
- Web前端開發（五）-- jQueryWeb前端jQuery
- Web前端開發之EasyUIWeb前端UI
- 【web前端】面題整理（2）Web前端
- web前端開發需要哪些工具和需要學習什麼？Web前端
- 2012年度最佳Web前端開發工具和框架Web前端框架
- 通宵整理的前端開發技能樹前端
- 好程式設計師web培訓簡述web前端開發工具有哪些程式設計師Web前端
- web前端開發的六大開發工具，四大工作職責！Web前端
- 好程式設計師web前端分享移動前端開發和web前端開發的區別程式設計師Web前端
- web前端培訓：常用的Web前端開發框架有哪些?Web前端框架
- Web前端開發框架有哪些？Web前端框架
- web前端開發面試題分享Web前端面試題
- Web前端開發Chrome外掛Web前端Chrome
- web前端開發框架那些事Web前端框架
- Web前端基礎知識整理Web前端
- Web前端面試題整理2Web前端面試題
- Web開發輔助工具Web
- WebStorm for Mac(前端開發工具)WebORMMac前端
- [?]前端開發工具推薦前端
- 前端-選擇開發工具前端
- 前端開發工具選擇前端
- 前端開發工具一覽前端
- 前端常用工具整理前端
- Web前端的水有多深？再議Web開發Web前端
- 十年web老兵整理的web前端文章Web前端
- iOS客戶端開發與Web前端開發iOS客戶端Web前端
- 移動前端開發和Web前端開發的不同點介紹前端Web