All kinds of WEB front-end development tool finishing

Code editing tools (Coding tools) Workflow/build/Combine (workflow/builds/assemblers)

• Lumbar
• Brunch
• Grunt
  • Lineman
  • Yeoman
  • Takeoff
• Mimosa
• Codekit
• Livereload
• Stealjs
• Anvil.js
• Modjs
• Automaton
• Fire.app

Browser Suite Manager (Browser package Managers) (see: Front-End Packages manager Comparison)

• Bower
• Component
• Ender
• Jam

CSS base Type/plate

• Normalize.css

CSS Framework (see: Framework comparison or front-end CSS framework)

• Foundation
• Bootstrap
• HTML KickStart
• Kube
• Skeleton
• Baseline
• Gumby
• Groundwork
• Topcoat
• Purecss
• TukTuk
• Metro UI CSS
• workless
• 99lime
• SUSY

HTML Base Structure/plate

• HTML5 boilerplate
• Rock Hammer
• Html5bones
• Dcodes

Manipulating the DOM's relational library (Fyi:dojo, Yui, ext, Qooxdoo all have their own DOM tools)

• Jquery
  • jquery++
• Zepto
• Tire
• MooTools
• Domassistant
• Enders the Jeesh
  • Domready
  • Query
  • Bonzo
  • Bean

All kinds of JavaScript helper tools/function repositories

• 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

Keyboard Control tool/function library

• Keys.js
• Mousestrap

Event AIDS/function library (mouse/touch/pointer)

• Pointer.js
• Thumbs.js
• Hammer.js
• Event.js
• Deeptissue.js

CSS Help tool/function repository

• -prefix-free
• Csscomb

Modules and instructions loading tools/functions library (see: 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 engine (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

Testing tools (Test runners)

• Testem
• Karma
• Intern

User-driven testing tools (users automated testing)

• Casperjs

Test frame (testing frameworks)

• Mocha
• Buster.js
• Qunit
• Jasmine
• Expect.js

Other test function repositories (assertion Libraries)

• Chai
• Should
• Expect

Remote DOM and JS test tools

• Browserstack
• Browserling/testling
• Selenium
• JS test Driver

JavaScript Performance tool (JS performance testing)

• Benchmark.js
• Jsperf-javascript Performance Playground

JavaScript Automation file Tool (JS Auto documentation tools)

• Yuidoc
• Docco
  • Docco-husky
• Jsduck
• JSDoc
• Node-jsdoc-toolkit
• Dox
  • Markdox

CSS Auto File tool (CSS documentation tools)

• KSs
• styledocco/

JavaScript Code Quality Verification tool (JS quality validators)

• JSLint
• Jshint
• JSLint Error Explanations
• Jscomplexity

CSS Quality Assurance tool (CSS quality validators)

• Csslint
• Recess

HTML Quality assurance Tool (HTML quality validators)

• Html-inspector

JavaScript optimization/minimization/compression tool (JS optimizer/minification/compression tools)

• Google closure compiler
• Uglifyjs
• Esprima

CSS optimization/minimization/compression tools (CSS optimizer/minification/compression tools)

• Ycssmin
• Csso

CSS Front processor (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 Front Processor (Languages compiling to JS) (http://altjs.org/)

• Coffeescript
• Dart
• Roy
• Clojurescript
• TypeScript

HTML Front Processor (Languages compiling to HTML)

• Jade
• Haml
• Markdown
• Slim

Pure front-end application framework (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 framework with backend technology (Front end application Structure) (with backend opinions)

• Derby (requires NodeJS)
• Flatiron (Requires NodeJS)
• Batman.js (Requires NodeJS)
• JSMVC (Requires Java)
• Montage (Requires NodeJS)

Integrated application framework (full Stack application Structure/frameworks)

• Tower.js (Requires NodeJS)
• Wakanda
• Meteor

Front-end JavaScript Framework (Frontend JavaScript Frameworks) (aka Kitchen Sink Solutions, tools below provide a mixture of the things Above

• YUI3
• Dojo
• ExtJS
• Qooxdoo
• Google closure

Reference material/teaching manual/Compatibility kit/program builder and other related tools (Reference/guide/polyfill/generator tools) file Rollover tool

• DEVDOCS-API Documentation Reader
• Dochub | Instant Documentation Search

Browser compatibility tool/file (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 language References & Compatibility tools (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 related Specifications/References and compatibility Kit (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 related specs/References and compatibility Kit (DOM Specs/ref & Polyfills)

• DOM Living Standard
• DOM parsing and serialization Living standard
• DOM4
• Document Object Model (DOM) Technical Reports, from the
• Document Object Model, from Microsoft
• Document Object Model, from Mozilla
• Event Compatibility tables

CSS related specifications/References and compatibility Kit (CSS Specs/ref & polyfills)

• CSS, from Mozilla
• CSS Spec-i-fi-ca-tions, from the
• 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 Generator (CSS generators)

• Patternify
• Ultimate CSS Gradient Generator
• Patternizer
• Css3please.com
• Cssarrowplease.com
• CSS Flexbox
• CSS3 GENERATOR
• Css3generator.com
• Css3maker.com
• CSS3 Sandbox
• The Shapes of Css
• CSS Matic

CSS editing style and habits Guide (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 Related specs/References and compatibility Kit (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 the ECMA 5 Features implemented in V8
• Understanding JavaScript OOP
• JavaScript, aka. Web ECMAScript Living Standard
• Es5-shim
• Poly
• Augment.js

JavaScript ES6 Related specs/References and compatibility Kit (JavaScript ES6 specs/ref & polyfills)

• ES6 what can is shimmed and what is not
• ECMAScript 6 Compatibility table
• Draft specification for Es.next (Ecma-262 Edition 6)
• Es6-shim
• ECMA-262 6th Edition/draft

JavaScript editing style and habits guidelines (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 Generator

• JSON Generator–tool for generating random JSON data

General front-end development and the habit of front-end Practices/conventions

• Isobar
• Being A Web Developer
• Front End Dev Guidelines
• HTML and CSS Code guide

Performance Tuning Tools

• Charles
• Webpagetest
• Pagespeed Insights Browser Extensions
• Chrome Developer tools:network Panel
• Chrome Developer Tools:timeline Panel
• Chrome Developer tools:profiles Panel
• DOM Monster
• Imageoptim

The rules and the reality

• Web Performance Best Practices
• Best practices to speeding up Your Web Site
• High performance Web Sites-14 Rules for faster-loading web Sites
• Even Faster Web Sites

All kinds of online editor/development tool (REPL) JS REPL

• repl.it
• Jsconsole.com
• codeboot.org
• Continuum

JavaScript Online Editor (JS focused editors)

• Jsfiddle
• Jsbin

Regular Expression editor (Regular expression editors)

• Scriptular
• Regexr
• Refiddle
• Regexplanet
• Debuggex:the Online visual regex tester. JavaScript, Python, and PCRE.

HTML/CSS Editing device

• Dabblet
• Cssdesk

HTML/CSS/JS Editing device

• Tinker.io
• Tinkerbin
• Plunker
• Cssdeck
• Codepen

Execute/Test Code tool (execute/test Live Code)

• Runnable

Cloud-Side development tool (Browser IDE s)

• Koding
• cloud9 IDE
• Action.io

JSON Editor

• jsoneditoronline.org
• JSON Tinker
• Jsonmat

Browser safety (Browser security)

• Browser Security Handbook

All kinds of css/html Hacks finishing (Browser Hacks)

• Browserhacks.com

Backend service for front-end developers (backend services for frontend developers)

• Firebase
• Pusher
• Jaystack
• Parse
• singly
• Cloud CMS
• Kinvey
• Stackmob
• Cloudmine
• Kumulos
• Deployd
• Backlift.com
• Hull.io
• Stormpath.com

API Development and testing tools

• Apiary
• Mocky.io
• Filltext.com

JSON Information manipulation/Inquiry tool (JSON Query tools)

• Taffydb
• Linq.js
• Json:select ()
• Jsoniq
• Json-query
• Spahql

Formatting tools

• Online JavaScript Beautifier
• CSS Beautifier

Http://www.cnblogs.com/lenther2002/p/4676692.html

All kinds of WEB front-end development tool finishing