各式 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:/ ...
随机推荐
- WCF入门教程四[WCF的配置文件]
一.概述 配置也是WCF编程中的主要组成部分.在 以往的.net应用程序中,我们会把DBConn和一些动态加载类及变量写在配置文件里.但WCF有所不同.他指定向客户端公开的服务,包括服务的地址. 服务 ...
- [NOIp 1998 提高组]Probelm 2 连接多位数【2011百度实习生笔试题】
/*====================================================================== [NOIp 1998 提高组]Probelm 2 连接 ...
- Hive(一):架构及知识体系
Hive是一个基于Hadoop的数据仓库,最初由Facebook提供,使用HQL作为查询接口.HDFS作为存储底层.mapReduce作为执行层,设计目的是让SQL技能良好,但Java技能较弱的分析师 ...
- 客户端TortoiseSVN的安装及使用方法
一.客户端TortoiseSVN的安装 运行TortoiseSVN程序,点击Next,下面的截图顺序即为安装步骤: 图1: 图2: 图3: 图4: 点击Finish按钮后会提示重启系统,其实不重启也没 ...
- 阿里云Mysql重置密码
1.关闭mysql服务 # service mysql stop 如果提示mysql: unrecognized service这样的错误提示. 先查看查找mysql.server,使用:find / ...
- 多线程编程之Windows同步方式
在Windows环境下针对多线程同步与互斥操作的支持,主要包括四种方式:临界区(CriticalSection).互斥对象(Mutex).信号量(Semaphore).事件对象(Event).下面分别 ...
- 51nod1313 完美串
一个N长的字符串S(N<=3000),只由'R','G','B'三种字符组成,即串中不存在除了这3个字符以外的其他字符.字符串S的子串substr(L,R)指S[L]S[L+1]S[L+2].. ...
- Nginx实现内参：为什么架构很重要？
Nginx在web开发者眼中就是高并发高性能的代名词,其基于事件的架构也被众多开发者效仿.我从Nginx的网站找到一篇技术文章将Nginx是怎样实现的,文章是Nginx的产品老大Owen Garret ...
- Php检测文件编码方法
<?php /** * 检测文件编码 * @param string $file 文件路径 * @return string|null 返回 编码名 或 null */ function det ...
- 黄聪：wordpress前台自定义用户，调用wp_editor上传附件提示【抱歉，出于安全的考虑,不支持此文件类型】错误。
1.直接禁用文件类型检测,在wp-config.php文件中,添加这样一句代码define('ALLOW_UNFILTERED_UPLOADS', true); 2.在functions.php里面, ...