各式 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)
格式化工具
http://www.cnblogs.com/lenther2002/p/4676692.html
各式 Web 前端開發工具整理的更多相关文章
- 转 WEB前端性能分析--工具篇
在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...
- Web前端开发必备工具推荐
http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...
- Brackets 1.8 开源+免费的Web前端网页文本编辑工具
Brackets 1.8 开源+免费的Web网页文本编辑工具 -------------->> ---------------------- A modern, open source ...
- web前端开发必备压缩工具整理
影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小.网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作.本文 ...
- web前端攻城狮整理的收藏夹
作为一名web前端开发工程师你的收藏夹存对了吗?下面是一份互联网上流传甚广的web前端开发收藏夹资源,包含学习网站.JS库.常用工具.常用插件.资讯书籍等资源.速速转存吧~ 一.学习网站 W3 ...
- 关于WEB前端开发的工具
俗话说:"工谷善其事,先必利其器."一个用得顺手的工具,确实能为我们的开发带来方 便,更重要的是会让我们更加享受工具开发过程中所带来的乐趣. 1.编码工具: 记事本之类的编辑器都可 ...
- WEB前端常用JavaScript代码整理
文章目录 html代码用JS动态加载进页面 JS判断用户访问的是PC还是mobile或者微信浏览器 判断浏览器的简单有效方法 点击某个div区域之外,隐藏该div 如何在手机上禁止浏览器的网页滚动 改 ...
- 简单理解 Webpack，以及Web前端使用打包工具的原因
Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...
- web前端开发常用工具
http://www.gbin1.com/technology/javautilities/20120806-resource-for-front-end-developer/ 冒泡样式 http:/ ...
随机推荐
- HTML和JSON的数据交互-jsonp跨域
HTML和json的数据交互 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapi ...
- 如何用Transformer+从PDF文档编辑数据
ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可使用该软件从PDF文档编辑机密信息,然后再发布它们,文本和图像均可编辑,本文将为 ...
- 半透明背景(兼容IE)
在CSS3中有rgba属性,可以很方便的实现背景透明,但对于IE家族来说却不是那么容易实现: FireFox.chrome.opera.safari 凡是对支持CSS3且支持W3标准的浏览器都可以现实 ...
- 使用iBATIS3.0完成增删改查
使用iBATIS3.0完成增删改查 iBATIS3.0和以前的版本有一些改变,不过学过以前版本的再学习3.0应该不是太难,3.0要求JDK1.5支持,因为其中增加了注解和泛型,这些都是JDK1.5才有 ...
- 016. asp.net的验证控件
RequiredFileldValidator: 检查某个字段是否输入; 空值检查 主要属性: ControlToValidate:要验证的控件 ErrorMessage:错误提示信息 Compare ...
- 微软发布了ASP.NET WebHooks预览版
微软 近期发布了ASP.NET WebHooks的预览版 ,这是一个可用于创建及使用Webhook功能的库.WebHooks支持MVC 5及WebApi 2. Webhook是一种通过HTTP实现用户 ...
- MongoDB 入门与实例
一.准备工作 1. 下载mongoDB 下载地址:http://www.mongodb.org/downloads 选择合适你的版本 相关文档:http://www.mongodb.org/displ ...
- tnsnames linux找的位置顺序
In Sue’s article, it states that SQLDeveloper looks for a tnsnames.ora in the following places in th ...
- DataRow[] 转为数组
DataRow[] rows = dt.Select("1=1"); ].ToString()).ToArray();
- C#与JAVA平台RSA算法交互示例
很久以前的文章中,演示了如何对于.net和win32下面的delphi的RSA互操作性的实现,对于C#和JAVA之前的RSA加密解密也是很简单的,一般都采用了标准的规范,所以在互操作性方面是很方便的. ...