This content has evolved into a book called "Front-end Handbook": https://www.gitbook.com/book/frontendmasters/front-end-handbook/details
#Landscaping With Frontend Development Tools
An opinionated list of tools for frontend (i.e. html, js, css) desktop/laptop (i.e. does not include tablet or phone yet) web development
##Coding Tools
######Workflow/Builds/Assemblers/Task-runners/Dev Opts
- bud
- lumbar
- brunch
- grunt
- gulpjs
- broccoli
- mimosa
- codeKit
- liveReload
- stealJS
- anvil.js
- modjs
- nodefront
- AUTOMATON
- volo
- roots
- middleman
- fb-flo
######Browser Package Managers (checkout: Front-End Package Manager Comparison)
######CSS Base/Boilerplate
######CSS Frameworks (Comparison or Front-end CSS frameworks)
- foundation
- bootstrap
- HTML KickStart
- kube
- skeleton
- baseline
- gumby
- Groundwork
- topcoat
- purecss
- tuktuk
- Metro UI CSS
- Flat UI Kit
- workless
- 99lime
- ink
- Semantic UI
- uikit
- cascade-framework
- minfwk
- layers
######HTML Base/Boilerplate
######Frontend HTML/CSS/JS Base/Boilerplate
######DOM Scripting (FYI dojo, yui, ext, qooxdoo all have DOM tools)
######JS Helpers
- lo-dash
- fn.js
- 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
- Catiline.js
- XRegExp
- duckyjs
- mathjs
- spectra.js
######Keyboard Helpers
######Event (mouse/touch/pointer) Helpers
######CSS Helpers
######Module/Script Dependency Loaders (Javascript Loaders Comparison)
- require.js
- cajon
- browserify
- curl
- shepherd-js
- UMD (Universal Module Definition)
- Inject
- controlJS
- JAL
- yepnope
- AXEL
- lmd
- LazyJS
- jspm.io
- lazy.js
- webpack
- systemjs
######Templates (template chooser)
- handlebars
- pure
- dust
- transparency
- plates
- mustache
- icanhaz
- doT.js
- underscore
- mold
- nunjucks
- Swig
- jtmpl
- teddy
######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
- alloyui
- JavaScript (from sync fusion)
- jQWidgets
- formstone
- winJS
- assets.cms.gov
- zippy ui
######Testing Frameworks
######Browser Testing & Browser Automated Testing & Browser Screen Captures
- casperJS
- Selenium
- phantomJS
- saucelabs
- browserstack
- browserling
- DalekJS
- testling-ci
- crossbrowsertesting.com
- nightwatch.js
- Protractor
######Tests Runners
######Test spies, stubs and mocks
######Code Coverage
######Code Complexity & Reports
######Assertion Libraries
######JS Performance Testing
######JS Auto Documentation Tools
######CSS Auto Documentation Tools (THE Style Guide GUIDE)
######JS Quality Validators
######CSS Quality Validators
######HTML Quality Validators
######JS Optimizer/Minification/Compression Tools
######CSS Optimizer/Minification/Compression Tools
######Languages Compiling to CSS
- Sass
- stylus
- less
- LESS Elements: Mixins library for LESS
- Semantic.gs: Semantic CSS grid system
- Absurd
- myth
######Languages Compiling to JS (http://altjs.org/)
######Languages Compiling to HTML
######Routers
######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
######Frontend JavaScript Frameworks (aka Kitchen Sink Solutions, tools below provide a mixture of the things above)
######Front End Application monitoring
##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 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 & 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 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 Specs/Ref & Polyfills
- CSS, from Mozilla
- CSS SPECIFICATIONS, 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 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
- extractcss.com
######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
- yelp styleguide
######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 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
- ECMAScript Support Matrix
######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
- Meteor Style Guide
######General Front-end Practices/Conventions
##Performance
######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
######Rules/Practices
- 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
- google web fundamentals
##Online REPL's/editors/IDE's
######JS REPL
######JS focused editors
######Regular Expression editors
######HTML/CSS editors
######HTML/CSS/JS editors
######Execute/Test live code
######Browser IDE's
######JSON editors
##Browser Security
##Browser Hacks
##API first, CMS Service
##Backend services for front-end developers
- firebase
- pusher
- jaystack
- parse
- singly
- cloud CMS
- kinvey
- stackmob
- cloudmine
- kumulos
- deployd
- backlift.com
- hull.io
- stormpath.com
- dreamfactory
- userapp.i
- goinstant
- myjson.com
##API tools
##API Mocking
##Image Mocking
##JSON Query Tools
##JSON Validation Tools
##Front-end DB's
##Catalog/Collection of JavaScript Libs and Tools
##Static Site Generators